Как создать хороший однострочный выбор даты?

Я разрабатываю веб-сайт, на котором пользователь должен выбрать дату , которая по умолчанию является today . Содержание сайта будет основано на выбранной дате. 90% времени, дата будет выбрана между сегодняшним днем ​​и (сегодня + 10 дней). Нельзя выбрать прошедшую дату.

Я хочу сделать однострочный выбор даты на основе ссылок. Вот идея ( полуработающая живая демонстрация ):

 введите описание изображения здесь>> </a> </p>

<p> Я не уверен, точно ли это явно для пользователя?
Вопросы: </p>

<ul>
<li> <p> что делать, когда я нажимаю «вторник 26», чтобы появляться новые даты? Должно ли это быть как моя живая демонстрация? </p> </li>
<li> <p>, где поставить ссылку для <code>---- +: = 0 =: + ----</code>, которая откроет обычный прямоугольный выбор даты (который выглядит как календарь), позволяющий пользователь может выбрать другую будущую дату? </p> </li>
<li> <p> Я думаю, что ссылка <code>---- +: = 1 =: + ----</code> должна быть всегда видимой, так что, если пользователь потерян в датах, он всегда может вернуться к <code>---- +: = 2 =: + ----</code> </p> </li>
</ul>
<hr>
<p> Примечание. Я  не  хочу, чтобы большой прямоугольный датпикер присутствовал все время: </p>

<p> <img src =

Это должно появляться только тогда, когда пользователь выбирает other date. 90% времени пользователь не будет использовать его, поэтому Я действительно думаю, что однострочный выбор даты будет лучше для моего использования .

11 голосов | спросил Basj 23 PMpSat, 23 Apr 2016 21:12:01 +030012Saturday 2016, 21:12:01

7 ответов


11

Если 90% сценария покрывается Сегодня + 10 дней, возможно, что-то вроде этого может работать, не беспокоясь о Next | Предыдущее или потерянное ваше текущее место.

Он занимает больше места, но он также менее искушен.

mockup

скачать источник bmml - Каркасы, созданные с помощью Mockups Balsamiq

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

ответил Jung Lee 23 PMpSat, 23 Apr 2016 22:15:27 +030015Saturday 2016, 22:15:27
5

Вы задумывались о том, есть ли предпочтение для выходных /недельных дней в выборе и выделить vs серого из менее важных разделов?

Концепция 1

Я думаю, что просто простой Next /Previous со скрытым календарем, который может расширяться под ним, должен работать.

 введите описание изображения здесь>> </a> </p>

<p> В соответствии с комментариями здесь представлена ​​модифицированная версия, показывающая сегодня: </p>

<p> <a href= введите описание изображения здесь>> </a> </p>

<p> Нет другого более эффективного метода, который я могу видеть. Практически любой дизайн займет два клика, чтобы получить правильную дату. </p>

<h3> Концепция 2 </h3>

<p> Например, вы можете попробовать эту концепцию с помощью горизонтального <a href= аккордеона . При нажатии на диапазон дат не будет выбирать дату, она просто расширит этот раздел, который вы могли бы щелкнуть по отдельной дате.

 введите описание изображения здесь>> </a> </p>

<p> Я не дизайнер, поэтому я просто принял вдохновение из этого <a href= дизайн страницы событий dribbble :

 введите описание изображения здесь>> </a> </p>

<h3> Концепция 3 </h3>

<p> Также обратите внимание, что аналогично дизайну (который является чистым совпадением, так как он имеет оставшиеся дни в марте), вы можете просто иметь аккуратно сложную двойную строку 2x5 в течение следующих 10 дней, а затем расширяемый календарь ниже для остальное. </p></body></html>

ответил icc97 25 AMpMon, 25 Apr 2016 02:47:02 +030047Monday 2016, 02:47:02
4

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

 введите описание изображения здесь>> </a> </p>

<p> 1) Изначально сегодня выбрано. </p>

<p> 2) Следующий этап показывает, что завтра будет выбран. </p>

<p> 3) Предположим, что у пользователя есть 2 мая (в течение 10 дней), тогда пользователь может либо использовать кнопки со стрелками (клавиатура, а также в пользовательском интерфейсе), +/- дату или тип в день . </p>

<p> 4) Если пользователь вводит слово «2» в поле «Дата», поле месяца должно автоматически меняться на май (в следующем месяце), так как известно, что это, скорее всего, выбор. (Диапазон составляет +10 дней) </p>

<p> 5) Этот интерфейс позволяет вводить любую дату, позволяя пользователю использовать возможность календаря для выбора нужной даты в будущем. </p>

<p> Идея заключается в том, что, поскольку пользователь уже имеет в виду дату, <strong>, это проще, поскольку вы предоставляете ему более простой способ ввода, а не предоставление всех возможных 10-дневных опций сразу </strong>, что может привести к к путанице. </p></body></html>

ответил Amit Jain 25 AMpMon, 25 Apr 2016 10:41:45 +030041Monday 2016, 10:41:45
1

У меня была похожая проблема дизайна несколько месяцев назад.

Моя реализация была текстовым полем, отображающим дату по умолчанию, отформатированную по вашему желанию. Когда пользователь выдает событие onclick, запускается сборщик дат. Я использовал jQuery datepicker на бэкэнд

В этом случае ваша страница не будет казаться чрезмерно громоздкой.

Сообщите мне, если бы это было полезно.

ответил Kstar 24 PMpSun, 24 Apr 2016 14:56:59 +030056Sunday 2016, 14:56:59
0

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

 введите описание изображения здесь>> </a> </p>

<p> Не оптимально, но с точки зрения UX, я обновлю все ваши вклады в разные ответы и полезные замечания. </p>

<p>  Как указано некоторыми людьми, я также добавлю месяцы. (Любая идея о том, как это сделать, - это JavaScript без hardcoding <code>---- +: = 0 =: + ----</code>?) </Em> </p></body></html>

ответил Basj 25 PMpMon, 25 Apr 2016 14:58:32 +030058Monday 2016, 14:58:32
0
ответил Abhishek Sharma 26 AMpTue, 26 Apr 2016 07:20:24 +030020Tuesday 2016, 07:20:24
-5

Я вижу много путаницы. В моем скромном мнении, что вам нужно, это сборщик интервалов, а не один выбор даты.

Я думаю, вы должны оставить идею выбора даты и начать работать над идеей выбора интервалов.

Разделитель интервалов, это просто для общения, чем ваше решение, поэтому вы можете исправить сторону диапазона (сегодня), а с другой стороны вы можете предложить дату с помощью сборщика. Например: Сегодня ------> 25 мая

ответил Oroki 23 PMpSat, 23 Apr 2016 21:59:01 +030059Saturday 2016, 21:59:01

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132