Axure PR 9 多级下拉清除选择器 设计交互


大家好,我是大明同学。

Axure选择器是一种在交互设计中常用的组件,这期内容,我们来探讨Axure中选择器设计与交互技巧。

OK,这期内容正式开始

下拉列表选择输入框元件

创建选择输入框所需的元件

1.在元件库中拖出一个矩形元件。

2.选中矩形元件,在样式窗格中将按钮元件的宽设置为300,高设置为35,输入文本“请选择分类”字号14,字体颜色灰色(#AAAAA),文本左侧对齐,线段填充颜色灰色(#AAAAA)线宽为1,圆角半径5,边距左右侧10。

3.在iconfont搜索向下icon,选中向下icon,复制SVG代码,粘贴到画布上。

4.选中向下icon元件,在样式窗格中将按钮元件的宽设置为10,高设置为5,字体颜色灰色(#AAAAA),icon参考文本居中对齐。

5.选中矩形文本框和向下icon元件组合,并创建为动态面板。

创建下拉选择列表所需的元件

1.复制两个“请选择分类”矩形元件在元件,在样式窗格中将矩形元件线宽设为0,字体颜色设置为黑色(#333333)输入“男频,女频”。

2.选中“男频,女频”元件设置为动态面板。

3.选中“男频,女频”动态面板,剪切粘贴到“请选择分类”动态面板容器中。

创建交互

创建“请选择分类”的交互状态

双击动态面板,选中“请选择分类”元件,在交互窗格点击新建交互,添加单击时显示/隐藏分类“男频、女频”动态面板,显示动态面板逐渐300毫秒。

2.点击添加动作,选择设置选中,“请选择分类”元件值为真。

3.选中“请选择分类”元件,添加鼠标悬停的样式,线段颜色为灰色(#0052D9),获取焦点的样式,线段颜色为蓝色(#0052D9)。

创建“下拉选择列表”的交互状态

1.双击动态面板,选中分类“男频女频”元件,在交互窗格点击新建交互,添加单击时显示/隐藏分类“男频、女频”动态面板,隐藏动态面板逐渐300毫秒。

2.添加动作,设置文本,“请选择分类”富文本。

3.编辑富文本[[This.text]],设置字体14号,字体颜色为黑色(#333333),点击确定。

3.添加动作,设置选中,“请选择分类”为“假”。

4.选中“男频”元件,添加鼠标悬停的样式,线段颜色为浅灰色(#F7F7F7)选中样式为灰色(#F3F4F5)。

同理设置女频选项。

6.隐藏“男频、女频”动态面板。

预览交互

点击预览,在预览页面鼠标下拉列表选择输入框可以选择对应的选项。

带清除的下拉列表选择输入框元件

在以上基础上创建清除按钮元件

1.双击“请选择分类”动态面板,选中向下icon,将向下icon单独转换为动态面板。

2.双击向下icon,在iconfont搜索删除或者关闭icon,复制SVG代码,粘贴到向下icon State2状态中。

创建交互

创建“清除”按钮的交互状态

1.双击向下icon动态面板,点击Stste2,选中清除按钮,点击新建交互,单击时,设置向下icon动态面板到 State 1。

2.添加交互动作,设置文本“请选择分类”为“请选择分类”。

给“择输入框”添加情形判断交互状态

1.双击动态面板,选中“请选择分类”动态面板,在交互窗格点击新建交互,选择鼠标移入时,将鼠标移入时交互拖到第一个。

2.选择鼠标移入时,启用情形判断,点击添加条件,情形1:如果 文字于 请选择分类!="请选择分类"点击确定,添加动作,设置动态面板“向下icon”动态面板到 State2 。

3.选择鼠标移入时,启用情形判断,点击添加条件,情形2:如果 文字于 请选择分类 ==“请选择分类"点击确定,添加动作,设置动态面板“向下icon”动态面板到 State1 。

4.点击新建交互,选择鼠标移出时,设置“向下icon”动态面板到 State1 。

5.删除单击时选中“请选择分类”为“真”交互。

预览交互

点击预览,在预览页面鼠标下拉列表选择输入框可以选择对应的选项,点击清除按钮(X),可以清除所选项。

单选多级下拉列表选择输入框元件

在以上基础上创建多级下拉元件

1.双击“请选择分类”动态面板,选中“男频、女频”矩形框

2.将“男频、女频”矩形框宽度值设置为80,添加向右符号。

3.选中“男频、女频”元件,右键转为动态面板,并命名为一级分类。

4.双击一级分类动态面板,从元件库中拖入一个内联框架,将内联框架宽值设置为80,高值设置为200,选中内联框架右键转为动态面板,并命名为二级分类。

5.选中内联框架动态面板右键设置滚动条为垂直滚动,并拖动高值遮住水平滚动条。

6.复制男频矩形框,双击二级分类内联框架动态面板粘贴到State1补充男频二级分类,State2 补充女频二级分类。

创建交互

创建“一级分类”下拉列表的交互状态

1.双击动态面板,选中男频矩形框,在交互窗格点击新建交互,添加单击时显示/隐藏分类“男频、女频”动态面板,显示动态面板逐渐300毫秒。

2.添加动作,设置二级级分类面板到State1。

3.添加动作,设置“请选择分类”选中为假。

4.添加动作,设置““请选择分类”文本为“男频”

5.同理配置女频矩形框,也可直接复制男频交互,将添加动作,设置二级级分类面板到State1,改为State2,添加动作,设置““请选择分类”文本为“男频”,改为女频。

创建“二级分类”下拉列表的交互状态

1.双击动态面板,选中二级分类都市矩形框,在交互窗格点击新建交互,添加单击时显示/隐藏分类“分类”动态面板,隐藏动态面板逐渐300毫秒。

2.添加动作,设置“请选择分类”选中为假。

3.添加动作,设置““请选择分类”文本为“男频 / 都市”

5.同理配置男频、女频所有二级分类矩形框,也可直接复制都市交互,添加动作,设置““请选择分类”文本为“男频 / 都市”,修改“男频 / 都市”字段。

6.选择二级分类,分类动态面板依次隐藏。

预览交互

点击预览,在预览页面鼠标下拉列表选择输入框可以选择对应的选项,点击清除按钮(X),可以清除所选项。

预览地址:https://6jjy6g.axshare.com

OK,这期内容到这里就结束了。

我是大明同学

下期见

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/58419.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024年10月实测安装支持 winxp的最后一个python版本 2.7.18 和python 3.4.4版本,你觉得还能正常安装吗?

各位粉丝朋友们,大家好!在编程的世界里,有时候特定的业务需求会让我们不得不使用老版本的软件。Python 目前支持 Windows XP 的最后一个版本为 Python 2.7.18。由于官网下载可能会比较耗时,为了方便大家,我将这个版本上…

省级- 可持续性再生能源消纳量(2015-2022年)

非水电可再生能源电力消纳量,作为衡量一个地区可再生能源利用程度的关键指标,正受到越来越多的关注。 非水电可再生能源电力消纳量指的是在一定时间内,除了水力发电之外的其他可再生能源(如太阳能、风能、生物质能等)…

基于uniapp微信小程序的旅游系统

作者:计算机学姐 开发技术:SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等,“文末源码”。 专栏推荐:前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏:…

Golang的跨平台开发

Golang的跨平台开发 一、Golang跨平台开发概述 语言是一种开源的编程语言,由Google开发,广泛应用于云计算和网络编程领域。Golang具有并发性好、性能优异、内存管理自动化等特点,因此备受开发者青睐。其中,Golang的跨平台特性使得…

macOS Sonoma 14.7.1 (23H222) Boot ISO 原版可引导镜像下载

macOS Sonoma 14.7.1 (23H222) Boot ISO 原版可引导镜像下载 2024 年 10 月 28 日,Apple 智能今日登陆 iPhone、iPad 和 Mac。用户现可借助 Apple 智能优化写作,为通知、邮件和消息生成摘要,体验交互更自然、功能更丰富的 Siri,使…

【排序】常见的八大排序算法

目录 一、冒泡排序 二、堆排序 三、直接插入排序 四、希尔排序 五、直接选择排序 六、快速排序 七、归并排序 八、非比较排序 --- 计数排序 九、排序的分类及稳定性分析 总结 前言 本文排序算法有:冒泡排序、堆排序、直接插入排序、希尔排序、直接选择排序、快速排序…

Node.js:内置模块

Node.js:内置模块 Node.jsfs模块读取文件写入文件__dirname path模块路径拼接文件名解析 http模块创建服务 Node.js 传统的JavaScript是运行在浏览器的,浏览器就是其运行环境。 浏览器提供了JavaScript的API,以及解析JavaScript的解析引擎&a…

ElasticSearch - Bucket Script 使用指南

文章目录 官方文档Bucket Script 官文1. 什么是 ElasticSearch 中的 Bucket Script?2. 适用场景3. Bucket Script 的基本结构4. 关键参数详解5. 示例官方示例:计算每月 T 恤销售额占总销售额的比率百分比示例计算:点击率 (CTR) 6. 注意事项与…

【MyBatis源码】SqlSource对象创建流程

文章目录 介绍XMLScriptBuilder初始化parseDynamicTags解析动态节点RawSqlSource分析代码分析实例化 介绍 代码入口: SqlSource sqlSource langDriver.createSqlSource(configuration, context, parameterTypeClass);languageRegistry:用于注册Langua…

配合数据库进行网页的动态数据上传

1.接口文档编写 1.1 什么是接口文档 在项目开发中,web项目的前后端通常分离开发, 此过程中,需要由前后端工程师共同定义接口,编写接口文档, 之后大家都根据这个接口文档进行开发,到项目结束前都要一直维…

数据结构——基础知识补充

1.队列 1.普通队列 queue.Queue 是 Python 标准库 queue 模块中的一个类,适用于多线程环境。它实现了线程安全的 FIFO(先进先出)队列。 2.双端队列 双端队列(Deque,Double-Ended Queue)是一种具有队列和…

OpenSSL

OpenSSL 概述 OpenSSL 是一个开源的、安全传输协议实现工具,广泛应用于数据加密与解密、证书生成与管理以及其他安全性相关的任务。在现代网络安全中,OpenSSL 被用于构建和维护 SSL/TLS 通信,确保数据在传输过程中的机密性和完整性。 简单来…

「C/C++」C/C++预处理 之 X宏(X Macro)

✨博客主页何曾参静谧的博客📌文章专栏「C/C」C/C程序设计📚全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasoli…

WPF+MVVM案例实战(四)- 自定义GroupBox边框样式实现

文章目录 1、项目准备2、功能实现1、EnviromentModel.cs 代码2、GroubBoxViewModel.cs 代码实现3、ViewModelLocator.cs 依赖注入4、GroubBoxWindow.xaml 样式布局5、数据绑定3、效果展示4、资源获取1、项目准备 打开项目 Wpf_Examples,新建 GroubBoxWindow.xaml 界面、Groub…

第十六章 Vue组件化开发及组件局部/全局注册

目录 一、组件化 1.1. 组件概述 1.2. 语法高亮插件 ​编辑 1.3. 组件内部组成 1.4. 让组件支持 less 1.5. 组件注册的两种方式 二、局部注册 2.1. 使用描述 2.2. 脚手架工程变动的核心代码 2.2.1. 工程结构图 2.2.2. App.vue 2.2.3. WzxHeader.vue 2.2.4. WzxMain…

excel斜线表头

检验数据验证对象 鼠标放在检验数据 验证对象中间,altenter 之后空格 选中格子,右键单元格格式, 完成 如果是需要多分割,操作一样,在画斜线的时候会有区别,在插入里面用直线画斜线即可 在表格插入的时…

【python】OpenCV—Connected Components

文章目录 1、任务描述2、代码实现3、完整代码4、结果展示5、涉及到的库函数6、参考 1、任务描述 基于 python opencv 的连通分量标记和分析函数,分割车牌中的数字、号码、分隔符 cv2.connectedComponentscv2.connectedComponentsWithStatscv2.connectedComponents…

日期选择简化版今日、本周、本月、本季度、本年

function 未来之窗_时间_现在() {let date new Date(),year date.getFullYear(), //获取完整的年份(4位)month date.getMonth() 1, //获取当前月份(0-11,0代表1月)strDate date.getDate() // 获取当前日(1-31),小时 date.getHours(),分钟 date.getMinutes();if (month &…

基于安卓Android的健康饮食系统APP(源码+文档+部署+讲解)

!!!!!!!!! 会持续一直更新下去 有问必答 一键收藏关注不迷路 源码获取:https://pan.baidu.com/s/1aRpOv3f2sdtVYOogQjb8jg?pwdjf1d 提取码: jf1d &#…

【Unity基础】初识UI Toolkit - 编辑器UI

(本文所需图片在文章上面的资源中,点击“立即下载”。) 本文介绍了如何通过UI工具包(UI Toolkit)来创建一个编辑器UI。 一、创建项目 1. 打开Unity创建一个空项目(任意模板),这里我…