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

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

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

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

第一次从网页转做UI，貌似有那么点味道，不过细节仍有待提升。灵感有部分来源于微软的metro风格，内容即全部。直到后来office 2013发布，才发现自己的设计理念果然和微软在某些方面不谋而合

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

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

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

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

1. 站点导航

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

2. 登录

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

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

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

3. 大厅

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

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

4. 房间

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

5. 辅助元素

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

另外，站点的LOGO也全部设计了相应的配套风格。单色的LOGO比彩色更贴合一体化的设计风格

这一版UI较以往变化很大，为帮助用户尽快熟悉新界面的使用，提示引导系统不可或缺

结语

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

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

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

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

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

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

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

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