Axure神器:用母版打造模块化设计【UXRen原创】

Axure神器:用母版打造模块化设计【UXRen原创】

作者:Petrel(UXRen社区Axure金牌讲师,资深交互设计师)

Axure原型的制作过程中,你一定遇到过这样的问题,出现在不同页面的功能模块,如果你是通过复制粘贴来完成的,那么当该模块发生变动需要修改时,麻烦就大了,个个需要改,可能改的不一致,也有可能会漏改,以至于辛辛苦苦改了半天,一上会演示,看到的是没有改过的旧版~~ 心痛~~

此时,就该母版发挥作用了,合理的使用母版进行模块化设计,会使你的原型制作事半功倍。

针对母版如何高效使用,下面进行较详细的说明:

一、母版的作用

  • 减少重复工作,提高制作效率;
  • 统一修改维护,提高中途修改效率;
  • 共用资源,提高原型运行效率。

二、模板的基本操作

母版窗口位于软件工作环境的左下角,基本操作同其他功能一样:

  • 新建,窗口顶部的添加按钮可以添加,也可以把页面中已经做好的模块选中后,通过右键转换为母版;

Axure神器:用母版打造模块化设计【UXRen原创】

  •  删除,母版窗口中,选中母版后按delete键删除,或者右键菜单删除;
  • 重命名,选中母版后,再次点击可对母版名称进行修改,或者右键菜单重命名;
  •  编辑,母版窗口中,双击母版,主窗口打开母版页面进行编辑,或者在有使用母版的页面中双击母版,打开母版页面进行编辑;
  • 新建文件夹,窗口顶部的新建文件夹按钮,或者右键菜单中新建选项;
  •  对母版进行组织管理,直接在窗口中拖动母版调整母版顺序活层级关系,或者通过右键菜单“移动”选项进行调整;
  • 添加到多个页面,通过右键菜单添加到多个页面选项(Add to Pages),可以选择要添加到的页面,并可以设定添加到页面的位置;
Axure神器:用母版打造模块化设计【UXRen原创】
  •  从多个页面中删除,右键菜单操作,这个值得一提的是,当母版已经被页面使用时,是无法被删除的,需要先从页面中删除母版,此时可以用到这个功能,进行一次性删除;

Axure神器:用母版打造模块化设计【UXRen原创】

三、模板的导入功能

当一个新的文件想要使用现有文件中的母板时,可以通过新文件的导入功能,将文件中的母版导入新文件。具体操作步骤:

菜单“文件”→“从RP文件导入”→ 选择目标文件 → 跳过“页面导入”步骤 → 选择要导入的目标母版 → 确定导入动作(add/action)→跳过其他导入选项(导入自适应视图 、导入配置文件、导入页面说明字段 、导入元件说明字段 、导入页面样式、导入元件样式、导入变量、导入参考线)

Axure神器:用母版打造模块化设计【UXRen原创】

Axure神器:用母版打造模块化设计【UXRen原创】

Axure神器:用母版打造模块化设计【UXRen原创】

这样,新文件的母版窗口就会出现导入的母版,从而可以在新文件中使用。

母版在原始文件中更新后,一定要通过“导入”功能,并在导入行为中选择 “replace”,将更新后的母版导入,这样新文件中的母版才会更新,页面使用到母版的地方才会同时更新。

另外,在首次导入母版时,可以在原文件的页面中复制该母版粘贴在新文件的页面中,这样,所用到的母版就会出现在新文件的母版窗口。这种方式快捷,但是只适用于添加新母版,母版更新无法通过复制粘贴来实现。

四、母版的拖放行为

1、给母版设置的不同拖放行为,会使母版具有不同的特性:
  • Palce Anywhere;

普通母版,可拖放在页面的任何位置,统一修改维护,母板有更新,所有用到该母版的页面都会更新;

  • Locked to Master Location;

固定位置母版,在页面中的位置固定,统一修改维护,母板有更新,所有用到该母版的页面都会更新,包括母版位置的更新也会在所有页面中更新;

  • Break Away;

母版被拖入到页面中后,即与原母版脱离关系,可在页面中进行修改,而不影响母版本身,母版的修改更新也不会影响到之前使用过该母版的页面;

2、设置母版拖放行为的方法:
  •  母版窗口中,母版的右键菜单→放置行为(Drop behavior);
  • 通过页面中已有元件,转换为母版时,选择放置行为(Drop behavior);

Axure神器:用母版打造模块化设计【UXRen原创】

Axure神器:用母版打造模块化设计【UXRen原创】

五、母版的触发事件

母版内的元件事件(events)是不能对母版外的其他元件执行动作(action)的;当你想通过母版内的元件控制母版外元件时,你会发现找不到外部元件,而当你在页面中使用母版时,也会发现母版没有事件。细想一下可以理解,一个母版会被多个页面使用,那么如果母版内的元件可以控制母版外元件时,页面中使用到母版的地方所对应的动作也应该都是一样的,但这样的情况时很少见的。除此之外,Axure中的事件逻辑是同一个页面内的元件才可以互相控制,跨页面需要通过中间变量和中间事件来转换才能达到跨页面控制的效果。而母版本身不属于哪个页面,又同时会被多个页面使用,如果母版内的元件能够控制母版外的元件,那就与这个逻辑相违背了。

不管上面的解释有没有看明白,我们只要知道一点,母版内的元件事件触发不了控制母版外的元件的动作。在页面中,母版是一个整体,想要使用母版的事件,需要先对母版触发事件(Raised events)进行管理。

1、管理母版触发事件

所谓管理母版触发事件,就是为母版新增/删除事件,同时将母版事件与模板内的元件事件相关联,具体操作如下:

  • 方法一:双击打开母版的情况下(也就是在母版内部),通过菜单“布局(Arrange)”→“管理触发事件”,在打开窗口中,可对母版的触发事件进行添加、删除、移动等操作;

Axure神器:用母版打造模块化设计【UXRen原创】

  • 方法二:在母版中选中某个元件,选择任意事件后,在动作(action)窗口中,也可对触发事件进行新增、删除、移动操作(这个窗口主要用来执行第2步,关联触发事件,见下图)。
2、关联母版的触发事件到元件事件

本步操作就是将母版内元件的事件与母版的触发事件关联起来,例如,给母版定义了A、B、C三个事件,那么预览时是哪个元件的什么事件才能触发母版事件触发的动作,就从这一步来完成,具体操作:在母版中选中某个元件,选择想要的元件事件,在动作(action)窗口中,选择“Raised event”,在右侧窗口中勾选需要关联的母版事件。

Axure神器:用母版打造模块化设计【UXRen原创】

因此,一个元件事件可以关联多个母版事件,在预览时,这个元件事件可以触发该母版事件相关的动作(action)(在页面中针对母版事件设置的动作);多个元件事件也可以关联到同一个母版事件,这样在预览时,这几个元件事件任何一个事件发生,都会触发该母版事件相关的动作(action)(在页面中针对母版事件设置的动作)。

3、 设置母版事件的关联动作

本步骤操作是将母版事件与页面中其他元件关联起来,实现母版内元件对页面中元件的控制。具体操作是,在页面中选中母版,右侧属性窗口会出现母版事件(第1步中定义的母版事件),双击母版事件(同元件事件的使用方法),给母版事件设置相关的动作(action)。

Axure神器:用母版打造模块化设计【UXRen原创】

通过以上三个步骤,我们就把母版中的元件事件(event)与针对页面中的元件需要执行的动作(action)关联了起来。而母版事件,起到一个衔接作用。

 

推荐阅读

交互设计入门完全指南
交互设计初体验
【思考】产品跑偏了?因为他一直在画高保真原型啊
【UXRen原创】Sketch和Axure画原型,哪个好用?
【思考】如何培养正确的原型设计思维?

UXRen


UXRen社区欢迎各界 用户体验从业者及学生 投稿优质原创文章。投稿请关注UXRen社区公众账号cnUXRen(下面有二维码)留言“我要投稿”,小编会及时与您取得联系。

版权声明:除转载文章外,本站所有文章版权归UXRen社区所有,转载请注明出处:UXRen社区,并保留本站原文链接地址。本站部分文章来自互联网及公开渠道,如有侵权请及时联系我们。邮箱:contact@13tech.com.cn

 
关注UXRen微信公众号(cnUXRen)

UXRen社区欢迎各界用户体验从业者及学生投稿优质原创文章。投稿请关注UXRen社区公众账cnUXRen(上面有二维码)留言“我要投稿”,小编会及时与您取得联系。 

版权声明:除转载文章外,本站所有文章版权归UXRen社区所有,转载请注明出处:UXRen社区,并保留本站原文链接地址。本站部分文章来自互联网及公开渠道,如有侵权请及时联系我们。邮箱:contact@13tech.com.cn

原创文章,作者:震天下,如若转载,请注明出处:https://www.iamue.com/21105/

(0)
震天下震天下
上一篇 2017-08-04 16:40
下一篇 2017-08-07

相关推荐

  • 算法驱动设计趋势已来,产品设计如何与算法进行创新合作?

    译者:舒舟,阿里巴巴/1688事业部/无线交互   过去的一年,BBC UED团队(原1688UED团队)花费了巨大的资源和精力投入阿里巴巴集团中台DPL(Design Pattern Library)项目,旨在通过设计模式的提炼及抽象,由规则和…

    交互专题 2017-08-07
  • 重温《别让我思考》,这本书到底告诉了我什么【UXRen译#141】

      作者:Nick Kellingley(交互设计基金会社区经理)| 译者:天蛙,审校:xing   《Don’t Make Me Think》是人机交互和易用性工程师Steve Krug写的一本书的书名(中文版本的书名是《点石成金》)。这本书教用户体验…

    交互专题 2017-08-07
  • 交互设计师的60日计划之第一天

    此次分享的 [button type="info" text="交互设计师的60日计划" url="https://www.iamue.com/tag/interaction-designers-of-60-days" open_new_tab="false"] 来自 Killa.G 让我们一起跟着学习和并学会做自己的总结与…

    交互专题 2015-08-20
  • 前Apple员工谈交互设计的未来【UXRen译#177】

    作者:Bret Victor  |  翻译:包子,校审:Chen Jing   现在,有很多流行的有关未来交互设计的想象。 机缘巧合下,设计未来的交互界面成为了我的工作。我有机会用真正能工作的原型来做设计,而不是如图所示用绿光屏…

    交互专题 2017-08-30
  • 我们对轮播图的设计,都错了

    作者:Jana@腾讯ISUX   轮播图(Carousels)这样的交互方式,在web时代似乎已经司空见惯。当一群人在会议室里争夺首屏焦点图的优先级时,使用轮播图,似乎能够不费吹灰之力地解决这场争端,没有人是输家。然而,轮…

    交互专题 2017-08-07
  • 交互设计师的60日计划之第十一天

    今天又是上下午都有会,下午还感冒了…差点忘记写每日,要睡了突然想起来,就拿用研小总结凑个数吧。 20150806 及时给出反馈结果 用户的一些基本特点比起用户体验更注重功能,期望能有更多的功能。开发人员学习能力…

    交互专题 2015-08-20
  • 交互设计师的60日计划之第八天

    今天仍然在处理上周五的需求。参与讨论的人越多,战线就拖得越长。不过讨论虽然效率低,却能出现各种各样的想法和方案,不靠谱的,靠谱的。 2015/08/04 与老大谈话所得题目起的有点大,不过这是今天老大和我讲的主…

    交互专题 2015-08-20
  • 杭州-UI设计师招聘需求

    点击上方蓝字一起关注这个公众号吧!什么是用户体验用户体验是一种纯主观的在用户使用一个产品(服务)的过程中建立起来的心理感受。把最终用户作为设计和开发活动的焦点,而不是系统、应用程序或者单纯的审美价值。它是基于一般的以用户为中心(用户至上)的设计理念。最简单的用户体验(User Experience,简称UE),最直接影响你的网页浏览度的因素。在网站策划和网站运营当中,用户体验是最重要的一个因素,直接影响到你的网站是否成功。网站用户体验(...

    交互专题 2018-03-13
  • 深入研究了4款外卖APP,我做了交互优化

    作者:陈仁杰 题外话:作为一名交互设计师,平时闲下来特别喜欢分析市场上的一些具有代表性产品的交互设计。同样,作为一名资深的吃货,毋庸置疑,当然先给大家分析几款“外卖”的交互设计。 首先,我将分析的逻辑和…

    2017-08-04
  • 从京东注册优化谈如何做到细节设计

    作者: 厚江   京东注册优化是来京东后第一个相对完整的设计项目。毕业后初涉交互设计工作,导师对我的第一个要求就是在设计过程中,重视对细节的设计。本文即从京东注册优化项目的一些方面谈谈对细节设计的体会。 …

    交互专题 2017-08-07