Лучший графический интерфейс (ы) для описания временного диапазона

Question

Мне нужно разрешить конечным пользователям указывать временной диапазон, который будет храниться и использоваться внутри страны как начальная дата / время и конечная дата / время. Диапазон может быть минутами или днями.

Кто-нибудь обнаружил интерактивный элемент управления, который может справиться с этим элегантно?

Большинство инструментов GUI имеют элемент управления календаря, поэтому я мог бы указать «начало» с календарем на день и текстовым полем для времени ... и то же самое для «конца».

Я также мог бы заменить «конечные» элементы управления одним текстовым полем или ползунком, который просто описывает, сколько секунд / минут / часов после начала «конец».

Что мне не нравится в этих идеях, так это то, что для описания такой простой концепции требуется много нажатий, нажатий и больше нажатий. Также я должен хлопнуть по руке пользователя, если введено время, которое не распознается как время.

Есть ли более чистая реализация, которую я пропускаю?

Answer 1

Я склонен смотреть на общие шаблоны проектирования для вдохновения, когда я размышляю над такими проблемами.

Библиотека шаблонов Yahoo предлагает некоторые потенциальные решения .

Сайт UI Patterns также дает некоторые предложения , и его стоит просмотреть.

Для примера, вот еще одно решение из библиотеки образцов Welie .

Другим источником вдохновения могут быть другие сайты и приложения. Например, подумайте обо всех случаях использования, когда требуется запись короткого и длительного времени. В качестве примера можно привести записи компании TimeSheet, программное обеспечение для регистрации пробега автомобиля компании, программное обеспечение для записи задач, приложения для секундомера, приложения для составления календаря и т. Д. Затем посмотрите, как они обрабатывали элементы управления графическим интерфейсом для захвата временных диапазонов.

Я лично не нашел любимого решения для выбора даты и времени. Но, думаю, я бы хотел что-то вроде этого.

• Пользователь нажимает, чтобы отобразить всплывающее окно календаря
• Всплывающие окна 2 параллельные календари (дата / время начала и дата / время окончания)
• Календарь 1 показывает сегодняшнюю дату, а другой также показывает сегодняшнюю дату.
• Элементы управления календарем позволяют осуществлять обычную навигацию и выбирать день, месяц, год.
• Под каждым календарем есть поле чч: мм, которое по умолчанию соответствует текущему времени.
• Пользователь может редактировать значение в этом временном окне, используя стрелки вверх / вниз или печатая.
• В качестве альтернативы, показать аналоговые часы под каждым календарем. Требуется 2 щелчка мышью, чтобы установить время (1 для часа и 2 для минут).

Надеюсь, это поможет

Answer 2

Я поклонник старого элемента управления, который я видел в WAY в 90-х годах с Inventor (а затем и с Open Inventor) на машинах SGI (а затем на ПК и т. Д.): Бесконечный набор.

Некоторые скриншоты, немного маленькие, здесь здесь . Конечно, это было сделано на различных платформах с тех пор, включая подобные вещи на iphone .

Я думаю, что средство выбора даты / времени будет хорошо работать с двумя циферблатами, каждый из которых представляет порядок величины даты / времени. В искусстве ASCII каждый циферблат между [квадратными скобками] может выглядеть так:

[20 Oct | 21 OCT | 22 Oct ] [11:15 .. 11:30 .. 11:45..]

или с 3:

[20 Oct | 21 OCT | 22 Oct ] [11 .. 12 .. 1pm] [12:31 .. 12:32 .. 12:33]

Существует ряд вариантов, которые вы можете попробовать (вертикальный / горизонтальный, дата / время, дата / час / минута и т. Д.).

Циферблаты, хотя и используются довольно редко, являются естественным средством взаимодействия людей, и их опция бесконечного вращения (в отличие от слайда, который должен всегда останавливаться) хорошо подходит для даты / времени.

FWIW

Answer 3

Дизайн пользовательского интерфейса сильно зависит от приложения. «Наилучшее» подразумевает некоторую метрику, которая может измерять решения. В дизайне пользовательского интерфейса такая метрика может быть «дома много кликов / нажатий клавиш требуется, чтобы выполнить задачу?» где меньшее число лучше. Поэтому, определив свою метрику, вы можете приступить к сортировке решений на хорошие, лучшие и лучшие.

Вы также хотите уменьшить когнитивную нагрузку на пользователя. Если пользователь должен ввести последний день, в который продукт может быть обменен на основе 90-дневной политики возврата, то запрос даты начала и окончания вынудит их сделать математику даты, что неинтересно. В этом примере начальная дата с «дельтой» x дней создаст меньшую нагрузку на пользователя.

В зависимости от вашего приложения вы можете рассматривать и подходить к ним как селектор временного диапазона Google Finance на своих графиках: http://finance.google.com/finance?q=.dji

Answer 4

Вот также некоторые решения: http://quince.infragistics.com/html/PatternView.aspx?name=Date+Time+Range+Input

Answer 5

Проверьте элемент управления датой VisualHint . Это может быть настроено множеством способов, включая временной интервал. Это позволит вам использовать один экземпляр элемента управления для отображения времени начала, а другой - для установки промежутка времени до завершения периода. Элемент управления также поддерживает расширяемую базовую структуру, так что вы можете объединить начало / конец или начало / диапазон в один элемент управления.

Answer 6

Единого ответа нет, это зависит от контекста. Для многих мест хороших текстовых элементов управления достаточно. Конечно, такие вещи все еще могут помочь, поддерживая вставку и некоторые действия по увеличению / уменьшению. Может быть, он даже может сделать некоторую проверку для значения.

Тогда есть места, которые нуждаются в чем-то большем. Календарь может быть очень полезен для ввода дат, а для времени можно использовать какой-то слайдер. (В календаре Lotus Notes есть ползунок.)

Мой совет:

Подумай, что тебе нужно. Не помещайте сложные виджеты в менее используемый диалог.

Если вам нужны эти полезные полезные виджеты, проверьте, есть ли готовые готовые в используемой вами библиотеке, и найдите время, чтобы узнать, как это сделали другие.

Всегда иметь текстовые элементы управления с поддержкой вставки.

Answer 7

Это приходит поздно, и это не контроль как таковой. Я прочитал эту идею в блоге, который больше не могу найти (на самом деле, я нашел этот пост, пытаясь найти его). Идея состоит в том, чтобы использовать метафору настенных часов. Вот что я реализовал для удовольствия. Это не функциональный контроль. Вы можете использовать что-то подобное в качестве отправной точки для естественного захвата времени. Максимум три клика, чаще всего два. Только циферблаты сближаются.

http://www.viridium.ro/clock-sample/

Используйте браузер с поддержкой HTML5; то есть Chrome.

Answer 8

Наблюдайте за тем, что люди делают с вашим контролем времени. Затем напишите это так, чтобы оно больше подходило для того, чтобы делать то, чего хотят люди. Например, откажитесь от прошлых дат, если ввод будущих дат имеет смысл.

Джонатан Лейтон сделал замечательный элемент ввода даты -element в jquery, который я нашел очень удобным для ввода дат. Это полезно тем, что пользователь может ввести дату, щелкнув или введя ее напрямую. Пользователь также непосредственно получает подсказку о том, что нужно ввести его в поле. Если вы соедините это с каким-то объектом временной шкалы, вы можете далеко уйти. Просто избегайте создания элементов пользовательского интерфейса, которые сбивают с толку или раздражают!

Answer 9

Один способ, которым я очень хорошо видел работу, - это использование диаграммы Ганта:
http://en.wikipedia.org/wiki/Gantt_chart

Вы можете создать одну линейную диаграмму, а затем масштабировать ее по месяцам, дням, часам и минутам, в зависимости от того, насколько широким или увеличенным вы будете управлять. Проблема в том, что я сейчас не знаю ни одного элемента управления, который бы занимал всего одну строку, поэтому вам может потребоваться создать пользовательский. Вы можете найти элемент управления диаграммы Ганта и просто выполнить одно задание / элемент.

Answer 10

Если в вашем наборе инструментов GUI нет более продвинутого контроля времени, два календарных элемента управления, представляющих начало и конец, являются наиболее простыми. Кроме того, вам нужно решить, как вы хотите использовать информацию. Например, если вы использовали дату начала и интервал для увеличения этой даты, изменение даты начала не изменило бы значение интервала. Это действительно зависит от того, что вы хотите сделать.