您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計教程 >> 設(shè)計理論 >> 瀏覽設(shè)計教程

淺談網(wǎng)頁設(shè)計中的簡約之美

隨著網(wǎng)頁技術(shù)的不斷發(fā)展,網(wǎng)頁設(shè)計的趨勢在改變,扁平化、響應(yīng)式、視覺差滾動、卡片式等給設(shè)計師帶來了更多的發(fā)揮空間。簡約的設(shè)計,也以其簡潔直觀、輕薄美觀等特點,越來越受到設(shè)計師的追捧和大眾的喜愛。
那么什么是簡約設(shè)計?
簡約設(shè)計是將設(shè)計回歸本質(zhì)的一種設(shè)計理念。簡約并是對內(nèi)容的簡單刪減,而是提煉設(shè)計精華,滿足美觀實用的本質(zhì)訴求。在網(wǎng)頁中,簡約的設(shè)計,往往具清晰的頁面結(jié)構(gòu)、簡單的交互操作等特征,在滿足傳遞信息的同時,從視覺體驗的角度,為用戶帶來輕松、愉悅的美感。
那么在網(wǎng)頁中,怎樣做到簡約呢?
下面是一些最常見的方式:
  1. 大標(biāo)題
  2.  
  3.  
379e82073fd2c65e5bb6fb65c86e319e1419756165.jpg
http://dnf.qq.com/act/a20141105career/
例如:Nike為打造舒適的購物體驗,每一頁用簡單的大標(biāo)題和背景相結(jié)合,讓女人能很輕松的找到她們的SIZE,即簡潔又直白;
 
1419755931_31.jpg
https://www.nike.com/cdp/nikepro360fit/us/en_us/#/
 
  1. 、大背景
    大圖片背景,是目前應(yīng)用最多的一種網(wǎng)頁呈現(xiàn)方式。將整張大圖片作為背景,不僅能產(chǎn)生強(qiáng)烈的視覺沖擊力,還可以對網(wǎng)頁內(nèi)容起到一個很好的補(bǔ)充,有效的突出品牌形象。
  2.  
1419755956_68.jpg
http://speed.qq.com/act/a20120501brand/
例如,Quechua山地運(yùn)動品牌,通過幾張照片和簡單文字的說明,將Quechua帳篷的特點及所處環(huán)境真實體現(xiàn),仿佛一場美妙之旅讓人心動。
1419755974_2.jpg
http://www.quechua.com/2seconds
 
3,留白
留白,是頁面構(gòu)圖的重要組成部分,適當(dāng)?shù)募尤肓舭?,能讓文字便于閱讀,讓頁面各元素得到很好的區(qū)分,這樣的設(shè)計通俗易懂,有得于提升一個頁面的品質(zhì)感。
例如:“獸人必須死”首發(fā)引導(dǎo)頁面,周圍大面積留白,并結(jié)合簡潔的排版,讓頁面模塊之間區(qū)分明顯,視覺集中,很好的給用戶引導(dǎo),給人一種精致和輕松感。
1419756003_33.jpg
例如:BRAUN博朗,整個頁面,簡潔的圖片與文字的排版,讓視線非常集中,這樣用戶快速的將注意力集中到內(nèi)容上去,非常符合他們的主題“Less,but better”,給人留下回味、想象的空間。1419756021_78.jpg
 
 
  1. ,單純色彩
  2. 不同的顏色帶給人不同的心理感受。當(dāng)我們看慣色彩絢麗、對比鮮明的網(wǎng)頁之后,靜下來,回歸最自然的狀態(tài),運(yùn)用單純的色彩,會有不一樣的體會和感悟。
  3.  
1419756065_51.jpg
http://t7.qq.com/act/a20131120exp/
例如:LINCOLN電影網(wǎng)站,運(yùn)用最常用的黑白兩種顏色搭配,讓網(wǎng)頁如此簡約大方,給人留下無限想象空間。
1419756086_42.jpg
http://www.thelincolnmovie.com/
 
5、“纖薄”文本框和銨鈕
在頁面中,將文本框或者銨鈕做得輕薄簡潔,或為純色或者沒有紋理的一層薄線框。這種設(shè)計在確保功能性的同時,給人一種纖細(xì)的視覺美感。
例如:“sylviaspitzbart”化妝工作室,利用纖細(xì)線框,將內(nèi)容很好的分割,頁面簡潔而大方又不失品質(zhì)。
1419756106_44.jpg
http://www.sylviaspitzbart.at/academy/
網(wǎng)頁中的簡約,表現(xiàn)形式還很多,通常多種結(jié)合起來使用,這里就不一一說明了。想要做到簡約,也并不是一件簡單的事情,它需要我們用心去發(fā)現(xiàn)、感受、割舍、提煉,從視覺體驗的角度去感受網(wǎng)頁的簡約之美,把信息更合理、有效的傳遞給用戶,給用戶帶來輕松、實用、愉悅的體驗。 
[教程作者:莫]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學(xué)習(xí)與參考,請勿用于商業(yè)用途!
本文地址:http://irelandcustomcontracting.com/tutorial/di2622.html
不同時代,不同尺寸:多終端平臺網(wǎng)頁趨勢
運(yùn)營設(shè)計!掏空消費者口袋
圖趣網(wǎng)微信
建議反饋
×