【NEXT Collections】關於實踐 Material Design 的三個問題

2020-11-25 36kr

這篇文章是來自 UC 瀏覽器產品經理、極簡匯率產品設計師郎啟旭的約稿。也是 NEXT Collections 系列的第一篇。

NEXT Collections 專欄系列是 NEXT 產品集的補充和縱深;不僅提供解決某一類需求痛點、反映某一趨勢的產品合集,並針對合集進行專業的探討。

郎啟旭在「優秀的 Material Design 產品」中推薦了 30 多枚優秀的 Material Design 產品,感興趣的可以移步產品集參與討論。

以下,華麗麗進入正文:

說起 Material Design,相信不用介紹太多。這是 Google 自去年 Android 5.0 開始推廣的全新設計語言,而整個設計語言的暗喻基於 material——材料和質感。隨著 Android 5.0 的普及、國內第三方 ROM 的更新和跟進,相信 Material Design 會真正成為國內開發者們所面臨的產品抉擇——我們的應用要不要採用 Material Design?要想清楚這個決定,那 Material Design 是什麼、為什麼要採用 Material Design 以及在自己的產品中怎樣實踐 Material Design 會成為首先要回答的三個問題。

Material Design 是什麼?

這裡不再贅述,Material Design 的官方設計文檔就是最好的答案。其中,理解 Material Design 最核心的是要理解 material 的隱喻和特性:空間層級、陰影、質感、表面和觸摸反應。另外,知乎上也有相關討論可以一看。

為什麼要採用 Material Design?

關於這個問題的答案,無外乎內外兩個角度。

從產品自身來說,如果是垂(yong)直(hu)類(shao) 的應用、需要以設計作為突破點、用戶群偏年輕又或者是一款全新產品,加之你產品的設計師們對 Material Design 有理解和認同,那麼採用 Material Design 會無比正確。它會讓你應用的界面在 Android 上第一次擁有完整、自洽和顏值頗高的視覺和體驗,比如我們就自認為極簡匯率 for Android 的界面其實比 iPhone 版還要漂亮。而如果你的應用擁有大量用戶(例如超過一千萬日活)且用戶群體複雜(既有學生也有老人),那對於採用 Material Design,你則需要慎重考慮。原因很簡單,Material Design 目前來說還屬於一個早期(不成熟)的探索性草案:很多交互過於高級複雜(比如 drawer 層級太深)、連Google 自己對某些設計的實踐都常常衝突,以及 Material Design 濃濃的「邏輯理性」都可能會讓嚴重依賴感性和直覺的普通中國用戶產生使用上的困惑和障礙。

而從外部環境來說,無論自身完成度如何,在 Google 的力推之下,Material Design 都會成為 Android 生態中的「趨勢」和「風潮」。如果你從營銷、口碑角度去考慮,那麼越早採用 Material Design,你的收益會越大。比如更多的曝光——應用商店和媒體會更優先推薦採用 Material Design 的應用,或者更高的口碑——極客用戶會對你的應用產生好感和喜愛,進而主動傳播你的產品。

所以,你的應用是否要採用 Material Design?這其實不是一個設計決策,而是一個產品決策。這更多需要你根據你自己產品的實際情況、目標人群、團隊、營銷推廣等設計之外的角度考量,或者,還得受限於老闆(產品決策者)的品位。

如何在自己的產品中實踐 Materail Design?

這個問題最好的答案就是「Material Design 產品集」中提到的 30 多款應用,歡迎大家補充,我也會持續更新。

這裡面有一開始就採用 Material Design 的全新應用(例如 Today Calendar),也有採用 Material Design 進行改版的成熟應用(比如 Evernote)。所以,最好的學習就是琢磨這些已經匯集了大量產品經理、設計師和工程師心血的現有產品。

在我看來,這些應用所體現的是兩種不同的產品策略:一種是不改原有交互和邏輯、只引入 Material Design 部分顯著特性或元素的視覺升級,而另一種則是真正從 material 出發的 Material Design。

Material 式視覺升級一般會這樣做:兼容透明狀態欄(Translucent Status Bar),引入 FAB(Floating Action Button),引入 Material Color,將字體改為 Roboto 或思源黑體,更改 drawer 視覺樣式(浮動遮蓋)等等。總之,儘量不改動原有交互方式和層級邏輯,只做視覺樣式上的升級適配,以最低成本讓應用看起來像 Material Design。

而真正從 material(材質)開始思考的 Material Design 是怎樣?很遺憾,除了 Google 自家的少數應用和原生 Android 5.0 的內置應用,目前還沒有真正意義上的 Material Design 第三方應用出現。這裡面的主要原因是 Android 5.0 的普及率不高。大部分目前的 Material Design 應用其實都要運行在 4.x 系統上,導致開發者基本上不能依賴 Material Design 的原生特性,需要考慮樣式上的向下兼容從而無法完整落地 Material Design 的設計。另一方面,現階段大家對 Material Design 的理解都還尚屬粗淺,要做到整個應用完整符合Material Design 設計的原點——材質和空間層級,很難且成本很高(例如這個問題)。

最後

Material Design 的出現,是 Google 第一次對跨平臺產品設計提出的綱領性文件。即便目前還不夠成熟完整,但我們需要留意的是:這是繼蘋果的《iOS 人機互動準則》之後,真正具有影響力和獨特性的移動人機互動規範。而從長遠來看,這會讓 Android 生態的體驗更加完善統一。

不過,一個有意思的懸念是:無論是一路追隨 iOS 的 MIUI 和 Flyme、還是堅定擬物 Smartisan OS 和其他林林總總的第三方 ROM 們,對 Material Design 是跟還是不跟?以怎樣的方式融入 Material Design?又或者,是否做一個純正 Material Design 的 ROM 會是一個更為「四兩撥千斤」的選擇?據我所知,一加的 H2OS 正在這麼做。

回到開發者自身,採用 Material Design 的另一大好處——倒是可以讓應用更好地融入到不同風格的第三方 ROM 中。不信?你隨便去下載一款 Material Design 應用,無論你是 MIUI、Flyme 還是 Smartisan OS,應用本身都和不同風格的系統 launcher 產生了令人驚奇的和諧交融,毫不違和。

相關焦點

  • 關於在iOS當中實踐Material Design的訪談
    原文當中關於這位設計師成長經歷和近期項目介紹的內容省去了,脫一層水。小節標題是host的提問。如今,我越來越聚焦於對UI動效在人機互動當中的溝通作用進行探索和實踐。平時,我會試著在其他一些知名的iOS app當中通過Material Design的設計語言來提升交互和視覺體驗,另外也在設計一款自己的旅行社交app。這些對我來說都是絕佳的實踐機會。使用Material Design設計的iOS app當中,你最喜歡哪一個?這個問題蠻難回答的。
  • 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與iOS Human Interface Guidelines對比分析
    本篇分析對比是基於各自官網最新的Material design與iOS Human Interface Guidelines文檔,官方文檔地址將在文末給出,供各位交流學習。MD文檔中共有10個一級目錄,其中動態效果,風格,布局,要素以及模式這5個方面從本質而言都是對軟體的視覺表現效果進行約束。例如動態效果中,文檔對material變形的動態效果就作出了嚴格規定,輻射變換適用於圓形至方形而不能用於兩個相似的形狀。而在HIC文檔的11個一級目錄中,僅在「視覺設計」,「bar」,「視圖」與「控制」這四個主題中存在著對軟體的視覺表現效果進行規範。
  • Material Design 有什麼缺點?
    成功的視覺效果FAB 對 Google design 是個很好的視覺突破。平面設計中的「點線排列」概念,是一個非常靈活和突出的「點」元素,而這種強大元素的界面設計在很難出現之前。在標題的第四個截圖中,有一個「只是另一個圖標」的嫌疑。我沒有測試和數據,但還是讓我有點擔心。以上內容由百度派作者提供
  • Python標準庫 collections,你用過嗎?
    : 4, 'd': 2, 'k': 2, 's': 1})數量從大到小排列,獲取前N個元素# most_common(N)數量從大到小排列,獲取前N個元素 counter_test.most_common(3)[('
  • Material是「材料」,那「他是個讀書的料」英語怎麼說?
    或者說有個孩子非常會讀書,其他的鄰居家長可能就會說,他是一個讀書的料!那「他是個讀書的料」英語怎麼說?表達其實和中文一樣的,自己先猜一猜吧!1)「料」用英語怎麼說?首先要注意一下,「料」用英語怎麼說?比如說一些做衣服的材料clothing material;或者是建築材料building material;再者只是簡單說原材料raw material;教學資料teaching material;
  • 扁平化設計與Material Design區別在哪裡?
    兩種相似的設計風格,一個基於另一個。一個是新熱事物,另一個,有人猜測,已經以自己的方式成為一種時尚。一個是自發的——適應設計的趨勢,另一個卻是有目標——專用的設計指導規範。你可能明白了扁平化與Material Design之間的衝突了。
  • 哲學問題的特質——日常生活的「三個問題」與哲學的「三個問題...
    這「三個問題」也經常被幽默化為哲學問題,體現著人們普遍對哲學的「熟知」。哲學家們通常也都會孤獨地追問與此類似的「三個問題」:「我是誰?」「我從哪裡來?」「我要到哪裡去?」那麼,哲學家的「三個問題」與日常生活中人們的「三個問題」到底有什麼區別?不同於常識與「科學」中的人們,哲學家何以成為哲學家?哲學為什麼是哲學?對於大多數人甚至專門從事哲學的人來說,仍然是值得認真思考的問題。
  • Vuetify - 廣受歡迎的 Material Design 風格的開源 UI 框架
    如果接到的產品需求在設計上希望能和國內大部分諸如element ui、ant design之類的中性框架有區別,或者用戶面向國外,我強烈推薦選擇 Vuetify 。使用 vuetify 的admin案例Vuetify 出自國外團隊之手,官網提供中文文檔,翻譯略有些生硬但也不影響理解,需要注意的,無論是設計完善的組件,還是代碼示例,都非常豐富而詳細。
  • Google Material Design 2 曝光:新配色 新圖標
    據悉,XDA 的開發者在 Chromium 的提交內容上發現了一個叫做「新的 Google Material Design 2 標準」的東西,這個特定的條目描述了應用於 Chrome 瀏覽器地址欄上方的標籤和選項卡的 「Material design
  • 「Material Design」的九大設計原則
    人們的需要會隨著時間發展,我們的設計,實踐,以及理念也要隨之提升。我們在自我挑戰,為用戶創造了一個可視化語言,它整合了優秀設計的經典原則和科學與技術的創新。這就是Material Design。」1、材料是個隱喻材料隱喻是合理空間和動作系統的統一理論。谷歌所謂的「材料」是基於觸覺現實,靈感來自於對於紙張和墨水的研究,也加入了想像和魔法的因素。
  • 谷歌Material Design動效篇 - 視覺同盟(VisionUnion.com)
    鼓勵用戶進一步探索應用:那麼,我再點點這裡試試呢在material design中,應用應該具備迅捷反饋的動效,讓用戶充滿期待:•觸控、語音輸入、鍵盤、滑鼠是首要考慮的輸入模式•儘管UI元素是有形的,但是在物理上被限制在了設備屏幕之內。視覺線索和動效提供的線索能夠在用戶和設備之間建立溝通的巧玲,讓用戶確認自己的輸入有效,繼而指引用戶操作。
  • design selective kinase inhibitor---DFG1
    Background:Only 15% of human kinases carry a bulky residue at the DFG-1 (N-terminal to the DFG motif,  known also as xDFG) position, providing an opportunity for the design
  • Design by Science——參觀項目之FCL 未來城市實驗室
    To achieve liveability, design is essential. / Splitting the raw material at AFCL Singapore // 在AFCL分拆原材料 / In Place Science and design are effective only if they serve
  • 可不是「material」
    yolk,[jok] 是「蛋黃」補充:除了作「餡料」之外,filling還有以下三個意思:2)(補牙用的) 填料① I had to have two fillings at the dentist's today.
  • 【首發】原力覺醒 The Force Awakens | TOPOS DESIGN
    關於原力的討論來自於其中的一次頭腦風暴,《星球大戰》的世界觀融合東西方哲學,由此成為了空間的精神內核。我們一致認為,新的企業總部將是一個能讓企業原力覺醒的絕地聖殿。⊙原力的平衡/Balance of the Force道生一,一生二,二生三,三生萬物。
  • 12.3 Italian Design Day 2020 義大利設計日
    >IICPechino北京義大利文化中心-義大利駐華使館文化處為你推送最新活動信息,以及關於義大利的一切在我看來,自然與人類是一體的,我最感興趣的是從設計的角度去理解如何加工那些瞥見未來的場景——關於人們如何生活,培養何種習慣,我們需要的東西,遇到問題時誰能以專業的方式幫助我們……我認為,通過這樣的邏輯,設計的貢獻應幫助這一過程中的各個方面進行協調,為他們提供完整而統一的意義,同時重拾美感和儀式感。