网易严选交互组件4.0 彩色版

6月1日儿童节，我们做了一件colorful的事，将严选移动端交互组件都升级为了彩色版，完全还原线上模块样式。之后的交互稿都以高保真粒度呈现。

先上图，左边为3.0版本组件搭建的页面，右边为4.0彩色版搭建的页面：

交互原型图英文叫wireframe，翻译的俗一点就是“线框图”。

从14年我进入网易，一直使用的灰度组件设计交互稿。从当年的秀品，到严选，组件库1.0到3.0，都是没有任何彩色。而且我认为灰版交互稿才专业。

灰度的交互稿有以下优点：

1 设计师专注于信息表达，不用太思考美学样式

2 灰图容易快速的表现出信息层级

3 界面和标注容易区分

4 减少给视觉设计师的干扰，避免样式影响到视觉发挥

为什么要把组件库升级为彩色版，高保真组件？

有一个大的背景是在电商作为最复杂的互联网产品，设计资源永远是短缺的，单从交互体验设计说，能招到优秀的设计师就很难，更不要提要保证数量了。因此有大量的产品经理自己做交互稿，为了提升产品、设计师的出稿效率，尽量减少差距，保持统一性，所以才要不断的改进设计工具，优化组件。

改用彩色版的四大原因：

1 电商的交互设计过程中，越来越需要提早感知界面的实际表现

2 一些场景需要快速出图给业务方确认，从交互再到视觉完成，有时间差

3 目前全行业趋势，设计师在向完整的体验设计师发展，高保真交互稿更能锻炼设计师

4 推动技术将组件做的更完整、规范，减少视觉的重复工作量

对于灰图的优点，是否彩色高保真交互稿会丧失？

灰：设计师专注于信息表达，不用太思考美学样式

彩：组件都是现成的，对于新功能，同样不要求设计师过于沉迷样式，可交于视觉设计师细化；

灰：容易快速的表现出信息层级

彩：信息层级，通过标注可以完全表达清楚

灰：界面和标注容易区分

彩：界面可通过新的标注组件来达到区分度

灰：减少给视觉设计师的干扰，避免样式影响到视觉发挥

彩：新功能的样式完全由视觉发挥

整个组件库有什么？

我们的交互组件针对电商的功能专门定制，包括：

基础组件：TAB、输入框、按钮、选择框、键盘、弹窗、功能按钮、加载动画、文字、文档组件

业务组件：商品格、商详组件、横幅、筛选器、标签、通栏组件

还配有一套icon和色板，共180种组件，全部按线上样式还原。

还预置了15个基础页面：

首页、值得买、分类、购物车、个人、列表、商详、组单、订单等。

下图为3.0和4.0部分组件对比，可以看出4.0几乎和视觉稿一致了，用这些组件搭建的页面能最大程度还原线上效果。

 

下图为部分页面库展示

同时，新版标注规范也做了升级，在灰图时代，我们用橙色做标注，可以明显的区分开界面和标注信息。但是启用彩色组件后，由于严选界面中多红色、橙色系元素，为了避免颜色混淆，因此将标注组件颜色都改为了蓝色，下图为两版对比：

小结

整个组件库、页面库的更新工作量并不大，我们3个设计师分工，抽时间做，2个星期也就做完了。更多的时间我是在思考从灰版升级到彩版的利弊，如开头提到的，灰图有很多的优点，改为彩色版之后如何继续保持这些优点？对视觉设计师会不会有影响？会不会造成交互设计师沉迷于调整样式？

为了保持让专业的人做专业的事，组件库在稳定的产品功能中挑选，不涉及活动模块。对于需要雕琢的样式、卡片，也规范了产品和交互不要沉迷于此，交给更专业的视觉设计师来发挥。这些措施都能确保各个岗位的人都能最大程度发挥自己的专长。

组件仅仅是工具，目的是提升整个链路的效率，统一化。好组件并不代表就能出好的设计。好的设计还是需要扎实的设计专业能力，对目标用户的深入理解等等各方面的努力。

后话

2019年的时候，我们已经将严选B端组件做了全面升级，完善了组件库和页面库。包含了140多个组件，新增了表格、图表等数十个，7类40多个页面模板。当然原因也是设计师的资源无法覆盖到全部B端产品，所以大部分要靠各业务产品自己来利用我们的组件，参照模板来自己设计。

关于组件相关的暂时说到这里，欢迎大家和我们沟通交流。