几千万用户的产品如何做视觉改版设计？

【产品回顾】

云之家作为一款互联网企业级产品，一直践行在快速迭代之路上。正常的迭代频率一直保持在两周一个小版本每年一个大版本的发布（大版本是大到要开发布会的版本）。回望17年6月21日我们发布了云之家v9，主旨在于激活个体，定制专属于自己的云之家，每个个体都是活力新青年。随着v9的震撼发布我们向用户传达了我们的核心理念也取得了一定的成绩，同时也存在一些问题。经过这段时间对用户使用体验上的深入挖掘，在视觉上我们也进行了深入的探索和创新，这些也都运用在我们18年的新版本设计上。

【那一款产品要做改版改什么呢？】

一次产品的改版是分为三种情况的：

1，交互和视觉全部都改（这种情况一般都涉及到产品的定位和功能的调整，但对视觉而言要相对简单一些）。

2，在现有交互的基础上只改视觉（这种情况对视觉的限制条件就会更多，相对也会更难一些）。

3，视觉不改，只改交互（这种情况是非常少见的，毕竟交互的底层逻辑是和业务强相关的）。

云之家这次的改版就是第二种情况：在交互不改的情况下，来做视觉改版。

【视觉改版的价值在哪里？】

身为设计师，该如何完成一次相对系统和完整的视觉改版来提升产品体验呢？接到这个设计需求的时候其实大家第一点会想到什么呢？是做成现下流行的视觉形式？是做成设计师个人主观猜测的样子？还是问问我们的用户喜欢什么样的？或是去参考参考竞品？？？那么是否深度思考过视觉改版的价值到底在哪里？也许大部分人都会觉得视觉改版无关紧要，并不能对产品产生直接实际的收益，为何还要在视觉层面上大费周章呢？

从公司的战略层面：

产品的视觉风格是和公司的品牌定位密不可分的，通过视觉改版能使之更强化品牌，成为让用户值得托付的产品。

从产品的角度：

市场上的同类产品同质化过于严重，要找准自己的产品定位，达到区别于竟品的目的，同时也强化自己的产品理念。

从个人价值方面：

优秀的设计也是对设计师本身设计能力和价值的体现，也使设计师更易获得内心的成就感和满足感。

【窥探云之家V10的视觉改版心路历程】

一、线上版本的视觉分析

我们根据用户调研和反馈内容分析现有版本存在的视觉问题。

1、消息页

1-1，头部、内容、底部tab三板块区分不明显，整个页面很平，节奏感较弱。

1-2，底部tab图标和导航+号图标一致性太高，没有做相应的区分，但两者本身重量级是不同的。

1-3，文字字体相对较小，与次文字层级区分不开，影响用户阅读体验。

1-4，分割线增加了多余的视觉元素。

2、消息页“+“号

2-1，快捷区域色块太多，辨识度不高。

2-2，全屏展示，单手不易操作。

2-3，天气信息内容没有必要，快捷操作区操作目的性是非常强的，做到最直接和精简的给用户想要的。

3、对话页“+“

3-1，图标在视觉上过于花哨，部分对功能的表达还不够准确。例如：照片、拍照、小视频、红包。

3-2，视觉重量不统一，风格不统一。

4、云之家首页

4-1，头部和卡片的视觉组合上造成整个画面有割裂感没有过渡。

4-2，头部四角都有操作，视觉分散。

4-3，内容以卡片形式呈现，内容很长很重，但展示有效信息有限；且卡片缺少设计感，较生硬。

4-4，鸡汤文占据头部最显眼位置，现未发挥更大的价值，且在视觉比例上感觉过重。

5、我的页面

5-1，入口分布较分散，界面不够简洁和个性化。

好了，吐槽大会告一段落！

作为超强责任心的team肯定是要给出优化方向的。

视觉分析会议结论：

视觉小组第一次组织大会，会上确认优化的方向。

1，重新定义关键色辅助色，应用图标进行重绘。

2，跟进设计潮流字体加大，尝试大标题。

3，我的页面（去掉多余的信息或功能）。

4，层次不明显（优化层次，背景颜色的区分）。

5，群组头像区分（自定义群组头像或弱化头像尺寸）。

6，首页简化。

7，缺省页加入小云元素，加强品牌识别。

8，强化品牌识别。

确认了需要优化的地方，那么在思考我们新版本的视觉亮点是什么呢？或是说视觉主线在哪里？如果只是对上个版本的小修小补，那日常迭代完全就可解决。

二、头脑风暴进行关键词联想

在v9版本“年轻、时尚、酷“的基础上对关键词做了更细分的提取，结合云之家的愿景“做最值得托付的移动办公平台”产生了v10的几大关键词，并针对每个关键词收集相关的优秀设计，进行分析和提取，为我们的后续方案做储备。

三、制定情绪看板

四、提炼设计语言

以“云“作为v10的视觉设计语言，用云的形态和特征来强化品牌DNA，在同类产品中能有自己鲜明的视觉形态。

确定了设计语言，接着就是对“云“这一元素提炼出具体的形态，我们抽取了云的三个部分：优美流线形、活力圆形和新颖叠加感运用到我们的视觉方案中。

五、方案尝试

方案一：

视觉方向：紧跟现在最热的设计潮流，大胆运用邻近渐变色，在v9品牌风格基础上进行延续和再升级。

三个云形态在界面中的运用：

优美流线形和活力圆形在头部导航上的运用：

新颖叠加感在图标上的运用：

主界面视觉：

方案二：

视觉方向：改变云之家现有的风格，视觉上追求更加简洁、轻盈、清爽的视觉感受。

主界面视觉：

方案三：

视觉方向：延续品牌色另增加一个颜色，形成撞色，视觉样式上采用外方内圆，在突出专业的基础上让界面更加有活力和视觉冲击。

主界面视觉：

看了以上三个方案，你更喜欢哪个视觉呢？

六、方案验证阶段

这个阶段可以做内部或外部的用户调研，用调研数据来验证我们的方案，带着得到的数据汇报给上面的各位大佬们会更有说服力。我们利用了集团年会的契机对其他分公司的小伙伴和内部同事进行了调研，最终得到了39份有效数据；调研对象主要是开发、设计、总监、会计、产品经理、部门经理；年龄层主要面向70后、80后、90后这也是产品的目标群体；目的是提供三套视觉方案供调查对象选择出最喜欢的方案，并从“专业、活力、时尚、新颖、情感化、个性、酷、无感觉”选择出匹配喜欢的方案的关键词。同时记录调查对象对每个方案的视觉感受。

结果：

得到了39份有效数据，其中69%选择 方案一，认为该方案专业、活力、时尚、情感以及新颖。视觉给人耳目一新的感觉，在现有的移动办公产品中具有更鲜明的品牌个性。

到了给老大们做汇报方案的阶段，这期间会经历相当长的一段时间，当然方案也会经历无数版本的修改最后会敲定最终使用的版本。当然如何提高给大佬们过方案的通过率也是需要一些技巧的，在这里就不做详细赘述了....

七：确定方案后的页面补充阶段

这个阶段已经确定了主视觉方向，需要把其余的界面统一成新的视觉风格，多端的产品也要同时同步客户端和网页端，保持多端的视觉和体验一致性。也可在视觉基础上做些创新性的设计，这些都是以大的视觉风格确认的基础之上的。

1，首页的丰富和补充：

首页头部通过不同时间段展示不同头部背景，结合情感化文字继续延续头部的情感化设计方案。

延续V9情感化分享插画头部。

2，对轻应用关键色的重新定义：

在颜色使用上更稳重，加强品牌专业化形象

3，对话页icon重新设计：

采用颜色的渐变、叠加和混合，在风格上和主界面视觉保持一致。

4，三端同步：

手机端、web端和客户端三端视觉保持一致，增强视觉认知的统一性。

5，品牌颜色自定义：

针对大企业的定制化功能。

6，各轻应用界面同步视觉到v10风格：

涉及内容较多就不做详细赘述了。

八、APP引导页设计

要传达的是赋能个体激活组织，要通过科技创新给基层员工赋能，激活每个人为自己工作，将成为

组织创新的核心。所以设计方案也是围绕个体赋能的一天工作，与产品功能点的结合。通过新颖的交互动画增强代入感和体验感。

说明：因文件大小限制就变成这渣渣画质了，动画速度因展示已加速，真实画面和动画效果可下载云之家APP进行体验

九、设计规范的制定

更新设计规范和开发组件，同步开放平台、yunui设计平台、首页第三方开发设计平台等形成完整统一的设计生态系统。

至此，应该算是一次相对比较完整的产品视觉方案改版了。当然每个设计团队实施的步骤都是不尽相同的，仅供参考！

【彩蛋：产品发布现场】

5月30日在北京圆满成功发布，历时5个多月，相信这只是第一步，追求极致用户体验的脚步我们从未停止。期待更好的云之家和更好的我们。

我们v10视觉设计小分队童鞋们：

陈东、郝莹莹、曾慧桢、伍慧珊、林子聪、芮涵

内容编辑：郝莹莹

既然都看到这里了，那就留个赞呗~