in UI

从 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。阴影,让区块和功能在时间和空间上有了关联。而动画,则成为移动版的“主/详细”页别有洞天的切换方式。