65.9K
CodeProject 正在变化。 阅读更多。
Home

弹出窗口与新页面

emptyStarIconemptyStarIconemptyStarIconemptyStarIconemptyStarIcon

0/5 (0投票)

2009年8月8日

CPOL

4分钟阅读

viewsIcon

19913

这篇评论比较了使用弹出窗口和新页面来允许用户选择选项。

引言

这篇评论比较了使用弹出窗口和新页面来允许用户选择选项。弹出窗口通常用于允许用户从一组特定的选项(可能是固定的或动态的)中进行选择。但是,将这些选项设置为单独的页面通常更好,这可能会提供更多信息并减少**点击次数**。此示例对比了常见的日历作为弹出窗口或新页面的方式。下面是日历页面的在线演示链接。

典型日历弹出窗口的视图

Popup.PNG

这叠加在当前页面前面,用户必须将注意力集中到窗口上。

一个全页面日历示例(75%比例)

Page.PNG

此示例是用户的全部焦点。 可以在http://shofarnexus.com/Philosophy/PageLayout/PageVsPopup/Calendar查看演示。

月份弹出窗口或15个月日历页面

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

我们的替代方案是一个页面,显示从当前季度开始的15个月日历。这假设应用程序请求的是未来的日期。当选择任意日期时,可能更倾向于使用标准的12个月日历。

点击次数

使用弹出窗口选择当前月份中的某一天,需要点击一次打开日历,点击一次选择日期。对于页面,我们需要相同的两次点击。但是,当您选择未来月份中的一天时(随着月份的推移,这种情况的频率可能会增加),则需要额外点击一次或多次。但是,使用15个月的日历,我们仍然保持两次点击,除非我们选择的是一年以后的日期,这种情况不太可能发生。

日历中的附加信息

可以向日历用户呈现附加信息,例如通过颜色编码分配给日期的属性,或使无效日期不可选择。例如,如果周末或过去的日期不适用,则可以将其设置为不可选择,并用颜色突出显示特殊日期。

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

如果您的应用程序需要开始日期和结束日期,那么您可以在呈现结束日期的日历时使用有关开始日期选择的信息。例如,如果结束日期必须在开始日期的特定范围内,则只有这些日期才能被选择。首选日期可以高亮显示。显然,开始日期可以高亮显示,因为它已经被选择了。

页面响应时间

弹出窗口的一个论点是弥补缓慢的页面响应时间。在互联网的早期,这主要是由于连接速度慢造成的。但是,现在大多数延迟都是由于服务器生成页面所需的时间和浏览器呈现页面所需的时间造成的。与简单的内容相比,向页面添加复杂性确实会增加响应时间。一个内容和脚本繁重的页面可能会让用户等待很长时间,这将使用户不愿重复访问该页面,因此弹出窗口更可取。轻量级的页面响应速度很快,尤其是在内网应用程序中,无需应对响应时间问题。

演示

可以在http://shofarnexus.com/Philosophy/PageLayout/PageVsPopup/Calendar查看15个月日历的现场演示,以及用于生成页面的标记可以在http://shofarnexus.com/Philosophy/PageLayout/PageVsPopup/Calendar.shofar查看。

我们对15个月日历页面的测试显示,服务器平均处理时间为10毫秒,生成约50KB的HTML。测试是在一台普通的2007年末笔记本电脑(东芝A205-S6808)上进行的。

结论

平均而言,新页面可能会减少点击次数,并提供更多信息来描述选项。当主页面内容繁重,请求和渲染页面之间存在明显的延迟时,弹出窗口可以减少用户必须承受的延迟次数。当页面设计简洁明了,尤其是在网络延迟较小的内网应用程序中时,新页面可能优于弹出窗口。

© . All rights reserved.