火了一年的扁平化，同學們都瞭解清楚了嗎? 今天分享一篇從扁平化的流行緣由聊到對介面設計的影響的文章，附有一些設計技巧和注意事項，值得一讀喲。

　　在過去幾年中，我們見證了軟件和應用介面設計從 3D 及擬物化向扁平化和極簡化的快速轉變。儘管這一趨勢現在已經無所不在，但我們不妨拿出一點時間來思考今天的結果是如何形成的，以及其對介面設計整體有着何種影響。另外，我還會和大家分享一些有關設計扁平化介面的小技巧和注意事項。

　　Windows Phone 8 及 WordPress APPle iOS 7 介面。

　　什麼情況?

　　大家怎麼就突然從大愛材質、斜面和投射陰影突然轉向熱衷扁平化顏色和簡約字型了? 這一轉變受到了很多因素的推波助瀾，下面是其中比較顯着的幾項。

　　資訊負荷過度

　　在當今這個資訊延綿不絕的文化背景下，我們每天要不停地接觸各種資訊流，有的重要，有的無關緊要。我們要不斷地評估、過濾並且創造各種內容，這一切顯然是很費神的。此外，我們所攝入的內容中有很多都轉移到了小螢幕裝置中，從而更加劇了這種負荷過度的感覺。所以説人們現在很容易對過量的資訊感到應接不暇，而減少多用户介面 (UI) 中的元素則能夠帶來少許視覺上的寧靜。

　　雜亂不再：Geckoboard 的視覺化工具可方便您一眼輕鬆解讀關鍵資料。

　　簡約是金

　　與上述趨勢類似，很多具有顛覆意義的 Web 應用和服務可提供功能高度集中的工具。雖然傳統的軟件開發商比較喜歡在產品中加入大量功能作為高售價的藉口，但是朝着集中化微應用轉變的風潮卻更傾向於使用簡單代替多樣化的功能組合。應用越簡單，介面也就越簡單。

　　漂亮簡約：Oak 的 Blue 天氣應用。

　　內容為王

　　每當有新裝置和技術進入市場之時，其功能和推動互動發展的程度總會讓我們為之着迷。繼介面所帶來的迷亂之後，我們一般都會將注意力重新集中到內容上去。不論是文字、音訊還是視訊，對媒體內容的攝入大概是我們使用裝置時的主要活動，而在這種情況下，我們需要保證介面不會影響我們的攝入過程。

　　技術精通

　　隨着智慧手機和平板快速普及各種多用户，業界對其控制方式顯見性的顧慮日漸消退。儘管一度曾經擔心多用户會難以看見不顯眼的按鈕，但現在我們卻更願意探索較為細微的互動內容。 Windows 8 和 Chrome for Android 甚至還支持在沒有視覺提示的情況下通過觸控命令點亮螢幕。

　　Fitbit 的控制面板介面在視覺上表現明亮、大膽而且簡單好用。

　　技術的影響

　　大部分軟件都會受限於所執行的平台。螢幕尺寸和畫素密度是硬體方面的限制因素。較小的介面大大限制了設計調色盤的範圍，也就意味着介面上的每個元素都要具有自己的表現力。文字規模和字型大小將在很大程度上決定扁平化設計的美感和可用性。

　　如果您的目標裝置無法體現出細微到這種程度的差別，那算您運氣好。隨着移動裝置的螢幕尺寸和畫素密度不斷提高，以後更薄更小的裝置將能實現更高的清晰度。當然，對 @font-face 的支持也大大地提升了極簡化文字核心設計的吸引力。

　　使用 Wallmob 進行實時銷售監控：記錄所有帶瀏覽器裝置的銷售數字。

　　響應式設計

　　隨着各種尺寸可聯網裝置的普及，UI 受大勢所趨而務求更加流暢，而與之相應的，就是響應式設計風潮。儘管響應式設計不需要特別的美學，但也可以説扁平化 UI 相比其他風格來説能夠更易於輔助響應式設計的美觀。簡化設計的另一優勢在於能夠降低頁面重量從而減少載入時間。

　　簡單但一點到位：OnSite

　　理想實踐

　　好了，理論就説到這。下面我們來看看一下實際操作上的注意事項。打造有效的簡化設計難度很高。在層層剝離常規的一些 UI 元素 (投射陰影、斜面、材質等等) 的同時，您就會發現所剩下的為數不多的這些元素多麼重要。下面的小提示儘管在很大程度上是通用的，但尤其適用於扁平化 UI 。

　　開始之前

　　任何專案都一樣，步是先確保自己選定的樣式合理。在開始進行扁平化設計之前，要先保證自己的設計符合目標多用户的感覺以及目標平台、裝置和應用型別。如果不適合您的專案情況，那緊跟潮流也沒有意義。

　　流程

　　不管您要採用哪種樣式風格，遵循流程都是非常重要的。下面的幾個建議可以幫助您實現簡約效果。

　　1 、在設計簡化介面時，我一般會從 PC 機出現前的時代尋找靈感，那時的設計師和藝術家往往需要做到 “多快好省” 。接這個機會您可以重新探訪一下過去的很多優秀設計，例如 Josef Müller-Brockmann 和 Wim Crouwel 。另外，我還會看向 Ellsworth Kelly 等極簡主義畫家，Mies van der Rohe 等建築家和 Dieter Rams 等工業設計師。

　　2 、暫時脱離工作也很有幫助。扁平化和簡化設計的核心就在於細微之處。所以，短暫休息後帶着新的眼光重新回到工作中有時反而比一味苦心琢磨要更有效用。

　　3 、將不同版本毗鄰比較也很有用。在將一條輸入線上下 5 個畫素來回倒騰了 20 分鐘之後，我會保留下兩個不同版本進行比較，這樣孰優孰劣馬上見分曉。

　　4 、由於物體的相對大小具有着非常關鍵的意義，因此您需要儘早開始在不同種類的裝置上檢視設計理念，以便確定其是否合適。

　　5 、在工作的同時，經常自問：“我是否真的需要這個?” 人總是很容易對自己鐘意的東西念念不捨，但我們還必須頻繁地找出要砍掉或者簡化的內容。拋棄自己費盡心思做出來的東西不容易，但編輯取捨也是必須的。

　　Global Closet：一款由 The Workshop 為國家地理教育打造的互動遊戲。

　　網格

　　網格在介面設計中扮演着非常關鍵的角色，絕無例外。在您拿着一套受限制的視覺元素，努力想確定其各自順序並讓使用方式更加直觀時，網格能夠帶來很大幫助。

　　網格所確定的，不僅僅是視覺順序。您還可以用它來界定內容和功能組。有時候要將一組物體分組不一定非要用到線條或者方框。簡單的對其和空間調整往往能幫助多用户理解介面的結構。

　　您也可以嘗試使用具有特定重要意義的元素打破網格來吸引多用户的注意力。

　　嘗試使用一下密度比較高的網格。在大幅簡化視覺調色盤時，您可能會發現您的設計能夠支持更為複雜的結構，同時看起來也不會顯得凌亂。您也可以試試看僅通過位置調整能夠傳達出哪些額外的信息。

　　Live School Rossul Design 開發的 iPad 應用。

　　色彩

　　顏色毫無疑問是視覺設計中的一個關鍵組成部分。對於簡化介面來説，其所具有的意義更加關鍵。

　　考慮更為寬泛的調色盤。個人來説，我覺得範圍比較窄小的調色盤通常能創造出比較功能化的介面。想創造出讓人眼花繚亂的繽紛色彩非常簡單。但通過下面這種方法，您可以大大拓展一下選擇範圍; 而且，考慮到待設計元素的數量很少，擴充套件調色盤還能給您帶來很良好的感覺。

　　在設定調色盤時，可以在一個比較寬泛的色值範圍內對選定的色調進行測試，並確保其在亮色和暗色下表現都合適。

　　建議分別試驗一下同系配色及鮮明對比。早期對調色盤進行試驗將保證您在接下來能夠掌握微妙和強對比元素所需的全部配色範圍。

　　TriplAgent 的視覺設計採用了絕妙的配色方案。

　　文字

　　在扁平化內容驅動網站上，文字是主角。

　　襯線體無疑是個辦法，但無襯線字型卻能讓人感到更為簡潔。

　　您可以找一個粗細和樣式種類比較多的字型型別。雖然不一定全用的上，但比較寬泛的選擇範圍有助於更為鮮明地界定層次結構。您也可能會發現某個粗細度在某個特定環境下效果更佳。

　　不要怕使用大小粗細走極端的字型搭配來構建視覺順序。嘗試使用超大超細的標題字型搭配小號中等粗細的正文字型。

　　注意字型是否易於辨認閲讀。這一點雖然聽起來有點無厘頭，但您對自己所選定字型的依仗將是很強烈的，所以一定要保證其在任何尺寸小均易於辨認。

　　Siteleaf 上清爽易讀的文字。

　　互動

　　在扁平化 UI 中，要表現出哪些元素可互動是個有學問的活。下面是我常用的一些方法。

　　對比如果佈局內容中大部分為白色，那可以給互動元素新增一定其他色彩。如果您的設計以文字為主，可以使用簡單的圖示表示互動。如果標題比較大而且全部為小寫字母，那麼連結部分可以做小一點並使用大寫字母。您懂的。

　　常規的位置安放方法也能起到作用。比方説您的後退箭頭使用細 V 形表示，可以將其放置到左上角，因為多用户一般會到這個位置找後退按鈕。

　　隨着頁面上疊加內容的增加，我們無法將所有可互動元素都做成按鈕的樣子。介面應儘量直觀。但如果互動過程比較複雜或有違常規，則應提供方便的錯誤恢復方法。

　　下拉選單、模擬視窗、彈出式視窗及其他層疊元素對於扁平化設計來説操作起來比較麻煩。您可以採用鮮明的對比、邊框或着色區分不同的互動層級。

　　所呈現的設計要素佈局簡單，對比度優秀：Taasky.

　　結尾

　　在設計領域沒有一成不變的規範。看到各位設計師如此熱忱地投入極簡化多用户介面的設計令人歡欣鼓舞。但是，探索扁平化設計是否就意味着絕不使用漸變和陰影? 當然不是。事實上，我近期看到的幾個很有意思的作品一方面以巧妙的方式呈現出了內容，另一方面也保證了互動的直觀易懂，從而實現了扁平化和尺寸直接的平衡。

　　在這個互聯互通、資訊豐裕、功能豐富的數字時代，簡化設計廣泛的復興讓人眼前一亮。這自然不會是無所不能的解決方案 (沒有任何一種風格能做到無所不能)，但只要經過深思熟慮和恰當的應用，其能夠實現既好用，有舒適的數字體驗。