Android 平台的颜值标杆:Material You 应用大赏
2021-10-06 16:37:35 Author: sspai.com(查看原文) 阅读量:35 收藏

Android 平台的颜值标杆:Material You 应用大赏

如果说要罗列出 Android 12 最令人印象深刻的几大变化,Google 基于全新设计语言 Material You 为 Google Pixel 打造的这套新 UI 一定是其中之一。在 Pixel 设备所搭载的 Android 12 中,更换一张壁纸就能让整个系统 UI 焕然一新,从锁屏时间的字体颜色、启动器的图标、搜索框按钮,到通知中心、快速设置面板开关。甚至连摆在桌面的小部件(widget),都能通过适配 Android 12 的 应用动态颜色,根据在桌面上的摆放位置呈现实时背景色效果。

更重要的是,为了不让这套以壁纸取色为核心的个性化定制系统仅仅停留在 Android 系统表面,Google 在努力用 Pixel 机型「打样」的同时,也积极推动着 Material You 在自家应用中的适配。在 Android 12 正式版源码提交至 AOSP 之际,我们为大家整理了目前(截至 2021 年 10 月 6 日)已经适配了 Material You 设计的 Android 应用。

Google 应用

基础通讯三件套

虽然是智能手机的「基础设施」,Google 自家的电话、通讯录和短信应用跟进 Material You 的速度却并不算快,适配程度也可以说是参差不齐。

通讯录中,搜索框、左侧抽屉式导航、右上角视图过滤菜单、应用设置的标题栏等区域都会采用从桌面壁纸提取到的配色作为点缀,Material Design 标志性的 悬浮操作按钮(FAB)在应用动态颜色的同时,形状也从以往的圆形变成了圆角矩形。

而在拨号应用中,拨号键盘收起时右下角的悬浮操作按钮也用上了同样风格的圆角矩形按钮,不同层级悬浮操作按钮也用不同的动态颜色进行了视觉区分;除了同样应用于搜索框背景、高亮选中背景、设置界面背景等区域的动态配色外,拨号应用的 底部导航栏 也通过采用不同动态颜色的图标和背景,营造出了更有层次感的底部导航栏设计。

作为 Google 自家规范适配一直以来的「盲区」1,拨号应用连最为基础的 边到边 适配都没有,浅色主题下顶部状态栏和底部导航栏背景始终为白色,视觉效果令人感到不适。但这里的底部导航栏新样式,和上面提到的动态颜色、圆角矩形悬浮操作按钮一起,构成了 Google 自家应用 Material You 的核心风格。

至于信息应用,截至发稿时,Google 仅对应用主界面右下角的悬浮操作按钮进行了更新,同样是由圆变方,在信息列表中滚动浏览时,悬浮操作按钮会根据滑动方向在扩展形态和精简形态间切换;设置项目得到了重新整理,更加清晰明了。但除此之外信息应用的更新就可以说是乏善可陈了,我们甚至看不到半点动态颜色的影子,无论桌面壁纸如何,应用内均采用蓝色为默认颜色。

日历

同样作为基础应用的 Google 日历在 Material You 适配上做得出色得多:从桌面提取到的动态颜色从主界面、设置标题栏,主、次悬浮操作按钮一直延伸到左侧抽屉式导航和设置,日程视图中的当前日期标记、活动卡片(默认样式)等控件,也都采用了不同取值的动态颜色进行点缀,看上去和谐又不失变化。

更重要的是,Google 日历在桌面小组件中也同样运用了 Material You 动态颜色,视桌面摆放位置的不同,小部件标题栏的颜色也会动态改变。总体来说日历应用算是将新设计诠释得比较到位的适配案例之一。

Chrome

Chrome 在功能和设计上一直以来都可以说是保守而谨慎,在升级到 Chrome 94 及以上版本后,使用 Android 12 的用户应该也看到一些新变化2:主界面的搜索框、地址栏和快速访问标签,浏览网站时的标题栏,多标签页管理界面的标签页边框等界面都通过提取并适配了不同的动态颜色,多标签页管理页面的标签页卡片也采用了更加圆润的圆角设计。

Chrome 94.0.4606.50 开启上述功能标签后的效果

除此之外 Chrome 浏览器几乎就没做太多设计上的适配了,连浏览器设置界面都还是老样子。

计算器

随 Android 12 Beta 5 搭载的新版计算器正式采用了 Material You 设计风格,这款系统小工具的视觉观感也因此得到了巨大的提升。

首先是颜色,通过不同的动态颜色取值,计算器不同区域、不同按键之间在保留层次感的同时也有了对系统整体色彩风格的呼应,如果你将 Android 12 动态颜色的彩蛋小部件添加到桌面并完全展开,会发现计算器主界面基本都是提取的 N1、N2 和 A1、A2 相近色列,全部清除(AC)这种需要谨慎操作的按钮则直接取到了 A3 列进行强调。

除了颜色,计算器按钮由方变圆,计算结果、计算历史区域也通过柔和的圆角边缘和相近色取值进行了区分。

时钟

在 Android 12 Beta 5 中随计算器一起加入 Material You 套餐的还有时钟应用。

虽然时钟应用依然默认采用深色主题且不可更改,但应用内 Material You 适配全面,除了开关、按钮、底部导航图标和选中时的强调背景等区域大量提取、运用了动态颜色外,闹钟在关闭、激活状态下的字重变化,圆角卡片以及大色块圆形按钮的堆叠,都给人以强烈的视觉新鲜感。

另外时钟小组件也同步迎来了更新,除了 3 款不同样式的数字时钟外,此前在 Android 12 亮相视频中圈粉无数的多边形模拟时钟也包含在内,这些组件放置在桌面时依然可以根据摆放位置的不同动态变换颜色。

文件极客

虽然从设计规则上来说文件极客可以说是 Google 自家应用中「打脸」一般的存在3,但这款应用依然跟随 Android 12 进行了 Material You 动态颜色的提取和应用,包括主界面的清理操作按钮、文件浏览界面的弹出菜单、底部导航栏的导航图标和导航图标选中背景等。

不过整体而言文件极客的 Material You 设计适配依然可以用「破碎」二字来形容,除了对 Material Design 设计规范本身的不尊重,应用内还存在着大量跨越多个世代的「糅合」设计,不管是带有阴影的圆角矩形卡片、底部导航栏和右侧快速索引标签还是依然采用 Roboto 而不是 Google Sans 字体的文件浏览菜单,整体视觉风格都给人一种仍在换皮、依然不得 Material Design 精髓的感觉。

Google 播客

作为 Google 第一方的播客应用,Google 播客也在最近的版本中跟进了 Material You 设计风格,通过大面积应用的动态颜色提升应用与系统界面在视觉观感上的一致性。同时也用上了标志性的新式底部导航栏设计。

不过除了动态色彩和新版底部导航栏,Google 播客应用和拨号应用一样也因为底部导航栏「变色」暴露出了没有适配边到边的问题,纯白的导航栏背景看上去具有非常明显的割裂感。另外作为 Google 的第一方播放器应用,我们也期待 Google 接下来能够拿出更多 Material You 播放器设计巧思——比如那个出现在 宣传视频 中、却至今没有任何 app 实装的波浪形进度条。

Google 相册

和上面提到的日历应用类似,Google 相册也可以说是 Material You 适配得比较到位的 Google 应用之一。

除了大量运用的动态颜色、全新样式的底部导航标签外,Google 相册主界面此前已经大量采用的圆角和卡片设计也为其增色不少,应用中的按钮、搜索框等控件也通过相近取色而非阴影的方法来体现层级,浏览相册时,时间分隔文本也采用了类似 Android 12 系统设置那样的大字体标题,兼具视觉效果和分隔效果。

相机、Google Lens

相机应用在 Android 系统中虽然是功能大于设计的存在,但 Material You 的动态颜色依然在其中起到了不俗的点缀效果。

在 Android 12 中,相机取景器底部选中的当前拍摄模式会通过采用动态颜色的标签背景进行提示,取景器中的变焦按钮、安全相册开关以及顶部设置面板也都使用了统一提取到的动态颜色来呈现选中效果。

与相机应用类似的,Google Lens 也已部分采用了 Material You 设计,比如取景框中的取字翻译提示。但底部功能标签依然没有跟进动态颜色适配。

Google Workspace

虽然依然保留了左侧导航抽屉,Google Drive 在可以的地方几乎都用上了从桌面壁纸提取到的动态颜色,导航栏、背景、底部弹出菜单、搜索框等不同界面的层级也通过相近色的变化体现了出来,新版底部导航栏设计和支持动态颜色的桌面小部件自然也没有缺席。

Google Workspace 套件中的其它应用,如 Gmail、文档、表格、幻灯片等,也拥有了较为完整的 Material You 适配,大面积应用的动态颜色、圆角矩形样式的悬浮操作按钮一个不少,Gmail 同时还拥有全新的「四叶草」式动态色彩小部件。

有意思的是 Gmail 应该也是目前唯一一款对 Material You 底部导航栏设计有着不同想法的 Google 应用。如果你在设置中开启了聊天室、Chat 等底部导航标签页面,就会发现 Gmail 的底部导航栏高度相比其它 Google 应用要更矮一点。显然 Gmail 团队认为新版底部导航栏虽然观感上视觉一新了,但屏幕利用率还可以再稍微提高一点。

Keep 笔记

Keep 笔记对 Material You 的适配主要集中在配色和小部件上。

应用内部,搜索框、底部操作栏和底部操作栏上的悬浮操作按钮都换上了新样式和动态颜色,主界面背景和笔记卡片上的标签,则以更浅或更深的相近取色来突出层级,美中不足的是底部操作栏上的圆角矩形悬浮操作按钮采用了阴影而非不同取色的方法来进行强调。

Google Keep 也提供了新版「四叶草」小部件,可根据摆放位置自动变换颜色。

Gboard

越是明显的地方似乎就越容易被忽略,一开始我们甚至忘了将 Gboard 加进这篇文章的提纲里。

在 Android 12 中,Gboard 提供了新的动态颜色主题方案,开启后键盘背景、按键都会采用从壁纸提取到的颜色进行点缀。

Gboard 虽小,却最能体现 Material You 的核心设计理念:根据功能和场景灵活运用不同的几何形状、用色彩对关键操作和按键区域进行强调、用色差体现层级同时尽量避免使用阴影……它应该也算是 Google 应用 Material You 设计的优秀代表之一了。

第三方应用

Sleep as Android

Sleep as Android 是一款比较老牌的睡眠追踪应用,在版本号为 20210910 的测试版中,Sleep as Android 正式适配了 Material You 的动态颜色系统,配合主界面内大量使用的圆角矩形卡片、扩展式悬浮操作按钮以及条理清晰、层次分明的界面与设置项目,我们在 Sleep as Android 完全看不到任何「老牌」的味道。扑面而来的都是新设计的香气。

Tasker

同样老牌的 Tasker 近年来在 Android 新特性适配这件事情上也非常积极。最新版 Tasker 依然保留着大量「牛轧糖」时代的味道,但主界面配色方案却跟进了 Material You。

唯一要吐槽的是 Tasker 在动态颜色选取上似乎有些跳脱,同样一张壁纸,Sleep as Android 采用配色方案明显要比 Takser 好看得多。这其实也反映出了一个问题:Material You 提取到的色彩只是第一步,能否合理使用这些提取到的颜色来为应用颜值加分,还得看应用开发者的实际理解。

DarQ

DarQ 是一款借助 root 权限、为不支持深色主题的应用(比如 Handshaker )强行开启深色界面的小工具。 在 6 月末的 2.0 版本 中,DarQ 就已经加入了对 Material You 色彩系统的支持,经过 7 月初 2.1 版本的小修小补之后,目前它在 Android 12 上的使用体验已经相当完善。

值得一提的是 DarQ 作为一款工具应用,在应用设置的设计上也尽量向 Android 12 的系统设置看齐,顶部标题栏采用了大面积的留白、功能总开关也与系统设置的新样式保持一致,最大程度消弭了第三方工具与系统设置在视觉上的差异。

Inware

Inware 是一款类似 AIDA64 的系统信息检测工具,与 AIDA64 繁冗的设计相比, Inware 的 UI 更加现代一些,用一部分信息量的牺牲换取了更好的易读性。

在最新的 Inware 测试版中,进入主界面右上角的软件设置,在外观菜单中便可以找到一个名为 Use system colors 的开关,将它打开之后就可以让 Inware 的配色方案与系统壁纸匹配。

质感文件

与前文提到的文件极客不同,来自第三方开发者的质感文件一直以来都维持着标准化的 Material Design 风格设计。因此质感文件也是首批适配了 Material You 动态颜色的第三方应用之一,只需在应用设置中开启相关开关,即可解锁完全不同于预置主题方案的全新配色。

不过质感文件除了色彩方案的适配外目前倒是没有太多界面元素和控件上的翻新,这里不妨也期待以下这款小工具的后续更新。

Swift Walls

Android 平台上的第三方壁纸 app 不胜枚举,但像 Swift Walls 这种同时对壁纸浏览、设置和编辑体验都同样重视的壁纸应用并不算多。Swift Walls 在最新版本中不仅适配了 Material You 的动态颜色,还大量采用了符合 Material Design 设计规范的界面控件,应用设置也向 Android 12 系统设置的整体风格看齐,视觉观感和使用体验都很不错。

Infinity for Reddit

与 Twitter 和微博类似,社交网站 Reddit 同样通过开放相关接口的方式,为样式繁多的第三方客户端提供了展示技术和审美的机会。这其中就包括 Infinity for Reddit(下称 Infinity)。

相比 Reddit 官方客户端,Infinity 在没有对主要功能布局进行改动的基础上为 app 添加了许多 Material Design 设计的风味——从 Material Design 2 时代风格的底部操作栏与居中悬浮操作按钮,到 5.0.4 版本中引入的 Material You 动态配色方案。

不过 Infinity 也存在和 Tasker 类似的问题,手动开启 Material You theme 开关后,它会将系统色表中几个饱和度比较高的关键色用作顶栏、底栏和信息卡片的默认背景色,看上去有些「用力过猛」了。不过 Infinity 本身也为这个问题提供了一套相当成熟的解决方案:在启用 Material You 主题开关之后,我们仍然可以手动对应用内几乎每一处颜色进行修改。

Todoist

Google 第一方待办应用 Google Tasks 在更换新图标之余似乎没有跟进 Material You 的迹象,多次荣登少数派首页的知名 GTD 应用 Todoist 则趁机弯道超车,在 v8602 版本中为用户带来了 Material You 动态颜色支持。

值得肯定的是,Todoist 的动态主题色选项也没有放进订阅解锁区域当中,免费版用户在安装最新测试版本后也能进入设置菜单手动打开;不过目前 Todoist 的动态配色方案还没来得及适配深色主题,也无法跨平台同步到其它设备上。

通知滤盒

通知滤盒也是少数派首页的「常客」。作为一款系统通知管理软件,它可以从另外一个角度解决垃圾短信的问题——既然收到垃圾短信是很难避免的,那么不让它们弹通知出来烦人便也曲线救国实现了「管理」的目标。

在最近更新的通知滤盒 v2.1.1 中,开发者为其接入了 Material You 动态配色方案,甚至应用右下角的悬浮操作按钮也如 Google 应用一样改成了圆角矩形样式。

Tachiyomi

作为一款免费、开源的 Android 漫画阅读器,Tachiyomi 一直以来也是 Material Design 的忠实追随者,其众多 分支 也可以说是百花齐放,体现着不同开发者对于 Tachiyomi 在功能和设计上的不同理解。

目前 Tachiyimi 已经支持了 Material You 动态配色方案,一些优秀分支,比如 TachiyomiJ2K 更是适配了 Android 12 的 SplashScreen API,拥有惊艳的开屏动画效果。

小结

在 Google Pixel 的体验中,Material You 仅仅只是 Google 为 Android 12 所设计的视觉和交互体验的一部分:以 Pixel Launcher 为出发点,Google 应用可以根据桌面壁纸套用不同色彩风格的桌面图标;从点击图标启动应用到进入应用完成主界面加载这段时间内,系统会调用 SplashScreen API 带来舒适、自然的闪屏动画效果;进入应用后,基于 Material You 动态色彩的设计则会将壁纸和启动器中那种熟悉的视觉观感延续到应用内部。

从桌面图标到应用内的效果

回顾 Material Design 从发展至今的历程,可以说今年应该是新设计语言在 Android 平台适配速度最快、覆盖面最广的一年。借由形状、色彩和动画都更加活泼多变的 Material You,Google 也将此前宣传的 Material Theming(借助 Material Design 打造品牌辨识度)推向了一个新的高度。至少在今年晚些时候正式开源之前,看见类似本文出现的截图时我们都会马上反应过来——这是 Material You,这是 Google 为 Pixel 系列机型打造的 Android 12 视觉体验。

Material Theming | 图:Google

不过目前我们看到的这套 Material You 适配方案也暴露出了一些问题。

从设计上来说,Material You 在 Google 自家应用中的一些细节依然存在冲突,比如 Android 12 锁屏 PIN 码的大色块圆钮会在按下时变为圆角矩形,但同样采用大色块圆钮设计的计算器却没有采用这种反馈动画,再比如不同 Google 应用的适配程度依然参差不齐,Gmail 团队显然也对 Material You 底栏设计有着不同的看法,在后续更新的版本中对默认的底栏高度进行了微调。

好消息是,虽然这套基于壁纸的取色系统最快也要等到 Android 12.1 才会开源,在此之前 OPPO、三星等厂商也已经跟随 Android 12 进行了底层适配,但在最近放出的 One UI 4 Beta 版本中,三星已经开始回应 Google 的设计思路了(来源)。

One UI 4 beta 2 color theme
One UI 4 中的 Material You 动态色彩适配 | 图:XDA

你如何看待 Material You 和现有 Google 应用中的 Material You 设计,还有哪些适配了 Material You 的好应用本文没有提到?欢迎在评论区留下你的看法。

> 下载 少数派 2.0 客户端、关注 少数派公众号,了解更妙的数字生活 🍃

> 实用、好用的 正版软件,少数派为你呈现 🚀

© 本文著作权归作者所有,并授权少数派独家使用,未经少数派许可,不得转载使用。


文章来源: https://sspai.com/post/69117
如有侵权请联系:admin#unsafe.sh