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

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

我們一起來看一看。

Ruff：主題表達(dá)獎(jiǎng)

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

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

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

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

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

bottom sheet 功能展示

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

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

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

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

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

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

動(dòng)畫效果展示

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

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

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

Scripts：用戶體驗(yàn)獎(jiǎng)

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

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

臨摹式書寫學(xué)習(xí)體驗(yàn)

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

手把手教你寫漢字

針對(duì)部分象形字比較多的語種（比如漢語），Scripts 還會(huì)在字形背后提供圖片背景方便理解。但體驗(yàn)部分之外 Scripts 乏善可陳，免費(fèi)用戶每種語言每天的書寫學(xué)習(xí)時(shí)間只有 5 分鐘。

Trip.com：最佳通用性

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

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

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

層次分明的界面布局和俏皮的動(dòng)畫效果

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

底部導(dǎo)航動(dòng)畫效果

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

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

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