Как сделать дизайн для приложения
Дизайн приложений
В создании мобильного софта главную роль исполняет дизайн приложения. Он фундамент приложения. И он же первый, кто цепляет внимание пользователя. Чтобы удержать внимание пользователя нужно продумать: внешний дизайн, структуру, удобство пользовательского интерфейса (конкретно UX и UI) и другие детали. Теперь подробнее.
Дизайн мобильных приложений
Разработка дизайна для приложения — это трудоемкий процесс, который, по исполнению, может оказаться сложнее, чем подготовка макета для сайта.
В среднем, дизайн мобильного приложения занимает от недели до 1 месяца. Если в приложении подразумевается множество уникальных экранов, то разработка может длиться более 1-го месяца.
Этапы дизайна приложения
Процесс создания мобильного приложения разделяется на этапы. Это помогает помнить о каждом шаге в разработке софта.
Этап тестирования приложения необходимо проводить еще и на этапе прототипа. Важно знать, что весь требуемый функционал реализуем и правильно работает. Посмотрите, каждая деталь приложения действует так, как задумывалось? Пользователю понятно, что делает та или иная кнопка? Если сомневаетесь, нужно переработать макет.
Принципы дизайна в разработке приложений
Помните выражение «черт в деталях»? Так вот, это про дизайн. Приятно, когда в дизайне мобильного приложения продуманы все мелочи: как выглядит экран, если контент не загрузился или загрузилась часть. Что будет на странице, если отключился интернет и другие не маловажные детали. Рассмотрим все детали по порядку.
Первое впечатление и обучение пользователя
Onboarding (произносится «онбординг») — это механизм искусственного создания первых впечатлений о приложении у пользователя.
Знакомство пользователя с приложение нужно начинать с onboarding. Онбординг формирует восприятие пользователя к продукту от первого контакта (открытие первого экрана) до момента оплаты (целевое действие). Функция обеспечивает легкий и комфортный старт за счет нескольких механик.
Мы используем onboarding как первый экран с короткой инструкцией / презентацией, где написано, как пользоваться сервисом (обучение). Предоставляет максимум информации по управлению приложением в сжатом объеме.
Применяется в зависимости от целей и результатов, которые нужно достигнуть. Например, стимулировать людей к совершению заказа, к приобретению премиум аккаунта или привязке банковской карты.
Реализация онбординга нужна для конкретной задачи. Не применяйте просто красивые картинки. Создайте эту мини-презентацию исходя из поставленных целей и задач. Другими словами, научите пользователя делать то, для чего создано ваше приложение.
Детали в дизайне приложения
Сделайте акцент на важных кнопках. Например, кнопку «заказать» нужно сделать больше и заметнее, чем кнопку «подробнее», которую можно оставить просто ссылкой.
Задавайте шрифт правильно. Некоторые компании применяют для каждого мобильного приложения разные шрифты. Для пользователя это не всегда удобно. К примеру, в его смартфоне может не оказаться задуманного вами шрифта. Как приложение будет работать в этом случае? Идеально использовать функцию «использовать дефолтный шрифт» (по умолчанию).
Количество действий / переходов в приложении
Оцените, есть ли в приложении лишние действия? Если есть, от них лучше отказаться. Дизайнеры нашей компании, при разработке сайта, приложения или программы, всегда проверяют продукт на наличие лишних действий. Проще говоря, если пользователя можно привести к оформлению заказа в 3-и действия вместо 7-ми, то лучше так и сделать.
Разница между UX и UI дизайном приложений
Фундаментом разработки приложения, программы или сайта, всегда является UX и UI дизайн. Эти две составляющие влияют на весь рабочий процесс в целом.
UX-дизайн (User eXperience, в переводе с англ. «пользовательский опыт») — это привлекательность и эффективность привлечения пользователей к выполнению целевого действия через графические элементы. Суда входит разработка: цветовой гаммы, шрифтов изображений и паттернов.
Если с удобством и логикой построения экранов все в порядке, то можно переходить к разработке визуальной части мобильного приложения. То есть, к UI-дизайну.
UI-дизайн (User Interface, в переводе с англ. «пользовательский интерфейс») — это удобство, интуитивно понятный дизайн для использования. Оценивается по опыту взаимодействия пользователя с дизайном на этапе тестирования.
Как видим из определений, разница между UX и UI есть. На практике, цель у UX и UI общая: сделать приложение удобным, привлекательным и интерактивным. UX и UI связаны между собой и отдельно не действуют.
На заметку: По нашему опыту, 90% пользователей прекращают использовать приложение еще на этапе знакомства, если один из пунктов (UX и UI) не доработан.
Структура экранов мобильного приложения
Чтобы создать работающее мобильное приложение, дизайнеру нужно изучить его особенности, разобраться в построении структуры и переключении экранов, функциональности. Сейчас индустрия мобильных приложений настолько захватила наш мир, что описать стандартный набор экранов стало сложной задачей. И все же, мы попробуем перечислить основной набор экранов.
Главные экраны и меню
В мобильное приложении главный и меню являются основными экранами. Главный экран проектируется с учетом задумки продукта, его назначения и цели. Он же отправная точка для пользователя. Поэтому, главный экран содержит элементы навигации, по которым можно перейти к разным разделам мобильного приложения.
В 50% мобильных приложений дизайнеры помещают меню на главный экран. При этом, меню может быть 2-х видов: выпадающее меню или его отдельный экран. Из практики нашей компании, при создании мобильного приложения следует ограничить количество действий во взаимодействии пользователя с меню.
В идеале, количество кнопок в меню должно быть не более 7-ми, а остальную информацию сделать в подкатегориях.
Экран входа и профиль
На заметку: чтобы приложение завоевало сердца вашей целевой аудитории, нужно изучить площадки конкурентов и тренды в дизайне мобильного приложения в конкретной сфере.
Экран электронной коммерции, каталог
Основная цель создания коммерческого проекта — это продажа продуктов, товаров или услуг. Визуальная презентация товара имеет сильное воздействие на принятие решения пользователем. Задача дизайнера — создать каталог компании в мобильном приложении таким образом, чтобы он был максимально удобным и привлекательным для клиента.
Отсюда слегка выбивается количество карточек товара (продуктов), которое помещается на один экран. Потому что их количество зависит от ширины экрана пользователя. Как показать товар — это уже задача маркетинга.
Контрольный экран
Процесс оформления заказа — это последний шаг в совершении целевого действия пользователем. Дизайнер отлично поработал над мобильным приложением и клиент смог дойти до покупки. Теперь важно не отпугнуть его.
Основная часть экрана — это форма оформления покупки, где клиент вводит личные данные для покупки и ее оплаты. Количество требуемой информации зависит от типа интернет-магазина или сервиса. На этом этапе нужно показать, что данные, вводимые пользователем, останутся в безопасности и не будут переданы мошенникам. Для этого нужно оставить убеждающие фразы.
Сама же задача «защита персональных данных» выполняется программистом. Дизайнер готовит макет, как контрольный экран будет выглядеть.
Социальный экран
Лента активности, новостей, событий — это все социальные экраны. Feed (производится «фид»), должен иметь четкую схему сканирования и отображения событий в ленте, которая не будет перегружена лишними деталями.
Контакты
Говоря об интернет-магазине, само собой разумеется, что в мобильном приложении будет страница «Контакты». Дизайн этой страницы формировался в течении долгих лет, пока не пришел к имеющемуся виду. Экран должен быть представлен в виде отсортированного списка (номер телефона, почта, контакты для месенджерров и т. д.).
На заметку: Для упрощения поиска нужного контакта можно установить маленькую иконку рядом с контактом.
На этом мы заканчиваем повествование о дизайне мобильного приложения. Следите за обновлениями нашего блога, чтобы узнать больше информации по теме. Новая статья выходит 1 раз в неделю. Подписка внизу.
Процесс создания дизайна мобильного приложения с нуля
Я начала изучать графический дизайн, когда мне было 13 лет. Я научилась проектировать веб-сайты по онлайн-курсам и целыми днями игрался с Photoshop и Affinity Designer. Этот опыт научил меня мыслить, как дизайнер.
Я занимаюсь проектированием и разработкой приложений уже почти год. Я приняла участие в программе Массачусетского технологического института, где я работала в команде по разработке приложения Universeaty. Два месяца назад я начала работать над новым приложением Crypto Price Tracker, которое вышло недавно, 28 января.
В этой статье я поделюсь поэтапным процессом проектирования, которому я следую при работе над приложениями. Это должно помочь тем, кто хочет научиться или улучшить свои навыки цифрового дизайна. Дизайн – это не только то, как использовать программное обеспечение для проектирования, и эта статья не научит вас, как его использовать. Есть сотни качественных обучающих программ в Интернете. Дизайн также касается понимания сути вашего продукта, его функциональности, а также проектирования, не забывая о конечных пользователях. Вот чему вас научит эта статья.
Процесс проектирования:
Юзерфлоу
Первый шаг – выяснить, какие функции вы хотите видеть в своем приложении. После того, как у вас появились идеи, создайте юзерфлоу. Это блок-схема работы вашего приложения.
Обычно юзерфлоу состоит из трех типов фигур.
Юзерфлоу очень полезны, потому что они дают хорошее логическое представление о том, как приложение будет функционировать.
Вот диаграмма юзерфлоу, которую я нарисовала, когда начала работать над дизайном моего приложения.
Юзерфлоу для основного интерфейса.
Прототипы
После того, как вы завершили делать юзерфлоу для каждого экрана, вы начнете работать с протопипами всех экранов. Прототипы – это, по сути, низко детализированные наброски ваше приложение. По сути, эскиз или схема того, где будут располагаться изображения, ярлыки, кнопки и прочее. Грубый эскиз того, как ваше приложение будет работать.
Я использую печатные шаблоны из UI Stencils для рисования каркасов. Это экономит время и дает хорошую рабочую область для рисования и заметок.
Вот пример прототипа.
Прототип интерфейса мобильного приложения
После создания прототипов вы можете использовать приложение под названием Pop и сделать снимок всех своих рисунков с помощью приложения и получить кликабельный прототип, связав все экраны с помощью кнопок.
Наброски дизайна и цветовые палитры
Это моя любимая часть. Это похоже на разглядывание витрин. Множество паттернов дизайна и цветовых палитр на выбор. Я выберу те, которые мне нравятся, и буду экспериментировать с ними.
Лучшие платформы для поиска паттернов – это Mobile Patterns и Pttrns. И чтобы найти хорошие цветовые палитры, посетите сайт Color Hunt.
Дизайн
Наконец вы переходите к использованию программного обеспечения для создания дизайна. Это похоже на то, что вы вошли в свое приложение в будущем, и сделали несколько скриншотов. Это должно выглядеть реалистично и в значительной степени похоже на реальную вещь.
Существуют программные средства разработки и инструменты для создания дизайна. Я использую Affinity Designer. Наиболее часто используемым инструментом для дизайна iOS является Sketch.
Вот пример некоторых ранних дизайнов моего приложения.
Перенесение рисунка в пиксели!
Я больше экспериментировала с различными цветовыми палитрами.
Я поделилась первоначальными макетами с друзьями, чтобы получить их отзывы. Кажется, многим понравилась схема с золотым градиентом и черным.
Будьте готовы получить отзывы и поэкспериментировать с новыми предложениями! Вы получите удивительные отзывы от своих пользователей, когда разговариваете с ними, а не когда лихорадочно просматриваете Dribbble или Behance.
Поэтому я переработала макет и удалила фоновые графики, потому что их генерация была технически трудоемким процессом, и они снижали читабельность. Что в итоге вышло:
Золотой градиент с черным на удивление хорошо выглядит!
Я была довольна цветовой схемой, значками на панели вкладок и общей компоновкой. Я пошла дальше и разработала остальные экраны, следуя тем же принципам дизайна. Это был долгий, но безумно увлекательный процесс!
Когда все мои экраны были готовы, я собрала прототип в Adobe XD и попросила нескольких друзей поэкспериментировать и дать свой отзыв.
После последних штрихов именно так выглядит финальная версия моего дизайна.
Финальная версия дизайна
После того, как все экраны были завершены, я импортировала их в Xcode и начала разработку приложения.
Вот и все! Я надеюсь, что эта статья поможет вам начать работу над дизайном приложения или поможет стать лучшим дизайнером. И если вам нравится мое приложение, вы можете скачать его здесь.
Я заканчиваю статью одной из моих любимых цитат о дизайне
«Дизайн – это не только, как предмет выглядит и ощущается. Дизайн – это то, как он работает»
– Стив Джобс
8 этапов процесса разработки интерфейса мобильного приложения
От переводчика: Роман Гапонов — сооснователь компании Django Stars, которая занимается разработкой веб- и мобильных приложений. Основываясь на личном опыте и опыте своей компании, Роман написал статью о процессе разработки пользовательского интерфейса. Изначально она была размещена на Medium, на английском языке. Перевод этой статьи публикуется нами на Хабре.
Немного приятного: в этой статье (а это уже второй материал о мобильной разработке, первый здесь) есть своеобразная пасхалка, которая позволяет получить скидку на курс Skillbox и агентства Agima по мобильной разработке. Это ребус, который при расшифровке даст слово или название решения из сферы разработки мобильных интерфейсов. Скидка за угаданный ребус — 10%. Ребусы есть и в других наших статьях из этой серии. Скидки суммируются, и если собрать их все, можно получить курс за смешную цену.
Создание концепции
Самый первый этап — это когда идея уже есть, а разработчик имеет все необходимые инструменты для ее реализации. Но с чего нужно начинать? Мы начинаем с изучения ниши, целевой аудитории и кейсов продукта. Это неплохо помогает понять будущих клиентов сервиса и создать пользовательский интерфейс, который оптимален для каждого из них.
На этом этапе могут быть затронуты и такие аспекты, как размеры и расположение кнопок и форм, шрифты и многие другие аспекты структуры интерфейса. Давайте сравним финтех-приложение и сервис такси-компании.
Финтех-приложение. Много иконок, они не слишком крупные, но работать с ними удобно. Обилие разнообразных функций
Приложение одного из такси-сервисов. Кнопок не так много, и они большие, чтобы сложно было промахнуться
В первом случае должно быть много полей, списков, графиков и переходов. Во втором случае мы видим большие элементы управления, которые просто использовать во время поездки, — и такие вещи лучше понимать уже на этом этапе.
Брейнсторминг и эскизы
Как только концепция проекта ясна, двигаемся к следующему этапу — брейнстормингу. Он нужен, чтобы превратить идею интерфейса в реальность. Мы в Django Stars берем ручку и лист бумаги — это быстрее, чем использование таких продвинутых инструментов, как Balsamiq Mockups, Sketch, Photoshop и InVision.
Диаграмма переходов
Создание эскиза дает нам структуру интерфейса. Но как пользователь должен взаимодействовать с ним? Здесь поможет User Flow Diagram. Она проиллюстрирует логику продукта, показав всевозможные способы взаимодействия с интерфейсом, дорожную карту этих взаимодействий и состояние интерфейса на каждом этапе.
Утверждение структуры и диаграммы переходов
Как только мы закончили с эскизами интерфейса и диаграммой переходов, необходимо, чтобы клиент их утвердил. Структура и переходы — основа всей дальнейшей работы с интерфейсом, поэтому мы не двигаемся дальше без получения подтверждения. На этом этапе гораздо проще внести какие-то изменения в будущий интерфейс, а значит, сэкономить и время, и деньги заказчика.
В качестве примера можно взять интернет-магазин или систему управления продажами. Меняя структуру такого проекта после внедрения дизайна, можно попасть в ситуацию, когда ломается цветовая схема сайта, поскольку элементы интерфейса и некоторые другие его части были изменены. В этом случае вам, вероятнее всего, придется отказаться от изменений. Либо всю работу нужно будет переделывать с нуля.
Выбор стиля интерфейса
Когда клиент все утверждает — можно двигаться дальше. Что будем делать? Выберем стиль интерфейса. Есть множество вариантов: от минимализма и Metro до material design и скевоморфизма. На этом этапе мы просим клиентов прислать несколько ссылок на примеры стиля интерфейса, который им нравится, а также спрашиваем об их планах на ближайшее будущее продукта. Мы уделяем внимание текущим трендам, масштабированию интерфейса, определяем время, которое необходимо на разработку и внедрение дизайна.
Подтверждение стиля
На этом этапе мы рассказываем клиенту о том, как видим все сами, а также объясняем, почему приняли то или иное решение. Он может не соглашаться с некоторыми моментами в самом начале, поскольку пока не получил полной информации об интерфейсе — у него не сформировалось представление и еще нет понимания возможных проблем. Цель — завершить обсуждение принятием варианта, который удовлетворяет и нас, и клиента.
Курс создан силами Skillbox и Agima. 4-месячная программа обо всех инструментах, без которых невозможна разработка мобильных продуктов.
Прототипирование, дизайн и их демонстрация
Как только все эти этапы завершены, мы готовы к тому, чтобы разрабатывать и показывать заказчику полную версию дизайна. Демонстрация может выглядеть по-разному. Основываясь на собственном опыте, мы рекомендуем придерживаться следующего.
Самая быстрая форма реализации ваших идей. Это низкоуровневая демонстрация дизайна. Однако такой способ позволяет показать структуру и описание взаимодействия пользователей с разрабатываемым продуктом. Выполняется в форме блочного интерфейса в оттенках серого.
Макетная демонстрация позволяет продемонстрировать проект дизайна, приближенный к реальности. Здесь все элементы и контент статичны, но воспринимается такая форма нагляднее предыдущей. И создать презентационную модель можно достаточно быстро.
Это уже детализированный прототип финального продукта. Он эмулирует взаимодействие пользователя с интерфейсом. Например, позволяет кликать по элементам управления, использовать формы и проверять другие моменты, включая анимацию. Тем не менее создание такого прототипа — процесс, который требует большого количества времени.
Так. Пришло время ребуса, вы попали именно в то место, где можно найти скидку. Учитывайте, что английский здесь может мешаться с русским, и главное — не забывайте, что мы будем тщательно следить за комментариями и удалять из них подсказки и ответы! Промослово, зашифрованное в ребусе, следует назвать, когда с вами свяжется наш менеджер после того, как вы отправите заявку на курс. Скидки за разгаданные ребусы суммируются между собой (с учетом этой статьи есть четыре ребуса), но не со скидками на сайте. Слишком медлить не стоит — промо работает до 30 августа 2018 года.
А это уже видеозапись взаимодействия пользователя с приложением. Создание демонстрационной модели такого типа требует максимального количества времени, ведь необходимо не только сделать прототип, но еще и записать на видео работу с ним. Тем не менее это очень наглядная модель.
Утверждение дизайна
Есть люди, которые четко представляют себе, как должен выглядеть дизайн, и есть те, кто лишь предполагает. Как бы там ни было, у каждого свое видение. На этом этапе клиент видит результат и обсуждает с нами важные моменты, а мы вносим необходимые коррективы.
В качестве вывода
Поэтапная разработка интерфейса позволяет быстро добраться до конечной цели. Все это экономит время, причем в процессе разработки можно без проблем вносить изменения. Также такой способ работы значительно снижает вероятность появления неожиданных правок от клиентов.