扁平化設計與拓展

一、扁平化

Flat design，譯為扁平化設計。扁平化設計就是摒棄了一切干擾用戶閱讀內容本質的修飾效果，比如陰影、透視、紋理、漸變和任何3D效果。通過抽象、簡化、符號化的設計元素，干凈利落的展現所要呈現的內容與信息；界面設計采用極簡抽象、矩形色塊、大字體；交互設計在于功能的本身使用，去掉了冗余的界面和交互。使用戶的關注點能停留在應用所傳遞的信息本身，就好像Windows Phone最初想要做到的那樣：“聚焦信息本身”而不是應用本身。

二、扁平化設計

為什么要進行扁平化設計？這是因為我們的需求環境在發生變化。以前我們沒有ipad、沒有智能手機這類智能移動設備，只有桌面電腦，所以扁不扁平化似乎沒有那么重要。現在我們有著多種智能設備，需要在各個場景各個設備上隨時切換，這樣就需要有一種新的設計理念即扁平化設計。

扁平化設計是一種極簡主義美學，附以明亮柔和的色彩，最后配上粗重醒目，而風格又復古的字體。扁平化設計簡化了諸如按鈕、圖標一類的界面元素。

1.不添加效果

摒棄一切裝飾效果，諸如凹凸、陰影、斜角、漸變、材質等能做出3D效果的元素。所有元素的邊界都干凈利落，沒有任何羽化、漸變或者陰影。微軟的Metro風格用戶界面就是一種典型的扁平化，沒有陰影、高光、漸變和紋理的修飾，取而代之的是平面化的色塊與突出的文字信息。

這種設計有著鮮明的視覺效果，它所使用的元素之間有著清晰的層次和布局，使得用戶能直觀了解每個元素的作用以及交互方式。如今從網頁到手機應用無不在使用扁平化的設計風格，尤其在手機上，因為屏幕的限制，使得這一風格在用戶體驗上更具優勢，更少的按鈕和選項使得界面干凈整齊，使用起來格外簡單。

2.界面元素

扁平化設計通常采用許多簡單的用戶界面元素，諸如按鈕或者圖標之類。設計師通過觀察和了解對象的本質，進行巧妙的取舍，使用簡單的外形（矩形或者圓形），在沒有更多特效裝飾的情況下清楚的表達內容，在界線與輪廓的高對比下，表現出物體的美感。

這些用戶界面元素可以方便用戶點擊，用戶憑經驗就能大概知道每個按鈕的作用，極大地減少用戶學習新交互方式的成本。

3.優化排版

由于在扁平化設計中使用的都是極簡的元素，排版就成了很重要的一環，排版好壞直接影響視覺效果，甚至可能間接影響用戶體驗。

由于界面更加簡潔，字體在排版中就顯得非常重要，使用字體幫你創建期望的風格和基調。一種新奇的字體作為設計元素將會發揮極其重要的作用。

4.注重色彩

扁平化設計中，通常采用比其他風格更明亮更鮮艷的顏色，而且傾向于使用單色調，尤其是純色，并且不做任何淡化或柔化處理。同時，扁平化設計中的配色要使用更多的色調。比如，其他設計最多只包含兩三種主要顏色，但是扁平化設計中會平均使用六到八種顏色。

醒目明亮的顏色能夠增加視覺元素的趣味性；單色調的配色方案，可以選擇一些具有生氣的顏色，然后在色調上進行調整，增強色彩之間對照感，提高辨識度。

三、扁平化設計的拓展

在保持扁平化設計的基礎上，增加一點效果和美感，使其成為一種獨特的效果。比如，在簡單的按鈕旁加一點點漸變或陰影，從而使這種風格成為其特色，產生出一種扁平化設計的變種。這種設計要比單純的扁平化更具有適用性和靈活性，用戶也喜歡這種稍微圓滑一點的設計方式。

1.長投影

長投影即延伸投影，一般都是45度角的陰影從圖標中延伸出來，投影一般為物體的2.5倍大，陰影也是扁平的，無漸變、明暗和衰退。

2.陰影式

陰影式和長投影不同之處在于長投影是“投影”，而這種帶陰影的效果能夠給圖標增加一種層次感和立體感。

3.漸變式

漸變式其漸變也是扁平的，為扁平化設計增加一種精致感。

四、扁平化交互設計

隨著各種智能設備的多樣性和普及化，交互界面需要更容易適應其變化，扁平化的交互界面要比其他樣式更容易處理。在扁平化設計模式之前，我們一直都在強調交互的易用性和良好的用戶體驗感。接下來，我們來探討一下扁平化的交互設計：

1.減少結構層級

結構層級就是交互步驟，讓用戶用最少的步驟來完成任務，就是要求層級結構的扁平。

針對智能移動設備，能否直接把網頁上的結構搬上去，顯然不行。由于移動設備的限制，主界面的廣度大大減弱，而深度更為明顯。在桌面電腦上可以用各種導航方式表現出層級結構，讓用戶不迷路。但在移動設備上，由于顯示區域有限，只能采用不斷的“返回”方式，增加了操作的繁瑣。那么怎樣才能在移動設備上減少結構層級、精簡交互步驟。

1）并列信息

將并列的信息顯示在同一個界面中，減少頁面的跳轉。比如：以前什么天氣、郵件等應用，都必須到具體的應用里才能看到，而windows8在同一個界面中都展示出來了。

2）快捷方式

在任意界面只要向下滑動都能從屏幕頂部呼出一個快捷菜單。

層級結構的減少，用戶不需要一層一層地進入設置進行操作，提高效率的同時也使結構變得清晰。

3）顯示關鍵信息

比如在線購電影票，除了顯示影院、影片名稱之外，還能顯示出最低票價、余下場次、是否可以購票等關鍵信息，這樣就不需要逐個查看影院信息了，加快了購買效率。

由于智能移動設備沒有足夠的空間來展示路徑，如果沒有清晰的層級關系，就可能使用戶迷失方向，甚至要進入深層次的信息才能找到想要的，這時更應該做的是減少信息的深度。

2.表達方式直白、準確

如果你的功能不能讓用戶一眼就看明白，還需要解釋的話，那么這個功能就失敗了。通過減少按鈕和選項，讓使用更簡潔，用直觀的表達方式，讓使用更準確，不用再為這里要怎么操作而苦惱。

例：搖一搖，用戶的本能反映，不需要任何解釋，只要拿著手機晃動就能實現這個功能。

3.信息直觀、有序

在大數據時代，如何從這些數據里找到自己想要的，尤其是在小屏幕設備上展示，更需要減少過度繁雜元素的交互界面設計，讓信息更直觀的展現。

在大數據狀態下，通過“分類！分類！分類！”方式降低數據的使用難度，讓用戶能根據清晰的分類快速找到自己需要的東西。

4.一致性

現在的用戶已經習慣了在多場景下運用多平臺設備，一旦用戶學會了界面中某個部分的操作，他們很快就能知道如何在其他設備上進行操作。這就需要功能的一致性、平臺之間的無縫銜接，比如：QQ應用軟件。

五、扁平化設計的局限性

盡管在應用和網頁設計中越來越多人開始使用扁平化設計，但這并不意味著它就是無懈可擊的。

首先，像以往任何一種設計趨勢一樣，它也可能會因為一些設計師的心血來潮和不經大腦被濫用，在扁平化設計時出現偏差，那將直接影響應用的可用性。

其次，扁平化去除了特效，界面中的每個元素都被置于同一平面，用戶在使用時將不可避免地產生疑惑：這是一個按鈕還是一個橫幅？如果我點按它，會出現什么？

所以在扁平化設計中，要盡可能彌補其感情不豐富，甚至過于冰冷的弱點。