Axure RP 8 入门手册 – 第7章

第7章母版管理第1节母版简介第2节添加/编辑/删除第3节添加母版到页面中第4节从页面中移除母版第5节拖放行为第6节自定义触发事件第7章母版管理第1节母版简介圆儿:小楼欧巴!小楼:圆圆好!圆儿:老师,我就一个圆!小楼:可是我喜欢两个圆啊!圆儿:老师…你正经一点儿好不好嘛!小楼:呃……你想问什么?圆儿:我想问,在做很多个页面的时候,如果每个页面中都有相同的内容,有没有办法不用每个页面都做一次?当然,我知道能够复制粘贴,但是,如果将来再发生改...

7         母版管理

1         母版简介

2         添加/编辑/删除

3         添加母版到页面中

4         从页面中移除母版

5         拖放行为

6         自定义触发事件

7         母版管理

1          母版简介

圆儿:小楼欧巴!

小楼:圆圆好!

圆儿:老师,我就一个圆!

小楼:可是我喜欢两个圆啊!

圆儿:老师…你正经一点儿好不好嘛!

小楼:呃……你想问什么?

圆儿:我想问,在做很多个页面的时候,如果每个页面中都有相同的内容,有没有办法不用每个页面都做一次?当然,我知道能够复制粘贴,但是,如果将来再发生改动的话,还是每个页面中都要再修改一次。太麻烦啦!

小楼:这个简单呀!我来告诉你,怎么弄一次,以后都很爽!

Axure中可以通过母版解决多个页面中重复内容的编辑问题。就像PPT中的母版一样,只需要把每个页面中都有的内容在母版中编辑完毕,然后添加到相应的页面中。当页面中添加了母版的内容时,如果母版中的内容发生了改变,页面中的内容也会同步改变。

2          添加/编辑/删除

我们先来看一下母版的基础操作:新建、编辑与删除。(图7-1

Axure RP 8 入门手册 – 第7章

(图7-1

新建

点击面板中的新建按钮或者点击面板空白处按快捷键<Ctrl+回车键>完成母版的创建。

编辑

创建后可以对母版名称进行编辑,双击母版名称,画布则变成母版的编辑区域。母版画布中可以像组织页面内容一样,放入元件、添加交互等组成模板的内容。

删除:

如果需要删除一个母版,需要先将母版从所有关联的页面中移除,才可以删除母版。被删除的母版有下级母版时,下级母版将被同时删除。如果需要查看母版被添加到哪些页面中,可以在母版名称上点击【鼠标右键】,在菜单中选择【使用情况】进行查看。

3          添加母版到页面中

在母版名称上单击<鼠标右键>,打开右键菜单,在菜单列表中点击选项【添加到页面中】,在弹出的窗口中,可以指定将母版放到哪些页面中使用。指定页面的时候软件提供了一些快捷功能给我们使用。(图7-2

Axure RP 8 入门手册 – 第7章

(图7-2

4          从页面中移除母版

如果页面上不再需要某个母版,或者将某个母版添加到了无需添加该母版的页面中,我们可以通过在母版名称上点击<鼠标右键>,打开右键菜单,选择【从页面中移除】,在打开的页面中选择要移除的页面后,点击【确定】即可完成移除。(图7-3

Axure RP 8 入门手册 – 第7章

(图7-3

另外,也可以在页面中,点击母版将其选中,然后按下<Delete>键其删除。

5          拖放行为

圆儿:小楼欧巴,像一些网站的底部信息,每个页面中也都相同,这种内容可以做成母版使用吗?

小楼:可以呀!

圆儿:但是,我刚刚试了一下。因为页面长度都不一样,底部信息的母版添加到页面时只能一个一个添加,还要指定添加后的位置,好麻烦!

小楼:你有没有脱一下试试?。

圆儿:脱……

小楼:拖……这该死的输入法!

母版除了使用前面的方法添加到页面中,还可以通过点住母版名称拖放到画布中的方式添加到某个页面中。而且为了满足不同情况的需要,软件提供了三种拖放方式。拖放方式的选择可以通过在母版名称上点击<鼠标右键>,打开右键菜单,在【拖放行为】的二级菜单中进行选择。(图7-4

Axure RP 8 入门手册 – 第7章

(图7-4

任意位置

允许将母版内容放入画布中的任意位置上摆放。

固定位置

母版内容放入到画布中并松开鼠标后,母版内容会自动放置到画布中的固定位置上,这个位置与母版中该内容所在的位置一致。

脱离母版

允许将母版内容放入画布中的任意位置上摆放。但是,当拖放结束后,这些内容与母版脱离联系,变成普通元件存在于画布中。母版进行编辑发生改变时,这些内容不会同步发生变化。

6          自定义触发事件

圆儿:这样果然很方便!但是还有个问题。母版中的内容,包括交互都是可以重用在任何页面上,并且与母版保持一致。但是,假如母版中有一个按钮,我需要在不同的页面中,点击这个按钮时,显示不同的内容。需要怎么做呢?

小楼:我没太听懂,你举个例子说一下。

圆儿:比如说啊! AB两个页面中添加了同一个母版,母版中有一个在线客服的按钮。在A页面中,鼠标进入这个按钮时显示客服小张的头像,而在B页面中,鼠标进入这个按钮时则显示客服小李的头像。

小楼:嗯,这么说我就明白了。我也给你举个例子。我们家里用电,如果只有一个供电总线,那么开关供电总线的电闸会影响家中所有的供电。但是,我们希望每个房间的供电都能单独控制,所以,需要安装一个设备叫“配电箱”,通过配电箱就可以对每个房间的供电进行单独管理,不会互相影响。在Axure中,母版中的每个触发事件添加交互都像供电总线,影响所有使用了这个母版页面。如果在添加了母版的页面上给母版中的某个触发事件单独添加交互,这就需要我们给母版中的这个触发事件接上一个“配电箱”,这个“配电箱”的名字叫“自定义触发事件”。

案例13:母版的自定义触发事件

创建一个母版,命名为“OnlineService”。(图7-5

Axure RP 8 入门手册 – 第7章

(图7-5

双击母版名称,在画布中打开母版的编辑区域,然后,添加母版中的内容,一个矩形按钮和用于显示头像的图片。因为在鼠标进入按钮时,需要添加交互改变头像图片,所以我们需要为图片元件命名为“CallCenter”;(图7-6

Axure RP 8 入门手册 – 第7章

(图7-6

2、创建一个自定义的触发事件,就如同需要购买一个配电箱。

创建自定义触发事件,需要先双击母版名称,打开母版的编辑区域。然后,在导航菜单中,点击菜单项【布局】,选择列表中的最后一项【管理母版触发事件】中进行创建。本案例中,需要对按钮元件的【鼠标移入时】事件进行不同页面的交互设置,就可以点击【+】添加一个自定义的触发事件名称,比如:“MyMouseMove”。(图7-7

Axure RP 8 入门手册 – 第7章

 (图7-7

注意:只有画布中编辑母版的内容时,才能在导航菜单中打开【管理母版触发事件】的选项。否则,该选项为灰色的禁用状态。

将母版中的触发事件与自定义触发事件绑定,就像将供电总线接入配电箱。

为按钮元件的【鼠标移入时】事件添加交互,【添加用例】,并设置动作为选择【引发事件】为“MyMouseMove”。(图7-8

Axure RP 8 入门手册 – 第7章

 (图7-8

为每个页面的按钮元件分别添加不同的动作。

将母版添加到PageAPageB两个页面中。在添加了母版的页面中点中母版,则会在交互的功能界面中出现这个母版中绑定的所有自定义触发事件,就像从配电箱中接出的分线。(图7-9

Axure RP 8 入门手册 – 第7章

(图7-9

页面PageA

为自定义触发事件“MyMouseMove”,添加用例设置动作为【设置图片】于图片元件“CallCenter”,为客服小张的头像。(图7-10

Axure RP 8 入门手册 – 第7章

(图7-10

然后,继续设置动作【显示】图片元件“CallCenter”,【更多选项】中选择“弹出效果”。弹出效果能够让鼠标离开时,显示出来的图片元件“CallCenter”再自动恢复隐藏状态。(图7-11

Axure RP 8 入门手册 – 第7章

(图7-11

页面PageB

为自定义触发事件“MyMouseMove”,添加用例设置动作为【设置图片】于元件“CallCenter”,为客服小李的头像。(参考图7-10

然后,继续设置动作【显示】图片元件“CallCenter”,【更多选项】中选择“弹出效果”。(参考图7-11

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/36696/

(0)
交互精选交互精选
上一篇 2018-04-25
下一篇 2018-04-25

相关推荐

  • Axure RP 8 入门手册 – 第3章

    第3章元件功能概述第1节鼠标的操作第2节元件的使用第1节鼠标的操作麦子:老师,老师!小楼:干吗,干吗?麦子:不......小楼:呃......麦子:我想做一个页面,但是那些元件都怎么用啊?小楼:点住了拖到画布里面用呀!麦子:我知道是拖进去,但是我想要一个向左倾斜的圆形。小楼:你是仇人派来玩儿我的吗?圆形怎么倾斜?麦子:对不起,老师!少打个“椭”字。小楼:艹。在Axure中,如果需要一个椭圆形,可以放入一个矩形元件到画布中,然后,点击矩形...

    2018-04-05
  • 交互设计的重要性

    陌陌年会以疯x做伴手礼 引起互联网一片羡慕今天以陌陌产品为例讲讲交互设计的重要性在浏览页面时,左滑、点击返回按钮都可以回到上一页为什么发布帖子使用的是取消按钮而不是返回,也不可使用左滑呢如下:发布圈子非浏览而是在完成某一任务,点击返回或者左滑返回上一页,给用户任务未结束的负担,我只是返回了 并未取消任务的困扰

    2018-02-23
  • 【新锐玉商风云榜】颜传赞:以‘用户体验’为支点 撬动家装行业“一键式”转型升级

    在父辈创造的奇迹上,是传承、是创新、是开拓,每一位新生代年轻玉商都在给出自己的答案。——“新锐玉商”专栏总题记新锐玉商风云榜他是“2016浙商年度创新人物”;他提出“构家”如“构车”的“一键式”整体家装新理念,推动家装行业从传统的手工作业升级为家装工业4.0;他的公司“构家”获得复星集团数亿A轮投资。他就是坊间广称为“船长”——杭州构家创始人兼CEO颜传赞。在经济创新这条漫长的大道上,颜传赞以玉环人海派的作风和追求卓越品质的韧性,谱写“...

    2018-02-03
  • Axure基础

    目录(使用微信自带页面搜索功能)第一章 使用元件基础1. 添加元件到画布基础2. 添加元件名称基础3. 设置元件位置/尺寸基础4. 设置元件默认角度基础5. 设置元件颜色与透明基础6. 设置形状或图片圆角基础7. 设置矩形仅显示部分边框基础8. 设置线段/箭头/边框样式基础9. 设置元件文字边距/行距基础10. 设置元件默认隐藏基础11. 设置文本框输入为密码基础12. 设置打开选择文件窗口基础13. 限制文本框输入字符位数基础14. ...

    2018-03-15
  • 用户体验进一步提升!微信官方将优化小程序授权

    序多多小程序无需开发,轻松上手,小程序极速免费生成!十分完美的事物中在这个世界上是不存在的,每个事物需在近乎完美的道路上苛求自己,不断完善。小程序亦是如此,它是互联网时代进步的产物,被互联网大佬们追逐,被用户用完即走。但它也有被人诟病的地方,即会在用户首次启动时直接要求授权,甚至有的小程序会出现若用户不授权,小程序将会出现异常,或进入死循环的情况。相信很多用户都遇到过不授权便会出现死循环的小程序,最后只能退出微信重新进入,造成用户体验很...

    2018-04-21
  • 从「重新设计火车票样式」,谈用户体验设计

    作者:无鹿森全文共 2522 字,阅读需要 6 分钟———— / BEGIN / ————“用户体验”是随着互联网的日益深化而变得越来越热的话题之一,它所代表的就是互联网产品和人性本身的相互共鸣,并且这种共鸣在今天而言,显得越来越弥足珍贵。从交互设计到视觉设计,怎么样才算是“好的用户体验”?一直以来,大部分情况下的论调都停留在主观意识层面上,这也使“用户体验”的话题本身显得更加难以拿捏和扑朔迷离。本文将从“重新设计高铁票样式”的角度来切...

    2018-05-04
  • 像用户体验设计师那样思考

    [国外设计第158期][图片]插画来自Crafticons培养探索未知的心态(持续)学习用户体验是最需要技巧的事情。因为这不是标准教育中的某个正式课题。它总是以某种神秘不可预测面貌示人,直到你在设计、研发、市场推广(或者其他创意领域)中遭遇到用户体验的具体概念。虽然在用户体验方面

    微信热点 2018-04-18
  • 用户体验才是真正的“一句顶一万句” 安徽燕之坊食品公司用勤哲软件实现生产、经营和管理数据的互联互通

    统计数据显示,截止2017年底,国内食品工业企业超过4万家,主营业务收入占全国工业的比重十分之一强。在实施制造强国战略和推进健康中国建设中,食品工业作为传统的“以食为天”的民生产业占据着不可或缺的重要位置。当前,食品行业在实现快速发展的过程中,面对城乡居民安全、多样、健康、营养、方便的食品消费需求时,与其他行业一样面临着转型、升级的动能和压力。尤其是在食品质量安全水平和高品质食品有效供给方面,利用现代信息技术创新消除安全和质量隐患等领域...

    2018-02-13
  • UI设计入门必会:Axure及Adobe系列软件如何安装

    UI设计最最基础的-软件如何正确安装且永久免费试用1、Axure 8.0正确安装、汉化、破解2、UI设计之通过CreativeCloud安装Adobe软件

    微信热点 2018-05-07
  • 用户体验是一门玄学秘籍

    Part 01 - 用户体验和用户体验设计关于“用户体验”这个词,很多刚入行的新人都觉得它玄之又玄,妙不可言。一方面是不知道他具体到底是什么,就好像那是一块理想地,看不见也摸不着,另一方面呢糟糕的用户体验,作为用户是能清晰感觉到它的存在。所以呢,在这里,会围绕“用户体验”这个词做一个科普性质的解释和综述,希望对初学者一些小小的帮助。1.1 什么是用户体验?用户体验的定义有很多种,我比较倾向的解释是:“用户体验是人对于使用一个产品、系统、...

    2018-02-22