对PC浏览器外观和功能设计平衡点的探索(图文)

[核心提示] 对工具类产品来说，好的设计可能会降低效率；趁手的功能或许有点简陋，在好看与好用之间寻求一个合适的均衡点，是非常有必要的。

打造一款产品，无非两个终极目标：好看和好用。但是，我们在产品设计过程中，往往无法让二者达到最大化程度的满足。我们要做的，是在二者之间找到一个极限平衡点。

浏览器，作为一个工具型的产品，说实话，要做到好看又好用，比一般的产品都具有挑战性。但是，即便如此，在好看与好用之间，它也有一个极限平衡点。作为产品经理，我们要做的就是寻找到它，并最终将产品呈现给用户。

UC浏览器电脑版 3.0 就是我们一个寻找极限平衡点后呈现出来的产品，我们尽最大努力做到了好看又好用。下面，我就以我的亲身经历，谈谈 UC 浏览器电脑版的设计心得。

产品背景

浏览器是一个非常成熟的产品，UC 作为 PC 浏览器的新入者，在这个充满了竞争的红海里有很多竞争对手。所以，作为设计师，我们需要面对的是几乎已经被业界固定下来的布局和样式。在原有形态上，我们很难有突破机遇。

浏览器，作为一个 PC 软件，它会比移动端的 App 更为复杂，因为用户需要认识、下载、安装、学习和使用，甚至还有卸载，每一个环节对用户而言都很敏感。也正因为这样，作为厂商，我们还是有很多机会让用户喜欢你的产品。我们可以在每一个细节上下功夫，找到它的极限平衡点。

最优的平衡点

在 3.0 版本的产品中，我们在 UI 上下了很大的功夫。我针对我们打磨的一些细节，分享给大家。

安装和卸载

用户安装或下载你的软件，它的过程可能就只有十几秒钟，而且大部分用户只会看到一次。但是，作为这十几秒钟的设计，却是用户对你产品最关键的第一印象和最后一次对你“回头”的可能。

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

当你安装新版 UC 浏览器电脑版时，你会发现翻转的卡片、缤纷的气泡……一键安装的操作，整个安装过程都很便捷很酷。不仅安装过程，卸载体验也很有意思。对于产品经理而言，丢失掉一个用户，都是巨大的损失。所以，我们很希望从用户卸载的过程中，得到真实的反馈，帮助我们改进。于是，我们希望把我们的这份情感融入到产品里面去，传达给用户。

为此，我们在设计卸载的时候，将卸载页面设计成了一个略为夸张的翻页漫画，并且配上简单的动态效果，甚至我们去掉了卸载进度条，改为了一个渐渐远去的卡通画面，我们希望通过这种方式可以让我们的产品更有温度，让用户能够体会到我们的情感。

诚然，我们之所以在安装这块做这么多，无非是为了让用户好用的同时，感受到好看！

圆形卡片新标签

如果你用的 PC 浏览器产品比较多，你会发现，现在市面上 PC 浏览器新标签页的设计基本都是采用方形宫格的设计。整个新标签页，大部分位置都被宫格占据了，这样就造成了用户即使换上好看的壁纸，也会被宫格盖住。虽然一定程度上这种设计会比较好用，但显然不好看。

我们 UI 团队在发现这个矛盾点后，一段时间也很纠结。怎样才能做到宫格和背景更好的融合？

后来，我们用了没有棱角的圆形，且为了透出后面的壁纸，我们让圆形标签透明了。还通过程序取壁纸的主色，然后将颜色付给每一个圆形瓦片。这样，整体效果在美观上就很好了。

但是，如何能更好用呢？

我们团队后来发现，可以让每个圆形瓦片根据用户的点击次数而变换大小，点击越多的网址，其圆形标签也会相应的变大和移动到更显著的位置。且我们再配上圆形卡片的微动效果，原本单调的新标签页也变得生动。

透明和模糊

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

我们在黑色的皮肤上面加入了透明模糊，在滚动页面的时候，可以看到浏览器的顶部，可以透出模糊的网页，让整个浏览器不再是操作区域和页面显示区域分开的两部分，而是成为了一个整体。

细腻的动态效果

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

设计感想

UC 浏览器电脑版 3.0 对于UC的每一个设计师而言，都是一个开始。在这个版本的设计过程中，我们的想法很简单，就是想把我们的设计变得更有温度，然后把这份温度传递给每一个用户。我们每一步都是在尝试，每一次都是在摸索。我们不能保证每次的改进都是该细节的极限平衡点，但我们会不停的寻找。

本文转载自极客公园，作者李垚，UC浏览器电脑版UI负责人。转载时略有修改与删减。