提升设计效率及团队协作的通用交互部件库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.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,029评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,395评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,570评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,535评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,650评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,850评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,006评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,747评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,207评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,536评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,683评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,342评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,964评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,772评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,004评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,401评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,566评论 2 349

推荐阅读更多精彩内容