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

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

01 单选选择器

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

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

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

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

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

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

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

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

02 多选选择器

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

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

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

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

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

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

题图来自Unsplash，基于CC0协议

axure web组件_AXURE原型设计：移动端选择器的应用相关推荐

axure web组件_主流设计组件规范amp;下载地址汇编
本文616字预计阅读时间:2分钟大家好! 在上篇文章<如何用项目思维,从0-1建立设计组件库>里,我从项目管理思维的角度,分享了如何在公司里推动设计组件库工作.不少读者在网络上留言希望 ...
axure原型案例_AXURE原型设计：移动端搜索原型案例
编辑导语:搜索框是每个软件.系统.app必不可少的一个组成成分,本文作者今天就基于在实际工作中需要用到的原型,和大家分享一下移动端的搜索原型案例,以及设计出来的axure组件. 常见的搜索原型包括:普 ...
axure设计出的原型打开自动跳转的问题_Axure原型设计中你不得不知道的技巧（二）...
上篇讲了控件的使用技巧,相信读者还记忆犹新,这里再跟大家回顾下,控件使用技巧:1.滚动显示动态面板内容 2.如何画折线 3.整块的点击效果 4.输入框加上提示文字 5.连接流程图 6.优化导入图像.这 ...
Bruck：一个Web界面布局原型设计框架\n
Bruck是一个面向网页设计师的新型lo-fi原型系统,让设计师可以快速为客户构建响应式且易于访问的布局原型.设计师可以通过组合多达25个Web组件来建立各种布局原型.设计师还可以在Bruck提供的在 ...
Axure RP 9.0 原型设计软件安装教程
关注公众号,免费获取资料简介: Axure RP是一款专业的快速原型设计工具.Axure(发音:Ack-sure),代表美国Axure公司:RP则是Rapid Prototyping(快速原型) ...
Axure RP 8.0原型设计（一）：入门
2016年4月Axure公司发布了大家期待已久的Axure RP 8.0正式版.Axure RP是产品经理必备的原型制作工具.Axure RP是美国Axure Software Solution公司旗 ...
Axure RP 9交互原型设计软件增加了哪些新功能
Axure RP 9是一款快速原型设计软件,主要用于WEB界面.APP界面.软件界面产品的交互原型设计.是互联网产品经理必备的软件之一,主流科技公司都在用.Axure RP 9是专为UX专业人员和业务 ...
除了Axure，还有哪些原型设计工具
产品原型设计工具是设计师制作产品原型必不可少的工具.产品原型工具可以帮助我们解决很多问题,但产品原型工具的选择已经成为一个大问题. 除了我们熟悉的产品原型设计工具Axure,市场上还有很多有用的产品原 ...
axure web组件下载_实践干货：Axure插入图标的4种办法
编辑导读:图标是我们在制作产品原型的时候使用的比较多的一类素材,在日常绘制原型的时候一般是以插入的形式添加到Axure中.本文作者结合自身经验,介绍了四种Axure中引入图标的方法,希望对大家能有所帮 ...

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

01 单选选择器

02 多选选择器

axure web组件_AXURE原型设计：移动端选择器的应用相关推荐

最新文章

热门文章