Axure应用技巧:可复用控件库制作实操

在现阶段的互联网产品的设计过程中,我们经常会提到一个词“敏捷迭代(开发)”,简而言之就是小步快跑策略。产品的敏捷开发,落实到交互设计中就是要在较短的时间内完成设计稿,这就牵涉到设计师的效率问题。

对于设计师效率的提升,有很多方面,如工作经验、素材积累,当然还有可(Yao)爱(Si)的加班了。在素材的积累方面,视觉设计师的素材主要是UI Kit,和前期版本的视觉稿;而对于交互设计师来说,则是可复用控件,主要包括控件、ICON、注释元件三部分,它们统一的名称叫Axure RP元件库。

Axure元件库

Axure RP中的元件库可以载入他人制作的元件库,也可以根据自己的需求,以及所负责的实际项目,制作出符合自己行业和产品特点的元件库。载入他人的元件库快捷、方便,且比较丰富。目前,Axure RP 8.0版本中,新增了默认的Icons元件库,其数量充足、全面,而且还可以根据自己的需求方便的改变颜色,相较于图片的ICON方便很多。但缺点也是显而易见,他人的元件库都具有普适性,或者和你的行业相差甚远,即其包含的元件不太适合所在行业;另外一点,你不清楚所载入的元件库有没有所需要的元件,以及所需元件的位置,这样会花费较多的时间来寻找。

自己制作元件库可以根据行业和产品特点筛选风格一致且适合自身产品行业特点的元件进行集合。同时,也能够清楚的知道所需原件所在的位置,节省寻找的时间。

制作元件库可以采用Font Awesome图标字体格式制作并载入,但是其修改较为复杂。一方面,制作需要花费时间统一整理,统一载入。假如你需要增加、删除、修改一些原件,就需要重新统一修改、重新载入,有点类似产品的大版本迭代。另一方面,其只能制作一些ICON,不能制作可复用的组件,如时间选择器、图标类型等,这样就大大减少了可复用控件的使用范围。

基于制作迅速便捷,后期修改维护方便的原则,建议大家采用元件库中自带的编辑工具进行制作。下面,就让我们快来看一看如何用Axure来制作自己的元件库。

Axure自制元件库新建


一、在Axure的元件库面板中,选择菜单,点击菜单下的创建元件库,选择自制元件库的保存路径并命名;

创建元件库

二、双击页面面板中的页面新建第一个元件,可以将事先做好的ICON或者组件放到页面的左上角,并为页面修改好名称;

新建控件页面

同上建立多个控件页面,每个页面只保留一个元件或一个(类)组件。

三、对新建的控件页面进行分组,点击页面面板的新建文件夹按钮,为新建的文件夹进行分类命名,并将控件页面分别拖到相应的文件夹下面。

控件页面分组

接着,Ctrl+S保存,这样就完成了自制元件库雏形的建立。

四、回到任一个Axure页面中,点击元件库面板中的刷新元件库按钮,就可以在元件库面板中查看到自制元件库。

其中,新建分组会作为不同类型的控件的分类显示,分类与控件的显示顺序依据新建的控件页面的顺序进行展示。若要调整显示顺序,只需在自制元件库中调整相应的顺序,并保存在Axure中刷新即可。

显示元件库

新建的控件,可以包含相应的悬浮、点击等效果,同时,控件中动态面板也可以得到保留。

Axure自制元件库添加与修改


在Axure的页面面板中,选中自制元件库,点击菜单下的的编辑元件库按钮,进入自制元件库的编辑页面。

元件库修改

元件库可以进行修改、添加、删除、调整顺序等,其操作方式与Axure的操作一致。注意:如果要删除某个控件需要删除控件页面,而不是删除控件页面中的元素。

Axure自制元件库应用


Axure元件库的应用相对来说比较简单,与自带的元件库的应用方式一致,直接拖到相应的操作区域即可。

元件库应用

这种制作元件库的方法,有较多优势:

第一,简洁的可视化编辑方式,比较适合交互设计师使用;

第二,元件库中的控件能够保留相应的元素特性,包括,动效、跳转等,能够复用到目标文档中;

第三,容错性好,控件能够在文档中进行编辑,以适用不同的页面场景;

第四,元件库的修改能够随时进行,不需要统一整理,能够在项目中进行积累;

第五,协作性好,能够将元件库传递给其他设计师,便于项目中的协作,保证页面控件的一致性。

可复用控件不仅能够在产品后期改版以及版本迭代过程中,减少相应ICON、组件等的制作时间,提高交互稿的制作效率,而且也是交互设计师的功底与经验的体现。

看完之后,是不是觉得制作自己的Axure元件库很有必要而且简单。那就赶快开始自己第一个元件库的制作吧!

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

推荐阅读更多精彩内容