七月末,去北京参加了2016的IXDC大会,期间参加了阿里的一个交互设计工作坊,分享的是目前他们正在研究的关于如何解决设计效率的问题,因为阿里是个体量很大的公司,单一产品的体量也很大,所以设计效率对他们来说就显得尤为重要,他们要解决的设计效率问题是通过将交互 视觉 前端一体化进行组件化设计,具体的方案这里不做赘述,网上可以查阅到,据说不久也会上线;大约在半年前,我也已经在思考关于设计效率的问题,我是一名交互设计师,原型是我的主要产出物,于是我就针对如何提升原型设计的效率问题,进行了研究;
交互设计师的主要使用的原型设计软件是:Axure rp 7.0 and Axure rp 8.0 (主要针对使用 windows和部分在mac上使用的用户),Axure中部件存在的问题主要是部件种类少且无样式,而在原型设计过程中,有时需要我们进行视觉层次的体现以及部分样式体现,针对目前存在的问题,我着手开始设计一个交互部件库,主要目的为提高原型设计效率以及团队原型设计规范,愿景是将团队价值最大化,暂定为交互部件库1.0
#交互部件库1.0
发现问题:
交互设计师在原型设计阶段耗费了大量的时间,且从总体来看,做了很多重复的工作
设计目的:
提高原型设计效率以及团队原型设计规范,让交互设计师有更多的时间去思考,愿景是将团队价值最大化
解决方案:
收集并设计交互部件库,逐步分类完善,实现拖动能用,将原型设计的步骤最小化,由低到高,分解重建
思路
过程1 对在原型中添加一个灰色色块的过程进行了分解,大概需要5个步骤,且鼠标移动路径也很长;
过程2 演示了如果想做一个双按钮,大概就需要7步之多,这个过程可能平时没有多少察觉,但设计一个网页,是需要很多很多这种步骤的,那设计师在这个过程中,其实效率是很低的;
如果再往高一层级放大,比如做一个登录框
这个过程就需要更多的部件和部件属性的设计,效率是很非常低下的。
设计方案
由上思考,直接将部件进行组件化设计,即事先预设好部件的形状、颜色、线条、阴影、半径等属性,组件化产出常用部件,尽可能达到拖动能用的效果;
首先将页面进行最小化拆解,拆解成元素,然后对最小化的元素再进行组合行成简单组件,再把简单组件进行组合形成复杂组件;顺着这个思路,下面进行相对应的收集、整理、归纳和设计。
#元素:
元素即最小化的部件,形状、颜色、线条、阴影半径等都属于元素,将这些元素进行简单的组合先形成我们需要的简单部件
这里选择正方形和圆形的原因是因为用Axure自带部件完成这两个图形,需要手动去设置形状的参数,步骤较多,所以将这两种形状做成部件库中的基本形状,并赋予它一定的属性(确保这些属性是你在日常设计中常用的形状。颜色、大小),我这里选择的是三个均分的颜色段,以便适应大多数的情况;
根据自己平时的实际设计习惯和实际情况,可以预设一些常用的简单组件,这样在实际使用过程中就可以实现拖动能用,或者仅通过拖动改变大小即可使用
考虑到原型设计的不同需求,即低中高三等保真,以及部件库的普适性,所以像一些颜色、阴影、圆角等属性可以不用考虑进去,这样也会减少选择,提升部件选择效率。
遵循以上的思路,从简单组件到复杂组件,进行收集整理。
我这里从形状、文字、按钮等进行了简单部件的整理,可以根据自己平时的工作习惯将常用的部件进行分类整理;
复杂组件的整理,同简单组件一样,如登录框、搜索框、下拉框、tab切换样式等等,同一种组件也可以设计不同的样式
由低到高,由简单到复杂,分解重建,将常用的一些部件做成部件库,可以遵循按照大分类:web、app,然后大分类下再去细分,由简单组件到复杂组件,收集、整理。归纳,一定会有一个能极大提高自己设计效率的组件库诞生;当然也可以进行团队协作,由团队来共同收集 整理,最终产出一份团队认同的能提高个人效率及团队协作效率的组件库;
愿景
将组件化的概念放大到产品设计团队中,联合视觉和前端,进行团队级的组件化设计,最终将组件代码化,对于大型产品的更新迭代,将是一次农业刀耕火种到工业批量生产的进化,这样设计师在执行层的效率会得到极大的提高,将更多的时间投入到产品的设计思考中,不仅仅是停留在执行层,这样的场景希望能早点到来,也希望阿里在这发面的研究成果能早早的出来,带来一次设计效率的进化。
最后捎带补充一下部件库的制作方法
Axure的部件库下拉里面有个创建部件库,点击后在里面添加的每一个页面都会是一个部件,每个文件夹就是一个分组,然后保存,再载入部件库就好了。
END.
----------专心写博客,静悄悄做人
2016.09.20 SHENGZHAO.