翻译#7|访问 Chrome - 上

原文地址:Medium

原文作者:Hannah Lee

译者:max

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

写在前面 - 译者

在浏览关于 2018 年 UI 设计回顾的文章合集时,恰巧遇到这篇文章。内容并不硬核, 主要对UI设计涉及的流程和思路,以及大产品大平台下的设计出发点很有兴趣,同时自己对 Chrome 还是抱有很大好感的,也尝试找到自己的翻译风格。文章较长,图也很多,我将其分为两部分,如果真的看得下去,不妨再试。祝好。




2018年9月,为了纪念Chrome的十周年生日,我们发布了在交互设计上翻天覆地变化的新版本浏览器。既然Chrome是秉承着开源的光荣传统,我想在此分享一些我们的设计经历,希望大家能够有所收获。

1. 那个“框”

我经常被问到:“为什么Chrome需要一个设计师?”我的同事,塞巴斯蒂安在他的帖子里说得很含蓄:

“我收到最头疼的反馈就是:这就行了吧?”

这个问题的深层次原因是,大家都默认了浏览器就应该是下面这个样子:

这不就是台式电脑上那个,被几十亿人使用的浏览器吗?用得好好的,干嘛重构?

因为在输入框背后,还藏着世界上最尖端、安全的网络搜索、渲染引擎。

所以我们希望通过设计来改变大众对浏览器的看法。

2. “框”的变迁

为了搞清楚来龙去脉,我们先仔细看看:


框 第一代

这个0.5dp的渐变描边,22%不透明度投影及1dp圆角半径的空白框只表达了一个意思:在这输入吧!

这么简单?因为在键盘和显示器不可分离的上古时代,整个网页内容只有必要性文字而已。

但是鼠标发明之后,就必要显示出哪部分是可点击的。因为显示器只支持方块像素显示,所以“文本输入框”产生了。

输入框の祖师爷

随着浏览器的引入,“框”还承担了显示你当前位置,也被称为 “Uniform Resource Locator (URL)” 的任务——由此“地址栏”的名称应运而生。

在2008年,Chrome首发,我们首要的设计任务是去减少认知成本和障碍。所以我们将谷歌的搜索框和地址栏进行整合,并增加了4dp投影和下拉菜单,增加搜索推荐的曝光——由此得名“omnibox”。

2008

浏览器刚来到移动平台,手机屏幕上的“地皮”太过珍贵,可以说“每个像素点都不能浪费”。我们使用了1dp的内阴影代替投影,并保证界面在灰色底下保持协调。

2012

自此,互联网开始变得越来越复杂和设备智能化。需要开始考虑,网站被黑或者身份泄露该如何处理;再或者,突然失去网络连接;或者,你想回看一周前的网页,但现在你不记得地址了。

过去十年里,全世界数千名工程师(也包括谷歌)思考上述这些问题,呕心沥血试图帮助用户找到参考方案,来应对网络爆炸产生的快速变化。

移动网络的奇迹,也让越来越多的人通过手机第一次接触网络。他们可没有见过上面提到的“框”,对于台式电脑时代,更是一无所知。

必须要承认的是,在开始这项工作之前,我对 Chrome 的特性了解寥寥。比如说,左右滑可以切换 tab 页,下滑可以查看所有 tab 页面。

看看 Chrome 的骚操作

像这样的功能都是默默无闻,因为我们从不想骚扰用户。事实上,我们的omnibox是秉承我们的核心价值观 “content, not chrome.”(内容,不是Chrome)来设计的。很喜欢这句原则,也是我加入项目的原因之一。

作为一个内向性格,我在设计时也确实更倾向于无声处用心。产品本身似乎也反映了我的设计观:

保护用户和内容之间的亲密关系——不打扰是我的温柔

就好像 Beatrice Warde 将排版视为 “水晶圣杯”,我把 Chrome 视为了“水晶视界”。

然鹅,我大错特错。

随着互联网日新月异,一些第三方开始伪装成Chrome盗取信息,或者故意欺诈。

之前,我们不介意用户是不是能从一堆浏览器中认出Chrome,但现在这影响到用户的安全问题了。

所以开天辟地第一次,开始考虑是否需要出手干预。

3. 千“框”千面

当我和工程师坐下来打造全新omnibox的时侯,对于接下来的行动,没有任何参考或借鉴。

这在我15年设计生涯中从未有过。

Chrome当时支持超过40种语言的6个版本安卓系统——甚至Roboto Medium不支持的语言,都做了良好适配。还允许开发者改变工具栏颜色,同时还保持可访问性以支持web应用生态系统。

UI也做了适配,以便于高低像素设备可以拥有相近的触感,同时不论设备内存和制造商,都可以流畅运行Chrome。

在你和他交互之前,这个“框”已经有了超过2000种显示可能。



在你点击、输入、滚动、轻扫甚至语音之后,全新的omnibox又会变换成从成千上万种形态了。

当你输入时,我们确保你看到的键盘是你熟悉的那个。当你分享网站时,也要展示你手机上所熟悉的那个菜单。


当时考虑的主要情况(黑线表示分屏模式)

静态框的2000种形态,演化成随后超过20000种交互结果。

是不是有点过分了?并没有。

因为想要确保所有人都完全接入互联网——无论他们是以何种方式而来。

4. 95度灰

即便是团队内部,也没人清楚地址栏内支持多少种版本的字体格式。因为Chrome已经迭代了近十年,手头上都是凌乱或者过时的源文件。

因此,在复盘时(其实主要是想确定没有损害上亿用户的体验),我们从一行行代码里,抠出了每一种字体格式,并且整理成表。



没错,前不久我们已经“模板化”了UI设计规范,但并没有任何规范去确定何时、何法去执行规范。这也就导致了为什么仅仅14sp Roboto一种字体,就有超过14种不同的颜色搭配。

当时总共使用超过95种灰色调。

不实际查看文本,是很难决定将哪些冗余去除的。哪怕是极小的改动也会影响交互标准。但我真的很想知道实际需要颜色的最小数目。

答案在一年半之后揭晓:8种。

接下来,对UI素材内的每个icon也做了同样的尝试。整整115个icon图标——仔细斟酌:哪些是Material(比如菜单图标),哪些是 Chrome 特色(如匿名图标),还有特定于平台的(如复制/粘贴),这还不包括选中、按下和禁用状态下的图标设计。

*另外,有些图标还需要饭转,来适应从右往左阅读顺序的语言,所以实际的图标数应该在400以上。



(上部完结)

戳这里,直接看下部。

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