建站
咨詢
售后
建站咨詢
新聞中心
扁平化設(shè)計或者說扁平化的UI風(fēng)格，是今年最受關(guān)注的一個web和平面設(shè)計的發(fā)展趨勢。而經(jīng)常被拿來與扁平化做比較的是擬物化設(shè)計，兩者的設(shè)計原則和設(shè)計風(fēng)格完全相反。
成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供溫縣企業(yè)網(wǎng)站建設(shè),專注與成都做網(wǎng)站、成都網(wǎng)站制作、HTML5、小程序制作等業(yè)務(wù)。10年已為溫縣眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進(jìn)行中。
設(shè)計師們或許會有疑惑，這究竟是一種能持續(xù)下去的設(shè)計趨勢呢？還是只能是風(fēng)行一時，曇花一現(xiàn)。暫且不談未來和不管這些反對的聲音，大多數(shù)設(shè)計師還是很想在自己的工作中嘗試使用這一設(shè)計趨勢。在這里，我們將深入了解什么是扁平化風(fēng)格，追蹤扁平化設(shè)計的歷史根源，并介紹如何開始我們的扁平化設(shè)計。
在開始之前我必須給讀者們一個提醒或者說警告：扁平化設(shè)計，可以用來設(shè)計非常漂亮而又簡單的界面，但它不一定適合每一個項目。請用心想想你到底想實現(xiàn)什么樣的視覺效果，你到底想要向用戶傳達(dá)什么。
什么是扁平化設(shè)計？
正如名字所示，扁平化設(shè)計就是設(shè)計風(fēng)格扁平：通過移除創(chuàng)建3D視圖所需要的比如陰影、斜角、紋理和漸變等額外的元素而簡化界面。
扁平化設(shè)計的理念是僅在兩維空間里完成最終的設(shè)計，而且不丟失“常見”界面所提供的任何功能。 這給設(shè)計者提出了新的挑戰(zhàn)，因為去除裝飾和效果的界面很難在設(shè)計中定義主要的動作和元素。
扁平化設(shè)計最初是希望創(chuàng)建更加數(shù)字化的界面和革新數(shù)字設(shè)備的開放式畫布界面。扁平化設(shè)計的優(yōu)秀的例子是 Mac OSX圖標(biāo)設(shè)計，這兒一些非常著名的Mac圖標(biāo)重新繪制了扁平化版本。你可以很容易地明白圖標(biāo)是怎么保持它們的風(fēng)格和形式，甚至在去除細(xì)節(jié)、陰影和紋理的情況下。
扁平化設(shè)計的演變
歷史地看，設(shè)計的趨勢像風(fēng)格的趨勢一樣在復(fù)雜和簡單之間不斷地?fù)u擺。這在可視化設(shè)計領(lǐng)域，尤其是web和多媒體界面設(shè)計領(lǐng)域表現(xiàn)地更加明顯，在這個領(lǐng)域里設(shè)計持續(xù)地更加短暫，而且不像傳統(tǒng)的印刷設(shè)計那樣持久。
術(shù)語“扁平化設(shè)計“是由Allan Grinshtein在設(shè)計者的版本控制系統(tǒng) LayerVault中創(chuàng)造和推廣的。在他的博客文章" 扁平化設(shè)計時代“里，Allan說明“優(yōu)雅的界面是用最少的元素達(dá)到最佳的效果的界面”。這個理念是與更多修飾、更復(fù)雜的界面相比用最簡化的界面更適合于界面的功能。社團(tuán)在去年一直用仿真界面炮轟這個理念的基礎(chǔ)上采納了這個理念。
從那時起，扁平化設(shè)計得到了快速成長。大多數(shù)扁平化設(shè)計模式具有五個特征-不添加效果、簡單的設(shè)計和UI元素，注重字體、注重色彩和總體最小化設(shè)計。你能在Designmodo的有關(guān) 扁平化設(shè)計原理的博客文章里找到這些特征更詳盡的介紹。你還可能需要下載 扁平化UI免費界面工具箱
扁平化設(shè)計與微軟
扁平化設(shè)計的最大玩家并且第一個把扁平化設(shè)計風(fēng)格帶到一線的是微軟。2006年，微軟啟動了Zune音樂播放器。它非常昂貴、而且把DRM應(yīng)用到音樂文件，不過它是一次商業(yè)失敗。然而即使Zune商業(yè)方面沒有成功，它也是確定后續(xù)幾年微軟設(shè)計的第一步。Zune的界面非常簡潔，并且是注重輕量和大的字體、沒有多余的細(xì)節(jié)和元素的界面。
從2006年到今天，微軟已經(jīng)用Zune做為基礎(chǔ)開發(fā)了圖像和可視化界面，使它們更明晰化和更扁平化。微軟的其他產(chǎn)品也受到這種風(fēng)格影響，比如Xbox 360面板，使用了簡單的圖標(biāo)和排版的基于矩形的界面。Windows 8的“Metro UI”可能是微軟最大的界面修改之一。它的簡單幾何界面不久在Windows Phone 7，即比Windows 8 界面更小的和移動版本上得到了復(fù)制。
怎樣創(chuàng)建一個扁平設(shè)計？
按鈕
當(dāng)使用邊框，梯度和下陰影來創(chuàng)建一個按鈕，就是使得這些元素在背景與內(nèi)容中很顯眼。這使按鈕很好辨認(rèn)為一個可以點擊的元素。
當(dāng)創(chuàng)建一個扁平的按鈕，你就不能應(yīng)用這些細(xì)節(jié)，所以我們的焦點應(yīng)該放在布局的組織和顏色的差異上。當(dāng)然，你只要你能保持按鈕的扁平外觀，你也可以使用斜邊和陰影，但是你會想使這些控件變得盡可能的簡潔。
表格
在扁平設(shè)計里，表格是一個關(guān)鍵的元素。文本區(qū)域，輸入欄和下拉欄都不能按照它們默認(rèn)的做法插入陰影。你可以通過CSS來改變這些表格元素的屬性：在創(chuàng)建一個簡單的登陸框和樣式這篇文章里，你就知道怎么做了。如果你想完全地控制這些元素，你可以使用一個支持主題的插件，比如uniformjs并應(yīng)用你想要的主題樣式，甚至可以自己創(chuàng)建一些主題。
字體
字體是扁平化設(shè)計里非常重要的元素。由于界面更加簡潔，你可以使用字體幫你創(chuàng)建你期望的風(fēng)格和基調(diào)。你可以對扁平化設(shè)計的框架只使用定制的并且特定的字體來設(shè)置基調(diào)。由于背景簡單，字體就會突出并且本身就設(shè)置了風(fēng)格?？纯?扁平化設(shè)計里字體的使用"就可以激勵你，并且可以學(xué)到其他人是如何使用字體獲得別具一格的視圖的。
色彩
設(shè)計界面的基礎(chǔ)之一是定義調(diào)色板。扁平化界面設(shè)計所采用的色彩的模式與其他調(diào)色板相比傾向于更加醒目和更加明亮。扁平化UI色彩在思想上就是用這樣的理念開發(fā)的，而且是下載今天扁平化設(shè)計里所用的某些最佳（和最流行）的色彩的好去處。
當(dāng)你選擇好調(diào)色板后，記住要想想色彩是怎樣幫助用戶對整個站點進(jìn)行導(dǎo)航的。確保給站點的主要動作指定色彩：比如“提交”、”發(fā)送“、“更多”等按鈕都應(yīng)當(dāng)是同一個色彩。理想情況下鮮明的色彩與背景形成了鮮明的對比。如果你的徽標(biāo)或者商標(biāo)采用主色的話，那么它應(yīng)當(dāng)是主要控制所使用的哪個色彩。不要自始至終過分的使用它，否則你將冒著在用戶眼里這個色彩不太重要的風(fēng)險。
#p#
你還應(yīng)該選擇按鈕的輔助色彩，通常是淺灰色。這樣的話你可以把兩個按鈕排成一行，例如“提交”和“取消”，“提交”作為主要動作而“取消”是輔助動作。在扁平化設(shè)計里色彩的選擇尤其重要，因為當(dāng)你使用扁平化按鈕的時候，色彩將是幫助用戶識別彼此的主要手段之一。
形狀
通常情況下，根據(jù)網(wǎng)站的風(fēng)格你會更傾向于正方形或方形圓角的按鈕。你可以更有創(chuàng)意并使用類似圓形，三角形或者甚至是自定義形狀，但是請注意，后者的風(fēng)險有點大。確認(rèn)整個界面控件保持一致，這樣用戶才能識別并認(rèn)出你的標(biāo)題、內(nèi)容和控件。
接下來你可以看到一個普通的Twitter Bootstarp按鈕和Flatstrap風(fēng)格按鈕的差異。Flatstrap是Bootstarp的一個扁平化版本。按鈕的圓角有一個微妙的漸變和陰影效果，但是扁平化設(shè)計完全剝離了這些。
哪兒應(yīng)當(dāng)使用扁平化設(shè)計？
扁平化設(shè)計應(yīng)該適度地使用。雖然創(chuàng)建輕量的且簡潔的界面很簡單，但是卻不適合每個站點。例如，如果你正在設(shè)計投資組合或者web技術(shù)入門網(wǎng)站，那么扁平化設(shè)計非常適合，不過如果你試圖創(chuàng)建更復(fù)雜的東西的話，那它就有局限性。如果你正在為兒童設(shè)計一個站點的話，那么你將需要把它設(shè)計的亮麗、多彩，充滿了樂趣的元素和活潑的特征。如果你正在創(chuàng)建一個游戲站點，那么它應(yīng)該全部是圖形和效果，并且設(shè)計應(yīng)當(dāng)能夠連接到游戲。
這種類型的站點可以使用扁平化設(shè)計，不過扁平化風(fēng)格可能最終傷害了這樣的站點。始終要牢記住你的目標(biāo)客戶和你希望傳遞的信息。如果使用了扁平化設(shè)計可以使你傳遞的信息更加清晰，那么使用它。不過不要認(rèn)為趨勢或者可視化風(fēng)格比站點內(nèi)容更重要。
可用性（總是）比容貌更重要
如果你已經(jīng)做出決定為你的網(wǎng)站或者產(chǎn)品創(chuàng)建一個扁平化設(shè)計。請和其他人溝通你的設(shè)計原型，確保你的工作達(dá)到目的。您也可以嘗試A / B測試，測試兩個不同的設(shè)計和轉(zhuǎn)換。 一個Web應(yīng)用，移動應(yīng)用程序或者網(wǎng)站的主要目的始終都是清楚的向用戶傳達(dá)消息并提供一個易用、直觀的界面。設(shè)計師的工作要確保設(shè)計審美不傷及可用性。
如果您創(chuàng)建了一個美妙的設(shè)計，用戶卻不明白，那么你就傷害了產(chǎn)品。趨勢和風(fēng)格的使用應(yīng)該和項目的目標(biāo)一致。當(dāng)你進(jìn)行視覺創(chuàng)作時，你很容易迷失自己，特別是你很清楚它們時。但是在最后，用戶才是最好的方法來檢驗的工作的方法。有時候，一個簡單的改變可以讓用戶感到很大的差別。
那么，我是不是應(yīng)該使用扁平化設(shè)計？
一直要牢記趨勢僅僅是趨勢。要試著創(chuàng)建偉大設(shè)計而且是適合最終用戶的設(shè)計。優(yōu)先創(chuàng)建一個功能性的和可用的站點，而不是創(chuàng)建一個好看的而且時髦的站點。正如Wells Riley在他的博客文章“ 盡量少的美化、盡量多的設(shè)計”里所說，“始終不要忘記：設(shè)計是解決問題的一種形式。"
英文原文：Flat Design: An In-Depth Look
譯文鏈接：http://www.oschina.net/translate/flat-design-an-in-depth-look
當(dāng)前文章：深入探討扁平化設(shè)計
本文來源：http://m.fisionsoft.com.cn/article/coihojh.html
