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