解讀Material Design引領的UI設計趨勢

2021-01-08 雷鋒網

本文作者:輝達,來自阿里媽媽MUX團隊。經授權轉載到雷鋒網(公眾號:雷鋒網)。

兩個月前,Google I/O大會發布了Android L並推出Material Design,重新統一了Google的設計語言,確立了未來Google的設計方向。那麼,什麼是Material Design?我簡單地將它翻譯成「本質設計」。顧名思義,這是一種考慮事物本質的設計,將電子屏幕裡的UI元素看成是一種不存在於現實世界的新的材質,並賦予它物理特性。因此Material Design並不是去擬物化的設計。許多設計師把扁平化與擬物化對立起來,其實兩者並不是對立關係。但我更願意稱Google新的設計語言為抽象化。

無論是蘋果的設計語言,還是Google的設計語言,乃至於Windows的Modern UI 和Facebook的Paper設計語言,大方向都是一致的,而在細節上卻分道揚鑣。蘋果與Google幾乎壟斷了行動裝置的作業系統,因此我們談談從新發布的Material Design中看看有哪些無線設備的設計趨勢。

1.紙的形態模擬

前言已提到Material Design並不是一種去擬物的設計,也不是一種強調擬物的設計。我們知道電子屏幕是完全平面化的,不像現實當中的物體是3D的, 。一本書裡每一頁紙之間的空間關係是很清楚的,但電子屏幕的所以物體都在一個平面上。雖然電子屏幕沒有空間感,但信息內容是有空間層級的關係。而Material Design的解決方式就是把現實世界中紙張的特性挪到電子屏幕裡,把信息內容呈現在這個虛擬的紙上,紙(信息內容)跟紙之間有上下層級關係,用投影模擬紙張的空間感。Material Design的投影並不是過去我們常用的使用圖片或者樣式代碼實現的投影,而是系統根據紙張層級所在位置實時渲染的,投影會隨著紙張的空間關係而改變大小。

Google幾年前推行的Card設計就是模擬紙張物理形態的一種設計方式,但Material Design把它提升到了系統信息架構層面的高度。

另外,iOS的模糊效果從本質上來說與Material Design的紙張設計要解決的問題是同樣的。通過模擬景深的效果來表達內容信息的層級關係。

2. 轉場動畫

過去我們的頁面只有X與Y軸,打開一個新的頁面則是生硬地直接跳轉到新的頁面,並沒有點出頁面的空間層級關係。而iOS7與Material則強調Z軸,即頁面之間的空間層級關係。iOS裡打開一個app,頁面將從你點擊的app圖標為中心點擴散出來,同樣的設計在Android L上也隨處可見。通過轉場動畫告訴我們,這個頁面從哪裡來,到哪裡去,在整個APP或者系統裡的空間位置是什麼。另外,不僅僅是頁面層級的動畫過渡,對象操作也伴隨著動畫過渡,從動畫裡能感受到操作的過程變化。例如刪除時,垃圾桶圖標會有一個傾倒的動畫,或者通過指示條的旋轉告訴你刪除的過程。另一方面,過渡動畫賦予了界面控制項一種物理特性,在空間被拉伸、回彈時模仿了橡皮筋的物理特性。值得一提的是,在轉場動畫的設計上,Facebooke Paper的非常突出。

3.icon動畫

交互動畫在一些app裡已經大行其道,特別是Facebook Paper的動畫讓人印象深刻。在以後,交互動畫將成為標配,隨之而來,更多設計師把目標轉移到icon上來。Icon主要分為入口功能和操作功能,操作功能的icon在完成點擊操作之後,通常會轉為對應的另外一種形態。如「返回」與「菜單,」「選擇」與「未選擇」,「收藏」與「已收藏」「點讚」與「取消點讚」的狀態之間切換。現在的設計裡,icon在兩種狀態之間的切換通常顯得生硬,icon動畫將使得點擊之後的反饋更佳強烈,並且讓界面活起來,性感起來。

4.大面積色塊action bar

Material Design設計語言讓人眼前一亮的除了豐富的交互動畫外,還有大面積使用了鮮豔的色塊。過去的Android讓人覺得冰冷科技感,讓人有一種距離感。而新的設計採用了與過去相反的做法,在系統裡大面積使用色塊,用色塊來突出主要內容和標題,讓界面的主次感更佳突出,也讓原本灰黑色為主的界面擁有了時尚和活力。色塊的顏色選擇多使用飽和度高、明度適中的顏色,整體擁有比較強烈的視覺衝擊,但並不會太刺眼。Action bar也同樣從過去的灰黑顏色改為彩色,並且讓狀態欄與之融為一體,這點與iOS7的設計非常相似。

5.FAB 按鈕(Fixed Action Button)

在Google的宣傳片裡,最引人注目的新玩意,就是這個淘氣的圓形小按鈕了。 從宣傳片裡來看,這個按鈕的功能並不局限於「新建」「播放」「收藏」「更多」等功能。它於整體界面的配色形成比較大的反差,因此會讓這個按鈕在界面裡顯得非常耀眼,從這樣的設計來看,這個按鈕所背負的任務將會是整個界面的主要操作。雖然有點類似與Path裡的「+」按鈕,但由於iOS系統本身並沒有這樣的設計,這將會成為最區別於iOS的一種互動設計,對互動設計師和產品經理來說都可能會成為一種挑戰。

6.無邊框按鈕

在iOS7的設計裡,我們已經看到了這樣的影子。最典型的便是「返回」按鈕只有箭頭和文案,去掉了原本的按鈕質感。Material Design的action bar也同樣採用了這樣的設計,直接用icon來表達按鈕功能。尤其是Material的鍵盤設計風格,最早對鍵盤風格進行極簡設計的是微軟的Windows Phone,Android和iOS相繼跟進。而這次Material走得更極端,把鍵盤的按鈕邊框全部去掉,只保留了英文字母的按鈕。我們不能說這樣的設計一定是好的,這樣的設計可能讓用戶對點擊的精準度無法更快地判斷,缺乏安全感。好處是在屏幕不大的手機上,去掉邊框的擁擠感會給字母更大的空間。

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

7.聚焦大圖

一張與屏幕等寬,豎方向佔據半個屏幕左右的大圖,去掉action bar,只保留返回按鈕的設計,在一兩年前十分流行的summly應用上就已經非常火了。後續也有一些應用跟進這樣的設計(例如淘寶),但並沒有大面積流行起來。Material Design很大膽地使用了這樣的設計。在Google的引導下,這樣的設計風格將很有可能風靡起來。

原文:Material Design引領的設計趨勢

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

相關焦點

  • 達內ui設計培訓院校
    學Ui去哪個培訓機構好 當ui設計師還有前途嗎?答案是有的。在網際網路時代發展迅猛的影響下,尤其是電子商務領域和科技類公司發展更為迅速,他們的網頁,電子產品,軟體都在不斷地更新,這時就需要大量ui設計師不斷地為他們的新產品設計界面,這就釋放出急需ui設計人才的需求。
  • 60個設計相關網站,設計師必備神器推薦!
    靈感對於設計師來說,像沙漠中的綠洲,對設計起著非常決定性的作用。靈感本身就屬於很感性的事物,來源非常隱性,是從事設計行業必不可少的。經常瀏覽各種設計網站,儲備足夠多的設計案例,能更好的激發設計師在創作過程中的設計靈感。
  • UI設計師必備的6個配色網站
    對於程式設計師來說,UI設計我們有必要懂嗎,答案是肯定的,不管你是後端開發也好,前端那就更不用說,一定要學會有審美的細胞,雖然UI不是我們後端的必須懂的,但我還是建議你知道它的一些常用的配色網站,有時候我們也得自己修改前端代碼,也需要知道顏色的值,今天我給大家分享6個常用的配色網站,對於想從事UI
  • 東城區ui開發培訓學校
    點擊諮詢 就業多選擇廣 網際網路企業不僅薪資高、逼格高、工作自由,而且是未來20年的發展趨勢 點擊諮詢 近幾年國內很多從事手機,軟體,網站,增值服務的機構逐漸增多,而軟體UI
  • 解讀中國家博會未來發展趨勢
    中國對外貿易廣州展覽總公司劉曉敏總經理代表展會承辦方,結合對展覽業和家具展會發展趨勢的解讀,向廣大行業人士分享了中國家博會未來發展理念。讓我們回顧一下精彩的演講內容:擦亮外銷「金字招牌」,優化內銷功能,以設計引領行業趨勢 提到中國家博會(廣州),有行業同仁會不假思索貼上「出口展」的標籤。這充分說明中國家博會外銷做得強,做得深入人心,強大的外銷優勢一直為行業所公認。
  • PP design gallery | 米蘭設計周之國際設計品牌私享
    PP DESIGN GALLERY   泡泡藝廊 ( PP design gallery ) 作為南中國第一家以國際現代設計為焦點的設計藝廊,不僅是設計產品的展示窗口,更是一個面向國際的設計交流平臺,為了讓國內的同行、客戶、設計愛好者以及年輕的學子們能夠與世界同步,接收最近的設計發展及潮流
  • UI設計中配色設計攻略
    最近研究了一下配色方法,今天我就針對UI設計中配色設計攻略進行簡單的說明,希望能幫助到一部分小夥伴。有個有趣的研究成果 —— 「七秒鐘定律」:人們在挑選商品和服務時 ,只需要 7 秒鐘就可以確定是否感興趣,而在這短暫的 7 秒鐘內,色彩的作用佔到了 67%。
  • 不鏽鋼之美 │FREEZING RAIN凝固的雨|尋常設計
    與以往家具作品的設計語境不同,這次的設計沒有既定的設計對象與功能需求,只要求在【觸景】這一主題下衍生出自己的設計。看似沒有限制的設計與設計師而言是更難的,因為他需要去尋找自己的設計出發點。我們需要往更本質的層面去尋找設計的基點,並做一個去功能化,更抽象化的家具。
  • UI設計中卡片化設計的運用方法
    上面所說的形式功能的組織與呈現其實講的是設計排版上的問題,當然對設計師排版功力也有相當的要求。這種排版優化的方法有很多種,我這裡主要圍繞卡片式設計的理論進行深入探討,相信大家對卡片式設計已非常熟悉,雖然已流行了好多年,但是設計形式並不是隨著使用年齡的增長而消失,今天AAA教育郭老師就針對UI設計中卡片化設計的運用方法進行簡單的說明。
  • 最全ui設計圖標解析,圖標概念大揭曉
    咳咳~不好意思跑題了,ui設計圖標並不是這樣的!(冷漠臉)圖片來源於網絡其實正確打開方式是這樣的!ico圖標其實是icon file的縮寫形式,它是基於windows而開發的一個圖形格式,大多用於電腦,手機或其它設備中為各種文件,應用程式或快捷方式設置的一種圖形標誌。想必大家看完以後會對什麼ico圖標有一個初步的印象了。
  • 2019深圳國際精裝住宅展,引領精裝產業化新時代!
    2019深圳國際精裝住宅展,將集合全產業之力,以「連結、共享、引領」為主軸發力,8大主題展區規劃,逐一突破行業精裝難題:   總策展人、中國住宅產業化實戰專家關永康,將對產業鏈上所有版塊從建築規劃、室內及戶型設計、裝配式內裝、工業化部品到智能家居的全產業資源進行連結和「整合」;   特邀策展人、日本生活方式研究學者土谷貞雄,以多年企劃「HOUSEVISION
  • 2020年LOGO的10個設計趨勢
    1.1 描邊卡通樣式帶有粗描邊的卡通樣式 LOGO 是大熱的設計樣式,它也是 2020 年最主要的趨勢之一。這些LOGO 插畫看起來有趣無比,無論大小尺寸看起來都很不錯。1.3 塗鴉卡通風格卡通塗鴉風格也是一個穩健紮實的趨勢。類似記號筆和鉛筆的塗鴉讓 LOGO 更加具有質感。這樣的 LOGO 設計更好地保留了手作感。
  • UI設計中色彩搭配使用技巧
    下面胡老師就跟大家聊聊顏色特徵以UI設計中色彩的使用技巧。它可以用於在設計或品牌中提醒用戶或吸引用戶的注意。AAA教育、在網易雲、可口可樂、肯德基和Adobe的網站上可以找到紅色。UI設計中色彩搭配使用技巧https://www.aaa-cg.com.cn/ui/2832.html?seo1而且最近大家一定聽說了支付寶logo變藍,新的藍色藍的發亮,藍的高調!但是,高飽和度的藍色能讓品牌更有科技感也更專業,無論是線上還是線下,傳播都能更輕易吸引眼球。
  • Material是「材料」,那「他是個讀書的料」英語怎麼說?
    比如說一些做衣服的材料clothing material;或者是建築材料building material;再者只是簡單說原材料raw material;教學資料teaching material;寫作素材writing material。
  • 為什麼82%的人都選擇專業的UI設計培訓班?
    對於一些應屆畢業生和設計愛好者來說,想掌握一技之長,學習UI設計是一個明智的選擇。那麼接下來我們來說說:為什麼82%的人都選擇專業的UI設計培訓班?UI設計培訓班類型有哪幾種?學完UI設計,就業怎麼樣?這些都需要我們提前了解清楚,這樣才能更好的學習UI設計。
  • Ui設計師必備的色彩搭配原則
    Ui設計師必備的色彩搭配原則,即便是零基礎學ui設計的新人也清楚色彩搭配在ui設計中的重要性,合理運用色彩是每個設計師都應必須具備的技能,今天小編將和大家分享一些色彩搭配的原則。
  • 新作|壹閣設計 x 作「NANA」
    Space include material and spiritual.Everything about NaNa is presented in the space.這是與娜娜第二次合作。有了首套房的默契,她更明白自己要的是什麼。作為改善型住房,舒適度被放到首位。
  • 【文章】YANG DESIGN剖析最萌商業趨勢:萌寵家人化
    YANGDESIGN曾受《城市畫報》委託研究和發布了《生活美學商業趨勢報告》,「萌寵家人化」的設計趨勢也是我們觀察的趨勢之一。在少子化和老齡化和減壓的都市浪潮中,城市人內心的空虛逐步蔓延,導致飼養寵物的人群激增。我們的社會經歷了從「養寵物」到「把寵物當作家人」的兩個階段,人們逐漸移情於寵物,給予它們子女般待遇。
  • 5大策略,幫你設計一個體驗優秀的Web端表單
    那麼對設計師來說,如何設計出優秀的表單呢?什麼樣的表單會帶來良好的用戶體驗呢?筆者將為大家介紹幾個設計策略,希望對你有所幫助。表單(不是表格),作為最為常見的頁面模塊,是不是都快忽略它的存在了?回想一下你登陸網站填寫信息、購物填寫地址、填寫調查問卷、修改個人中心信息時……都是在和表單發生互動。對於設計師而言,如何設計出一個體驗優秀的表單?
  • 中國室內牆面裝飾材料未來趨勢解讀活動盛大開幕
    2018年9月11日上午,由中國室內裝飾協會牆紙牆布專業委員會主辦的「中國室內牆面裝飾材料未來趨勢解讀」活動在上海國際會議中心正式拉開帷幕。新浪家居作為國內家居行業最專業的主流媒體,參加了本次活動並進行報導。