編者按：今天分享一篇小小的科普文，說(shuō)說(shuō)扁平化設(shè)計(jì)和Material Design有哪些不同的地方，持贊成/反對(duì)觀點(diǎn)的人都有什么理由，不多說(shuō)，直接戳 >>>

優(yōu)設(shè)三月指南類好文：

1. 《老外教你學(xué)漢字！超全面的中文字體新手指南》
2. 《超實(shí)用新手指南！零基礎(chǔ)如何自學(xué)UI設(shè)計(jì)？》
3. 《不得不看的流行趨勢(shì)！品牌H5營(yíng)銷完全實(shí)戰(zhàn)指南》
4. 《你用過(guò)幾款？給新手的ADOBE軟件不完全科普指南！》

兩種相似的設(shè)計(jì)風(fēng)格，一個(gè)基于另一個(gè)。一個(gè)是新熱事物，另一個(gè)，有人猜測(cè)，已經(jīng)以自己的方式成為一種時(shí)尚。一個(gè)是自發(fā)的——適應(yīng)設(shè)計(jì)的趨勢(shì)，另一個(gè)卻是有目標(biāo)——專用的設(shè)計(jì)指導(dǎo)規(guī)范。

你可能明白了扁平化與Material Design之間的沖突了。

但是，他們之間不同是什么呢，本質(zhì)上是一個(gè)比另一個(gè)更好？在某些用途上更好？實(shí)際上，一些人想知道它們之間的差別有多大，讓我們從最基本的開(kāi)始：擬物化設(shè)計(jì)的身影出現(xiàn)在每一個(gè)身上。

擬物化設(shè)計(jì)

擬物化設(shè)計(jì)， 在這個(gè)背景下，設(shè)計(jì)是為了模擬真實(shí)的物理世界。通常，這需要設(shè)計(jì)的在線應(yīng)用的形式看起來(lái)像他們的真實(shí)世界的變體，比如像電子合成器軟件，做的像鍵盤(pán)。這種界面的設(shè)計(jì)方式，在大部分的時(shí)間里占據(jù)了主導(dǎo)的地位。

問(wèn)題是，這不是基于數(shù)字設(shè)備可用性設(shè)計(jì)的，或者所有的旋鈕和按鈕可以用鼠標(biāo)或觸屏操作，它看著只是模仿真實(shí)事物的外觀。

實(shí)際上，設(shè)計(jì)圈得到的結(jié)論是，需要其他東西，這將去掉所有的復(fù)古的裝飾元素，然后給他們留下的東西是，可用性放在第一位。所以他們從界面設(shè)計(jì)移除所有痕跡的擬物化設(shè)計(jì)，創(chuàng)建了扁平化設(shè)計(jì)。

扁平化設(shè)計(jì)

扁平化設(shè)計(jì)，在許多方面，基于最基本的元素進(jìn)行設(shè)計(jì)。它選擇刪除任何樣式，那些令人捧腹的三維表現(xiàn)方式，像投影，漸變與紋理。它只關(guān)注與圖標(biāo)之間的聯(lián)系，字體和顏色。

這是第一個(gè)在數(shù)字媒體設(shè)計(jì)上連貫的風(fēng)格，一個(gè)利用互聯(lián)網(wǎng)的獨(dú)特的屬性和用戶的需求，快速發(fā)現(xiàn)的簡(jiǎn)單按鈕，直接配色方案為了快速識(shí)別的元素，和簡(jiǎn)潔的圖標(biāo)。

外觀在扁平化設(shè)計(jì)里面是次要的：重點(diǎn)是原始的功能。簡(jiǎn)單的圖標(biāo)隱喻甚至可以省略一些網(wǎng)站的內(nèi)容， 引導(dǎo)用戶進(jìn)行操作，僅僅基于它的顏色和圖片。此外，它加速加載時(shí)間和高或低分辨率屏幕上看起來(lái)顯示一樣好，提供更加可靠的用戶體驗(yàn)。正因?yàn)槿绱耍瑢?duì)設(shè)計(jì)者和用戶來(lái)說(shuō)它會(huì)讓事情更容易。

贊成的意見(jiàn)

• 它擁抱了屏幕的限制基于這些去工作，而不是嘗試去做別的事情。
• 流線型的設(shè)計(jì)，擺脫不必要的圖形和動(dòng)畫(huà)元素，減少加載時(shí)間。
• 沒(méi)有擬物化元素，你的讀者能很快速度發(fā)現(xiàn)內(nèi)容。
• 刪除所有不必要的設(shè)計(jì)選擇，使網(wǎng)站設(shè)計(jì)速度更多
• 扁平化設(shè)計(jì)的簡(jiǎn)化網(wǎng)站不斷地適應(yīng)瀏覽器，可以非常容易做出響應(yīng)。

反對(duì)的觀點(diǎn)

• 扁平化設(shè)計(jì)可能限制、約束你去使用簡(jiǎn)單的顏色，形狀和圖標(biāo)。
• 如果走得太遠(yuǎn)，很容易不小心創(chuàng)建一個(gè)毫無(wú)特色的和看起來(lái)一般的網(wǎng)站
• 一些網(wǎng)站，或應(yīng)用程序，需要復(fù)雜的視覺(jué)線索來(lái)指導(dǎo)用戶來(lái)進(jìn)行如何使用，這是扁平設(shè)計(jì)的一個(gè)主要的失敗點(diǎn)。一個(gè)常見(jiàn)的抱怨是，靜態(tài)的矢量圖形，它缺乏陰影，邊緣很難分辨是否可點(diǎn)擊按鈕
• 它的普遍性很難創(chuàng)建一個(gè)看起來(lái)很獨(dú)特的網(wǎng)站或應(yīng)用程序。
• 有一點(diǎn)需要注意，這是一個(gè)2010年代中期獨(dú)特的審美，你的網(wǎng)站很快會(huì)過(guò)時(shí)，如何你不計(jì)劃去重新設(shè)計(jì)你的網(wǎng)站，時(shí)間相對(duì)會(huì)很快。

Material Design

扁平化設(shè)計(jì)的評(píng)論家，認(rèn)為這走的太遠(yuǎn)了，消除所有的擬物化比較激進(jìn)，即使是有用的。進(jìn)入，借用Material Design層的概念，使用陰影，將數(shù)不清的圖像進(jìn)行編輯和分離；斜面和動(dòng)畫(huà)，它利用自然交互關(guān)聯(lián)深度與重要性。

Material Design，是由谷歌開(kāi)發(fā)的一套設(shè)計(jì)標(biāo)準(zhǔn)，在這個(gè)文檔中，它有無(wú)數(shù)獨(dú)特而有趣的特性，但也許是最明顯的是它提出了平面像素的Z軸概念。事實(shí)上，它在扁平化設(shè)計(jì)上面增加了一些擬物化，創(chuàng)造 了一種一群二維平面飛機(jī)浮動(dòng)在對(duì)方指定的海拔印象。

想象一張紙，能夠隨意隨意擴(kuò)展收縮，重塑自身，融合和分離。現(xiàn)在把它們一個(gè)個(gè)疊放起來(lái)（他們也可以漂浮空中），然后在每張上面畫(huà)一個(gè)網(wǎng)站要素。簡(jiǎn)而言之，這就是Material Design的概念。

然而Material Design并不是完美的設(shè)計(jì)文檔的特征。它也并非一成不變的鐵桿定律。試著更多的把它想成問(wèn)我未來(lái)設(shè)計(jì)的物理框架和模板。它的設(shè)計(jì)具有普遍適應(yīng)性，就像安卓穿戴手表一樣，能響應(yīng)屏幕的各種尺寸，甚至是不同形狀。Material Design的應(yīng)用在其他app開(kāi)發(fā)商中也在推廣。

Material Design是安卓應(yīng)用設(shè)計(jì)的標(biāo)準(zhǔn)，因?yàn)樗粦?yīng)用到提及的穿戴設(shè)備上。它是否應(yīng)該用到IOS上是引起不斷爭(zhēng)論的源頭。有人爭(zhēng)論說(shuō)保持谷歌外形很有必要。其他人則認(rèn)為它和剩下的操作系統(tǒng)相互沖突。孰對(duì)孰錯(cuò)，全看你自己的決定。

贊成的意見(jiàn)

• 三維安排讓程序更易于互動(dòng)：比如陰影被安排用來(lái)顯示分層。
• 和扁平化設(shè)計(jì)不同，Material Design都有詳盡明確的一套參考，沒(méi)有什么需要你去猜測(cè)。
• 如果你想開(kāi)發(fā)一個(gè)多平臺(tái)的東西，比如一個(gè)網(wǎng)站和一個(gè)安卓應(yīng)用，Material Design對(duì)所有設(shè)備都提供統(tǒng)一的體驗(yàn)。這樣的話就會(huì)增加用戶使用方便性，進(jìn)而巧妙地促進(jìn)你的品牌化。
• 如果你對(duì)動(dòng)畫(huà)感興趣，Material Design是個(gè)不錯(cuò)的方法因?yàn)樗詭Я嗽S多這一類型的動(dòng)畫(huà)。沒(méi)有它們你就只能動(dòng)手畫(huà)了。

反對(duì)的觀點(diǎn)

• 不管喜歡與否，Material Design不可避免的和谷歌關(guān)聯(lián)。如果你想使自己遠(yuǎn)離這點(diǎn)，為你的網(wǎng)站或應(yīng)用創(chuàng)造一個(gè)獨(dú)特的特性，使用谷歌指引來(lái)實(shí)現(xiàn)要困難的多。
• 不是所有的系統(tǒng)都能實(shí)現(xiàn)預(yù)期幀頻。而且你很難知道該怎么做才能提高那些不可實(shí)現(xiàn)者的可用性。
• 動(dòng)畫(huà)會(huì)耗盡手機(jī)用戶的電池。
• 強(qiáng)制開(kāi)發(fā)者們遵守設(shè)計(jì)指南可能會(huì)進(jìn)一步扼殺個(gè)體創(chuàng)造力，阻礙更多動(dòng)畫(huà)和裝飾特點(diǎn)的發(fā)展。

總結(jié)

Material Design和扁平化設(shè)計(jì)真的沒(méi)有那么大的天壤之別：兩個(gè)都用同樣干凈和最低的美感。當(dāng)扁平化界面被分割，你基本能從中想到質(zhì)感界面。盡管Material Design動(dòng)畫(huà)廣泛收到表?yè)P(yáng)，但是總結(jié)起來(lái)也不過(guò)是更加用戶友好化。事實(shí)上，沒(méi)有人說(shuō)你不能把二者的美感相結(jié)合，用Material Design激活一成不變的扁平化網(wǎng)站。

在我看來(lái)，扁平化網(wǎng)站很實(shí)用。比起滿是動(dòng)畫(huà)和復(fù)雜圖片的網(wǎng)站，它們的下載速度更快。如果你要設(shè)計(jì)一個(gè)極為簡(jiǎn)單的網(wǎng)站，針對(duì)使用不同設(shè)備，技術(shù)經(jīng)驗(yàn)水平不等的各種用戶，或者只是重視用戶體驗(yàn)多于形式，扁平化設(shè)計(jì)正適合你。如果你對(duì)在網(wǎng)站上放各種動(dòng)畫(huà)或動(dòng)態(tài)圖片無(wú)感，主要對(duì)原始的簡(jiǎn)單化和可用性有興趣，毫無(wú)疑問(wèn)我會(huì)推薦你選擇扁平化設(shè)計(jì)。但是如果你想創(chuàng)建一個(gè)有動(dòng)畫(huà)的更加花哨的網(wǎng)站，當(dāng)然要選擇Material Design。

【換個(gè)角度看設(shè)計(jì)系列好文】

設(shè)計(jì)師接單的藝術(shù)：
《由接單說(shuō)開(kāi)來(lái)！設(shè)計(jì)師該如何讓自己看起來(lái)比較專業(yè)？》

如何讓設(shè)計(jì)作品變專業(yè)的技巧：
《秒變專業(yè)范兒！如何避免設(shè)計(jì)中有廉價(jià)的感覺(jué)》

拒人千里不如提高實(shí)力：
《職場(chǎng)好經(jīng)驗(yàn)！如何應(yīng)對(duì)客戶想看效果圖的要求》

原文地址：designmodo
譯文地址：960px

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量93萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：