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

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

enter image description here

5
Zoe K 21 Окт 2015 в 12:26
Каков контент на вашей временной шкале? Достаточно ли он большой, чтобы заполнить экран, если временная шкала идет вертикально? или есть ли какой-то другой контент, который вы могли бы заморозить рядом с ним (например, легенду или ключ)? Кроме того, в каком направлении движется ваша временная шкала — от прошлого к настоящему или от настоящего к прошлому? Наконец, какую проблему вы пытаетесь решить, переключаясь с вертикальной на горизонтальную прокрутку, помимо предложенного вами «лучшего опыта»?
 – 
Andrew Martin
20 Окт 2015 в 11:52
Акбар, можешь добавить картинки? Кроме того, есть ли причина, по которой вы не можете использовать пейджинг, и что вся история должна быть видна?
 – 
Daniel Brown
20 Окт 2015 в 18:45
Добавил немного визуала. и да, вся история должна быть доступна на самой странице. однако в обычном случае это не будет более 2 элементов
 – 
Blue Ocean
21 Окт 2015 в 04:42

3 ответа

Лучший ответ

Как и все в UX, это будет зависеть от вашего контекста. Например, если данные, отображаемые на временной шкале, относятся к платежам или изменениям, которые вы внесли в что-либо (скажем, вы изменили файл в приложении или обновили свой аватар), то последняя активность должна быть сверху и оставлена ​​в конце. горизонтальное расположение.

Однако, если ваша временная шкала связана с историей, лучше поместить последнее событие в правый край (или в конец). Конечно, говоря о раскладке для западных людей или любой другой культуры, привыкшей к направлению чтения LTR.

Для того, чтобы продумать лучший вариант, можно применить следующие подходы:

Подход 1

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

См. изображение ниже, взятое с сайта этот вопрос

enter image description here

Подход2

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

См. пример ниже, взятый из Уроки, извлеченные при разработке временной шкалы:

enter image description here

Подход 3

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

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

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

Реализация пользовательского интерфейса и вдохновение

Если вам нужна помощь с подходом к визуализации, взгляните на тег временной шкалы Dribble, все они по-разному относятся к любому из упомянутых 3-х случаев

4
Devin 21 Окт 2015 в 23:08
Большое спасибо, Девин. Подход 2 кажется наиболее подходящим для моего случая. Если бы подход 2 применялся в качестве горизонтальной временной шкалы, было бы последнее обновление слева или справа?
 – 
Blue Ocean
22 Окт 2015 в 05:08
Последнее обновление должно быть слева. Кроме того, он сохраняет согласованность с вашим текущим мобильным подходом, поскольку обновления будут располагаться слева направо и сверху вниз.
 – 
Devin
22 Окт 2015 в 05:19

Вертикальная временная шкала — лучший способ последовательного отображения данных. Это более интуитивно понятно для пользователей.

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

Возьмем пример нумерации. Мы всегда пишем, как показано ниже 1 2 3 4 5

Почему мы не пишем в нашем учебнике по математике как 1 2 3 4 5 6 7 8 9 10 11 12 13 14...введите здесь описание изображения .

2
Sudarshan T 20 Окт 2015 в 11:58
Я обновил вопрос с большим контекстом.
 – 
Blue Ocean
20 Окт 2015 в 12:03

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

Однако, если временная шкала короткая и должна быть в фокусе, лучше расположить ее горизонтально, а последние обновления — справа. И если горизонтальная прокрутка нелогична, то горизонтальное пролистывание стопки карточек — нет. Поэтому я бы рассматривал временную шкалу как стопку карточек, каждая из которых показывает одну точку временной шкалы (см. Каркас). Таким образом, у вас будет достаточно места для ключевого контента.

Горизонтальная временная шкала должна идти слева направо, так как мы привыкли читать контент и следить за сюжетной линией, а это именно то, что должна представлять временная шкала (переверните r-t-l для читателей на арабском и иврите).

enter image description here

2
Zoe K 21 Окт 2015 в 12:25