快好知 kuaihz

Axure教程:不同元件的单选选中效果

如何在Axure中实现不同元件的单选选中效果?教程详解在此,请看~~

同一选填内容的不同选项,我们可以通过拖动元件库已有的“单选按钮”,编辑选项对应需要展示的文字;然后全选所有的“单选按钮”,将他们组合并取名为某一名称;最后将此名称复制到“设置单选按钮组名称”中,即可实现效果。

以我们填写个人信息中很常见的性别选择为例。

但如果你所需要呈现的原型不是单选按钮,而是类似于菜单选中或者页码切换的展示效果,那“单选按钮”就满足不了你了

这时候我们需要自定义不同元件的单选选中效果,具体的Axure操作步骤可分解为:

第一步

拖入一个矩形元件到页面中,将其调整为你想要的形状和大小,并对其进行命名

我拖入了一个矩形,将其圆角半径设置为8,将该元件名称修改为“性别”,并在该矩形内输入想要展示的文字“男性”。

第二步

设置矩形元件的交互事件(设置鼠标单击该元件时,它的选中状态为“true”)。

第三步

设置矩形元件的交互样式(点击选中,设置选中的交互样式为白色字体,填充蓝色)。

第四步

复制刚刚设置好的矩形元件,粘贴出你所需数量的单选元件,并一一修改输入你需要元件上展示的文字内容(需要保证这些元件的命名都是统一的)。

第五步

全选中这些元件,在“设置选项组名称”中输入他们(一样的)名称后,点击F5就可以看到效果了。

原型效果:http://www.wulihub.com.cn/go/Wy3R9J/start.html(附带页码单选的原型效果)

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:选中  选中词条  元件  元件词条  不同  不同词条  效果  效果词条  教程  教程词条  
原型

 Axure应用技巧:可复用控件库...

本文作者将与我们分享:如何用Axure来制作自己的元件库。在现阶段的互联网产品的设计过程中,我们经常会提到一个词“敏捷迭代(开发)”,简而言之就是小步快跑策略。...(展开)

原型

 Axure教程:微信聊天列表原型...

对于Axure的学习,就是要多做练习,本文是微信原型制作的第一章,希望对同样正在学习的朋友有所帮助。本章主要制作聊天列表原型,实现滑动效果。原型基于Axure8...(展开)

原型

 Axure 原型 | 用Axur...

软件行业从业6年,流程图看过太多,大部分流程图是在考验阅读者的理解能力,近期在设计公司新版APP,对流程图的绘制也有点体会心得。用Axure绘制流程图好处是可以...(展开)