axure复用-自定义组件,母版(模板)
组件(控件)是用于设计线框图的用户界面元素。在组件(控件)面板中包含有常用的控件库,如按钮、图片、文本框等。从组件面板中拖动一个控件到线框图区域中,就可以添加一个组件。组件可以从一个线框图中被拷贝(Ctrl+C),然后粘贴(Ctrl+V)到另外一个线框图中。组件面板工具栏中可以加载已有组件库、创建新组件库、编辑当前组件库、或更新组件库,也可以对组件进行搜索。
模块(Maste)是可以重复使用特殊页面。一些常用模块如页首(Header)、页尾(Footer)与导航(Navigation)。模块可用在页面中或是其他模块中。只要修改模块,在所有引用这个模块的页面中的模块也会相应跟着同步更新。 模块的概念犹如PowerPoint 中母版、Dreamveawer中模板的概念,熟练掌握模块可以大大提高原型设计的效率,并使原型易于管理维护。
组件的复用是axure默认传达的第一个复用原则,axure内置有基本的Web组件和流程图组件。当然,axure还提供了更高级的组件复用——自定义组件库。在Web设计中,为了保持一致性每个系统模块都会有大量的重复设计出现,如按钮样式、链接样式、表单样式、Tab页签样式、翻页样式、图片大小、输入框交互等等等等
Axure的自定义组件可以使用有心人制作的,比如官方提供的基于雅虎风格的Web组件套装和mobile原型设计组件(下载地址)、比如有个牛逼的老外制作的2套Web原型(下载地址);也可以自己在项目过程中自我总结创建。
在控件面板中点击下拉菜单的“Create library”(创建组件)选项,这时会弹出一个保存对话框让对这个.rplib文件进行命名和保存,Axure会立刻启动另一个执行程序并打开这个刚建好的 .rplib文件。
在新的Axure程序界面中,原本站点地图面板的位置会被组件库面板(Widget Library Pane)所取代。你可以像处理页面一样对组件进行新增、删除、排序。
Axure启动时,如果已经把创建好的自定义组件库(.rplib文件)放在Windows文件夹的―我的文件> My Axure RP Librarie目录中,则该组件库会被自动加载到控件面板中。另外,你也可以手动选择你所指定的 .rplib 文件进行组件库加载。新建立的自定义组件库的操作方式就如同其它的默认组件库一样,以拖放(Drag&Drop)的方式将组件放到画布上进行画面的绘制。
虽然自定义组件和模块都基于组件的组合,但组件与模块的区别在于,组件是针对Axure存在的,在所有基于axure完成的页面中都可以使用该组件;而模块是基于某一具体的axure页面存在的,仅在该axure文件下可以使用,如果打开新的axure文件则该模块不存在了。模块针对某一具体项目以单个axure文件为单位组合复用;组件针对所有axure文件为单位组合复用。
模块的复用常用于在某个产品模块中会重复出现的情况下,如展示商品的列表、未登录的弹层、页面头部、导航、页面底部等等。共同的特点就是,在该产品模块下都需要且表现形式都一样。也就意味着如果要修改就得全部修改,如果出现就要不断的“CTRL+C”在“CTRL+V”,由于这些组件并不是单一的,如果是复制的话很可能复制不全,即使你使用了组合。模块则可以很好的解决这些麻烦。
模块有2种制作方式:在页面中框选住需要转发的组件,右键选择“转化成模块”;在左侧导航部分选择“Add Master”(添加模块)进行模块制作。在实际操作中个人觉得第一种方式应用更多,因为肯定是先在页面中进行了全局设计才知道这些组件是可以转化成模块的,有一个全局的考虑先。
模块有以下3种行为:
- 普通行为(Normal):模块可以被移动与放置在线框图中的任何地方,对模块所做的修改会在所有模块实例中同时更新。
- 背景行为(Place in Background):模块应用在线框图中时,会处于线框图的最底层并被锁定。模块实例中所包含控件的位置与在模块中的位置相同,常用于作为模板、布局、底板。
- 自定义控件行为(Custom Widget): 模块应用在线框图中时,模块实例中的控件与原模块失去关联,模块实例中的控件可以像一般控件一样可以进行编辑,就好像只是进行了复制和粘帖操作。常用于创建具有自定义属性、注释和交互的自定义控件库,例如:具有白色文字的蓝色按钮。
axure复用-自定义组件,母版(模板)的更多相关文章
- axure 母版 模板
axure的模板区域是非常重要的一个功能,网站的头部.尾部部分等很多页面同时用到的内容,都可以使用母版,因为在母版中只需要修改一次,就可以实现所有的页面更新,可以大大的加速原型的制作速度.需要重复理解 ...
- 微信小程序入坑之自定义组件
前言 最近接触微信小程序,再次之前公司用的前端框架是vue ,然后对比发现,开发小程序是各种限制,对于开发者非常不友好.各种槽点太多,完全吐槽不过来,所以在此不多说,打算下次专门写一篇文章吐槽一下.本 ...
- HTML5 UI框架Kendo UI Web教程:创建自定义组件(三)
Kendo UI Web包 含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等.在前面的2篇文章<HTML5 Web app开发工具Ke ...
- HTML5 UI框架Kendo UI Web自定义组件(一)
Kendo UI Web包含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等.在Kendo UI Web中如何创建自定义组件呢,在下面的文章中 ...
- Android 之 自定义标签 和 自定义组件
1 自定义标签 这是我的模板项目目录 既然想像 android:text 那样使用自己的标签,那么首先得有标签. 在 res/values/ 下我新建了个 mm_tag.xml (切记 ...
- vue.js2.0 自定义组件初体验
理解 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...
- vue初级学习--组件的使用(自定义组件)
一.导语 突然冒出四个字,分即是合,嗯,优点道理....................... 二.正文 在搞的仿淘宝demo,之前加入购物车是与商品详情一块的,今天把它单独拆出来,复用性高点,那这样 ...
- Angular 向组件传递模板的几种方法
最近在写一个日期选择器组件,为了满足将来可能出现的各种需求,所以需要能够高度的自定义组件的样式.为了达到这个目的,需要能够在日期选择器组件外控制每个日期格子内要显示的内容,比如,标上节假日之类的.这时 ...
- ionic3+angular4开发混合app 之自定义组件
这里主要是记录ionic3+angular4开发混合app时自定义组件,我想自定义组件的方法和angular4应该类似,具体在纯angular4中自定义组件,暂时没有实践,个人觉得差别不大,之后实践了 ...
随机推荐
- UIkit框架之UItableview
1.继承链:UIScrrollView:UIview:UIresponder:NSObject 2.创建实例的时候首先需要确定table的类型 3.一个tableview对象必须要有一个数据源和一个委 ...
- 数据库类II
<!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...
- Server.Transfer和Response.Redirect区别
根本上,Response是叫浏览器去重新转向到指定的网页,而Server自然是发生在服务器端为主了,因此会有以下区别:1. Server.Transfer只能够转跳到本地虚拟目录指定的页面,而Resp ...
- 【Sublime Text 3】
- 用Xshell访问 虚拟机里的kali
1.vim /etc/ssh/sshd_config 2.PermitRootLogin without-password复制 3.把一个PermitRootLogin without-passwor ...
- OpenHCI - 4.2 Endpoint Descriptor
4.2 Endpoint DescriptorAn Endpoint Descriptor (ED) is a 16-byte, memory resident structure that must ...
- 发布b3log-solo后,访问http://localhost:8080/b3log-solo/提示错误为staticServePath Error。
发布b3log-solo后,访问http://localhost:8080/b3log-solo/提示错误为staticServePath Error. latke.props内容为: serverS ...
- CentOS 6.3配置PPTP VPN的方法
1.验证ppp 用cat命令检查是否开启ppp,一般服务器都是开启的,除了特殊的VPS主机之外. [root@localhost1 /]# cat /dev/ppp cat: /dev/ppp: No ...
- sql server触发器中增删改判断
触发器生效逻辑 在Before或者After之后使用INSERT,DELETE,UPDATE 触发器内情况判断 插入 if exists(select 1 from inserted) and not ...
- UIImage加载图片的两种方法区别
Apple官方的文档为生成一个UIImage对象提供了两种方法加载图片: 1. imageNamed,其参数为图片的名字: 2. imageWithContentsOfFile,其参数也是图片文件的路 ...