淺談扁平化設計

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

什么是扁平化設計

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

為什么選擇扁平化設計

>?快速快速高效是扁平化設計的一個很重要的基因，時間就是金錢，如何在信息更新如此之快的互聯網即時的跟上它的腳步呢?--?快速這也是很多互聯網巨頭們為什么選擇扁平化設計的原因之一。以我們暢游鹿鼎記官網為例,早期的官網按鈕質感較重，圖層樣式較多，很影響加載時間,根據統計頁面大小在357K。

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

>?更迭快低成本運作

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

>?信息突出

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

上圖是facebook概念版

微軟2012年的品牌刷新官網首頁

Nest

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

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

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

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

?如何打造扁平化設計

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

• 少點再少點

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

• 大膽點再大膽點

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

• 細點再細點

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

• 酷點再酷點

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

后記

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

推薦關注搜狐暢游視覺設計中心http://www.changyou.com

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