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

Содержание

• Особенности дизайна мобильных приложений и его отличия от десктопных ресурсов
• Этапы разработки mobile design
• Создание концепции
• Мозговой штурм
• Создание User Flow Diagram: пример блок-схемы
• Согласование структуры интерфейса и переходов
• Определение внешнего вида интерфейса и утверждение стиля
• Демонстрация проекта: макеты, прототипирование и другие варианты
• Утверждение дизайна приложения
• IOS против Android — две глобальные операционные mobile системы
• Советы начинающему дизайнеру мобильных приложений
• Работа с заказчиком
• Взаимодействие с разработчиками
• Процесс проектирования мобильного приложения
• Использование UI Kit с самого начала работы над проектом

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

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

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

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

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

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

4. Ориентация страницы. Большую часть времени (около 94%) пользователь держит устройство вертикально. И тем не менее, важно продумать, как будет выглядеть интерфейс при повороте телефона в горизонтальную позицию — это не должно повлиять на удобство.

5. Управление жестами. То есть можно отключить стандартные кнопки типа «вперед», «назад» и т. д., и все эти команды будут выполняться с помощью определенных жестов. Это отличительная особенность всех современных мобильных устройств, и ее нужно использовать при разработке мобильного приложения. 

6. Камера и микрофон. Ими оснащены все гаджеты. Чаще всего их  используют для обеспечения безопасности устройства: помимо стандартного ввода пароля, можно сделать распознавание лица или голоса. Стоит подумать и о других вариантах применительно к конкретному мобильному приложению. 

Этапы разработки mobile design

Существуют два основных этапа работы над дизайном:

1. UX, или User experience — это разработка алгоритма, понимание того, как пользователь будет взаимодействовать с приложением. Иными словами, это некий каркас, архитектура ресурса.

2. UI, или User Interface Design. UI дизайн определяет внешний вид, удобство и эстетику интерфейса. 

Если говорить простым языком, то UX дизайн отвечает за то, как система будет работать, а UI  — за то, как все это будет выглядеть. Оба этапа неразрывно связаны между собой, и очень часто всю работу выполняет один человек, особенно в небольших дизайнерских студиях. 

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

Создание концепции

Это первый этап разработки после того, как идея самого приложения уже есть. Так как интерфейс разрабатывается под определенную аудиторию, ее нужно изучить и ответить на главный вопрос — чего ждут от нового продукта? Для этого нужно провести исследования. Они бывают:

• качественные (интервью, фокус-группы, экспертное мнение) — отвечают на вопросы «как» и «почему»;

• количественные (анкетирование, опрос, телефонное интервью) — отвечают на вопросы «сколько» и «как часто».

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

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

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

А вот интерфейс приложения интернет-магазина совсем иной. Он, наоборот, может пестрить иконками, которые будут меньше по размеру, но при этом удобны в плане кликабельности.

Мозговой штурм

После разработки концепции стоит приступить к методике мозгового штурма. Для этого все члены команды должны выдвигать свои идеи. Если дизайнер один, то он делает это самостоятельно. Главное правило — предложений должно быть много, пусть даже самых необычных и невыполнимых. Как показывает практика, именно из них в итоге и выходит что-то стоящее. 

Именно мозговой штурм, или брейнсторминг дает жизнь самому интерфейсу, превращая идею в реальность. Можно работать на бумаге или в специальных программах, например, Balsamiq Mockups, Sketch, Photoshop и InVision — дело вкуса и привычки.

Создание User Flow Diagram: пример блок-схемы

Разработка интерфейса мобильного приложения — это хорошо, но без представления, как им будут пользоваться, дальше продвинуться не получится. И тут на помощь приходит создание User Flow Diagram.

Это визуальное представление действий пользователя, которые он совершает при взаимодействии с мобильным приложением. Выполняется в виде блок-схемы. User Flow Diagram иллюстрирует всю логику и возможные варианты использования. 

Согласование структуры интерфейса и переходов

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

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

Определение внешнего вида интерфейса и утверждение стиля

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

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

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

Демонстрация проекта: макеты, прототипирование и другие варианты

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

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

• Макет. Это более реальная демонстрация готового приложения. Картинки здесь статичны, но заказчику сразу понятно, как и что будет выглядеть. Можно создать презентацию. Ранее макеты часто рисовали с помощью Adobe Photoshop, сейчас ему на смену пришло приложение Sketch.  

• Кликабельный прототип. Это наиболее близкий к реальности прототип мобильного приложения. Здесь можно нажимать кнопки, переходить по ветке меню и делать почти все из того, что будет доступно реальному пользователю. Один из самых наглядных вариантов демонстрации разработки приложения, на создание которого уходит довольно много времени и ресурсов. Для работы часто используют InVision, нередко ее дополняет Craft. 

• Анимированные flow. Это самый наглядный и в то же время самый сложный в исполнении вариант демонстрации процесса работы приложения. В отличие от кликабельного прототипа, здесь еще нужно записать видео взаимодействия с ресурсом. Важно понимать, что сложная анимация существенно затянуть весь процесс, что нежелательно для всех сторон. К тому же соответствующими навыками владеют далеко не все дизайны.

Утверждение дизайна приложения

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

IOS против Android — две глобальные операционные mobile системы

На сегодняшний день 98% рынка поделили между собой IOS от Apple и Android от Google, поэтому все популярные мобильные приложения разрабатываются под одну из этих операционных систем. Для того чтобы улучшить пользовательский опыт, каждый из гигантов IT-индустрии выпустил рекомендации по дизайну, разработке и проектированию приложений:

• Google Material Design для Android;

• Human Interface Guidelines для IOS.

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

Слепо следовать рекомендациям не нужно. Достаточно понимать общие принципы разработки и особенностей веб-дизайна. Более того, можно даже попробовать применить какие-то моменты из рекомендаций для Android к iOS, и наоборот. 

О том, как создавать приложения для разных операционных систем, мы писали в статьях «Дизайн приложений для IOS» и «Дизайн приложений для android».

Советы начинающему дизайнеру мобильных приложений

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

Работа с заказчиком

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

• сроки выполнения заказа;

• бюджет, который заказчик закладывает в проектирование;

• цель дизайна — одно дело, когда нужна просто презентация для инвесторов, другое — полноценное мобильное приложение;

• технологии выполнения.. 

Взаимодействие с разработчиками

Сделать красивый графический дизайн и в готовом виде отдать его разработчикам — большая ошибка. Велик риск, что многое придется переделывать, но уже в другие, сжатые сроки. Хороший дизайнер с самого начала активно взаимодействует с разработчиками мобильного приложения, обсуждая свои решения и предложения. 

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

Процесс проектирования мобильного приложения

Чтобы максимально упростить себе задачу, дизайнер может использовать уже готовые элементы. Этот способ работы имеет сразу несколько плюсов:

• упрощает сам процесс создания интерфейса;

• упрощает пользование приложением на всех уровнях, так как элементы, скорее всего, уже знакомы потребителю;

• дизайн будет выглядеть более гармонично.

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

Использование UI Kit с самого начала работы над проектом

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

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

• вносить необходимые изменения по мере работы легко;

• дизайнеру в процессе работы все реже приходится отрисовывать что-то с нуля;

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

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

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