什么是 Material Design：這是谷歌提出的一套集合視覺、交互和前端的界面設(shè)計(jì)規(guī)范，其目標(biāo)有兩點(diǎn)，一是用視覺形式囊括經(jīng)典的設(shè)計(jì)原則，并將將前沿創(chuàng)新和技術(shù)可能展現(xiàn)出來，二是以移動端為基礎(chǔ)，將所有尺寸、類型的設(shè)備統(tǒng)一起來。

在觸屏為主的時(shí)代，懸停狀態(tài)要慢慢淡出舞臺

不論是下拉框、按鈕、隱藏菜單……， Material Design 要么完全摒棄了鼠標(biāo)懸停狀態(tài)，要么就只把懸停狀態(tài)看作一個(gè)無關(guān)緊要的視覺反饋。我雖然對懸停效果有些不舍，但也不得不承認(rèn)，未來是點(diǎn)擊和手勢的時(shí)代，懸停已經(jīng)在慢慢淡出舞臺的路上了。

永遠(yuǎn)不要以為用戶的設(shè)備尺寸是你可以預(yù)期的

尤其是那些用大屏的設(shè)計(jì)師們，不要有僥幸的心理認(rèn)為在你的屏幕能完整顯示的一頁，在用戶的設(shè)備上同樣不需要滾頁。在設(shè)備越來越多樣化的未來，滾動條將不是一種選項(xiàng)，而是一種自適應(yīng)。所以，永遠(yuǎn)要讓頁底的控制按鈕浮起來，以適應(yīng)過矮的屏幕。

陰影的目的不是美觀而是縱深

谷歌向來強(qiáng)調(diào)層級概念，這也是它與蘋果相差較明顯的一點(diǎn)。 Material Design 認(rèn)為，界面不只是平面的，元素之間也可以有縱向的高度差，那么體現(xiàn)這個(gè)高度差的方法，就是陰影。 Material Design 的縱向尺寸和平面尺寸都用同一單位（dp），并統(tǒng)一了不同縱向高度所對于的陰影樣式。于是，便創(chuàng)造出了一個(gè)層級為堆砌起來的三維世界。

為了易用而確定尺寸

界面布局和元素的尺寸究竟是該交互來定還是視覺來定，這是一個(gè)爭議性話題。我個(gè)人認(rèn)為，尺寸還是應(yīng)該先從交互開始，視覺設(shè)計(jì)如果從美觀上考慮有別的想法，可在此基礎(chǔ)上進(jìn)行討論修改。因?yàn)榻缑娴拇嬖谝饬x不是為了好看，而是為了使用。元素過小、過大、尺寸不統(tǒng)一都會影響到使用，所以這些東西都是交互必須要考慮的。 Material Design 給出了一個(gè)32dp（0.508mm）的尺寸限制，規(guī)定最小尺寸的按鈕和標(biāo)簽都有這么高，以保證觸屏的使用舒適度。

隱藏與否取決于必要性，而非空間是否足夠

我承認(rèn)并且反省，直到昨天，我的做法都是將所有可能用到的東西都擺在界面上，發(fā)現(xiàn)看起來過多或放不下時(shí)，才將部分通過“更多”圖標(biāo)等方式隱藏起來。這樣做來其實(shí)有很多問題，如果用戶的屏幕足夠大，那么是不是什么東西都不用隱藏了？當(dāng)然不是這樣，無論界面空間多充足，人的注意力都是有限的。所以 Material Design 主張只將必要的元素（也許只是一兩個(gè)）展示出來，其余的全部隱藏。

慎用色彩

不知道這是不是又算不小心踏入視覺設(shè)計(jì)的領(lǐng)地了，色彩確實(shí)又是另一個(gè)需要視覺設(shè)計(jì)和交互設(shè)計(jì)共同探討的話題。很多時(shí)候，增加一個(gè)色彩或者不增加，對美觀并沒有什么很大的影響，如果是這樣，那么最好不要增加。世界頂尖的設(shè)計(jì)公司對色彩都是相當(dāng)吝嗇的，因?yàn)榻缑娲嬖诘囊饬x是使用，而為色彩越多，對用戶的干擾越大（可拓展性和品牌識別性也越低）。

讓真正重要且唯一的東西打破既定框架

交互設(shè)計(jì)如果做的隨意了，結(jié)果會很糟糕；但是如果做得嚴(yán)謹(jǐn)了，有時(shí)候會變得很無聊。我們是可以找到一個(gè)突破點(diǎn)，做一些不一樣、打破格局的東西的，但是這個(gè)東西必須是真正重要且唯一的東西。這個(gè)很好理解，如果只有一個(gè)東西不一樣，那么畫面會很有趣，但是如果所有東西都不一樣，就會很混亂了。Material Design 的圓形懸浮按鈕就是一個(gè)真正重要且唯一的東西。

彈出框沒必要多復(fù)雜

我從沒仔細(xì)看過彈出框的標(biāo)題是什么，雖然我知道大部分彈出框都有標(biāo)題。很多人如果發(fā)現(xiàn)彈出框沒有右上角的“×”會抱怨，但實(shí)際上他們根本不需要那個(gè)“×”，誰都知道在方框之外點(diǎn)一下彈出框就消失了。 Material Design 對彈出框的運(yùn)用很靈活，如下圖這種情況，彈出框的用處只是增加一段評論而已，那么干脆將標(biāo)題、確定按鈕和取消按鈕都去掉，這樣使用起來反而更加順暢了。

不是視線追蹤元素，而是元素追蹤視線

做設(shè)計(jì)時(shí)應(yīng)該認(rèn)真考慮甚至計(jì)算用戶的操作步數(shù)和移動距離。光是這些也許還不夠，最好是連視線移動都能夠盡量避免，因?yàn)槎尉劢挂彩切枰獣r(shí)間的。上面那張圖中，彈出框上的文本區(qū)域與彈出框下的評論區(qū)域是重合的，這樣設(shè)計(jì)就避免了用戶多次移動視線。 Material Design 把視線追蹤也運(yùn)用到了下拉框上，點(diǎn)擊下拉框區(qū)域后，選項(xiàng)框完全覆蓋之前的下拉框區(qū)域，并且按順序排列的選項(xiàng)會自動滾動，讓默認(rèn)選項(xiàng)的位置剛好在之前的下拉框區(qū)域之上。

慎用卡片

自從iPhone把圓角陰影炒火了之后，在很多地方都出現(xiàn)了濫用情況，這幾年“卡片式”盛行，隱有愈演愈烈之勢。 Material Design 主張將卡片做成明顯的圓角，結(jié)合縱深感較強(qiáng)的陰影，這樣就能夠跟其它區(qū)域區(qū)分開來。但是在信息密集的地方又不提倡使用卡片，因?yàn)榭ㄆ倪吙驎ψ⒁饬υ斐筛蓴_。

讓信息碎片化

我們看任何東西，都很少會老老實(shí)實(shí)地完整閱讀。在紙上看書的時(shí)候，我們往往通過不斷地掃視、翻頁來尋找自己剛興趣的內(nèi)容詳讀。在瀏覽網(wǎng)頁時(shí)，我們也希望能夠一眼在界面上掃到自己感興趣的內(nèi)容，然后再深入研究。所以，設(shè)計(jì)師通常只需要拋出一些“引子”，用戶如果感興趣，就可以順著這個(gè)引子尋找到他們想要的東西。所有信息展示應(yīng)該碎片化，注重豐富而不是完整。