Axure RP 9萌新修炼手册-第三章-基础应用(5)

第四节 元件属性

元件属性的设置在交互功能面板的右上方,点击图标即可打开设置面板。(图3-99)

另外,通过上下文菜单,也可以进行属性的设置。(图3-100)

这里我们先了解几个具有代表性的属性设置,更多关于属性的设置,在之后的案例中逐渐了解。

一、单选按钮

单选按钮的属性设置包括:(图3-101)

  • 工具提示:用于添加鼠标指针进入元件区域并悬停时显示的提示文字内容。
  • 单选按钮组:为多个单选按钮添加相同的组名称,即可可以实现按钮单选的交互效果。
  • 禁用:将元件设置为默认禁用的状态,此状态下元件交互失效。
  • 选中:将元件设置为默认选中的状态。

单选按钮一般用于要求用户在多个选项中单选某一项。

例如,用户信息中性别的选择。

案例05:性别选择

1在画布中放入1个文本标签和3个单选按钮元件,并编辑元件的文字。(图3-102)

2、为单选按钮元件设置样式,【按钮】【尺寸】为“15”像素,【左侧】【边距】为“5”像素。(图3-102)

3、为所有单选按钮元件在属性设置中添加【单选按钮组】名称“gender”。(图3-103)

4、在性别“男”的元件属性设置中,勾选【选中】,让这个选项为默认选中的状态。(图3-104)

通过以上步骤,我们就完成了性别单选的交互。

二、形状与图片

形状与图片的属性设置包括:

  • 选项组:为多个形状或图片元件添加相同的组名称,用于实现元件单选的交互效果。
  • 引用页面(图片无此项):为形状元件添加页面链接,点击形状时即可跳转至引用的页面。

关于选项组名称的使用,我们通过一个案例来了解。

案例06:选项的单选

在淘宝购物时,可以选择使用花呗分期付款。

此时,分期包含3个选项,每个选项点击时会改变颜色,但只能有一个选项能够选中并改变颜色。(图3-105)

实现这样的交互,我们需要四个步骤。

1、添加1个文本标签元件和3个矩形元件,并输入相应的文字内容。(图3-106)

2、添加交互样式。

因为每个选项都有两种样式,除了默认样式,我们还需要添加通过选中的交互所呈现的样式。

在画布中将三个选项选中,然后点击鼠标右键,上下文菜单中选择【交互样式】选项,切换到【选中】选项卡,并设置文字的【字色】与边框的【线段颜色】为选中后的颜色。(图3-107)

3、添加交互事件。

形状元件默认为未选中状态,如果想让形状元件变为选中状态,我们需要添加交互事件。

这个交互的关键要素包含:

主体:分期选项

触发:单击时

情形:无

动作:选中

目标:当前被点击的元件

设置:选中

通过思维导图来分析这个交互。(图3-108)


以第一个选项为例,根据分析结果,点击【新建交互】按钮,逐步添加【单击时】【设置选中】“当前元件”为“真”的交互事件。(图3-109)

完成一个分期选项的交互事件后,在交互上点击鼠标右键,在上下文菜单中选择【复制】,或者通过快捷键<Ctrl+C>键进行复制。

然后,点击依次点击其它分期选项元件,通过快捷键<Ctrl+V>键进行粘贴,或者点击交互功能面板中的【新建交互】按钮,找到【单击时】,点击事件后方的【粘贴】按钮进行粘贴。

此时预览原型的话,每一个分期选项在点击时都能够变色。

4、添加选项的组名称。

为了能够让分期选项只有一个能变色,我们还需要为每个分期选项的元件在属性中设置【选项组】名称为“instalments”。(图3-110)

注:花呗分期没有默认的选项,所以无需为第一个选项添加默认【选中】的属性设置。

2.3文本框

文本框的属性设置包含:(图3-111)

  • 类型:设置文本框为各种不同的类型,常用的包括文本、密码、数字、文件与日期。
  • 提示文本:设置文本框与文本域元件内默认的提示内容,提示的样式在交互面板中进行修改。
  • 隐藏提示:设置文本框与文本域提示文字在输入时或光标进入(获取焦点)时消失。
  • 提交按钮:指定表单元件上按下回车键时执行“单击时”交互的元件。
  • 最大长度:设置文本框可输入的最大字符数量。
  • 只读:将元件设置为不可编辑的只读状态。

案例07:文本框的属性

例如一个登录面板,我们就需要进行一些必要的属性设置。

1、添加1个矩形元件作为背景,2个文本框元件作为手机号码和密码的输入框,1个按钮元件作为“登录”按钮。(图3-111)

2、为“手机号码”输入框添加【提示文本】“请输入手机号码”,【最大长度】为11位,并且指定【提交按钮】为“登录”按钮。(图3-111)

3、为“密码”输入框选择【密码】【类型】,【最大长度】为16位,并且指定【提交按钮】为“登录”按钮。(图3-112)

注:如果给提交按钮“Login”添加【单击时】的交互事件,在文本框上按下<回车>键时就会执行这个交互。

 

第五节 使用母版

使用过PowerPoint的读者看到“母版”这个词语基本多少有些了解。

在AxureRP中也提供了母版功能。

使用母版是为了让页面中某一模块内容可以重复使用,并且在修改内容时能够同步更新。

一、创建母版

仍以知乎网站页面为例。

知乎的顶部导航栏在每个页面中都存在,所以在模拟知乎网站原型时,我们可以将导航栏模块在母版中完成,然后添加到每个页面中。

在Axure RP 9的母版功能模块中新建母版并命名,此处命名为“Nav”。(图3-113)


建议使用英文命名母版时,建议采用帕斯卡命名法。无论命名由多少个单词组成,每个单词首字母均大写并且单词之间无任何分隔,可以增强名称易读性,并与页面命名有明显的区别。

在母版功能模块中双击母版名称,打开母版的编辑界面,将导航栏的内容在母版中完成。

如果之前已经在页面中完成了导航栏的制作,此时也可以全选组成导航栏的所有元件,然后点击鼠标右键,在菜单中选择【转换为母版】,并设置名称即可。(图3-114)


二、页面添加或删除母版

当完成母版内容的制作,我们就可以将母版内容添加到各个页面中了。

在母版功能模块中,鼠标右键点击母版名称,菜单中选择【添加到页面中】的选项。(图3-115)

然后,在弹出界面的页面列表中选择需要添加母版内容的页面并进行相应的设置。(图3-116)

最后,点击【确定】按钮就将母版内容添加到了所选的页面中。

如果想删除多个页面中添加的母版内容,可以在母版功能模块中,鼠标右键点击母版名称,菜单中选择【从页面中移除】的选项,进行从页面中移除母版的操作。(图3-115)

如果想从某一页面中移除母版内容,可以在页面中直接选中母版内容,按<Delete>键删除。

不过,通过上面的方式添加的母版,在页面中都会被放置在相同的位置(默认情况下,与母版编辑区中内容所在位置一致),并且无法改变位置。

当我们不希望母版内容在所有页面中都处于同一位置时,可以通过拖入母版到页面编辑区的方式,进行自由的摆放。

例如,网站页面底部的内容往往都是相同的,这些内容就可以做成母版来提高原型的制作效率。

但是,往往页面内容的长度是不同的,所以底部内容的模板在页面中的位置也是不同的,这就需要通过拖动母版到页面编辑区的方式来添加。

通过拖入的方式添加母版,默认是可以通过拖入摆放到任意位置,这和母版上下文菜单(右键菜单)中的【拖放行为】设置有关。(图3-117)

拖放行为的选项有三项:

  • 任意位置:默认选项,可以通过拖动摆放到任意位置。
  • 固定位置:选择此项时,通过拖入方式添加的母版内容和母版编辑区中保持同一位置,拖入后不可改变位置。
  • 脱离母版:选择此项时,通过拖入方式添加的母版内容将与母版失去关联关系,母版内容发生变化时,已拖入页面的内容不会受到任何影响。

三、母版视图

不过,有时候一个网站的导航栏也不是所有页面完全一致。

知乎网站的首页、问题页等都是白色为主的导航栏,尺寸为1000px*52px(图3-118),而话题、发现、消息等页面都是蓝色为主的导航栏,尺寸为960px*48px。(图3-119)


案例08:使用母版视图

这两个导航栏的元素组成区别不大,所以,在制作母版时,我们可以在第一个导航栏的基础上略作修改,完成另一个导航栏。

这里并不需要创建一个新母版。

Axure RP 9支持母版视图功能,我们可以为同一个母版添加不同的视图。

1、添加母版视图

(1)在母版功能模块中双击母版名称,打开母版的编辑界面,样式中点击【添加母版视图】。(图3-120)

(2)在打开的界面中,点击【+添加】按钮,添加新的母版视图并命名,例如“Blue”。(图3-120)

点击【确定】按钮之后,在画布上方,我们能够看到“基本”视图和“Blue”视图的标签。(图3-121)

2、编辑母版视图

我们就可以点击视图的标签,切换到不同视图的编辑界面。

因为“Blue”视图继承自“基本”视图,所以在未做任何内容编辑时,“Blue”视图中的内容和“基本”视图中完全一致。

并且,修改“基本”视图中的内容时,“Blue”视图中的内容也会跟随发生改变。

我们只需要对“Blue”视图的内容进行修改。

注意,修改之前要取消【影响所有视图】的勾选,否则修改“Blue”视图(子视图)时“基本”视图(父视图)也会受到影响。(图3-121)

另外,还要注意的一点是修改视图内容时仅限改变位置、尺寸与样式。元件上的文字、图片以及交互发生改变时,即便取消【影响所有视图】的勾选,其他视图依然会受到影响。

3、使用母版视图

在不同的页面中所添加的母版,可以使用不同的母版视图。

我们在页面中选中母版内容,然后样式功能模块中可以选择视图为“Blue”视图。(图3-122)


前面我们提到,元件上的文字、图片以及交互发生改变时会影响其他视图。

那么,怎么能够让不同视图中同一元件的文字和交互以及图片可以分别设置呢?

关于交互的问题,我们在之后的高保真原型应用中再做介绍。

我们先来看一下关于元件上的文字以及图片的内容如何单独修改。

修改这些内容,不是在母版的编辑区域中进行的,而是在添加了母版内容的页面中,在页面中选中母版内容,此时在样式功能模块中会出现可以【重写】的内容。(图3-123)

例如,母版中导航栏中的搜索提示是“四六级应试技巧”,那么,在话题、发现和消息页面中,我们就可以在【重写】内容中,将“四六级应试技巧”修改为“搜索你感兴趣的内容...”。(图3-123)

如果母版中包含图片元件,【重写】内容中就会相应出现图片的编辑项。我们可以点击【选择图片】按钮导入一张新图片替换已有的图片内容。(图3-124)

【提示】图书案例源文件及素材,请关注微信公众号“chanpinban”后,回复“萌新手册”获取。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战》系列视频------从零入门进阶的最佳课程------【点此查看详情】


转载请注明:Axure原创教程网 » Axure RP 9萌新修炼手册-第三章-基础应用(5)

喜欢 (1)or分享 (0)
头像
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址