扁平化設計 ( Flat Design ) 這兩年又重新流行了起來,不僅 Win 8 採用這種設計,就連主打設計感的 Apple 公司也在 iOS 7 採用。除了這兩大龍頭之外, Facebook 更是一開始就以扁平化設計其介面。

現在,這股扁平化設計趨勢也延燒到了網頁設計、甚至行動裝置介面上。

 

什麼是扁平化設計?

扁平化設計放棄了所有 3D 化、維度概念,將畫面完完全全的以平面方式呈現。捨棄陰影、光影、斜角等相對於平面的凹凸效果,狹義一點定義甚至可以說,用色塊來組成視覺介面。

扁平化設計大多可以與極簡、整潔牽上一點關係,雖說是極簡效果,但是對設計者來說並沒有減輕他們的負擔,反而有全新的煩惱。

該用什麼顏色?該怎麼組成、排版?由於拋棄了許多效果,再也不能以華麗的方式來奪取目光巧掩弱勢,設計師本身的品味以及技術馬上會被放大檢視。

 

〈 扁平化設計的 iOS 7 〉

 

關於扁平化設計,你應該知道的 5 項心法

1. 可用性與符號意義

在行之有年的「非扁平化」網頁設計的浸淫之下,某些符號在使用者的心中具有獨特的意義。你初來乍到一個陌生語言的網頁,上面的字一個都看不懂,但是你也許知道哪個按鈕是上一頁、哪一個按鈕是繼續閱讀、哪一個按鈕是回到最上面。

而扁平化設計你必須注意到這點,你所設計出來的不管是按鈕、連結,都必須讓使用者一目了然,了解其可用之處。

就像 Facebook 網站一樣,融入在色塊的按鈕,如果今天是在一個陌生的網頁上,使用者要如何快速了解按鈕的功能呢?

2. 色彩、色塊與對比的應用

顏色的使用無疑是設計師的最大挑戰。色彩更是扁平化設計的重點,不同的顏色帶給使用者不同的視覺感受,也會給人完全不同的內心反應。就如同各種品牌的顏色給人不同的感覺一樣。如何熟練的使用這些顏色,除了設計師的品味與美感之外,或者還需要懂一些色彩心理學。

 

〈 連 Twitter 也有扁平化設計,你還不跟上嗎? 〉

 

3. 排版的藝術

除了色彩之外,其他傳遞美感的媒介就是排版技術了,好的排版技術可以更精準的傳遞設計師的理念與色彩的力量。

 

4. 是整潔、極簡,而不是粗劣

扁平化設計具有簡單、整潔、直接的特性,並沒有太多裝飾與附加效果;但是簡單、整潔的介面並不代表粗劣、半吊子的未完成作品。使用者應該睜大眼睛觀察設計師的作品;設計師也應該下更多功夫,而不是將斷垣殘骸端上桌。

5. 建立層級結構

普通的網頁為了劃分層級結構可能會做一些按鈕點擊變化,儘管有些扁平化設計的按鈕、連結也有這種變化,但仍須做得更明顯並不失美感。比起其他設計,特色為極簡、整潔的扁平化設計在建立層級結構上就又困難了一點,因為還需要確保所增加的劃分層級效果不失美感,符合整體的主題。

簡而言之:扁平化設計絕對不是把一塊一塊色彩放在一起這麼簡單。可以到 FlatDesign 看看各種優系的扁平化設計作品。

 

 

本文引用自 科技報橘 > Blog > 平台、開發與通路 > 扁平化設計好燒!5 個 Flat Design 心法,帶你看明白怎麼扁、怎麼平

創作者介紹

尼康數位科技有限公司 響應式RWD網頁設計, SEO網頁優化, Yndex俄羅斯關鍵字廣告, GOOGLE ANALYTICS分析教學

尼康數位科技 發表在 痞客邦 PIXNET 留言(0) 人氣()