譯者前言

一個戲劇性的事實(shí)，不出意外我現(xiàn)在應(yīng)該是一名 Android 開發(fā)工程師，意外是指遇到了 Angular，戲劇是指這倆都是 Google 的！而 Google 最出名的設(shè)計(jì)語言是 Material Design。 我最近一直在忙于自己項(xiàng)目的設(shè)計(jì)（https://github.com/wizaaard/wizard），其實(shí)前端最終反饋給用戶的第一直覺就是 UI，我喜歡 Material Design 卻不知如何下手，于是這幾天我到處尋找 Material Design 的資料，找到了這一篇我認(rèn)為比較好的文章，于是翻譯出來跟大家分享??。

歡迎大家勘錯，來自一名最不前端的前端工程師 ??

(資料圖片)

什么是扁平化設(shè)計(jì)

隨著 IOS7 的即將發(fā)布，Jony Ive 為了破壞性的更改而呼聲高漲，大家都知道 Apple 將進(jìn)行改頭換面的扁平化設(shè)計(jì)，但是對于剛接觸的人來說，“扁平化設(shè)計(jì)” 是一個容易讓人困惑的詞，所以讓我們說出來吧！

“扁平化設(shè)計(jì)” 是對于設(shè)計(jì)哲學(xué)的 shorthand （Flat Design is shorthand for a design philosophy）

看看你的電腦桌面，或者 IPhone 的計(jì)算器，或者你的 Ipad newstand，這些東西被設(shè)計(jì)成聲音和外觀都和真實(shí)世界的對應(yīng)的物品一樣，但是我們真的需要這些虛擬的暗示和額外的設(shè)計(jì)嗎？提倡扁平化設(shè)計(jì)的人并不這么認(rèn)為。

這個爭論的點(diǎn)在 UI 材料的簡潔度，清晰度，純粹度（譯注：honest）

相反，扁平化設(shè)計(jì)的擁護(hù)者認(rèn)為 GUI （graphical user interfaces） 應(yīng)該避免樣式對功能的描述（should eschew style for functionality），意思是說應(yīng)該避免（UI）傾斜的（beveled），有邊緣的（edges），漸變的（gradients），有陰影的（shadows）和反射（reflection），以及創(chuàng)造一個可以發(fā)揮數(shù)字系統(tǒng)優(yōu)勢的用戶體驗(yàn)，而不是把用戶限制在熟悉的真實(shí)世界的類比物中，扁平化的頁面很少在方程式（equation 譯注：每個材料的設(shè)計(jì)計(jì)算程式）中引入尺寸精確的（dimensionally），有陰影的或者有紋理的，而是依賴視差（parallax）的滾動和視覺的清晰度來進(jìn)行交流。 扁平化設(shè)計(jì)的一個很好的例子是 Google Now （https://www.google.com/search/about/），它使用類似卡片系統(tǒng)來顯示信息骨架（information bracket）。而不是將信息隔離在靜態(tài)圖標(biāo)里，現(xiàn)在展示的數(shù)據(jù)在一個可讀性良好，很容易滑動的標(biāo)準(zhǔn)尺寸的卡片中。其他的例子？Windows8 是 Microsoft 的 Metro 設(shè)計(jì)語言的衍生物（descended）（metro 的一個實(shí)現(xiàn)），通過圖形來幫助用戶理解他們所看見的信息的內(nèi)容，從而使得排版和信息的傳遞更有價(jià)值。

通常是對擬態(tài)設(shè)計(jì)（skeuomorphic design 譯注：上面說的真實(shí)世界類比物的設(shè)計(jì)，參照<IOS7）的回應(yīng)。< h3="">

想要理解扁平化設(shè)計(jì)，你必須明白去反對擬態(tài)設(shè)計(jì)。擬態(tài)設(shè)計(jì)歸結(jié)為視覺上的欺騙（trikery， 譯注：我倒是挺喜歡這個詞??），或者是通過使用一些細(xì)節(jié)和裝飾讓一件東西看起來像另一件東西，在建筑上，虛假的墻是擬態(tài)設(shè)計(jì)。在汽車設(shè)計(jì)中，虛假的木板（wood panelling）是擬態(tài)設(shè)計(jì)。在 UI 上通常將數(shù)字元素設(shè)計(jì)成像物理元素（譯注：真實(shí)世界的類比物）的東西，這可能意味著任何事情， Pinterest 的 pin board 到 Find My Friends 用豐富的皮革縫合起來（That can mean anything from Pinterest’s “pin board” to the rich leather stitching that boarders Find My Friends.）。

它使用漸變，紋理和一些其他的細(xì)節(jié)讓數(shù)字對象看起來“真實(shí)”

對數(shù)字元素的擬態(tài)可以追溯至 1980 年早期。蘋果的都一個 GUI 來自 1984 年，引入了 “桌面” 和看起來像文件夾和紙片的圖標(biāo)的概念，那時(shí)候計(jì)算機(jī)界面對于大多數(shù)人是完全陌生的概念，這使得擬態(tài)設(shè)計(jì)成為一種有價(jià)值的工具。使得設(shè)計(jì)師可以創(chuàng)建一個舊款之間的視覺隱喻，，熟悉的對象（manilla 文件夾）和一些新的，令人困惑的工具（數(shù)字文件）。擬態(tài)設(shè)計(jì)幫助我們學(xué)習(xí)。 但是隨著個人計(jì)算機(jī)的普及，越來越少的人需要視覺暗示來理解按鈕或者圖標(biāo)的功能。 擬態(tài)化風(fēng)格已經(jīng)疲憊不堪，它是一種數(shù)字化的 potemkin（譯注：potemkin 譯作“波坦金村”，是一座虛假的村莊，用于掩飾真實(shí)村莊的衰敗），它會使屏幕雜亂無章，使用戶被不必要的信息變的負(fù)重不堪。因此它成為新一代設(shè)計(jì)師的偏愛，他們中的大多數(shù)人不記得沒有電腦的世界。

這一切聽著很熟悉，自上世紀(jì)初以來，近現(xiàn)代主義者一直在爭論一個基本的思想：不要添加額外的細(xì)節(jié)去支撐（材料）的功能性。更純粹的對待材料和結(jié)構(gòu)，不要為了讓用戶感到安全就創(chuàng)建出虛假的展示，自 Le Corbusier 進(jìn)入設(shè)計(jì)世界以來，這是每位現(xiàn)代設(shè)計(jì)師最基本的戰(zhàn)爭和吶喊。但在某種程度上，扁平化設(shè)計(jì)并不是什么新鮮的事情，它只是大寫字母“M”，它代表 “Modernism” 的簡寫。

扁平化時(shí)代之后會怎樣

雖然世界肯定會變得很扁平，但是它不可能一直扁平下去。我們可以注意 UI 和 UX（User Experience） 的去向，扁平化設(shè)計(jì)順利進(jìn)行之后，看上個世紀(jì)，現(xiàn)代主義的每一次浪潮都反抗了之前的浪潮，比如，Bauhaus 的嚴(yán)格現(xiàn)代主義和國際風(fēng)格在 1930年的時(shí)候席卷全球，第二代設(shè)計(jì)師在討論中加入了 Critical Regionalism 的概念，認(rèn)為早期現(xiàn)代主義可以一刀切的信條還有點(diǎn)…幼稚。UI 設(shè)計(jì)可能會發(fā)生同樣的事情，徹底扁平化之后，我們可能會看到設(shè)計(jì)師們在真正需要的地方重新引入尺寸。

但是這都是幾年后的事情了，現(xiàn)在，我們將拭目以待，Jony Ive 是否還是采用了扁平化的設(shè)計(jì)，還是開始抵制了，這樣事情會變得更加有趣。