第8节 检视功能-元件属性
Alice.：小楼大大好！小楼大大帅！我有些小困惑，想请你帮我指点下。可以吗？
小楼：你诚实直白的我无法拒绝。
Alice.：嘻嘻！我的问题有点多哦。
小楼：来嘛！
Alice.：我想做个密码输入框，就是输入文字时只能看到圆点那种。帅帅的小楼老师，这个怎么实现呢？
小楼：这个是文本框的类型，看来你对这个元件的属性不太了解呀！我给你详细讲解吧！
在检视功能的属性面板中有每个元件的属性设置，不同元件的属性会有差别。这里我对各类元件的属性，分别进行讲解。
文本框
文本框是一个获取用户输入的元件。在这个元件的属性中，可以更改文本框的类型，实现不同内容的输入。（图6-30）
（图6-30）
Alice.：帅帅的老师，你再把属性中其它的设置也给我讲讲吧？
小楼：没问题！
Axure中的文本框给我们提供了很多常用的功能，比如一个登录面板中帐号输入框的提示，现在比较流行将提示写在文本框中，在光标进入文本框（获取焦点）或者用户开始输入时，提示自动消失。
案例04：文本框中的提示
具体步骤如下：（图6-31）
（图6-31）
在画布中放入文本框，然后在属性面板的提示文字中输入提示文字；
为提示文字设置样式，默认为浅灰色；
根据不同的需求，设置提示文字消失的触发条件为【输入】或【获取焦点】。
另外，文本框的属性中，还提供了一些其它的设置，我们通过一张图来了解一下。（图6-32）
（图6-32）
第一项：最大长度。是指文本框输入文字的最大数量。例如：设置为“6”，则文本框最多只能输入6个文字。
第二项：隐藏边框。勾选此项后，能够将文本框的边框隐藏掉。
第三项：只读。勾选此项后，文本框的内容将不可编辑。
第四项：禁用。勾选此项后，元件的交互会失效。对文本框元件的作用还包括内容不可编辑，光标无法进入，以及样式变为灰色等。
第五项：提交按钮。是指在文本框编辑文本时，按下<Enter>键，能够触发指定元件鼠标单击时的交互。比如：登录面板上的账号输入框完成输入时，按下<Enter>键，触发点击登录按钮的交互。
第六项：元件提示。是指将鼠标指针停放在元件上面时，显示的提示内容。例如：在一个“忘记密码？”的文本标签元件属性中设置提示文字为“点击找回密码”。（图6-33）
（图6-33）
当浏览原型时，将鼠标指针停放在文本标签上，就会显示设置的提示文字。（图6-34）
（图6-34）
Alice.：老师，你上面说的隐藏边框会在什么时候用到呢？
小楼：我举个例子给你！
案例05：圆角蓝色边框的文本输入框
具体步骤如下：（图6-35）
（图6-35）
画布中放入一个矩形，设置边框为蓝色，圆角半径为“5”px。
在做好的矩形上方，放入一个文本框，长宽都小于矩形，并与矩形中心对齐。
在文本框的属性中，勾选【隐藏】边框。
这样就制作出了一个圆角蓝色边框的文本输入框。（6-36）
（图6-36）
Alice.：老师，是不是元件的属性中有些是独有的，有些是其他元件也有的？
小楼：是的。比如刚才我说的元件提示，大部分元件都有这个设置。
Alice.：那老师能不能帅帅的把其它的元件也给我讲讲？我感觉很有用处呢！
小楼：看你诚实的样子，让我怎么能忍心拒绝呢？
形状
形状类元件因为互相之间可以转换，所以属性都是一样的。同样，我们先通过一张图来说明一下。（图6-37）
（图6-37）
第一项：选择形状。可以将当前形状更改为其它形状。
第二项：交互样式设置。可以为元件的不同状态设置不同的视觉样式。
鼠标悬停：能够设置鼠标进入元件范围时，元件呈现的样式。
鼠标按下：能够设置在元件上按下鼠标按键时（左键与右键均会触发），元件呈现的样式。
选中：能够设置选中状态时，元件呈现的样式。
禁用：能够设置禁用状态时，元件呈现的样式。
第三项：引用页面。能够将形状链接到当前项目的某个页面，形状上显示该页面名称。
第四项：禁用。勾选此项，设置元件默认状态为禁用。
第五项：选中。勾选此项，设置元件默认状态为选中。
第六项：设置选项组名称。为多个元件设置相同的选项组名称后，同组元件仅有一个能够设置为选中状态。当设置某个元件为选中状态时，其它元件自动改变为未选中状态。
第七项：元件提示。与文本框的元件提示相同，是指将鼠标指针停放在元件上面时，显示的提示内容。
Alice.：老师，那个交互样式有什么用啊？没太理解什么时候能用到。
小楼：问题重说一遍。
Alice.：哦！哦！帅帅的老师，那个交互样式有什么用啊？没太理解什么时候能用到。
小楼：嗯，我给你做个小案例。
案例06：动态样式的按钮效果
一般来说一个按钮我们会有三种样式，分别是默认状态的样式、鼠标进入的样式以及鼠标按键按下的样式。（图6-38）
（图6-38）
这样一个具有交互效果的按钮，就可以通过交互样式的设置来实现。
在画布中放入一个矩形，设置好默认样式；然后，在{交互样式设置}中点击【鼠标悬停】。（图6-39）
（图6-39）
在交互样式设置窗口中，为按钮设置鼠标进入元件时呈现的样式。（图6-40）
点击交互样式设置窗口中的【鼠标按下】按钮，继续为按钮设置鼠标按下时呈现的样式。（图6-40）
（图6-40）
完成以上设置后，一个具有交互效果的按钮就实现了。
图片
Alice.：帅帅的老师，我看图片的属性里和形状差不多呀！
小楼：是的。
图片元件除了导入图片的设置，其它设置都和形状一样。
关于导入图片，一般我们都是鼠标双击来实现导入，这样比在属性中的操作更快捷。如果需要将导入的图片清除，恢复元件原有的样式，则需要在属性中点击【清空】按钮来实现。（图6-41）
（图6-41）
框架
Alice.：帅帅的老师，那个内联框架听说能往原型里面嵌入视频、地图是吗？
小楼：对呀！可以插入！你对这个有兴趣？
Alice.：对插入没兴趣，对嵌入视频地图有兴趣！
小楼：嘿嘿！那我我就给你讲讲框架的属性，顺便分享两个案例给你吧！
内联框架的属性很简单，我们由上至下依次介绍。（图6-42）
（图6-42）
第一项：选择框架目标，为框架指定嵌入的页面、URL或文件。这个设置可以通过鼠标双击元件实现。
第二项：框架滚动条。设置镶嵌的页面尺寸超过框架尺寸时，滚动条的呈现方式。
第三项：隐藏边框。设置框架在页面中是否显示边框。
第四项：预览图片。当框架取消边框与滚动条会与页面白色背景形成一体，无法分辨。可以通过添加预览图片，让框架在页面上显示出来。此项设置只在画布中有效，浏览器中查看原型时，不会显示预览图片。
案例07：页面中嵌入优酷视频。
获取优酷的视频连接。在优酷的视频播放界面中，点击分享给好友后方的列表图标，在弹出的界面中点击flash地址的【复制】按钮，复制地址。如果浏览器不支持复制功能，可以划选文本框中的地址，使用快捷键<Ctrl+C>进行复制。（图6-43）
（图6-43）
在画布中放入内联框架，设置成合适的尺寸。在内联框架的属性中设置{框架滚动条}为【从不显示】，勾选【隐藏边框】，并设置{预览图片}为【视频】。（图6-44）
（图6-44）
双击框架元件或在属性中点击【选择框架目标】，选中【链接到url或文件】，将操作步骤1中复制的flash地址粘贴到文本框中，点击确定退出编辑。（图6-45）
（图6-45）
案例08：页面中嵌入百度地图。
打开百度地图提供的地图生成器，地址http://api.map.baidu.com/lbsapi/createmap/。
在定位中心点的面板中输入地图中心点的地名，也可以拖动地图改变中心点位置。（图6-46）
（图6-46）
在设置地图的面板中，设置地图的尺寸以及其它符合需求的选项。（图6-47）
（图6-47）
点击页面中的【获取代码】按钮，将生成的代码进行复制。代码中需要填写AK秘钥才能够正常使用地图，可以点击【申请秘钥】按钮进行申请，如何申请秘钥可点击【了解如何申请秘钥】进行查看。（图6-48）
（图6-48）
特别说明：为了让读者能够顺利完成本案例，作者在这里分享一个可公开使用的密钥：5c4b6cfcdf62237013fe7c34ddb9d80c。
在本地硬盘中新建文本文档，将复制的代码粘贴到文档中，并且将秘钥填写到指定的位置。（图6-49）
（图6-49）
将文本文档另存，{保存类型}选择【所有文件】，文件名填写：html。此名称前缀可以自定义，但建议使用字母命名。（图6-50）
（图6-50）
在画布中放入内联框架元件，设置框架尺寸与地图尺寸相等。然后，在元件的属性中设置{框架滚动条}为【从不显示】，勾选【隐藏边框】，并设置{预览图片}为【地图】。（图6-51）
（图6-51）
双击框架元件，在打开的窗口中选择【链接到url或文件】，在文本框中输入“html”。在文本框中直接输入文件名“mymap.html”，这是一个相对路径，软件会自动找到与当前页面文件（html文件）同文件夹下的“mymap.html”文件并打开。（图6-52）
（图6-52）
生成HTML文件，将制作好的“html”文件放入HTML文件夹中，再次打开原型浏览，页面中即可正常显示地图文件。（图6-53）
（图6-53）
单选按钮
Alice.：帅帅的老师，那个单选按钮是不是注册时做性别选择的那种元件？
小楼：是的呀！怎么了？
Alice.：我用了那个元件，选中之后就不能取消了。怎么能只选中一个呢？
小楼：这个也是在属性里要设置的。
案例09：性别的唯一选择
单选按钮的属性中有一个{设置单选按钮组名称}的设置。如果需要设置多个单选按钮中，某一个被选中，其它自动取消选中，则只需要为这些单选按钮添加相同的组名称即可。（图6-54）
（图6-54）
其它元件
Alice.：帅帅的老师，还有……
小楼：呃……别加帅帅的了！
Alice.：怎么了……
小楼：总听有点恶心……，你也别问了，我把其它一些元件的属性都给你用截图做标注，你了解一下就行了。
1、表格的属性。（图6-55）
（图6-55）
2、菜单的属性。（图6-56）
（图6-56）
3、树的属性。（图6-57）
（图6-57）
原创文章，作者：交互精选，如若转载，请注明出处：https://www.iamue.com/36620/
