Axure RP实例教程:形状-唯一选中项

搬瓦工机场JMS

Axure RP 9 Mac这款原型设计软件能让设计者快速创建应用软件,或者在web网站的线框图、流程图、原型和规格的设计制作,从低到高的视觉和交互保真度的全方位构建,是目前业界首屈一指的交互式产品原型设计软件!此次小编就带大家来看看Axure RP如何做形状-唯一选中项效果。

Axure RP 9 for Mac(交互式产品原型设计工具)

立即下载Axure RP 9 for Mac(交互式产品原型设计工具)

Axure RP9 是mac平台上一款交互式原型设计神器,是专为UX专业人员和业务分析师设计的专业网站原型设计工具!可以帮助他们快速创建应用程序和网站的线框,原型和规格!新功能包括一系列广泛的改进:全面的UI,新的设计和文档特征,以及将引擎优化到前所未有的程度。

2020-01-2677.3 MB简体中文

1、案例效果:

整体界面效果:

原型实现效果:

2、案例描述:

点击每一个金额按钮时,当前按钮变为红色背景与白色字体,其它按钮恢复白色背景与黑色字体。

元件准备:
页面中:

3、思路分析:

按钮有两种状态与样式,可以通过元件的交互样式来实现;(操作步骤1)

点击按钮时,通过设置当前的元件为被选中的状态使其变色;(操作步骤3)

只允许有一个按钮呈现被选中的样式,可以通过给所有按钮元件设置选项组名称来实现效果。(操作步骤2)

4、操作步骤:

1、在页面上添加一个矩形元件,在元件属性中为其设置【选中】的样式,可参考基础23;

2、在元件属性中,{设置选项组名称}为“Price”;

3、为元件的【鼠标单击时】添加“用例1”,设置动作【选中】“当前元件”。

4、最后将此元件复制多个,排列整齐,更改金额文字;

5、将第一个元件的【选中】勾选,让其在页面加载时即为已选中的状态。

补充说明:

本案例中的按钮默认样式设置包括:

圆角半径:5;

阴影:偏移(0,0);模糊(5);

本案例中使用了“FontAwesome4.4.0”图标字体元件库,需要安装字体文件支持,并进行Web字体设置。

以上就是小编为大家带来的Axure RP实例教程:形状-唯一选中项。还有更多详细、实用的功能以及相关软件Axure RP 9 Mac版获取,大家快来Macdown.com自行探索一番吧。

未经允许不得转载:搬瓦工VPS_美国VPS » Axure RP实例教程:形状-唯一选中项

赞 (0) 打赏

相关推荐

    暂无内容!

评论 0

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

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏