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