發(fā)生了什么？

那么,，為什么群體意識(shí)從喜愛(ài)帶紋理,、有透視和陰影的設(shè)計(jì)轉(zhuǎn)變喜愛(ài)扁平色彩和極簡(jiǎn)圖形的設(shè)計(jì)呢？當(dāng)然導(dǎo)致這一轉(zhuǎn)變有很多因素,，但是有一些因素更為突出,。

信息過(guò)載

隨著世界聯(lián)系越來(lái)越緊密，我們不斷地接受大量信息,，一些信息是重要的,、相關(guān)的，但大部分不是,。我們不斷地評(píng)估其價(jià)值,，過(guò)濾無(wú)用信息，或創(chuàng)建新的內(nèi)容,，所有這些都使我們精疲力竭,。還有，大部分內(nèi)容消費(fèi)已轉(zhuǎn)移到小屏幕設(shè)備,，更是加劇了超負(fù)荷現(xiàn)象,。這樣我們就很容易就淹沒(méi)在信息中，砍掉用戶界面（UI）的繁雜元素才是視覺(jué)設(shè)計(jì)的王道,。

擺脫混亂: Geckoboard的設(shè)計(jì)使關(guān)鍵數(shù)據(jù)被一目了然呈現(xiàn),，并易于理解

簡(jiǎn)約就是金科玉律

同樣有個(gè)趨勢(shì)就是，顛覆性的網(wǎng)頁(yè)應(yīng)用和服務(wù)正提供高度專用化的工具,，只設(shè)計(jì)少數(shù)功能,。雖然傳統(tǒng)軟件開(kāi)發(fā)員傾向于為產(chǎn)品加載過(guò)多功能，以期獲得高價(jià)定位,；但目前變化趨勢(shì)專注于微應(yīng)用,，偏愛(ài)功能簡(jiǎn)潔。簡(jiǎn)單的應(yīng)用意味著有簡(jiǎn)單的界面。

美觀且精致：  由Oak.設(shè)計(jì)的 Blue 天氣應(yīng)用程序

又一次,，以內(nèi)容核心

新設(shè)備和新技術(shù)涌入市場(chǎng)時(shí)，常常會(huì)出現(xiàn)這樣的情況,，我們熱衷于思考于它們能做什么,，我們又怎樣才能提高交互性。但關(guān)注界面設(shè)計(jì)這一狂熱之后又回歸專注于內(nèi)容,。媒體資源的消費(fèi),，不論文字、音樂(lè)還是視頻,、音視頻,，等我們?cè)O(shè)備上最常用的活動(dòng)，在你樂(lè)享其中時(shí),，肯定不希望被無(wú)關(guān)的界面元素打擾,。  

技術(shù)水平

隨著智能手機(jī)和平板電腦已滲透到千家萬(wàn)戶，顯性操作正在逐漸減少,。過(guò)去,，如果彈窗沒(méi)有從屏幕跳出來(lái)，我們?cè)鴵?dān)心用戶會(huì)錯(cuò)過(guò)操作,，而現(xiàn)在,，我們更愿意讓用戶去探索這種細(xì)微的交互體驗(yàn)。鑒于此,，很多互聯(lián)網(wǎng)產(chǎn)品已經(jīng)支持沒(méi)有任何視覺(jué)引導(dǎo)的觸碰指令,。

Fitbit的儀表盤的視覺(jué)設(shè)計(jì)清爽,、膽大,和親和力

技術(shù)的影響

大部分軟件受限于運(yùn)行平臺(tái),。屏幕尺寸和像素密度也受限于硬件設(shè)備條件,。一個(gè)簡(jiǎn)約的界面需要十分有限的設(shè)計(jì)元素，這意味著每一個(gè)元素都要有所發(fā)揮,。排版布局和字體粗細(xì)在很大程度上決定了扁平設(shè)計(jì)的美觀和易用性,。

如果你的目標(biāo)設(shè)備不能處理好這方面的細(xì)微差別，你就不太幸運(yùn)了,。隨著屏幕尺寸和像素密度不斷增加,，更細(xì)、更小的樣式也能呈現(xiàn)最佳的清晰度,。當(dāng)然,，對(duì)@font-face屬性的支持，提高了對(duì)文字間距的集中處理,，也增加了極簡(jiǎn)排版的吸引力,。

Wallmob的市場(chǎng)數(shù)據(jù)監(jiān)控應(yīng)用：從任何一個(gè)有一個(gè)瀏覽器的設(shè)備上都可以檢測(cè)到數(shù)據(jù)

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

隨著各種尺寸聯(lián)網(wǎng)設(shè)備的普及，交互界面變得更需要強(qiáng)調(diào)適配性，響應(yīng)式設(shè)計(jì)也就應(yīng)運(yùn)而生,。雖然響應(yīng)式設(shè)計(jì)并不要求特定風(fēng)格,，但扁平的交互界面顯然比其它樣式要更容易處理。簡(jiǎn)約設(shè)計(jì)的另一種優(yōu)勢(shì)就是,，能見(jiàn)降低頁(yè)面重量和縮短加載時(shí)間,。

無(wú)重量的響應(yīng)設(shè)計(jì): OnSite. (大尺寸展示)

勇于實(shí)踐

好了，不嘮叨理論了,。讓我們看看實(shí)踐上的操作吧,。設(shè)計(jì)一個(gè)有效的簡(jiǎn)約風(fēng)格很具有挑戰(zhàn)的。當(dāng)你拋棄界面上那些花哨的裝飾元素（下拉陰影,，透視關(guān)系,，紋理材質(zhì)等），立馬就會(huì)意識(shí)到剩余的元素關(guān)鍵且重要,。以下幾個(gè)技巧在設(shè)計(jì)中普遍很實(shí)用,，特別是針對(duì)扁平UI設(shè)計(jì)：

開(kāi)始設(shè)計(jì)之前

任何項(xiàng)目開(kāi)始第一步，就是確保你選對(duì)風(fēng)格,。深入設(shè)計(jì)之前,，確保風(fēng)格符合目標(biāo)用戶的感知需求，適應(yīng)目標(biāo)平臺(tái),、承載設(shè)備和應(yīng)用類型,。如果該方案風(fēng)格與項(xiàng)目不匹配，那么接下來(lái)的導(dǎo)向則毫無(wú)意義,。

流程

設(shè)計(jì)流程非常重要,，無(wú)論選擇何種樣式！簡(jiǎn)約設(shè)計(jì)時(shí)記住以下幾點(diǎn)：

　　1.  設(shè)計(jì)minimal界面時(shí),，我會(huì)從pre-pc時(shí)代尋求靈感,，那個(gè)時(shí)候的藝術(shù)大師，用少量的資源做了大量的設(shè)計(jì),。例如：Josef Müller-Brockmann 和Wim Crouwel,，重溫這些大師的作品是很好的學(xué)習(xí)機(jī)會(huì)。但是有時(shí)我也會(huì)參考minimal畫(huà)家的作品,，如Ellsworth  Kelly,，建筑師，如Mies van der Rohe 和工業(yè)設(shè)計(jì)師,，如Dieter Rams,。

　　2. 放下工作，休息一下很有幫助,。扁平和簡(jiǎn)約設(shè)計(jì)的一切均關(guān)乎到細(xì)節(jié)的差異,。因此小憩片刻后再回到工作,，帶著全新的眼光工作，比長(zhǎng)時(shí)間冥思苦想更有效,。

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

　　4. 由于實(shí)物展示的相對(duì)比例至關(guān)重要,，所以要及早在不同的目標(biāo)設(shè)備上測(cè)試。

　　5.  整個(gè)設(shè)計(jì)過(guò)程中不斷問(wèn)自己“真的需要嗎,？” 。支撐項(xiàng)目時(shí)候,，找一些討巧的辦法,，例如，添加一些有趣的元素,、樣式會(huì)這樣會(huì)很容易也會(huì)很吸引人,，但必須始終注意剔除不必要的元素，不斷精簡(jiǎn),。甩掉你費(fèi)盡心血的部分總是難以割舍,，但修改過(guò)程必須挑剔。

Global Closet: 由The Workshop為美國(guó)地理雜志教育板塊設(shè)計(jì)的一個(gè)互動(dòng)游戲

網(wǎng)格

網(wǎng)格在界面設(shè)計(jì)中扮演很重要的角色,，這里也不例外,。如果你想通過(guò)建立視覺(jué)規(guī)范使整個(gè)設(shè)計(jì)次序化、直觀化,，那么網(wǎng)格就很有幫助,。

1. 網(wǎng)格不僅僅能展現(xiàn)視覺(jué)次序。還可以使用網(wǎng)格劃分內(nèi)容和功能組,。你可以不用總是使用直線或框劃分對(duì)象組,，其實(shí)簡(jiǎn)單的對(duì)齊和間距設(shè)置也能幫助用戶理解界面結(jié)構(gòu)。

2. 試著打破網(wǎng)格的結(jié)構(gòu),，突出重要的元素來(lái)吸引用戶眼球,。告別虛假的3D元素裝飾后，實(shí)物比例和定位等基本布局原則就是展現(xiàn)視覺(jué)次序的關(guān)鍵,。

3. 嘗試一下你不習(xí)慣的更密集的網(wǎng)格設(shè)計(jì),。當(dāng)你大量減少視覺(jué)配色這些元素時(shí)，又會(huì)發(fā)現(xiàn)這種設(shè)計(jì)方式可以承載更復(fù)雜的結(jié)構(gòu),，也不顯得凌亂,。如果你有想表達(dá)的額外的內(nèi)容信息你可以單獨(dú)放置。

Rossul 設(shè)計(jì)的Live School iPad app

顏色 

當(dāng)然,，顏色在視覺(jué)設(shè)計(jì)中角色很重要,，對(duì)minimal界面更為關(guān)鍵,。

　　1. 考慮更寬泛的配色方案。如果你們像我一樣,，那么就會(huì)明白相近的配色往往使界面功能性更強(qiáng),。而以強(qiáng)烈的寬泛的配色來(lái)設(shè)計(jì)就更容易了。現(xiàn)在是你發(fā)揮的機(jī)會(huì),，只用少量的元素,，擴(kuò)展配色方案會(huì)讓你感覺(jué)很好。

2. 設(shè)置配色方案時(shí),，測(cè)試所選色調(diào)要在很寬的色譜內(nèi)進(jìn)行,，才可保證用明暗對(duì)比來(lái)表現(xiàn)畫(huà)面。

3.如果你想試試同系配色和鮮明對(duì)比,。要及早測(cè)試配色,，以確保微妙變化和高對(duì)比度元素都能有足夠的選擇空間。

TriplAgent‘的視覺(jué)設(shè)計(jì)使用了豐富的配色

文字排版

以內(nèi)容主導(dǎo)的扁平式網(wǎng)頁(yè)而言,，文字排版就是大英雄,，功不可沒(méi)。

1.襯線是一種選擇,，無(wú)襯線則會(huì)顯得更干凈,。

2. 在品種繁多，粗細(xì)和樣式各有差別的字體系列查找你需要的字體,。當(dāng)然不是使用全部,，而寬泛的選擇幫你更準(zhǔn)確的定義出層級(jí)關(guān)系，同時(shí)你也會(huì)發(fā)現(xiàn)某些字體會(huì)更適合特定環(huán)境,。

3. 不要顧忌把大小和粗細(xì)差別懸殊的字體搭配在一起就一定會(huì)造成視覺(jué)凌亂,。用超大、超細(xì)的字體做標(biāo)題而用中等粗細(xì)的小號(hào)字體做正文其實(shí)也是一種嘗試,。

4. 要注意字體便于閱讀,。我知道聽(tīng)起來(lái)可笑，但人們會(huì)對(duì)你選擇的字體產(chǎn)生很多質(zhì)疑,，所以確保按任何比例縮放時(shí)均能閱讀

Siteleaf的設(shè)計(jì),，文字呈現(xiàn)干凈且易讀  

交互

在扁平設(shè)計(jì)中，證明元素的交互性會(huì)顯得很棘手,。這是我采用的幾個(gè)方法,。

1. 對(duì)比很關(guān)鍵。如果構(gòu)圖留白比較多,，你可以給可操作元素一點(diǎn)彩色,；如果是文字為主，可以使用簡(jiǎn)單的配圖,；如果標(biāo)題是大號(hào)小寫(xiě)字母,，鏈接可以用小號(hào)大寫(xiě)字母,；就是這個(gè)意思。

2. 傳統(tǒng)布局也很有用,。如果你要放置一個(gè)返回按鈕,，那就將其放置在用戶期望找到返回按鈕的位置上，左上角,。

3. 當(dāng)頁(yè)面堆疊更多功能時(shí),，把每個(gè)交互元素設(shè)計(jì)成按鈕沒(méi)意義。界面盡量設(shè)計(jì)直觀一些,。但如果交互特別復(fù)雜或者出乎意料,，提供簡(jiǎn)單的錯(cuò)誤恢復(fù)功能。

4.下拉框,、模式窗口,、彈出框等層級(jí)元素在扁平設(shè)計(jì)中一般比較難處理。而對(duì)鮮明的對(duì)比,、邊框、著色的處理,，也能從視覺(jué)上區(qū)分出交互層級(jí),。

簡(jiǎn)潔的構(gòu)圖和鮮明的對(duì)比: Taasky.

總結(jié)

    我不相信設(shè)計(jì)有固定規(guī)則可循?？吹皆O(shè)計(jì)師嘔心瀝血只為構(gòu)建干凈,、簡(jiǎn)潔的用戶界面，實(shí)在令人嘆服,。扁平就真的不需要漸變和陰影了嗎,？當(dāng)然不是。實(shí)際上我見(jiàn)過(guò)最引人興趣的工作,，是那種能明智的呈現(xiàn)內(nèi)容,、同時(shí)能夠保持交互直觀性和平衡維度。

    在我們這個(gè)高度聯(lián)系,、資訊豐富和功能齊全的數(shù)字世界里,，簡(jiǎn)約設(shè)計(jì)又重新廣泛興起。而它并不能解決一切,，但如果考慮周全,、應(yīng)用得當(dāng)，也同樣能給我?guī)?lái)易用和愉悅的數(shù)字體驗(yàn),。