Axure绘制开关按钮
相信大家在日常的原型绘制中经常会使用到开关这个按钮，如下图是微信的开关样式
其实在安卓或者ios开发系统中都会有默认的开关控件，但是由于axure中并没有这样的元件，所以这时就需要咱们自己来绘制一下这个开关的效果了，当然大家也可以从网上找一些现成的元件库。废话不多说了，咱们直接开始制作的教程。
一、功能分析
1.1需要实现的功能如下
①默认显示关，小圆点为白色，位置在左侧，背景为灰色；点击后，显示开的状态，位置移动至右侧，背景变为绿色
②切换开关状态时，要有一个线性滑动动画的效果
1.2实现原理如下
①使用动态面板绘制两种状态下的背景切换
②点击时使用元件的移动线性效果实现滑动效果
二、原型绘制
2.1先绘制按钮的背景
由于会涉及到两种状态，所以需要使用到动态面板实现两种背景的切换
①先拖入一个矩形，大小调整为宽70高30，调整为灰色背景，边框为none，圆角半径为40
②右键转化为动态面板，命名为背景，复制一个state2，并更换state2中的背景颜色为绿色
2.2绘制小圆球
拖入一个椭圆形，调整大小为宽22，高22，调整背景颜色和边框，并命名为圆。坐标调整至（4,4）,初始坐标需要记录下来，因为后续要涉及到移动该位置
2.3选中小圆球和动态面板，右键转化成动态面板，并命名为开关
这一步的目的是为了实现点击任何位置都能够进行开关切换的效果
2.4绘制点击交互效果
选中开关动态面板，选择鼠标单击时，添加case1条件，判断条件为如果背景动态面板是state1时（即背景为灰色时），小圆球y坐标保持不变，x坐标线性移动到44；同时将背景切换成state2（即绿色）
添加case2条件，判断条件为如果背景动态面板是state2时（即背景为绿色时），小圆球y坐标保持不变，x坐标线性移动到4；同时将背景切换成state1（即灰色）
三、效果展示
Axure绘制开关按钮相关推荐
- Axure绘制左侧菜单
Axure绘制左侧菜单 前言 问题描述 解决方案 1.先拉一个动态面板作为菜单 2.双击动态面板,添加层 3.添加交互效果 4.点击预览查看效果 前言 以后可能会用到Axure进行项目的初步设计,所以 ...
- Axure绘制跑马灯
相信大家在日常的产品设计中或多或少的会涉及到绘制跑马灯的效果,诸如弹幕效果或者滚动公告 那么这样的效果如何实现呢,直接上干货 一.功能分析 需要实现的功能如下: ①在固定区域内展示文字 ②从左向右循环 ...
- 如何优雅的用Axure绘制高保真原型心得分享
去年一直想写的Axure小技巧分享,终于还是动手写了,今天主要给大家分享关于axure高保真原型的一些东东. 本文核心内容点: - 啥是高保真原型?(附简单说明原型) - Axure可以画出什么水准的 ...
- Axure绘制登录功能
上一篇文章为大家介绍了一下登录功能的设计思路和相关的流程图,本篇主要带大家从0到1绘制一下B端产品的登录功能如何实现 一.功能解析 本篇主要是针对内部员工使用的B端产品,主要功能如下: ①手机号+密码 ...
- 通俗易懂玩QT：Qpaint绘制开关按钮(内附详细源码)
Qpaint 绘制开关按钮(内附详细源码) 一.实验效果与开发环境 效果图如下: 开发环境: 二.实验代码 switch.h #ifndef SWITCH_H #define SWITCH_H#inc ...
- axure流程图模式_手把手教你用AXURE绘制流程图的图文教程
用AXURE绘制流程图其实已经很专业,因为有专业的设计界面,专业的部件库和控件.绘制一般的流程图已经足够用了.今天明月PM,以注册流程的流程图为例给大家具体的将讲解以下流程图的具体操作步骤和流程.总共 ...
- axure流程图模式_PRD之道：活用Axure绘制高质量的业务流程图
作为PRD的核心部分,业务流程图对产品研发的各个环节能否跑通,业务是否顺畅至关重要.好的流程图,可以快速让整个团队熟悉理解业务,并优化业务. 最近看到一些小伙伴在绘制流程图过程中的一些迷茫,有点是不太 ...
- Axure绘制页面框架
相信大家在日常的B端web原型绘制中会经常绘制到类似框架页面,效果如下: 左边会展示二级菜单,点击菜单时,右边会内容会实时进行变化,有的伙伴们在初次制作时,可能会直接在每个页面都画上菜单, 如下: 但 ...
- Axure绘制流程图
相信大家在日常的工作中经常会绘制流程图,基本常见的绘制流程图的工具有Visio.亿图等.但是如果大家使用的是axure制作的产品prd的话,这些流程图的源文件全部需要进行存储,一旦丢失就需要重新画一遍 ...
- Axure绘制密码输入框
当我们在绘制登录页面时,如果登录方式包含账号密码登录,那么我们就会使用到密 码输入框,而常见的密码输入框,通常会使用到小眼睛控制密码的明文和密文显示. 大家知道axure中的输入框,当你设置成密码类型 ...
最新文章
- 20080330 - strong-typing and weak-typing
- OS_CORE.C(2)
- python 删除文件、目录_python实现删除文件与目录的方法
- rowid 对应mysql_请教一下相当于MySQL中Oracle的RowID
- SAP 电商云 UI 持续集成里 docker 的使用场景一例
- 前端学习（2820）：全局文件tabber字段
- 超硬核的 OCR 开发利器推荐：从场景案例到实操演示，快速掌握OCR模型训练
- 可替换元素和非替换元素
- soap和web services
- json解析数组 nlohmann_json解析数组 nlohmann_Nlohmann json学习
- 忽然感觉公司的工作环境有污染，墙壁和地面会散发异味，时间长了会头疼。...
- Visual Studio解决方案的目录结构设置和管理
- firefox与ie的javascript兼容性编程汇编【转载】
- Atitit 数据分析存储位置的查找方法与流程attilax总结
- 从《色戒》，看人性的欲望
- 64位mysql下载百度云_MySQL下载与安装
- 含有n个元素的整型数组，将这个n个元素重新组合，求出最小的数，如{321,3,32}，最小的数为321323...
- 全面了解#中国加密艺术圈、元宇宙和就业
- 输入单张图片到神经网络
- JDBC如何防止SQL注入