解析App中的2大时间选择器

App中常使用的时间(日期)选择组件有滚轮式与日历式2种。同样都可以实现具体时间或时间段选择的功能，实际应用中该如何取舍呢？今天我们就来看看这两种方式各自的优势与使用场景。


一、滚轮式时间选择器


交互方式

1. 点击btn呼出选择器

①从屏幕底部呼出弹层，如滴滴

②从菜单栏下方呼出弹层，如网易有钱

③在当前屏幕展开，如TIM

2. 上划滑动滚轮进行选择

3. 点击确定按钮进行提交

优势

1. 取材于用户现实中熟悉的密码锁、记分牌样式、用户熟悉上下滑动的操作方式，学习门槛低


2. 体积小，节约空间，多种页面位置，方便与多种情景进行配合 3. 对用户的操作干扰性较小

劣势

1. 滚动选择方式较枯燥，在滚轮选项很多时，用户可能会在多次滚动选择中产生不耐烦情绪

2. 除了数字外没有其他信息进行核实确认

3. 视觉表现不够生动

适用场景

1. 用户对自己要选择的具体时间节点非常明确，例如生日、纪念日、预约服务、待办事项

2. 不同的用户选择的时间节点跨度很广，例如生日的年份会从1900-2018

使用建议

1. 选项数量一般为2~3项，最多5项；

2. 为用户设置合理的默认选项，减少操作次数，提升效率，例如：


3. 选择合适的展开位置，把滚轮选择器放到控件触发区域附近，方便用户操作
4. 用“今天”、“昨天”等相对概念，更快的激发人对时间的感知，例如上图滴滴、TIM
5. 不显示不可选时间，暗示用户可选日期，降低用户误操作可能性

6. 若有选项为非必填项，可提供忽略该选项操作，如下图生日管家，可选择不填写年份，点击忽略按钮后，年份收起。

二、日历式时间选择器


交互方式

1. 点击btn打开选择器，通常为新开页面（如上图飞猪）或全屏弹层（如去哪儿）

2. 点击或者滑动选择某一具体时间或时间段

3. 点击确定按钮进行提交

优势

1. 取材于用户现实中熟悉的日历样式，用户学习成本低。


取材于用户现实中熟悉的密码锁、记分牌样式、用户熟悉上下滑动的操作方式，学习门槛低

优势

1. 取材于用户现实中熟悉的密码锁、记分牌样式、用户熟悉上下滑动的操作方式，学习门槛低

劣势

1. 占用面积大，新开页面或全屏弹层对用户操作的连续性干扰较大

2. 单页展示的时间选项较少，不便于选择时间跨度较大的时间段

适用场景

1. 用户不能明确具体时间，只有大致范围，例如这个月的某一天

2. 用户需要对自己选择的时间进行二次确认，例如通过星期确定时间有没有记错

3. 不同用户选择的时间主要集中在一个范围内，如预定火车票主要集中在未来一个月内

使用建议

1. 设置合理的默认页面，减少操作次数，提升效率。通常采用日历式选择器的场景都是选择近期时间，所以默认页面为当前月，如本章节顶部示例，都默认展示当前月。

2. 提供返回默认页的按钮，方便用户进行选择；如下图生日管家、大姨妈，在查看日历时，当日历显示页为非当前页时，出现返回当前日期按钮


3. 当选择时间范围跨度较大时提供快速跳转的方式，可以与滚轮式选择器配合使用

4. 将不可选择的时间置灰，暗示用户可选日期，降低用户误操作可能性

总结

综上所述，滚轮式时间选择器和日历式时间选择器各有所长，设计师要根据实际场景对分析需求并灵活判断该用哪种交互方式更合理。

当然，没有最好只有更好，今天分析的两种方式只是较为常见的选择方式，可以用于大部分场景下。在这之外也有其他特别的方式，例如：


货拉拉：弹层外区域显示已选中内容自如：表格式选择滴答清单：可自定义选择日历的排布方式详细情况就不在这里唠叨啦，如果你感兴趣的话，百看不如一见，不妨亲自去试一试~也许会有新收获哦。
海盐社（公众号）
作者： 阿肆Stella
赞 (0)

相关推荐

  • 怎么在手机掌阅app中修改休息提示时间

    怎么在手机掌阅app中修改休息提示时间

    随着社会和经济的发展,手机掌阅app已经成为我们生活中必不可少的一部分,那么我们怎么在手机掌阅app中修改休息提示时间呢,接下来就让小编来教你们吧.具体如下:1. 第一步,打开手机上的掌阅app.2. ...

  • 抖音APP中的视频发布时间如何查看

    抖音APP中的视频发布时间如何查看

    今天给大家介绍一下抖音APP中的视频发布时间如何查看的具体操作步骤.1. 首先打开手机上的抖音短视频APP,进入主页面后,找到想要查看的视频,点击右侧的对方头像:2. 在打开的对方主页中,找到刚才的视 ...

  • 中国银行App中的自动退出时间如何设置修改

    中国银行App中的自动退出时间如何设置修改

    中国银行App中,在我们登录状态下,一段时间没有操作后,就会自动退出登录,这个时间是我们可以手动设置的,今天就跟大家介绍一下中国银行App中的自动退出时间如何设置修改的具体操作步骤.1. 首先打开手机 ...

  • 如何在抖音APP中设置预告直播时间

    如何在抖音APP中设置预告直播时间

    今天给大家介绍一下如何在抖音APP中设置预告直播时间的具体操作步骤.1. 解锁手机后,找到桌面上的"抖音短视频"APP,打开.2. 登录进入主页面后,点击底部的加号图标.3. 如图 ...

  • 抖音APP中的预告直播时间如何设置

    抖音APP中的预告直播时间如何设置

    我们在抖音中进行直播的时候,是可以设置预告直播时间的,今天就跟大家介绍一下抖音APP中的预告直播时间如何设置的具体操作步骤.1. 首先打开手机上的抖音APP,进入主页面后,点击底部的加号图标.2. 在 ...

  • 如何在虎牙直播app中申请成为大神陪玩

    如何在虎牙直播app中申请成为大神陪玩

    我们想要在虎牙直播APP中申请成为大神,进行大神陪玩该怎么操作呢?今天就跟大家介绍一下如何在虎牙直播app中申请成为大神陪玩的具体操作步骤.1. 解锁手机后,找到桌面上的[虎牙直播]app,打开.2. ...

  • 斗鱼直播APP中夜间模式的时间如何修改

    斗鱼直播APP中夜间模式的时间如何修改

    斗鱼直播APP中夜间模式的时间如何修改呢?一起来看看具体操作步骤吧.1. 首先解锁手机,找到桌面上的[斗鱼直播]APP,打开.2. 进入主页面后,点击左上角的[个人头像].3. 在打开的左侧页面,点击 ...

  • 如何对中国银行手机银行app中的账户退出时间进行设置

    如何对中国银行手机银行app中的账户退出时间进行设置

    随着科技的发展,我们可以下载各个银行的手机app来进行银行业务的办理,当我们在使用中国银行手机银行时,如何设置账户退出时间呢?接下来就由小编来告诉大家如何操作.具体如下:1.第一步,打开手机并在桌面上 ...

  • 怎么将百度贴吧App中的字体调大

    怎么将百度贴吧App中的字体调大

    今天,小编给大家分享将百度贴吧App中字体调大的方法,希望对大家有所帮助.具体如下:1. 首先,请大家在自己的手机中找到[百度贴吧]图标,点击进入主界面.2.第二步,接下来,我们需要选择屏幕右下方的[ ...