+7 (911) 199-29-48

Разработка мобильных и веб-приложений
 Более 50 проектов в 10 странах, 8 лет на рынке
  Под ключ: бизнес-анализ, дизайн, продвижение
   Наши клиенты - и стартапы, и корпорации
    Воплощать ваши идеи в жизнь - наша работа!

Разработка дизайна мобильных приложений

Первое, что видит пользователь, загрузив на свой телефон приложение – это его дизайн. От того, как пройдет "первое знакомство" пользователя с приложением, зависит, будет ли он им пользоваться или сразу же удалит и перейдет к изучению следующих "кандидатов". Откроем некоторые секреты, которые мы применяем для создания дизайна качественных мобильных приложений, от которых невозможно оторваться.

Опыт пользователя

Люди пользуются приложением для того, чтобы достигать своих целей. Поэтому разработка "статического" дизайна приложения, в отрыве от процесса взаимодействия пользователя с устройством, не может привести к успеху. Перед тем, как начать проектировать дизайн, необходимо продумать, какие действия будет выполнять пользователь в приложении, и какой результат он получит:

сформулировать варианты, или сценарии, использования.

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

прототип дизайна мобильного приложения

Полезный совет, как подготовить хороший дизайн мобильного приложения: вместо того, чтобы думать, что отобразить на экране приложения,

думайте, что увидит пользователь на экране и как это ему поможет в достижении цели.

Любой отображаемый контент должен рассматриваться в контексте взаимодействия пользователя с приложением. В частности, важно, чтобы часто выполняемые действия требовали бы минимума усилий со стороны пользователя, тогда как более редкие действия могут быть и "глубоко запрятаны".

В зарубежных руководствах термин "Интерфейс пользователя" (User Interface) уже довольно часто заменяется термином "Опыт пользователя" (User Experience) – это говорит о приоритете сценариев над контентом приложения.

Особенно важно продумать и протестировать первый опыт взаимодействия пользователя с приложением,

ведь от него зависит, останется ли пользователь в приложении, или удалит его после первых секунд просмотра.

Хорошо известные шаблоны и иконки

В интерфейсе мобильных приложений уже сформировались некоторые хорошо известные пользователям шаблоны взаимодействия:

    Панель навигации

  • Панель навигации (Navigation bar, Action bar) – панель вверху экрана, указывающая, в каком месте приложения находится пользователь, и какие действия он может совершить.
  • Выдвигающееся меню

  • Выдвигающееся меню (Drawer) – кнопка, располагающаяся, как правило, в левом верхнем углу экрана и выдвигающая главное меню программы при нажатии. Хорошо известным жестом является и выдвижение меню по движению "смахивание" слева направо, и пропадание его по обратному смахиванию справа налево.
  • Панель закладок

  • Панель закладок (Tab Bar) – панель с иконками, располагающаяся в нижней части экрана, переключающая пользователя между различными разделами приложения.

Если действие пользователя можно реализовать с помощью хорошо известного шаблона – не пренебрегайте им. Известные действия лучше воспринимаются пользователем.

Кроме шаблонов взаимодействия, пользователям хорошо известны многие иконки, например, такие, как "Удалить", "Поделиться", "Назад". Для удобства пользователя, частые действия следует обозначать хорошо известными стандартными иконками.

Лаконичность и минимализм

В отличие от веб-сайтов, рассчитанных на широкий экран компьютера, мобильные приложения будут чаще всего использоваться на мобильном телефоне. По нашей статистике,

люди используют мобильные приложения в 80 процентах случаев на телефонах, и всего 20 процентов – на планшетах.

Не следует отображать всю возможную информацию на одном экране. Вместо этого, в контексте взаимодействия пользователя с приложением, определите, какая информация является наиболее важной, позволяющей пользователю сделать выбор, а какая может быть вынесена на отдельный экран подробностей.

Например, в списке контактов основной информацией является имя, а номер телефона, адрес, email – не видны, и появляются только при переходе на экран деталей контакта.

Жесты

Жесты – это особенность тачскринов, успешно расширяющая возможности пользователя при работе с мобильным приложением. Наиболее часто используемым жестом, кроме нажатия, является прокрутка содержимого экрана вверх или вниз.

Опытные пользователи уже изучили такие жесты, как

  • смахивание – движение по горизонтали, используемое либо для открытия или закрытия главного меню программы, либо для действия над элементом списка (перенос или удаление);
  • долгое нажатие – редактирование или перенос элемента списка.

Поскольку использование жестов в интерфейсе в большинстве случаев не очевидно пользователю, можно использовать подсказки жестов при первом запуске приложения.

Отзывчивость и анимация

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

Хорошим руководством по использованию анимации для подчеркивания навигации в мобильном приложении является "Руководство по интерфейсу для человека" (Human Interface Guidelines) от Apple.

Анимация может и подсказывать пользователю, какие действия можно выполнять с теми или иными элементами интерфейса. Например, небольшой сдвиг элементов списка может показать возможность выполнения действий по жесту смахивания, а анимация при достижении начала и конца списка в Material Design показывает, что дальше листать некуда. Интерфейс, использующий анимацию для подсказок пользователя, называется "отзывчивым" (responsible).

Цветовая гамма

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

достаточную контрастность контента.

В остальном можно руководствоваться фирменным стилем компании – заказчика приложения, а также рекомендациями разработчика операционной системы. В частности, руководство по Material Design для Android предлагает целые наборы цветовых стилей, которые можно использовать в приложении.

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

Фирменный стиль

Довольно часто требуется разработать дизайн мобильного приложения в соответствии с фирменным стилем (бренд-буком) компании-заказчика. В этом случае часто требуется искать компромисс между соответствием фирменному стилю и удобством пользователя. Наши дизайнеры считают, что интересы пользователя приложения должны в любом случае стоять на первом месте, однако не всегда удается объяснить это представителю заказчика.

Руководства по дизайну мобильных приложений

Перед тем, как начать работу над дизайном приложения Android или iOS, необходимо ознакомиться с официальными руководствами, выпущенными производителями операционной системы. Над официальными требованиями к дизайну работали лучшие специалисты в мире, поэтому пренебрегать их рекомендациями не стоит. Руководства по дизайну описывают как хорошо известные элементы пользовательского интерфейса, так и общие рекомендации по расположению элементов на экране мобильного устройства.

Material Design от Google

Material Design Android

Компания Google последовательно внедряет концепцию "материального дизайна" во все свои веб-сервисы и мобильные приложения, начиная с 2014 года, когда появилась операционная система Android 5 Lollipop.

Эта концепция пришла на смену моде на "плоский дизайн", используемый в Windows и Apple iOS и Macintosh. Элементы интерфейса в "материальном дизайне" ориентированы друг относительно друга не только в плоскости экрана, но и по "глубине". Например, кнопки, как и в реальном мире, выступают над основным контентом.

Интересным и широко применяемым шаблоном из материального дизайна является "карточка". Это блок информации об объекте, являющийся частью списка, например, информация о пользователе или о приложении. Карточки удачно объединяют изображения, текст и интерактивные элементы, и могут быть даже использованы для создания списков разнородных элементов.

В рекомендациях по материальному дизайну можно найти информацию о рекомендуемом расположении элементов интерфейса, об анимации, о часто используемых и хорошо известных шаблонах.

Принципы материального дизайна сделают приложение для Android удобным для пользователей и выполненным в том же стиле, что и остальные приложения на смартфоне. Полное руководство доступно на английском языке на сайте https://material.io/guidelines/.

Руководство по "интерфейсу для человека" от Apple

Apple Human Interface Guidelines

Компания Apple является признанным мировым лидером по разработке удобных для пользователя интерфейсов, поэтому при разработке приложений обязательно иметь в виду принципы, сформулированные дизайнерами Apple в документе "Human Interface Guidelines". Эти принципы имеют достаточно общий характер и могут применяться как в iOS, так и в Android-приложениях.

В соответствии с принципами Apple, интерфейс должен максимально помогать пользователю в выполнении действий и быть максимально предсказуемым и интуитивно понятным.

  • Полупрозрачность и взаимное расположение элементов должны помогать пользователю в навигации.
  • Элементы интерфейса должны быть отзывчивыми, то есть, предоставлять обратную связь пользователю: кнопки должны "нажиматься", а сдвигаемые элементы – сдвигаться.
  • Анимация, как и в Google Material Design, должна помогать навигации пользователя в приложении – недопустимо украшать приложение "неестественной" анимацией, например, появлением дочернего окна из неожиданного места.
  • Важным принципом Apple являются метафоры, помогающие пользователю понять назначение элементов интерфейса по аналогии с объектами реального мира. Примерами метафор Apple являются переключатели и спиннеры.

Полное руководство Human Interface Guidelines доступно на английском языке на сайте https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/.

Процесс разработки дизайна

Первым делом наши дизайнеры взаимодействуют с аналитиками – формулируют сценарии взаимодействия пользователя с приложением и оценивают частоту тех или иных сценариев.

На основе этой информации формируется прототип пользовательского интерфейса в виде диаграммы экранов с переходами между ними.

После этого, на основе имеющейся информации о целях приложения и о фирменном стиле заказчика, проектируется и согласовывается с заказчиком цветовая гамма приложения.

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

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

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

Разработка и корректировка дизайна

Наша компания осуществляет не только разработку дизайна "с нуля", но и анализ и доработку уже существующего дизайна. Если вы чувствуете, что лояльность пользователей низкая, а требуемые цели не выполняются – вы можете передать ваше приложение нам на аудит и доработку.

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

 

Заполнить бриф

Нашим решениям доверяют

Новости

10.04.2017

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

17.03.2017

При заказе Персонального СМС Сервера - бесплатное подключение к базе данных, сайту или Excel-таблице! 

02.03.2017

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

27.01.2017

В числе наших сервисов - разработка мобильных приложений под iOS: расчет цены и сроков, дизайн пользовательского интерфейса, кодирование, тестирование, техническая поддержка и продвижение. 

23.09.2016

Предоставляем услуги разработки кастомной прошивки Android: замену загрузочного логотипа и анимации, изменение дизайна системных приложений, установку "неудаляемых" приложений.