Большая часть успеха iPhone и экосистемы iOS в целом была сосредоточена Apple на эстетике и опыте платформы и ее приложений. Apple проделала огромную работу по созданию наиболее распространенных моделей разработки приложений, одновременно обеспечивая гибкость для своих разработчиков и согласованность для своих пользователей. Хотя наша цель не состоит в том, чтобы создать приложение, которое пытается имитировать точный опыт использования нативного приложения, нам еще многое предстоит узнать из изучения структуры и шаблонов проектирования, используемых в мобильных операционных системах. Понимание интерфейсов, которые ожидают наши пользователи, важно; это позволяет нам решить, когда стоит попытаться оправдать эти ожидания, а когда пойти в другом направлении.
Давайте рассмотрим несколько шаблонов мобильного дизайна, которые могут оказаться полезными в нашем приложении.
Карусель
Представьте себе некоторые игральные карты, расположенные рядом на экране, где пользователи могут переключаться между каждой «картой», скользя по экрану влево или вправо.
Прототипом примера шаблона карусели в iOS является приложение Apple от Weather, показанное на рисунке 2.2, «Шаблон карусели во плоти в приложении Apple от Weather». Приложение Погода назначает каждому городу одну карту. Один взгляд показывает всю информацию о погоде, которая нам нужна для выбора города, не отвлекаясь на то, что происходит в другом месте.
Рисунок 2.2. Карусельный рисунок во плоти в приложении Apple’s Weather
WebOS также использует шаблон карусели для переключения между приложениями. Приложения, использующие этот шаблон, обычно насыщены информацией, но плохо взаимодействуют.
Карусель — это самый простой шаблон, который мы рассмотрим — обычно он состоит из одного типа контента, организованного в линейный набор. Что хорошего в карусели, так это то, что она простая (что хорошо, помнишь?). Интерфейс минимален, а структура данных невероятно проста для понимания. Он также предлагает скрытую иерархию важности: к первым элементам проще всего обращаться, и они обычно представляют наибольший интерес для наших пользователей. Обратная сторона этой структуры в том, что нет возможности перемещаться между представлениями более чем на одну карту.
Хорошо
- Это просто в использовании.
- Он использует весь экран для отображения контента.
- Это требует естественного жеста для навигации.
Плохо
- Он опирается на жесты — пользователь должен перемещаться с карты на карту, что может быть менее интуитивно понятно, чем нажатие кнопок или пунктов меню.
- Вся информация для данной страницы должна помещаться на экране одновременно, в противном случае структура разрушается.
- Каждая страница должна быть концептуально одинаковой.
- Пользователи должны пройти через последовательность; они не могут пропустить.
Панель вкладок
Шаблон панели вкладок можно увидеть повсюду в iOS, Android и webOS. Для веб-дизайнеров и разработчиков вкладки не совсем новая идея. Мы использовали их, чтобы установить иерархию и сгруппировать контент по разделам на протяжении многих лет. Концептуально вкладки в мобильных приложениях идентичны вкладкам на настольных веб-сайтах; Основное отличие состоит в том, что панель вкладок обычно имеет фиксированное положение в мобильных приложениях и поэтому всегда появляется на экране. Интересно отметить, что в iOS компонент панели вкладок появляется в нижней части страницы (около ваших пальцев), тогда как в Android принято, что панель вкладок находится в верхней части экрана (ведущая в контент).
Рисунок 2.3. Панель вкладок, используемая в приложении Twitter
Панель вкладок полезна для быстрого определения структуры приложения. Это позволяет пользователям легко перемещаться между широкими слоями приложения, а также выступает в качестве якорных точечных различных выбранных состояний панели вкладок также означает, где в приложении пользователь в настоящее время. Как показано на рисунке 2.3, «Панель вкладок, используемая в приложении Twitter», приложение Twitter для Android использует панель вкладок, чтобы пользователи могли переключаться между различными режимами профиля другого пользователя.
Хорошо
- Это обеспечивает знакомую навигацию для пользователей.
- Это позволяет легко переключаться между режимами, представлениями или задачами.
- Это указывает на текущее состояние / местоположение приложения.
Плохо
- Его иерархия плоская — нет простого способа иметь вложенные подстраницы.
- Он всегда появляется на экране, занимая ценную недвижимость.
- Он эффективно обрабатывает только до пяти элементов навигации и неуклюже к этому относится.
Списки
Списки — это наиболее часто используемый шаблон проектирования для мобильных приложений. Список как модель интерфейса не требует пояснений: содержимое отображается в виде вертикального списка, что позволяет пользователям просматривать параметры. В iOS их можно увидеть повсюду, включая все, кроме самых простых служебных приложений. Хотя они и базовые, они невероятно гибкие. Списки могут быть использованы для представления активных вариантов; выступая в качестве указателя для длинного списка контента; и, что наиболее важно, как навигационная иерархия, которая позволяет пользователям прокладывать себе путь вниз по древовидной структуре.
Это как модель навигации, что списки являются наиболее мощными. На самом деле нет никаких ограничений для глубины навигационной иерархии, которую могут вместить списки, и поэтому для приложений со структурой более одного уровня список почти повсеместно используется.
Этот шаблон идеально соответствует структуре, с которой мы привыкли иметь дело в Интернете. Структура списка — это дерево, которое может привести куда угодно, и часто оно позволяет пользователям переходить от индекса элементов к подробному представлению одного элемента. Это называется шаблоном master / detail, моделью, которая постоянно используется в настольных и мобильных приложениях. Практически каждое приложение электронной почты, которое когда-либо создавалось, использует этот шаблон взаимодействия, позволяя нам быстро просматривать доступные элементы и затем сосредоточиться на одном. Мы вернемся к этой идее чуть позже.
Например, News.com.au использует шаблон списка, позволяя пользователям просматривать заголовки, прежде чем переходить к тому, что их интересует, как вы можете видеть на рисунке 2.4, «Списки обычно используются новостными приложениями».
Рисунок 2.4. Списки обычно используются новостными приложениями
Основным ограничением списков является то, что, как только пользователь перемещается по дереву, он теряет способность переходить к любым элементам на уровнях выше за один простой шаг. Начиная с четырех уровней, им придется возвращаться назад на три уровня, чтобы вернуться на верхний уровень — не идеально. Чтобы преодолеть этот недостаток, структура списка часто комбинируется с шаблоном панели вкладок для создания надежной, структурированной навигации с глубиной и гибкостью.
Хорошо
- Он достаточно гибок для обработки большого количества данных.
- Это знакомо и легко понять.
Плохо
- Это по своей сути иерархическое.
- Пользователи должны вернуться к началу, чтобы изменить пути.
Резюме
Помните, что эти шаблоны предлагают предлагаемую структуру — нам не нужно их использовать. Знакомство и последовательность могут придать дизайну авторитет, но вы все равно можете сломать шаблон. Существует множество примеров приложений, которые отказываются от соглашений пользовательского интерфейса для создания восхитительных, интуитивно понятных и уникальных интерфейсов для своих пользователей; к тому же, есть много приложений, которые без уважительной причины отходят от этих простых шаблонов и в итоге сбивают с толку и расстраивают пользователей.
Мы всегда должны учитывать, как соглашение о нарушении может улучшить или отвлечь от основной задачи нашего приложения. Если мы не можем разработать лучшую альтернативу традиционному шаблону, мы, вероятно, не должны этого делать.