从 Google Inbox 窥探 Material Design 的应用 Insights into Material Design from Google Inbox

终于得以安装体验堪称替代 Gmail 的 Google Inbox。从抓屏的几个图,可以深刻感受到 Material Design 的气息。

screenshot-google-inbox-01screenshot-google-inbox-02screenshot-google-inbox-03screenshot-google-inbox-04screenshot-google-inbox-05screenshot-google-inbox-06screenshot-google-inbox-07screenshot-google-inbox-08

黄金分割点

进入 App 的首屏,简洁到了无法再去除任何一个元素的地步。用黄金分割点验证下,果不其然,视觉的重心正好落在 Logo 和 Inbox 之间。底部的 SIGN IN 链接,没有强化成按钮的外观,只用非常浅的灰色线条做间隔和蓝色字体做提示,有突出而未喧宾夺主。

screenshot-google-inbox-insight-01

视觉的主线

手机屏幕很小,如何充分利用每一个空间展现更多的内容,成为对手机 App UI 设计师的挑战。而 Google Inbox 的很多界面却大块的留白,比如菜单图标和文字之间会多出一些空白,而不是紧靠在以图标为中心的矩形边缘。这样做的目的,除了与下一屏(列表页)保持视觉主线位置的一致之外,我个人的理解是,为拼写更长的语言而考虑,法语、俄语、西班牙语、希腊语等的单词较英语会长很多,如果文字过于向左靠齐图标,整屏的左侧就会显得拥挤和沉重,而多出一些间隔,图文分离相对远些,便于识别阅读的同时,视觉上亦达到一定的平衡。

screenshot-google-inbox-insight-03screenshot-google-inbox-insight-02

阴影的层次

从 iOS 绚丽的拟物化设计,到后来走向另一个极端的扁平化设计,Material Design 走在了两者之间,靠扁平化设计近一些的位置。纯粹的扁平化风格,一定程度上让元素之间失去了逻辑上的层次。Google Inbox 中通过阴影来强调时空感:顶部导航的阴影告诉用户这是一级目录,下面提示信息的阴影告诉用户这是浮动于主体内容之上的警示,而每个按时间聚合的邮件区块底部的阴影告诉用户向下是更旧的信息。

screenshot-google-inbox-09screenshot-google-inbox-10

动画的逻辑

动画的运用在 Google Inbox 绝对不是为了酷。当用户要查看详细内容时,屏幕从点击处上下滑动分开,好像撕开一个信封。看完返回时,上下两半屏幕动态返回合并,又回到用户刚刚点击时的位置。这种体验让用户有很好的方位感,功能虽多但 App 的主线始终围绕着 Inbox 里的邮件列表。

Material Design 强调以内容为核心,如无必要,勿增实体。设计的本质回归到内容本身,文字即设计中的元素,围绕文字的设计一定程度上代表了整个 App 的行业特色和格调气质,字体大小、颜色深浅的变化代表了内容的层次级别和主次重要性。留白,给用户足够的视觉上的 comfort zone。阴影,让区块和功能在时间和空间上有了关联。而动画,则成为移动版的“主/详细”页别有洞天的切换方式。

谷歌“本质设计”规范的图标免费下载 Free Material Design Icons

从前段时间谷歌和 Adobe 同时发布近百种语言的免费“思源字体” 我们就应感知到点什么。字体设计得不瘟不火,比通常的系统中文字体要胖有质感,比微软的雅黑要瘦,多些空灵,总之做设计的人不排斥,就是相当不错的了。

noto-free-font.png

谷歌岂止于此?从“本质设计 Material Design” 规范的推广,我们真真切切感受到谷歌要统一和引领新设计趋势的野心。在这个规范中,我们也真真切切感受到谷歌的努力和细节的把控。哪怕一个小小的图标,最好也按照我设计的来。

Material Design Icons 的简介中,我们甚至可以看到 iOS 字样,建议 iOS App 的开发者也来用这套图标:

Today, Google Design are open-sourcing 750 glyphs as part of the Material Design system icons pack. The system icons contain icons commonly used across different apps, such as icons used for media playback, communication, content editing, connectivity, and so on. They’re equally useful when building for the web, Android or iOS.

Action Icons
material-design-icons-action

Device Icons
material-design-icons-device

Image Icons
material-design-icons-image

免费下载地址:https://github.com/google/material-design-icons/releases/download/1.0.0/material-design-icons-1.0.0.zip

是不是感觉有点太国际范儿了,需要找点中国特色的?当然有,从阿里妈妈这里 www.iconfont.cn 免费下载中国系的类“本质设计”的图标吧。虽然有购物车,但不收费。