火了一年的扁平化，同學(xué)們都了解清楚了嗎？今天@網(wǎng)秦UEC 的同學(xué)從國外譯過來一篇好文，從扁平化的流行緣由聊到對(duì)界面設(shè)計(jì)的影響，附有一些設(shè)計(jì)技巧和注意事項(xiàng)，值得一讀喲。



在過去幾年中，我們見證了軟件和應(yīng)用界面設(shè)計(jì)從3D及擬物化向扁平化和極簡(jiǎn)化的快速轉(zhuǎn)變。盡管這一趨勢(shì)現(xiàn)在已經(jīng)無所不在，但我們不妨拿出一點(diǎn)時(shí)間來思考今天的結(jié)果是如何形成的，以及其對(duì)界面設(shè)計(jì)整體有著何種影響。另外，我還會(huì)和大家分享一些有關(guān)設(shè)計(jì)扁平化界面的小技巧和注意事項(xiàng)。

Windows Phone 8 及 Apple iOS 7 界面。



什么情況？



大家怎么就突然從大愛材質(zhì)、斜面和投射陰影突然轉(zhuǎn)向熱衷扁平化顏色和簡(jiǎn)約字體了？這一轉(zhuǎn)變受到了很多因素的推波助瀾，下面是其中比較顯著的幾項(xiàng)。



信息負(fù)荷過度



在當(dāng)今這個(gè)信息延綿不絕的文化背景下，我們每天要不停地接觸各種信息流，有的重要，有的無關(guān)緊要。我們要不斷地評(píng)估、過濾并且創(chuàng)造各種內(nèi)容，這一切顯然是很費(fèi)神的。此外，我們所攝入的內(nèi)容中有很多都轉(zhuǎn)移到了小屏幕設(shè)備中，從而更加劇了這種負(fù)荷過度的感覺。所以說人們現(xiàn)在很容易對(duì)過量的信息感到應(yīng)接不暇，而減少用戶界面（UI）中的元素則能夠帶來少許視覺上的寧靜。

雜亂不再：Geckoboard的可視化工具可方便你一眼輕松解讀關(guān)鍵數(shù)據(jù)。



簡(jiǎn)約是金



與上述趨勢(shì)類似，很多具有顛覆意義的Web應(yīng)用和服務(wù)可提供功能高度集中的工具。雖然傳統(tǒng)的軟件開發(fā)商比較喜歡在產(chǎn)品中加入大量功能作為高售價(jià)的借口，但是朝著集中化微應(yīng)用轉(zhuǎn)變的風(fēng)潮卻更傾向于使用簡(jiǎn)單代替多樣化的功能組合。應(yīng)用越簡(jiǎn)單，界面也就越簡(jiǎn)單。

漂亮簡(jiǎn)約：Oak的Blue天氣應(yīng)用。



內(nèi)容為王



每當(dāng)有新設(shè)備和技術(shù)進(jìn)入市場(chǎng)之時(shí)，其功能和推動(dòng)交互發(fā)展的程度總會(huì)讓我們?yōu)橹?。繼界面所帶來的迷亂之后，我們一般都會(huì)將注意力重新集中到內(nèi)容上去。不論是文字、音頻還是視頻，對(duì)媒體內(nèi)容的攝入大概是我們使用設(shè)備時(shí)的最主要活動(dòng)，而在這種情況下，我們需要保證界面不會(huì)影響我們的攝入過程。



技術(shù)精通



隨著智能手機(jī)和平板快速普及各種用戶，業(yè)界對(duì)其控制方式顯見性的顧慮日漸消退。盡管一度曾經(jīng)擔(dān)心用戶會(huì)難以看見不顯眼的按鈕，但現(xiàn)在我們卻更愿意探索較為細(xì)微的交互內(nèi)容。Windows 8和Chrome for Android甚至還支持在沒有視覺提示的情況下通過觸摸命令點(diǎn)亮屏幕。

Fitbit的控制面板界面在視覺上表現(xiàn)明亮、大膽而且簡(jiǎn)單好用。



技術(shù)的影響



大部分軟件都會(huì)受限于所運(yùn)行的平臺(tái)。屏幕尺寸和像素密度是硬件方面的限制因素。較小的界面大大限制了設(shè)計(jì)調(diào)色板的范圍，也就意味著界面上的每個(gè)元素都要具有自己的表現(xiàn)力。文字規(guī)模和字體大小將在很大程度上決定扁平化設(shè)計(jì)的美感和可用性。



如果你的目標(biāo)設(shè)備無法體現(xiàn)出細(xì)微到這種程度的差別，那算你運(yùn)氣好。隨著移動(dòng)設(shè)備的屏幕尺寸和像素密度不斷提高，以后更薄更小的設(shè)備將能實(shí)現(xiàn)更高的清晰度。當(dāng)然，對(duì)@font-face的支持也大大地提升了極簡(jiǎn)化文字核心設(shè)計(jì)的吸引力。

使用Wallmob進(jìn)行實(shí)時(shí)銷售監(jiān)控：記錄所有帶瀏覽器設(shè)備的銷售數(shù)字。



響應(yīng)式設(shè)計(jì)



隨著各種尺寸可聯(lián)網(wǎng)設(shè)備的普及，UI受大勢(shì)所趨而務(wù)求更加流暢，而與之相應(yīng)的，就是響應(yīng)式設(shè)計(jì)風(fēng)潮。盡管響應(yīng)式設(shè)計(jì)不需要特別的美學(xué)，但也可以說扁平化UI相比其他風(fēng)格來說能夠更易于輔助響應(yīng)式設(shè)計(jì)的美觀。最簡(jiǎn)化設(shè)計(jì)的另一優(yōu)勢(shì)在于能夠降低頁面重量從而減少加載時(shí)間。

簡(jiǎn)單但一點(diǎn)到位：OnSite



最佳實(shí)踐



好了，理論就說到這。下面我們來看看一下實(shí)際操作上的注意事項(xiàng)。打造有效的最簡(jiǎn)化設(shè)計(jì)難度很高。在層層剝離常規(guī)的一些UI元素（投射陰影、斜面、材質(zhì)等等）的同時(shí)，你就會(huì)發(fā)現(xiàn)所剩下的為數(shù)不多的這些元素多么重要。下面的小提示盡管在很大程度上是通用的，但尤其適用于扁平化UI。



開始之前



任何項(xiàng)目都一樣，第一步是先確保自己選定的樣式合理。在開始進(jìn)行扁平化設(shè)計(jì)之前，要先保證自己的設(shè)計(jì)符合目標(biāo)用戶的感覺以及目標(biāo)平臺(tái)、設(shè)備和應(yīng)用類型。如果不適合你的項(xiàng)目情況，那緊跟潮流也沒有意義。

流程



不管你要采用哪種樣式風(fēng)格，遵循流程都是非常重要的。下面的幾個(gè)建議可以幫助你實(shí)現(xiàn)簡(jiǎn)約效果。



1、在設(shè)計(jì)最簡(jiǎn)化界面時(shí)，我一般會(huì)從PC機(jī)出現(xiàn)前的時(shí)代尋找靈感，那時(shí)的設(shè)計(jì)師和藝術(shù)家往往需要做到“多快好省”。接這個(gè)機(jī)會(huì)你可以重新探訪一下過去的很多優(yōu)秀設(shè)計(jì)，例如Josef Müller-Brockmann 和 Wim Crouwel。另外，我還會(huì)看向Ellsworth Kelly等極簡(jiǎn)主義畫家，Mies van der Rohe等建筑家和Dieter Rams等工業(yè)設(shè)計(jì)師。



2、暫時(shí)脫離工作也很有幫助。扁平化和最簡(jiǎn)化設(shè)計(jì)的核心就在于細(xì)微之處。所以，短暫休息后帶著新的眼光重新回到工作中有時(shí)反而比一味苦心琢磨要更有效用。



3、將不同版本毗鄰比較也很有用。在將一條輸入線上下5個(gè)像素來回倒騰了20分鐘之后，我會(huì)保留下兩個(gè)不同版本進(jìn)行比較，這樣孰優(yōu)孰劣馬上見分曉。



4、由于物體的相對(duì)大小具有著非常關(guān)鍵的意義，因此你需要盡早開始在不同種類的設(shè)備上檢視設(shè)計(jì)理念，以便確定其是否合適。



5、在工作的同時(shí)，經(jīng)常自問：“我是否真的需要這個(gè)？”人總是很容易對(duì)自己鐘意的東西念念不舍，但我們還必須頻繁地找出要砍掉或者簡(jiǎn)化的內(nèi)容。拋棄自己費(fèi)盡心思做出來的東西不容易，但編輯取舍也是必須的。

Global Closet：一款由The Workshop為國家地理教育打造的互動(dòng)游戲。



網(wǎng)格



網(wǎng)格在界面設(shè)計(jì)中扮演著非常關(guān)鍵的角色，絕無例外。在你拿著一套受限制的視覺元素，努力想確定其各自順序并讓使用方式更加直觀時(shí)，網(wǎng)格能夠帶來很大幫助。



網(wǎng)格所確定的，不僅僅是視覺順序。你還可以用它來界定內(nèi)容和功能組。有時(shí)候要將一組物體分組不一定非要用到線條或者方框。簡(jiǎn)單的對(duì)其和空間調(diào)整往往能幫助用戶理解界面的結(jié)構(gòu)。



你也可以嘗試使用具有特定重要意義的元素打破網(wǎng)格來吸引用戶的注意力。



嘗試使用一下密度比較高的網(wǎng)格。在大幅簡(jiǎn)化視覺調(diào)色板時(shí)，你可能會(huì)發(fā)現(xiàn)你的設(shè)計(jì)能夠支持更為復(fù)雜的結(jié)構(gòu)，同時(shí)看起來也不會(huì)顯得凌亂。你也可以試試看僅通過位置調(diào)整能夠傳達(dá)出哪些額外的訊息。

Live School Rossul Design 開發(fā)的iPad應(yīng)用。



色彩



顏色毫無疑問是視覺設(shè)計(jì)中的一個(gè)關(guān)鍵組成部分。對(duì)于最簡(jiǎn)化界面來說，其所具有的意義更加關(guān)鍵。



考慮更為寬泛的調(diào)色板。個(gè)人來說，我覺得范圍比較窄小的調(diào)色板通常能創(chuàng)造出比較功能化的界面。想創(chuàng)造出讓人眼花繚亂的繽紛色彩非常簡(jiǎn)單。但通過下面這種方法，你可以大大拓展一下選擇范圍；而且，考慮到待設(shè)計(jì)元素的數(shù)量很少，擴(kuò)展調(diào)色板還能給你帶來很良好的感覺。



在設(shè)定調(diào)色板時(shí)，可以在一個(gè)比較寬泛的色值范圍內(nèi)對(duì)選定的色調(diào)進(jìn)行測(cè)試，并確保其在亮色和暗色下表現(xiàn)都合適。



建議分別試驗(yàn)一下同系配色及鮮明對(duì)比。早期對(duì)調(diào)色板進(jìn)行試驗(yàn)將保證你在接下來能夠掌握微妙和強(qiáng)對(duì)比元素所需的全部配色范圍。

TriplAgent 的視覺設(shè)計(jì)采用了絕妙的配色方案。



文字



在扁平化內(nèi)容驅(qū)動(dòng)網(wǎng)站上，文字是主角。



襯線體無疑是個(gè)辦法，但無襯線字體卻能讓人感到更為簡(jiǎn)潔。



你可以找一個(gè)粗細(xì)和樣式種類比較多的字體類型。雖然不一定全用的上，但比較寬泛的選擇范圍有助于更為鮮明地界定層次結(jié)構(gòu)。你也可能會(huì)發(fā)現(xiàn)某個(gè)粗細(xì)度在某個(gè)特定環(huán)境下效果更佳。



不要怕使用大小粗細(xì)走極端的字體搭配來構(gòu)建視覺順序。嘗試使用超大超細(xì)的標(biāo)題字體搭配小號(hào)中等粗細(xì)的正文字體。



注意字體是否易于辨認(rèn)閱讀。這一點(diǎn)雖然聽起來有點(diǎn)無厘頭，但你對(duì)自己所選定字體的依仗將是很強(qiáng)烈的，所以一定要保證其在任何尺寸小均易于辨認(rèn)。

Siteleaf上清爽易讀的文字。



交互



在扁平化UI中，要表現(xiàn)出哪些元素可交互是個(gè)有學(xué)問的活。下面是我常用的一些方法。



對(duì)比如果布局內(nèi)容中大部分為白色，那可以給交互元素添加一定其他色彩。如果你的設(shè)計(jì)以文字為主，可以使用簡(jiǎn)單的圖標(biāo)表示交互。如果標(biāo)題比較大而且全部為小寫字母，那么鏈接部分可以做小一點(diǎn)并使用大寫字母。你懂的。



常規(guī)的位置安放方法也能起到作用。比方說你的后退箭頭使用細(xì)V形表示，可以將其放置到左上角，因?yàn)橛脩粢话銜?huì)到這個(gè)位置找后退按鈕。



隨著頁面上疊加內(nèi)容的增加，我們無法將所有可交互元素都做成按鈕的樣子。界面應(yīng)盡量直觀。但如果交互過程比較復(fù)雜或有違常規(guī)，則應(yīng)提供方便的錯(cuò)誤恢復(fù)方法。



下拉菜單、模擬窗口、彈出式窗口及其他層疊元素對(duì)于扁平化設(shè)計(jì)來說操作起來比較麻煩。你可以采用鮮明的對(duì)比、邊框或著色區(qū)分不同的交互層級(jí)。

所呈現(xiàn)的設(shè)計(jì)要素布局簡(jiǎn)單，對(duì)比度優(yōu)秀：Taasky.

結(jié)尾

在設(shè)計(jì)領(lǐng)域沒有一成不變的規(guī)范?？吹礁魑辉O(shè)計(jì)師如此熱忱地投入極簡(jiǎn)化用戶界面的設(shè)計(jì)令人歡欣鼓舞。但是，探索扁平化設(shè)計(jì)是否就意味著絕不使用漸變和陰影？當(dāng)然不是。事實(shí)上，我近期看到的幾個(gè)很有意思的作品一方面以巧妙的方式呈現(xiàn)出了內(nèi)容，另一方面也保證了交互的直觀易懂，從而實(shí)現(xiàn)了扁平化和尺寸直接的平衡。

在這個(gè)互聯(lián)互通、信息豐裕、功能豐富的數(shù)字時(shí)代，最簡(jiǎn)化設(shè)計(jì)廣泛的復(fù)興讓人眼前一亮。這自然不會(huì)是無所不能的解決方案（沒有任何一種風(fēng)格能做到無所不能），但只要經(jīng)過深思熟慮和恰當(dāng)?shù)膽?yīng)用，其能夠?qū)崿F(xiàn)既好用，有舒適的數(shù)字體驗(yàn)。

掃一掃，案例分享帶回家（藍(lán)藍(lán)設(shè)計(jì)微信公眾平臺(tái)）