恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Material Design設計規範學習心得
0.0°
2014-12-12 好文转载 经验/观点 原作者: Loafer 举报 34616 119 46 3

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

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

Material Design的設計主要基於三個原則:

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

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

  3. Motion provides meaning 
    交互動畫的目的就是吸引使用者的注意,表達當下頁面發生的變化,同時和對視覺要求一樣,一定要有意義。 設計規範文檔非常細緻,就不一一展開,以下是個人在具體的章節,認為是重點的學習摘要。大家可以參考:

學習摘要

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

各種設計規範的邏輯

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

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

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

iBooks

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

豆瓣廣播

隨著擬物化的發展,一些弊端也逐漸顯現: 1. 現實的層級關係複雜,通過手機螢幕的二維空間沒辦法完全模擬; 
2. 隨著科技發展,部分物品已逐漸不為人所知,再執迷擬物,會出現反向的認知問題; 
又比如錘子時鐘的碼錶計時器,相信很多人是沒見過實物的,更不清楚其實際的操作步驟。對於這類人使用該app的學習成本與擺上幾個button的設計,區別是不大的。

錘子時鐘APP

  1. 擬物化對ui的要求極高,設計者的負擔沉重,設計門檻也很高;
  2. 擬物化的圖示更適合滑鼠點擊操作,而隨著觸控式螢幕的普及,扁平化的大範圍觸碰操作更適合觸控式螢幕的交互。

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之外的所有的紙片層次之上。

以上是程式介面整體的邏輯層級關係,同時將這些層次區分出來的方式就是通過紙片邊緣的陰影。以下是部分陰影的紙片表現。

簡而言之,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系的產品,他們廣闊裝機量培養的用戶使用習慣是根深蒂固,很難被替代的。借鑒他們的某些操作最簡單的達到我們的目的,不失為一種方式。

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

更新:2014-12-12

收藏

119人已收藏

  • 4

    作品

  • 71

    粉丝

  • 22

    关注

  • UI设计师不可不知的安卓屏幕知识
  • AI置入图片--- 嵌入/链接、提取置入的图片、链接改嵌入
  • Android Wear与Apple Watch交互设计对比
相关标签
Material Design

    猜你喜欢

      2014-12-12 好文转载 经验/观点 原作者: Loafer 举报 34616 119 46 3

      Material Design設計規範學習心得

      0.0°

      你确定要举报Material Design設計規範學習心得

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2014年12月12日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      46
      119
      3

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录