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

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

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

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

产品背景

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

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

最优的平衡点

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

安装和卸载

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

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

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

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

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

圆形卡片新标签

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

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

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

但是,如何能更好用呢?

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

透明和模糊

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

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

细腻的动态效果

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

设计感想

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

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