作者：李世超 蓝湖产品经理&UI设计师
蓝湖是一款面向产品设计团队的协作工具，旨在为设计师、产品经理、工程师的工作减负，提高整个团队的沟通效率。
自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的结果。
网友评论