扁平化設計或者說扁平化的UI風格，是今年最受關注的一個web和平面設計的發展趨勢。而經常被拿來與扁平化做比較的是擬物化設計，兩者的設計原則和設計風格完全相反。

設計師們或許會有疑惑，這究竟是一種能持續下去的設計趨勢呢？還是只能是風行一時，曇花一現。暫且不談未來和不管這些反對的聲音，大多數設計師還是很想在自己的工作中嘗試使用這一設計趨勢。在這里，我們將深入了解什么是扁平化風格，追蹤扁平化設計的歷史根源，并介紹如何開始我們的扁平化設計。

在開始之前我必須給讀者們一個提醒或者說警告：扁平化設計，可以用來設計非常漂亮而又簡單的界面，但它不一定適合每一個項目。請用心想想你到底想實現什么樣的視覺效果，你到底想要向用戶傳達什么。

什么是扁平化設計？

正如名字所示，扁平化設計就是設計風格扁平：通過移除創建3D視圖所需要的比如陰影、斜角、紋理和漸變等額外的元素而簡化界面。

扁平化設計的理念是僅在兩維空間里完成最終的設計，而且不丟失“常見”界面所提供的任何功能。 這給設計者提出了新的挑戰，因為去除裝飾和效果的界面很難在設計中定義主要的動作和元素。

扁平化設計最初是希望創建更加數字化的界面和革新數字設備的開放式畫布界面。扁平化設計的優秀的例子是 Mac OSX圖標設計，這兒一些非常著名的Mac圖標重新繪制了扁平化版本。你可以很容易地明白圖標是怎么保持它們的風格和形式，甚至在去除細節、陰影和紋理的情況下。

扁平化設計的演變

歷史地看，設計的趨勢像風格的趨勢一樣在復雜和簡單之間不斷地搖擺。這在可視化設計領域，尤其是web和多媒體界面設計領域表現地更加明顯，在這個領域里設計持續地更加短暫，而且不像傳統的印刷設計那樣持久。

術語“扁平化設計“是由Allan Grinshtein在設計者的版本控制系統 LayerVault中創造和推廣的。在他的博客文章" 扁平化設計時代“里，Allan說明“優雅的界面是用最少的元素達到最佳的效果的界面”。這個理念是與更多修飾、更復雜的界面相比用最簡化的界面更適合于界面的功能。社團在去年一直用仿真界面炮轟這個理念的基礎上采納了這個理念。

從那時起，扁平化設計得到了快速成長。大多數扁平化設計模式具有五個特征-不添加效果、簡單的設計和UI元素，注重字體、注重色彩和總體最小化設計。你能在Designmodo的有關 扁平化設計原理的博客文章里找到這些特征更詳盡的介紹。你還可能需要下載 扁平化UI免費界面工具箱

扁平化設計與微軟

扁平化設計的最大玩家并且第一個把扁平化設計風格帶到一線的是微軟。2006年，微軟啟動了Zune音樂播放器。它非常昂貴、而且把DRM應用到音樂文件，不過它是一次商業失敗。然而即使Zune商業方面沒有成功，它也是確定后續幾年微軟設計的第一步。Zune的界面非常簡潔，并且是注重輕量和大的字體、沒有多余的細節和元素的界面。

從2006年到今天，微軟已經用Zune做為基礎開發了圖像和可視化界面，使它們更明晰化和更扁平化。微軟的其他產品也受到這種風格影響，比如Xbox 360面板，使用了簡單的圖標和排版的基于矩形的界面。Windows 8的“Metro UI”可能是微軟最大的界面修改之一。它的簡單幾何界面不久在Windows Phone 7，即比Windows 8 界面更小的和移動版本上得到了復制。

[[77151]] 

怎樣創建一個扁平設計？

按鈕

當使用邊框，梯度和下陰影來創建一個按鈕，就是使得這些元素在背景與內容中很顯眼。這使按鈕很好辨認為一個可以點擊的元素。

當創建一個扁平的按鈕，你就不能應用這些細節，所以我們的焦點應該放在布局的組織和顏色的差異上。當然，你只要你能保持按鈕的扁平外觀，你也可以使用斜邊和陰影，但是你會想使這些控件變得盡可能的簡潔。

表格

在扁平設計里，表格是一個關鍵的元素。文本區域，輸入欄和下拉欄都不能按照它們默認的做法插入陰影。你可以通過CSS來改變這些表格元素的屬性：在創建一個簡單的登陸框和樣式這篇文章里，你就知道怎么做了。如果你想完全地控制這些元素，你可以使用一個支持主題的插件，比如uniformjs并應用你想要的主題樣式，甚至可以自己創建一些主題。

字體

字體是扁平化設計里非常重要的元素。由于界面更加簡潔，你可以使用字體幫你創建你期望的風格和基調。你可以對扁平化設計的框架只使用定制的并且特定的字體來設置基調。由于背景簡單，字體就會突出并且本身就設置了風格?？纯?quot;扁平化設計里字體的使用"就可以激勵你，并且可以學到其他人是如何使用字體獲得別具一格的視圖的。

色彩

設計界面的基礎之一是定義調色板。扁平化界面設計所采用的色彩的模式與其他調色板相比傾向于更加醒目和更加明亮。扁平化UI色彩在思想上就是用這樣的理念開發的，而且是下載今天扁平化設計里所用的某些最佳（和最流行）的色彩的好去處。

當你選擇好調色板后，記住要想想色彩是怎樣幫助用戶對整個站點進行導航的。確保給站點的主要動作指定色彩：比如“提交”、”發送“、“更多”等按鈕都應當是同一個色彩。理想情況下鮮明的色彩與背景形成了鮮明的對比。如果你的徽標或者商標采用主色的話，那么它應當是主要控制所使用的哪個色彩。不要自始至終過分的使用它，否則你將冒著在用戶眼里這個色彩不太重要的風險。 

#p#

你還應該選擇按鈕的輔助色彩，通常是淺灰色。這樣的話你可以把兩個按鈕排成一行，例如“提交”和“取消”，“提交”作為主要動作而“取消”是輔助動作。在扁平化設計里色彩的選擇尤其重要，因為當你使用扁平化按鈕的時候，色彩將是幫助用戶識別彼此的主要手段之一。

形狀

通常情況下，根據網站的風格你會更傾向于正方形或方形圓角的按鈕。你可以更有創意并使用類似圓形，三角形或者甚至是自定義形狀，但是請注意，后者的風險有點大。確認整個界面控件保持一致，這樣用戶才能識別并認出你的標題、內容和控件。

接下來你可以看到一個普通的Twitter Bootstarp按鈕和Flatstrap風格按鈕的差異。Flatstrap是Bootstarp的一個扁平化版本。按鈕的圓角有一個微妙的漸變和陰影效果，但是扁平化設計完全剝離了這些。

哪兒應當使用扁平化設計？

扁平化設計應該適度地使用。雖然創建輕量的且簡潔的界面很簡單，但是卻不適合每個站點。例如，如果你正在設計投資組合或者web技術入門網站，那么扁平化設計非常適合，不過如果你試圖創建更復雜的東西的話，那它就有局限性。如果你正在為兒童設計一個站點的話，那么你將需要把它設計的亮麗、多彩，充滿了樂趣的元素和活潑的特征。如果你正在創建一個游戲站點，那么它應該全部是圖形和效果，并且設計應當能夠連接到游戲。

這種類型的站點可以使用扁平化設計，不過扁平化風格可能最終傷害了這樣的站點。始終要牢記住你的目標客戶和你希望傳遞的信息。如果使用了扁平化設計可以使你傳遞的信息更加清晰，那么使用它。不過不要認為趨勢或者可視化風格比站點內容更重要。

可用性（總是）比容貌更重要

如果你已經做出決定為你的網站或者產品創建一個扁平化設計。請和其他人溝通你的設計原型，確保你的工作達到目的。您也可以嘗試A / B測試，測試兩個不同的設計和轉換。 一個Web應用，移動應用程序或者網站的主要目的始終都是清楚的向用戶傳達消息并提供一個易用、直觀的界面。設計師的工作要確保設計審美不傷及可用性。

如果您創建了一個美妙的設計，用戶卻不明白，那么你就傷害了產品。趨勢和風格的使用應該和項目的目標一致。當你進行視覺創作時，你很容易迷失自己，特別是你很清楚它們時。但是在最后，用戶才是最好的方法來檢驗的工作的方法。有時候，一個簡單的改變可以讓用戶感到很大的差別。

那么，我是不是應該使用扁平化設計？

一直要牢記趨勢僅僅是趨勢。要試著創建偉大設計而且是適合最終用戶的設計。優先創建一個功能性的和可用的站點，而不是創建一個好看的而且時髦的站點。正如Wells Riley在他的博客文章“ 盡量少的美化、盡量多的設計”里所說，“始終不要忘記：設計是解決問題的一種形式。"

英文原文：Flat Design: An In-Depth Look

譯文鏈接：http://www.oschina.net/translate/flat-design-an-in-depth-look