提升设计效率及团队协作的通用交互部件库1.0设计想法

七月末，去北京参加了2016的IXDC大会，期间参加了阿里的一个交互设计工作坊，分享的是目前他们正在研究的关于如何解决设计效率的问题，因为阿里是个体量很大的公司，单一产品的体量也很大，所以设计效率对他们来说就显得尤为重要，他们要解决的设计效率问题是通过将交互 视觉 前端一体化进行组件化设计，具体的方案这里不做赘述，网上可以查阅到，据说不久也会上线；大约在半年前，我也已经在思考关于设计效率的问题，我是一名交互设计师，原型是我的主要产出物，于是我就针对如何提升原型设计的效率问题，进行了研究；

交互设计师的主要使用的原型设计软件是：Axure rp 7.0 and Axure rp 8.0 （主要针对使用 windows和部分在mac上使用的用户），Axure中部件存在的问题主要是部件种类少且无样式，而在原型设计过程中，有时需要我们进行视觉层次的体现以及部分样式体现，针对目前存在的问题，我着手开始设计一个交互部件库，主要目的为提高原型设计效率以及团队原型设计规范，愿景是将团队价值最大化，暂定为交互部件库1.0

#交互部件库1.0

发现问题：

交互设计师在原型设计阶段耗费了大量的时间，且从总体来看，做了很多重复的工作

设计目的：

提高原型设计效率以及团队原型设计规范，让交互设计师有更多的时间去思考，愿景是将团队价值最大化

解决方案：

收集并设计交互部件库，逐步分类完善，实现拖动能用，将原型设计的步骤最小化，由低到高，分解重建

思路

过程1  对在原型中添加一个灰色色块的过程进行了分解，大概需要5个步骤，且鼠标移动路径也很长；

过程2  演示了如果想做一个双按钮，大概就需要7步之多，这个过程可能平时没有多少察觉，但设计一个网页，是需要很多很多这种步骤的，那设计师在这个过程中，其实效率是很低的；

如果再往高一层级放大，比如做一个登录框

这个过程就需要更多的部件和部件属性的设计，效率是很非常低下的。

设计方案

由上思考，直接将部件进行组件化设计，即事先预设好部件的形状、颜色、线条、阴影、半径等属性，组件化产出常用部件，尽可能达到拖动能用的效果；

首先将页面进行最小化拆解，拆解成元素，然后对最小化的元素再进行组合行成简单组件，再把简单组件进行组合形成复杂组件；顺着这个思路，下面进行相对应的收集、整理、归纳和设计。

#元素：

元素即最小化的部件，形状、颜色、线条、阴影半径等都属于元素，将这些元素进行简单的组合先形成我们需要的简单部件

这里选择正方形和圆形的原因是因为用Axure自带部件完成这两个图形，需要手动去设置形状的参数，步骤较多，所以将这两种形状做成部件库中的基本形状，并赋予它一定的属性（确保这些属性是你在日常设计中常用的形状。颜色、大小），我这里选择的是三个均分的颜色段，以便适应大多数的情况；

根据自己平时的实际设计习惯和实际情况，可以预设一些常用的简单组件，这样在实际使用过程中就可以实现拖动能用，或者仅通过拖动改变大小即可使用

考虑到原型设计的不同需求，即低中高三等保真，以及部件库的普适性，所以像一些颜色、阴影、圆角等属性可以不用考虑进去，这样也会减少选择，提升部件选择效率。

遵循以上的思路，从简单组件到复杂组件，进行收集整理。

（web部件库）

我这里从形状、文字、按钮等进行了简单部件的整理，可以根据自己平时的工作习惯将常用的部件进行分类整理；

复杂组件的整理，同简单组件一样，如登录框、搜索框、下拉框、tab切换样式等等，同一种组件也可以设计不同的样式

web复杂组件部分举例

由低到高，由简单到复杂，分解重建，将常用的一些部件做成部件库，可以遵循按照大分类：web、app，然后大分类下再去细分，由简单组件到复杂组件，收集、整理。归纳，一定会有一个能极大提高自己设计效率的组件库诞生；当然也可以进行团队协作，由团队来共同收集 整理，最终产出一份团队认同的能提高个人效率及团队协作效率的组件库；

愿景

将组件化的概念放大到产品设计团队中，联合视觉和前端，进行团队级的组件化设计，最终将组件代码化，对于大型产品的更新迭代，将是一次农业刀耕火种到工业批量生产的进化，这样设计师在执行层的效率会得到极大的提高，将更多的时间投入到产品的设计思考中，不仅仅是停留在执行层，这样的场景希望能早点到来，也希望阿里在这发面的研究成果能早早的出来，带来一次设计效率的进化。

最后捎带补充一下部件库的制作方法

Axure的部件库下拉里面有个创建部件库，点击后在里面添加的每一个页面都会是一个部件，每个文件夹就是一个分组，然后保存，再载入部件库就好了。

END.

----------专心写博客，静悄悄做人

2016.09.20   SHENGZHAO.