Picker

从一种预设数据中（多个选项集合）供用户进行选择其中一项的控件。

不同平台Picker的表现形式也不同，IOS的Picker称之为滚轮选择器，在Andriod端，Picker主要表现形式是Dialog（对话框）或Dropdown menu（下拉菜单）。 image.png

形式：

1.在移动端Picker最常见的用途是选择时间，IOS和Android将时间相关的Picker封装成原生控件-Date Picker（日期选择器），用来选择特定的某天，每个选项集合由年、月、日三列组成。

image.png

2.如果date picker呈现形式是日历，也可以称之为Calendar date Picker（日历选择器）。Date Range Picker（日期范围选择器）是用来选择某个日期范围，常用于旅行、住宿等事件周期相关事件。可以包含快捷时间选择按钮（今天，昨天，近一周等）

3.Time Picker（时间选择器），适用于需求精确到时、分钟、秒，如果使用12小时制，记得增加AM和PM选项。 image.png

如何使用：

Picker展示区域有限，大部分选项会被隐藏，最好是用户对所有选项都比较熟悉，有预期的时候，才使用Picker。
1.提供默认选项
减少用户操作次数，提升效率。例如Date Picker是用来选择最近的时间，可以把当天作为默认选项。如果用来选择出生日期，则根据用户平均出生日期作为默认选项。
2.提供合理的排列顺序
选项的排列顺序要依据当前上下文情景而定，例如：衣服尺寸按s-xxxl从小到大的顺序排列。
3.使用相对概念增强感知

心理学证明当食物与人的关联越大，越容易引起人的注意。例如：Datepicker，比起绝对的“某年某月某日”，用“今天”、“明天”，“昨天”这样相对概念，能更快激发人对时间的感知。 image.png
4.选择项过多可以采用其他形式
如果选项过多，且选项本身比较复杂难以理解需要辅助的解释，建议用新页面或是Full-screen dialog（全屏弹出框）的形式，容纳更多选项。例如,电话铃声选择。
5.滚轮选择器要控制在五列以内
为了保证手机屏幕触控精度，以免发生误触，滚轮选择器建议控制在五列以内。
6.滚轮选择器并不一定要放在底部
Picker放在屏幕底部手指操作更轻松，但把手指从控件触发区域移动到屏幕底部，移动距离会很远操作负荷大，因此把Picker放到控件出发区域附近，或直接展开，操作会更便利 image.png

地区选择器:

1.波轮选择器（Picker）
常用于个人信息编辑场景中选择地址/新增收货地址场景。
优点是系统自带控件，兼容性好。占用页面空间小，层级浅能够实时预览其他信息，方便用户对照预览。地址联动性较强。
缺点是一屏展示的信息过少，找地址如果想要找的选项太过靠下，需要花费长时间的成本滑动。并且扩展性不强，无法扩展更多的功能，比如国外地址，同时只能先选择省-市-区的路径才能完成，无法直接选择城市。

2.块+列表选择地区。
通常在例如旅游、外卖、租房等应用上多用，场景是一般在首页定位和选择起始地目的地的时候选择地址用的较多，定位的时候一般定位到城市即可，不需要选择省，再到市，最后到区，并且用过户需要重新切换城市的时候直接可以通过Lbs定位来切换，并不需要频繁的去操作切换。优点是可以直接定位城市，根据右侧字母来筛选城市，甚至增加搜索功能，扩展性强。
缺点是层级深，大部分需要通过右侧的滑动字母来选择，，使用场景较少，无法做联动选择多级省市区。交互不友好，需要用户集中精力去操作该控件。

image.png
image.png

3.下滑连动式选择地区（菜单式）
下滑联动，点击后出现级联菜单式窗口。这类一般用在首页做实时地址联动的时候，在选择完地址就能立即看到地址的筛选结果。当有多个筛选功能的标签需要用户通过大量的条件筛选时，同时每一个筛选条件又有多级分类时最常用。
优点是直观可联动，对于多个分类的筛选项兼容性也不错。除了嵌入在下拉菜单中，也可以在该控件上加入tab切换

缺点是扩展性不强，受限区域展示信息过少，并且也只可以最多到3个关联层级，否则尺寸一小大部分信息会展示不全。 image.png
image.png
image.png

4.列表点击跳转式
以下两个选择方式分别都是嵌入在两个应用的个人资料的所在地中，类似合并式，没有平铺的效率高，也不直观。选择二级或三级之后有时会忘记上级内容。
优点是聚焦
缺点是层级深

image.png
电商（苏宁&京东）的地区选择器选择省份后再出现城市，选择城市后才能选区，依次递进，每次只可以改变一列，相对于传统的Picker，这种地区选择器不易误触，操作时注意力更集中。 image.png
image.png

5.平铺式
直观，通常只有物流行业应用
所有选项全部罗列出来，可以一眼看清所有地址，但需要一定检索时间。
优点直观，适用于频繁性搜索，扩展性强，如地址多选。
缺点是刚开始使用时候地址搜索不够高效，对新手不友好
观察用户发现习惯使用这一控件的用户更喜欢模块化容易点击，而非聚合在一起更联动的列表。可能是他们使用手势更喜欢点击而非滑动，滑动对他们来讲有认知障碍，容易误操作。可能因为设备不够流畅

image.png

6.地图定位
职能定位，如美团和饿了么。很多用户的住址不容易找到，所以可能会定位到一个更容易接收外卖的地方去定位。但定位并不一定准，用户选择完一个大致的地址依然还是会在上一级页面更完整输入地址。
优点：降低用户心理压力，用户更直观看到地图上来收外卖的点
缺点：定位不够准确，用户输入繁琐。

image.png

总结：寻找平衡点。效率这个词关键在于我们认为他对用户来说是有效率的，还是用户习惯之后使用起来更有效率。

衍生：

1.Chrome时间选择器

Android7.1.1的Chrome内使用Picker是将Android4.0时代的交互形式上增加MD风格，如果选择日期跨度不大，这种形式的认知负荷明显比calendar date picker要低。 image.png

2.Iphone7的线性马达
iphone中的震动反馈，使用Picker时可以感受到轻微震动反馈，提供选择的反馈。