Material Design是Google在2014年發(fā)布的Android設(shè)計(jì)規(guī)范,并且仍在不斷更新完善。Google希望能創(chuàng)建出一套創(chuàng)新的設(shè)計(jì)語(yǔ)言，構(gòu)建跨平臺(tái)和超越設(shè)備尺寸的統(tǒng)一體驗(yàn)。
如今Material Design 已經(jīng)推出快兩年了，但國(guó)內(nèi)市場(chǎng)上卻很少有app完完全全遵循Material Design，就連微信的安卓客戶(hù)端也是直接挪用iOS設(shè)計(jì)。關(guān)于Material Design的是是非非，最近看了很多資料，結(jié)合自己的體驗(yàn)，總結(jié)一下。
一、FAB-- 好 VS 壞？
FAB(Floating Action Button)無(wú)疑是很多人首先要討論的熱點(diǎn)。我記得去年實(shí)習(xí)的時(shí)候，正值Material Design之風(fēng)盛行。很多app的主界面上都出現(xiàn)了一個(gè)非常惹眼的圓溜溜的按鈕。因?yàn)槠滹@眼的顏色和位置，F(xiàn)AB非常顯眼。當(dāng)時(shí)我認(rèn)為，在一些UGC導(dǎo)向的產(chǎn)品上，F(xiàn)AB可以誘導(dǎo)用戶(hù)主動(dòng)去編輯、發(fā)送，豐富整個(gè)產(chǎn)品的內(nèi)容。但細(xì)細(xì)研究，發(fā)現(xiàn)FAB并不總是那么一回事。比如說(shuō)，當(dāng)用戶(hù)不發(fā)送內(nèi)容而是瀏覽內(nèi)容的時(shí)候，F(xiàn)AB會(huì)擋住用戶(hù)的視線，不利于營(yíng)造沉浸式的體驗(yàn)；有些app實(shí)際上并不需要FAB，因?yàn)橛脩?hù)場(chǎng)景中不存在一個(gè)使用率很高的按鈕，需要把它單獨(dú)拿出來(lái)。
Google也在文檔中規(guī)定了FAB的使用場(chǎng)景和禁忌：
(1)不是每個(gè)屏幕都需要浮動(dòng)操作按鈕。一個(gè)浮動(dòng)操作按鈕能夠代表這個(gè) App 中的主要操作；
(2)一個(gè)屏幕只推薦使用一個(gè)浮動(dòng)操作按鈕來(lái)增加其顯著性。它應(yīng)該只代表最常見(jiàn)的操作；
(3)避免用浮動(dòng)操作按鈕進(jìn)行下面這些輕微破壞性操作：
- 存檔或刪除
- 非特異性操作
- 警報(bào)或錯(cuò)誤
- 限制性任務(wù)如剪切文本
- 控制應(yīng)放在一個(gè)工具欄中，如音量控制或改變字體顏色
(4)避免用浮動(dòng)操作按鈕進(jìn)行下面這些輕微破壞性操作：
- 存檔或刪除
- 非特異性操作
- 警報(bào)或錯(cuò)誤
- 限制性任務(wù)如剪切文本
- 控制應(yīng)放在一個(gè)工具欄中，如音量控制或改變字體顏色
(5)對(duì)于帶有標(biāo)簽的屏幕，浮動(dòng)操作按鈕不應(yīng)朝著屏幕退出時(shí)的同一方向退出屏幕。否則會(huì)導(dǎo)致視覺(jué)噪音。這也將導(dǎo)致在屏幕上出現(xiàn)一個(gè)失靈的浮動(dòng)操作按鈕。此外，它錯(cuò)誤地暗示了浮動(dòng)操作(按鈕與內(nèi)容在相同的 Z 水平高度上，而不是在根水平高度中 UI 主元素所在的水平高度上；
(6)浮動(dòng)操作按鈕可在按下時(shí)或從滾動(dòng)工具欄轉(zhuǎn)換為工具欄。工具欄可以包含相關(guān)的操作、文本和搜索方面功能，或者任何手邊有用的部件。但注意工具欄不能包括不相干或混淆不清的操作。
在知乎也有關(guān)于FAB的討論>>>傳送門(mén)
關(guān)于FAB大家褒貶不一，總的來(lái)說(shuō)，F(xiàn)AB是UI上一個(gè)創(chuàng)新的點(diǎn)，是基于“Material”概念的一個(gè)特性，F(xiàn)AB好不好，取決于我們?cè)趺催\(yùn)用。至少，我打開(kāi)手機(jī)里的日歷時(shí)，F(xiàn)AB還是讓我方便很多。
二、材料設(shè)計(jì) VS 扁平化設(shè)計(jì)？
說(shuō)到Material Design，就不得不提起扁平化設(shè)計(jì)。
扁平化設(shè)計(jì)和Material Design一樣追求簡(jiǎn)潔體驗(yàn)，相對(duì)于擬物化設(shè)計(jì)，扁平化設(shè)計(jì)去除了陰影、材質(zhì)效果和漸變，只保留最基礎(chǔ)的色彩和形狀，使用戶(hù)注意力更集中。
扁平化設(shè)計(jì)是專(zhuān)門(mén)服務(wù)數(shù)字媒體領(lǐng)域的系列方式其中之一，這種方式利用互聯(lián)網(wǎng)獨(dú)特資源，考慮用戶(hù)需求，提升用戶(hù)效率，制造出用色明確，辨識(shí)度高，造型簡(jiǎn)單的圖標(biāo)或其他元素。
有時(shí)候我在想，扁平化設(shè)計(jì)是不是在這個(gè)浮躁喧囂快節(jié)奏的社會(huì)時(shí)代下的產(chǎn)物？快節(jié)奏意味著用戶(hù)沒(méi)有那么多時(shí)間去尋找目標(biāo)，也沒(méi)有那么多時(shí)間去品味UI細(xì)節(jié)；扁平化設(shè)計(jì)中活潑鮮艷的色彩以及簡(jiǎn)潔的造型讓忙碌的人們看著心情愉悅...（不小心離題了
另外，扁平化設(shè)計(jì)很少動(dòng)畫(huà)效果，從而能縮短網(wǎng)頁(yè)加載時(shí)間，減少用戶(hù)的等待，流暢體驗(yàn)度MAX。
而Material Design的材料設(shè)計(jì)則在扁平化的設(shè)計(jì)中引入了Z軸的概念，強(qiáng)調(diào)紙片的層次性，并且也引入了很多轉(zhuǎn)場(chǎng)動(dòng)畫(huà)，將物理世界中的交互帶到虛擬世界中。相對(duì)于扁平化設(shè)計(jì)，Material Design和用戶(hù)有更多的交互。當(dāng)然與此同時(shí)的代價(jià)是加載時(shí)間的延長(zhǎng)。
三、Material Design VS iOS？
最后談?wù)凪aterial Design 和 iOS。實(shí)際上無(wú)法比較這兩者孰優(yōu)孰劣，蘿卜青菜各有所愛(ài)。
與Material Design 相比，iOS并不強(qiáng)調(diào)元素的層次性，沒(méi)有那么多層次。iOS通過(guò)半透明玻璃來(lái)解決層疊問(wèn)題，在Material Design中則是通過(guò)Z軸來(lái)表現(xiàn)的。iOS更傾向于扁平化。
在配色方面，Material Design 推崇醒目、高飽和度的顏色，特別是對(duì)比度高的配色組合，就像熱帶非洲的美女，經(jīng)常運(yùn)用在FAB或者經(jīng)常操作的按鈕上；而iOS則旨在讓用戶(hù)看起來(lái)舒服溫馨，在顏色上并沒(méi)有明確的要求，但不使用補(bǔ)色的配色方案。
在交互動(dòng)畫(huà)上，Material Design運(yùn)用了包括很多，包括轉(zhuǎn)場(chǎng)動(dòng)畫(huà)、水波反饋等等，而iOS只運(yùn)用少量動(dòng)畫(huà)，旨在指導(dǎo)用戶(hù)完成操作達(dá)到目的。
淡化（Fade）、推擠（MoveIn）、揭開(kāi)（Push）、覆蓋（Reveal），結(jié)合進(jìn)出的方向（上下左右），就構(gòu)成了iOS最常用的過(guò)渡動(dòng)畫(huà)。
就個(gè)人而言，我還是比較喜歡iOS設(shè)計(jì)的：P
關(guān)于Material Design就先聊到這兒吧，只是稍微作了一些總結(jié)，小白經(jīng)驗(yàn)還是有限，以后有收獲就繼續(xù)補(bǔ)充，歡迎指正。
