初識Material Design設計規范（精簡版）

Sponsor

Material Design是移動端開發主流中除iOS外的第二套設計規范，這套優秀的設計語言雖然是應用在Android上，但其要義被許多設計師借鑒，并用在自己的設計中。官方的文檔是最佳的了解方式，但是設計達人建議大家閱讀這篇文章，對Material Design有一個基礎認識，再去閱讀官方文檔。事實上，閱讀同一主題的不同材料可以幫助我們加深對主題的理解。

一、前言，了解Android之父 – 安迪 ? 魯賓

Android和iOS這兩個系統是目前在市場上受眾最廣知名度最高的手機操作系統，盡管蘋果是一家市值破萬億美元的科技巨頭，但根據數據顯示安卓手機在全球市場占比達85%。

提到Android,我們不得不去聊一聊Android之父艾迪?魯賓，我想大部分人都知道蘋果之父喬布斯，但很少有人知道Android之父安迪?魯賓，業內很多人認為安迪?魯賓和喬布斯應該是平起平坐的，因為他是Android的創始人，所以我認為我們應該了解一下他的故事！

安迪?魯賓的奮斗史

1、 1989年進入蘋果公司，成為一名開發者，當時安迪?魯賓還很年輕，當時蘋果公司也是基本以技術為主，主要是產品設計師（products design）為核心。

2、 1990年開發出智能手機操作系統Magic Capo產品太超前，風口沒到，魯賓最終失業了。

3、 1999年魯賓和幾個合伙人共同成立Danger，并開發出北美第一款廣受關注的智能手機：T-Mobile Sidekicko。2008年被微軟收購。

4、 2003年魯賓出走Danger成立安卓，打算研發一款對所有軟件開發者開放的移動平臺。2005年，谷歌以5000萬美元的價格收購安卓，他擔任Google移動平臺副總裁，2008年10月，安卓才正式發布。

5、 2015年再次創業，成立智能硬件企業Essential，并在2017年，推出首款產品Essential Phone，這款手機曾讓羅永浩對盛贊不已。

巨人都有著此起彼伏的人生，其實也有人說，魯賓跳槽后是根據iOS創建的安卓，但不管事情到底如何，喬布斯和安迪?魯賓都算移動互聯網時代代表性的人物。

小知識：安卓系統發布是08年10月，而iOS系統發布是07年1月發布，比安卓早一年多。

二、Android的由來

關于Android這個名字有一個很有趣的故事，據說當時安迪?魯賓在微軟工作時，研究了一個機器人，有輪子可以遙控有個照相機可以拍攝公司場景，不幸的是后來機器人被黑客黑掉了，被微軟安全部門發現后，機器人就被干掉了！由此可見安迪?魯賓對機器人的喜好程度，他把他的最大愛好寄托給了他所親自打造的系統，所以才有了后來的Androido包括安卓4.0之前的字體Droid和4.0之后的字體RobotO翻譯過來都是機器人的意思。

設計轉折 Android5.0 Lollipop

2014年10月15日，谷歌發布全新Android操作系統，就是Android5.0 Lollipop。

為什么要說Androld5.0是設計轉折，因為5.0系統發布之后在設計上有一個非常重大的改變，通過對比圖可以看出，5.0之前的設計語言是擬物化，5.0之后開始往扁平化設計，這一趨勢借鑒的是蘋果在2013年發布的iOS7所使用的扁平化設計趨勢。

重要的是在2014年的Google I/O上推出了Material Design, MD設計語言并不是簡單的扁平設計，而是一種注重卡片式設計、紙張的模擬、使用了強烈對比色彩的設計風格。目標是創建一種優秀的設計原則和科學技術融合的可能性（Create）、并給不同平臺帶來一致性的體驗（Unify）、并且可以在規范的基礎上突出設計者自己的品牌性（Customize）,這種風格形成了獨一無二的Material Designo

三、Material Design介紹

Material Design是谷歌14年推出的一種全新的設計語言，其風格主要是扁平化設計，但并不單單是扁平設計，而是一種注重卡片式設計、紙張的模擬、動效比較突出、使用了強烈對比色彩的設計風格。谷歌將這種設計語言充分運用到旗下的電腦、穿戴設備、電視等可以使用Material Design作為視覺體現的設備上，甚至Google鼓勵開發者在iOS平臺也使用Material Design。這套系統也被業內人士稱為足以媲美iOS系統的設計語言。

Material Design

01. Material Design核心思想

把物理世界的體驗帶進屏幕，去掉現實中的雜質和隨機性，保留其最原始最純浄的形態、空間關系、変

化與過渡，配合虛擬世界的靈活特性，還原最貼近真實的體驗，達到簡潔與直觀的效果。

核心思想單純的一句話也許會不太理解，在這里舉個很簡單的例子，比如MD里面卡片化設計中的卡片，最開始的概念就叫魔法紙片，如何把現實中的一張紙片帶進虛擬屏幕里面呢，首先去掉這張紙的雜質，比如這張紙可能會褶皺，可能會損壞，可能會被揉成一團，我們把這些雜質和隨機性全都去掉，做一個最原始的、最純凈的、絕對對稱的、一個白色卡片，作為一個信息的載體，把物理世界所謂的物體的陰影，空間的關系、重力、慣性、運動的時候所產生的變化與過渡都搭配起來，通過虛擬世界的靈活性和信息的反饋交互還原最貼近真實的一種交互體驗，比如按鈕點擊之后的波紋效果，卡片列表滑動后的動態跟隨性等，通過這些讓整個設計達到既簡潔又直觀，交互又豐富的一種視覺效果。

三大原則

四、MD設計語言 —— 材質

Material Design中，最最最重要的信息載體就是魔法紙片。紙片層疊、合并、分離，擁有現實中的厚度、慣性和反饋，同時擁有液體的一些特性，能夠自由伸展變形。

五、MD設計語言 —— 空間

Material Design引入了三維中z軸的概念，那什么是三維，三維就是X軸（左右）、丫軸（上下）、Z軸（前后）組成的立體世界，而二維就是只有X和Y軸的平面世界。人類能體驗到的是四維，除了三維還有一個時間的維度?；氐組aterial Design中，手機界面其實是一個平面二維的空間，而Material Design 通過二維的一些表達手段，比如投影、動效等構建出了Z軸（前后）的概念。比如z軸垂直于屏幕，用來表現元素的層疊關系，z值（海拔高度）越高，元素離界面底層（水平面）越遠，投影就會越重（前提是所有元素的厚度都是1dp）。

Z軸與投影

界面中不同的板塊功能使用不同的Z軸高度可以明確他們的重要性和邏輯層級關系。Material Design為第三方開發者提供了動態且真實的投影和Z軸高度設置。

不同投影大小區別

正面、側面解析1dp和6dp海拔高度產生出陰影大小的不同

界面中各個組件的海拔高度對照

小知識：界面中不同Z軸高度板塊的投影是由編程完成的，并非切圖時切出投影，這點尤其重要。

六、MD設計語言 —— 動畫效果

Material Design是活的，它和我們生活的世界一樣，這個世界是響應的，自然的，可察覺的，有內涵的，MD是一組有力的動畫設計語言，當你有一個動作，反饋立即發生，絕不需要等待，動作不再以元素移動的距離為計算基準，而是聚焦于元素移動時的速度和所需要的時間，元素的動作應該有真實的感覺，就好像在真實世界發生的一樣，所有東西都不該立刻啟動或立刻停下，在運動中的元素有動量和時間來控制加速和減速，元素要受到阻力的作用，移動時要按照曲線移動而非直線。

材質還要能夠感知周圍的世界，某個元素進入屏幕的方式也要對其他元素的運動有所影響，一個元素可以推開其他元素，或者追蹤它們，總之，材質運動不是隨機的，所有動效背后都有其發生的原因，在動效的引導下，你將聚焦于重點的東西，而且也不會在界面跳轉中迷失位置，點擊時，元素的反饋也是真實的，甚至在它被追蹤前。

無論你的按鈕設計成很有趣的，或者設計成嚴肅認真的，運用MD設計，能夠幫你制造出簡單、清晰、快捷、流暢的體驗。

動畫效果原則一

Material Design重視動畫效過。

它反復強調一點：動畫不只是裝飾，它有含義，能表達元素、界面之間的關系，具備功能上的作用。

easing

在現實的世界中，物體可以被重量、表面摩擦力影響很快的加速或減速。同樣的，材料設計的動效，不會發生突然停止，或者突然啟動，不然會顯得非常的生硬或者不真實，動效都是會有一個加速度或者減速度（紅色沒緩動，藍色有緩動）。

動畫效果原則二

動畫要貼近真實世界，就要重視easing （重視動畫緩動）。

物理世界中的運動和變化都是有加速和減速過程的，忽然開始、忽然聽追的勻速動畫顯得機械而不真 實，考慮動畫的easing,要先考慮它在現實世界中的運動規律（例如重力，它會使一個元素沿曲線運動 而非直線運動）。

現實當中的弧線運動軌跡運用到材料設計中

現實當中的弧線運動軌跡運用到材料設計中

常見的三種曲線

動畫時長

在移動設備上的長動畫大約是300-500ms，短動畫大概是150-200ms。過長的動畫讓人感覺遲鈍，過短的動畫讓人覺得難以看明白。

動畫效果原則三

所有可點擊的元素,都應該有反饋效果。通過動畫，將點擊的位置與所操作的元素關聯起來，體現了Material design動畫的功能性。

七、MD設計語言 —— 表意動效

one

通過過渡動畫，表達界面之間的空間與層級關系，并且跨界面傳遞信息（見下圖一）。

two

從父界面進入子界面，需要抬升子元素的海拔高度，并展開至整個屏幕，反之亦然（見下圖二）。

three

多個相似元素，動畫的設計要有先后次序，起到引導視線的作用（見下圖三）。

four

相似元素的運動，要符合統一的規律（見下圖四）。

five

通過圖標的變化和一些細節來達到令人愉悅的效果。

常用的8個動效事件

八、MD設計規范——色彩

Material Design設計中，顏色不宜過多。選取一種主色、一種輔助色(非必需)，在此基礎上進行明 度、飽和度變化，構成配色方案。

小知識：

上圖中出現的如100、500、700、A100、A200這幾個其實是安卓開發語言，比如我們調透明度為百分比，但在安卓開發需要另一種換算形式，需要用到ARGB種色彩模式，也就是RGB色彩模式附加上Alpha(透明度)通道，常見于32位位圖的存儲結構。

安卓顏色ARGB依次代表透明度(alpha)、紅色(red)、綠色(green)、藍色(blue)

比如透明度(alpha)分為256階(0-255)透明就是0階，不透明就是256階，如果我們給到開發一個50%透明度樣式，開發就會寫成A128階(256乘以50%)。

實際內容以安卓為準，我只不過在網上看到并寫下的個人理解。

Appar背景使用主色，狀態欄背景使用深一級的主色或20%透明度的純黑。

小面積需要高亮現實的地方使用輔助色強調。

其他顏色通過純黑#000000與純白#ffffff的透明度變化來展現(包括圖標和分割線)，而且透明度限定了幾個值。

至于為什么用87%還是70%,其實是MD開源規范文檔里定的，并不是不能打破，這只是官方給的一個建議，給我們一個數據作為參考。

九、MD設計規范——圖標

Material Design設計中，桌面圖標尺寸是48dp x 48dp,桌面圖標建議模仿現實中折紙效果，通過扁平 色彩表現空間和光彩。注意避免以下問題：

• 不要給彩色元素加投影
• 層疊不要超過兩層
• 折角不要放在左上角
• 帶投影的元素要完整展現，不能被圖標邊緣裁剪
• 如果有折痕，放在圖片中央，并且最多只有一條
• 帶折疊效果的圖標，表面不要有圖案
• 不能透視、彎曲

小知識：dp單位等于ios里面pt單位，都是開發單位。

Material Design設計中，小圖標尺寸為24dp x 24dp,圖形限制在中央20dp x20dp區域內，小圖標同樣有刪格系統，線條、空隙盡量保持2dp寬，圓角半徑2dp。特殊情況相應調整。

優先使用material design默認圖標。設計小圖標時，使用最簡練的圖形來表達，圖形不要帶空間感。

小圖標的顏色使用純黑與純白，通過透明度調整

規范很無聊，來欣賞幾個動畫吧

十、MD設計規范——圖片

描述具體事物，優先使用照片。然后可以考慮使用插畫。

Material Design設計中其實比較喜歡用真實的照片，比如早期安卓手機接電話，界面會把這個人的頭像放大到半個屏幕甚至整個，MD鼓勵用戶上傳真實的照片作為聯系人頭像，所以在做MD設計時，在圖片上用比較真實的照片可能會更貼切MD設計語言。

Material Design設計中，圖片上的文字，需要淡淡的遮罩確保其可讀性。深色的遮罩透明度在20%?40%之間，淺色的遮罩透明度在40%?60%之間。

Android L可以自動從圖片中提取主色，運用在其他UI元素上。

這是Android5.0 Lollipop之后系統支持的一個功能，比如下面音樂播放界面，系統會自動提取專輯封面顏色并運用在UI元素上。

十一、MD設計規范——文字

英文字體使用Roboto,中文字體使用Noto。

Roboto有6種字重：Thin、Light、Regular、Medium、Bold 和 Black。

Noto有7種字重:Thin, Light、DemiLight、Regular、Mediums Bold 和 Black。

小知識：Noto有個中文名字叫思源黑體，并且是一個開源免費的字體，所以小伙伴以后就不要再用微軟雅黑啦。

常用字號:

12sp小字提示

14sp （桌面端13sp）正文/按鈕文字

16sp （桌面端15sp）小標題

20sp Appbar文字

24sp大標題

34sp/45sp/56sp/112sp 超大號文字

長篇幅正文，每行建議60字符（英文）左右。短文本，建議每行30字符（英文）左右。

這里只是一個字號建議，我們可以根據實際設計需求更改。

十二、MD設計規范——布局

所有可操作元素最小點擊區域尺寸：48dp X 48dpo

柵格系統的最小單位是8dp，一切距離、尺寸都應該是8dp的整數倍。以下是一些常見的尺寸與距離:

另外注意56dp這個數字，許多尺寸可變的控件，比如對話框、菜單等，寬度都可以按56的整數倍來設計。還有非常多規范，不詳細列舉，遵循8dp柵格很容易找到適合的尺寸與距離。平板與PC上留白更多，距離與尺寸要相應增大。

十三、MD設計規范——組建

底部動作條

通常以列表形式出現，支持上下滾動。當你點一一個按鈕，他會從底部展開一個列表，這個列表并不會 占據整個屏幕，通常會占據屏幕一半或者五分之三這樣一個大小，并且支持上下滾動。

按鈕

按鈕分為懸浮按鈕、凸起按鈕、扁平按鈕。

按鈕重要性如下遞增：最重要且隨處用到的操作，建議使用懸浮按鈕。信息較多時，選用凸起按鈕可以

有效突出重要操作，但注意紙片不要疊太多層。扁平按鈕適合用在簡單的界面，例如對話框中。

使用懸浮按鈕要遵循以下規則：

1. 建議只用一個懸浮按鈕；

2. 懸浮按鈕可以貼在紙片邊緣或者接縫處，但不要貼在對話框、側邊抽屜和菜單的邊緣；

3. 懸浮按鈕不能被其他元素蓋住，也不能擋住其他按鈕；

4. 列表滾動至底部時，懸浮按鈕應該隱藏，防止它擋住列表項；

5. 懸浮按鈕的位置不能隨意擺放，可以貼著左右兩邊的對齊基線。

懸浮按鈕有兩種尺寸：56dp x 56dp/40dp x 40dpo懸浮按鈕通常觸發正向的操作，添加、創建、收藏

之類。不能觸發負面、破壞性或不重要的操作，也不應該有數字角標。下圖就是懸浮按鈕的錯誤使用：

卡片

即使在同一個列表中，卡片的內容和布局方式也可以不一樣。且卡片統一帶有2dp的圓角。

卡片最多有兩塊操作區域。輔助操作區至多包含兩個操作項，更多操作需要使用下拉菜單。其余部分都是主操作區。在以下情況考慮使用卡片：

• 同時展現多種不同內容
• 卡片內容之間不需要進行比較
• 包含了長度不確定的內容，比如評論
• 包含豐富的內容與操作項，比如贊、滾動條、評論
• 本該是列表，但文字超過3行
• 本該是網格，但需要展現更多文字

分割線

列表中有頭像、圖片等元素時，使用內嵌分隔線，左端與文字對齊。沒有頭像、圖標等元素時，需要用通欄分隔線。圖片本身就起到劃定區域的作用，相冊列表不需要分隔線。

日常設計中有時候需要謹慎使用分隔線，留白和小標題也能起到分隔作用。能用留白的地方，優先使用留白。分隔線的層級高于留白，而通欄分隔線的層級高于內嵌分隔線。

列表

列表由行構成，行內包含瓦片。如果列表項內容文字超過3行，建議改用卡片。

列表包含主操作區與副操作區。副操作區位于列表右側，其余都是主操作區。在同一個列表中，主、副操作區的內容與位置要保持一致。

在同一個列表中，滑動手勢操作保持一致。

主操作區與副操作區的圖標或圖形元素是列表控制項，列表的控制項可以是勾選框、開關、拖動排序、展開/收起等操作，也可以包含快捷鍵提示、二級菜單等提示信息。

開關

必須所有選項保持可見時，才用Radio button（單選按鈕）不然可以使用下拉菜單節省空間。而同一個列表中有多項開關，建議使用Checkbox（多選按鈕）。單個開關建議使用Switch（切換按鈕）。

動作條

tab只用來展現不同類型的內容，不能當導航菜單使用。tab至少2項，至多6項。而超出6項，tab需要變為滾動式，左右翻頁。

tab文字要顯示完整，字號保持一致，不能折行，文字與圖標不能混用。

tab選中項的下劃線高度是2dp。

抽屜導航

側邊抽屜導航從左側滑出，占據整個屏幕高度，遵循普通列表的布局規則。手機端的側邊抽屜距離屏幕右側56dp。

列表較短不需要滾動時，設置和幫助反饋跟隨在列表后面。

十四、最后

整理只為鞏固規范思維，不作為任何用途，本文部分內容引用md設計規范文檔，部分內容為個人理解。

作者：付信龍，個人主頁：https://www.zcool.com.cn/u/15771243

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。