Axure如何制作属于自己的Axure元件库?

作者&投稿:栋媚 (若有异议请与网页底部的电邮联系)
~

原型设计是每个产品经理的基本技能。许多人通常使用原型产品中的默认组件库。然而,为了提高效率,有必要制作一个完全符合他们使用习惯的高效组件库。本文作者对此进行了分析,希望对您有所帮助。学Axure,先学基础再学交互最后就是动手实操!在,就可以获取到专业全面的Axure自学视频课展开综合学习~专业讲师教学,知识点满满,学会可自主实操设计原型~

Axure制作属于自己的Axure元件库方法:

一、你也是原型苦手吗?

产品经理的软件技能里,原型工具可以说是产品经理吃饭的家当,我个人常用的原型工具是Axure。当我是个刚入门的小菜鸟时,用Axure画原型线稿,用的是默认的组件库,每次都把对应的组件拖动出来进行更改。比如在制作一个表单时,就要经历以下步骤:

拖出一个文本标签组件作为字段名标签。必要时要加上*必填标记并且要改成红色字色

拉出一个单行文本输入框组件,按规范改一下组件的宽度、高度、圆角

重复1、2直到完成表单设计

当我成为了一名熟练的画图仔之后,我知道了还有元件库这种东西,于是我下载了好多个元件库,但是用的时候,我发现别人的元件库要不做的特别庞大(大厂的设计规范元件库,事无巨细),检索元件时花费的时间更多了,要不就是残缺的半成品,总之就是效率不高,所以相当长一段时间内,我都是用默认的元件库。

前不久,我受高人指点:做一个自己的元件库是产品经理必须经历的试炼。我醍醐灌顶,现在我需要的不是机械化地快速重复,而是找到变革工具让效率有质的飞跃,而当前我需要的就是一个高效的、完全贴合我使用习惯的元件库。汽车跑的比马车快,可不是因为轮子蹬的比马蹄快。

二、STEP1:把每个元件画一遍

万事开头难,起初我并没有对“我的元件库应该具备哪些内容“有一个明确的答案,于是根据产品经理先做MVP再迭代优化的DNA,我准备把所有的组件一个个实现,这是最笨的也是最实在的办法。

于是乎我把常见的网页框架组件,如网页头部、主导航菜单、按钮等,以及表单组件,如单行文本、下拉选框等组件,都逐一实现。因为平时对组件的基本属性调整都比较熟悉,这一步进展的很快,马上我就得到了第一版的”p仔组件库v1.0″.

这个1.0版本,每个元件都是独立的,而且有些组件,根据交互不同我还做了区分,比如带清除的下拉选框和带搜索的下拉选框。我花了挺多时间在完善组件的交互上。

然而我很快就发现了亟须优化的点:元件库应该按照某种分类准则进行合并,否则找元件的效率太低了。

三、STEP2:元件库的分类合并

在学习了别人成熟组件库的分类方式后,我决定采取如下分法:

基础组件(哪都可以用)

界面组件(web列表页这类界面)

弹出组件(弹出表单、对话框)

提示组件(徽标、气泡和提示)

常用icon

常用记录表格

这里只是在1.0的基础上,创建了文件夹对元件进行归类,在文件夹下,依旧是独立一个个的元件。

随后我想起了一个问题,为什么我见过的大厂设计规范,都是做的大元件而不是独立元件呢?大元件的意思是,比如按钮元件,里面其实包含了关键按钮、普通按钮、提示按钮等几个基础元件。

(有赞的按钮大元件,并不是只有1个元件)

为什么要把相同性质的元件放在同一个“大元件”里呢?经过DIY的元件库1.0后发现,如果元件都是独立的,使用时找元件是在axure界面的左下角元件区域,axure的组件区一般会比较小,检索效率低。

(axure工作界面的元件窗口是比较小的)

那么封装成大元件后,用的时候先拖到画布里,再直接选取想要的组件复制出来就行。因为画布的空间大,而且允许缩放,再加上自己对自己组件库的熟悉,检索效率要比在元件工作窗中检索定位的效率要高。操作步骤如下:

把大元件拉到画布中;

在画布中选中想要的组件,用ctrl+鼠标左键拖拽复制;

用完后将大元件在画布中移除。

(大元件拖拽到画布,用拖拽复制,用完后再把大元件删去)

相比散装元件,大元件的优势在于画图时元件的检索效率上,画布中的检索效率要大大优于元件窗口。如果没有体验过从1.0到2.0的迭代过程,其实很难感知到这一层做法的优势。

四、STEP3:元件库的加减法

1.加法怎么做?在多个项目的锤炼下,会发现网页框架、上传组件,甚至是B端最常用的web列表页,弹出表单都是高频元件。做元件库的最大目的就是提高效率,而不是执着于元件的抽象和原子化。高频使用的元件都适合放到元件库里。

比如B端的列表页,基本都需要支持批量导入数据,那直接把导入数据的弹窗、导入中、导入结果等封装成一个元件,那用到批量导入业务的原型,只需要把这个”批量导入数据“的元件拉出来使用即可。

(批量导入数据元件,包括默认情况、上传中以及结果页)

2.减法怎么做?有些业务可能不适用默认尺寸或样式,需要进行定制化改动,那我们还需要让元件库有良好的扩展性。

我发现之前花费了大力气的组件交互,这时候反而成了一个麻烦,因为组件包含了动态面板以及更多元素,改一个尺寸可能牵扯到多个面板内多个元素的改动,但是axure不允许跨面板选中同时改动,因此只能一个个去改,并且极容易改漏了地方。

比如一个带清除的下拉选框组件,如果仅需要改变宽度,就需要更改:选框的动态面板宽度、动态面板内矩形的宽度、调整清除icon定位、下拉列表的面板宽度、下拉列表中继器中的选项矩形宽度,涉及多达5处调整,这和元件库追求效率的核心诉求背道而驰。

(示例:带取消的下拉选框,扩展时涉及至少5处调整)

所以我删繁就简,把带交互的元件都统一做一个静态版的用于原型展示。动态版本保留在元件库,在需要展示或者定义交互的时候作为说明,但是具体原型中,只使用静态组件,保持高效扩展。

做了减法的下拉选框元件,扩展时只需要关注基本属性,更多的属性和交互通过备注进行说明:

最后总结一下制作元件库的3个关键步骤:

逐一制作每个元件,感受一下基础的属性修改,快速做出MVP;

把元件进行分类分组,并把同类项封装成1个大元件,效率再次跃升;

根据个人使用场景进行自我迭代,给元件库做加减法,可以封装更大的元件,也可以简化为完全静态的原型制作法。

以上就是关于“Axure如何制作属于自己的Axure元件库?”的全部内容分享了,怎么样?你学到了吗?Axure学习讲究方法与技巧,如果你觉得你的理解学习能力强,不妨继续浏览更多Axure相关文章~当然,如果你需要更加系统精准地学习Axure,那么我建议你选择我们的Axure自学视频课哦~最后点赞、留言+收藏,下次学习更方便哦~




axure是什么?界面功能有哪些?
AxureRP是一个专业的快速原型设计工具。Axure(发音:Ack-sure)代表美国Axure公司;RP是RapidPrototyping的缩写。AxureRP是美国AxureSoftwareSolution公司的旗舰产品,是一款专业的快速原型设计工具,允许负责定义需求和规格、设计功能和界面的专家快速创建应用软件或网站的线框图、流程图、原型和规格描述文档。它是...

Axure如何设计制作APP支付密码键盘输入效果?
以上就是关于“Axure如何设计制作APP支付密码键盘输入效果?”的全部内容精彩分享了,希望能够帮助到你!更多Axure精彩分享,尽在Axure相关文章~如果你此时正在犹豫Axure去哪学、怎么学的话,那我不妨建议你直接学习体验一下我们的Axure自学自学课,专业讲师授课,可以从基础的知识点开始学起,逐步深入掌握哦~...

Axure流程图箭头如何绘制
经常需要进行原型图设计制作的小伙伴们相信一定会接触一款叫做Axure的软件,他可以帮助用户轻松设计原型图和流程图,如果你还不知道怎么做流程图的箭头的话看过来!1、在顶部快捷菜单栏选择连接工具,当靠近画布中的元素时,会自动吸附,缺点是刚开始绘制时不能完全自主控制起点和终点。3、可以手动选择起点和...

AxureRP教程–动态面板高级应用
顾名思义,这个交互事件是用来设置动态面板的二维坐标位置的,应用频率较高,在需要更改某部分内容的位置时,都需要使用这个功能,与AxureRP的其他功能配合使用,如变量等,会做出很多效果。本文是一篇关于动态面板高级应用的文章。我们一起来了解下,希望对您有所帮助。前面介绍了动态面板的基本应用,通过...

电脑axure怎么制作登录页和注册页切换效果
接下来小编就教大家怎样使用axure来制作登录页和注册页的切换效果。具体如下:1.首先我们打开电脑,找到axure图标点击打开。进入到软件界面之后,我们找到左侧菜单中的登录页选项,然后我们就可以拖动登录页移动到设置栏中。2.接下来我们将下方的注册页也放置在单独的注册页栏中。3. 两个页面放置完成之后...

AxureRP8.0怎样绘制内联框架原型
很多的用户都在使用AxureRP8.0软件,不过你们知道怎么设计内联框架原型方法吗?现在小编为大家带来了AxureRP8.0设计内联框架原型的操作教程,希望大家喜欢。AxureRP8.0设计内联框架原型的操作教程1、双击打开AxureRP8.0软件,在基本元件内找到“内联框架”,拖一个到空白的画布上,如图所示:2、双击“内联...

Axure怎制作表格升序或降序效果?
Axure想要制作一个表格内容修改排序效果,上下行的交换,该怎么这个交互效果呢?下面我们就来看看详细的教程。新建一个中继器,如下图所示:中继器设置2列:ID、content;可按所需设置行内容;(ID是用来排序的,建议按数字顺序设置),可参考下图设置:双击进入中继器内部,先清除原来内容;新建2个文本...

Axure怎么实现电话号码的验证的原型?
Axure制作原型的登陆验证时,不免要使用到手机、邮箱的验证,没有正则表达式,我们来使用字符串的方式做简单的验证:一、思路 1、验证长度是否为11位 2、设置输入长度为11位 3、验证输入的值是否为数字 3、截取字符串的前三位判断是否是在已经发布的号码段且在前三位 二、Axure手机号码验证 1、先做...

如何在Axure中制作“网页中的点击关闭按钮后就能隐藏广告”的效果?_百 ...
相信很多小伙伴都有在使用Axure,在其中如何才能制作“网页中的点击关闭按钮后就能隐藏广告”的效果呢?方法很简单,下面小编就来为大家介绍。具体如下:1. 首先,打开Axure,在其中创建一个矩形框作为广告链接区,如下图所示:2. 在矩形框中输入相应的文字,如果我们想要调整文字的属性,在上方菜单栏中...

Axure有哪些元件? Axure元件介绍以及使用
在制作的过程中,画布中显示的效果并不是实际用户看到的效果,这就需要我们可以实时预览,Axure也提供了这种功能。预览的快捷键为:F5。或在菜单栏进行如下操作发布预览。此外,也可以对预览进行设置,操作说明如下图所示。2、生成原型 生成原型一般生成的为HTML文件,快捷键为:F8。或进行如下操作发布生成...

衡南县18639073582: 如何在Axure中创建自己的元件库 -
詹胆健润: 方法如下:1、找到创建元件库的入口:打开Axure,在左侧元件库面板,点击绿色搜索按钮左边的下拉三角形,点击第三项“创建元件库”,此时会弹出一个另存为对话框,这里需要选择元件库的存储位置并输入元件库的名称,保存后稍等,...

衡南县18639073582: 如何用Axure快速制作APP交互原型 -
詹胆健润: 创建属于自己的元件库 原型制作工具的核心功能无非就是通过元件的堆砌组合,来展示产品的目标形态和效果.Axure自带的只是一些最基本的元件,而网上的元件库庞杂混 乱,很难找到满足需求并且称心的元件,并且大部分都是位图格式,根...

衡南县18639073582: 如何自制Axure RP Widgets -
詹胆健润: 但是,别人做的不一定贴切自己的需求,那就干脆自己动手,DIY一套属于自己的Widgets吧!1. 打开Library编辑功能;在Widgets中选择Create Library后,会要求你先为即将创建的Livrary命名,Axure Library的后缀名为“.rplib”.2. 在Widget Library中添加自定义的Widget: Widget Library长得像原来的Sitemap,但是Widgets没有上下级关系,所以看上去原来的一个页面就是现在的一个Widget.3. 选中Widget后就可以创造属于你自己的Widget啦!

衡南县18639073582: 请问这样的原型图该如何画?axure RP 8.0 -
詹胆健润: axure这一工具,相信对于互联网圈的人士并不陌生,它是一个非常实用的原型制作工具,相信广大产品经理、产品助理、交互设计师经常用到它,那如果用它来做一个流程图,要怎么做呢?其实很简单 工具/原料windows或mac电脑 axure应用 ...

衡南县18639073582: 要做一个app的ui,具体该做什么,怎么做 -
詹胆健润: 如果是做原型设计的话 第一可以考虑使用axure 第二可以使用justinmind 可以参考:www.91axure.com www.91justinmind.com

衡南县18639073582: 产品经理给了axure,ui应该怎么做 -
詹胆健润: 基本框架按原型一来,交互和细则具体可以自己想.最好在设计前和产品经理沟通下,听听他的想法~~~他希望做成什么样的,哪里是要他的来的,哪些可以你自己发挥的,事先沟通好

衡南县18639073582: axure是用来的做UI设计的吗? -
詹胆健润: ui设计不一定需要Axure RP,但最好会使用Axure RP.UI设计师需要懂交互设计、设计原型等技能,所以需要使用Axure,网页一样的会涉及到使用Axure设计原型. 网页设计涉及原形设计. UI即User Interface(用户界面)的简称.UI设计则是指对的人机交互、操作逻辑、界面美观的整体设计.好的UI设计不仅是让变得有个性有品味,还要让的操作变得舒适、简单、自由、充分体现的定位和特点.UI还有其它的意义,如Unit Interval,Univ of Iowa,Unlock Instruction,Urgent Interrupt.

衡南县18639073582: 如何用axure画app原型图 -
詹胆健润: 多学习,多练手画好原型后 1.下载Axure 2.如果是给itouch或者iPhone用的,比较好办,直接用320*480的分辨率画好辅助线,然后画原型 3.按F5生成原型的时候,在“Mobile/Device”选项中可以设置适配移动设备的特殊原型 4.设置说明见下图:(页面大小显示我的这个设置是按320*480的大小,默认不缩放) 5.用你的移动设备访问你生成的原型链接(如本地服务器,或Dropbox托管)6.把该页面创建一个桌面快捷方式7.完成(有icon,有闪屏) 另:想做鼠标动作或者复杂的页面交互比较麻烦,不推荐,尽量简洁.

衡南县18639073582: 使用Axure制作App原型应该怎样设置尺寸 -
詹胆健润: 目前比较好的解决办法是:1.下载Axure 6.5Beta版.而且不好意思是英文版的.2.如果是给itouch或者iPhone用的,比较好办,直接用320*480的分辨率画好辅助线,然后画原型3.按F5...

衡南县18639073582: 如何用axure做一个手机app原型 -
詹胆健润: 一、原型默认整体大小为640*960即可,位置为x为0、y为0起始,这样即可 二、下拉效果可以做,用动态面板来完成,可以上下拖拽. 三、可以放在web服务器上,就可以通过http的方式来访问.

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 星空见康网