专业IT网络知识平台,分享IT百科知识、生活百科知识解答!

易企推科技
易企推科技

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

来源:小易整编  作者:小易  发布时间:2023-08-30 09:48
摘要:App中常使用的时间(日期)选择组件有滚轮式与日历式2种。同样都可以实现具体时间或时间段选择的功能,实际应用中该如何取舍呢?今天我们就来看看这两种方式各自的优势与使用场景。一、滚轮式时...

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

本文地址:网络知识频道 https://www.hkm168.com/jiqiao/1041866.html,易企推百科一个免费的知识分享平台,本站部分文章来网络分享,本着互联网分享的精神,如有涉及到您的权益,请联系我们删除,谢谢!


网络知识
小编:小易整编
相关文章相关阅读
  • 奇异值分解(SVD)简介及其在图片压缩中的示例

    奇异值分解(SVD)简介及其在图片压缩中的示例

    奇异值分解(SVD)是一种用于矩阵分解的方法。它将一个矩阵分解为三个矩阵的乘积,分别是左奇异向量矩阵、右奇异向量矩阵和奇异值矩阵。SVD在数据降维、信号处理、推荐系统等领域广泛应用。通过SVD,我们可以将高维数据降低到低维空间,从而提取出数...

  • 什么是构造函数?详解JavaScript中的构造函数

    什么是构造函数?详解JavaScript中的构造函数

    作为原型和原型链的基础,先了解清楚构造函数以及它的执行过程才能更好地帮助我们学习原型和原型链的知识。本篇文章带大家详细了解一下javascript中的构造函数,介绍一下怎么利用构造函数创建一个js对象,希望对大家有所帮助!一个普通的函数被用...

  • mysql中的不等于符号是什么

    mysql中的不等于符号是什么

    mysql中的不等于符号有两种:“!=”和“”;它们都可用于判断数字、字符串、表达式是否不相等。对于“!=”和“”,如果两侧操作数不相等,返回值为1,否则返回值为0;如果两侧操作数有一个是null,那么返回值也是null。本教程操作环境:w...

  • 如何取消PPT中的所有动画效果和声音

    如何取消PPT中的所有动画效果和声音

    当我们为ppt添加了动画效果后,有时又会发现需要取消这些动画效果。那么,ppt动画效果怎么全部取消?幸运的是,powerpoint提供了一种简单而高效的方法。下面小编就来为大家讲讲如何去掉ppt的动画效果,让观众更好地关注您想要传达的信息。...

  • html如何解析%%

    html如何解析%%

    html是一种用于创建网页结构的标记语言,它提供了一种方式来标记文本、图像、链接以及其他与网站相关的内容。html可以在网页中插入各种元素,包括表格、列表、图像、表格等等。本文将讨论html的解析过程以及如何编写有效的html代码。HTML...

  • JS怎么获取当前时间戳

    JS怎么获取当前时间戳

    js获取当前时间戳,可以通过date.now()方法来实现,返回自1970年1月1日00:00:00utc以来经过的毫秒数也就是当前时间戳。下面我们就结合具体的代码示例,给大家介绍JS怎么获取当前时间戳。代码示例如下:...

  • Java 中的各种锁有哪些?

    Java 中的各种锁有哪些?

      Java中15种锁的介绍  在读很多并发文章中,会提及各种各样锁如公平锁,乐观锁等等,这篇文章介绍各种锁的分类。介绍的内容如下:  公平锁/非公平锁  可重入锁/不可重入锁  独享锁/共享锁  互斥锁/读写锁  乐观锁...

  • 如何使用PHP中的字符串变量

    如何使用PHP中的字符串变量

    如何使用PHP中的字符串变量在PHP中,字符串变量是一种非常常见的数据类型,用于存储和操作文本数据。在本文中,我们将介绍如何使用PHP中的字符串变量,并提供一些具体的代码示例。字符串变量的声明和赋值在PHP中,要声明一个字符串变量,只需要使...

  • 周排行
  • 月排行
  • 年排行

精彩推荐