想知道什么是 Material Design?有这十款应用就够了

想知道什么是 Material Design?有这十款应用就够了

编者注:当我们被国产手机纷繁复杂的 UI 设计和应用交互整得丈二和尚摸不着头脑之时,或许已经有人开始想念原生设计了。接下来,给诸位推荐的几款应用都是绝佳的 Material Design 的设计范本。赶紧下载这些应用,领略下「什么才是 Material Design」吧!

本文编译自 Android Authority,图片来源于网络。

在 2014 年之时,Material Design 首次亮相,它改变了 Android 设备的外观和交互方式。这套设计语言源于 Google 自身,它的特点是将抽象图层,美观的过场动画,高反差的色调以及直觉的物理交互组合在一起。

如果正确把握这套设计语言,Material Design 就是清新,简洁和直观的象征。此外,它也给予了 Android 设备统一,协调的体验。在这篇文章里,我们将会看看 10 个不错的 Material Design 案例。无论你是一名寻找 UI 设计灵感的开发者,还是想给自己的手机装满简洁干脆应用的用户,你一定能够从这里面寻找到灵感。

Matrand

Matrand 也许只是一个随机数生成器,但是它出色的界面将自己从其他的同类应用中拔高了不少。

2016-01-19 at 下午4.15.png

我们中的大多数并没有生成随机数的需求,但这并不妨碍我们欣赏这款应用的设计。这是一款极简抽象画风的应用,内部有大量留白和白绿色的组合。色子外观的 icon 非常适合来告诉用户这是一款什么样的应用。点击这个图标,驱动色子转动以生成随机数。

Phonograph Music Player

如它的名字一般,它和 Google Music 一样都是音乐播放器,但它在抽象设计上似乎要比后者要看得更远。

这款应用将所有的 Material Design 元素收纳进一个小而扁平的图标里,随着用户点按而移动的交互界面——干净而迅速。

播放器.png

既然这是一款音乐应用,如果你有很多带有封面图片的音乐专辑,那么播放器上的图片看上去一定特别棒。如果你不喜欢它绿色的背景,你可以更换——主色和配色都可以。

Google Calendar

如果要找 Material Design 的身影,那么从 Google 官方应用中寻找是再正常不过的选择了。毕竟引入这套设计语言的是 Google 自己,而其中最符合这个设计的也许要属 Google Calendar——它集我们喜爱的所有新元素于一身。

对于初学者而言,Google 终于摆脱大多数日历应用所采用的传统的拟物设计风格,使用抽象的颜色图层作为实体计划表。我们已经不再被纸质的日程表所束缚了,那么为什么还要局限在日历拟物化的设计呢?

0dbd5632664259.5693aeb20ec88.png

Google 的日历提供给你的是一个垂直的图层,并且将目前的日子放在页面的顶层。通过这样的方式,你只能看见即将到来的日子和事件,没有任何事件的日子将会被折叠起来。这种方式使得同一屏幕的时间线上能容纳更多事件,并且只展示给你有价值的日程。

交互层面的这一小点变化同时也使得用户处于体验的中心——UI 是为了用户方便而设计的。再加上一些滚动视差,你拥有了一款美观的应用。

Google+

Google+ 是另一款 Google 奠定自己设计原则的应用。无论是应用还是网页端,它们都通过将一张大图居中放在可以滚动的交互界面上,获得了不错的外观。贯穿整个应用的红白配色,单色图标,,美观的动画和滚动的交互方式(圆形的个人资料图标看上去棒极了)。

Google +.png

在用户数量上面,Google+ 相较其他的社交网络要少很多,但它在某些方面却是 Facebook 难以企及的。

Bing Bong

Bing Bong 是 Nickervision Studios 为数不多的一款游戏,它从 Google Material Design 里汲取了很多设计元素。这个开发者的其他游戏还包括 Side Swip 和 Pivot,并且每一款外观都相似——采用扁平的几何图案和高反差的背景。简单的玩法对应的是简单的设计,且这三款游戏都能单手把玩。而 Bing Bong 是这三者之中最让人上瘾的。

unnamed.png

Material Design 被应用在游戏上正好证明了 Google 的这套设计可以被用在各种应用之上。这也展示了并不是每一种小众的应用都必须是像素设计。要想从各种应用中脱颖而出,选择 Material Design 的设计风格是一种个性的方法

Material.cmiscm

它并不是一款应用,而是在一个网站——实际上,它都算不上一个网页,但它却完美地展示了Material Design「交互方式」的基本原则。

网站.png

它有点像是奇怪的 UI 设计博物馆,当然它看上去很惊艳。同时,它也集各种优秀的设计元素于一身。绝对值得一看。

Headspace

一款冥想类的应用拥有 Material Design 真是再合适不过了,这也许是在 Play Store 中,Headspace 有着最简洁图标的原因吧(图标为:在白色的背景中,单独的一个橙色的小点)。

headspace_iphone_best_apps_screens.jpg

进入应用中之后,它延续了灰白的背景和橙色的形状,你可以从下往上地滑动区域。应用中装饰用的大块卡通画也有些许 Material Design 的感觉。

Evernote

Evernote 经常因为采用 Material Design 而受到表扬是有原因的。这款应用中贯穿着强烈而统一的颜色,而且功能设计上也很不错。图标很清楚有效地表明了是记文字功能,手写功能还是拍照笔记功能。

evernote.jpg

「大象」的图标简洁而优雅,无论是在哪一个客户端上,这款应用都是经过深思熟虑地设计并实现的。

Microsoft Health

微软在 Windows 上有自己「Metro UI」的设计,但在 Android 却很好地运用了 Material Design 这个设计。Microsoft Health 实际上是 Play Store 里不错的一个范本。

这款应用是用来同步 Microsoft Band 记录的数据的。同步之后,数据被简洁地展示在一个垂直的表格里,表格的背景是标准的「微软蓝」,而栏目中白色图标代表的是你的运动情况。

screen322x572.jpeg

无论点开哪一个栏目,它都能展开并显示你的数据状态。这套 UI 很适合浏览总体的运动情况,然后决定是否再进行更多的运动。这是一款好的应用设计的特点。

Nova Launcher

仅仅在以上这些应用中见到 Material Design 还是不过瘾?厌倦了 Galaxy 上的 TouchWiz UI?Nova 桌面给予你的主页一套与原生应用一致的外表,同时兼具个性化的功能,并且非常稳定和轻快。它也引进了一些美观的过场动画。

nova-launcher-4-1.jpeg

实际上,Nova 可以说是比 Google Now Launcher 要更好地融入了 Material Design 的元素——比如,图标更小,更多的自定义选项(如 Google 没有提供的旋转选项)。Google 在自己的领域被打败了。

再深入地探索,你也许想要给那些不协调的图标换个外观。Urmun 图标包是一个不错的选择,因为它完全符合「Material Design 图标」的定义。当然,这样的图标也需要同样出色的壁纸来搭配——比如 Facets。

总结

如果你想看到更多的案例,倒是可以去 Twitter 上关注 MaterialUp,它发布了很多不错的案例。

在 Play Store 里,从来缺少优秀的 Material Design 的设计案例,新手设计师可以从中学到很多。其他的优秀案例还有 IF,Google Keep,Citymapper,Stitcher,甚至是 Play Store 本身。那么问题来了,你认为哪一款应用最具 Material Design 的神韵呢?

栏目二维码
Android 设计Material DesignAndroid
关注极客公园公众号
反馈