系统讲述蓝湖2.0版本UI升级思路

作者:李世超 蓝湖产品经理&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的结果。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342