[B·G – 2] New Chrome UI Layout & Gmail

都是这几天的新闻,对于下一代 Material Design 试图管中窥豹。

New Chrome UI Layout

忘记哪天早上打开新闻流一看,Windows版的Chrome Canary 在Flags中已经加入了Material Design Refresh。虽然Mac版Flags里也有相关选项,但是没有实装。

选择了Refresh后并无明显改变
选择了Refresh后并无明显改变

顶部标签页的体验一直是Chrome迭代的重要角色之一。像上图UI Layout选项中,除了Refresh,之前就已经有普通模式,触摸模式以及两种兼有的混合模式。这次Refresh选项的加入,很难不让人联想到早有传闻的Material Design 2,但从视觉第一感受上来说,不放到Chrome这个环境里真的很难联系到一起。

顶部整体都变得更加「圆润」和宽阔了。由于Windows中像素密度惨不忍睹,所以从截图不是很方便的能看出具体布局尺寸。我在Sketch里试了试,感觉应该是32px的高度带有8px的圆角(100%缩放,下文数据均如此),这比之前的普通模式多了4px。整体的头部变为48px,多了整整12px。如下图——

其次是由梯形Tab变为更普遍的的矩形,也是大多数人都注意到的最明显一点,不难想象其好处,比如网页标题的展示起码可以多几个字母露出。在多标签页表现上则没有多少突出的地方——

依旧是三种状态:未浏览,即将浏览(鼠标经过),正在浏览(focus)
依旧是三种状态:未浏览,即将浏览(鼠标经过),正在浏览(focus)

不如说,没有之前斜切线的前后空间效果明显,现在没有了描边基本是依靠颜色区分了,我可不指望在标签海里靠底部两边的8px弧分割。但原来的梯形Tab也有一点要说的是,这个梯形,或者说不规则图形只存在于Chrome中,相当特异化。新版的这个与早期的Firefox类似,现在的FF Quantum标签也没有用到梯形而是正经矩形,但是那里是用的反色进行区分——

新Chrome的颜色区分虽然也有一定辨识度,但是弱化了一点。

说回这个地址栏所在部分,高度为36px,没变。Icons的区域也是24x24px,也没变,只是圆角又变为8px了(这次的8px基本和截图吻合,图为没勾选smooth corners效果)。然而你以为只有8px就完事了吗。看看右边的地址栏——16px——正正经经的圆角矩形,完全抛弃了之前「清晰、尖锐」的设计策略。之前的2px都是什么呢?有人说这是原来的圆形FAB的蝴蝶效应,也有人说是iOS11所带来的圆角与层次在视觉更明显的地位提升……想起之前Google首页搜索框为Android和iOS适配了两种风格,左右Design System的权利太多了,我不禁再一次产生了恐惧感,这背后的故事还是等官方Blog来介绍吧。

还有一张对比图,可以感受一下
还有一张对比图,可以感受一下

其实我还是挺期待 Material Design 的,所谓设计趋势其实就是一股浪潮,而非线性的发展改变。说是这么说,最后我还要吐槽一个令我非常不满意的地方就是「新建标签页」跑到了最左面的固定区域。

  • 这对我以及像我一样的Desktop用户使用习惯产生了重大挑战。
  • 多标签页下,如果你要关闭一个最右边的标签页再新建一个标签页,鼠标又要滑到最左边。说触摸设备体验我都嫌手腕累;说是移动设备体验强行搬到 Desktop 上的话,还是有些相似之处,只是我对这种「歧视」一直嗤之以鼻。

New Gmail

目前新Gmail已经实装了——

  • 去掉了众多已读邮件外无意义的灰色色块。
  • 去掉了繁琐的灰色线条。
  • 图标可交互区域变大。
  • 增加了四种邮件列表的交互。
  • 「写邮件」的按钮变得前所未有的大。
  • 增加需求Gsuit配合的右栏,新的并且独立的Tasks设计。
  • 万年的Arial字体font-family里增加了Roboto,RobotoDraft,Helvetica,我表示一脸???
  • 左栏增加了item图标并且可收起,增加了小屏用户展示邮件区域面积。G+那边收了那么多年了,这边早该收了。类似的交互在微软的Fluent Design也能见到。
  • 其他偏功能向的东西在 https://blog.google/products/gmail/stay-composed-heres-quick-rundown-new-gmail/ 里说的挺具体的了,不在赘述。

其实并没有多大的产品上更新(作为一个inbox user来讲),主要是UI上的易用,大多元素位置甚至位置都没有变动,只是变了个skin。有几个地方我注意了一下,比如——

图为右栏增加Tasks的菜单,这里border-radius也变为了8px,还有邮件底下快回复邮件那里也是8px的圆角……可能我比较守旧(/新?) ,一时无法接受……回归产品上来说,Gsuit虽然一直在不断推进,但是现在依旧没有和Gmail整合,虽然这两者之间的交集有很多区域,但是工程师说这不像是merge代码那么简单,也就是说在做了但是还没完成(via twitter),但是我暂时对Gsuit不怎么感冒,连Keep也许久未用。

如果想从这两者之间看到Material Design 2的什么玄机的话,看来还需时日。


Invision Studio 也私下用了几个星期了,碍于保密协议以及懒癌其实没什么太想说的,当然懒癌也不是平白无故的产生的,IS对于整合高保真设计带到了新高度(而且是免费的!)。但说实在的,功能上其实没有多些惊喜,并不是说功能匮乏,只是满足了期待而已(其实有稍稍超出期待)。一这么想,思维就产生了惰性……至于酷炫的图,怎么样都好了吧,以后会尽量在IS里试试演示交互的。

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  更改 )

Google+ photo

You are commenting using your Google+ account. Log Out /  更改 )

Twitter picture

You are commenting using your Twitter account. Log Out /  更改 )

Facebook photo

You are commenting using your Facebook account. Log Out /  更改 )

w

Connecting to %s