-
自然排名 點擊多少均不要錢喲！
可能會幫您的生意提高幾倍，幾十倍 -
編者按：自學(xué)筆記就該這么做!今天分享@東門王三 同學(xué)關(guān)于Material Design的自學(xué)成果，他的學(xué)習(xí)筆記嚴(yán)謹(jǐn)有序，觸類旁通，從Material Design到其他系統(tǒng)的設(shè)計規(guī)范都有所研究，還認(rèn)真地做了思維導(dǎo)圖，同學(xué)們可以邊學(xué)習(xí)邊借鑒他的自學(xué)方法，一舉兩得呦。
自學(xué)的一大重點就是讀書，推薦同學(xué)們看一下華為設(shè)計總監(jiān)的經(jīng)驗：《華為設(shè)計總監(jiān)尤原慶：怎樣讀設(shè)計書》
@東門王三 ：隨著Android系統(tǒng)從Android 4.4逐步升級到Android L。Material Design作為Android Design演進的更新標(biāo)準(zhǔn)規(guī)范，也推出其完整的設(shè)計規(guī)范。Holo Themes作為之前Android Design的官方推薦的示例主題已經(jīng)被廣泛應(yīng)用到各個應(yīng)用的設(shè)計當(dāng)中，盡管更大部分應(yīng)用沒有完全符合設(shè)計規(guī)范，但是可以看到這一年來這些應(yīng)用都在向規(guī)范去努力。
從整體的概述來看Material Design，谷歌從開篇就表達期望打造一個全新的底層設(shè)計規(guī)范，繼而用這個規(guī)范去統(tǒng)一各平臺間、各種交互間的用戶體驗。
Material Design的設(shè)計主要基于三個原則：
Material is the metaphor
谷歌認(rèn)為現(xiàn)實世界中的材質(zhì)觸感是可以通過紙片的隱喻來表達，通過在設(shè)計上運用符合運動規(guī)律的動畫交互、通過光影打造設(shè)計層次的關(guān)系可以創(chuàng)造全新的虛擬交互空間，并且這個空間是符合現(xiàn)實規(guī)律的。這也就是文檔中提到的對于紙墨的研究。
Bold， graphic， intentional
在視覺上，谷歌不僅要求生動形象，更要求設(shè)計時要確認(rèn)設(shè)計的目的，摒棄**為了美觀而設(shè)計，強調(diào)視覺設(shè)計要為用戶使用提供指引，凸現(xiàn)頁面當(dāng)下的核心功能。文檔中谷歌提到這部分借鑒傳統(tǒng)的印刷設(shè)計。
Motion provides meaning
交互動畫的目的就是吸引用戶的注意，表達當(dāng)下頁面發(fā)生的變化，同時和對視覺要求一樣，一定要有意義。
設(shè)計規(guī)范文檔非常細致，就不一一展開，以下是個人在具體的章節(jié)，認(rèn)為是重點的學(xué)習(xí)摘要。大家可以參考：
作者的總結(jié)實用全面，建議同學(xué)們下載高清大圖學(xué)習(xí)：微盤下載
近期在學(xué)習(xí)Material Design的設(shè)計規(guī)范同時，對其他的系統(tǒng)的設(shè)計規(guī)范的演進歷史進行了一些了解。有一些個人不成熟的想法與各位分享，歡迎各位拍磚：
各種設(shè)計規(guī)范的邏輯
每種系統(tǒng)的都期望構(gòu)建一個合理的虛擬世界運行機制，而設(shè)計規(guī)范就是這個世界運行的準(zhǔn)則，讓無數(shù)的應(yīng)用可在虛擬世界中的合理運行，讓用戶在使用中可以清晰理解。
Skeuomorphism Design(iOS1-6)：
擬物化的設(shè)計，在iOS1-6的演進中，一直備受推崇。這類設(shè)計風(fēng)格的初衷是盡可能的去符合用戶的心理模型，降低用戶的認(rèn)知成本。在這個狀態(tài)下，手機就像是一個裝著各種器物的箱子，而箱子中的器物就是各個完全擬物的app。擬物化的設(shè)計就是完全將現(xiàn)實層級的交互關(guān)系搬到手機上。
比如iBooks在設(shè)計風(fēng)格上就是完全擬物化現(xiàn)實中書架與書籍的邏輯，這樣完全符合用戶的心理預(yù)期，簡單易懂容易上手：
iBooks
而下面這個豆瓣廣播截圖也充分反映了，擬物化設(shè)計在符合用戶心理模型上的天生優(yōu)勢。
豆瓣廣播
隨著擬物化的發(fā)展，一些弊端也逐漸顯現(xiàn)：
現(xiàn)實的層級關(guān)系復(fù)雜，通過手機屏幕的二維空間沒辦法完全模擬;
隨著科技發(fā)展，部分物品已逐漸不為人所知，再執(zhí)迷擬物，會出現(xiàn)反向的認(rèn)知問題;
又比如錘子時鐘的秒表計時器，相信很多人是沒見過實物的，更不清楚其實際的操作步驟。對于這類人使用該app的學(xué)習(xí)成本與擺上幾個button的設(shè)計，區(qū)別是不大的。
錘子時鐘APP
擬物化對ui的要求更高，設(shè)計者的負擔(dān)沉重，設(shè)計門檻也很高;
擬物化的圖標(biāo)更適合鼠標(biāo)點擊操作，而隨著觸摸屏的普及，扁平化的大范圍觸碰操作更適合觸摸屏的交互。
Flat Design(iOS 7、8/WP)：
至于近期火熱的扁平化，iOS 7與WP盡管在視覺上看起來有些類似，但是在交互的隱喻上還是有很大的區(qū)別。
WP的Flat Design，除了在視覺上將圖標(biāo)拍扁，同時交互的邏輯層次上也呈現(xiàn)扁平化。之前的邏輯層次是“我的電腦—C/D/E盤—文件夾—各個文檔軟件”，而現(xiàn)在扁平化的邏輯層次是所有的均可在一個邏輯層次上，不去特意考慮模擬現(xiàn)實世界已有的邏輯，他即是全新的邏輯。這就像是被拆開打散排列放置的套娃，這時它只是排列的娃娃，而不能被稱作“套娃”。
Win8
而iOS7、8的Flat Design，在視覺上與WP的設(shè)計風(fēng)格類似，但是在交互上，iOS7、8通過大量的縮放、模糊、透視，用毛玻璃的風(fēng)格打造了一個全新的具有位置縱深感的虛擬世界，它通過景深來控制交互的層級。同時也通過Z軸角度的變換，保證了層級的扁平。
Cards Design(webOS)、Material Design(Android)：
webOS中的卡片系統(tǒng)，把每個程序用卡片的形式作隱喻，在多任務(wù)的操作中配合手勢區(qū)域的交互手勢，讓多任務(wù)操作非常便捷。同時在webOS 2.0時期，將卡片的隱喻繼續(xù)發(fā)揚，在多任務(wù)中引入堆棧概念，把各個應(yīng)用任務(wù)用撲克牌手牌似的形態(tài)堆疊。進一步提升了操作的體驗。
webOS
谷歌在收掉webOS一票人后，Android也融入了一些卡片的理念。此次的Material Design個人的看法就是將卡片設(shè)計進一步的規(guī)范，并且擴展到整個系統(tǒng)層面。原來webOS是整個應(yīng)用被隱喻成了卡片，而Material Design把系統(tǒng)內(nèi)的各種設(shè)計都規(guī)范成了一種變形的紙片。然后，谷歌在套用現(xiàn)實中紙墨的物理模型進行交互——“既然沒辦法完全在手機上用app完全模擬現(xiàn)實世界的邏輯層次，我把app規(guī)范到紙片上，完全模擬紙片的邏輯交互層次，還不行嗎?”
通過紙張的折痕來分區(qū)，盡管是兩塊不同的內(nèi)容，在邏輯上這兩塊的關(guān)系還是很緊密的，在表現(xiàn)上仍是一張紙。
通過邊線的陰影表達這是兩張紙，邏輯上這兩塊的關(guān)系是前幾立的，上層的紙片聯(lián)動肯定不會干擾下層的的紙片。
內(nèi)容主體的紙片可以在工具欄紙片下部上下移動。
菜單欄是一張全新的小紙片，貼在現(xiàn)有的紙片層次之上。
浮動按鈕，是一張圓形的紙片，貼在除了系統(tǒng)bar之外的所有的紙片層次之上。
以上是程序界面整體的邏輯層級關(guān)系，同時將這些層次區(qū)分出來的方式就是通過紙片邊緣的陰影。
Cards的陰影表現(xiàn)
FAB的陰影表現(xiàn)
Right Nav的陰影表現(xiàn)
簡而言之，Material Design的紙張設(shè)計首先是將界面集成到紙片上，再通過陰影來區(qū)分多層的紙張，更后進一步通過紙片的拼貼提供了多平臺統(tǒng)一且多樣的交互可能。
規(guī)范的目的
個人認(rèn)為各種平臺(iOS、Android、WP……)，以及各類基于Android深度定制的ROM(miui、flyme、ColorOS……)都制定規(guī)范的目的莫不有三：
統(tǒng)一約束第三方應(yīng)用的設(shè)計與交互體驗感受，降低用戶學(xué)習(xí)使用成本;
統(tǒng)一跨平臺的使用體驗，降低用戶跨平臺學(xué)習(xí)使用成本;
提供規(guī)范統(tǒng)一的接口，降低**的設(shè)計成本。
當(dāng)下國產(chǎn)機很少有使用原生系統(tǒng)的機器，基本都會刷基于Android系統(tǒng)二次開發(fā)的廠商定制ROM，比如miui、flyme、ColorOS、Funtouch OS……這些ROM都對Android原生系統(tǒng)進行了深入的定制，其中部分ROM更是私自替換了原生系統(tǒng)中的控件，這也就造成了完全按照設(shè)計規(guī)范設(shè)計的應(yīng)用在這些被替換了控件的ROM中安裝后，反而不倫不類。
Android手機與蘋果手機相比型號眾多，機器性能層次不齊，這也就造成了無法提供統(tǒng)一的交互體驗。可能看似優(yōu)雅的交互動畫，可能在低端機器上呈現(xiàn)的效果一塌糊涂。本來像水一樣流暢的tab頁間的滑動操作，在低端機器上體驗感覺像泥石流一樣。
另外個人認(rèn)為，系統(tǒng)ROM、系統(tǒng)商店、應(yīng)用APP之間還存在一種生態(tài)。以魅族的flyme系統(tǒng)、魅族應(yīng)用商店、適配sb欄的應(yīng)用為例：flyme系統(tǒng)中含有比較特殊的smart bar的設(shè)計，如果應(yīng)用不單前幾適配，在flyme系統(tǒng)中使用很難保證統(tǒng)一的體驗。如果某應(yīng)用單前幾適配了smart bar版本，作為利益的交換，魅族應(yīng)用商店會給予一定的廣告位推介。這個生態(tài)很明顯會促進一種規(guī)范的推進。尤其在像蘋果iOS這種封閉的系統(tǒng)中，如果不越獄APP Store是**的更新途徑，獲得蘋果應(yīng)用商店的青睞，符合iOS的設(shè)計規(guī)范顯得尤為重要。而谷歌商店在國內(nèi)基本被閹割，加上各類手機助手的亂入，這種生態(tài)完全是不存在的。這也造成Android規(guī)范推廣的困難。
既然是規(guī)范，也就是意味著這是指導(dǎo)建議，沒有強制性的舉措讓**去遵守。加上Android系統(tǒng)的開放性，完全按照規(guī)范去設(shè)計的應(yīng)用可謂**。而且就算**主觀想遵守設(shè)計規(guī)范，就Android當(dāng)下的亂象，也不是很好的解決方案。同時每個應(yīng)用都有自身需要實現(xiàn)的價值，在規(guī)范與自身需求實現(xiàn)的平衡上，這也是很重要的。
比如說此次微信5.4的更新，又返回到了底部Tab欄的iOS風(fēng)格，盡管底部的Tab欄也支持滑動，很明顯地可以看出微信的團隊在這個設(shè)計上做了妥協(xié)。微信團隊肯定認(rèn)定自身業(yè)務(wù)數(shù)據(jù)的重要性遠比遵守所謂的規(guī)范要重要的多得多。
所以個人認(rèn)為所謂的設(shè)計規(guī)范，只是一本“考試大綱”，而不是“考試答案”。
完全按照規(guī)范，可以做到80-89分優(yōu)良設(shè)計，卻很難在符合自身應(yīng)用的情況下做到令人驚艷的90分以上的設(shè)計，當(dāng)然依照規(guī)范也很難設(shè)計出不及格的作品。
回到自身產(chǎn)品，作為一個大眾化的工具型產(chǎn)品，直觀與易用性是更重要的。如果設(shè)計規(guī)范中的某種設(shè)計適用到產(chǎn)品某項功能中非常合拍，那是非常好的選擇。如果某種符合業(yè)務(wù)需求的簡單設(shè)計不符合設(shè)計規(guī)范，但這種規(guī)范不影響用戶理解使用，不遵循規(guī)范也未嘗不可。為了降低用戶的學(xué)習(xí)使用成本，讓所有應(yīng)用遵循設(shè)計規(guī)范顯然是不現(xiàn)實的，但是我們的設(shè)計完全可以去借鑒當(dāng)下使用廣泛的應(yīng)用，比如騰訊系、阿里系、360系的產(chǎn)品，他們廣闊裝機量培養(yǎng)的用戶使用習(xí)慣是根深蒂固，很難被替代的。借鑒他們的某些操作更簡單的達到我們的目的，不失為一種方式。
所有的設(shè)計都是為了輔助產(chǎn)品需求的實現(xiàn)，同時保證用戶的優(yōu)良體驗。如果設(shè)計僅是為了符合規(guī)范，這也就失去設(shè)計本質(zhì)的意義。
