Теперь, когда у нас есть четкое понимание шаблонов навигации и техник объединения экранов, время применить их к нашим экранам. Давайте еще раз взглянем на нашу исчерпывающую карту экранов из приложения новостей.
Рисунок 1. Исчерпывающая экранная карта для новостного приложения.
Нашим следующим шагом будет выбор и применение навигационных шаблонов, описанных в предыдущих уроках к этой экранной карте, увеличение скорости навигации и уменьшение количества нажатий для доступа к данным при сохранение интуитивности интерфейса и его соответствие с передовыми практиками Android. Нам также понадобится создание различных вариантов для устройств различных форм-факторов. Для упрощения, давайте сфокусируемся на планшетах и мобильных телефонах.
Выбор шаблонов.
Вначале, наши экраны второго уровня (Story Category List, Photo List,и Saved Item List) могут быть объединены при помощи вкладок. Обратите внимание, нет необходимости использовать горизонтально расположенные вкладки, в некоторых случаях выпадающий список элементов UI может служить хорошей заменой, особенно на устройствах с узкими экранами, например телефонах. Мы также можем объединить экраны Saved Photo List и Saved Story List используя вкладки на мобильных телефонах или используя несколько вертикальных панелей на планшетах.
Наконец, давайте обратим внимание как мы показываем новостные статьи. Первая опция для упрощения навигации между различными категориями статей - это использование горизонтальной прокрутки страниц с набором надписей выше горизонтальной поверхности, показывающих текущую и соседнюю категории. На планшетах с альбомной ориентацией мы можем пойти дальше и представить горизонтально прокручиваемый список статей на левой панели и экран просмотра статей как первичную панель с содержимым справа.
Ниже на диаграммах показаны новые карты экранов для мобильных телефонов и планшетов после применения навигационных шаблонов.
Рисунок 2.Финальная карта экранов для новостного приложения для мобильных телефонов.
Рисунок 3. Финальная карта экранов для новостного приложения для планшетов.
Теперь самое время подумать о различных вариантах экранной карты на тот случай, если выбранные вами шаблоны не будут работать как следует на практике. Ниже пример экранной карты для планшетов показывающий списки статей для различных категорий бок-к-боку, с остающимся независимым экраном просмотра статей.
Рисунок 4. Пример альтернативной карты экранов для планшетов в альбомном режиме.
Эскизы и WireFraming.
Wireframing это шаг в процессе дизайна, когда вы начинаете делать разметку для ваших экранов. Проявите творческий подход и представьте как расположить элементы UI чтобы позволить пользователям выполнять навигацию в вашем приложении. Помните, что на этом этапе создание высокоточных макетов не важно.
Простейший и быстрейший путь для создания эскизов ваших экранов - это рисование эскизов карандашем на бумаге. Как только вы начнете, вы можете заметить практические проблемы вашей оригинальной карты экранов или решить, какие шаблоны стоит использовать. В некоторых случаях шаблону могут применяться отлично к данному дизайну в теории, но на практике они могут не работать, приводя к визуальному беспорядку или проблемам взаимодействия пользователя (например если существует две строки вкладок на экране). Если это случается, стоит исследовать другие навигационные шаблоны или варианты использования выбранных шаблонов чтобы придти к более оптимальному выбору.
После того как вы закончите с начальными эскизами хорошей идеей будет провести создание цифровых каркасов(digital wireframing) при помощи программ Adobe® Illustrator, Adobe® Fireworks, OmniGraffle, либо других утилит векторных иллюстраций. При выборе средства учтите следующие особенности::
- Возможность интерактивных каркасов? Утилиты типа Adobe® Fireworks предлагают эту возможность.
- Есть ли функциональность "мастер-экран", позволяющая повторное использование визуальных элементов в различных экранах? На пример, Action Bars должны быть видны на каждом экране вашей программы.
- Как сложно обучение? Профессиональные программы для векторной иллюстрации могут требовать длительного обучения, в то время как утилиты для создания каркасов могут предлагать ограниченный набор функций и больше подходить для вашей задачи.
Наконец, XML Layout Editor который поставляется в составе Android Development Tools (ADT) плагина для Eclipse может быть часто использован для создания прототипов. В тоже время вам стоит быть осторожным и фокусироваться более на высокоуровневые детали разметки и меньше на визуальные детали.
Создание цифровых каркасов.
После создания эскизов наших разметок на бумаге и выбора утилиты для создания цифровых каркасов вы можете создать каркасы, которые послужат стартовой точкой визуального дизайна вашего приложения. Ниже представлены каркасы-примеры для нашего новостного приложения, соответствующие один к одному экранным картам, указанным выше.
Рисунок 5. Каркасы новостного приложения для мобильных телефонов в портретном режиме (Скачать SVG)
Рисунок 6.Figure 6.Каркасы новостного приложения для планшетов в альбомном режиме и альтернативная разметка со списками статей (Скачать SVG)
(Скачать SVG каркасов)
Оригинальный текст доступен тут.
Комментариев нет:
Отправить комментарий