Основные UI паттерны разработки Android приложений

Поскольку разработка приложений под Android набирает популярность, думаю обзор основных UI паттернов для Android-приложений будет кому-то полезен. Основой для статьи является вот этот вот источник. Рассматриваемые паттерны: Dashboard, Action Bar, Quick Actions, Search Bar и Companion Widget.

На мой взгляд тема UI паттернов является важной по нескольким причинам:
  1. Привлечение пользователей: паттерны помогают сделать приложение более юзабильным, более понятным.
  2. Проход на рынок: следование паттернам может сыграть важную роль при продвижении приложения на app market’ы.
  3. Не стоит строить велосипед: при знании паттернов намного проще заниматься проектированием интерфейса приложения, используя имеющиеся решения.

Принципы дизайна интерфейса, отмеченные инженерами Google:
  • Simple vs Clear: интерфейс должен быть простым(не нагруженным) и понятным для использования
  • Content vs Chrome: необходимо использовать максимум экрана, при этом уменьшать его визуальную сложность (использовать ограниченное число кнопок/иконок)
  • Consistent yet engaging: консистентность реакции пользователя – пользователь должен понимать что он делает/как сделать то, что ему необходимо
  • Enhanced by cloud: данные пользователя следует хранить в облаке; пользователь должен иметь возможность выбирать настройки(организовывать данные) один раз, без повторных действий.

UI Design Patterns(по аналогии с Software Design Patterns) описывают общее решение для повторно возникаемых задач/проблем и возникают как “побочный продукт” процесса разработки.

Ниже перечислены пять UI паттернов с примерами на основе всем известного приложения.

DashBoard

image

Dashboard (Панель инструментов) – представляет описание основных возможностей приложения, является главным меню приложения. Dashboard занимает весь экран, фокусируется на 3-6 наиболее важных функциях приложения, также может содержать информацию об обновлениях.
Поскольку паттерн Dashboard по сути является лицом приложения, подходить к его разработке нужно особенно аккуратно.

Action Bar

image

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

Quick Actions

image

Quick Actions – предоставляет доступ к контекстуальным функциям приложения, вызывается при клике на ”цели”, выводится на эран в качестве popup. Ключевые характеристики Quick Actions: действия должны соответствовать контексту, быть простыми и понятными(возможно использование иконок), действий не должно быть много. Стоит также отметить, что всплывающий popup не должен перекрывать “цели”(должен появляться либо снизу, либо сверху по отношению к “цели”). Использовать данный паттерн рекомендуется когда нет детального описания item-a, а также когда в приложении необходимо выполнить дополнительные действия, связанные с контекстом. Quick Actions не следует использовать, когда доступен мультиселект.

Search Bar

image
Search Bar – используется для поиска по приложению (заменяет Action Bar). Search Bar должен поддерживать предложения по поиску, а также может содержать селектор для выбора типа поиска.
Рекомендации по реализации паттерна: следует использовать для простого поиска по приложению, представлять богатые предложения поиска(например, заголовок с иконкой и описанием).

Companion Widget

image

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

Рассмотренные паттерны являются базовыми при разработке Android приложений, однако это не значит что все их обязательно необходимо применять. Главной все же остается идея, исходя из которой можно рассматривать различные варианты решений( это к тому что, разрабатывать все же стоит от идеи, а не от паттерна).
Удачи вам в реализации ваших идей!

P.S. Если тема вызывет интерес, можно продолжить обзором других UI паттернов.
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 15

    +3
    определенно тема интересна, жду продолжения обзора )
      0
      Последним временем склоняюсь к этим принципам даже для десктопных приложений
        0
        Да, потрясающие паттерны. Хорошо бы видеть их не только в андроиде… Определённо нравится это развитие ui.
          0
          Это же паттерны, если я правильно понял опа, общие идеи, а не готовые либы\компоненты, и я думаю это легко реализуется на любой платформе…
            0
            Да, я понял, я о том, что на десктопах обычно всё это не используется.
          0
          Забавно, что картинки от старого Твиттера, в то время как рефреш в новом можно вполне выделить в отдельный раздел. И кстати новые Quick Actions как раз перекрывают цель.

          Вообще я бы добавил больше примеров, потому что twitter вообще нехарактерно удачное приложение.
            0
            >Забавно, что картинки от старого Твиттера, в то время как рефреш в новом можно вполне выделить в отдельный раздел. И кстати новые Quick Actions как раз перекрывают цель.

            Не видел новый твиттер, по поводу перекрывают — возможно они могут себе это позволить.)

            >Вообще я бы добавил больше примеров, потому что twitter вообще нехарактерно удачное приложение.

            Согласен, нехарактерно. Только здесь цель была — демонстрация паттерна (дабы проиллюстрировать о чем речь).
            +1
            готовую реализацию Action Bar можно взять, например, тут:
            httpы://github.com/cyrilmottier/GreenDroid
              0
              Спасибо за обзор, интересно увидеть продолжение.

              Но у меня вопрос — как эти паттерны сочетаются с нативным UI (который разумеется тоже рекомендован инженерами Google). Ведь там нет action bar или quick actions, насколько я могу судить по тем приложениям (и нативным в том числе), что я видел.
                +1
                Еще разок — в статье описываются паттерны UI, т.е. то как можно представить определенные функции приложения, сделать приложение более целостным с точки зрения его структуры. Речь идет о проектировании интерфейса, не о реализации(в том числе названия естественно не имеют отношения к реализации). Паттерны вполне реализуемы с помощью стандартных нативных классов(т.е. конечно придется поработать, например — создать кастомную вьюшку)
                  0
                  Да нет, это понятно.

                  Я о другом. Google, скажем рекомендует и приветствует использование нативных UI компонент. В частности, табов.

                  При использовании паттернов, описанных в статье, дашборд и action bars как бы заменяет табы.

                  На лицо два разных подхода в проектировании интерфейса. И оба рекомендованы гуглом, что странно :)
                    0
                    Ага, понял. Я думаю надо все же исходить из функционала приложения, т.е. где и что логично использовать. Разумеется, эти паттерны не панацея и всегда возможны варианты.
                    Насчет табов(если я про те табы), то с т. зрения фукнионала они не заменяют action bar(хотя если речь о месте на экране, соглашусь — могут заменять). Dashboard vs табы думаю тоже возможно. Исходим из приложения, в общем :)
                0
                >> представлять богатые предложения поиска

                Ну каких нафиг БОГАТЫЕ? Неужто вам глаз не режет такое словосочетание?
                  0
                  Да мне много что глаз режет, русский аналог слова все же бывает сложно подобрать. В след. раз напишу rich, или может вариант предложите?
                    0
                    следует использовать для простого поиска по приложению, предлагая дополнительные возможности.

                Only users with full accounts can post comments. Log in, please.