從令人驚艷的「量子紙」1到在導航交互方式上的改弦更張2再到以大面積留白、彩色圖標和圓角控件元素為主的「新面孔」，Material Design 自 2014 年面世至今已經(jīng)進化成為一種成熟且完善的設(shè)計語言，在開發(fā)者和用戶當中的接受程度也早已跳出了 Android 平臺這個小圈子。

盡管如此，Google 依然沒有舍棄「每年一表」的傳統(tǒng)——2019 年的 Material Design Awards 獲獎應(yīng)用昨天剛剛揭曉，和 Lyft 這類國內(nèi)用戶完全體驗不到的應(yīng)用不同，今年獲獎的四款應(yīng)用大部分都算得上是 Play 應(yīng)用商店中的滄海遺珠，值得大家下載把玩。

我們一起來看一看。

Ruff：主題表達獎

從色彩選用、排版設(shè)計到控件形狀，這款 App 借助 Material Theming 設(shè)計理念搭建起了連續(xù)的使用體驗和極具表現(xiàn)力的品牌形象。

Material Theming 是 Google 在 Material Design 2 的重要一環(huán)，和一板一眼地套用現(xiàn)成 Material Design 控件的做法不同，Google 鼓勵開發(fā)者通過對應(yīng)用內(nèi)色彩、排版和界面控件的定制來為應(yīng)用打造獨特的主題風格和品牌辨識度。而在 Google Design 評選團隊看來，Ruff 這款筆記應(yīng)用就是對 Material Theming 理念的最佳實踐，尤其在 bottom sheet（底部菜單）和 back（主界面背景）這兩種設(shè)計控件的運用上。

文本編輯與設(shè)置界面

Ruff 是一款主打隨開隨記體驗的輕量化筆記應(yīng)用，主界面按照層次從高到低依次由筆記存檔按鈕、底部工具欄、筆記存檔區(qū)和文本編輯區(qū)域四大部分構(gòu)成，雖然整體色彩以以灰、白和淺藍為主，但底部控件堆疊仍顯凌亂。

不過 Google 所表彰的 bottom sheet 用法倒是與筆記應(yīng)用的功能結(jié)合得尤為緊密：一般情況下，底部的 bottom sheet 以微縮形態(tài)充當狀態(tài)欄，展示當前筆記內(nèi)容相關(guān)的字、詞數(shù)量統(tǒng)計和閱讀時長預估；因為采用了圓角處理同時有一定的視覺提示，將這個狀態(tài)欄上拉即可呼出筆記存檔（stash）面板，主界面記下的筆記內(nèi)容通過 FAB 懸浮按鈕存檔后都按照時間線順序收納于此，可供二次復制和編輯。

bottom sheet 功能展示

作為一款筆記應(yīng)用，Ruff 在功能上也算是可圈可點。主界面底部的工具欄提供了復制、粘貼、撤銷、重做等常見操作和加粗、斜體、刪除線等常用格式化工具，全局搜索工具放在了工具欄最右側(cè)，一定程度上保證了文本編輯界面視覺效果的干凈。

在主界面向右滑動即可進入應(yīng)用設(shè)置，這里提供了符合 Material Design 設(shè)計規(guī)范的明暗三色主題（支持跟隨時間自動切換）、字體大小和字重調(diào)節(jié)、桌面微件（widget）自定義等等設(shè)置，甚至啟動時鍵盤是否自動開啟、筆記內(nèi)容是否跳轉(zhuǎn)至最后編輯位置這樣的小細節(jié)也可以自行選擇，配合風格統(tǒng)一的等寬字體，Ruff 處處體現(xiàn)著開發(fā)者對于一款速記 App 的用心。

Reflectly：創(chuàng)新交互獎

基于 Material Design 進行延展式、啟發(fā)性的創(chuàng)新設(shè)計。

我們曾在 Flutter 技術(shù)框架的介紹文章中提到過 Reflectly 這款應(yīng)用，也正是因為采用了 Google 的跨平臺技術(shù)開發(fā)，Reflectly 精致的 UI 和靈動的動畫效果在 Google 看來也是基于 Material Design 設(shè)計語言的一種「再創(chuàng)造」。

Reflectly 號稱是「世界上第一款『智能筆記本』」，第一次進入應(yīng)用后，Reflectly 會通過一些基本的問題來幫助我們回顧當天的經(jīng)歷和心情狀態(tài)，這種問答的方式一方面可以讓我們很快熟悉應(yīng)用的基本交互方式，另一方面也為后續(xù)的日記記錄方式搭建起了基礎(chǔ)——在接下來的日記記錄過程中，Reflectly 會借助 AI 對我們此前記下的內(nèi)容進行分析、優(yōu)化，并在后續(xù)記錄過程中提出更加精確、更為個性化的問題。

動畫效果展示

Google 特別強調(diào)了 Reflectly 對于動畫效果的打磨：應(yīng)用中所有界面元素的出現(xiàn)和消失都嚴格遵循物理特性，這個過程中的動畫加速度則圍繞無壓力的整體交互體驗進行了微調(diào)；同時 Reflectly 還很好地利用了 Material Design 中的層級抬升（elevation）效果來體現(xiàn)卡片與背景的層次效果。

借助層級抬升來體現(xiàn)卡片和選項的層次效果

和獨立應(yīng)用 Ruff 的「小而美」路線不同，Reflectly 的整體體驗做到了「大而精」，UI、動效和功能相得益彰，問答形式是否能幫你養(yǎng)成寫日記的好習慣是一回事，一款日記應(yīng)用首先得用起來舒適，這一點 Reflectly 做得非常出色。

Scripts：用戶體驗獎

交互、引導和內(nèi)容的有機整合，構(gòu)建起令人印象深刻的用戶體驗。

和應(yīng)用相關(guān)的獎項，無論是設(shè)計獎還是年度最佳，語言學習類應(yīng)用總是不會缺席的。而 Scripts 出現(xiàn)在這次的 Material Design Awards「決賽圈」，顯然意味著 Google 對「應(yīng)用設(shè)計」這個概念的理解已經(jīng)跳出了 UI 和動效這個層面——畢竟只從外觀設(shè)計出發(fā) Scripts 嚴重「拖后腿」，異形屏、18:9 等屏幕特性均未適配。

臨摹式書寫學習體驗

不過和大部分語言學習應(yīng)用不同，Scripts 圍繞「學習書寫」這個出發(fā)點還是擴展出了相當有趣的用戶體驗：應(yīng)用支持中、日、韓、俄和拉丁語四種語言的書寫學習，對單個文字的書寫學習包含發(fā)音、筆順引導和練習三個步驟，其中練習環(huán)節(jié)分為臨摹和自由書寫兩個階段，書寫過程、出現(xiàn)筆順或書寫錯誤時，應(yīng)用都會給出適當?shù)恼駝臃答?，讓在手機屏幕上書寫這件事多了點「質(zhì)感」，手把手教學的形式也有點把小學語言課程帶到手機屏幕上的感覺。

手把手教你寫漢字

針對部分象形字比較多的語種（比如漢語），Scripts 還會在字形背后提供圖片背景方便理解。但體驗部分之外 Scripts 乏善可陳，免費用戶每種語言每天的書寫學習時間只有 5 分鐘。

Trip.com：最佳通用性

考慮周到、體貼入微，盡可能滿足最廣泛用戶的實際需求。

相較于國內(nèi)主流的旅行服務(wù)平臺，Trip.com 的客戶端應(yīng)用在設(shè)計上可以說是教科書般的參考3。借助合理的功能布局和運用恰到好處的字重縮放（typographic scale）設(shè)計，Trip.com 在支持的 19 種語言下都能呈現(xiàn)出層級分明、井然有序的界面設(shè)計。

Material Design 的字形和字重縮放參考

層次分明的界面布局和俏皮的動畫效果

除此之外，整齊劃一的應(yīng)用內(nèi)圖標風格、豐富的色彩運用、針對重點操作特別制作的反饋動畫，這些小細節(jié)在 Trip.com 干凈、整潔的應(yīng)用界面中就顯得格外出彩了；這里 Google Design 團隊特別強調(diào)了 Trip.com 底部導航的視覺反饋，當特定頁面被選中時，標簽圖標會從線框圖標變?yōu)閷嵭膱D標、文本標簽略微放大、圖標整體色彩也有變化。

底部導航動畫效果

當然，以上只是 Trip.com 應(yīng)用中諸多細節(jié)設(shè)計中的冰山一角，最重要的是，Trips.com 所有的圖標、動畫、字體和色彩設(shè)計都是符合無障礙設(shè)計對比度要求的。

以上便是獲得今年 Material Design Awards 大獎的四款應(yīng)用，不得不說，相比去年的獲獎應(yīng)用今年這四款都有相當不錯的實用性。

原文地址：https://design.google/library/material-design-awards-2019/