推薦：淺談扁平化設(shè)計

淺談扁平化設(shè)計

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

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

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

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

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

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

>?更迭快低成本運作

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

>?信息突出

上圖是2013年3月份的雅虎國際首頁的改版

上圖是facebook概念版

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

Nest

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

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

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

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

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

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

• 少點再少點

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

• 大膽點再大膽點

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

• 細點再細點

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

• 酷點再酷點

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

后記

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

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

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