設計趨勢思考：扁平和簡約來襲

[核心提示] 在過去幾年裏，軟件和 APP 的界面設計風格發生了迅速變化，由 3D、擬物發展到扁平、簡約。儘管這一趨勢廣泛存在，咱們仍是思考下是如何發展至此的，以及它對整個界面設計領域有何影響。

編者注：本文轉自騰訊 CDC，做者 Adrian Taylor 是一位交互創意總監而且是 Pushstart Creative 的創辦人, 專一於多種研究，如物理聚合、人機交互技術和品牌體驗等。儘管他目前工做的重點是產品研發、戰略發展、UX 等，可是對 pixels 卻一往情深。瞭解更多能夠去 designtaylor.com 或關注他的 Twitter（譯者 zera）。

原文地址：http://www.smashingmagazine.com/2013/09/03/flat-and-thin-are-in/

---

在過去幾年裏，軟件和 APP 的界面設計風格發生了迅速變化，由 3D、擬物發展到扁平、簡約。儘管這一趨勢廣泛存在，咱們仍是思考下是如何發展至此的，以及它對整個界面設計領域有何影響。另外，我會分享扁平界面設計的一些技巧和注意問題。

Windows Phone 8 和 Apple iOS 7 的用戶界面

發生了什麼？

那麼，爲何羣體意識從喜好帶紋理、有透視和陰影的設計轉變喜好扁平色彩和極簡圖形的設計呢？固然致使這一轉變有不少因素，可是有一些因素更爲突出。

信息過載

隨着世界聯繫愈來愈緊密，咱們不斷地接受大量信息，一些信息是重要的、相關的，但大部分不是。咱們不斷地評估其價值，過濾無用信息，或建立新的內容，全部這些都使咱們精疲力竭。還有，大部份內容消費已轉移到小屏幕設備，更是加重了超負荷現象。這樣咱們就很容易就淹沒在信息中，砍掉用戶界面（UI）的繁雜元素纔是視覺設計的王道。

擺脫混亂: Geckoboard 的設計使關鍵數據被一目瞭然呈現，並易於理解

簡約就是金科玉律

一樣有個趨勢就是，顛覆性的網頁應用和服務正提供高度專用化的工具，只設計少數功能。雖然傳統軟件開發員傾向於爲產品加載過多功能，以期得到高價定位；但目前變化趨勢專一於微應用，偏心功能簡潔。簡單的應用意味着有簡單的界面。

美觀且精緻：由 Oak.設計的 Blue 天氣應用程序

又一次，之內容核心

新設備和新技術涌入市場時，經常會出現這樣的狀況，咱們熱衷於思考於它們能作什麼，咱們又怎樣才能提升交互性。但關注界面設計這一狂熱以後又迴歸專一於內容。媒體資源的消費，不論文字、音樂仍是視頻、音視頻，等咱們設備上最經常使用的活動，在你樂享其中時，確定不但願被無關的界面元素打擾。

技術水平

隨着智能手機和平板電腦已滲透到千家萬戶，顯性操做正在逐漸減小。過去，若是彈窗沒有從屏幕跳出來，咱們曾擔憂用戶會錯過操做，而如今，咱們更願意讓用戶去探索這種細微的交互體驗。鑑於此，不少互聯網產品已經支持沒有任何視覺引導的觸碰指令。

Fitbit 的儀表盤的視覺設計清爽、膽大, 和親和力

技術的影響

大部分軟件受限於運行平臺。屏幕尺寸和像素密度也受限於硬件設備條件。一個簡約的界面須要十分有限的設計元素，這意味着每個元素都要有所發揮。排版佈局和字體粗細在很大程度上決定了扁平設計的美觀和易用性。

若是你的目標設備不能處理好這方面的細微差異，你就不太幸運了。隨着屏幕尺寸和像素密度不斷增長，更細、更小的樣式也能呈現最佳的清晰度。固然，對 @font-face 屬性的支持，提升了對文字間距的集中處理，也增長了極簡排版的吸引力。

Wallmob 的市場數據監控應用：從任何一個有一個瀏覽器的設備上均可以檢測到數據

響應式設計

隨着各類尺寸聯網設備的普及，交互界面變得更須要強調適配性，響應式設計也就應運而生。雖然響應式設計並不要求特定風格，但扁平的交互界面顯然比其它樣式要更容易處理。簡約設計的另外一種優點就是，能見下降頁面重量和縮短加載時間。

無重量的響應設計：OnSite

敢於實踐

好了，不嘮叨理論了。讓咱們看看實踐上的操做吧。設計一個有效的簡約風格很具備挑戰的。當你拋棄界面上那些花哨的裝飾元素（下拉陰影，透視關係，紋理材質等），立馬就會意識到剩餘的元素關鍵且重要。如下幾個技巧在設計中廣泛很實用，特別是針對扁平 UI 設計：

開始設計以前

任何項目開始第一步，就是確保你選對風格。深刻設計以前，確保風格符合目標用戶的感知需求，適應目標平臺、承載設備和應用類型。若是該方案風格與項目不匹配，那麼接下來的導向則毫無心義。

流程

設計流程很是重要，不管選擇何種樣式！簡約設計時記住如下幾點：

1. 設計 minimal 界面時，我會從 pre-pc 時代尋求靈感，那個時候的藝術大師，用少許的資源作了大量的設計。例如：Josef Müller-Brockmann 和 Wim Crouwel，重溫這些大師的做品是很好的學習機會。可是有時我也會參考 minimal 畫家的做品，如 Ellsworth Kelly，建築師，如 Mies van der Rohe 和工業設計師，如 Dieter Rams。

2. 放下工做，休息一下頗有幫助。扁平和簡約設計的一切均關乎到細節的差別。所以小憩片刻後再回到工做，帶着全新的眼光工做，比長時間左思右想更有效。

3. 並排比較各個版式一樣有幫助。哪怕花 20 分鐘前將一個線條下移各 5 個像素分別保存，對比兩個版式就能很快分清孰好孰壞。

4. 因爲實物展現的相對比例相當重要，因此要及早在不一樣的目標設備上測試。

5. 整個設計過程當中不斷問本身「真的須要嗎？」。支撐項目時候，找一些討巧的辦法，例如，添加一些有趣的元素、樣式會這樣會很容易也會很吸引人，但必須始終注意剔除沒必要要的元素，不斷精簡。甩掉你費盡心血的部分老是難以割捨，但修改過程必須挑剔。

Global Closet: 由 The Workshop 爲美國地理雜誌教育板塊設計的一個互動遊戲

網格

網格在界面設計中扮演很重要的角色，這裏也不例外。若是你想經過創建視覺規範使整個設計次序化、直觀化，那麼網格就頗有幫助。

1. 網格不只僅能展示視覺次序。還可使用網格劃份內容和功能組。你能夠不用老是使用直線或框劃分對象組，其實簡單的對齊和間距設置也能幫助用戶理解界面結構。

2. 試着打破網格的結構，突出重要的元素來吸引用戶眼球。告別虛假的 3D 元素裝飾後，實物比例和定位等基本佈局原則就是展示視覺次序的關鍵。

3. 嘗試一下你不習慣的更密集的網格設計。當你大量減小視覺配色這些元素時，又會發現這種設計方式能夠承載更復雜的結構，也不顯得凌亂。若是你有想表達的額外的內容信息你能夠單獨放置。

Rossul 設計的 Live School iPad App

顏色

固然，顏色在視覺設計中角色很重要，對 minimal 界面更爲關鍵。

1. 考慮更寬泛的配色方案。若是大家像我同樣，那麼就會明白相近的配色每每使界面功能性更強。而以強烈的寬泛的配色來設計就更容易了。如今是你發揮的機會，只用少許的元素，擴展配色方案會讓你感受很好。

2. 設置配色方案時，測試所選色調要在很寬的色譜內進行，纔可保證用明暗對比來表現畫面。

3. 若是你想試試同系配色和鮮明對比。要及早測試配色，以確保微妙變化和高對比度元素都能有足夠的選擇空間。

TriplAgent 的視覺設計使用了豐富的配色

文字排版

之內容主導的扁平式網頁而言，文字排版就是大英雄，功不可沒。

1. 襯線是一種選擇，無襯線則會顯得更乾淨。

2. 在品種繁多，粗細和樣式各有差異的字體系列查找你須要的字體。固然不是使用所有，而寬泛的選擇幫你更準確的定義出層級關係，同時你也會發現某些字體會更適合特定環境。

3. 不要顧忌把大小和粗細差異懸殊的字體搭配在一塊兒就必定會形成視覺凌亂。用超大、超細的字體作標題而用中等粗細的小號字體作正文其實也是一種嘗試。

4. 要注意字體便於閱讀。我知道聽起來好笑，但人們會對你選擇的字體產生不少質疑，因此確保按任何比例縮放時均能閱讀

Siteleaf 的設計，文字呈現乾淨且易讀

交互

在扁平設計中，證實元素的交互性會顯得很棘手。這是我採用的幾個方法。

1. 對比很關鍵。若是構圖留白比較多，你能夠給可操做元素一點彩色；若是是文字爲主，可使用簡單的配圖；若是標題是大號小寫字母，連接能夠用小號大寫字母；就是這個意思。

2. 傳統佈局也頗有用。若是你要放置一個返回按鈕，那就將其放置在用戶指望找到返回按鈕的位置上，左上角。

3. 當頁面堆疊更多功能時，把每一個交互元素設計成按鈕沒意義。界面儘可能設計直觀一些。但若是交互特別複雜或者出乎意料，提供簡單的錯誤恢復功能。

4. 下拉框、模式窗口、彈出框等層級元素在扁平設計中通常比較難處理。而對鮮明的對比、邊框、着色的處理，也能從視覺上區分出交互層級。

簡潔的構圖和鮮明的對比：Taasky

總結

我不相信設計有固定規則可循。看到設計師嘔心瀝血只爲構建乾淨、簡潔的用戶界面，實在使人歎服。扁平就真的不須要漸變和陰影了嗎？固然不是。實際上我見過最引人興趣的工做，是那種能明智的呈現內容、同時可以保持交互直觀性和平衡維度。

在咱們這個高度聯繫、資訊豐富和功能齊全的數字世界裏，簡約設計又從新普遍興起。而它並不能解決一切，但若是考慮周全、應用得當，也一樣能給我帶來易用和愉悅的數字體驗。