全文共5639个字，阅读大约需要20分钟。

今天是国庆假期的第一天，给那些假期还在努力学习的小伙伴们点个赞吧，记得给自己一个鸡腿哦！这篇文章是在回国的火车上写的，我发现火车上写作的环境还不错，可能是因为没法干别的事，更容易集中注意力吧~

该浏览器十周年特别版现已推出，包含多项重大更新：

外观更加圆润，图标、跨平台配色都有所变化，用户界面也做了一些改动，让你的工作效率更高，比如把工具栏移到了 iOS 底部，简化了 Tips、菜单和 URL 等。还有更多更新内容，请前往官网查看~

是不是很酷？不管怎么说，我很喜欢这个更新的UI界面，颜色和圆角都是我喜欢的。那么这个设计是怎么来的呢？下面的文章将带你走进设计背后的故事。

版本迭代之路，

（译者注：它是位于浏览器顶部的一个通用工具栏，用户可以输入网站地址或者搜索关键词，或者两者兼而有之，它就会自动执行用户想要的操作。摘自百度百科。这个词在下文中就不再翻译了，它是一个功能名词，用英文来说更准确。）

为了庆祝 2018 年 9 月我们的 10 岁生日，我们彻底重新设计了浏览器界面，并彻底优化了设计流程。虽然它一直是开源的，但我还是想分享更多关于它的设计故事，希望其他人可以从中借鉴。

1. 了解盒子

我经常被问到这样的问题：“我们为什么需要设计师？”我的同事在他的帖子中很好地解释了这个问题，他说，

我收到的最难回答的反馈是：“这样做不是可以吗？”

根本的问题是浏览器应该是这样的：

这张图片看起来很像你在 PC 浏览器中看到的图片，而且它似乎对 20 亿用户来说运行良好。那么为什么需要重新设计呢？

因为这个盒子里面隐藏着世界上最复杂、最安全的搜索和渲染引擎。

我们希望给它一个机会来改变世界各地浏览器的设计。

2. 盒子简史

要了解我们是如何走到这一步的，我们可能需要仔细观察一下：

第一个盒子

这个带有 0.5dp 渐变描边、22% 不透明度阴影和 1dp 角半径的框样式旨在传达一件事：用户知道他们可以在其中打字。

为什么？因为以前电脑只是连接显示器和键盘，整个屏幕基本都是文字。但有了鼠标，你就需要知道哪些区域是可以点击的。因为显示器只能画方形像素，所以“文本输入框”就诞生了。

第一代盒子

随着浏览器的推出，这个框开始兼作位置或“统一资源定位器（URL）”的显示，因此得名“地址栏”。

2008 年，刚发布时，我们的主要设计原则是尽可能降低认知开销。所以我们合并了   搜索框和地址栏，增加了 4dp 下拉框和下拉菜单，让搜索体验更好 —— 给了一个名字，叫“”。

2008

当浏览器首次出现在移动设备上时，界面空间非常有限，因此我们精心设计了每一个像素，使其占用尽可能少的空间。我们使用了 1dp 内阴影而不是阴影，并让界面与灰色基底保持协调。

2012

从那时起，互联网变得越来越复杂，设备也变得越来越智能。我们开始关心在更复杂的情况下会发生什么，比如当一个网站被黑客入侵并抹去用户个人信息时，当用户突然失去网络访问权限时，或者当用户受到黑客攻击时。当用户想返回一周前访问过的网站，但却想不起该网站时。

在过去的十年里，世界各地数以千计的工程师（包括我在内）一直在思考这类问题，并全心全意地寻找解决方案，以帮助用户驾驭这个瞬息万变的网络。

移动网络的快速发展也带来了大量的新用户，其中很多用户都是第一次用手机上网，他们以前从来没有见过这个盒子，也不知道怎样从里面找到自己想要的东西。

我必须承认，在开始在这里工作之前，我并不知道一半的功能，例如能够在工具栏上向左或向右滑动以在选项之间切换，或者向下滑动以查看所有选项卡。

2012

向下滑动工具栏查看标签页的技巧

像这样的功能非常隐蔽，因为我们从来不想刻意地向用户推销我们的功能。事实上，我们在浏览器中做的大多数设计都是不可见的，以确保我们产品的核心价值不是“内容”，而是内容本身”。这是我非常喜欢的一个原则，也是我加入这个项目的原因之一。

作为一个内向的人，我的一个优点是，在设计上尽量不引人注目。产品本身似乎反映了我对设计的看法：

保护用户和内容之间的神圣空间——不要分散用户的注意力

就像印刷术被认为是“水晶酒杯”一样，我只会将其视为“水晶显示器”。

我错了，随着网络环境的变化，其他第三方软件开始伪装成恶意软件来窃取信息，甚至欺骗用户。

以前，我们并不介意有人从一堆浏览器中进行选择，但现在它开始影响我们用户的安全。

因此，我们第一次开始质疑如此隐形的必要性。

3.千面盒

当我第一次与工程师们坐下来，以更好地了解我们的浏览器是如何构建的时，这是一个巨大的陷阱，没有什么能够让我为即将发生的事情做好准备。

在我15年的设计经历中从来没有发生过这种事。

我们支持超过 6 个版本的 40 多种语言，即使对于不支持的语言，我们也做了很好的适配。我们还允许开发人员将工具栏的颜色更改为几乎任何颜色，同时保持可访问性以支持 Web 应用程序生态系统。

我们的 UI 还能适应不同像素密度的设备，确保其具有相似的触摸尺寸，并且无论设备的内存容量或制造商如何都能流畅运行。

在您与盒子互动之前，它有超过 2,000 种不同的排列。

一旦您点击、键入、滚动、滑动或说话，浏览器的布局和排列就会发生各种变化。

当您打字时，我们会确保您看到的键盘是您熟悉的键盘；当您分享网站时，我们会向您显示您在手机上使用的常用选项。

我们设计的一些操作模式（黑色横线表示分屏模式）

我们的静态框有 2,000 种排列，如果加上所有动态交互，这个数字可以增加到 1000 多个。

看起来很多？但实际上并非如此。

因为我们希望确保每个人都能顺利访问互联网，无论他们来自哪里。

4. 95 种灰度颜色

甚至我们团队内部，也没人知道这个盒子里到底有多少种不同的文本样式。因为迭代过程已经持续了 10 多年，我们留下了一堆零散或过时的源文件。

因此，我们尽可能地进行回顾性审查（主要是为了确保我们不会破坏数十亿人的 UI），我们检查了每种文本样式的每一行代码，并绘制了数百种不同分辨率下的大小、粗细、颜色和不透明度的变化。

尽管几年前我们就对 UI 进行了标准化，但我们没有关于如何使用这些规范的指导，例如 14sp 字体，其中我们有超过 14 种不同的颜色。

总共我们使用了超过 95 种不同的灰色。

如果不考虑上下文，就无法决定使用哪一个。即使是最小的更改也可能破坏可访问性标准，但我想知道我们实际需要的最少颜色数量。

经过近半年的时间，答案终于揭晓，竟然是8。

然后，我们对 UI 中的每个图标（全部 115 个）都进行了相同的设计 - 仔细选择哪些是通用的（例如菜单图标），哪些是特定的（例如匿名图标），哪些是平台特定的（例如复制/粘贴），并且还排除选中、按下和禁用状态。

此外，一些图标被翻转为从右到左的形式，因此总数实际上接近 400+。

5. 设计优化永无止境

盯着灰色盒子几个月之后，如果我说面前堆积如山的工作并不可怕，那我就是撒谎了。

我的自信让我认为我可以独自完成所有工作，但是我越努力，就越清楚这个问题不会通过简单的重新设计而消失。

我们需要彻底改革整个设计流程，以确保现有和未来的 UI 保持一致。

这很难，因为你必须在标准（如帐户登录流程）、标准（如按钮和图标）、本机 UI（如键盘）和品牌元素（如失去连接时的小恐龙）之间保持平衡。

于是我向我们的工程师寻求帮助，令人惊讶的是，他们欢迎将规范问题放大。这个问题实际上使他们很难审查代码，因为平台限制和功能变化意味着很难回滚，事实上，我们的工程师 Ted Choc 甚至聘请了一位非常渴望解决这个问题的人来支持我们的努力。（我的愿望实现了！）

为了让大家了解我们的工程团队有多棒，Ted 的使命宣言是“移动太棒了！”

有了新获得的支持，我们开始基于代码库的共享组件构建视觉规范。其他应用程序“免费”获得的组件必须进行定制以适应所有 (2000) 种排列组合。从头开始，我们需要找到一种可扩展的方法来划分所有这些差异。

结果如下：

我们的第一个版本（M54）的屏幕截图 - 每个颜色、文本、图标和组件都将反映在我们的界面中。

6.设计速度

几个月来，我们一直在删除和整理东西，清理多年来积累的设计和工程债务。现在我们有了一个干净的界面和一个组件库系统，我们就可以开始设计了。

让我们回到之前第一次遇到的框。框 1 位于一个更大的灰色框内，我们将其称为“工具栏”。

第二个盒子

工具栏将浏览器 UI 与内容和系统 UI 分开，当您点击白色框时，它将填充灰色框并显示下面的另一个灰色框。（有点令人困惑吗？）

第三个盒子

这里我们可以展示我们在幕后所做的一切，以尽量使其尽可能实用。但为什么所有这些框都会调整大小并从一种状态变为另一种状态？

第一个盒子的不同形式

当屏幕之间发生变化时，识别或记住会变得更加困难。

如果用户界面在用户交互时发生变化，他们会将这种变化解读为以后可能有用的信息。例如，如果图像消失在图标中，您可能希望记住该图标，以便在需要再次打开该图像时使用。

这增加了理解用户界面和决定需要保留哪些信息的短期认知负荷。

我们删除了所有视觉噪声像素，以使您的认知过程更快，而不仅仅是为了让它更赏心悦目。

即使每个城市能节省 1 秒，那也是 200 万秒或 23.14 天。想象一下人们在额外的 23 天内可以做什么！是的，这可能意味着提高效率。）

为了演示百度更新以后下拉词就删除了吗，让我们看一下没有文本和图标的工具栏：

您是否曾经注意过您的眼睛在屏幕上移动多少次来处理不同的元素？

现在让我们看一下同一个屏幕，只是删除了颜色和阴影：

从零开始实践，或者我们称之为“白色架构”，意味着必须考虑每个元素。包括这个多年来一直默默为我们的 UI 工作的盒子：

第四个盒子

幸运的是，我们遇到了第四个盒子的创造者，并得到了团队的大力支持，根据内容更改了颜色（另一个 6 个月的旅程，值得一提）。

但是让我们继续讨论第二个框的其他内容：图标，它们都带有两个看不见的框：

1. 描述图像资源的“边界框”。

隐形盒子5

2.“触摸目标”描述的是点击区域。

隐形盒子 6

由于三点菜单图标在视觉上较窄，因此其点击区域较小。但如果点击区域保持均匀，则会造成视觉不平衡，图标之间的间隙不均匀。

因此，我们必须做出妥协，打破常规，使其更具点击性和视觉平衡。

是的，我花了整整一周的时间盯着一个隐形的盒子。有人会注意到吗？可能不会。值得吗？是的，值得。效果是原来的两倍。数据表示）

7. 使用盒子来标准化它们

通过了解 UI 中的所有文本、颜色和图标，建立了足够的信心之后，我就可以开始解决了。

我们想找到一种巧妙地强化品牌的方法——考虑到我们的标志在用户界面中出现的次数很少，我认为这将是一个挑战。我设计了几十种看起来很有希望的设计。但我发现它们都不可行，因为它们都缺乏强有力的支持理由。

因此，我回到了我们的核心品牌，仔细研究了我们的标志。我注意到的第一个视觉特征是小写的“c”。

这体现了我们品牌的休闲本质，因此找到一个友好的形状非常重要。我们还使用了与   相同的 4 种颜色来展示我们的传统。事实上， 、 和 徽标都具有重复的形状：

圆形的

圆形是自然形成的形状，不像矩形，所以视觉认知负担较小。在伦敦住了两年后，我仍然清楚地记得这个形状。

地铁名称最初以矩形格式出现时，火车上的乘客很难将其与海报广告区分开来。因此，1912 年，他们在地铁后面添加了一个红色圆圈，以便于找到它。后来，皮克将圆圈融入了现在著名的标志中。

图片由伦敦交通博物馆提供

我认为这对我们来说是一个很好的比喻。

它不应该只告诉你现在需要什么，还应该帮助你取得进一步的帮助。

深入研究我们的徽标，特别引起我注意的形状是这个：

这不正是我们的品牌造型吗？

它表达了我们的特色，同时表明这不仅仅是一个“搜索框”或“地址栏”，而是一个新颖而友好的东西。

鼠标的引入导致了文本框形状的演变，而在移动端，我们的文本框形状因为我们的手指交互而演化，更加符合人类手部交互操作。

偶然间，我们也去博物馆看展览，用曲线形状打破了标准的矩形框架。和我一样，他也喜欢赛车，在他的作品《速度》中，他用类似的形状来暗示速度——核心支柱之一。

我赞同现代主义的观点，认为传统艺术形式对于我们的使命来说已经变得无关紧要和过时了，所以我们将新的视觉设计方向命名为“”。

然后我们探索了数千种设计。

所有画板

起初，我采用了与在移动设备上最初相同的方法百度更新以后下拉词就删除了吗，使用 1dp 边框似乎很合理。但在执行过程中，如果网站顶部有搜索栏，边框不可见，很容易迷失方向。模式也不太好用，很难与粗轮廓图标保持平衡。

我们的一位设计师以为这只是一个线框。

使用标准的阴影也感觉不合适，因为它不能解决我们最初的问题，它看起来就像一个“搜索框”。底部添加了一个额外的 4dp 阴影，在视觉上看起来很重，偏离中心。

我们甚至尝试过将整个框移除，但是现在元素似乎是随机放置的，而像将 URL 居中这样的更改会带来巨大的工作成本。

事实证明，我们的同事也在努力让我们的 URL 看起来更简洁，而且 2 刚刚开始推出。它带来了更丰富的调色板，让我们的形状更加生动。

前

更新颜色和网址

事实证明，一致的形状也会使我们的代码不那么复杂下拉词营销★64xl.com人人都是下拉高手，360搜索PC下拉，需要的转换更少——设计和效率的完美平衡。

现在我们准备测试它了：经过数以千计的用户、数月的实验和可用性研究，我们认为它比我们以前的设计更“友好”、“创新”、“聪明”和更直观。它看起来一点也不“快速”或“可靠”。

M68 至 M69

我们的一年迭代

虽然我只花了时间写了这个框，但 UI 的每个部分实际上都有十几个故事。

我们的新“”M69的截图

它完美吗？还没有，但这并不是让我为我们所做的事情感到自豪的原因。事实上，我们让它变得更小，下载速度更快——确保我们构建的每一个像素都为下一个更好的设计师铺平了道路。

就我个人而言，当我们的用户研究参与者之一说：

“它让我感觉更加平静，可能有助于我度过一整天。”

不仅因为他们喜欢这个设计，还因为我也是这么看待它的。

我们花了将近一年的时间仔细研究 UI 中的每个像素，因为我们希望设计包装能够与内部质量相匹配——只是希望这一次您可能会注意到这不是一个普通的盒子。

原来的：@/ -