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

相关推荐

  • 18清美考研交叉学科交互设计高分学员黎娜经验分享

    Dream Big,Work Hard黎娜本科广州美术学院  工业设计我的一些基本情况:我本科毕业于广州美术学院工业产品设计系。大学期间由服装设计转为产品设计,产品设计主要是偏向于生活家居类小产品。我大概是在去年快毕业的那段时间第一次从考研的同学那里了解到“信息艺术设计交叉学科”,2018年6月底就决定报考这个专业。7月到10月:7月刚刚来北京备考时的状态大概处于仅仅很想考“信息艺术设计”这个专业,但是根本不知道考试内容是什么,更不用说...

    2018-04-17
  • 【案例解析】设计思维方法赋能设计落地

    作者:百度UE大讲堂   一、什么是设计思维呢? 顾名思义,设计思维就是设计师用来思考问题和解决问题的方法。如何培养设计思维?今天这篇用两个实战案例帮你一窥设计思维的奥妙。 我们先来看一个小测试:以下的方案…

    交互专题 2017-08-07
  • 一个项目解读交互设计的3个核心价值

    作者: 小米渣和大冬瓜   说到交互设计的价值,很多人可能一脸懵逼,交互不就是一个画线框图的嘛,然后再用各种乱七八糟的线连在一起。其实这一直以来是行业内对交互设计的一种“误解”,线框稿只是交互设计师最终产…

    交互专题 2017-08-07
  • 优化夜间阅读体验-夜间模式设计通用方法

    作者:花咯   你有没有在夜间使用移动设备的习惯?你觉得QQ现有的夜间模式亮度在使用时是否舒适?为了能够更科学的验证我们的设计,我们通过对比度分析、尼特值测试、色彩亮度和色彩通用性等维度去设计界面,并总结…

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

    周五在会议室被吹感冒了,周六又因为之前约了牙医所以跑出去一整天,晚上回来就发烧了,昏昏沉沉睡整夜整日。然后发现我果然劳碌命,生病都挑周末,工作日一到立马恢复了…不过这几天就都没写总结,想想心里还有点慌…

    交互专题 2015-08-20
  • 如何设计完美的移动端表单【UXRen译#169】

    作者:Levi Kovacs   |  翻译:楠木,校审:小蟹   不是所有人都喜欢填写表单。它不是什么有趣的事情,但它是我们必须做的事,完成一件事情的方法,可以说是一个工具。所以,让我们不再关注如何让它有趣,而是如何…

    交互专题 2017-08-07
  • iOS 11 正式版即将到来,这里有 30 个值得关注的变化

    作者:周韶宏   随着新 iPhone 的发布,iOS 11 正式版会在 9 月 19 日推送。 新的操作系统在今年 6 月的开发者大会上面向开发者发布,当时它更像是一个用于展示的、并不完整的简单版。 之后 3 个月,iOS 11 陆续放…

    交互专题 2017-09-13
  • 微信的扫码和摇一摇,给老美好好上了一堂创新课 【UXRen译#150】

    作者: YUNNUO CHENG & RALUCA BUDIU @NNGroup |  翻译:张维钢、朱玲 ,校审:Junliang   摘要:与美国相比,在中国扫描二维码和摇一摇成为了有效沟通线上线下的交流方式,并且应用广泛。   图为中国“绝味鸭脖…

    交互专题 2017-08-07
  • 互联网设计的互惠原则:索取前请先给予【UXRen译#187】

    作者:凯特. 迈耶、 金. 弗莱厄蒂 |  翻译:毛毛,校审:天蛙   摘要:人类倾向于回报别人的好意,投之以木桃,报之以琼瑶。这种社会心理学理论可被应用于用户交互设计中,来获得用户的信任并让他们积极参与到你的…

    交互专题 2017-11-23
  • 2017年移动端用户体验设计趋势【UXRen译#167】

    作者:Hannah Levenson   |  翻译:雪代巴,校审:小四   先看下在过去的这些年有哪些变化!两年前,移动端应用的专业人士还在研究操作手势的问题,交互设计师仍专注于手指触发研究,大家才刚刚开始意识到极简设计…

    交互专题 2017-08-07