对浏览器的认识（对于浏览器对象的层次关系）

作者：tonyq0802/产品观察者

编者按：本文作者：李耀，UC浏览器电脑版UI负责人。本文略有修改并删除。

创建产品有两个最终目标：好看和易用。然而，在产品设计过程中，我们常常无法最大限度地满足两者。我们要做的就是在两者之间找到最终的平衡点。

浏览器作为一款工具型产品，说实话，要让它看起来好看又好用，比普通产品更具挑战性。然而，即便如此，美观和易用性之间仍然存在最终的平衡。作为产品经理，我们要做的就是找到它，最终将产品呈现给用户。

UC浏览器PC版3.0是我们在寻找终极平衡点后推出的产品。我们尽最大努力使其看起来美观且易于使用。接下来我就结合我个人的使用体验来谈谈UC浏览器PC版的设计感受。

产品背景

浏览器是一个非常成熟的产品。作为PC浏览器的后起之秀，UC在这片竞争红海中拥有众多竞争对手。所以，作为设计师，我们需要面对几乎已经被行业定格的布局和风格。在原来的形式下，我们很难有突破的机会。

作为PC软件，浏览器比移动应用程序更复杂，因为用户需要了解、下载、安装、学习和使用它，甚至卸载它。每个链接对于用户来说都是非常敏感的。正因为如此，作为制造商，我们还是有很多机会让用户喜欢你的产品。我们可以在每一个细节上下功夫，找到其最终的平衡点。

最优的平衡点

在产品3.0版本中，我们在UI上投入了大量的精力。我将与您分享我们完善的一些细节。

安装和卸载

当用户安装或下载你的软件时，这个过程可能只需要十几秒，而且大多数用户只会看到一次。然而，这十秒的设计是用户对你的产品最关键的第一印象，也是他们可能最后一次回到你身边。

在UC浏览器PC版3.0的设计过程中，就是为了很好地满足用户的这两种体验。我们把枯燥的安装和卸载变成了一个流畅、动态的过程，让整个用户体验非常舒适。

当您安装新版UC浏览器PC版时，您会发现翻页卡和彩色气泡可供一键安装。整个安装过程非常方便、炫酷。不仅安装过程很有趣，卸载体验也很有趣。对于产品经理来说，失去一个用户是巨大的损失。因此，我们非常希望在卸载过程中得到用户的真实反馈，以帮助我们改进。因此，我们希望将我们的情感融入到产品中，传达给用户。

为此，我们在设计卸载时，将卸载页面设计成略显夸张的翻页漫画，动态效果简单。我们甚至去掉了卸载进度条，取而代之的是逐渐消失的卡通图片。我们希望通过这种方式让我们的产品变得更有温度，让用户感受到我们的情感。

诚然，我们之所以在安装方面做这么多，无非就是为了让用户使用起来方便，同时又觉得好看！

圆形卡片新标签

如果你使用过很多PC浏览器产品的话，你会发现现在市面上的PC浏览器新标签页的设计基本上都是采用方形网格设计。整个新标签页的大部分都被网格占据了，这意味着即使用户换了好看的壁纸，也会被网格覆盖。虽然这样的设计在一定程度上会更方便使用，但是显然不好看。

我们的UI团队发现这个矛盾后，一度非常困扰。如何才能实现宫殿网格与背景更好的融合？

后来我们使用了没有边缘的圆形，并且为了透过后面的壁纸显示出来，我们将圆形标签设置为透明。壁纸的主色也是通过程序获取的，然后将颜色分配给每个圆形瓷砖。这样一来，整体的美观效果就非常好。

但怎样才能更好地利用它呢？

我们的团队后来发现每个圆形图块可以根据用户的点击次数改变大小。点击的网址越多，圆形标签就会相应变大，并移动到更显眼的位置。而当我们加上圆形卡片的微动效果后，原本单调的新标签页就变得生动起来。

透明和模糊

在新版本中，我们添加了新的头像菜单格式，将之前的文字菜单改为图形菜单，更加直观。模糊和半透明的背景让整个菜单变得更轻盈、更细致。

我们为黑色皮肤添加了透明模糊。滚动页面时，可以看到浏览器的顶部，模糊的网页就可以显露出来，让整个浏览器不再是操作区域和页面显示区域之间的两个独立部分。但它变成了一个整体。

细腻的动态效果

除了以上之外，我们在很多地方都添加了更加细腻的动态效果，比如下载模块。当你点击下载时，一个松果会落入状态栏并引起涟漪。它作为视觉引导，告知用户下载功能在界面中的位置。另一方面，也让整个下载过程变得更加有趣。我有些自豪地说，这是我们设计的最符合最佳平衡点的细节。

设计感想

UC浏览器PC版3.0对于每个UC设计师来说都是一个开始。在这个版本的设计过程中，我们的想法很简单，我们想让我们的设计更加有温度，然后将这种温暖传递给每一个用户。我们每一次都在尝试，每一次摸索。我们不能保证每一次改进都会是这个细节的最终平衡点，但我们会不断寻找。