編者按：自學筆記就該這么做！今天分享@東門王三?同學關于Material Design的自學成果，他的學習筆記嚴謹有序，觸類旁通，從Material Design到其他系統的設計規范都有所研究，還認真地做了思維導圖，同學們可以邊學習邊借鑒他的自學方法，一舉兩得呦。

自學的一大重點就是讀書，推薦同學們看一下華為設計總監的經驗：《華為設計總監尤原慶：怎樣讀設計書》

想讀好書的同學，可直接到：設計師圖書導航 挑選。

@東門王三 ：隨著Android系統從Android 4.4逐步升級到Android L。Material Design作為Android Design演進的最新標準規范，也推出其完整的設計規范。Holo Themes作為之前Android Design的官方推薦的示例主題已經被廣泛應用到各個應用的設計當中，盡管絕大部分應用沒有完全符合設計規范，但是可以看到這一年來這些應用都在向規范去努力。

從整體的概述來看Material Design，谷歌從開篇就表達期望打造一個全新的底層設計規范，繼而用這個規范去統一各平臺間、各種交互間的用戶體驗。

Material Design的設計主要基于三個原則：

Material is the metaphor

谷歌認為現實世界中的材質觸感是可以通過紙片的隱喻來表達，通過在設計上運用符合運動規律的動畫交互、通過光影打造設計層次的關系可以創造全新的虛擬交互空間，并且這個空間是符合現實規律的。這也就是文檔中提到的對于紙墨的研究。

Bold， graphic， intentional

在視覺上，谷歌不僅要求生動形象，更要求設計時要確認設計的目的，摒棄僅僅為了美觀而設計，強調視覺設計要為用戶使用提供指引，凸現頁面當下的核心功能。文檔中谷歌提到這部分借鑒傳統的印刷設計。

Motion provides meaning

交互動畫的目的就是吸引用戶的注意，表達當下頁面發生的變化，同時和對視覺要求一樣，一定要有意義。

設計規范文檔非常細致，就不一一展開，以下是個人在具體的章節，認為是重點的學習摘要。大家可以參考：

作者的總結實用全面，建議同學們下載高清大圖學習：微盤下載

近期在學習Material Design的設計規范同時，對其他的系統的設計規范的演進歷史進行了一些了解。有一些個人不成熟的想法與各位分享，歡迎各位拍磚：

各種設計規范的邏輯

每種系統的都期望構建一個合理的虛擬世界運行機制，而設計規范就是這個世界運行的準則，讓無數的應用可在虛擬世界中的合理運行，讓用戶在使用中可以清晰理解。

Skeuomorphism Design（iOS1-6）：

擬物化的設計，在iOS1-6的演進中，一直備受推崇。這類設計風格的初衷是盡可能的去符合用戶的心理模型，降低用戶的認知成本。在這個狀態下，手機就像是一個裝著各種器物的箱子，而箱子中的器物就是各個完全擬物的app。擬物化的設計就是完全將現實層級的交互關系搬到手機上。

比如iBooks在設計風格上就是完全擬物化現實中書架與書籍的邏輯，這樣完全符合用戶的心理預期，簡單易懂容易上手：

iBooks

而下面這個豆瓣廣播截圖也充分反映了，擬物化設計在符合用戶心理模型上的天生優勢。

豆瓣廣播

隨著擬物化的發展，一些弊端也逐漸顯現：

現實的層級關系復雜，通過手機屏幕的二維空間沒辦法完全模擬；

隨著科技發展，部分物品已逐漸不為人所知，再執迷擬物，會出現反向的認知問題；

又比如錘子時鐘的秒表計時器，相信很多人是沒見過實物的，更不清楚其實際的操作步驟。對于這類人使用該app的學習成本與擺上幾個button的設計，區別是不大的。

錘子時鐘APP

擬物化對ui的要求極高，設計者的負擔沉重，設計門檻也很高；

擬物化的圖標更適合鼠標點擊操作，而隨著觸摸屏的普及，扁平化的大范圍觸碰操作更適合觸摸屏的交互。

Flat Design（iOS 7、8/WP）：

至于近期火熱的扁平化，iOS 7與WP盡管在視覺上看起來有些類似，但是在交互的隱喻上還是有很大的區別。

WP的Flat Design，除了在視覺上將圖標拍扁，同時交互的邏輯層次上也呈現扁平化。之前的邏輯層次是“我的電腦—C/D/E盤—文件夾—各個文檔軟件”，而現在扁平化的邏輯層次是所有的均可在一個邏輯層次上，不去特意考慮模擬現實世界已有的邏輯，他即是全新的邏輯。這就像是被拆開打散排列放置的套娃，這時它只是排列的娃娃，而不能被稱作“套娃”。

Win8

而iOS7、8的Flat Design，在視覺上與WP的設計風格類似，但是在交互上，iOS7、8通過大量的縮放、模糊、透視，用毛玻璃的風格打造了一個全新的具有位置縱深感的虛擬世界，它通過景深來控制交互的層級。同時也通過Z軸角度的變換，保證了層級的扁平。

Cards Design（webOS）、Material Design（Android）：

webOS中的卡片系統，把每個程序用卡片的形式作隱喻，在多任務的操作中配合手勢區域的交互手勢，讓多任務操作非常便捷。同時在webOS 2.0時期，將卡片的隱喻繼續發揚，在多任務中引入堆棧概念，把各個應用任務用撲克牌手牌似的形態堆疊。進一步提升了操作的體驗。

webOS

谷歌在收掉webOS一票人后，Android也融入了一些卡片的理念。此次的Material Design個人的看法就是將卡片設計進一步的規范，并且擴展到整個系統層面。原來webOS是整個應用被隱喻成了卡片，而Material Design把系統內的各種設計都規范成了一種變形的紙片。然后，谷歌在套用現實中紙墨的物理模型進行交互——“既然沒辦法完全在手機上用app完全模擬現實世界的邏輯層次，我把app規范到紙片上，完全模擬紙片的邏輯交互層次，還不行嗎？”

通過紙張的折痕來分區，盡管是兩塊不同的內容，在邏輯上這兩塊的關系還是很緊密的，在表現上仍是一張紙。

通過邊線的陰影表達這是兩張紙，邏輯上這兩塊的關系是獨立的，上層的紙片聯動肯定不會干擾下層的的紙片。

內容主體的紙片可以在工具欄紙片下部上下移動。

菜單欄是一張全新的小紙片，貼在現有的紙片層次之上。

浮動按鈕，是一張圓形的紙片，貼在除了系統bar之外的所有的紙片層次之上。

以上是程序界面整體的邏輯層級關系，同時將這些層次區分出來的方式就是通過紙片邊緣的陰影。

Cards的陰影表現

FAB的陰影表現

Right Nav的陰影表現

簡而言之，Material Design的紙張設計首先是將界面集成到紙片上，再通過陰影來區分多層的紙張，最后進一步通過紙片的拼貼提供了多平臺統一且多樣的交互可能。

規范的目的

個人認為各種平臺（iOS、Android、WP……），以及各類基于Android深度定制的ROM（miui、flyme、ColorOS……）都制定規范的目的莫不有三：

1. 統一約束第三方應用的設計與交互體驗感受，降低用戶學習使用成本；
2. 統一跨平臺的使用體驗，降低用戶跨平臺學習使用成本；
3. 提供規范統一的接口，降低開發者的設計成本。

當下國產機很少有使用原生系統的機器，基本都會刷基于Android系統二次開發的廠商定制ROM，比如miui、flyme、ColorOS、Funtouch OS……這些ROM都對Android原生系統進行了深入的定制，其中部分ROM更是私自替換了原生系統中的控件，這也就造成了完全按照設計規范設計的應用在這些被替換了控件的ROM中安裝后，反而不倫不類。

Android手機與蘋果手機相比型號眾多，機器性能層次不齊，這也就造成了無法提供統一的交互體驗。可能看似優雅的交互動畫，可能在低端機器上呈現的效果一塌糊涂。本來像水一樣流暢的tab頁間的滑動操作，在低端機器上體驗感覺像泥石流一樣。

另外個人認為，系統ROM、系統商店、應用APP之間還存在一種生態。以魅族的flyme系統、魅族應用商店、適配sb欄的應用為例：flyme系統中含有比較特殊的smart bar的設計，如果應用不單獨適配，在flyme系統中使用很難保證統一的體驗。如果某應用單獨適配了smart bar版本，作為利益的交換，魅族應用商店會給予一定的廣告位推介。這個生態很明顯會促進一種規范的推進。尤其在像蘋果iOS這種封閉的系統中，如果不越獄APP Store是唯一的更新途徑，獲得蘋果應用商店的青睞，符合iOS的設計規范顯得尤為重要。而谷歌商店在國內基本被閹割，加上各類手機助手的亂入，這種生態完全是不存在的。這也造成Android規范推廣的困難。

既然是規范，也就是意味著這是指導建議，沒有強制性的舉措讓開發者去遵守。加上Android系統的開放性，完全按照規范去設計的應用可謂寥寥無幾。而且就算開發者主觀想遵守設計規范，就Android當下的亂象，也不是很好的解決方案。同時每個應用都有自身需要實現的價值，在規范與自身需求實現的平衡上，這也是很重要的。

比如說此次微信5.4的更新，又返回到了底部Tab欄的iOS風格，盡管底部的Tab欄也支持滑動，很明顯地可以看出微信的團隊在這個設計上做了妥協。微信團隊肯定認定自身業務數據的重要性遠比遵守所謂的規范要重要的多得多。

所以個人認為所謂的設計規范，只是一本“考試大綱”，而不是“考試答案”。

完全按照規范，可以做到80-89分優良設計，卻很難在符合自身應用的情況下做到令人驚艷的90分以上的設計，當然依照規范也很難設計出不及格的作品。

回到自身產品，作為一個大眾化的工具型產品，直觀與易用性是最重要的。如果設計規范中的某種設計適用到產品某項功能中非常合拍，那是非常好的選擇。如果某種符合業務需求的簡單設計不符合設計規范，但這種規范不影響用戶理解使用，不遵循規范也未嘗不可。為了降低用戶的學習使用成本，讓所有應用遵循設計規范顯然是不現實的，但是我們的設計完全可以去借鑒當下使用廣泛的應用，比如騰訊系、阿里系、360系的產品，他們廣闊裝機量培養的用戶使用習慣是根深蒂固，很難被替代的。借鑒他們的某些操作最簡單的達到我們的目的，不失為一種方式。

所有的設計都是為了輔助產品需求的實現，同時保證用戶的優良體驗。如果設計僅是為了符合規范，這也就失去設計本質的意義。

想自學？就來優設看最簡單快速的教程！

頂尖文案超快速創作教程！
《年度最佳教程！7招教你寫出互聯網頂尖文案！》

編程自學網站全推薦！都很棒呦！
《進擊的設計師！國內外有哪些實戰型的前端學習網站？》

給非科班同學的一封自學信：
《幫你自學到底！非科班同學如何成為交互設計師？》

原文地址：loaferwang
作者：@東門王三

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量85萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：