Axure RP 8 入门手册 – 第6章(三)

第8节检视功能-元件属性Alice.:小楼大大好!小楼大大帅!我有些小困惑,想请你帮我指点下。可以吗?小楼:你诚实直白的我无法拒绝。Alice.:嘻嘻!我的问题有点多哦。小楼:来嘛!Alice.:我想做个密码输入框,就是输入文字时只能看到圆点那种。帅帅的小楼老师,这个怎么实现呢?小楼:这个是文本框的类型,看来你对这个元件的属性不太了解呀!我给你详细讲解吧!在检视功能的属性面板中有每个元件的属性设置,不同元件的属性会有差别。这里我对各类元...

8          检视功能-元件属性

Alice.:小楼大大好!小楼大大帅!我有些小困惑,想请你帮我指点下。可以吗?

小楼:你诚实直白的我无法拒绝。

Alice.:嘻嘻!我的问题有点多哦。

小楼:来嘛!

Alice.:我想做个密码输入框,就是输入文字时只能看到圆点那种。帅帅的小楼老师,这个怎么实现呢?

小楼:这个是文本框的类型,看来你对这个元件的属性不太了解呀!我给你详细讲解吧!

在检视功能的属性面板中有每个元件的属性设置,不同元件的属性会有差别。这里我对各类元件的属性,分别进行讲解。

文本框

文本框是一个获取用户输入的元件。在这个元件的属性中,可以更改文本框的类型,实现不同内容的输入。(图6-30

 Axure RP 8 入门手册 – 第6章(三)

(图6-30

Alice.:帅帅的老师,你再把属性中其它的设置也给我讲讲吧?

小楼:没问题!

Axure中的文本框给我们提供了很多常用的功能,比如一个登录面板中帐号输入框的提示,现在比较流行将提示写在文本框中,在光标进入文本框(获取焦点)或者用户开始输入时,提示自动消失。

案例04:文本框中的提示

具体步骤如下:(图6-31

 Axure RP 8 入门手册 – 第6章(三)

(图6-31

在画布中放入文本框,然后在属性面板的提示文字中输入提示文字;

为提示文字设置样式,默认为浅灰色;

根据不同的需求,设置提示文字消失的触发条件为【输入】或【获取焦点】。

另外,文本框的属性中,还提供了一些其它的设置,我们通过一张图来了解一下。(图6-32

 Axure RP 8 入门手册 – 第6章(三)

(图6-32

第一项:最大长度。是指文本框输入文字的最大数量。例如:设置为“6”,则文本框最多只能输入6个文字。

第二项:隐藏边框。勾选此项后,能够将文本框的边框隐藏掉。

第三项:只读。勾选此项后,文本框的内容将不可编辑。

第四项:禁用。勾选此项后,元件的交互会失效。对文本框元件的作用还包括内容不可编辑,光标无法进入,以及样式变为灰色等。

第五项:提交按钮。是指在文本框编辑文本时,按下<Enter>键,能够触发指定元件鼠标单击时的交互。比如:登录面板上的账号输入框完成输入时,按下<Enter>键,触发点击登录按钮的交互。

第六项:元件提示。是指将鼠标指针停放在元件上面时,显示的提示内容。例如:在一个“忘记密码?”的文本标签元件属性中设置提示文字为“点击找回密码”。(图6-33

 Axure RP 8 入门手册 – 第6章(三)

(图6-33

当浏览原型时,将鼠标指针停放在文本标签上,就会显示设置的提示文字。(图6-34

 Axure RP 8 入门手册 – 第6章(三)

(图6-34

Alice.:老师,你上面说的隐藏边框会在什么时候用到呢?

小楼:我举个例子给你!

案例05:圆角蓝色边框的文本输入框

具体步骤如下:(图6-35

 Axure RP 8 入门手册 – 第6章(三)

(图6-35

画布中放入一个矩形,设置边框为蓝色,圆角半径为“5px

在做好的矩形上方,放入一个文本框,长宽都小于矩形,并与矩形中心对齐。

在文本框的属性中,勾选【隐藏】边框。

这样就制作出了一个圆角蓝色边框的文本输入框。(6-36

 Axure RP 8 入门手册 – 第6章(三)

(图6-36

Alice.:老师,是不是元件的属性中有些是独有的,有些是其他元件也有的?

小楼:是的。比如刚才我说的元件提示,大部分元件都有这个设置。

Alice.:那老师能不能帅帅的把其它的元件也给我讲讲?我感觉很有用处呢!

小楼:看你诚实的样子,让我怎么能忍心拒绝呢?

形状

形状类元件因为互相之间可以转换,所以属性都是一样的。同样,我们先通过一张图来说明一下。(图6-37

 Axure RP 8 入门手册 – 第6章(三)

(图6-37

第一项:选择形状。可以将当前形状更改为其它形状。

第二项:交互样式设置。可以为元件的不同状态设置不同的视觉样式。

鼠标悬停:能够设置鼠标进入元件范围时,元件呈现的样式。

鼠标按下:能够设置在元件上按下鼠标按键时(左键与右键均会触发),元件呈现的样式。

选中:能够设置选中状态时,元件呈现的样式。

禁用:能够设置禁用状态时,元件呈现的样式。

第三项:引用页面。能够将形状链接到当前项目的某个页面,形状上显示该页面名称。

第四项:禁用。勾选此项,设置元件默认状态为禁用。

第五项:选中。勾选此项,设置元件默认状态为选中。

第六项:设置选项组名称。为多个元件设置相同的选项组名称后,同组元件仅有一个能够设置为选中状态。当设置某个元件为选中状态时,其它元件自动改变为未选中状态。

第七项:元件提示。与文本框的元件提示相同,是指将鼠标指针停放在元件上面时,显示的提示内容。

Alice.:老师,那个交互样式有什么用啊?没太理解什么时候能用到。

小楼:问题重说一遍。

Alice.:哦!哦!帅帅的老师,那个交互样式有什么用啊?没太理解什么时候能用到。

小楼:嗯,我给你做个小案例。

案例06:动态样式的按钮效果

一般来说一个按钮我们会有三种样式,分别是默认状态的样式、鼠标进入的样式以及鼠标按键按下的样式。(图6-38

 Axure RP 8 入门手册 – 第6章(三)

(图6-38

这样一个具有交互效果的按钮,就可以通过交互样式的设置来实现。

在画布中放入一个矩形,设置好默认样式;然后,在{交互样式设置}中点击【鼠标悬停】。(图6-39

 Axure RP 8 入门手册 – 第6章(三)

(图6-39

在交互样式设置窗口中,为按钮设置鼠标进入元件时呈现的样式。(图6-40

点击交互样式设置窗口中的【鼠标按下】按钮,继续为按钮设置鼠标按下时呈现的样式。(图6-40

 Axure RP 8 入门手册 – 第6章(三)

(图6-40

完成以上设置后,一个具有交互效果的按钮就实现了。

图片

Alice.:帅帅的老师,我看图片的属性里和形状差不多呀!

小楼:是的。

图片元件除了导入图片的设置,其它设置都和形状一样。

关于导入图片,一般我们都是鼠标双击来实现导入,这样比在属性中的操作更快捷。如果需要将导入的图片清除,恢复元件原有的样式,则需要在属性中点击【清空】按钮来实现。(图6-41

 Axure RP 8 入门手册 – 第6章(三)

(图6-41

框架

Alice.:帅帅的老师,那个内联框架听说能往原型里面嵌入视频、地图是吗?

小楼:对呀!可以插入!你对这个有兴趣?

Alice.:对插入没兴趣,对嵌入视频地图有兴趣!

小楼:嘿嘿!那我我就给你讲讲框架的属性,顺便分享两个案例给你吧!

内联框架的属性很简单,我们由上至下依次介绍。(图6-42

 Axure RP 8 入门手册 – 第6章(三)

(图6-42

第一项:选择框架目标,为框架指定嵌入的页面、URL或文件。这个设置可以通过鼠标双击元件实现。

第二项:框架滚动条。设置镶嵌的页面尺寸超过框架尺寸时,滚动条的呈现方式。

第三项:隐藏边框。设置框架在页面中是否显示边框。

第四项:预览图片。当框架取消边框与滚动条会与页面白色背景形成一体,无法分辨。可以通过添加预览图片,让框架在页面上显示出来。此项设置只在画布中有效,浏览器中查看原型时,不会显示预览图片。

案例07:页面中嵌入优酷视频。

获取优酷的视频连接。在优酷的视频播放界面中,点击分享给好友后方的列表图标,在弹出的界面中点击flash地址的【复制】按钮,复制地址。如果浏览器不支持复制功能,可以划选文本框中的地址,使用快捷键<Ctrl+C>进行复制。(图6-43

 Axure RP 8 入门手册 – 第6章(三)

(图6-43

在画布中放入内联框架,设置成合适的尺寸。在内联框架的属性中设置{框架滚动条}为【从不显示】,勾选【隐藏边框】,并设置{预览图片}为【视频】。(图6-44

 Axure RP 8 入门手册 – 第6章(三)

(图6-44

双击框架元件或在属性中点击【选择框架目标】,选中【链接到url或文件】,将操作步骤1中复制的flash地址粘贴到文本框中,点击确定退出编辑。(图6-45

 Axure RP 8 入门手册 – 第6章(三)

(图6-45

案例08:页面中嵌入百度地图。

打开百度地图提供的地图生成器,地址http://api.map.baidu.com/lbsapi/createmap/

在定位中心点的面板中输入地图中心点的地名,也可以拖动地图改变中心点位置。(图6-46

 Axure RP 8 入门手册 – 第6章(三)

(图6-46

在设置地图的面板中,设置地图的尺寸以及其它符合需求的选项。(图6-47

 Axure RP 8 入门手册 – 第6章(三)

(图6-47

点击页面中的【获取代码】按钮,将生成的代码进行复制。代码中需要填写AK秘钥才能够正常使用地图,可以点击【申请秘钥】按钮进行申请,如何申请秘钥可点击【了解如何申请秘钥】进行查看。(图6-48

 Axure RP 8 入门手册 – 第6章(三)

(图6-48

特别说明:为了让读者能够顺利完成本案例,作者在这里分享一个可公开使用的密钥:5c4b6cfcdf62237013fe7c34ddb9d80c

在本地硬盘中新建文本文档,将复制的代码粘贴到文档中,并且将秘钥填写到指定的位置。(图6-49

 Axure RP 8 入门手册 – 第6章(三)

(图6-49

将文本文档另存,{保存类型}选择【所有文件】,文件名填写:html。此名称前缀可以自定义,但建议使用字母命名。(图6-50

 Axure RP 8 入门手册 – 第6章(三)

(图6-50

在画布中放入内联框架元件,设置框架尺寸与地图尺寸相等。然后,在元件的属性中设置{框架滚动条}为【从不显示】,勾选【隐藏边框】,并设置{预览图片}为【地图】。(图6-51

 Axure RP 8 入门手册 – 第6章(三)

(图6-51

双击框架元件,在打开的窗口中选择【链接到url或文件】,在文本框中输入“html”。在文本框中直接输入文件名“mymap.html”,这是一个相对路径,软件会自动找到与当前页面文件(html文件)同文件夹下的“mymap.html”文件并打开。(图6-52

 Axure RP 8 入门手册 – 第6章(三)

(图6-52

生成HTML文件,将制作好的“html”文件放入HTML文件夹中,再次打开原型浏览,页面中即可正常显示地图文件。(图6-53

 Axure RP 8 入门手册 – 第6章(三)

(图6-53

单选按钮

Alice.:帅帅的老师,那个单选按钮是不是注册时做性别选择的那种元件?

小楼:是的呀!怎么了?

Alice.:我用了那个元件,选中之后就不能取消了。怎么能只选中一个呢?

小楼:这个也是在属性里要设置的。

案例09:性别的唯一选择

单选按钮的属性中有一个{设置单选按钮组名称}的设置。如果需要设置多个单选按钮中,某一个被选中,其它自动取消选中,则只需要为这些单选按钮添加相同的组名称即可。(图6-54

 Axure RP 8 入门手册 – 第6章(三)

(图6-54

其它元件

Alice.:帅帅的老师,还有……

小楼:呃……别加帅帅的了!

Alice.:怎么了……

小楼:总听有点恶心……,你也别问了,我把其它一些元件的属性都给你用截图做标注,你了解一下就行了。

1、表格的属性。(图6-55

 Axure RP 8 入门手册 – 第6章(三)

(图6-55

2、菜单的属性。(图6-56

 Axure RP 8 入门手册 – 第6章(三)

(图6-56

3、树的属性。(图6-57

 Axure RP 8 入门手册 – 第6章(三)

(图6-57

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

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

相关推荐

  • 交互设计 | 张艺谋这样玩儿

    3 月 4 日,张艺谋导演的观念演出《对话·寓言 2047》在上海大剧院正式演出。在连演两场之后,他们将移师广州和杭州,共同组成《对话·寓言 2047》第二季的演出。尽管被称为第二季,但此次演出的内容与去年 6 月在国家大剧院上演的第一季大体相似。开场仍旧是 71 岁的蒙古族老人其布日一边编织着麻绳,一边唱着悠扬的蒙古长调。背景中,美国先锋艺术家 Daniel Wurtzel 利用空气动力学原理,让一块云纱在舞台上翩翩飞舞。在这个段落之...

    2018-03-06
  • 交互体验,是最好的科普教育——天宁小学参观丽水市科技馆活动随记

    点击上方“莲都区教育局”可以关注哦充分利用身边的公共科普资源,激发学生的科学探究兴趣,享受交互体验式的科普教育,增强学生的科技创新意识,这是我们安排学生走进科学馆进行参观体验的根本目的。这次天宁小学的孩子们真的是赚到了!面前的这个机器人可不简单,它的中文名叫阿尔法。2016年央视猴年春晚上,540台阿尔法机器人与歌手孙楠共同演绎歌曲《冲向巅峰》,那气场堪比国庆大阅兵。工作人员对阿尔法机器人作简要介绍:阿尔法是一款仿人型智能机器人,可直立...

    2018-01-30
  • Axure RP 8 入门手册 – 第1章(下)

    第2节原型相关的文件类型芝芝:小楼老师,我不小心把软件关闭了,我编辑的文件在哪?小楼:你新建完文件没有保存吗?芝芝:我有生成HTML文件,但是好像不能用软件打开呀?小楼:看在颜值的份上,我给你讲讲吧!与Axure相关的文件有几种类型:分别是“.rp”文件、“.rplib”文件、“.rpprj”文件以及“HTML”文件。“.rp”文件:独立原型项目的源文件,这是最重要的文件,只有这个文件才能进行原型的编辑与输出。“.rpprj”文件:团队...

    2018-03-31
  • AI 交互设计怎么做?谷歌详解自家 AI 相机设计思路

    文 | 何忞来自雷锋网(leiphone-sz)的报道雷锋网按:日前谷歌在其官网发布博文,文中详细介绍了 AI 相机 Google Clips 的一些设计思路。雷锋网将其编译如下正如过去曾经发生过的移动革命以及再之前的网络革命一样,机器学习正在让我们反思、重构、重新审视我们生活中已经拥有的一切。在 Google 用户体验(UX)社区中,我们开始了一项名为“以人为本的机器学习(HCML)”工作项目,来指导和帮助我们重构世界。站在这样的视角...

    2018-02-03
  • UED设计年会系列活动在江苏省宿迁市成功举办!

    欢迎点击上方蓝字免费订阅!阅读本文前,请您先点击本文标题下面的蓝色字体“快宿迁”再点击“关注”,并点击“置顶公众号”,这样您就可以每天继续免费收到文章了。每天都有分享。完全是免费订阅,请放心关注!2018年1月19—21日,UED设计年会系列活动在江苏省宿迁市成功举办,共议如何在当下中国,以设计、文化、艺术的力量引领城乡发展。年会系列活动包含“设计·文化·艺术引领下的城市发展和乡村振兴”高峰论坛、“衲田杯”可持续设计国际竞赛颁奖盛典暨第...

    2018-02-03
  • 陌陌:不全面商业化 不伤害用户体验

    关注订阅号“电商大世界”,海量电商资讯文章打包阅读以下文章数据,由电商大世界 "AI-贝贝",采集、分拣,由编辑 北风整理发布。电商本周要闻:阿里慧聪两大人事变动阿里巴巴B2B事业群总裁戴珊接任速卖通阿里巴巴集团合伙人、B2B事业群总裁戴珊将直接负责全球速卖通业务,而原阿里巴巴全球速卖通总经理沈涤凡,将出任阿里健康CEO。据了解,全球化战略是阿里未来20年的三大核心战略之一。业内人士认为,戴珊此次接任速卖通业务,不仅说明以速卖通为代表的...

    2018-04-01
  • 改善电商网站用户体验的6个技巧

    电子商务是一个复杂的系统,作为电子商务的典型模式之一,B2C网上零售网站要考虑的因素很多,甚至一些看似不起眼的因素都可能决定一个用户最终是否在该网站完成购物。 在消费者注意力越来越分散的今天。如果您希望潜在客户更多的停留在自己的网页上,进而产生购买行为,就需要牢牢吸引他们的注意力,并且提供简便愉快的购物体验。做到以下这6点,相信没有用户会拒绝从你的网站购买商品,甚至会带来更多的返购和忠实用户。1.提升网站的加载速度落地网页的速度通常是转...

    2018-05-08
  • Excel表格常用快捷键大全之11-20个(含操作演示)

    温馨提示:零基础或者对Excel不熟悉的小伙伴,请在公众号后台回复数字:1,免费学习滴答老师的全套Excel小白脱白系列视频教程。第十一,选定当前活动单元格区域比如,咱们需要给A1:C18单元格区域加上边框,首先得选中这些单元格。除了用鼠标拖动选择之外,还可以使用下面的两个快捷键:鼠标随便放在A1:C18单元格区域之间的任意单元格,按下Ctrl+Shift+*(星号)或者Ctrl+A就可以快速选定当前活动单元格区域。第十二,excel选...

    2018-03-18
  • 用户体验双语术语,附阿里招聘广场舞达人资深用研专员

    这两天朋友圈被一则特殊的招聘刷屏了。先看看关键词:年薪40万,60+,广场舞 KOL(意见领袖)优先!一时间,网友沸腾了。这则招聘发布于1月16日,来自阿里巴巴集团社会招聘网站。从招聘网页上看,阿里对此职位的描述是“淘宝资深用研专员”,全称“淘宝资深用户研究专员”。记者推算了下,大致为阿里P序列中的P6等级。岗位给出的薪水待遇还不低,年薪范围是35万~40万。感兴趣的小伙伴可以转给符合要求的人士哦!点击阅读原文就可以看到这则招聘了。今天...

    2018-01-30
  • Axure模板库(13)-直播

    最近直播app越来越火,我整理了一些直播app,做了几个模板,跟大家分享。原型文件在文章最后。1、首先临摹一个国外的。(1)首页第一个展示的是快速发布直播的入口,鼓励用户创作内容。第二个展示的是一系列标签。如果平台上内容类型比较多的话,可以像这样强调标签、分类。如果平台上都是美女主播,那分类的权重就可以小一点了。第三个展示的是直播列表。直播最重要的信息就是直播的画面,列表上可以放一张大图,或者更直接,展示一小段视频。(2)直播页面,展示...

    2018-03-04