网易考拉品牌战略升级—线上产品的设计挑战

背景-考拉品牌升级

网易考拉吸收各种优质的生活方式并将其与用户相连接的形象进行图形化演绎。全新的品牌图形标识、文字标识和主题色能够体现网易考拉明快、智慧的形象。通过此次一套完整的品牌体验设计升级，在多渠道体验触点中实现高度统一的视觉品牌形象识别系统。

具体品牌升级内容见：网易考拉品牌升级实录

考拉老版本UI存在的问题

老版本从视觉上看有以下一些问题：整体风格多样化，视觉信息以及内容信息的聚焦不明显，banner、资源位信息较乱，视觉规范系统不够多样化。品牌特征不明显，没有明确的考拉品牌核心价值的定义，品牌与产品的关联性不明显。

这些问题可以总结为以下4点：

品牌升级UI设计遗留问题

品牌升级中的UI升级增强了品牌特征以及品牌的延续性，改善了之前老版本所存在的一些问题

但是，品牌UI升级的过程中也存在着一些问题。这里只选了其他竞品的几个关键页面比较，以下主要从视觉的角度谈一下有哪些问题：

1. 产品行业属性较弱

网易考拉毕竟是互联网快消品牌，再提升品牌体验的同时，一定意义上忽略了产品本身的行业属性。

2. 产品视觉效果偏小众化

将首页与其他小众类产品放一起毫无违和感，从视觉的角度上看，略显小众化

根据原有的视觉稿总结出一下3点问题：

洞悉问题

从品牌、产品、视觉规范去洞悉目前UI视觉所存在的一些问题：

• 品牌：老版本未能准确的抓住考拉品牌核心价值

• 产品：改版过程中对产品的核心价值不明确

• 规范：网易考拉app的品牌规范缺失（如商品图规范等）

解决思路

品牌、产品、视觉规范所存在的问题以版式、商品图规范、Banner规范、Icon设计4个角度进行解析：

1. 版式设计

在这里以考拉首页、个人中心、种草社区的主页面进行解析

在针对首页进行内容拆分，从banner位、资源位、栏目、活动、推荐进行设计：

种草社区是以内容为主导的频道，目的是为了让用户快速的、准确的找到自己想要的文章心得。在老版本中，功能区域以及头部广告区域的视觉过强，对用户阅读内容造成了一定的干扰性。新版本解决了老版本所存在的问题，减弱了操作区域的视觉层级。

修改了tab切换的视觉样式，让用户更准确看到自己所属的栏目。

“写心得”是操作按钮，而“问答”、“发现好友”、“我的主页”这三个按钮是内容按钮，所以在这里将“写心得”与其他按钮区分开来。

以上所说的问题均由UI设计师提出，所以说对于UI设计师来说，更多地掌握产品和交互层面的知识是很重要的。

图上图，新旧版本的对比可以看出「我的订单」部分 icon 样式发生了变化，从填充式转变为线条式，突出了 icon 右上角的数字同时修改了icon的造型，加强了语义的准确性。

如下图，在版式上，新版去掉了大部分的线条，转而用块面来代替线条表达层级关系。

新旧版本对比可以看出网易卡黑优先级提高，卡面信息更加集中、突出。这是因为业务层面，这两年会员机制愈来火热，拉新成本和难度都越来越高，需要更加强调黑卡在业务上的权重。

如下图，新版本开通前展示权益以吸引开通，开通后展示黑卡VIP身份传达品牌感知：

商品图规范

网易考拉在整体品牌传达上使用的模特照片应是排除大面积的纯色或复杂的背景元素的简洁的图片。

应避免使用拥有过分复杂的背景、夸张的造型、花哨的道具等妨碍品牌本质的元素的模特以及商品照片。

1. 剔除背景元素的模特照应用示例。

2. 展示生活方式的模特照应用示例。

3. 产品与背景采用相近色调的应用示例。

4. 概念化的模特照应用示例

Banner图规范

老版的banner一定意义上存在以下问题：产品信息不明确，利益点所遮挡，阻碍了消费者对产品的认知。如：下面两张人物的露出比产品本身还要多，所以在新版本中做了对banner的视觉规范：

icon设计

对比实物icon与线形icon，前者更具象，更直达用户心智，同时也更直观；而线性icon更加符合品牌规范，两者各有利弊。

最终，我们对对实物icon和线形icon进行了A/B测试，前者数据提高了30%。于是选择了实物icon作为首页的频道标识。同时也做了视觉规范，在摄影上以同一角度，统一打光，统一饱和度。

最后

由于资源有限，目前与线上有所差异，更加完美的视觉版本在未来会一一上线，敬请期待。

原文始发于微信公众号（网易UEDC）：sketchUI——专注优质UI/UX设计学习