淺談扁平化設(shè)計(jì)

隨著互聯(lián)網(wǎng)的高速發(fā)展，我們可以看到質(zhì)感厚重，圖層樣式繁多的網(wǎng)站越來(lái)越少，反之各種輕質(zhì)感，布局大膽、創(chuàng)意新穎、的網(wǎng)站慢慢進(jìn)入了大家的視野，人類發(fā)展至今，人們的審美、時(shí)尚標(biāo)準(zhǔn)總是無(wú)時(shí)無(wú)刻不在改變，互聯(lián)網(wǎng)也是這樣，下面這篇文章將要給大家談?wù)?013網(wǎng)頁(yè)設(shè)計(jì)新風(fēng)向?“扁平化設(shè)計(jì)”(flat?design)

什么是扁平化設(shè)計(jì)

這里簡(jiǎn)單介紹下關(guān)于扁平化的概念，所謂“扁平化設(shè)計(jì)”一詞所指的是拋棄那些已經(jīng)流行多年的漸變、陰影、高光等擬真視覺(jué)效果，從而打造出一種看上去更“平”的界面。善于用顏色去鼓勵(lì)用戶探索。

為什么選擇扁平化設(shè)計(jì)

>?快速快速高效是扁平化設(shè)計(jì)的一個(gè)很重要的基因，時(shí)間就是金錢，如何在信息更新如此之快的互聯(lián)網(wǎng)即時(shí)的跟上它的腳步呢?--?快速這也是很多互聯(lián)網(wǎng)巨頭們?yōu)槭裁催x擇扁平化設(shè)計(jì)的原因之一。以我們暢游鹿鼎記官網(wǎng)為例,早期的官網(wǎng)按鈕質(zhì)感較重，圖層樣式較多，很影響加載時(shí)間,根據(jù)統(tǒng)計(jì)頁(yè)面大小在357K。

下圖是我們暢游較最新的鹿鼎記官網(wǎng),明顯可以看到和老版兩者的區(qū)別吧~?在保證整體視覺(jué)的情況下，盡可能的精簡(jiǎn)圖層樣式，統(tǒng)計(jì)的頁(yè)面大小在214KB。同時(shí)減少頁(yè)面請(qǐng)求的個(gè)數(shù)（每張圖就是一個(gè)請(qǐng)求）從老版的26個(gè)優(yōu)化到14個(gè)，優(yōu)化比在40%以上。

>?更迭快低成本運(yùn)作

每一次游戲版本更新我們都會(huì)對(duì)應(yīng)對(duì)官網(wǎng)進(jìn)行設(shè)計(jì)改版。采用扁平化設(shè)計(jì),我們可以再最短的時(shí)間內(nèi)更新官網(wǎng)，只需要給制作提供相應(yīng)的色值就行，大大的節(jié)省了項(xiàng)目時(shí)間,也方便下次再更新。

>?信息突出

上圖是2013年3月份的雅虎國(guó)際首頁(yè)的改版

上圖是facebook概念版

微軟2012年的品牌刷新官網(wǎng)首頁(yè)

Nest

通過(guò)顏色的對(duì)比，大小不同的字號(hào)，讓重要的信息放在首要位置，不重要的元素弱化，除了幾個(gè)主要的動(dòng)作按鈕當(dāng)中使用了輕微的斜面效果以外，其他界面元素全部采用扁平風(fēng)格,這樣的設(shè)計(jì)讓訪問(wèn)者可以很容易的將注意力聚焦在品和信息上，而不會(huì)被網(wǎng)站界面上的視覺(jué)元素所干擾。從而突出核心信息和操作。這些都增強(qiáng)了網(wǎng)站的易讀性和可讀性。

>?簡(jiǎn)潔清晰簡(jiǎn)潔的東西總是讓人喜愛(ài)的，在一個(gè)設(shè)計(jì)簡(jiǎn)潔邏輯清晰的網(wǎng)站你能很快找到自己所要的東西，而且能在使用過(guò)程中減少犯錯(cuò)。從而提高用戶體驗(yàn),如下圖

由于網(wǎng)站比較長(zhǎng)，我就只截了一部分，有興趣的同學(xué)可以輸入下面的鏈接地址去網(wǎng)站上去看看。

圖一傳送門:?https://layervault.com
圖二傳送門:?http://www.rdio.com
圖三傳送門:?http://lorenzoverzini.com
圖四傳送門:?http://builtbybuffalo.com

?如何打造扁平化設(shè)計(jì)

在以往的工作中，我曾參考和研究了很多關(guān)注扁平化的設(shè)計(jì)，最后跟大家分享下關(guān)于扁平化設(shè)計(jì)的一些小心得，希望能對(duì)大家有所幫助。

• 少點(diǎn)再少點(diǎn)

可能大伙剛著手設(shè)計(jì)時(shí)，不知道怎么動(dòng)手如何個(gè)減法，元素之間如何取舍，可以先做“加法”，然后一點(diǎn)一點(diǎn)減，多問(wèn)問(wèn)自己這塊是不是一定需要擺放這個(gè)元素，是錦上添花還是畫(huà)蛇添足。

• 大膽點(diǎn)再大膽點(diǎn)

放任天馬行空的思維奔跑，優(yōu)秀的設(shè)計(jì)是創(chuàng)新。我個(gè)人比較喜歡蘋(píng)果首席設(shè)計(jì)Jony?Ive的方法：先打破以前的框架。比如，說(shuō)設(shè)計(jì)一個(gè)飯盒,那他先要把“盒”這個(gè)概念抹去，不要被這個(gè)“盒”所困住思維，只想這個(gè)器皿最佳的使用方式和設(shè)計(jì)形式。比如提到音樂(lè)不要只想到音符或CD要想想有沒(méi)有其他更好的更創(chuàng)新的方式來(lái)呈現(xiàn)它。

• 細(xì)點(diǎn)再細(xì)點(diǎn)

設(shè)計(jì)中所謂細(xì)節(jié)決定成敗，有時(shí)候一點(diǎn)點(diǎn)行距一點(diǎn)點(diǎn)色值的不相同也會(huì)對(duì)整體視覺(jué)效果照成很大的影響，花時(shí)間微調(diào)細(xì)節(jié)是很有必要的。

• 酷點(diǎn)再酷點(diǎn)

酷并不是只是視覺(jué)，而是更合理的交互方式，由于少了些質(zhì)感，所以顏色也變得尤為重要了，運(yùn)用搭配合理的顏色能起到?jīng)Q定作用，設(shè)計(jì)師完成設(shè)計(jì)后，網(wǎng)站只完成了50%，后期要是能在頁(yè)面上好的互動(dòng)效果，能給整個(gè)網(wǎng)站增色不少。

后記

這里跟大家聊下設(shè)計(jì)在產(chǎn)品中的應(yīng)用，習(xí)慣了做視覺(jué)的設(shè)計(jì)師做產(chǎn)品可能需要適應(yīng)階段，對(duì)產(chǎn)品的理解，主次需求的分析，交互的表現(xiàn)方式，數(shù)據(jù)研究等，做慣了產(chǎn)品設(shè)計(jì)的設(shè)計(jì)師，做純視覺(jué)同樣需要適應(yīng)階段，各種炫酷的表現(xiàn)手法，主次信息的排列，空間層次的拉開(kāi)版面形式的創(chuàng)新，其實(shí)設(shè)計(jì)的好壞不是以視覺(jué)來(lái)評(píng)定，不同產(chǎn)品對(duì)視覺(jué)有著不同的需求，游戲類型的設(shè)計(jì)師，可能需要的是對(duì)色和視覺(jué)表達(dá)要更強(qiáng)一些，也就是你們pm常跟你說(shuō)的我要好看的，用戶有興趣玩的，而產(chǎn)品類的ui設(shè)計(jì)師，更多注重的是設(shè)計(jì)的層級(jí)，信息的邏輯，設(shè)計(jì)風(fēng)格的統(tǒng)一、延續(xù)和拓展，也就是pm要求的，信息交代清楚，層級(jí)分明，交互簡(jiǎn)潔明了。減少用戶的思考，降低用戶學(xué)習(xí)成本,其實(shí)不管任何設(shè)計(jì)師，都是在為用戶服務(wù)，都是做用戶體驗(yàn)設(shè)計(jì)，同樣的，不管目前流行什么設(shè)計(jì)風(fēng)格，我們都要以自身產(chǎn)品的特點(diǎn)出發(fā)，而不是一味的盲從，跟風(fēng)，隨波逐流，設(shè)計(jì)師要思考，理性判斷，這樣設(shè)計(jì)會(huì)給公司帶來(lái)更好的收益嗎？能給用戶帶來(lái)更好的體驗(yàn)嗎？而不是一味的追求視覺(jué)表現(xiàn)！對(duì)待扁平化設(shè)計(jì)我們同樣要理性！沒(méi)有任何一種設(shè)計(jì)是萬(wàn)能的，沒(méi)有任何一種設(shè)計(jì)是最好的，只有更合適的！

推薦關(guān)注搜狐暢游視覺(jué)設(shè)計(jì)中心http://www.changyou.com

 
================微信推薦================
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：