蓝湖是一款面向产品设计团队的协作工具,旨在为设计师、产品经理、工程师的工作减负,提高整个团队的沟通效率。
自2017年1月上线,便得到了很多团队的认可,但是随着用户数量和用户需求不断增多,我们也逐渐发现了存在产品中的一些问题。
经过多方位的思考,我们决定重新梳理整个产品的功能与交互,也就是这次蓝湖全方位UI升级的2.0版本。
在这个过程中,我们遵循了“3W原则”——What?Why?How?
· 蓝湖的设计理念是什么?
蓝湖从创建伊始,设计理念便是“简洁高效”。
我们希望用户在使用蓝湖时,操作体验是流畅的,并且能够有足够的沉浸感。简单来讲,就是希望用户能够在蓝湖上用最简单的操作来换取最大的价值。
· 蓝湖为什么需要UI升级
蓝湖是一款用户需求推动的产品,为了提高用户的沉浸感和交互体验,我们基于产品考虑与用户需求,逐步增加了很多功能,随着越来越多功能的加入,产品也逐步暴露出一些问题来。
比如有些新增加的功能在原先的界面里,显得十分不自然;有些新功能在与老功能的切换过程中,操作步骤略显复杂,不是非常流畅;等等。
这是我们之前没有预料到的,因此,我们需要且非常必要,暂时停下功能扩充的步伐,将整个产品的功能重新细致地梳理、整合,尽可能地精简页面,简化操作步骤的同时,让相关功能的关联性更强更自然。
· 这次UI升级做了哪些思考?做了哪些改变?
The less,the more.
很多时候,UI设计一个细节的修改都会牵动整个产品的格局;而整体的产品UI升级,要考虑的东西非常多,我将这些思考主要分为四部分:
思考1:怎样做的页面才能实现对用户最小的打扰?
作为工具类型的产品,我们需要尽可能减少用户在长期使用后产生的不适感,比如:
我们将画布和详情页的底色设为了灰色,这样是为了在用户在长期查看设计图时,将其视觉受到的刺激降到最低。
很多产品设计会忽视用户使用的场景,使用的一些界面配色,在原始产品上看虽然十分抢眼好看,但是对用户使用操作并不十分友好。在这方面,我们做了很多的考量,比如:
蓝湖产品的界面配色中尽可能少地使用彩色,大多采用灰色,这样能够最大程度地呈现用户上传的设计图的色彩,让蓝湖的界面对用户的设计图所产生的干扰降到最低。
思考2:怎样在精简页面、操作步骤的同时承载更多的功能?
很多时候我们会遇到这样的产品:一开始非常简单好用,但是用着用着发现,这个产品功能虽然越来越多了,操作也随之变得非常复杂。究其原因,是因为这些产品在诸多的功能迭代中,不停增加功能模块儿,却没有很好地将这些模块儿融合在一起。
我们也遇到了这样的问题,随着产品功能日趋完善,产品页面愈发繁复,操作上显得有些不灵便了。于是我们对整个产品的功能进行了重新梳理,精简了冗余的页面,比如:
我们对【设计图的详情页】做了比较大的调整,将之前的讨论和标注页面合并在一起。
用户在这一个页面可以实现查看设计图的历史版本、查看团队成员对该设计图的批注评论、查看设计图的标注信息、一键下载该设计图的多倍切图等多项操作。
思考3: 怎样能尽量减少用户查找功能的时间?
有的时候,为了得到整洁的页面,我们会将很多功能操作按钮归类隐藏起来,这样看着界面美观了,但却为用户操作带来了一些不便:当用户想进行一些功能性操作时,他需要花时间去找触发这个功能的按钮在哪里,有的时候甚至找不到,只能去翻教程或者找客服。
这种情况对于“旨在提升用户工作效率”的我们是非常不能忍的,所以针对这点我们做了很大的调整,比如:
我们对【首页】的布局进行了修改,把之前折叠的菜单放了出来。
画布页面的功能也做了优化和提升,增添了撤销功能,和一些右键常规的用户常用的操作。
思考4:怎样能让用户在使用过程中体验更加顺畅?
用户体验是每一个产品都十分关注的部分,这部分归根到底就是一句看似很空的话:“关注细节”。产品细节关乎产品的方方面面,大到产品逻辑架构,小到一个按钮的颜色、一次点击的体验,我们需要将用户的操作场景、操作行为一遍又一遍地进行穷举、模拟,将每个细节进行优化,这样才能给用户带来最舒适、流畅的体验。
这次升级UI,我们使用了Muse-UI,一些按钮、下拉、点击的体验更统一也更简洁,还提升了一些管理页面的操作方式和样式,操作感知上比之前会流畅很多。这看似简单的两句话总结的细节方面的升级,实际上花费的精力与时间是十分巨大的,同样的,所有细节的优化带来的整体产品效果的提升也是巨大的。
· 总结
所谓UI升级,本质上就是去思考去实现如何让用户用更少的时间,在这个产品上实现更多的价值。
“从用户角度出发”似乎是一句老生常谈,但这的确是真理,我们要做的就是在捋顺产品总体架构的前提下,把所谓的“用户的角度”掰碎了,极度细化他们的需求,不放过每一个可以优化的细节,这样才能达到1+1>2的结果。