组件(控件)是用于设计线框图的用户界面元素。在组件(控件)面板中包含有常用的控件库,如按钮、图片、文本框等。从组件面板中拖动一个控件到线框图区域中,就可以添加一个组件。组件可以从一个线框图中被拷贝(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复用-自定义组件,母版(模板)的更多相关文章

  1. axure 母版 模板

    axure的模板区域是非常重要的一个功能,网站的头部.尾部部分等很多页面同时用到的内容,都可以使用母版,因为在母版中只需要修改一次,就可以实现所有的页面更新,可以大大的加速原型的制作速度.需要重复理解 ...

  2. 微信小程序入坑之自定义组件

    前言 最近接触微信小程序,再次之前公司用的前端框架是vue ,然后对比发现,开发小程序是各种限制,对于开发者非常不友好.各种槽点太多,完全吐槽不过来,所以在此不多说,打算下次专门写一篇文章吐槽一下.本 ...

  3. HTML5 UI框架Kendo UI Web教程:创建自定义组件(三)

    Kendo UI Web包 含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等.在前面的2篇文章<HTML5 Web app开发工具Ke ...

  4. HTML5 UI框架Kendo UI Web自定义组件(一)

    Kendo UI Web包含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等.在Kendo UI Web中如何创建自定义组件呢,在下面的文章中 ...

  5. Android 之 自定义标签 和 自定义组件

    1    自定义标签 这是我的模板项目目录     既然想像 android:text  那样使用自己的标签,那么首先得有标签. 在 res/values/ 下我新建了个 mm_tag.xml (切记 ...

  6. vue.js2.0 自定义组件初体验

    理解 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...

  7. vue初级学习--组件的使用(自定义组件)

    一.导语 突然冒出四个字,分即是合,嗯,优点道理....................... 二.正文 在搞的仿淘宝demo,之前加入购物车是与商品详情一块的,今天把它单独拆出来,复用性高点,那这样 ...

  8. Angular 向组件传递模板的几种方法

    最近在写一个日期选择器组件,为了满足将来可能出现的各种需求,所以需要能够高度的自定义组件的样式.为了达到这个目的,需要能够在日期选择器组件外控制每个日期格子内要显示的内容,比如,标上节假日之类的.这时 ...

  9. ionic3+angular4开发混合app 之自定义组件

    这里主要是记录ionic3+angular4开发混合app时自定义组件,我想自定义组件的方法和angular4应该类似,具体在纯angular4中自定义组件,暂时没有实践,个人觉得差别不大,之后实践了 ...

随机推荐

  1. hdu 2060

    ps:天了噜...WA了无数次...结果就是粗心了...先是YES和Yes的错,再后来是运算的错....想死 题意:先给出N,接下来是N个数据,给出a,b,c,分别是桌面剩下的球数,p的分数,q的分数 ...

  2. linux下的文件权限管理

    权限管理有两个层面 第一层区分用户:文件属主(u), 组用户(g), 其它(o) 第二层区分权限:读(r),写(w),可执行(x) 这两个层次构成文件权限管理的二维结构 u         g     ...

  3. php大力力 [004节]PHP常量MAMP环境下加载网页

    我的问题是:“让mamp加载PHP文件”. 这个特别简单的问题,刚才也把我憋了几个钟头,唉....土啊,新学一个东西,学习成本就是高. 刚刚吃了好吃的南邵小龙虾,以及美味的八里桥大螃蟹,痛苦了半天,终 ...

  4. Qt 中使用vector

    新建Empty qmake project,包含如下两个文件: .pro文件 SOURCES += \ main.cpp QT += core CONFIG += c++11 // 支持C++11 . ...

  5. MVC中Asp.Net管道(二)

    Asp.Net管道: 1.在工作进程w3wp.exe中,利用asp.net_isapi加载.NET运行时,6.0中引入了应用程序池的概念,一个工作进程对应的一个应用程序池.一个应用呢程序池可以加载一个 ...

  6. Selenium - 实现网页元素拖拽

    Drag and Drop, 使用鼠标实现元素拖拽的操作貌似很复杂, 在Selenium中, 借助OpenQA.Selenium.Interactions.Actions类库中提供的方法, 实现起来还 ...

  7. Play Framework常用标签list,set,如何遍历list、map类型数据

    最近一段时间的项目都是在Play这个框架上进行开发的,挺强大的,但不足之处也挺多的.今天分享下play中强大的标签,遍历list,map类型的数据的用法. 遍历单纯的list数据,例如:List< ...

  8. 【转】C++11中的std::function

    原文地址:http://www.jellythink.com/archives/771 看看这段代码 先来看看下面这两行代码: std::function<void(EventKeyboard: ...

  9. 怎样查看python的api

    python -m pydoc -p 4567 python -m pydoc表示打开pydoc模块,pydoc是查看python文档的首选工具: -p 4567表示在4567端口上启动server; ...

  10. JS初学之-点击元素,当前的显示样式,其他变灰色

    点击按钮或者其他元素,当前的变化,其他的不变(比如选项卡按钮,点击当前的变为黄色,其他的不变色),这样的情况我们有两种思路: 1.全部清空,当前添加 for(var i=0;i<aBtn.len ...