描述时间范围的最佳 GUI 控件 [英] Best GUI control(s) to describe a time range

问题描述

我需要让最终用户指定一个时间范围，作为开始日期/时间和结束日期/时间在内部存储和使用.范围可以是几分钟，也可以是几天.

I need to let end users specify a time range, to be stored and used internally as a starting date/time and ending date/time. The range could be minutes or it could be days.

有没有人发现可以优雅地处理这个问题的交互式控件?

大多数 GUI 工具包都有一个日历控件，所以我可以用一天的日历和时间的文本字段指定开始"……结束"也是如此.

Most GUI toolkits have a calendar control, so I could specify "start" with a calendar for the day and a text field for the time...and the same for "end".

我还可以用单个文本字段或滑块替换结束"控件，该字段或滑块仅描述开始结束"后多少秒/分钟/小时.

I could also replace the "end" controls with a single text field or slider that simply describes how many seconds/minutes/hours after start "end" is.

我不喜欢这些想法的一点是，描述这样一个简单的概念需要多少点击、输入和更多的点击.此外，如果输入的时间无法识别为时间，我必须拍打用户的手.

What I don't like about these ideas is how much clicking, typing, and more clicking is required to describe such a simple concept. Also I have to slap the user's hand if a time is typed in that isn't recognizable as a time.

是否有我忽略的更清晰的实现?

Is there a cleaner implementation that I'm overlooking?

推荐答案

当我思考诸如此类的问题时，我倾向于从常见的设计模式中寻找灵感.

I tend to look at common design patterns for inspiration when I'm pondering problems such as this.

雅虎模式库 提供 一些潜在的解决方案.

UI 模式网站 也给出一些建议，值得一看.

为了更好地衡量，这里是 Welie 模式库中的另一个解决方案.

For good measure, here's another solution at the Welie pattern library.

另一个灵感来源可能是其他网站和应用程序.例如，考虑需要记录短时间和长时间持续时间的所有用例.例如，公司 TimeSheet 记录、公司汽车里程日志软件、任务记录软件、秒表应用程序、日历应用程序等.然后看看他们如何处理用于捕获时间范围的 GUI 控件.

Another source of inspiration might be other sites and applications. For example, think of all the use-cases where recording short and long time time durations is required. As an example, company TimeSheet recording, company car mileage log software, task recording software, stopwatch applications, calendaring apps, etc. Then see how they've handled the GUI controls for capturing time ranges.

我个人还没有找到最喜欢的选择日期和时间的解决方案.但是，我想我想要这样的东西.

I haven't personally found a favourite solution for picking date and time. But, I think I'd want something like this.

• 用户点击以显示日历弹出窗口
• 弹出式显示 2 个并排日历(开始日期/时间和结束日期/时间)
• 日历 1 显示今天的日期，另一个也显示今天的日期.
• 日历控件允许常规导航和选择年月日.
• 每个日历下方都有一个 hh:mm 框，默认为当前时间.
• 用户可以使用向上/向下箭头或键入来编辑此时间框中的值.
• 或者，在每个日历下方显示一个模拟时钟.需要点击 2 次鼠标来设置时间(点击 1 为小时，点击 2 为分钟).

• User clicks to show calendar popup
• Popup shows 2 side-by-side calendars (start date/time and end date/time)
• Calendar 1 shows todays date, and the other also shows todays date.
• Calendar controls allow usual navigation and selection of day month year.
• Below each calendar is a hh:mm box, which defaults to the current time.
• User can edit value in this time box using up/down arrows or by typing.
• Alternatively, show an analogue clock below each calendar. It takes 2 mouse clicks to set time( click 1 for hour and click 2 for minutes).

希望能帮到你

这篇关于描述时间范围的最佳 GUI 控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！