Одним из способов обеспечения доступа к полному набору экранов приложения является использование иерархической навигации. В этом уроке мы обсудим потомковую(descendant) навигацию, позволяющую пользователям спуститься вниз по иерархии экранов к дочернему экрану, и боковую(lateral) навигацию, позволяющую пользователям получить доступ к "братским" (sibling, т.е. находящимся на одном уровне иерархии) экранам.
Рисунок 1. Потомковая(Descendant) и боковая(Lateral) навигация.
Существует два типа братских экранов-родственные в коллекции и родственные разделы. Родственные в коллекции представляют отдельные элементы в коллекции представленной родителем. Родственные разделы отображают различные части информации о родителе. Например, один раздел может показывать текстовую информацию об объекте, в то время как другой может показывать карту географического расположения объекта. Количество родственных разделов для данного родителя обычно мало.
Рисунок 2. Родственные в коллекции и родственные разделы.
Потомковая и боковая навигация могут быть реализованы при помощи списков, вкладок и других шаблонов пользовательского интерфейса. Шаблоны интерфейса пользователя, как и шаблоны проектирования ПО являются обобщенными, общими решениями повторяющихся задач проектирования взаимодействия с пользователем. Мы исследуем несколько общих шаблонов боковой навигации в секциях ниже.
Кнопки и простые цели.
Для экранов родственных разделов предоставление осязаемых, с возможность фокуса клавиатуры целей в родителе является самым простым и знакомым видом интерфейса навигации, основанного на касании. Примеры таких целей включают в себя кнопки, списки фиксированного размера или текстовые ссылки, хотя последнии не являются идеальным элементом UI для сенсорной навигации. При выборе одной из этих целей открывается дочерний вид, который полностью заменяют текущее содержимое. Кнопки и другие простые цели редко используются для отображения элементов коллекции.
Рисунок 3. Пример интерфейса с навигацией, основанной на кнопках с соответствующим отрывком карты экранов. Также показан шаблон dashboard, обсуждаемый ниже.
Общим, основанном на кнопках шаблоне для доступа к различным разделам верхнего уровня приложения является шаблон dashboard. Он представляет собой сетку из больших кнопок-значков которые составляют большинство родительского экрана. Сетка обычно имеет 2 или 3 строки и колонки, в зависимости от количества разделов верхнего уровня в приложении. Этот шаблон предоставляет отличный путь показать все разделы приложения визуально красивым способом. Крупные нажимаемые цели также делают этот UI очень удобным в использовании. Dashboard лучше всего для тех случаев, когда каждый раздел одинаково важен, как определено в решениях продукта или лучше использовании в реальном мире. Несмотря на это, шаблон не работает хорошо на больших экранах и требует от пользователей дополнительный шаг для доступа к содержимому приложения.
Более сложные пользовательские интерфейсы могут использовать множество других шаблонов организации взаимодействия с пользователем для улучшения непосредственности и уникальности содержания, все равно оставаясь интуитивно понятными.
Списки, сетки, карусели и стеки.
Для экранов родственных в коллекции и особенно для текстовой информации списки с вертикальной прокруткой чаще всего самый простой и известный вид интерфейса. Для большей наглядности или мультимедийного содержания, как фотографии или видео,могут использоваться вертикально прокручиваемые сетки элементов, горизонтально прокручиваемые списки(иногда называемые каруселями) или стеки(иногда называемые картами). Эти элементы UI лучше применять для показа коллекций элементов или большого набора дочерних экранов (например список историй или список 10 и больше новостных заметок), чем для небольшого набора несвязанных дочерних экранов.
Рисунок 4. Пример интерфейсов навигации основанной на списках, сетках и каруселях с отрывком карты экранов.
Вкладки.
Использование вкладок является популярным решением для боковой навигации. Этот шаблон позволяет объединять родственные экраны, таким образом в контейнер вкладок в родительском экране могут быть вложены дочерние экраны, в другом случае разнесенные по различным контекстам. Вкладки больше всего подходят для небольших наборов(4 или меньше) экранов родственных разделов.
Рисунок 5. Пример телефонной и планшетной навигации, основанной на вкладках с соответствующим отрывком карты.
Несколько лучших практик при использовании вкладок. Вкладки должны быть устойчивы среди связанных экранов. Только назначенная область содержимого должна меняться при выборе вкладки, индикаторы вкладки должны быть доступными все время. Кроме того, переключение вкладок не должно рассматриваться как история. Для примера, если пользователь переключается из вкладки А в другую вкладку Б, нажатие клавиши назад не должно выбирать заново вкладку А. Вкладки обычно располагаются горизонтально, хотя другие варианты навигации при помощи вкладок наподобии выпадающего списка в Action Bar тоже возможны. Наконец, и самое главное, вкладки должны всегда находиться вверху экрана.
Вот самые очевидные преимущества вкладок перед навигацией, основанной на списках и кнопках:
- Пользователи получают мгновенный доступ к содержимому вкладки из родительского экрана.
- Пользователи могут быстро перемещаться между родственными экранами без необходимости посещения родительского экрана перед этим.
Примечание: при переключении вкладок является важным сохранять непосредственность переключения, не блокировать доступ к заголовкам вкладок показыванием модальных диалогов при загрузке содержимого.
Распространенная критика состоит в том, что на заголовки вкладок тратится пространство забираемое у содержимого вкладки. Это обычно приемлемо, и преимущества перевешивают недостатки использования этого шаблона. Вы также должны чувствовать себя свободным при кастомизации заголовков вкладок показывая текст и/или значки для оптимального использования вертикального пространства. При настройке высоты заголовков убедитесь что заголовки достаточно крупные для нажатия человеческим пальцем без ошибок.
Горизонтальное перелистывание страниц(Swipe виды).
Другим популярным шаблоном боковой навигации является горизонтальное перелистывание страниц также известное, как "swipe views". Этот шаблон применяется лучше всего к экранам, родственным в коллекции, например, список категорий (статьи о мире, бизнесе, технологии и здоровье). Подобно вкладкам, этот шаблон также позволяет объединять экраны так, что родитель представляет содержимое дочерних экранов, встроенных в его собственную разметку.
Рисунок 6. Пример интерфейса навигации с горизонтальной прокруткой страниц с соответствующим отрывком карты экранов.
В UI с горизонтальным перелистыванием страниц, простые дочерние экраны(называемые страницами)отображается по одному. Пользователи имеют возможность осуществлять навигацию по родственным экранам методом нажатия и перетаскивания экрана горизонтально в направлении желаемой соседней страницы. Это жестовое взаимодействие часто дополняется другими элементами UI которые отображают текущую страницу и доступные страницы для обеспечения понятности и предоставления большего объема содержимого пользователю. Эта практика особенно необходима при использовании шаблона для боковой навигации экранов родственных разделов. Примерами таких элементов могут быть владки, прокручивающиеся надписи или значки делений(tick marks).
Рисунок 7. Примеры вспомогательных элементов для перелистывания страниц.
Кроме того лучше избегать использования этого шаблона когда дочерние экраны содержат горизонтально расположенные поверхности, такие как карты, т.к. эти противоречивые взаимодействия могут испортить юзабилити экрана.
Еще следует отметить, что для экранов родственных разделов горизонтальное перелистывание страниц является самым подходящим методом навигации, когда присутствует сходство в типе содержимого и когда количество родственников мало. В других случаях этот шаблон может быть использован вместе с вкладками сверху области с содержимым для улучшения интуитивного использования интерфейса. Для экранов, родственных в коллекции, горизонтальное перелистывание более всего интуитивно когда существует натурально упорядоченное отношение между экранами, например каждая страница представляет собой календарный день который идет следом за другим. Для бесконечных коллекций(опять же календарных дней), особенно перелистываемых в обоих направлениях, этот шаблон может работать достаточно хорошо.
Оригинальный материал доступен по следующему адресу.
Комментариев нет:
Отправить комментарий