页面与弹窗的比较:日历示例

在网页设计中,弹窗(Popup)和新页面(Page)是两种常见的用户交互方式。弹窗通常用于让用户从一组固定的或动态的选项中进行选择。然而,将这些选项放在一个单独的页面上,可能会提供更多的信息,并且可能减少用户的点击次数。本文通过比较日历作为一个弹窗和作为一个新页面的两种形式,来探讨这两种方法的优劣。

首先,来看一个典型的日历弹窗。这种弹窗覆盖在当前页面的前面,用户必须将注意力集中在这个小窗口上。与之相对的,是一个完整的页面日历,它占据了用户全部的注意力。

在中,可以看到这两种日历的对比。

日历弹窗与15个月日历页面

在讨论中,将比较典型的日历弹窗,它显示当前月份,并允许用户直接点击特定的日期。要查看其他月份,通常需要点击向前或向后一个月。

替代方案是一个显示从当前季度开始的15个月日历的页面。这假设应用程序请求的是一个未来的日期。如果用户在选择任意日期,那么标准的12个月日历可能是首选。

点击次数

使用弹窗在当前月份选择一天,需要点击一次来打开日历,再点击一次来选择日期。对于页面,也需要同样的两次点击。然而,当选择未来月份的一天时,随着月份的推进,可能需要额外的点击。但是,使用15个月日历时,仍然只需要两次点击,除非选择的是一年以后的一天,这种情况不太可能发生。

日历中的额外信息

可以向日历的用户呈现额外的信息,例如通过颜色编码分配给日期的属性,或者使无效的日期不可选择。例如,如果周末或过去的日期不适用,它们可以设置为不可选择,而优质日期可以用颜色增强。

虽然这可以在弹窗中实现,但在完整页面上实现起来更简单。有了额外的空间,可以详细说明颜色编码的含义,或者提供有关选择过程的额外信息。

如果应用程序需要同时选择开始和结束日期,那么可以利用已经知道的开始日期选择信息,来呈现结束日期的日历。例如,如果结束日期必须在开始日期的某个范围内,那么只有那些天可以被选择。首选日期可以被高亮显示。显然,开始日期可以被高亮显示,因为它已经被选择了。

页面响应时间

支持弹窗的一个论点是为了补偿页面响应时间慢。在互联网的早期,这主要是因为连接速度慢。然而,现在大多数延迟是由于服务器生成页面的时间和浏览器渲染页面的时间。向页面添加复杂性,与简单内容相比,确实会导致响应时间变慢。一个内容和脚本繁重的页面可能会让用户等待很长时间,这会使用户不愿意重复访问该页面,因此使弹窗更可取。轻量级的页面,特别是内部网应用程序,几乎没有网络延迟,不需要处理响应时间问题。

演示

15个月日历的,以及用于生成页面的标记,可以在看到。

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485