Material Design設(shè)計規(guī)范學(xué)習(xí)心得

隨著Android系統(tǒng)從Android 4.4逐步升級到Android L。Material Design作為Android Design演進(jìn)的最新標(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刻撒,谷歌從開篇就表達(dá)期望打造一個全新的底層設(shè)計規(guī)范,繼而用這個規(guī)范去統(tǒng)一各平臺間耿导、各種交互間的用戶體驗声怔。

Material Design的設(shè)計主要基于三個原則:

  1. Material is the metaphor
    谷歌認(rèn)為現(xiàn)實世界中的材質(zhì)觸感是可以通過紙片的隱喻來表達(dá),通過在設(shè)計上運(yùn)用符合運(yùn)動規(guī)律的動畫交互舱呻、通過光影打造設(shè)計層次的關(guān)系可以創(chuàng)造全新的虛擬交互空間醋火,并且這個空間是符合現(xiàn)實規(guī)律的。這也就是文檔中提到的對于紙墨的研究箱吕。

  2. Bold, graphic, intentional
    在視覺上芥驳,谷歌不僅要求生動形象,更要求設(shè)計時要確認(rèn)設(shè)計的目的茬高,摒棄僅僅為了美觀而設(shè)計兆旬,強(qiáng)調(diào)視覺設(shè)計要為用戶使用提供指引,凸現(xiàn)頁面當(dāng)下的核心功能怎栽。文檔中谷歌提到這部分借鑒傳統(tǒng)的印刷設(shè)計丽猬。

  3. Motion provides meaning
    交互動畫的目的就是吸引用戶的注意,表達(dá)當(dāng)下頁面發(fā)生的變化熏瞄,同時和對視覺要求一樣脚祟,一定要有意義。
    設(shè)計規(guī)范文檔非常細(xì)致强饮,就不一一展開由桌,以下是個人在具體的章節(jié),認(rèn)為是重點的學(xué)習(xí)摘要邮丰。大家可以參考:

學(xué)習(xí)摘要
學(xué)習(xí)摘要

近期在學(xué)習(xí)Material Design的設(shè)計規(guī)范同時沥寥,對其他的系統(tǒng)的設(shè)計規(guī)范的演進(jìn)歷史進(jìn)行了一些了解。有一些個人不成熟的想法與各位分享柠座,歡迎各位拍磚:

各種設(shè)計規(guī)范的邏輯

每種系統(tǒng)的都期望構(gòu)建一個合理的虛擬世界運(yùn)行機(jī)制邑雅,而設(shè)計規(guī)范就是這個世界運(yùn)行的準(zhǔn)則,讓無數(shù)的應(yīng)用可在虛擬世界中的合理運(yùn)行妈经,讓用戶在使用中可以清晰理解淮野。

Skeuomorphism Design(iOS1-6):擬物化的設(shè)計,在iOS1-6的演進(jìn)中吹泡,一直備受推崇骤星。這類設(shè)計風(fēng)格的初衷是盡可能的去符合用戶的心理模型,降低用戶的認(rèn)知成本爆哑。在這個狀態(tài)下洞难,手機(jī)就像是一個裝著各種器物的箱子,而箱子中的器物就是各個完全擬物的app揭朝。擬物化的設(shè)計就是完全將現(xiàn)實層級的交互關(guān)系搬到手機(jī)上队贱。

比如iBooks在設(shè)計風(fēng)格上就是完全擬物化現(xiàn)實中書架與書籍的邏輯色冀,這樣完全符合用戶的心理預(yù)期,簡單易懂容易上手:

iBooks
iBooks

而下面這個豆瓣廣播截圖也充分反映了柱嫌,擬物化設(shè)計在符合用戶心理模型上的天生優(yōu)勢锋恬。

豆瓣廣播
豆瓣廣播

隨著擬物化的發(fā)展,一些弊端也逐漸顯現(xiàn):

  1. 現(xiàn)實的層級關(guān)系復(fù)雜编丘,通過手機(jī)屏幕的二維空間沒辦法完全模擬与学;
  2. 隨著科技發(fā)展,部分物品已逐漸不為人所知嘉抓,再執(zhí)迷擬物索守,會出現(xiàn)反向的認(rèn)知問題;
    又比如錘子時鐘的秒表計時器抑片,相信很多人是沒見過實物的卵佛,更不清楚其實際的操作步驟。對于這類人使用該app的學(xué)習(xí)成本與擺上幾個button的設(shè)計蓝丙,區(qū)別是不大的。
錘子時鐘APP
錘子時鐘APP
  1. 擬物化對ui的要求極高望拖,設(shè)計者的負(fù)擔(dān)沉重渺尘,設(shè)計門檻也很高;
  2. 擬物化的圖標(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
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ā)揚(yáng)引颈,在多任務(wù)中引入堆棧概念耕皮,把各個應(yīng)用任務(wù)用撲克牌手牌似的形態(tài)堆疊。進(jìn)一步提升了操作的體驗蝙场。

webOS
webOS

谷歌在收掉webOS一票人后凌停,Android也融入了一些卡片的理念。此次的Material Design個人的看法就是將卡片設(shè)計進(jìn)一步的規(guī)范售滤,并且擴(kuò)展到整個系統(tǒng)層面罚拟。原來webOS是整個應(yīng)用被隱喻成了卡片,而Material Design把系統(tǒng)內(nèi)的各種設(shè)計都規(guī)范成了一種變形的紙片完箩。然后赐俗,谷歌在套用現(xiàn)實中紙墨的物理模型進(jìn)行交互——“既然沒辦法完全在手機(jī)上用app完全模擬現(xiàn)實世界的邏輯層次,我把a(bǔ)pp規(guī)范到紙片上弊知,完全模擬紙片的邏輯交互層次阻逮,還不行嗎?”

通過紙張的折痕來分區(qū)秩彤,盡管是兩塊不同的內(nèi)容夺鲜,在邏輯上這兩塊的關(guān)系還是很緊密的,在表現(xiàn)上仍是一張紙呐舔。
通過紙張的折痕來分區(qū)币励,盡管是兩塊不同的內(nèi)容,在邏輯上這兩塊的關(guān)系還是很緊密的珊拼,在表現(xiàn)上仍是一張紙食呻。
通過邊線的陰影表達(dá)這是兩張紙,邏輯上這兩塊的關(guān)系是獨立的,上層的紙片聯(lián)動肯定不會干擾下層的的紙片仅胞。
通過邊線的陰影表達(dá)這是兩張紙每辟,邏輯上這兩塊的關(guān)系是獨立的,上層的紙片聯(lián)動肯定不會干擾下層的的紙片干旧。
內(nèi)容主體的紙片可以在工具欄紙片下部上下移動渠欺。
內(nèi)容主體的紙片可以在工具欄紙片下部上下移動。
菜單欄是一張全新的小紙片椎眯,貼在現(xiàn)有的紙片層次之上挠将。
菜單欄是一張全新的小紙片,貼在現(xiàn)有的紙片層次之上编整。

浮動按鈕舔稀,是一張圓形的紙片,貼在除了系統(tǒng)bar之外的所有的紙片層次之上掌测。
浮動按鈕内贮,是一張圓形的紙片,貼在除了系統(tǒng)bar之外的所有的紙片層次之上汞斧。
以上是程序界面整體的邏輯層級關(guān)系夜郁,同時將這些層次區(qū)分出來的方式就是通過紙片邊緣的陰影。
以上是程序界面整體的邏輯層級關(guān)系粘勒,同時將這些層次區(qū)分出來的方式就是通過紙片邊緣的陰影竞端。
Cards的陰影表現(xiàn)
Cards的陰影表現(xiàn)

FAB的陰影表現(xiàn)
FAB的陰影表現(xiàn)

Right Nav的陰影表現(xiàn)
Right Nav的陰影表現(xiàn)

簡而言之,Material Design的紙張設(shè)計首先是將界面集成到紙片上仲义,再通過陰影來區(qū)分多層的紙張婶熬,最后進(jìn)一步通過紙片的拼貼提供了多平臺統(tǒng)一且多樣的交互可能剑勾。

規(guī)范的目的

個人認(rèn)為各種平臺(iOS埃撵、Android、WP……)虽另,以及各類基于Android深度定制的ROM(miui暂刘、flyme、ColorOS……)都制定規(guī)范的目的莫不有三:

  1. 統(tǒng)一約束第三方應(yīng)用的設(shè)計與交互體驗感受捂刺,降低用戶學(xué)習(xí)使用成本谣拣;
  2. 統(tǒng)一跨平臺的使用體驗,降低用戶跨平臺學(xué)習(xí)使用成本族展;
  3. 提供規(guī)范統(tǒng)一的接口森缠,降低開發(fā)者的設(shè)計成本。

當(dāng)下國產(chǎn)機(jī)很少有使用原生系統(tǒng)的機(jī)器仪缸,基本都會刷基于Android系統(tǒng)二次開發(fā)的廠商定制ROM贵涵,比如miui、flyme、ColorOS宾茂、Funtouch OS……這些ROM都對Android原生系統(tǒng)進(jìn)行了深入的定制瓷马,其中部分ROM更是私自替換了原生系統(tǒng)中的控件,這也就造成了完全按照設(shè)計規(guī)范設(shè)計的應(yīng)用在這些被替換了控件的ROM中安裝后跨晴,反而不倫不類欧聘。

Android手機(jī)與蘋果手機(jī)相比型號眾多,機(jī)器性能層次不齊端盆,這也就造成了無法提供統(tǒng)一的交互體驗怀骤。可能看似優(yōu)雅的交互動畫爱谁,可能在低端機(jī)器上呈現(xiàn)的效果一塌糊涂晒喷。本來像水一樣流暢的tab頁間的滑動操作,在低端機(jī)器上體驗感覺像泥石流一樣访敌。

另外個人認(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)很明顯會促進(jìn)一種規(guī)范的推進(jìn)独柑。尤其在像蘋果iOS這種封閉的系統(tǒng)中,如果不越獄APP Store是唯一的更新途徑私植,獲得蘋果應(yīng)用商店的青睞忌栅,符合iOS的設(shè)計規(guī)范顯得尤為重要。而谷歌商店在國內(nèi)基本被閹割曲稼,加上各類手機(jī)助手的亂入索绪,這種生態(tài)完全是不存在的。這也造成Android規(guī)范推廣的困難贫悄。

既然是規(guī)范瑞驱,也就是意味著這是指導(dǎo)建議,沒有強(qiáng)制性的舉措讓開發(fā)者去遵守窄坦。加上Android系統(tǒng)的開放性唤反,完全按照規(guī)范去設(shè)計的應(yīng)用可謂寥寥無幾晰筛。而且就算開發(fā)者主觀想遵守設(shè)計規(guī)范,就Android當(dāng)下的亂象拴袭,也不是很好的解決方案读第。同時每個應(yīng)用都有自身需要實現(xiàn)的價值,在規(guī)范與自身需求實現(xiàn)的平衡上拥刻,這也是很重要的怜瞒。

比如說此次微信5.4的更新,又返回到了底部Tab欄的iOS風(fēng)格般哼,盡管底部的Tab欄也支持滑動吴汪,很明顯地可以看出微信的團(tuán)隊在這個設(shè)計上做了妥協(xié)。微信團(tuán)隊肯定認(rèn)定自身業(yè)務(wù)數(shù)據(jù)的重要性遠(yuǎn)比遵守所謂的規(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)品呐芥,他們廣闊裝機(jī)量培養(yǎng)的用戶使用習(xí)慣是根深蒂固,很難被替代的奋岁。借鑒他們的某些操作最簡單的達(dá)到我們的目的思瘟,不失為一種方式。

所有的設(shè)計都是為了輔助產(chǎn)品需求的實現(xiàn)闻伶,同時保證用戶的優(yōu)良體驗滨攻。如果設(shè)計僅是為了符合規(guī)范,這也就失去設(shè)計本質(zhì)的意義。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末光绕,一起剝皮案震驚了整個濱河市女嘲,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌诞帐,老刑警劉巖欣尼,帶你破解...
    沈念sama閱讀 221,635評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異停蕉,居然都是意外死亡愕鼓,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,543評論 3 399
  • 文/潘曉璐 我一進(jìn)店門慧起,熙熙樓的掌柜王于貴愁眉苦臉地迎上來菇晃,“玉大人,你說我怎么就攤上這事蚓挤』撬停” “怎么了?”我有些...
    開封第一講書人閱讀 168,083評論 0 360
  • 文/不壞的土叔 我叫張陵灿意,是天一觀的道長册着。 經(jīng)常有香客問我,道長脾歧,這世上最難降的妖魔是什么甲捏? 我笑而不...
    開封第一講書人閱讀 59,640評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮鞭执,結(jié)果婚禮上司顿,老公的妹妹穿的比我還像新娘。我一直安慰自己兄纺,他們只是感情好大溜,可當(dāng)我...
    茶點故事閱讀 68,640評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著估脆,像睡著了一般钦奋。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上疙赠,一...
    開封第一講書人閱讀 52,262評論 1 308
  • 那天付材,我揣著相機(jī)與錄音,去河邊找鬼圃阳。 笑死厌衔,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的捍岳。 我是一名探鬼主播富寿,決...
    沈念sama閱讀 40,833評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼睬隶,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了页徐?” 一聲冷哼從身側(cè)響起苏潜,我...
    開封第一講書人閱讀 39,736評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎变勇,沒想到半個月后窖贤,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,280評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡贰锁,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,369評論 3 340
  • 正文 我和宋清朗相戀三年赃梧,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片豌熄。...
    茶點故事閱讀 40,503評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡授嘀,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出锣险,到底是詐尸還是另有隱情蹄皱,我是刑警寧澤,帶...
    沈念sama閱讀 36,185評論 5 350
  • 正文 年R本政府宣布芯肤,位于F島的核電站巷折,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏崖咨。R本人自食惡果不足惜锻拘,卻給世界環(huán)境...
    茶點故事閱讀 41,870評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望击蹲。 院中可真熱鬧署拟,春花似錦、人聲如沸歌豺。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,340評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽类咧。三九已至馒铃,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間痕惋,已是汗流浹背区宇。 一陣腳步聲響...
    開封第一講書人閱讀 33,460評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留血巍,地道東北人萧锉。 一個月前我還...
    沈念sama閱讀 48,909評論 3 376
  • 正文 我出身青樓珊随,卻偏偏與公主長得像述寡,于是被迫代替她去往敵國和親柿隙。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,512評論 2 359

推薦閱讀更多精彩內(nèi)容