青光门户网站
热点
推荐
最新
精选
您的位置:首页 »财经 » 鸿运国际招代理 - Axure教程:简单开关按钮的实现
鸿运国际招代理 - Axure教程:简单开关按钮的实现
  • 更新时间:2020-01-09 16:17:07 本条信息浏览人次共有 1112
[摘要] 笔者在本文中介绍了如何用axure实现开关按钮效果的操作步骤,与大家分享。将“开”椭圆隐藏看看效果1)关闭开关效果:2)开启开关效果:这是开启axure绘制原型学习过程中一个非常容易实现的原型,尽管非常的简单,但是作用却很大。目前许多的app在通知开关用到的样式都是这种开关按钮样式,学会这个,那么你在许多app类原型中就都可以用到了!

文章内容

鸿运国际招代理 - Axure教程:简单开关按钮的实现

鸿运国际招代理,笔者在本文中介绍了如何用axure实现开关按钮效果的操作步骤,与大家分享。

一个命名为“容器”的矩形

一个命名为“关”的椭圆

一个命名为“开”的椭圆

(1)设置矩形圆角半径为40

(2)将矩形尺寸调为w:100,h:31

(3)将两个椭圆放到“容器”内合适的位置

(4)设置“容器”的交互样式——选中——填充颜色

(5)设置“关”椭圆的交互——鼠标单击时

(6)设置“开”椭圆的交互——鼠标单击时:

特别注意,这里的“容器”选中状态要改为false。

(7)将“开”椭圆隐藏

(8)看看效果

1)关闭开关效果:

2)开启开关效果:

(1)这是开启axure绘制原型学习过程中一个非常容易实现的原型,尽管非常的简单,但是作用却很大。目前许多的app在通知开关用到的样式都是这种开关按钮样式,学会这个,那么你在许多app类原型中就都可以用到了!

(2)虽然简单,但还是要提醒大家,在绘制原型时为每一个元件命好名。像这个原型,有两个形状大小都相同的椭圆,且两个椭圆的交互都涉及到对方,假如没有一开始给它们命好名,那么你在设置交互时就会出现下图这种情况:

图中有两个(椭圆形),你不知道哪个是开哪个是关,那么这就会是一个很大的麻烦。所以切记,每拉入作图区里一个元件就给该元件命好名。

本文由 @nilz 原创发布于人人都是产品经理,未经许可,禁止转载

题图来自 unsplash ,基于 cc0 协议

标签
© Copyright 2018-2019 snotu.com 青光门户网站 Inc. All Rights Reserved.