【元件库教程】如何充分利用元件库快速搭建Web后台(Tczy出品) 获赏10金币 基础教程

TC_ZY 普通用户 2019-10-29 2777

Q&A环节

Q:什么是元件库?

A:Axure 元件库是我们设计产品时必备的工具,那么在日常使用中我们经常会用到一些常用的元素,如果每次都重新制作非常麻烦,最简单的方法就是讲做好的内容做成元件,方便下次直接使用。

Q:有没有通用标准的元件库?

A:没有,最好的元件库是根据自己实际设计制作属于自己的元件库,举个例子:专做saas的PM,经常用到后台的一些元件库(输入框、选择器、进度条等)整理好属于自己常用的,下次做需求要添加某某条件筛选,拖出来改下就行了。

Q:又如何制作属于自己的元件库呢?

A:Tczy店铺欢迎你(开个玩笑),下面的教程基本就是阐述一些如何制作自己的元件库,并提高工作效率的方式与教程。

 

一、先从制作元件库说起

1、先从RP文件里找到元件库,在右上角操作地方,创建元件库(同时你也能载入Tc做好的元件库),输入名称并保存,此刻axure会自动创建rplib文件并打开,如下图所示:

2、下一步就把你想要并常用的内容放在当前页面,这样就形成了一组元件库,

这里特别提醒下:

a、选择的元件库可包含任意交互与动态面板,如果制作元件库用了交互拖出来是附带交互效果的

b、每个元件库放置的位置做好是(0,0)

c、对当前元件库进行删除修改都行,保存后重新载入下元件库立马生效。

3、最后就是要把元件库做好归类与名称设置

为了方便并快速查询想要的元件库,做好归类与名称的设置是特别重要的,原因是因为:元件库基本都是缩略图,看不清楚内容,另外有效的归类方便管理不同内容的元件库并快速找到,最终通过名称来识别。

举个例子先说下步骤:

a、在元件库创建分组文件夹(文件夹是唯一元件库区分归类的):num(数据归类)

b、在当前建立元件文件:Num_表头样式A

最后再强调下:元件库没有二级分类,只有一级分类,为了方便自己管理元件库,可在文件夹的上一级再创建文件夹去管理,且不会影响其他分组。

 

这个基本就是制作自己元件库的流程了。

二、再用几个场景描述元件库的必要性

下面我用几个场景来描述如何快速使用元件库制作Web端,且效率qui起码提高一倍

 

场景A:开发与产品互怼需求的业务场景

开发:你这个原型没标注筛选哪些内容,你叫我们怎么做;

PM:我标注了,在下面有说明筛选哪些内容;

开发:。。。好吧,我没有注意滑下去看需求内容。

这个场景谁都没有什么错误,开发可能没注意,产品可能没标注箭头提示做好说明,Web制作的原型基本都是全屏的,每次上下滚动来回看特别耗时,且容易忽略细节问题,如果做交互那更费时间,产品也就想表达自己的意思就可以。

但如果你经常做后台选择器相关的内容,提前把带有交互的元件库样板上去,只要修改下文案,就轻松解决了问题,且开发也明白你想要做怎么样的选择器。

 

场景B:UI与产品互怼需求的业务场景

UI:你这个icon到底是想出弹窗,还是跳转二级页面,还有你一级菜单有哪些内容,二级菜单有哪些内容,怎么归类

PM:我这个icon跳转我在下面标注了是弹窗,跳转是跳到下个index页面内容,一级菜单按照我做的业务流程梳理那些就可以,你看下我的xmind

说句实话,如果你有精力吧所有交互做出来,那基本也不要那些UI、UE佬了,在就是很多公司基本做后台的UI只给设计规范,很多表单设计,开发基本都是照着原型直接怼出来的,所以给到PM的压力也大,既要考虑表单样式和规范,又要考虑点击跳转交互逻辑,如果搞不好甚至可能把自己玩自闭。

但如果你有属于自己的元件库,以后不管表单样式还是交互跳转,都是固定统一的,直接拖出来使用就可以。即做到样式统一,又可以规范交互跳转,这可能也就是元件库最大的魅力所在了吧。

三、最后归根结底还是要找到属于自己的元件库

axure shop里面的元件库有很多也都非常优秀,但与此同时,希望大家也能养成自己做自己元件库的好习惯,因为重复的事情重复做等于浪费时间,日常工作中我们经常要用的那几个,有必要的话可以放入自己的元件库,久而久之,打造属于自己的元件库

带有交互的元件库是特别有必要的,等你用起来的时候你会觉得,真香。


如果你不想花大把的时间制作交互元件库?

TC_ZY出品欢迎你

【Tczy交互元件库】Web端元件库+框架+数据表单

 

软件版本:Axure8.1(通用)

页面数量:191

产品类型:后台框架+数据表单+Web端元件库

售价:¥99.00(现在活动半价¥49.9

当前购买数量:141(发稿日期统计)

预览地址:http://qqpuke.axshare.cn/#g=1&p=tc_zy出品

购买地址:https://www.axureshop.com/a/1060984.html

大家有任何疑问可以直接微信加我,一般我看到都会帮你们解答并留言。


登录后回复
打赏排行 用户名 打赏金额
第1名 黯黄老师 10金币
最新回复 (9)
  • 1034661056 普通用户 2020-9-8
    0 引用 10
    谢谢
  • 刘艳儿_1585141683 普通用户 2020-5-12
    0 引用 9
    666
  • gxlqs2249 普通用户 2020-4-26
    0 引用 8
    666
  • TC_ZY 普通用户 2019-12-20
    0 引用 7
    新人 楼主看到帮我回复下我说的是不是这样的。
    你在说什么?。。。  有问题加我微信吧a312164626
  • 新人 普通用户 2019-12-3
    0 引用 6
    新人 你说的不会分类指的是什么? 是不是没有创建文件夹去区分元件库内容,可以看我的rplib文件
    楼主看到帮我回复下我说的是不是这样的。
  • 新人 普通用户 2019-12-3
    0 引用 5
    新人 我做的元件库不会分类是为什么
    你说的不会分类指的是什么?  是不是没有创建文件夹去区分元件库内容,可以看我的rplib文件
  • 新人 普通用户 2019-11-27
    0 引用 4
    我做的元件库不会分类是为什么
  • TC_ZY 普通用户 2019-10-29
    0 引用 3
    啊老师 感谢投稿分享,获得10金币初审奖励。 后期会根据用户反馈和专家意见决定是否发布到中文网和公众号,到时候会追加奖励。 你这篇是不是以前发过呀?
    哇,被抓奸了,发过中文网,不是换地方了吗?那我也得转移战场了
  • 黯黄老师 管理员 2019-10-29
    0 引用 2
    感谢投稿分享,获得10金币初审奖励。
    后期会根据用户反馈和专家意见决定是否发布到中文网和公众号,到时候会追加奖励。
    你这篇是不是以前发过呀?
返回
发新帖
AxureShop
AxureShop
AxureShop