Back

商业站升级小记 - UI篇

https://storage.fleek-internal.com/0a3a8890-e65e-47ce-93d7-0442b9209d38-bucket/
https://storage.fleek-internal.com/0a3a8890-e65e-47ce-93d7-0442b9209d38-bucket/

https://storage.fleek-internal.com/0a3a8890-e65e-47ce-93d7-0442b9209d38-bucket/

公司的视频聊天交友软件升级项目,视觉部分已经告一段落,很长一段时间都在配合开发做一些功能上的细微调整,才终于有时间来好好整理一下整个项目的经过。从最初的概念稿,到概念稿发布评审,产品制定需求与交互,再交到我手中开始全面的设计工作,直至最终完成通过评审,将近两个月过去了。一套完全不同的视觉风格,从无到有,再逐渐完善成熟,历数整个过程,受益良多

这次升级主要目的在于提升视频交友软件的视觉体验,对产品功能的改动不大。现有的客户端界面仍然是典型的传统框架式布局,区块划分鲜明,旧式的重纹理,白底黑字配以彩色的小尺寸像素图标,俨然一副table时代网页的模样

https://storage.fleek-internal.com/0a3a8890-e65e-47ce-93d7-0442b9209d38-bucket/

观察竞争对手的产品,其界面也不外乎如此。如何从外观与操作上使我们的产品脱颖而出?我们需要引入一种新的视觉概念:一体化设计。打破区块束缚,拓宽用户的视野,以引导的方式帮助用户完成各项操作,而非罗列全部功能供其选择

为此,我以聊天室大厅界面为例,设计了如下的概念图

https://storage.fleek-internal.com/0a3a8890-e65e-47ce-93d7-0442b9209d38-bucket/

但这毕竟不是一款严肃的办公软件,过分追求简洁与清爽会丧失产品的活力。而我们的视频交友软件首先要体现的,便是娱乐性

最大限度的保持原有的功能与用户习惯,在表现方式上体现时尚与趣味。于是对之前方案进行改进,产生了如下设计

https://storage.fleek-internal.com/0a3a8890-e65e-47ce-93d7-0442b9209d38-bucket/ https://storage.fleek-internal.com/0a3a8890-e65e-47ce-93d7-0442b9209d38-bucket/

继续弱化区块,使整个界面浑然一体。加大房间图片,将房间信息紧凑排列。去除各种表意不清却扰乱视线的小图标,用文字与纯色图案代替。单从内容的表现与吸引程度来看,已大大胜过现有界面

概念版界面评审通过,产品定下需求与部分交互界面,正式的设计工作开始了。在一次完整的产品使用流程中,除去各种提示框与弹出窗口,用户会遇到4个主要的界面:站点导航、登陆、大厅、房间

1. 站点导航

https://storage.fleek-internal.com/0a3a8890-e65e-47ce-93d7-0442b9209d38-bucket/

一体化设计的概念,从这个站点导航界面便开始刺激用户的眼球,这是用户见到的第一个界面,立刻带来耳目一新的感觉。在这种简洁的风格下,整齐的布局尤为重要,保持无边界的内容区域完整不散乱

2. 登录

https://storage.fleek-internal.com/0a3a8890-e65e-47ce-93d7-0442b9209d38-bucket/

在这次的改版中,登陆窗口仍然采用主流的客户端软件布局方式。因为以表单为主的界面对用户来说极其敏感,轻微的困惑也足以让用户放弃一个产品

登录界面除了表单,还有广告与活动推广图片。这些运营层面的内容,在这个朴素的界面上极其抢眼。尽管我本人喜欢清爽的东西,但如果结合得恰到好处,这些内容反倒能为产品增色

https://storage.fleek-internal.com/0a3a8890-e65e-47ce-93d7-0442b9209d38-bucket/

比起以往边界清晰棱角分明的广告图,以背景图的方式展现推广信息自然是更好的选择。对于这个不大的登录窗口,空间的利用方式也更加合理,富有层次感

3. 大厅

https://storage.fleek-internal.com/0a3a8890-e65e-47ce-93d7-0442b9209d38-bucket/ https://storage.fleek-internal.com/0a3a8890-e65e-47ce-93d7-0442b9209d38-bucket/

功能区块都融合为一个整体,释放出更多的空间。留出的空间用于放大主要内容区域,或仅仅是留白。主次分明能为产品增添活力

房间的内容区域采用了横向滚动的设计,类似于windows 8的应用商店。原先挤在一起的内容平铺开来,展现形式可以更加丰富。水平移动符合人眼的活动规律,给人一种视野宽广的感觉,也符合这次改版的视觉概念

4. 房间

https://storage.fleek-internal.com/0a3a8890-e65e-47ce-93d7-0442b9209d38-bucket/ https://storage.fleek-internal.com/0a3a8890-e65e-47ce-93d7-0442b9209d38-bucket/

房间是变化最小的,这个界面功能最为复杂,且没有一项可以被删减甚至隐藏,布局也无法改变。体现在这个界面上的,更多是扁平化的色块设计与图标的统一规整

5. 辅助元素

软件界面的各种辅助元素也进行了升级设计,提示框系统随之平面化。通过不同颜色的顶部线条,来区分正确、警告、错误、进度条等场合

结语

尽管这次更新的主要目的是视觉提升,所有界面从头到尾设计下来,我对这款软件本身以及它背后的需求与定位都有了更深入的了解。视觉提升固然能够吸引用户,留住用户却要靠一些其他的东西。其实需要改进的并不仅仅是外观,交互流程不够简明,不少功能易使用户混淆,产品背后的逻辑也存在更合理的可能。当然,这些都只是我个人抛开了实际情况的理解。无论如何,这款视频交友软件要成为优秀的产品,还有很长的路要走。希望本次更新能为这个目标铺平道路,期待下回重大版本更新时,这款产品能够从里到外焕发耀眼的光芒

                • 吐槽的分割线 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

以下内容我就不便发在设计团队博客上了,决定在自己博客里咆哮一下

一家开发人员懒得生蛆的公司是木有前途滴!木有前途滴!!!!

以上所有效果图,都是和开发协商过后的修改版,已经比最初的纯视觉稿难看了不少,开发还在不停提要求,“这几种窗口能不能做成一样大小?我这里不好做”、“这个进度条就不要了吧,用文字来表现”、“这个你看看腾讯是怎么做的,他们都有这个按钮”、“这里改一下吧,弹出一个层盖在上面,我就好做多了”、“这张图切给我一下”、“这图给我切一下”、“这张图切一下”……

你以前的公司切图是切一张给一张的么?我TMD整个软件的图全都切好了按文件夹分类命名好给你,还一张张问我要!同类按钮拼在一张图上又要我切开,就为了你少写十几行代码,我就要多切几十张图么?看看腾讯?你就只认识腾讯吧?截个图给我叫我参考QQ的卸载界面,拜托您老先搞清楚QQ和QQ旋风是两个软件!截图敢不敢好好截,那么大个界面,你就截个按钮,上面写着确定两个字,然后告诉我这个界面不对,我TM是神仙啊!?功能你实现不了,我们没意见,保证产品质量的前提下,修改设计给你提供折衷方案,你麻烦事还特么这么多,尼玛开会的时候怎么就不吭声了?产品经理都没有意见的效果图,你给老子来那么一大堆有的没的,敢情你才是产品经理啊!

铁打的程序员,流水的产品经理。最近产品部貌似换人挺勤,前几天又有个来接手这项目,问我要全套效果图。我终于明白了,因为咱压根儿就不缺产品经理,咱的开发就是产品经理!

好了……喷完了,心情舒畅。对事不对人,这个开发尽管很难沟通,但我目前还没看出他的品行有什么问题。我不会因为工作能力和工作方式的原因和同事吵起来,不过这样的工作方式继续下去,任何美好的蓝图最终都会成为泡影。等着瞧吧,这次产品升级的结果一定面目全非