淺談網(wǎng)頁(yè)設(shè)計(jì)中的簡(jiǎn)約之美
2015/1/12 19:24:04來(lái)源:騰訊TGideas
隨著網(wǎng)頁(yè)技術(shù)的不斷發(fā)展,網(wǎng)頁(yè)設(shè)計(jì)的趨勢(shì)在改變,扁平化、響應(yīng)式、視覺差滾動(dòng)、卡片式等給設(shè)計(jì)師帶來(lái)了更多的發(fā)揮空間。簡(jiǎn)約的設(shè)計(jì),也以其簡(jiǎn)潔直觀、輕薄美觀等特點(diǎn),越來(lái)越受到設(shè)計(jì)師的追捧和大眾的喜愛。
那么什么是簡(jiǎn)約設(shè)計(jì)?
簡(jiǎn)約設(shè)計(jì)是將設(shè)計(jì)回歸本質(zhì)的一種設(shè)計(jì)理念。簡(jiǎn)約并是對(duì)內(nèi)容的簡(jiǎn)單刪減,而是提煉設(shè)計(jì)精華,滿足美觀實(shí)用的本質(zhì)訴求。在網(wǎng)頁(yè)中,簡(jiǎn)約的設(shè)計(jì),往往具清晰的頁(yè)面結(jié)構(gòu)、簡(jiǎn)單的交互操作等特征,在滿足傳遞信息的同時(shí),從視覺體驗(yàn)的角度,為用戶帶來(lái)輕松、愉悅的美感。
那么在網(wǎng)頁(yè)中,怎樣做到簡(jiǎn)約呢?
下面是一些最常見的方式:
http://dnf.qq.com/act/a20141105career/
例如:Nike為打造舒適的購(gòu)物體驗(yàn),每一頁(yè)用簡(jiǎn)單的大標(biāo)題和背景相結(jié)合,讓女人能很輕松的找到她們的SIZE,即簡(jiǎn)潔又直白;
https://www.nike.com/cdp/nikepro360fit/us/en_us/#/
http://speed.qq.com/act/a20120501brand/
例如,Quechua山地運(yùn)動(dòng)品牌,通過幾張照片和簡(jiǎn)單文字的說(shuō)明,將Quechua帳篷的特點(diǎn)及所處環(huán)境真實(shí)體現(xiàn),仿佛一場(chǎng)美妙之旅讓人心動(dòng)。
http://www.quechua.com/2seconds
3,留白
留白,是頁(yè)面構(gòu)圖的重要組成部分,適當(dāng)?shù)募尤肓舭?,能讓文字便于閱讀,讓頁(yè)面各元素得到很好的區(qū)分,這樣的設(shè)計(jì)通俗易懂,有得于提升一個(gè)頁(yè)面的品質(zhì)感。
例如:“獸人必須死”首發(fā)引導(dǎo)頁(yè)面,周圍大面積留白,并結(jié)合簡(jiǎn)潔的排版,讓頁(yè)面模塊之間區(qū)分明顯,視覺集中,很好的給用戶引導(dǎo),給人一種精致和輕松感。
例如:BRAUN博朗,整個(gè)頁(yè)面,簡(jiǎn)潔的圖片與文字的排版,讓視線非常集中,這樣用戶快速的將注意力集中到內(nèi)容上去,非常符合他們的主題“Less,but better”,給人留下回味、想象的空間。
http://t7.qq.com/act/a20131120exp/
例如:LINCOLN電影網(wǎng)站,運(yùn)用最常用的黑白兩種顏色搭配,讓網(wǎng)頁(yè)如此簡(jiǎn)約大方,給人留下無(wú)限想象空間。
http://www.thelincolnmovie.com/
5、“纖薄”文本框和銨鈕
在頁(yè)面中,將文本框或者銨鈕做得輕薄簡(jiǎn)潔,或?yàn)榧兩蛘邲]有紋理的一層薄線框。這種設(shè)計(jì)在確保功能性的同時(shí),給人一種纖細(xì)的視覺美感。
例如:“sylviaspitzbart”化妝工作室,利用纖細(xì)線框,將內(nèi)容很好的分割,頁(yè)面簡(jiǎn)潔而大方又不失品質(zhì)。
http://www.sylviaspitzbart.at/academy/
網(wǎng)頁(yè)中的簡(jiǎn)約,表現(xiàn)形式還很多,通常多種結(jié)合起來(lái)使用,這里就不一一說(shuō)明了。想要做到簡(jiǎn)約,也并不是一件簡(jiǎn)單的事情,它需要我們用心去發(fā)現(xiàn)、感受、割舍、提煉,從視覺體驗(yàn)的角度去感受網(wǎng)頁(yè)的簡(jiǎn)約之美,把信息更合理、有效的傳遞給用戶,給用戶帶來(lái)輕松、實(shí)用、愉悅的體驗(yàn)。
那么什么是簡(jiǎn)約設(shè)計(jì)?
簡(jiǎn)約設(shè)計(jì)是將設(shè)計(jì)回歸本質(zhì)的一種設(shè)計(jì)理念。簡(jiǎn)約并是對(duì)內(nèi)容的簡(jiǎn)單刪減,而是提煉設(shè)計(jì)精華,滿足美觀實(shí)用的本質(zhì)訴求。在網(wǎng)頁(yè)中,簡(jiǎn)約的設(shè)計(jì),往往具清晰的頁(yè)面結(jié)構(gòu)、簡(jiǎn)單的交互操作等特征,在滿足傳遞信息的同時(shí),從視覺體驗(yàn)的角度,為用戶帶來(lái)輕松、愉悅的美感。
那么在網(wǎng)頁(yè)中,怎樣做到簡(jiǎn)約呢?
下面是一些最常見的方式:
- 大標(biāo)題
http://dnf.qq.com/act/a20141105career/
例如:Nike為打造舒適的購(gòu)物體驗(yàn),每一頁(yè)用簡(jiǎn)單的大標(biāo)題和背景相結(jié)合,讓女人能很輕松的找到她們的SIZE,即簡(jiǎn)潔又直白;
https://www.nike.com/cdp/nikepro360fit/us/en_us/#/
- 、大背景
大圖片背景,是目前應(yīng)用最多的一種網(wǎng)頁(yè)呈現(xiàn)方式。將整張大圖片作為背景,不僅能產(chǎn)生強(qiáng)烈的視覺沖擊力,還可以對(duì)網(wǎng)頁(yè)內(nèi)容起到一個(gè)很好的補(bǔ)充,有效的突出品牌形象。
http://speed.qq.com/act/a20120501brand/
例如,Quechua山地運(yùn)動(dòng)品牌,通過幾張照片和簡(jiǎn)單文字的說(shuō)明,將Quechua帳篷的特點(diǎn)及所處環(huán)境真實(shí)體現(xiàn),仿佛一場(chǎng)美妙之旅讓人心動(dòng)。
http://www.quechua.com/2seconds
3,留白
留白,是頁(yè)面構(gòu)圖的重要組成部分,適當(dāng)?shù)募尤肓舭?,能讓文字便于閱讀,讓頁(yè)面各元素得到很好的區(qū)分,這樣的設(shè)計(jì)通俗易懂,有得于提升一個(gè)頁(yè)面的品質(zhì)感。
例如:“獸人必須死”首發(fā)引導(dǎo)頁(yè)面,周圍大面積留白,并結(jié)合簡(jiǎn)潔的排版,讓頁(yè)面模塊之間區(qū)分明顯,視覺集中,很好的給用戶引導(dǎo),給人一種精致和輕松感。
例如:BRAUN博朗,整個(gè)頁(yè)面,簡(jiǎn)潔的圖片與文字的排版,讓視線非常集中,這樣用戶快速的將注意力集中到內(nèi)容上去,非常符合他們的主題“Less,but better”,給人留下回味、想象的空間。
- ,單純色彩
- 不同的顏色帶給人不同的心理感受。當(dāng)我們看慣色彩絢麗、對(duì)比鮮明的網(wǎng)頁(yè)之后,靜下來(lái),回歸最自然的狀態(tài),運(yùn)用單純的色彩,會(huì)有不一樣的體會(huì)和感悟。
http://t7.qq.com/act/a20131120exp/
例如:LINCOLN電影網(wǎng)站,運(yùn)用最常用的黑白兩種顏色搭配,讓網(wǎng)頁(yè)如此簡(jiǎn)約大方,給人留下無(wú)限想象空間。
http://www.thelincolnmovie.com/
5、“纖薄”文本框和銨鈕
在頁(yè)面中,將文本框或者銨鈕做得輕薄簡(jiǎn)潔,或?yàn)榧兩蛘邲]有紋理的一層薄線框。這種設(shè)計(jì)在確保功能性的同時(shí),給人一種纖細(xì)的視覺美感。
例如:“sylviaspitzbart”化妝工作室,利用纖細(xì)線框,將內(nèi)容很好的分割,頁(yè)面簡(jiǎn)潔而大方又不失品質(zhì)。
http://www.sylviaspitzbart.at/academy/
網(wǎng)頁(yè)中的簡(jiǎn)約,表現(xiàn)形式還很多,通常多種結(jié)合起來(lái)使用,這里就不一一說(shuō)明了。想要做到簡(jiǎn)約,也并不是一件簡(jiǎn)單的事情,它需要我們用心去發(fā)現(xiàn)、感受、割舍、提煉,從視覺體驗(yàn)的角度去感受網(wǎng)頁(yè)的簡(jiǎn)約之美,把信息更合理、有效的傳遞給用戶,給用戶帶來(lái)輕松、實(shí)用、愉悅的體驗(yàn)。
[教程作者:莫]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/di2622.html
本文地址:http://m.likemindfilms.com/tutorial/di2622.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺設(shè)計(jì)分享—專題頁(yè)面設(shè)計(jì)篇
這些是最新的
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏
最熱門的教程