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

Однако локальные переводы некоторых шагов довольно длинные.

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

Поскольку это не является общим, будет ли это иметь смысл для пользователя

enter image description here

4
Blue Ocean 18 Янв 2017 в 12:33
Может ли пользователь прокручивать компонент навигации по горизонтали, чтобы показать все шаги? Кроме того, должен ли «Длинный шаг [4]» быть активным в вашем макете?
 – 
Nate Green
18 Янв 2017 в 19:03

5 ответов

Лучший ответ

То, что вы представили, прекрасно, за одним небольшим исключением:

Поскольку пользователь не может видеть весь последний шаг, он, вероятно, предположит, что процесс длиннее, чем видимые шаги. Дайте им какое-то указание на количество шагов, а также их продвижение по шагам, добавив что-то вроде «Шаг 5 из 12» где-нибудь рядом с вашим визуальным пошаговым руководством. Что-то вроде этого:

enter image description here

2
Andrew Martin 18 Янв 2017 в 12:56

Рассмотрите возможность использования значков (если возможно) для каждой страницы. И при необходимости текущая страница может иметь заголовок.

enter image description here

1
SimonTeo 18 Янв 2017 в 12:46
1
Не могли бы вы объяснить, почему вы думаете, что это решает проблему ОП? Мне кажется, это не решает проблемы с длиной процесса и иконки обычно не являются подходящей заменой текстовым меткам.
 – 
Nate Green
18 Янв 2017 в 19:00
Проблема OP заключается в том, что локальные переводы некоторых шагов довольно длинные. Текст может получиться слишком длинным. Заменив текст значком, вы избавитесь от проблемы с длинными названиями шагов, а также без необходимости предоставления перевода (если значки достаточно понятны). Надеюсь, я отвечу на ваш вопрос. Этот вопрос не о слишком большом количестве шагов (но о заголовке).
 – 
SimonTeo
19 Янв 2017 в 04:23

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

enter image description here

0
Alvaro 18 Янв 2017 в 18:25

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

  1. Нажав «Вариант 1» или «Вариант 2», вы перейдете к следующему шагу? Использование шеврона кажется немного странным, если это так. Обычно это означает, что вы входите в подэкран, а не переходите к следующему шагу. Можно рассмотреть пользовательский интерфейс с одним или несколькими вариантами выбора (переключатели и т. д.) с кнопкой «Далее».
  2. Для какой платформы (веб, iOS, Android или все)? Кажется, нет способа выйти из этого мастера шагов или вернуться назад.
  3. Из ваших комментариев мне кажется, что имена шагов важны. В таком случае я не уверен, что вставлять имена в горизонтальный степпер в заголовке - правильно. Там два предложения -
    • Используйте значки или цифры в горизонтальном степпере и отображайте заголовок шага над параметрами.
    • Вместо этого используйте вертикальный степпер. Я прикрепил макет того, как это может выглядеть. Преимущество заключается в том, что всегда есть достаточно места для шага, независимо от ширины экрана, он легко адаптируется к пользовательскому интерфейсу для перемещения вперед/назад/из потока и может разместить любое количество шагов, не закрывая их.

enter image description here

0
Josh Olsen 18 Янв 2017 в 19:21

enter image description here

Если пользователю не нужно знать имя шага, пока он не станет активным, вы можете просто отобразить «Шаг 1», «Шаг 2» и т. д. вверху. Затем, когда пользователь находится на шаге, используйте имя шага в качестве заголовка. Бывший. Шаг 5 из 5: Супер-сумасшедшее длинное имя процесса

0
Janet 23 Янв 2017 в 19:11