Вы находитесь на странице: 1из 2

ТЕМА 10.

КАК СОЗДАЮТСЯ ПРОГРАММЫ И ЧТО НУЖНО,


ЧТОБЫ ПОПАСТЬ В APP STORE ИЛИ GOOGLE PLAY?

10.2. Проектирование интерфейсов мобильных приложений

Добрый день! Сегодня мы поговорим о нюансах проектирования интерфейсов мобильный


приложений, разберемся, что важнее при создании мобильного приложения: дизайн или функционал?

Давайте попробуем вновь сравнить сайты и мобильные приложения. В случае с первыми все
довольно понятно: если мы делаем дизайн сайта, то нам необходимо либо заложить адаптивный
«резиновый» дизайн, либо сделать отдельную версию под мобильные устройства.

С мобильными приложениями дело обстоит немного труднее. Если мы хотим выпускать свое
приложение под разные операционные системы, например под Android и IOS, то нужно учитывать
особенности навигации.

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

Давайте разберем, какие этапы существуют при создании дизайна приложения.

1. Этап постановки задачи

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

2. Этап декомпозиции на экраны

Задача этого этапа — упорядочение функций приложения и выделение отдельных экранов.

3. Этап прототипирования интерфейса

На этом этапе можно использовать специальные сервисы, предназначенные для созданий


функциональных прототипов, например, InVision или Proto.io.

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

4. Этап тестирования интерфейса

После получения интерактивного прототипа можно провести первое тестирование интерфейса на


пользователях. Тестирование интерфейса необходимо для:
• Выявления дублирующего функционала
• Определения приоритетности функционала приложения

1
• Поиска непонятных моментов в логике работы приложения

5. Этап создания графического концепта

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

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

6. Этап работы над дизайном приложения

На этом этапе происходит полноценная проработка интерфейса и отрисовка всех экранов


приложения, согласно выбранной стилистике.

Для этого используются специальные программы для работы с графикой. Существует довольно
большое количество разнообразных графических пакетов, которые могут помочь справиться с этой
задачей, но можно остановиться на следующих вариантах:
• Adobe Photoshop / Illustrator
• Adobe XD или Sketch + Principle с последующей выгрузкой в Zeplin
• Также можно использовать веб-сервис Figma

Результатом работы на этом этапе должен стать еще один интерактивный интерфейс со всеми
прорисованными экранами и анимированными действиями.

7. Этап тестирования интерфейса

Нужно провести еще одно тестирование на потенциальной аудитории приложения, давая им


попробовать поработать с интерфейсом интерактивного прототипа.

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

На этом этапе нужно убедиться, что выполнены следующие условия:


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

В следующей лекции мы разберемся с инструментами и основными принципами разработки


мобильных приложений.