「Material Design」的九大設計原則

2020-11-25 雷鋒網

谷歌發布新作業系統「 L Developer Preview」後,也同步推出了可視化語言Material Design,它的設計美學將會融入到谷歌所有的平臺之中,包括Chrome OS和網頁,它也將形成一個統一的外觀,將所有的產品捆綁在一起。扁平化的設計,加上明亮的色彩,Material Design的外觀還是很吸引人的。此外,谷歌對動畫效果也做了相應的調整,讓體驗變得更加好玩兒。

除了在Google+社交媒體上發布了相關內容之外,谷歌還給與會者發送了一些藝術印刷套件,其中就包括一些極具特色的明信片,這些明信片很漂亮,也向人們展示了新設計語言的設計原則。

谷歌是這樣介紹的:「設計是創造的藝術,我們的目標就是要滿足不同的人類需要。人們的需要會隨著時間發展,我們的設計,實踐,以及理念也要隨之提升。我們在自我挑戰,為用戶創造了一個可視化語言,它整合了優秀設計的經典原則和科學與技術的創新。這就是Material Design。」

1、材料是個隱喻

材料隱喻是合理空間和動作系統的統一理論。谷歌所謂的「材料」是基於觸覺現實,靈感來自於對於紙張和墨水的研究,也加入了想像和魔法的因素。

2、表面是直觀和自然的

表面和邊緣為現實經驗提供了視覺線索。使用熟悉的觸覺屬性,可以直觀地感受到使用情景。

3、維度提供交互

光、表面和運動是展現交換的關鍵因素。逼真的光影效果顯出了各部分分離,劃分了空間,指示了哪些部分可以進行操作。

4、適應性設計

底層設計系統包括了交互和空間兩部分。每一個設備都能反映出同一底層系統的不同側面。每一設備的界面都會按照大小和交互進行調整。只有顏色,圖標,層次結構和空間關係保持不變。

5、目錄用黑體和圖形設計,並帶有意圖

黑體能突出層次、意義,顯現焦點。深思熟慮的色彩選擇,層次分明的圖像,大範圍的鋪陳和有意的留白可以創造出浸入感和也能讓表達更清晰。

6、顏色、表面和圖標都強調動作效果

用戶行為就是體驗設計的本質。基本動作效果是轉折點,他們可以改變整個設計,可以讓核心功能變得更加明顯,更為用戶指明了「路標」。

7、  用戶發起變化

操作界面中的變化來自於用戶行為。用戶觸摸操作產生的效果要反應和強化用戶的作用。

8、  動畫效果要在統一的

所有動畫效果都在統一的環境下顯示。即使發生了變形或是重組,對對象的呈現也不能破壞用戶體驗的連續性。

9、動作提供了意義

動作是有意義的,而且是恰當的,動作有助於集中注意力和保持連續性。反饋是非常微妙和清晰的,而轉換不僅要有效率,也要保持一致性。

VIA  TNW

相關內容

谷歌開發者大會(16):別期待什麼?

雷鋒網原創文章,未經授權禁止轉載。詳情見轉載須知。

相關焦點

  • 關於在iOS當中實踐Material Design的訪談
    設計這些app界面通常需要多少時間?和大家一樣,我在多數項目裡都會用到Photoshop和Illustrator,不過最近特別鍾情於Sketch。我從來無法滿足於靜態的mockup,所以涉及到動效設計時,我通常會使用After Effects。
  • Material design與iOS Human Interface Guidelines對比分析
    規範目標與原則Material Design(以下簡稱MD)是谷歌設計的一套視覺語言設計規範,也是Android Design演進的一種設計規範。在MD開篇,谷歌公司就表達了自己的期望:創造一種視覺語言,能夠將經典的設計原則與創新的科學技術結合起來;開發一個能夠跨平臺使用的底層系統,保證用戶在不同平臺上都能夠擁有統一的體驗。
  • material2 發布 7.1.0,Angular 的 Material Design 風格框架
    Angular 的 Material Design 風格框架 material2 發布了 7.1.0 版本,這主要是一個 bug 修復版本,當然也提供了新特性和改進性能。
  • material2 發布 7.0.1,Angular 的 Material Design 風格框架
    Angular 的 Material Design 風格框架 material2 發布了 7.0.1 版本,這主要是一個 bug
  • 扁平化設計與Material Design區別在哪裡?
    兩種相似的設計風格,一個基於另一個。一個是新熱事物,另一個,有人猜測,已經以自己的方式成為一種時尚。一個是自發的——適應設計的趨勢,另一個卻是有目標——專用的設計指導規範。你可能明白了扁平化與Material Design之間的衝突了。
  • 分析Google、微軟、蘋果設計規範的異同點
    可以看出material design是旨在解決跨設備界面和體驗的統一,讓Android設備的界面設計不在是割裂、碎片化。material design 介紹material design 四大設計原則Material Design受物理世界及其材質的啟發,包括它們如何反射光線和投射陰影。材料表面重新想像紙張和油墨的介質。
  • Material Design 有什麼缺點?
    答|百度派 @雙馬尾蘿莉醬谷歌推出了全新的設計語言Material Design。谷歌表示,這種設計語言旨在為行動電話、平板電腦、臺式機和其他平臺提供更為一致和更廣泛的「外觀和感覺」。成功的視覺效果FAB 對 Google design 是個很好的視覺突破。平面設計中的「點線排列」概念,是一個非常靈活和突出的「點」元素,而這種強大元素的界面設計在很難出現之前。
  • Material Design設計語言-數據可視化
    本文總結了數據可視化設計的五個要點,分別為:原則、類型、樣式、行為、儀錶板。在行業內還沒有一個標準的規範可參考之前,谷歌的可視化團隊於2019年6月率先開發了數據可視化設計指南。數據可視化:主要是藉助於圖形化手段,清晰有效地傳達與溝通信息。
  • 【NEXT Collections】關於實踐 Material Design 的三個問題
    這是 Google 自去年 Android 5.0 開始推廣的全新設計語言,而整個設計語言的暗喻基於 material——材料和質感。隨著 Android 5.0 的普及、國內第三方 ROM 的更新和跟進,相信 Material Design 會真正成為國內開發者們所面臨的產品抉擇——我們的應用要不要採用 Material Design?
  • 谷歌Material Design設計語言將用於汽車和電視
    更新的Material Design規範談到了如何將這一設計語言用於新的平臺,例如電視機、汽車中控臺,甚至谷歌Cardboard虛擬實境設備。 一年前,Android首席設計師馬提亞斯·杜亞特(Matias Duarte)發布了全新的設計語言Material Design。
  • 新版綠色化學十二原則
    在這篇文章裡,作者提出了綠色化學十二原則的更新版Mostly linear processes → Circular→ Catalysis using abundant metals, enzymes, photons,or electrons從使用稀有金屬催化劑到使用儲量豐富的金屬催化劑,或者酶催化、光電催化體系Covalent bonds → Weak noncovalent interactions從設計合成穩定難降解的共價鍵分子體系到易於降解的非共價鍵分子體系
  • 【史上最幹】Material Design複雜響應式設計
    2012年,Google引入分層的卡片設計,使用更多的空白和精心設計的層次排版結構。經歷了幾年的迭代和提煉,Google尋找到了一種可以貫通的理論體系,即把系統內的各種設計都規範成一種變形的紙片,並套用現實中紙墨的物理模型進行交互,這就是2014年Google I/O大會隆重發布的Material Design。
  • 12.3 Italian Design Day 2020 義大利設計日
    由義大利文化遺產活動與旅遊部,義大利外交與國際合作部以及義大利工業設計協會在全世界推廣的第四屆義大利設計日舉辦之際,義大利駐華大使館和義大利駐華大使館文化中心將舉辦一場線上研討會,著名設計師、Cibic workshop創始人、上海同濟大學設計創意學院名譽教授阿爾多·契比齊將與特邀嘉賓進行現場討論。
  • 解讀Material Design引領的UI設計趨勢
    兩個月前,Google I/O大會發布了Android L並推出Material Design,重新統一了Google的設計語言,確立了未來Google的設計方向。那麼,什麼是Material Design?我簡單地將它翻譯成「本質設計」。
  • 埃森哲收購設計諮詢公司designaffairs
    此次收購將提升埃森哲工業X.0部門為製造企業設計智能產品和服務的能力,並通過智能產品、智能服務、智能平臺和新商業模式,助力製造企業進行數位化變革。 designaffairs成立於1997年,在德國慕尼黑和埃爾蘭根、中國上海及美國波特蘭等地工作室共擁有100多名專業人員,能夠為客戶提供包括工業、用戶界面和材料設計,以及互動創新、機械和可用性工程、原型設計、設計研究、品牌戰略等服務。
  • Vuetify - 廣受歡迎的 Material Design 風格的開源 UI 框架
    Material Design 風格 UI 框架Vuetify 是一個基於 Vue.js 精心打造 UI 組件庫,整套 UI 設計為 Material 風格。能夠讓沒有任何設計技能的開發者創造出時尚的 Material 風格界面。
  • 藥片設計(Drug Tablet Design)應考慮哪些?FDA和EMA有規定
    什麼是安全源於設計(SbD)?老年人用藥在處方設計時應做什麼特殊考慮?在過去的三年裡,FDA發布了兩個指導原則來鼓勵藥品處方設計者考慮病人的依從性和減少用藥錯誤(2, 3),在美國稱之為「安全源於設計」(safety by design, SbD),FDA建議片劑應具有適當大小、形狀、包衣,以提高吞咽性和口感。
  • 谷歌Material Design UI 真正美在哪裡?設計即功能
    Material誕生之初首先搭載的設備分別是Nexus 6智慧型手機和Nexus 9平板電腦,但後來延伸至其他所有設備,取得這樣的效果都是因為它植根於幾個原則:1、原質化的視覺提示:設計結合實體物理屬性,參照了紙質和墨水材料的元素。
  • 谷歌Material Design動效篇 - 視覺同盟(VisionUnion.com)
    最佳案例 Material Design中動效設計的關鍵是保證物體運動的物理感,同時不犧牲物體運動的優雅感、簡約感、美感,讓物體的運動充滿魔力,打造無縫式的用戶體驗。下面是一些動效設計規範,通過這些規範,可以理解如何用動效展示理念。
  • Design by Science——參觀項目之FCL 未來城市實驗室
    To achieve liveability, design is essential.為了實現可居住性,設計是必不可少的。設計是一個將分析技術、富有想像力的策略和跨學科的知識相結合以產生新想法並加以實現的協作過程。設計技能常常將相互衝突的技術、經濟、社會和文化需求(如環境可持續性、效益、舒適性、便利性、保護性、安全性、滿意和願望)帶入創新和諧關係中。