翻译#7|访问 Chrome – 下

原文地址:Medium

原文作者:Hannah Lee

译者:max

不足和错误始终存在,请多指正,转载请注明出处

阅读上部,传送门在此。


5. 设计没有终点

在跟灰框对视了几个月之后,如果说堆积如山的工作量没有让我退缩,那是扯淡。

带着成功通关《和Bennett Foddy 一起攻克难关》之后的蜜汁自信,我觉得完全可以一人搞定整件case。但我花的精力越多,就越发觉得仅仅通过简单的重构并不能解决问题。

需要审视整个设计流程,来确保现存、未来的UI保持一致。

这里的问题在于:Chrome是一个需要在 Google 规范(账户登录),Material 规范(按钮和图标),本地 UI(如键盘)和 Chrome 品牌元素(如断网时的小恐龙)之间寻求平衡的项目。

因此我向工程师寻求帮助,惊喜的是,他们也很赞成。现存的问题也让他们在 code review 时很头疼,因为平台特性和功能修改意味着潮水般的回滚和不一致。实际上,工程 leader 甚至为止拉人支援我们。

既然有了援军,我们基于代码库,制定了一套共享组件的视觉规范。其他APP“免费”使用的 Material 组件必须需要为 Chrome 定制化,从而满足前面提到的千“框”千面,这些都是白手起家。因此就需要找到一种可拓展的方法来枚举这些差异。

这就是最开始的成果:


v1版切图 — 标记了 UI 中每一种颜色,文本,图标和元素

6. 又快又好

还有好几个月,单纯是在清除。清除沉积多年的冗余设计和技术填坑。既然已经拥有清爽的界面和组件库,终于可以开始大干一场了。

再让我们回到第一章所讲的那个被称为“工具栏”的灰色框吧。

输入框 第二代

工具栏将UI分割成了内容+系统UI。你点击白色输入框,内容显示成灰色背景,同时,引发出下方的另一个灰色框。(是不是有点蒙?)


输入框 第三代

讲到这就得说道说道,为什么我们在幕后绞尽脑汁让 Chrome 能尽可能可以帮助到你。问题是为什么在页面状态转变时,输入框也需要改变大小形状呢?

输入框 第一代 的各种变种

当某些元素跨页面、屏幕出现的时候,你会很难识别或者联想起来。

假使交互在用户使用过程中发生改变,他们会将变化视为信息,并认为待会可能会用到。举个栗子, 如果一张图片转化成一个图标,你会认为需要记住这个图标,以便下次需要再次打开图片。

这无疑增加了理解交互和判断有用信息的的认知成本。

我们去除掉每个视觉上的噪点,来帮助你更快更准确得完成使用 —— 不仅仅只是视觉上的愉悦。

即便只是每个用户节约 1 秒钟,那么大约 2000000 秒或者说 23.14 天可以节约出来了。想想这么多天我们可以用来干嘛!

眼见为实,来看看把文字和图标去除之后的输入框:



再试试,相同的屏幕,把颜色和阴影去除之后:



从0开始,或者我们称之为“白页起家”的过程,意味着每个元素都需要经过考量。包括这个在UI头上坐了这么久的条形框:


状态栏

幸运的是,我们认识状态栏的开发者,并从安卓团队获得很多帮助,来使状态栏根据内容改变颜色。(这六个月的故事足够再写一篇了)

不过先聚焦到另一位二代框的“土著”:图标。这几个图标还关联着另外的两个低调的框:

  • “边界框”:描述了图形资源的边界。


低调的边界框

  • “触控框”:描述了触控操作的边界。


低调的触控框

由于 “三点菜单” 图标过于瘦长,以至于触控框非常小。但仅仅将触控区域放大,只会使视觉失衡,让图标之间的间隙很不和谐。

所以只能折中,甚至有那么丢丢违背了 Material 守则,来使其更容易被点击的同时,视觉上也平衡。

没错,差不多花了整周时间专攻“两框”。会有人注意到区别吗?大部分不会。值得这么做吗?点一万个赞同。

7. 框中之王

在遍历UI里的文本、颜色和图标之后,终于建立起自信,开始准备攻克omnibox了。

我们希望能够潜移默化地强调 Chrome 的品牌 —— 考虑到 logo 在交互里很少露脸,这还很有挑战性的。我尝试了几十种看起来不错的方案,然而都行不通,因为都太缺乏内涵。

于是我回溯了品牌历史,再好好审视我们的 logo 。最先注意到的,是小写字母 “c”。



它代表了品牌不拘小节和随行的调性,所以找到友好随和的形状就很重要。同时还和 Google 的 logo 共用了同样四种颜色彰显传承。实际上,安卓,Google 和 Chrome 的 logo 都拥有环形元素。

圆环。



圆形是很自然的图形,不同于矩形。所以圆形在视觉识别上的负担更小。圆形还让我想到在伦敦小住的两年时光。

在地铁将站名用矩形标志展示的时候,地铁乘客很难分清站名和广告牌。所以在1912年,地铁方面决定在矩形后面加上红色圆环以便辨认。Frank Pick 之后将其加入到现代知名 logo 系列中。

图片来自 the London Transport Museum

这对于我和omnibox来说,简直是醍醐灌顶。

不仅应该告诉你在哪,还应该帮助你进入到下一步。

再好好审视 logo ,它的外形启发到了我:



这不就是我们需要的外形么。

它阐明了我们的调性,也暗示了不仅仅是个“搜索框”或者“地址栏”。而是一个全新、友好的新产品。



就好像鼠标的使用,引起了文本框的形状革命,我们需要新的元素来适配移动端的输入设备——手指。这个外形也顺应了这点。

机缘巧合,有次团建外出参加了 Frank Stella 在 de Young 博物馆的一次展览。Stella 使用曲线形状的画布,并非传统矩形画布。跟我一样,他也很喜欢赛车,在他的其中一幅画作中,还使用了类似的形状去体现速度感 —— 这也是 Chrome 的核心要素之一。

我脑中充斥着摩登主义情怀,觉得传统艺术形式正在变得不再主流且对于当前的设计显得过时。因此给我们新的视觉设计组取名“摩登”。

接着我们遍历了几千种设计方案。



所有的 Sketch 画板

最开始,我依然遵循原先的移动设计原则,用1 dp 描边是合理的选择。但在落地阶段,面对海量的白色网址和搜索框,描边太不显眼了。同样,描边在无痕浏览模式下不适用,也很难和空心图标的粗线相平衡。



我们中一位设计师真的就把它当做一个线框。

Material 投射阴影同样不适用,因为他并没有解决我们原先看起来只是个“搜索框”的问题。同时,投射阴影还需额外 4dp 的线条,看起来太厚重,布局也失衡了。

我们甚至尝试把框去掉,然而其他元素看起来就像是胡乱排列,而且类似将 URL 居中这样的改动会造成巨大的学习成本。



事实上,同事也在努力让 URL 显得简洁,此时 Material 2 也新鲜出炉。它带来了更丰富的彩色字体,给了轮廓更多的活力。


之前


之后

事实也证明,保持一致的外形,让代码更加简洁,仅需少数过渡动画 —— 设计和效率的完美结合。

终于到了测试的时候了。数千名用户,几个月的测试和可用性研究,以及老天保佑。再对比初版的设计,它被评价为更加的“友好”,“创新”,还很“智能”,同时也不失“迅速”或“值得信任”。


M68 到 M69


一年多的旅程

就在我挤出时间写完这个“框”的故事的时候,还有无数的像这样的故事,发生在方寸之间的UI设计里面。


全新的“摩登”M69切图

结果完美吗?远没有,但我对团队的成果感到自豪。我们成功得让 Chrome 变得更小,更方便下载的同时,确保每个像素都会为将来建造更好产品的设计者铺路搭桥。

个人来说,用户调研时,我听到这句话的时候我知道我们成了:

它让我更平和地浏览,也许真的会帮助我过好接下来的一天

不是因为他们喜欢我的设计,而是因为这也是我打造 Chrome 的初衷。

花费将近一年呕心沥血于 UI 的每个像素点,因为我们希望 Chrome 足够承载其所包含的强大内核 —— 希望你也许能够注意到,它不仅仅是个普通的输入框。

(全集完)

Some rights reserved
Except where otherwise noted, content on this page is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International license