axure web组件_AXURE原型设计:移动端选择器的应用

移动端的选择器就好比是web端的下拉列表,可以说是每个系统、软件必备的组件,也是移动端元件库的必备元件,文章对移动端选择器的不同种类以及原型应用进行了梳理分析,与大家分享。

284a76064daa68601e589819ee085b0e.png

一般而言,移动端的选择器分为单选选择器、多选选择器。

01 单选选择器

单选选择器按效果又可以分为,点击选择器、滑动选择器、多级选择器、具有搜索效果的选择器、开关选择器……

点击选择器:一般以底部弹窗的形式出现,如下图所示,通过手机点击选中选项,返回选择内容,具体选项内容可以在中继器表格中填写。

6aa1aad7f743c9d3cae894666fc36091.gif

滑动选择器:滑动选择器的效果和点击选择器效果非常接近,区别主要在于,滑动选择器是将需要选中的内容活动至中部,然后点击确认按钮确认选中后返回选中内容。现在很多app使用这种效果,会比点击选择器炫酷,但是原理都是通过中继器制作选择内容,只不过是交互的方式不一样,所谓咸鱼白菜各有所爱。

31e04c50622ea308bf52448377dbd680.gif

分级选择器:在滑动选择器的基础上在加一级,比较适用于省份-城市或者品牌-产品这种类似的选择。这种选择器是由两个或两个以上的中继器制作而成,第一个中继器选择后,一般会对第二个中继器进行筛选,例如选择了广东省,那么2级内容就应该筛选掉广东省以外的城市。

5d877d894cefa613f09a100ca23d8547.gif

当然了,也有些情况是不需要进行筛选的,例如时间,因为没个小时都是60分钟,所以这里的二级内容分钟就不需要筛选的操作了。

b8ddaba28b22d25924915ce09d265b7a.gif

在日期选择器里面,又有一些不同,他的2级选择器是月份,因为每年都是12个月,所以这里的2级就不需要筛选,但是他的三级是天,因为每个月的天数都不同,而且闰年的二月有29日,所以这里的三级内容需要根据一级和二级选择的内容进行显示。所以具体情况还是要具体分析。

a44000908ff1359d970d96adecf5f1bd.gif

可搜索选择器:这种选择器一般用于选择项较多,例如全国的城市有几百个,一个个找很麻烦,所以这时就需要用都可搜索的选择器,根据用户输入的内容,对中继器进行模糊的搜索,让用户快速找到并选择内容。

ae94bec7d1716322ba2bd9ccf6c86b0f.gif

开关选择器:这种选择器是单选选择器里最特别的一种,因为他只有两种选项,true or false,不适用于弹窗这么复杂,所以可以直接用开关按钮代替,常见按钮是授权或者性别选择等等。

2d4076cf20638c334f3443cadcc2f301.gif

02 多选选择器

多选选择器主要应用于类似爱好、特长、技能的选择,用户可以选择多个选项,所以多选选择器就不适用用滑动选择器和开关选择器来做。一般常用的多选选择器都是点击选择器,当然也有搜索效果的多选选择器

点击多选选择器:如果选项较少,一般也是以底部弹窗的形式出现,如下图所示,通过手机点击选中选中或取消选中该选项,返回选中内容,具体选项内容可以在中继器表格中填写。

042428210ea7ede6cf96cd299038b8bc.gif

可搜索的多选选择器:如果选项太多,就不太适合用上面的选择器,这是我们需要给他增加一个搜索的功能,根据用户输入的内容,对中继器进行模糊的搜索,让用户快速找到并选择内容。

d58f17497ff9aad14f1891e02b1d01e8.gif

那以上就是本期关于移动端常用选择器介绍的全部内容,主要是基于我个人在实际工作中需要用到的原型,而设计出来的axure组件。

如果大家有所收获,希望可以点赞鼓励一下,也欢迎大家交流,谢谢。

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

题图来自Unsplash,基于CC0协议

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

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

相关文章

Storm精华问答 | storm与Hadoop有什么区别?

戳蓝字“CSDN云计算”关注我们哦!归于Apache社区,Storm被业界称为实时版Hadoop。随着越来越多的场景对Hadoop的MapReduce高延迟无法容忍。而目前已是分布式技术领域最新爆发点,Storm更是流计算技术中的佼佼者和主流。今天我们就一起来看看Sto…

QuickBI助你成为分析师——搞定数据源

摘要: QuickBI支持多种数据源连接,添加数据源是数据分析展示的第一步,下面来详细介绍一下产品数据源支持情况! Quick BI是一个基于云计算的灵活的轻量级的自助BI工具服务平台,提供海量数据即时分析 ,拖拽式…

光动能表怎么维护_男士手表什么牌子好,男士手表品牌推荐, 天梭、阿玛尼、西铁城、天王表、罗西尼、卡西欧男手表推荐...

本文目录一、男士手表分类和选购看点,男士手表什么牌子好二、天梭、阿玛尼、欧米茄、天王表、罗西尼、卡西欧等大品牌爆款男士机械手表推荐三、天梭、阿玛尼、卡西欧爆款男士石英手表推荐四、西铁城光动能男士手表推荐五、华为、佳明智能运动手表推荐本文由钟灵原创…

“刚毕业1年,做Python挣了60W!”网友:吹的不多..

现状揭秘:Python岗位大厂50K起?程序员:心态崩了!屠杀各种榜单,拿下语言排行榜的Python,薪酬真的如同网传开挂了吗?数据来自于职友集网站2019年7月8号从上图看,Python薪酬普遍集中在2…

区块链如何改变AI

摘要: 区块链和人工智能,这两种常常被误解的技术,它们怎样增强数据处理能力?本文将对其进行详细介绍。区块链被吹捧为一种新兴技术,它有可能对每个行业造成影响。区块链的分布式系统与当今使用的固有集中式操作系统相对…

库函数memcpy的使用

库函数memcpy是内存函数的拷贝&#xff0c;memcpy的函数参数如下 把源头的指针的值拷贝到目标指针的值中&#xff0c;拷贝是按字节拷贝的&#xff0c;使用方法如下 #include<stdio.h> #include<string.h> int main(){int arr1[]{1,2,3,4,5,6,7,8,9,10};int arr2[1…

大家常用的 IDEA 插件大推荐,个个都得安装!

代码生成 插件名称作用Easy Code代码生成&#xff0c;支持定制模板Codota智能提示.ignore生成各种ignore文件&#xff0c;一键创建git ignore文件的模板&#xff0c;免得自己去写lombok简化代码工具restfultoolkit精确搜索urlMaven Helper解决maven以来冲突GenerateAllSetter一…

全新一代人工智能计算引擎MaxCompute杭州开服,强化阿里云大数据能力,比肩谷歌微软...

摘要&#xff1a; 3月22日&#xff0c;阿里云将正式开服售卖华东1&#xff08;杭州&#xff09;节点的大数据计算服务MaxCompute&#xff0c;以进一步提升对华东区域客户服务的响应速度&#xff0c;推动杭州大数据、人工智能产业的加速发展。 日前&#xff0c;全球权威调研机构…

【实操手册】一篇文章教你快速开始使用视频点播

摘要&#xff1a; 阿里云视频点播&#xff08;VoD&#xff09;是集音视频采集、编辑、上传、自动化转码处理、媒体资源管理、分发加速、视频播放于一体的一站式音视频点播解决方案。 用户可以通过阿里云管理控制台进行基本和高级 VoD 配置、操作&#xff0c;还可以通过视频点播…

微服务架构到底是什么鬼?

戳蓝字“CSDN云计算”关注我们哦&#xff01;摘自《微服务架构设计模式》作者&#xff1a;&#xff1a;[美] &#xff08;Chris Richardson&#xff09;译者&#xff1a;喻勇 导语&#xff1a;微服务架构如何与更广泛的软件架构概念相结合&#xff1f;什么是服务&#xff1f;服…

厉害了,蚂蚁金服!创造了中国自己的数据库OceanBase

摘要&#xff1a; 两万字长文带你了解关于OceanBase的一切&#xff01;2008年&#xff0c;王坚从微软亚洲研究院常务副院长的位置上离职后&#xff0c;于当年9月加入了阿里巴巴集团担任首席架构师一职&#xff0c;负责集团技术架构以及基础技术平台建设。加入阿里没多久后&…

模型预测控制 索引超出数组元素的数目(0)。_C++基础总结(二):C++基本数据类型及流控制语句详解...

上次分享了hello world&#xff0c; 今天小编分享 C基本数据类型及流控制语句 &#xff0c;建议大家收藏慢慢学习&#xff0c;同时希望对大家的C学习有所帮助。C 数组C 支持数组数据结构&#xff0c;它可以存储一个固定大小的相同类型元素的顺序集合。数组是用来存储一系列数据…

ajax将数据显示在class为content的标签中_利用selenium实现自动翻页爬取某鱼数据

基本思路:首先用开发者工具找到需要提取数据的标签列表:利用xpath定位需要提取数据的列表然后再逐个提取相应的数据:保存数据到csv:利用开发者工具找到下一页按钮所在标签:利用xpath提取此标签对象并返回&#xff1a;调用点击事件,并循环上述过程:最终效果图:代码:from seleniu…

实体嵌入(向量化):用深度学习处理结构化数据

摘要&#xff1a; 本文详细阐述了深度学习如何来实现处理结构化数据的方法。嵌入源自于NLP&#xff08;word2vec&#xff09;中的单词学习&#xff0c;上图来自Aylien本博文将涉及机器学习中两个重复出现的问题&#xff1a;第一个问题是深度学习在图像和文本中都有较好的表现&a…

arcengine遍历属性表_Excel催化剂-遍历文件夹内文件信息特别是图像、音视频等特有信息...

在过往的功能中&#xff0c;有体现出在Excel上管理文件的极大优势&#xff0c;在文件的信息元数据中&#xff0c;有图片和音视频这两类特有的属性数据&#xff0c;此篇对过往功能的一个补充&#xff0c;特别增加了图片和音视频信息的遍历功能。使用场景在文件管理过程中&#x…

想要成为数据科学家?知道这11种机器学习算法吗?

摘要&#xff1a; 想要成为数据科学家&#xff1f;知道这十几种机器学习算法吗&#xff1f;赶快来了解一下吧&#xff0c;文中附各种算法的资源地址&#xff01; 机器学习从业者都有不同的个性&#xff0c;虽然其中一些人会说“我是X方面的专家&#xff0c;X可以训练任何类型的…

Docker精华问答 | Consul是什么?

在计算机技术日新月异的今天, Docker 在国内发展的如火如荼。特别是在一线互联网公司 Docker 的使用是十分普遍的,甚至成为了一些企业面试的加分项&#xff0c;那么今天我们继续关于Docker 的精华问答。1Q&#xff1a;Consul是什么&#xff1f;A&#xff1a;Consul是一个分布式…

2020科目一考试口诀_二级建造师考试科目有哪些2020

2020二级建造师考试科目有哪些&#xff1a;2020年二级建造师考试设《建设工程施工管理》、《建设工程法规及相关知识》两个公共科目和《专业工程管理与实务》科目(包含六个专业类别&#xff0c;任选一科报考)。(一)《专业工程管理与实务》科目分为6个专业类别&#xff1a;建筑工…

机器学习用于金融市场预测难在哪?

摘要&#xff1a; 本文主要讲述了机器学习用于金融市场预测难在哪&#xff1f;——金融间序是典型的部分可见马尔科夫决策过程&#xff08;POMDP&#xff09; 数据分布 小样本 难以计算的数据 十分复杂 部分可见马尔科夫决策过程 推荐系统的相似性 结束思索金融市场已经成为最早…

full join 和full outer join_多表关联:公式展开、join、过滤条件的顺序

这是在实现多表关联时想到的。我们现在这套体系&#xff0c;实现多表关联比较复杂。如果Superset能官方支持多表关联&#xff0c;不知道会是什么样的方案&#xff0c;复杂度如何。在公式这个层面&#xff0c;没有关联条件&#xff0c;只有两个列、或者多个列&#xff0c;相互之…