Ux design что это за программа на андроид
Обновлено: 04.07.2024
Для дизайнера интерфейсов важно, чтобы цветопередача на экране компьютера максимально соответствовала реальности: повышенные яркость и контрастность, искажение оттенков могут негативно отразиться на финальном результате. У ноутбуков Apple с этим проблем нет — цветопередача там близка к идеальной, поэтому их предпочитают многие специалисты. Кроме того, у MacBook удобный тачпад и красивый внешний вид. Дополнительный бонус — часть программ для дизайнеров интерфейсов разработана специально для устройств на iOS. Например, бесплатная Origami.Studio для создания интерактивных прототипов мобильных приложений.
2. Figma
Если проект большой и над ним работает целая команда дизайнеров, разработчиков и других специалистов, то могут возникнуть проблемы в коммуникации: у одного человека при загрузке файла что‑то отобразится некорректно, кто‑то внесёт правки и забудет поделиться изменённым документом. Избежать нестыковок, недомолвок и других проблем поможет Figma. Создавать интерфейс в этом онлайн‑сервисе совместно могут несколько человек в режиме реального времени и на одной странице. Все загруженные файлы и имеющиеся проекты в Figma хранятся в облаке. Также там можно просматривать старые версии документов и при необходимости восстанавливать их.
Но сервис пригодится и дизайнерам‑одиночкам: здесь можно рисовать интерфейсы, создавать каркасы, интерактивные прототипы и векторные иконки. Ещё в Figma можно загружать свои CSS (с помощью плагинов), к тому же проводить UX‑исследования, собирать дизайн‑библиотеки, связывать их напрямую с фронтендом. А дополнение Figma Mirror позволяет проверить, как интерфейс выглядит на телефоне.
3. Adobe Illustrator
Создавать векторные иконки и иллюстрации в этой программе удобнее, чем в Figma, благодаря широкому набору инструментов, поддержке множества форматов и более комфортной работе с кривыми Безье. Например, в Adobe Illustrator можно превратить в векторную фигуру текст и редактировать его как графический объект. Также программа позволяет делать прототипы разного уровня детализации, работать с типографикой, создавать CSS‑файлы, UX‑проекты и UI‑мокапы.
Купить лицензионную версию Illustrator и других программ от Adobe можно у их официального партнёра — интернет‑магазина Softline. В его ассортименте более 25 000 позиций лицензионного ПО и оборудования от более чем 3 000 производителей. Выбрать нужную программу поможет круглосуточная служба поддержки.
4. Adobe After Effects
Используя стандартный макет, объяснить клиенту, как будет работать интерфейс, не всегда получается должным образом. В этом дизайнеру поможет Adobe After Effects — инструмент для прототипирования: с помощью него можно создать шоурил — анимацию предполагаемого взаимодействия пользователя с интерфейсом, показать нестандартную загрузку страницы или оживить какой‑то конкретный элемент, например маскота.
5. ColorHexa
Вручную найти подходящую палитру, отталкиваясь от основного цвета бренда или просто пожеланий заказчика, достаточно сложно. Бесплатный онлайн‑сервис ColorHexa поможет избежать долгого подбора правильных оттенков и сочетаний. Всё, что нужно сделать, — выбрать основной цвет, затем алгоритм выдаст комплементарные тона и подходящие цветовые схемы. А ещё ColorHexa показывает, как оттенки будут восприниматься людьми с дальтонизмом.
6. Fontjoy
Ещё один бесплатный веб‑инструмент, на этот раз для проверки сочетаемости шрифтов. На основном экране Fontjoy три блока: заголовок, подзаголовок и основной текст. В арсенале сервиса полная библиотека Google Fonts. Чтобы выбрать шрифт, нужно кликнуть на кнопку с ползунками — она находится слева напротив каждого блока, — затем выбрать понравившийся образец или вбить название шрифта в строке поиска. Если идей нет, можно нажать на кнопку Generate и сервис предложит свой вариант комбинации.
7. Notion
Дизайнер интерфейсов тратит много времени на поиск хороших решений в других продуктах и общение с пользователями. Хранить и систематизировать всю полученную во время исследований информацию удобно в Notion. В этот веб‑сервис можно загружать любые файлы и группировать их, а также работать в команде и делиться информацией с другими пользователями. Также сервис подойдёт для хранения полезных ссылок, редактирования документов и создания доски канбан, чтобы следить за загруженностью и дедлайнами.
В Notion можно сделать портфолио: креативно оформить основную страницу с базовой информацией (об образовании и трудовом опыте) и прикрепить к ней список с гиперссылками на несколько других страниц — с примерами работ или списками навыков. Заказчик или потенциальный работодатель оценит нестандартный подход и то, что вы владеете Notion.
8. Jira
Работа над проектом обычно командная, поэтому нужно следить за прогрессом каждого из участников, получать фидбэки и вместе обсуждать детали. Делать это помогают таск‑трекеры, например Jira. Этот инструмент позволяет формировать бэклог продукта, планировать спринты и следить за продвижением работы. Задачи в Jira можно градуировать по степени важности и группировать в один проект, а ещё — настроить напоминания о приближении дедлайнов на электронную почту.
9. Антивирус «Лаборатории Касперского»
Антивирус жизненно необходим дизайнерам. Случайный вирус на компьютере может лишить вас всех данных. В работе с бизнес‑заказчиками, с которыми подписано NDA, это чревато юридическими последствиями. Антивирус «Лаборатории Касперского» быстро реагирует на угрозы и не даёт червям и троянам добраться до важной информации: защищает от них в режиме реального времени. Он определяет и уже известные, и новые угрозы.
Антивирус нужен даже тем, кто пользуется MacBook. Вероятность поймать вирус на MacBook мала, но всё же существует — для них тоже создаются Предотвращение заражения вредоносным ПО Mac Defender и его удаление в ОС Mac OS X 10.6 и более ранних версий как разные программы, которые похищают персональные данные, так и обычные черви и трояны New Undetectable DNS Hijacking Malware Targeting Apple macOS Users .
Собрать полный комплект инструментов для UX/UI‑дизайна — от необходимого ПО до мощных ноутбуков — можно в интернет‑магазине Softline. Лицензии на программы придут на электронную почту через 10 минут после покупки, а технику доставляют по всей России в срок от 2 до 7 дней.
Все продукты стоимостью от 3 000 до 150 000 рублей в Softline можно приобрести в рассрочку (на 30 или 60 дней) либо в кредит (на 6 или 12 месяцев). Для этого необходимо подтвердить, что у вас есть постоянный источник дохода.
Продуктовый дизайнер (UX/UI), веб-дизайнер и бренд-дизайнер. Опыт проектов в международных компаниях Omega-R (агентство), iSpring Solutions (продуктовая) и со стартапами по всему миру. Преподаватель курсов «UI-дизайн и анимация интерфейсов» и «Веб-дизайн» в Институте программных систем и godesign.school.
Июн 9 · 7 мин читать
За основу материала взята и расширена статья “Mobile UX Design Principles”.
Пользователи ожидают от приложения больше, чем просто мобильный сайт. Пользователи ждут экосистему — помощника, который 24/7 будет готов взяться за поручение, оказать услугу, сделать мгновения интереснее — четко служить оффлайн и онлайн.
Статистика из Fortune сообщает, что 75% скачанных приложений открываются только один раз. В этой статье мы подробно разберем причины, которые как раз следует проработать в первую очередь, чтобы приложение сыграло значимую роль в жизни клиентов.
Содержание:
В чем специфика UX-дизайна мобильных приложений и почему это важно
Специфика UX мобильных. Сайт — помогает широкой аудитории, а приложение — в первую очередь помогает обладателю смартфона быть на коне: в общении с друзьями, в английском, на тренировке, в метро, за супчиком и даже в перемещениях в пространстве.
Пользователи любят свои мобильники и ценят их за силу супергероев — готовность прийти на помощь 24/7. Объем мобильного трафика в мире в октябре 2016 года составил 51% и впервые в истории превысил трафик с персональных компьютеров. И эта доля продолжает расти. С актуальным распределением трафика между смартфонами и десктопами можно посмотреть на радаре. В третьем квартале 2020 года мобильные устройства (за исключением планшетов) генерировали 50,81 процента мирового трафика веб-сайтов.
Принцип 1. Авторизация через соцсети и SMS лучше, чем поля ввода
В современных приложениях авторизация через соцсети и sms-код — это уже стандарт, как мыть руки. Один тап по кнопке соцсети, и вот вы уже зашли в приложение. Никаких воспоминаний адресов почты, подтверждений их правильности, никаких новых паролей и логинов.
Пример: Самые яркие примеры здесь — банковские приложения: без карты, достаточно только номера телефона и вы внутри.
Если клиент уже однажды испытал такой опыт, зачем повторять его в каждом сервисе. Как думаете?
Процедура регистрации от Google. Во всех смартфонах с Android. Требуется для доступа в Google Play и другим сервисам Google.
Принцип 2. Хороший онбординг — это проводник до важных целей
Пользователи не изучают тонкости в ваших рекламных материалах (на сайте, в App Store или Google Play). Если хотите точно знать, что перед вами заинтересованный в достижении целей клиент, распахните перед ним карту целей, которые он сможет достичь с помощью приложения, предложите выбрать траекторию обучения и поддерживаете его на пути.
Page Flows – огромная коллекция онбординг-сценариев от ТОП-брендов.
Принцип 3. Приложение как помощник для поручений, поэтому ценные функции должны постоянно прирастать
Вы наверняка уже встречали супераппы — или суперприложения (англ. superapp) — это приложений с расширенным набором функций. Такое приложение удерживает пользователя в рамках одной экосистемы из сервисов определенной компании. Этот принцип лучше всего изучить именно на них.
Один из самых популярных супераппов из материального мира.
К примеру, в приложение с образом «Доставка еды» может не зайти функция «Заказа такси», так как люди не еда. А вот в приложение про такси, доставка еды может прийтись по нраву, так как концепция «Увези меня — Привези мне» вполне ясна. Главный вопрос здесь — сбалансировать коммуникацию и сделать грамотный нейминг и айдентику, чтобы приложение воспринималось как ваш личный водитель.
Не ломайте привычки клиентов — наращивайте новые поводы решить задачу именно с вашим приложением. Ключевая тонкость здесь – сбалансировать ментальность клиента и функциональную концепцию вашего приложения.
Вот, кстати, на видео интересный пример рабочего инструмента c высокой плотностью работ (JTBD), на которые его можно нанять.
Принцип 4. Поддержка распространенных жестов — это ключ к интуитивному приложению
Стандартные приложения задают культуру. Чем больше вы изучаете привычки клиентов, тем больше нюансов по жестам вы учтете и в вашем интерфейсе. Скролл, свайп, зум фото — это классика. Приглядитесь к жестам и возьмите на вооружение то, что уже знакомо и привычно пользователям.
Принцип 5. Навигация и поиск как компас и карта, они ускорители в достижении целей
Сделать навигацию эффективной поможет аналитика. Загляните в Amplitude или Firebase сами или попросите аналитика сделать вам выгрузку. Так вы можете изучить самые популярные маршруты, исследовать пустые выдачи по запросам в поиске и отвалы пользователей на пути до цели.
Ваша задача сделать из приложения умный навигатор, и тогда каждый пользователь, независимо от сложности сценария, сможет по ясным шагам через вывески-указатели и меню быстрого доступа телепортироваться к цели.
В интуитивной навигации важен баланс, иначе она может стать слишком навязчивой. Посмотрите ролик и почувствуете, почему важно искать сбалансированный подход 👇
Принцип 6. Расположите элементы управления ближе к кончикам пальцев
Соберите контекст, как клиенты используют ваше приложение и в каких ситуациях. Так вы сможете убедиться, что все ключевые элементы управления находятся в зоне досягаемости. Например, если держать телефон в правой руке, то ключевые функции следует располагать в зоне досягаемости большого пальца. Изучите карты тач областей для различных экранов.
Схема как светофор: зеленые, желтые и красные зоны (комфортно, тянуться и сложно). Два исследования о том, как пользуются смартфоном: How We Hold Our Gadgets, Design for Fingers, Touch, and People.
Совет: в этой работе вам могут пригодиться методы наблюдения за пользователями в естественных условиях. Причем необязательно вживую, так как с трекинг поворотов экрана уже может подсказать вам точки для повышения юзабилити.
Принцип 7. Приложение должно быть максимально полезным в режиме офлайн
Без интернета клевое приложение обеспечивает большинство полезных свойств. Заботливо подскажите пользователям, что ценный контент можно скачивать и просматривать/слушать офлайн. И, конечно же, как только появится соединение, сохранитесь.
Shazam полезен даже оффлайн.
Пример: К примеру, карты 2Gis можно закачать на телефон, а Coursera даст доступ к лекциям в самолете и, конечно, же приложение с заметками — всегда в деле 24/7. А Shazam в 2017 дали возможность записать понравившуюся песню, чтобы затем распознать ее при подключении к сети.
Принцип 8. От вашего приложения ждут такой же скорости работы как от стандартных приложений на телефоне: YouTube, Браузер и Почта
Оптимизируйте работу приложения или найдите точки, когда пользователю приходится ждать отклика от интерфейса. Подумайте, как их обыграть, небольшая анимация поиска или прелоадера лучше, чем пауза в пару секунд без реакции на действия пользователя.
Анимация может помочь сгладить время ожидания.
Жизненный совет: пробуйте запроектировать ее такой, чтобы зажигала разработчиков на оптимизацию 👇
Рефреш прелоадера от Benito Design.
Пример: Соберите эталоны и добивайтесь того же качества. Если в вашем приложении есть видео, то тяните его уровень до YouTube.
Принцип 9. Запоминайте предпочтения и недавние действия
Так выглядит стартовый экран Яндекс Go. Приложение популярные места, в которые ездил ранее в тот же день, а также и другие ТОП-активности (работы, на которые нанимал приложение).
Принцип 10. Обеспечьте бесшовный UX — командную игру ноутбука, планшета и телефона
Все устройства в мире пользователей – это единая экосистема, предложите установить приложение на все устройства и объясните как это ускорит работу.
Демонстрация самых популярных сценариев использования приложения от DStudio.
Пример: В Evernote можно легко добавлять заметки как с телефона, так и с планшета, компьютера и твои ценные идеи всегда у тебя под рукой.
Вывод и рекомендация
Многие правила берут начало из масштабных исследований. Но главная их цель — не сковывать вас, а ускорять достижение нормы и открывать новые возможности для творческих поисков и безграничного удовлетворение потребностей клиентов. Правила и советы в статье скорее общая рекомендация, а не строгая классификация.
Натренировать дополнительные навыки дизайна приложений вы можете на платформе Breezzly. На Breezzly вас обеспечат серией проектов, обучат системе дизайна интерфейсов и натренируют навыкам в целом комплексе инструментов (Figma, Principle, InVision Studio и Tilda) — все это пригодится практики в принципах мобильного дизайна. Пробуйте!
Технический мир продолжает развиваться, предоставляя людям инструменты для решения проблем в различных областях. Я и команда авторов оригинальной статьи собрали список полезных сервисов для дизайнеров UI и UX на основе своего опыта и дополнительных исследований.
Приложение Sketch на сегодняшний день является самым востребованным инструментом среди дизайнеров интерфейсов. Самое большое преимущество Sketch — простой и понятный функционал. Его можно использовать и как инструмент прототипирования и как программное обеспечение для создания иконок и иллюстраций. Программа векторная и дает возможность работать со слоями и фигурами, которыми можно легко управлять с помощью панели инструментов.
Кроме того, Sketch предоставляет дополнительные данные о макете, например, вы можете видеть размеры компонентов и расстояние между ними, только удерживая клавишу [alt]. Sketch использует аппаратное ускорение, поэтому работает быстро и не перегружает компьютер, тем самым экономя время (и нервы!) дизайнеров. Тем не менее, есть одна особенность: Sketch работает исключительно на Mac.
Новые подходы в дизайне UI и UX побудили разработчиков программного обеспечения обновить свои продукты и даже создать новые, ориентированные на конкретные задачи, такие как структурирование макета. Adobe не была исключением, поэтому они запустили свой новейший продукт Adobe XD (eXperience Design) в 2016 году. Он пришел на смену Photoshop и Illustrator для дизайнеров UI и UX и сумел получить довольно высокие оценки.
Эта программа специально предназначена для дизайнеров UX, создающих каркасы, интерактивные прототипы и векторный дизайн. Это хороший шанс для поклонников Adobe вернуться к знакомому инструменту со значительными обновлениями, сосредоточенными на дизайне пользовательского интерфейса. Для тех кто еще новичок в веб-дизайне, интерфейс XD вряд ли покажется трудным. Эта программа сегодня доступна для операционных систем Mac и Windows 10.
Это один из самых трендовых инструментов для дизайна интерфейсов сегодня, который внедряет инновационные решения и возможности для дизайнеров пользовательского интерфейса. Прежде всего, это профессиональный инструмент, который основан на веб-сервисе, позволяя проектным группам сотрудничать в режиме реального времени, работая на одной странице. Кроме того, дизайнеры могут даже экспортировать CSS прямо внутри программы, что улучшает связь с командой разработчиков. Figma позволяет создавать каркасы, прототипы и векторные иконки бесплатно, просто зарегистрировавшись, но это работает только для отдельных лиц, а вот команды должны платить. Большим плюсом является то, что сервис доступен для различных операционных систем.
Lunacy не является инструментом для создания каркасов, но он очень помогает в этом процессе. Он особенно полезен для команд, члены которых работают на компьютерах с различными операционными системами, позволяя открывать, редактировать и сохранять файлы эскиза. Поэтому для разных этапов процесса разработки интерфейса этот инструмент может стать способом сделать работу более продуктивной и дружелюбной для всех участников — дизайнеров, разработчиков, клиентов и менеджеров. Lunacy позиционирует себя как Sketch для Windows.
Заметки — это абсолютно бесплатное приложение, которое поставляется в качестве предустановленной программы на смартфонах Apple. С выходом каждой новой версии iOS, приложение становится все более функциональным. Сейчас в Заметках можно настраивать заголовки и маркированные списки, создавать списки задач с пунктами, форматировать текст с помощью выделения, приглашать людей для совместной работы, добавлять фотографии, делать зарисовки, защищать отдельные заметки паролем, структурировать все заметки по темам, просматривать все вложения разом, восстанавливать удаленные заметки в течение 30 дней, закреплять важные и часто используемые заметки в верху списка а также многое другое.
Конечно, это не приложение для создания интерфейсов, но лично мне оно помогает создать быструю зарисовку или прототип на скорую руку, чтобы не забыть интересный образ, пришедший в голову. На мой взгляд, нет ничего проще и удобнее предустановленного приложения. Это тот пример, когда базовая программа может быть лучше многих других (даже платных) сторонних аналогов.
Marvel — это бесплатный облачный инструмент для интерактивного прототипирования, который не требует навыков написания кода. Вы можете скачать каркасы из Sketch и Photoshop или даже сфотографировать эскиз, сделанный на бумаге, а затем создать реалистичные прототипы мобильных приложений прямо на сайте и поделиться ими с любыми пользователями, отправив им ссылку на скомпилированный интерактивный прототип. В бесплатной версии доступно только 3 проекта для загрузки, но этого вполне достаточно, чтобы быстро создать интерактивный прототип приложения и получить отклик. Кроме того, вы можете получить платный премиум-план с неограниченным количеством проектов и комментариями вместе с удалением брендинга Marvel и другими дополнительными функциями.
Это бесплатный инструмент для создания интерактивных прототипов. InVision получил популярность, поскольку он позволяет легко импортировать файлы со Sketch или Photoshop и создавать анимированный дизайн. Интерактивный прототип в InVision выглядит как реальный проект, потому что дизайнеры могут связывать страницы между собой, имитируя использование реального веб-сайта или мобильного приложения. Кроме того, InVision помогает улучшить процесс обратной связи, позволяя писать комментарии прямо на прототипе.
Еще одной особенностью является организация компонентов пользовательского интерфейса в различных столбцах, показывающих состояния разработки: “сделать”, “в процессе” или “утверждено”. Таким образом, клиент и дизайнер могут более эффективно управлять рабочим процессом.
Это довольно простое приложение, которое направлено на создание анимированного дизайна пользовательского интерфейса. Отличительная особенность Principle в том, что он может работать даже в автономном режиме, поэтому ваш прогресс работы не зависит от качества подключения к Интернету. Интерактивные прототипы могут быть легко преобразованы в GIF или видео и быть расшарены в портфолио на Dribbble или в другое место. Интерфейс этого инструмента очень похож на Sketch, поэтому он будет прост в освоении для многих дизайнеров. Кроме того, интересная особенность заключается в том, что вы можете просматривать проекты на устройствах iOS. Хотя в этом-то и вся загвоздка — Principle доступен только для macOS, поэтому поклонникам Windows нужно искать альтернативы.
Разработчики команды UXPin известны как эксперты в области дизайна пользовательского опыта, которые постоянно делятся своими знаниями в различных книгах и статьях. Их продукт — UXPin — это Web-инструмент для прототипирования, который может быть использован для создания каркасов интерфейса в высоком качестве с последующим превращением их в интерактивные прототипы. Также дизайнеры могут портировать свои работы из Sketch или Photoshop для прототипирования в UXPin. Ну и вишенкой на торте является то, что эта программа автоматически формирует спецификации для разработчиков.
150 тысяч новых приложений регистрируют в App Store и Google Play каждый месяц. Привлечь внимание пользователей и добиться коммерческого успеха помогает продуманный дизайн мобильных приложений. Так, согласно исследованию McKinsey, в компаниях с хорошим дизайном рост выручки больше на треть.
О том, какие знания и навыки нужны дизайнеру приложений, как создаётся мобильное приложение, что нужно учитывать при разработке, рассказывает Алексей Комаров, UX/UI-дизайнер в IBM и преподаватель Нетологии на курсе «Дизайнер мобильных приложений».
Алексей Комаров
UX/UI-дизайнер в IBM
светлана третяк
Дизайнер приложения отвечает за эмоции от использования продукта. Для реализации этой задачи дизайнер должен создавать не только привлекательный визуальный облик, но и уметь выяснять потребности пользователей с помощью исследований, составлять навигационную модель (как связаны экраны приложения), проектировать интерфейс (расставлять по важности иерархию компонентов).
Давайте разбираться с самого начала.
Что нужно знать мобильному дизайнеру
Колористика
— искусство сочетания цветов.
Например, вместе не рекомендуется использовать зелёный и красный — насыщенные цвета, которые как бы перекрикивают друг друга. Получается вырвиглазный интерфейс, отсутствует контрастность и объекты трудно различить на экране. Для несочетаемых цветов дизайнеры даже придумали определение «зелубой» (зелёный + голубой).
Для подбора цвета часто используют специальные палитры или цветовые круги — например, Material palette, Adobe Color.
Также можно брать на заметку палитры готовых продуктов. Например, в Америке существует определённый культ кроссовок, где их покупают не ради замены старой пары, а, скорее, с эстетической точки зрения. Поэтому некоторые экземпляры можно назвать источником вдохновения для дизайнеров, которые используют цветовые схемы кроссовок для своих продуктов.
Сервис Coolors позволяет создавать цветовую палитру по фотоТипографика
— умение оформлять текст при помощи набора и вёрстки.
По сути дизайн — это оформление контента, 80% которого передаётся через текст. Любая информация располагается в виде иерархии — главная и второстепенная части, которые выделяются с помощью определённой стилизации текста.
Например, уровни заголовков — заголовок 1-го или 2-го уровня — различаются по размеру шрифта и служат навигацией, а также делают материал структурированным.
Выравнивание по левому краю придаёт тексту аккуратный вид — его легче воспринимать. Строки начинаются на одном уровне, и глаз быстро находит начало следующей строки — удобно и быстро привыкаешь.
Композиция
— умение грамотно управлять объектами в пространстве. Какие размеры объекта, отступы между объектами и краями экрана, расстояния и связи между объектами позволят создать гармоничную композицию для лучшего восприятия объектов.
Если говорить о том, как колористика, типографика и композиция влияют на поведение пользователя и эффективность интерфейса, то стоит упомянуть про четыре типа нагрузок.
Когнитивные нагрузки — усилия, которые прикладываем, чтобы распознать объект, логику его работы и принять решение о дальнейших действиях. Например, понимаем, что перед нами кнопка, а не округлый прямоугольник, и на эту кнопку можно нажать, чтобы попасть на нужный экран.
⇒ Чем больше мозгу требуется усилий для определения объекта, тем больше мы устаём.
Визуальные нагрузки — усилия для определения объекта на экране по визуальным признакам (круг, небо, кошка) и выделения его среди других.
⇒ Чем больше объектов в интерфейсе, тем больше мы устаём.
Моторные нагрузки — возникают при физическом контакте с интерфейсом: свайп, тап и другие.
⇒ Чем больше жестов управления интерфейсом и чем они сложнее, тем больше мы устаём.
Внешние нагрузки — возникают при взаимодействии пользователя с приложением (собака залаяла, машина проехала, пошёл дождь). Эти нагрузки сложно точно предугадать — можно лишь предположить, в каких условиях будет использоваться приложение чаще всего.
⇒ Чем больше отвлекающих моментов, тем больше мы пытаемся сосредоточиться и быстрее устаём.
Все типы нагрузок идут в связке, влияя друг на друга.
К примеру, если приложение предназначено для пожарных, которые часто находятся в стрессовых ситуациях, нужен максимально понятный интерфейс — у них нет времени разбираться в чём-то сложном. А если пользователь — офисный сотрудник, который заходит в приложение, чтобы убить время по дороге на работу, то можно добавить больше контента или функций, чтобы пользователь увлёкся и провёл в приложении больше времени.
Инструменты
Из графических редакторов сейчас популярны Figma, Sketch или Adobe XD.
Figma
Кросс-платформенный онлайн-редактор, который работает на Windows, macOS, Linux. В нём можно работать всей командой, в том числе с заказчиками. Бесплатный для одного пользователя и платный для работы с командой, если нужно видеть все действия команды, а не только за последние 30 дней.
Sketch
Платный графический редактор для macOS. Плюс Sketch в том, что на рынке он дольше Figma, поэтому в некоторых случаях возможностей и интеграций для него находится больше. Но если вы фрилансер, работать с заказчиками будет непросто, поскольку это не кросс-платформенный инструмент. В Sketch можно работать в офлайне.
Adobe XD
Приложение Adobe для проектирования интерфейсов. Плюсы и минусы аналогичны Sketch, кроме того, что в Adobe XD есть возможность создавать голосовые прототипы при помощи Amazon Alexa. XD заметно менее популярен по сравнению с Figma и Sketch.
Графические редакторы достаточно похожи, поэтому, если освоить один инструмент, то изучение другого не займёт много времени.
Из других инструментов дизайнера можно отметить:
В этом сервисе удобно делать брейнстормы, обсуждения, прорабатывать гипотезы, проектировать навигацию с помощью mindmap и создавать Customer Journey Map.
Сервисы для создания прототипов
Помимо встроенного прототипирования в Figma, Sketch или Adobe XD дополнительно используют такие решения, как InVision, Marvel, ProtoPie, Flinto, Principle for Mac.
Цели и задачи разработки
Дизайнер должен понимать, какие задачи у бизнеса и для кого предназначено приложение.
Приложение — это инструмент бизнеса со своими целями и задачами.
Для примера рассмотрим мобильное приложение банка.
снизить расходы на обслуживание клиентов в отделениях и повысить средний доход на одного клиента.
контролировать свои расходы.
создать дистанционный канал поддержки клиентов и увеличить продажи банковских продуктов.
При разработке приложения всегда учитывают требования бизнеса, задачи пользователей и возможности технологий.
Можно сделать великолепный дизайн, но он не будет решать задачи компании или разработчики не смогут его реализовать. Например, бывает, что бизнес выдвигает гипотезы, не проверяет их на этапе исследования и сразу отправляет в разработку. Получается функциональность, которая никому не нужна, при этом время и деньги потрачены впустую.
Бывает, что ресурсы безрезультатно тратятся не только на бесполезные фичи, но и на приложение.
К слову, если интересуетесь культурой стартапов, в целом (есть утрированные моменты) она хорошо показана в сериале «Кремниевая долина». Его рекомендует к просмотру и Билл Гейтс: «Продюсеры и сценаристы проводят много исследований перед каждым новым сезоном шоу. В прошлом году я был одним из нескольких людей, с которыми они встретились, чтобы поговорить об истории отрасли и рассказать о некоторых своих идеях для пятого сезона».
Soft skills
Коммуникационные навыки
Например, больше половины рабочего времени я общаюсь, согласовываю, обсуждаю. При этом стоит помнить, что непрерывное общение может привести к профессиональному выгоранию, поэтому периодически нужно прислушиваться к себе.
Правильная реакция на критику
Дизайнеров постоянно критикуют, и многие на это обижаются.
Если критикуют, то критикуют работу, а не дизайнера. Важно отделять и не принимать близко к сердцу.
Главное — получать конструктивную критику. Если сказали, что плохо, но не сказали почему, то это неаргументированное мнение, на которое не нужно реагировать.
Относитесь ко всему с юмором — это помогает в том числе трансформировать негатив в хорошее настроение 🙂
К примеру, когда я работал в крупной финансовой компании, менеджер попросила меня сделать кнопки жёлтыми (этот цвет не корпоративный). На мой вопрос, почему именно таким цветом, менеджер пояснила, что на курсах, которые она посещала, сказали, что «жёлтые кнопки привлекают внимание, поэтому, например, в IKEA выходы жёлтые». То, что в IKEA жёлтый — один из корпоративных цветов, которые логично использовали в оформлении магазина, на курсах, видимо, забыли сказать ¯\_(ツ)_/¯
Mindmap — диаграмма связей, интеллект-карта, карта мыслей или ассоциативная карта.
Это способ изображения процесса общего системного мышления с помощью схем.
Что нужно учитывать при разработке интерфейса
Взаимодействие с пользователями
Создание мобильных приложений не сильно отличается от создания сайтов в плане процессов — и те, и другие относятся к цифровым продуктам.
Основное различие заключается во взаимодействии пользователя с продуктом. За компьютером мы сидим или стоим, а вот с телефоном мы можем оказаться в любой ситуации: на прогулке, занимаясь спортом, в магазине, автомобиле и так далее. Также различаются размеры устройств и период контакта.
Смартфоны меньше компьютеров и ноутбуков, а сеансы использования приложений короткие, но частые — всё это нужно учитывать. На экране приложения должно быть минимум информации — только полезная. Пользователь должен быстро получать доступ к контенту. Возьмём, к примеру, Яндекс.Почту. Если мы зайдём в браузерную версию с компьютера, то увидим много дополнительной информации. На телефоне видим только письма, остальное скрыто и показывается по требованию (нажатию) — удобно.
Во многом благодаря желанию быстро и удобно получать информацию и появились мобильные приложения.
Ведь чтобы зайти на сайт, нужно ввести его адрес в строку браузера, а приложение можно открыть и сразу им пользоваться.
Нюансы мобильных платформ
Особенности создания интерфейсов для приложений описаны в гайдлайнах мобильных платформ — Human Interface Guidelines для iOS (Apple) и Material Design для Android (Google).
В создании приложений на платформах Android и iOS есть различия. Например, в паттернах поведения: в iOS меню показывается целиком, а в Android «гамбургерное» меню (три полоски); в разном управлении: в Android три кнопки («назад», «домой» и «последние приложения»), в iOS только «домой».
Грань с каждым обновлением постепенно стирается, но пока ограничения существуют. К примеру, модельный ряд iOS достаточно скромен, а в Android большое количество устройств да ещё и от разных производителей. Из-за этого при разработке на Android тяжелее отлаживать интерфейс — на это уходит много времени.
В основном Android доступнее, чем iOS. И из-за дешёвых компонентов встаёт вопрос качества — на плохой матрице экрана страдает цветопередача, а с плохим сенсором тяжелее попадать на кнопки (низкая чувствительность).
Интерфейс приложения лучше сразу адаптировать для двух платформ, а не делать что-то среднее — в будущем такая попытка сэкономить может дорого обойтись.
Стоимость «экономии» оценить в вакууме сложно — зависит от компании, бизнес-модели, рынка. Немаловажно и то, что для iOS характерна одна модель поведения пользователей, для Android — другая.
Если говорить о средних значениях, то давайте прикинем. Средняя зарплата разработчика — 150 тысяч рублей. В крупной компании приложение могут делать год, но мы будем ориентироваться на агентства, которые делают приложение примерно 3 месяца. Для Android нужны 2 программиста, для iOS — 1 (разработка примерно одинаковая по трудозатратам, но больше нужно отлаживать в Android).
Если просчитались с разработкой приложения на iOS, то это 150 000 рублей х 1 разработчик х 3 месяца = 450 000 рублей, на Android — 900 000 рублей. И это только расходы на зарплатный фонд — без учёта упущенной выгоды, репутационных потерь и снижения лояльности пользователей.
Адаптация контента
Не нужно пытаться уместить контент сайта в десктопной версии на компьютере или ноутбуке в маленький экран смартфона. При адаптации интерфейса под телефон контент приоритезируют и оставляют только самое важное.
Длинные процессы
Если на сайте можно использовать длинные формы (опросники) в несколько шагов, то на телефоне это делать не рекомендуется. Пользователю будет неудобно их заполнять, и он может бросить это занятие в любой момент.
Профессия
Дизайнер
мобильных приложений
Узнать больше
- Сможете самостоятельно разрабатывать дизайн мобильных приложений и руководить созданием интерфейсов мобильных продуктов
- Работайте над своим проектом или выберите учебный
- Каждый выпускник получает помощь и поддержку Центра развития карьеры Нетологии
Итак, мы разобрали базу для создания визуальной части интерфейса — дизайна. А теперь рассмотрим непосредственно процесс разработки приложений.
Этапы создания мобильного приложения
Исследование
Погружаемся в цели и задачи бизнеса.
Изучаем целевую аудиторию.
Исследования делятся на количественные и качественные.
Количественные исследования отвечают на вопросы «сколько?», «как часто?». Обычно их проводят при помощи опросов, анкетирования, телефонных интервью.
Качественные отвечают на вопросы «кто?», «почему?». Получают информацию в индивидуальных глубинных интервью, групповых дискуссиях (фокус-группах) или прибегая к экспертным оценкам.
Если приложение делается с нуля, то сначала с помощью комбинации методов проводят качественные исследования, потом количественные.
Если приложение уже разработано и его нужно доработать, тогда сначала собирают статистику количественными методами, а потом — качественными.
Дальше проводим конкурентный анализ, изучаем другие каналы коммуникации бизнеса: сайт, презентации, реклама, при наличии — офлайн-точки.
Это нужно для правильного позиционирования бизнеса в приложении. У каждого бренда или компании есть свой язык общения с клиентом. Через каналы коммуникации бренд транслирует посылы аудитории. Например, слоган Nike «Just do it» отражается в простом, спортивно-повседневном стиле, в котором оформлены магазины и сайты компании.
Аналитики предварительно пропускают через себя требования бизнеса и упаковывают это в понятные модели: mindmap, схемы бизнес-процессов, типичные пользовательские пути и другое, — создают артефакты аналитики.
На основе вышеуказанных артефактов дизайнер принимает решения.
Также артефакты помогают управлять коммуникацией с бизнесом: чтобы каждую неделю не прилетали изменения, все бизнес-требования обговариваются и фиксируются. Это важно, чтобы не делать работу в стол и избежать бесконечных доработок.
Если каждую неделю приходят новые требования, то бизнес-заказчик не знает или не понимает, что на самом деле он хочет. А если нет чётких критериев приёмки, будет сложно показывать результат работы. Можно попасть в петлю непрекращающихся правок и постоянных переделок.
Вышеперечисленное — исследования, общение с бизнесом, аналитика — может сделать дизайнер, менеджер продукта или аналитик, если есть такой специалист в компании. Это зависит от компании и бюджета на проект.
Если есть выделенные аналитики, то зона ответственности между ними для целей разработки приложения может распределяться следующим образом:
- бизнес-аналитик погружается в бизнес-процессы и собирает требования от компании,
- UX-аналитик изучает проблемы пользователей, проводит качественные и количественные исследования,
- продуктовый аналитик обычно работает с метриками и показателями продукта.
Проектирование
По сути это создание скелета приложения: дизайнер понимает, где какая будет информация, раскидывает контент по экранам и определяет, сколько экранов будет в каждом пользовательском сценарии.
Чтобы проверить эту логику на практике, дизайнер собирает черновик приложения. Там он тестирует связку экранов, проверяет, что компоненты интерфейса расположены в правильном месте и понятно, как с ними взаимодействовать: что-то нужно нажать, потянуть, выделить или удалить.
На этом этапе важно не переходить в визуальный дизайн и не углубляться в вопросы из серии «какого цвета будет кнопка» или «какие сделать скругления у картинки».
Для проектирования чаще всего используют чёрно-белые прототипы — вайрфреймы, которые создаются в графическом редакторе.
Перед вайрфреймами некоторые создают бумажные прототипы — от руки делают эскиз будущего приложения на бумаге.
Бумажные прототипы подходят для быстрого обсуждения идей, чтобы проверить себя и синхронизироваться с командой перед тем, как приступить к работе в графическом редакторе.
Бумага и карандаш — такие же инструменты дизайнера, как и графический редактор.
Когда дизайнер продумывает процессы в приложении, сложно удержать всё в памяти в один момент времени — нужно фиксировать ход мысли. И в этом сложно полагаться на графические редакторы, которые заточены под определённые задачи — например, обработать фотографии или создать иллюстрации. К тому же, когда мы сразу работаем в графическом редакторе, мы вынуждены подстраиваться под его ограничения, то есть не мы управляем инструментом, а инструмент — нами.
Между идеей в голове и её реализацией получается много посредников: интерфейс графического редактора, экран монитора, клавиатура, мышка. А при работе с бумагой идея быстрее становится осязаемой.
Читайте также: