Vitrines sur la Relève
Buffalo
United Pixelworkers
Oak.is
Dream + Reach: The first 50 Years of Bose
Crafting Type
Etch
Alan Horne
Float
Surpris.es
Friends of the Web
Microsoft
Supereight Studio
Leen Heyne Fine Jewelry
Fhoke
Fitbit
Dickson Fong
Trippeo
Kevin Tresor Portfolio
Gogoro
Genn.org VI
Hart Island Project
Online Photo Mosaic Maker
Metropolis Moscow
Part Design. Part Code. Completely Creative.
Nardelli
Anchour
The Real Story Of Palm Oil
DUO!
Object:Photo
Mrs. Z’s Salsa
Let’s make history
Emil Wallner
Secret Resolutions
CloudSight
tix02 design studio
Music
This Was My Best
UX/UI Design & Front End Dev.
Volkswagen Configurator
Neil Carpenter
Mountainview Agency 2015 Website
Justin Aguilar
Playground Inc
Interactive design studio
Vtcreative
Ivo Mynttinen
PANDR
Knock Knock Factory
Mud
Squidee
Roy Barber
Lowdi
Belancio
]]>
譯者注：本文作者 Adrian Taylor 是一位交互創(chuàng)意總監(jiān)并且是Pushstart Creative的創(chuàng)辦人,專注于多種研究，如物理聚合、人機(jī)交互技術(shù)和品牌體驗(yàn)等。盡管他目前工作的重點(diǎn)是產(chǎn)品研發(fā)、戰(zhàn)略發(fā)展、UX等，但是對pixels卻一往情深。想了解更多可以去 designtaylor.com或者上Twitter查找 Adrian Taylor。
原文地址：http://www.smashingmagazine.com/2013/09/03/flat-and-thin-are-in/
Windows Phone 8 和 Apple’s iOS 7的用戶界面
發(fā)生了什么？
那么，為什么群體意識從喜愛帶紋理、有透視和陰影的設(shè)計(jì)轉(zhuǎn)變喜愛扁平色彩和極簡圖形的設(shè)計(jì)呢？當(dāng)然導(dǎo)致這一轉(zhuǎn)變有很多因素，但是有一些因素更為突出。
信息過載
隨著世界聯(lián)系越來越緊密，我們不斷地接受大量信息，一些信息是重要的、相關(guān)的，但大部分不是。我們不斷地評估其價(jià)值，過濾無用信息，或創(chuàng)建新的內(nèi)容，所有這些都使我們精疲力竭。還有，大部分內(nèi)容消費(fèi)已轉(zhuǎn)移到小屏幕設(shè)備，更是加劇了超負(fù)荷現(xiàn)象。這樣我們就很容易就淹沒在信息中，砍掉用戶界面（UI）的繁雜元素才是視覺設(shè)計(jì)的王道。
擺脫混亂: Geckoboard的設(shè)計(jì)使關(guān)鍵數(shù)據(jù)被一目了然呈現(xiàn)，并易于理解
簡約就是金科玉律
同樣有個(gè)趨勢就是，顛覆性的網(wǎng)頁應(yīng)用和服務(wù)正提供高度專用化的工具，只設(shè)計(jì)少數(shù)功能。雖然傳統(tǒng)軟件開發(fā)員傾向于為產(chǎn)品加載過多功能，以期獲得高價(jià)定位；但目前變化趨勢專注于微應(yīng)用，偏愛功能簡潔。簡單的應(yīng)用意味著有簡單的界面。
美觀且精致： 由Oak.設(shè)計(jì)的 Blue 天氣應(yīng)用程序
又一次，以內(nèi)容核心
新設(shè)備和新技術(shù)涌入市場時(shí)，常常會出現(xiàn)這樣的情況，我們熱衷于思考于它們能做什么，我們又怎樣才能提高交互性。但關(guān)注界面設(shè)計(jì)這一狂熱之后又回歸專注于內(nèi)容。媒體資源的消費(fèi)，不論文字、音樂還是視頻、音視頻，等我們設(shè)備上最常用的活動，在你樂享其中時(shí)，肯定不希望被無關(guān)的界面元素打擾。
技術(shù)水平
隨著智能手機(jī)和平板電腦已滲透到千家萬戶，顯性操作正在逐漸減少。過去，如果彈窗沒有從屏幕跳出來，我們曾擔(dān)心用戶會錯(cuò)過操作，而現(xiàn)在，我們更愿意讓用戶去探索這種細(xì)微的交互體驗(yàn)。鑒于此，很多互聯(lián)網(wǎng)產(chǎn)品已經(jīng)支持沒有任何視覺引導(dǎo)的觸碰指令。
Fitbit的儀表盤的視覺設(shè)計(jì)清爽,、膽大,和親和力
技術(shù)的影響
大部分軟件受限于運(yùn)行平臺。屏幕尺寸和像素密度也受限于硬件設(shè)備條件。一個(gè)簡約的界面需要十分有限的設(shè)計(jì)元素，這意味著每一個(gè)元素都要有所發(fā)揮。排版布局和字體粗細(xì)在很大程度上決定了扁平設(shè)計(jì)的美觀和易用性。
如果你的目標(biāo)設(shè)備不能處理好這方面的細(xì)微差別，你就不太幸運(yùn)了。隨著屏幕尺寸和像素密度不斷增加，更細(xì)、更小的樣式也能呈現(xiàn)最佳的清晰度。當(dāng)然，對@font-face屬性的支持，提高了對文字間距的集中處理，也增加了極簡排版的吸引力。
Wallmob的市場數(shù)據(jù)監(jiān)控應(yīng)用：從任何一個(gè)有一個(gè)瀏覽器的設(shè)備上都可以檢測到數(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)格，但扁平的交互界面顯然比其它樣式要更容易處理。簡約設(shè)計(jì)的另一種優(yōu)勢就是，能見降低頁面重量和縮短加載時(shí)間。
無重量的響應(yīng)設(shè)計(jì): OnSite. (大尺寸展示)
勇于實(shí)踐
好了，不嘮叨理論了。讓我們看看實(shí)踐上的操作吧。設(shè)計(jì)一個(gè)有效的簡約風(fēng)格很具有挑戰(zhàn)的。當(dāng)你拋棄界面上那些花哨的裝飾元素（下拉陰影，透視關(guān)系，紋理材質(zhì)等），立馬就會意識到剩余的元素關(guān)鍵且重要。以下幾個(gè)技巧在設(shè)計(jì)中普遍很實(shí)用，特別是針對扁平UI設(shè)計(jì)：
開始設(shè)計(jì)之前
任何項(xiàng)目開始第一步，就是確保你選對風(fēng)格。深入設(shè)計(jì)之前，確保風(fēng)格符合目標(biāo)用戶的感知需求，適應(yīng)目標(biāo)平臺、承載設(shè)備和應(yīng)用類型。如果該方案風(fēng)格與項(xiàng)目不匹配，那么接下來的導(dǎo)向則毫無意義。
流程
設(shè)計(jì)流程非常重要，無論選擇何種樣式！簡約設(shè)計(jì)時(shí)記住以下幾點(diǎn)：
1. 設(shè)計(jì)minimal界面時(shí)，我會從pre-pc時(shí)代尋求靈感，那個(gè)時(shí)候的藝術(shù)大師，用少量的資源做了大量的設(shè)計(jì)。例如：Josef Müller-Brockmann 和Wim Crouwel，重溫這些大師的作品是很好的學(xué)習(xí)機(jī)會。但是有時(shí)我也會參考minimal畫家的作品，如Ellsworth Kelly，建筑師，如Mies van der Rohe 和工業(yè)設(shè)計(jì)師，如Dieter Rams。
2. 放下工作，休息一下很有幫助。扁平和簡約設(shè)計(jì)的一切均關(guān)乎到細(xì)節(jié)的差異。因此小憩片刻后再回到工作，帶著全新的眼光工作，比長時(shí)間冥思苦想更有效。
3. 并排比較各個(gè)版式同樣有幫助。哪怕花20分鐘前將一個(gè)線條下移各5個(gè)像素分別保存，對比兩個(gè)版式就能很快分清孰好孰壞。
4. 由于實(shí)物展示的相對比例至關(guān)重要，所以要及早在不同的目標(biāo)設(shè)備上測試。
5. 整個(gè)設(shè)計(jì)過程中不斷問自己“真的需要嗎？” 。支撐項(xiàng)目時(shí)候，找一些討巧的辦法，例如，添加一些有趣的元素、樣式會這樣會很容易也會很吸引人，但必須始終注意剔除不必要的元素，不斷精簡。甩掉你費(fèi)盡心血的部分總是難以割舍，但修改過程必須挑剔。
Global Closet: 由The Workshop為美國地理雜志教育板塊設(shè)計(jì)的一個(gè)互動游戲
網(wǎng)格
網(wǎng)格在界面設(shè)計(jì)中扮演很重要的角色，這里也不例外。如果你想通過建立視覺規(guī)范使整個(gè)設(shè)計(jì)次序化、直觀化，那么網(wǎng)格就很有幫助。
1. 網(wǎng)格不僅僅能展現(xiàn)視覺次序。還可以使用網(wǎng)格劃分內(nèi)容和功能組。你可以不用總是使用直線或框劃分對象組，其實(shí)簡單的對齊和間距設(shè)置也能幫助用戶理解界面結(jié)構(gòu)。
2. 試著打破網(wǎng)格的結(jié)構(gòu)，突出重要的元素來吸引用戶眼球。告別虛假的3D元素裝飾后，實(shí)物比例和定位等基本布局原則就是展現(xiàn)視覺次序的關(guān)鍵。
3. 嘗試一下你不習(xí)慣的更密集的網(wǎng)格設(shè)計(jì)。當(dāng)你大量減少視覺配色這些元素時(shí)，又會發(fā)現(xiàn)這種設(shè)計(jì)方式可以承載更復(fù)雜的結(jié)構(gòu)，也不顯得凌亂。如果你有想表達(dá)的額外的內(nèi)容信息你可以單獨(dú)放置。
Rossul 設(shè)計(jì)的Live School iPad app
顏色
當(dāng)然，顏色在視覺設(shè)計(jì)中角色很重要，對minimal界面更為關(guān)鍵。
1. 考慮更寬泛的配色方案。如果你們像我一樣，那么就會明白相近的配色往往使界面功能性更強(qiáng)。而以強(qiáng)烈的寬泛的配色來設(shè)計(jì)就更容易了?，F(xiàn)在是你發(fā)揮的機(jī)會，只用少量的元素，擴(kuò)展配色方案會讓你感覺很好。
2. 設(shè)置配色方案時(shí)，測試所選色調(diào)要在很寬的色譜內(nèi)進(jìn)行，才可保證用明暗對比來表現(xiàn)畫面。
3.如果你想試試同系配色和鮮明對比。要及早測試配色，以確保微妙變化和高對比度元素都能有足夠的選擇空間。
TriplAgent‘的視覺設(shè)計(jì)使用了豐富的配色
文字排版
以內(nèi)容主導(dǎo)的扁平式網(wǎng)頁而言，文字排版就是大英雄，功不可沒。
1.襯線是一種選擇，無襯線則會顯得更干凈。
2. 在品種繁多，粗細(xì)和樣式各有差別的字體系列查找你需要的字體。當(dāng)然不是使用全部，而寬泛的選擇幫你更準(zhǔn)確的定義出層級關(guān)系，同時(shí)你也會發(fā)現(xiàn)某些字體會更適合特定環(huán)境。
3. 不要顧忌把大小和粗細(xì)差別懸殊的字體搭配在一起就一定會造成視覺凌亂。用超大、超細(xì)的字體做標(biāo)題而用中等粗細(xì)的小號字體做正文其實(shí)也是一種嘗試。
4. 要注意字體便于閱讀。我知道聽起來可笑，但人們會對你選擇的字體產(chǎn)生很多質(zhì)疑，所以確保按任何比例縮放時(shí)均能閱讀
Siteleaf的設(shè)計(jì)，文字呈現(xiàn)干凈且易讀
交互
在扁平設(shè)計(jì)中，證明元素的交互性會顯得很棘手。這是我采用的幾個(gè)方法。
1. 對比很關(guān)鍵。如果構(gòu)圖留白比較多，你可以給可操作元素一點(diǎn)彩色；如果是文字為主，可以使用簡單的配圖；如果標(biāo)題是大號小寫字母，鏈接可以用小號大寫字母；就是這個(gè)意思。
2. 傳統(tǒng)布局也很有用。如果你要放置一個(gè)返回按鈕，那就將其放置在用戶期望找到返回按鈕的位置上，左上角。
3. 當(dāng)頁面堆疊更多功能時(shí)，把每個(gè)交互元素設(shè)計(jì)成按鈕沒意義。界面盡量設(shè)計(jì)直觀一些。但如果交互特別復(fù)雜或者出乎意料，提供簡單的錯(cuò)誤恢復(fù)功能。
4.下拉框、模式窗口、彈出框等層級元素在扁平設(shè)計(jì)中一般比較難處理。而對鮮明的對比、邊框、著色的處理，也能從視覺上區(qū)分出交互層級。
簡潔的構(gòu)圖和鮮明的對比: Taasky.
總結(jié)
我不相信設(shè)計(jì)有固定規(guī)則可循。看到設(shè)計(jì)師嘔心瀝血只為構(gòu)建干凈、簡潔的用戶界面，實(shí)在令人嘆服。扁平就真的不需要漸變和陰影了嗎？當(dāng)然不是。實(shí)際上我見過最引人興趣的工作，是那種能明智的呈現(xiàn)內(nèi)容、同時(shí)能夠保持交互直觀性和平衡維度。
在我們這個(gè)高度聯(lián)系、資訊豐富和功能齊全的數(shù)字世界里，簡約設(shè)計(jì)又重新廣泛興起。而它并不能解決一切，但如果考慮周全、應(yīng)用得當(dāng)，也同樣能給我?guī)硪子煤陀鋹偟臄?shù)字體驗(yàn)。
(本文出自騰訊CDC博客: http://cdc.tencent.com/?p=7951)
]]>
Mixd
FHOKE
Tack
Meng To
Every Last Drop
Kyle Thacker
The Prince Ink Company
Mariusz Cie?la
Wistia
Playground Inc.
Justin Aguilar
Plain
Startup Giraffe
Every Last Drop
La Carotte
Teddy Needs a Bath
Epiphany Search
Pixo Creative
Tap Tap Design
Digital Pilgrims
Sammar Kiewi
2. Etch
3. Build 2012
4. Mark Simonson
5. OnSite
6. Werkpress
7. Coloured Lines
8. Foundation
9. Layer Vault
10. Profound Grid
