設計即功能:淺析谷歌MaterialDesign特性

2020-11-25 IT之家

在2014年的Google I/O大會上,谷歌發布了Android L即Android 5.0,並推出Material Design,重新統一了谷歌的設計語言,確立了谷歌設計的未來發展方向。

Material Design字面之意為「材料設計」,但是更願意將之翻譯為「本質設計」,顧名思義,這是一種考慮事物本質的設計,將顯示屏裡的各種UI元素看成是一種不存在於現實世界的新的物質,並賦予它物理特性,因此Material Design並不是去擬物化的設計,可以稱之為抽象化設計。IT之家

時至今日,Android系統已更迭到7.1版本,再提起Material Design似乎有些過時了,但是我們不妨重新溫習一下這種設計語言,再回看谷歌利用這種設計理念所創造出的後代系統,似乎會品嘗到不一樣的滋味。

Material Design的特點主要體現在以下幾個方面。

1、模擬紙的形態:交互更有空間感、層次感

我們都知道一本書裡每一頁紙之間在空間上是相互獨立的,但顯示屏上的所有內容都在一個平面上,雖然沒有立體空間,但信息內容卻是有空間層級的關係。

Material Design引入了z軸的概念,z軸垂直於屏幕,用來表現元素的層疊關係,將之具體化就是把紙張的特性挪到顯示屏裡,把信息內容呈現在虛擬的紙上,「紙」與「紙」之間有上下層級關係,用陰影模擬紙張的空間感,陰影會隨著紙張的空間關係而改變大小

另外,iOS的UI模糊效果從本質上來說與Material Design的紙張設計是相類似的,通過模擬景深的效果來表達內容信息的層級關係。

2、字體:字重區分細緻

Material Design所採用的字體有詳細的筆畫的粗細(字重)區分,英文字體名為Roboto,中文及日韓文名為Noto。

Roboto有6種字重:Thin、Light、Regular、Medium、Bold和Black。

Noto有7種字重:Thin, Light、DemiLight、Regular、Medium、Bold和Black。

3、大面積色塊,大插圖:視覺感和諧,衝擊力強

過去的Android多採用灰色、黑色等深色系,讓人有冰冷科技感,同時也容易產生一種距離感。而Material Design採用了與過去相反的做法,在系統裡大面積地使用鮮豔的色塊,用色塊來突出主要內容和標題,讓界面的主次感更佳突出,也讓原本的界面擁有了時尚和活力。

色塊的顏色選擇多使用飽和度高、明度適中的顏色,整體擁有比較強烈的視覺衝擊,但並不會太刺眼,Action Bar狀態欄也同樣從過去的灰黑顏色改為彩色,並且讓狀態欄與之融為一體,這點與iOS的設計非常相似。

Material Design常採用一張與屏幕等寬,縱向佔據半個屏幕左右的大圖,狀態欄懸浮於圖片之上,後續也有一些應用(例如淘寶)跟進這樣的設計,但並沒有大面積流行起來。

4、圖標,FAB和無邊框按鈕:簡潔直觀

Material Design圖標多採用簡約的摺紙效果,通過扁平色彩表現空間和光影。

小圖標也僅通過單色點線或文字來表現。

在Material Design裡,最引人注目的可能就是就是那個淘氣的圓形小按鈕——FAB(Fixed Action Button)按鈕。

這個按鈕的功能並不局限於「新建」「播放」「收藏」「更多」等功能,對於整體界面的配色形成比較大的反差,因此會讓這個按鈕在界面裡顯得非常耀眼。

從這樣的設計來看,這個按鈕所背負的任務將會是整個界面的主要操作,這是與iOS相比,區別最大的一種互動設計。

在iOS的設計裡,我們已經看到了無邊框按鈕的影子,例如「返回」按鈕只有箭頭和文案,去掉了原本的按鈕質感。尤其是Material Design的鍵盤的極端設計風格,直接把鍵盤的按鈕邊框全部去掉,只保留了英文字母的按鈕。這樣的設計可能讓用戶對點擊的精準度無法更快地判斷,但是在屏幕較小的手機上,去掉邊框會給字母更大的空間,方便了操作。

無邊框按鈕的設計也體現在提示框的按鈕上。如何讓無邊框的按鈕區別於內容文字,這需要設計師除了考慮配色外,還需要考慮按鈕出現的場景,對設計師的在應用場景的解讀上也是一個挑戰。

5、轉場和圖標動畫:動作豐富,動感十足

過去我們的頁面只有X與Y軸,打開一個新的頁面則是生硬地直接跳轉到新的頁面,並沒有點出頁面的空間層級關係。

而Material Design則強調Z軸,即頁面之間的空間層級關係,通過轉場動畫告訴我們,這個頁面從哪裡來,到哪裡去,在整個APP或者系統裡的空間位置是什麼。

另外,不僅僅是頁面層級的動畫過渡,對象操作也伴隨著動畫過渡,從動畫裡能感受到操作的過程變化。過渡動畫賦予了界面控制項一種物理特性,在空間被拉伸、回彈時模仿了橡皮筋的物理特性。

在完成點擊操作之後,圖標通常會轉為對應的另外一種形態,如「返回」與「菜單,」「選擇」與「未選擇」,「收藏」與「已收藏」「點讚」與「取消點讚」的狀態之間切換。

圖標動畫將使得點擊之後的反饋更佳強烈,並且讓界面活起來,動感起來。

從Android 5.0 Lollipop「棒棒糖」到Android 7.0 Nougat「牛軋糖」,Material Design設計語言已迭代三年。由於其開源的特性,Android系統升級率與升級速度已被iOS遠遠的甩在後面,Material Design也因此遭受連累,採用了這種設計語言的應用少之又少。

國外應用在經歷了多個版本的更新升級之後才完成了Material Design化,而國內廠商永遠將「交互體驗」和「好看」排在商業利益之後,再加上各種服務都需要科學上網,國內很難找到完全符合Material Design的應用。

谷歌在Android 7.0強化了AOSP項目的系統升級服務後,可以繞過廠商直接對設備進行系統版本升級,這一舉措可以間接推動應用的Material Design化。在未來,Android的系統UI或許真正能迎來大一統的那一天。

相關焦點

  • 谷歌Material Design UI 真正美在哪裡?設計即功能
    、平板電腦、臺式機和「其他平臺」提供更一致、兼具外觀和功能的「外觀和感覺」。Material為響應式設計而生分層式的設計根本上說是迎合了響應式設計的趨勢——每考慮一個層級的設計,就要考慮所有元素之間應該如何自動關聯。所以說,谷歌的扁平化並不只是把立體的設計效果壓扁,事實上,Material的扁平化設計更是功能上的簡化與重組。
  • Material design與iOS Human Interface Guidelines對比分析
    規範目標與原則Material Design(以下簡稱MD)是谷歌設計的一套視覺語言設計規範,也是Android Design演進的一種設計規範。在MD開篇,谷歌公司就表達了自己的期望:創造一種視覺語言,能夠將經典的設計原則與創新的科學技術結合起來;開發一個能夠跨平臺使用的底層系統,保證用戶在不同平臺上都能夠擁有統一的體驗。
  • 扁平化設計與Material Design區別在哪裡?
    外觀在扁平化設計裡面是次要的:重點是原始的功能。簡單的圖標隱喻甚至可以省略一些網站的內容, 引導用戶進行操作,僅僅基於它的顏色和圖片。此外,它加速加載時間和高或低解析度屏幕上看起來顯示一樣好,提供更加可靠的用戶體驗。正因為如此,對設計者和用戶來說它會讓事情更容易。贊成的意見它擁抱了屏幕的限制基於這些去工作,而不是嘗試去做別的事情。
  • material2 發布 7.1.0,Angular 的 Material Design 風格框架
    Angular 的 Material Design 風格框架 material2 發布了 7.1.0 版本,這主要是一個 bug 修復版本,當然也提供了新特性和改進性能。
  • 關於在iOS當中實踐Material Design的訪談
    在這個環節當中,隨著狀態的切換,信息和功能由主到次通過動效依次展示在界面當中,用戶的注意力得以平滑的過渡到新的狀態當中,無需刻意回憶和判斷前後狀態的區別。此外,在為這條備忘選擇主題背景色時,與當前任務不相關的功能和信息會淡出消失,同時色彩選項依次移入。點擊某個色彩按鈕之後,主題背景色的動態切換方式也會使用戶感到這些是在自己的操作行為觸發下完成的,控制感很強。
  • 「Material Design」的九大設計原則
    谷歌發布新作業系統「 L Developer Preview」後,也同步推出了可視化語言Material Design,它的設計美學將會融入到谷歌所有的平臺之中,包括Chrome OS和網頁,它也將形成一個統一的外觀,將所有的產品捆綁在一起。
  • 谷歌Material Design設計語言將用於汽車和電視
    更新的Material Design規範談到了如何將這一設計語言用於新的平臺,例如電視機、汽車中控臺,甚至谷歌Cardboard虛擬實境設備。Material Design以動畫為核心設計原則,其目的是在各類平臺和各類尺寸的屏幕上設計優美的應用。對谷歌來說,Material Design是極為大膽的一步,將統一各類平臺上谷歌應用和服務的設計語言。
  • 谷歌Material Design 2曝光
    現在,谷歌可能正在開發其繼任者,採用新顏色、新圖標和新間距。由XDA開發者發現的一個Chromium提交內容揭示了一種叫做「新的谷歌Material Design 2標準」的東西,這個特定的條目描述了應用於Chrome瀏覽器地址欄上方的標籤和選項卡界面。首先是顏色,Material Design 2使用的灰色陰影跟現有的灰色不同,有些偏淺藍色的色調,如下所示。
  • Material Design 有什麼缺點?
    答|百度派 @雙馬尾蘿莉醬谷歌推出了全新的設計語言Material Design。谷歌表示,這種設計語言旨在為行動電話、平板電腦、臺式機和其他平臺提供更為一致和更廣泛的「外觀和感覺」。成功的視覺效果FAB 對 Google design 是個很好的視覺突破。平面設計中的「點線排列」概念,是一個非常靈活和突出的「點」元素,而這種強大元素的界面設計在很難出現之前。
  • material2 發布 7.0.1,Angular 的 Material Design 風格框架
    Angular 的 Material Design 風格框架 material2 發布了 7.0.1 版本,這主要是一個 bug
  • 解讀Material Design引領的UI設計趨勢
    顧名思義,這是一種考慮事物本質的設計,將電子屏幕裡的UI元素看成是一種不存在於現實世界的新的材質,並賦予它物理特性。因此Material Design並不是去擬物化的設計。許多設計師把扁平化與擬物化對立起來,其實兩者並不是對立關係。但我更願意稱Google新的設計語言為抽象化。
  • 谷歌翻譯網站正在進行 Material Design 改造
    據報導,谷歌翻譯網站正在進行 Material Design 改造,這是繼 Gmail、Google News、Google 支持頁面和個人帳戶頁面
  • 谷歌將給 Chrome 做一次全新的 Material Design
    2月份,有消息稱,谷歌將對 Chrome 動一次大手術,使用全新的「Material Design 2」UI設計語言。
  • 【NEXT Collections】關於實踐 Material Design 的三個問題
    這是 Google 自去年 Android 5.0 開始推廣的全新設計語言,而整個設計語言的暗喻基於 material——材料和質感。隨著 Android 5.0 的普及、國內第三方 ROM 的更新和跟進,相信 Material Design 會真正成為國內開發者們所面臨的產品抉擇——我們的應用要不要採用 Material Design?
  • 谷歌Material Design動效篇 - 視覺同盟(VisionUnion.com)
    在Material Design的世界中,動效不僅僅因為美學意義而存才,同時是為了構建有意義的空間關係、凸顯功能、維繫整個系統的一致性。 質量和重量 物理形體具有質量,當受到外力驅使時能夠運動。因此,物體不能突然開始或結束運動。
  • [圖]Google+全面啟用Material Design元素
    據外媒報導,日前,谷歌發布了採用全新UI設計的Google+。
  • 谷歌更新Android版辦公三件套 帶來基於Material Design的新外觀
    外媒報導稱,谷歌已經為 Android 版 Google Docs(文檔)、Slides(演示文稿)、Sheets(電子表格)應用引入了新的設計
  • 分析Google、微軟、蘋果設計規範的異同點
    可以看出material design是旨在解決跨設備界面和體驗的統一,讓Android設備的界面設計不在是割裂、碎片化。material design 介紹結合material design由來的原因再看其內容從圖形、動效到基礎控制項,明顯能分析出material design更希望通過規範去解決Android平臺設計碎片化的問題,保證設計風格的一致性。所以在規範的詳細描述中,不論是界面還是控制項都給出詳細的尺寸規範,希望設計師們遵循這些規範,從而保證設計的一致性。
  • Google正在為搜索功能測試新的Material Design布局
    Reddit用戶發現,谷歌目前正在嘗試為其搜尋引擎服務採用Material Design(材料設計)布局版本,谷歌官網可能會在未來的幾個月內進行改版
  • 谷歌推出AllWhite視覺風格,這是MaterialDesign語言的新變化嗎?
    繼上次谷歌發布新版的Material Design設計規範後,近期又流出一個關於Material Design改版的視頻,且視頻裡採用了一種稱為"All-White"的設計語言,展示的原型包括了Gmail, Google Photos, Google Trips、Google Drive等。