我喝了 Material Design 這碗雞湯
斷斷續續的看了一個月，終于啃完了 Material Design 這個奉為最新設計趨勢的圣經。從不屑，到好奇，再到揣摩其中的思想并嘗試總結規律。最后不得不承認， 谷 歌的 巨 牛設 計 師 [下文簡稱 古巨基 ] 絕對是業界良心。其嚴謹的邏輯和分享的精神正是作為一個互聯網從業人員所必須具備的素質。通過參照這個手冊，普通人也可以做出符合用戶體驗的設計。
開篇古巨基提出了三個準則：
- Material is a metaphor，設計時聯想現實生活中的卡片
- Bold, graphic, intentional，大膽運用顏色和圖片
- Motions provides meaning，不做沒意義的動效
這三個準則我理解即為：擬物，個性，簡約。
擬物：最好的設計能喚起人類的共鳴，即 visceral reflection, 因此要留意日常生活中一舉一動，培養一顆發現美的眼睛。我覺得仔細盯著一幅畫觀察細節或者買個好耳機聽好歌的細節可以培養我這方面的能力。
個性：咩有個性的設計師一定不是個好藝術家。看過很多被稱為藝術家的作品，而后發現他們的作品是不能夠用理性來評判優劣的，甚至可能都看不出其想表達的意 義和感情。然而這就是藝術品。都說設計是理性的，藝術是感性的。想更接近藝術一步嗎，show your characteristics!
簡約：設計界經典語錄 less is more. 大道至簡。越來越感受到這句話的深刻意義。自己寫前端代碼時總想著能用最酷炫的效果，最花哨的樣式，結果總是忽略了產品的目的本身。往往越復雜的網站看起 來越樸素，越有內涵的人打扮越隨意。然而老祖宗早已看穿了這一切。
接下來，什么是 Material?
大家可以把 Material 想象成一個放在真實環境中的卡片。在真實世界中一般有兩種光源，點光源和環境光。前者有投射方向，光線比較聚集強烈，好比太陽照到人身上會產生特定方向的陰影, 如圖。
后者類似LED日光燈，光比較分散柔和，只會產生泛泛陰影之感，如圖。
我們的一切設計就存在這個3D的環境當中，為了方便測量，古巨基給這個環境指定了 x, y, z 軸，如圖。
長寬分別是 x, y 軸，深度是 z 軸。這三個軸都是無盡頭的，考慮到界面在虛擬世界中理論上是可以無限延展的。這里對測量單位進行一下解釋。古巨基們發明了一個晦澀的單位 dp. 如果這個環境 [手機分辨率] 是 160 dpi, 那么你設計稿的 1px 就是 1dp. 否則，請參照如下公式： px = dp *（ dpi / 160 ） . 數學不好的孩紙請默默的拭去眼角不經意流出的翔。
Material Design 的另外一個特色是其模塊化思想。設計之前，先做好基礎準備。
- Color
- Icons
- Imagery
- Typography
- Writing
Color：確定自己的主調色板，三個同色系的主色調加一個強調色。不同功能字體的顏色 [標題，正文，解釋文字]，不同狀態下的顏色 [inactive, active, disabled]. 使用設計軟件保存下這些顏色，便于設計時直接調用。
Icons：選擇簡單，不言自明的 icons. 作者一般直接使用 阿里巴巴圖標庫 或 Google 圖標庫 。確保你選的圖標屬于同一風格即可，如果能完全符合 MD 的要求那更真真是極好的了。
Imagery：這一點作者個人覺得比較困難, 需要有很好的素材庫。否則只能請技術高超的攝影師和后期進行原創操作。對于小的設計團隊而言成本很高。不過統一自己的圖片的風格還是需要牢記的。
Typography：古巨基推薦使用 Roboto 字體，不同類型的文字大小也一一限定了，可以直接照搬或者用設計軟件將它們全部保存為模板，便于重復使用。
Writing：簡潔，易懂，不裝逼。盡量將能刪去的文字全部刪去，然后請不相關領域的用戶進行測試，看看他們是否有理解上的障礙。最后如果你要做國際化的軟件，用詞一定不能裝逼 [俗語]，否則很大一部分軟件語言非母語者會有理解上的障礙，多下幾個國外軟件你就懂。
正式開始設計時，參展 Layout 部分進行布局，可以通過 Google 下載尺寸模板。各類 Components 的樣式也可以直接使用，網上各類不同的資源。作者是 MAC 用戶，設計界面一般使用 Sketch,Sketch App Sources 是我最長使用的網站，里面有各類豐富的模板。交互細節方面請參照 Pattern 模塊，制定一個統一的標準是最重要的，避免不同的設計師和開發者采用自己個人的偏好，導致產品細節處不一致。
設計完成后，可以參照 Usability 模塊進行可用性測試。個人覺得古巨基的要求是相當相當高的，大部分 App 都難以滿足其所有要求。但可以把其當做一個評判標準，滿分100分，老師您能給我打幾分？
作者進行可用性測試時一般使用五個標準：
- Affordance，功能是否實現
- Signifier，用戶是否理解
- Matching，理解是否容易
- Consistence，理解是否一致
- Feedback，錯誤理解是否能糾正，正確理解是否能強化
如果上述五點要求全部能夠滿足，我相信這個應用已經可以稱之為一個易用的應用了。
當然 Material Design 并不是萬能的，實踐時更應該結合實際情況。產品的主要發布平臺是什么， Android or iOS . 如果是 Android ，當然可以完全匹配。IOS 就需要適當平衡 Google 的樣式風格和 iOS 的樣式風格。如果是網站，我還是很推薦 MD 風格的，Google 旗下的網站真的用起來 so easy 啊。只有一點作者個人持保留觀點，就是 MD 的 Subheader [收縮側邊欄導航]. 我是盡可能避免使用這一特性。即使使用了側邊欄導航，也盡可能使其 permanent rather than temporary OR transfer primary functions outside to be tabs nav. 實在不喜歡猶抱琵琶半遮面的感覺，每次看臉都得先把面罩取了，真是麻煩。
最后，也建議 Developers 抽空也去看一下 Material Design Instruction, 可以極大的降低以后您和設計妹子 [or 漢紙] 之間的溝通成本，一段美好的姻 [gay] 緣也許能就此產生呢。
當然，紙上得來終覺淺，絕知此事要躬行。放假抽空設計一個基于 MD 的 Handhold device 的移動端購物網站作為鍛煉. I really like the floating button idea. It is super easy and straightforward.
Last but not least, may 簡書 and every 簡友 life be filled with joy and may each new day bring you moments to cherish. Happy Christmas.
