Дизайн мобильных приложений — это по сути создание мобильной версии сайта с дополнительными возможностями. При этом главная задача разработчиков заключается в создании удобной экосистемы с совершенным UX.
58 983 просмотров
Приложение Path для построения карьерного трека Веб-студия полного цикла IGNI
Скачивая какое-либо приложение, юзер по умолчанию лоялен: он уже совершил целевое действие, и если он сможет решить свою проблему с помощью вашего сервиса — то будет пользоваться им на регулярной основе. Однако если хотя бы один раздел на пути клиента не работает или неудобен — человек просто удалит ваше приложение – и не вернется к нему никогда.
В этом заключается принципиальное отличие UX-дизайна сайтов и приложений: как правило, пользователь оценивает удобство нескольких веб-продуктов, и даже если при первом визите человек не совершил целевое действие, всегда есть вероятность, что спустя некоторое время он вернется на ваш сайт. При этом повторное скачивание приложений — это скорее исключение, чем распространенная практика.
ДИЗАЙН ПРОЕКТ КАФЕ. Как сделать онлайн, быстро и недорого ! Рассказывает дизайнер .
Анализ аудитории и UX-дизайн приложения
Перед тем, как переходить к прототипу, дизайнер должен провести анализ конкурентов, целевой аудитории и задач, которые стоят перед приложением. Например, если ЦА — женщины, то кнопки и другие элементы взаимодействия можно делать меньше, если мужчины — крупнее. Большинство пользователей нажимают на экран большим пальцем, так что такая незначительная деталь поможет мужской аудитории комфортнее взаимодействовать с сервисом.
Дизайн приложения Path – ознакомление Веб-студия полного цикла IGNI
На этапе UX-разработки дизайнер должен продумать весь путь пользователя от начальных экранов знакомства — и до выполнения целевых действий, которых в приложении может быть несколько. Как правило, User Journey представляет собой ветвистое древо возможностей с разным функционалом: подпиской на приложение, обращением в службу поддержки, чтением текста, оплатой товара и так далее. И каждая “ветвь” должна быть хорошо продумана уже на этапе прототипа.
В проектировании интерфейса есть несколько важных деталей, о которых дизайнер и заказчик должны знать:
- основные элементы управления приложением должны быть внизу; верхний левый угол в App дизайне задействуется минимально и только для определенных целей, например, кнопки “Назад”, так как к ней сложно тянуться;
- управление необязательно выполняется только с помощью кнопок; в приложении пользователь может смахивать или удерживать определенные элементы для управления;
- приложения можно скроллить как снизу вверх, так и справа налево; если вы используете боковой скролл, то следует дать пользователю подсказку;
- логотип не стоит дублировать на всех экранах приложения; достаточно того, что ваш бренд будет на иконке сервиса и на экране загрузки;
- шрифты не должны быть необоснованно маленькими; для заголовков в веб-студии IGNI мы, как правило, используем шрифт 18 – 24 px, для основного текста — 14 – 16 px, для подсказок — светло-серые шрифты 12 – 14 px; также стоит использовать дифференциацию толщины шрифтов для визуальных акцентов;
- цвета должны быть диверсифицированы и нативно подсказывать пользователю, какие элементы кликабельны, а какие — нет; также цветом разграничиваются разные по смыслу элементы;
- подсказки — это хорошо; если есть вероятность, что пользователь несколько раз будет нажимать на некликабельный элемент или у вас присутствуют нестандартные элементы управления — добавьте tooltip.
Дизайн приложения Path – выбор навыков Веб-студия полного цикла IGNI
UI-дизайн приложения и создание адаптивных версий
Как в Python писать программы с интерфейсом?
После того, как вы спроектировали интерфейс, можно переходить к визуальной составляющей и “вычищать” приложение. Основная задача на данном этапе заключается в том, чтобы привести дизайн к единому Style Guide.
На все приложение желательно использовать не более 5 – 6 типов одного шрифта (разного размера, цветов и толщины) и 4 – 5 цветов. Этого достаточно для расставления акцентов и создания аккуратного интерфейса. Также стоит продумать анимацию перехода с одного экрана на другой: исчезновение, смещение, прелоадер и др. При подборе цветов также стоит учитывать, что цветовая палитра Iphone, как правило, лучше, чем палитра Android-устройств, а значит нужно отказаться от грязных и смежных цветов.
На финальном этапе происходит разработка адаптивных версий. Если приложение будет доступно только для iOS – вам повезло, ведь на этапе создания адаптивов вам достаточно отрисовать только две версии: для Iphone 6 и Iphone X. Однако если ваша задача – это сервис для Android, то придется отобрать 4 – 5 наиболее популярных разрешений в конкретном сегменте целевой аудитории.
Дизайн приложения Path – профиль пользователя Веб-студия полного цикла IGNI
Тестирование юзабилити
Важным этапом UX-дизайна является тестирование юзабилити готового интерфейса. Оно включает в себя оценку прототипа по ряду параметров:
- эффективность – достижение пользователем задач;
- результативность – время, затраченное на достижение цели;
- удовлетворение качеством сервиса и пользовательским опытом.
Самым простым вариантом проведения тестовых сессий будет создание кликабельных прототипов в Figma и запись процесса пользования сервисом с получением последующей обратной связи. Однако есть и более продвинутые сервисы, которые в режиме реального времени транслируют процесс взаимодействия пользователя с приложением, например, Userlytics, TryMyUI и UserTesting.
После этого миссия дизайнера в создании мобильных приложений считается выполненной.
Материал подготовлен арт-директором веб-студии IGNI Дмитрием Мурашкиным.
Показать ещё
21 комментарий
Написать комментарий.
Дизайн мобильных приложений — это по сути создание мобильной версии сайта с дополнительными возможностями.
Лол, правда?
Тогда это объясняет многие проблемы с дизайном у приложений.
Развернуть ветку
Развернуть ветку
шрифты не должны быть необоснованно маленькими
У вас как раз такие. По крайней мере меньше, чем это принято по стандартам iOS.
Развернуть ветку
Кривой UX не учитывающий особенности платформы. Даже в вашем примере, этот гамбургер в правом углу противоречит привычным паттернам взаимодействия с iOS, да и вообще эргономике. Попробуйте воспользоваться этим меню держа телефон в одной руке. И такого много, от основной навигации, до анимации переходов между состояниями. Пренебрежение правилами типографики, игнорирование accessibility standards. Хотя бы это
Развернуть ветку
Ну вот вам скрин приложения VC с закладкой и «поделиться» в верхнем правом углу. Это вполне удобно. И где по-вашему должно быть меню?
Развернуть ветку
Вы сами можете видеть где находится меню на вашем скриншоте (внизу, где и другие часто используемые функции)
Развернуть ветку
Большинство людей правши и используют большой палец для навигации на смартфонах. Не вижу преград располагать бургер в правом верхнем углу. Почему это кривой UX?)
Интересно взглянуть на ваше портфолио))
Развернуть ветку
используют большой палец для навигации на смартфонах.
Вот именно. И в верхний правый угол каждый раз тянуться неудобно (особенно на современных смартфонах с большим экраном). Даже в Андройде перенесли основную навигацию в нижний таб бар.
Интересно взглянуть на ваше портфолио))
А что множество исследований и гайдлайны iOS и Android без моего портфолио уже неубедительны?
Развернуть ветку
Аккаунт удален
Развернуть ветку
Вообще сама концепция бургера уже давно себя изжила. Т.к. вы трудитесь в данной сфере, то уверен, что исследования по этому поводу вы читали, посему пруфы искать не буду.
Правый и верхний угол моб устройства попадают в красную зону на устройствах с диагональю выше 5 дюймов (может и больше, точно не помню). Поэтому размещение в углах какого-либо функционала само по себе неоправданно с точки зрения юзабилити.
Развернуть ветку
Такое предоставление информации это полный пи**ец и надругательство над здравым смыслом. Как это расшифровывать? Что означает частично заполненная пробирка фигмы и что означает чуть менее заполненная пробирка скетч? Насколько между ними разница? Как ее понять и посчитать? Как формируется эта пробирка и как считается каждая риска которой эта пробирка заполняется?
Если баллами, цифрами или оценками, то может уйти от этой дебильной непонятной графики и написать оценку или баллы?
Есть человеческие понятные значения «хорошо», «плохо», «отлично» и подобные слова. Можно балльную систему, например результат 70 из 100, где будет понятно из чего сложился каждый балл и где можно его улучшить. К какому х*ю эти тупые безликие пробирки где все цветными полосочками заполняется я не понимаю.
Как эту картинку адекватно прочесть? Какие из нее выводы можно сделать? Что типа я вот на именно эту пустоту незаполненную недотягиваю до какой то оценки или что?
Есть дизайн, а есть здравый смысл. Таких дизайнеров как вы надо сначала учить работать с информаций, базами данных и выводом/предоставлением инфы. А это все дизайны месячных выпускников курсов по дизайну для беханса слепленные на коленке. Красиво нарисовано и никакого смысла. Сидят учат как UX делать и не знают про зоны безопасности в iOS.
Пи**ец.
Источник: vc.ru
Как дизайнить приложения, если ты не дизайнер? Пошаговая инструкция
Disclaimer Профессиональная статья создана на основе интервью с ментором Solvery.
Вы когда-нибудь хотели создать приложение, но не знали, с чего начать? Независимо от того, являетесь ли вы предпринимателем, разработчиком, продакт менеджером, или просто любопытным человеком, эта статья покажет вам, как создать дизайн мобильного приложения, даже если у вас нет опыта в дизайне.
Почему бы просто не нанять дизайнера?
Найти и нанять достойного дизайнера очень сложно, дизайнеры стоят дорого. Это не просто стоимость найма дизайнера, это время и усилия, чтобы найти того, кто хорошо подойдет для вашего проекта.
Кроме того, вам придется объяснить свое видение и идею дизайнеру, и в конечном итоге вы проведете много итераций, прежде чем получите то, что хотите. Самое главное, вы не хотите тратить все свои деньги на дизайн приложения, которое в итоге может не сработать.
Так почему бы не сделать это самостоятельно? На самом деле вам не нужно быть дизайнером, чтобы создавать высококачественный прототип для вашего приложения.
Определите цель вашего приложения
Прежде чем приступить к дизайну, важно определить его цель.
- Какую проблему решает ваше приложение?
- Какие фичи будут у вашего приложения?
- Кто будет пользоваться этим приложением, какие будут пользовательские сценарии?
Подумайте об ответах на эти вопросы, поскольку они определяют, какие элементы дизайна вы будете использовать и как пользователи будут взаимодействовать с вашим приложением.
Вайрфрейм приложения
Вайрфрейминг (wireframing) — это процесс создания низкоточной (грубой) версии приложения. Идея состоит в том, чтобы создать визуальную карту макета и функциональности конечного продукта. Когда вайрфрейм готов, вы можете начать добавлять визуальные элементы и функциональные возможности, не беспокоясь о том, будут ли эти элементы работать вместе.
Вы можете использовать вайрфреймы, чтобы визуализировать поток контента, выявлять закономерности и несоответствия в дизайне и принимать решения о направлении вашего продукта.
Вайрфрейм приложения обычно состоит из двух основных компонентов: пользовательского потока, компоновки экранов.
Пользовательские сценарии — как будет выглядеть путь пользователя в вашем приложении? Сколько будет экранов, за что они будут отвечать? Как пользователь будет перемещаться между ними?
Лайаут экрана — из каких элементов будут состоять эти экраны? Основная цель здесь — определить наилучшее место для различных элементов: например, что следует разместить в верхней части экрана или какая область лучше всего подходит для видеоконтента?
Найдите вдохновение
Всегда сложно начинать с нуля, может быть удобнее начать свой дизайн, глядя на то, что создали другие.
Найдите вдохновение для своего будущего приложения, просмотрев App Store или Google Play в аналогичной категории и посмотрите, найдете ли вы что-нибудь полезное или интересное. Ищите сходства в дизайне и функциональности, которые могут дать вам некоторые идеи о том, с чего начать.
Снимки экрана ваших любимых экранов и элементов пользовательского интерфейса в качестве эталонов определенно помогут вам, когда вы начнете создавать собственное приложение.
- Mobbin Design — Обширная курируемая библиотека мобильных интерфейсов.
- Behance — крупнейшая соц-сеть дизайнеров для демонстрации и поиска работ.
- Dribbble — платформа для дизайнеров для демонстрации своих работ.
Воспользуйтесь преимуществами готовых дизайн-систем
Все мобильные приложения состоят из одних и тех же элементов интерфейса. Нет необходимости изобретать велосипед каждый раз, когда вы начинаете новый проект.
Дизайн-системы экономят время, объединяя все элементы, необходимые для дизайна приложения, в одном пакете: блоки, элементы, карточки продуктов (макеты с заполнителями для контента, такого как изображения или текст), панели навигации, домашние экраны с кнопками или меню и т. д.
Воспользуйтесь готовыми дизайн-системами, которые содержат все необходимые вам компоненты, и объедините их в идеальный дизайн.
Сделайте первую версию вашего дизайна
Весь смысл процесса дизайна заключается в том, чтобы делать ошибки и учиться на них. Вы будете удивлены тем, насколько ваша первоначальная идея может отличаться от конечного результата после нескольких итераций, поэтому приступайте к работе над своим приложением как можно скорее.
Не придумывайте идеальную картину в своей голове, а просто начните делать.
Превратите свой дизайн в прототип и получите обратную связь
Когда у вас есть дизайн для вашего приложения, пришло время создать прототип. На этом этапе вы хотите убедиться, что поток вашего приложения правильный и что ваш дизайн соответствует цели вашего проекта.
Создание прототипа также поможет вам получить отзывы от других людей, которые могут не разбираться в технологиях. Когда вы представляете свои идеи лично или используете видео, людям может быть сложно давать советы о том, что работает, а что нет, без какого-либо визуального представления.
Полезные сервисы для прототипирования:
- Figma — универсальный инструмент, упрощающий совместную работу и доступность для UX-дизайнеров, разработчиков и всех остальных членов команды.
- Proto.io — предоставляет широкий выбору компонентов, темплейто, так же позволяет создавать динамические переходы между экранами
- Marvel — Marvel позволяет вам выйти за рамки статических макетов и предлагает интерактивность, динамические переходы и жесты, чтобы воплотить прототипы в жизнь и дать реальный пользовательский опыт любому, кто их тестирует.
- Stage — инструмент для создания прототипов мобильных приложений с 0, имеет большое количество разнообразных заготовленных темплейтов, готовых библиотек компонентов и экранов.
Покажите прототип разным людям и спросите, что они о нем думают. Если они могут использовать приложение без каких-либо проблем, значит, вы хорошо поработали над дизайном приложения.
Заключение
После этих шагов у вас будет проверенный дизайн-прототип вашего приложения, с которым вы уже можете идти к разработчикам, или реализовывать его самостоятельно с помощью no-code.
- дизайн
- дизайн интерфейсов
- мобильные приложения
- мобильная разработка
- менторство
- ментор
- менторинг
- менторинг в ит
- дизайнер
- no code
Источник: habr.com