приложения на телефон для графического дизайна
Лучшие программы дизайна на Андроид для рисования, вектора, Android Фотошоп и др.
Андроид — наиболее популярная мобильная ОС, которая установлена на миллионах устройств по всему миру. Поэтому не удивительно, что под нее есть достаточно много игр, утилит, приложений, в том числе и разных Android Apps для дизайнеров. Вы можете использовать их на средненьких китайских смартфонах, топовых девайсах по типу Google Pixel 2 XL или планшетах Samsung с пером S Pen.
Данная статья будет своего рода логическим продолжением подборки десктопных бесплатных аналогов Фотошопа, Иллюстратора, но только для мобильного рынка. Информация здесь (а также иллюстрации) позаимствованы из этой статьи. Мы немного сократили список, выбрав лишь лучшие решения и те, в которых получится работать без каких-либо финансовых затрат. Всего вышло чуть больше 10-ти приложений. Чтобы скачать программы дизайна на Андроид достаточно перейти по соответствующим ссылкам в их описании.
Adobe Illustrator Draw
Adobe запустила свое приложение Adobe Illustrator Draw для векторной графики в Android устройствах еще в 2016 году, и до сих пор это практически единственная надежная программа для создания векторных рисунков на мобильных (если только вы не выберете планшет на базе Windows).
Разобраться с Illustrator Draw будет легко любому, кто уже знаком с его настольным собратом. При этом он не уступает ПК софту по количеству уникальных функций, включая настраиваемый стилус, управление несколькими слоями, опции слияния и т. д.
Конечно, разработчики Adobe надеются, что вместе с Illustrator Draw вы будете пользоваться сервисом Creative Cloud, который помогает повысить общую эффективность действий. Также здесь доступна моментальная отправка своих работ в Illustrator и Photoshop CC, поддерживается сервис стоковых изображений Adobe Stock и публикация проектов на сетевой платформе Behance.
Sketchbook
Компания Autodesk более известна 3D-приложениями, ведущими в своем классе, однако их новое детище Sketchbook – это, действительно, мощная программа, предоставляющая широкие возможности для творчества, например, для быстрого создания эскизов или имитации рисования красками.
Функциональные особенности включают: большое количество и разнообразие кистей (170 видов); полноценную работу со слоями, в том числе поддержку режима смешивания; совместимость с PSD файлами; предсказуемый штрих, помогающий делать линии и формы точными и четкими.
Sketchbook можно назвать, вероятно, лучшим из всех дизайн приложений для Android, которое в паре с хорошим девайсом (особенно со стилусом) обеспечивает естественное рисование.
Adobe Photoshop Mix
Решение лучше подходит для широкого спектра задач, а не какой-то тонкой работы. Photoshop Mix позволяет вырезать и комбинировать элементы из различных изображений, смешивать слои и корректировать свои творения на Android устройстве. Вполне неплохая вариация приложения Фотошопа на Андроид.
Особенностью программы является ее простота и совместимость с Photoshop CC – при внесении изменений на телефоне, они мгновенно отобразятся на рабочем столе. Кроме того, вы можете воспользоваться всеми преимуществами CC с помощью Adobe Photography Plan – сэкономите при этом немного больше по сравнению с полной подпиской Creative Cloud.
Infinite Design
Разработчики Sean Brakefield полностью переделали свое приложение SVG векторной графики в Android под названием Infinite Design, выпущенное в 2016 году. С самыми последними обновлениями теперь это реальная альтернатива Adobe Illustrator Draw. Как следует из названия программы, его главными достоинствами являются безграничный холст (панорамирование, масштабирование или поворот), бесконечные слои и мощные возможности редактирования, в том числе отмены и повтора.
В приложении имеется множество фишек по работе со слоями: функция трансформации для масштабирования, поворота, наклона и других изменений. Но основная особенность – это создание 3D-изображений с помощью пяти инструментов перспективы. И еще одно небольшое полезное дополнение для пользователей Chromebooks – наличие горячих клавиш. Такой себе Android Фотошоп получается.
Adobe Photoshop Sketch
Не смотря на то, что Photoshop Sketch является лишь одним из многих дизайн приложений в Android, оно вполне может оказаться в первых строчках у любого пользователя Creative Cloud благодаря тем преимуществам и набору разных опций, которые оно предоставляет.
Это отличная программа для создания эскизов с такими функциями, как режим наложения, перспективные сетки и естественные инструменты рисования. Нельзя не отметить фишку превращения любого фото в кисть с помощью Capture CC.
Adobe Comp CC
Никогда еще макеты и модели не создавались так легко, как с Adobe Comp. С помощью простых жестов (рукой или стилусом) вы можете сделать наброски, а приложение превратит их в профессиональный макет.
Эта программа для дизайна на Android устройствах просто незаменима для зарисовок налету во время совещаний или презентаций. Выбирайте векторные фигуры, изображения, цвета и стили текста, а потом отправляйте все Adobe Photoshop, Illustrator, InDesign или Muse, чтобы закончить работу на настольном ПК.
Infinite Painter
Не смотря на то, что по своим возможностям Infinite Painter слегка уступает лучшим приложениям для фотошопа на Android, однако в нем есть функции, которые отсутствуют в других аналогичных программах. Можно применять предустановочные кисти – их более 80, или создать новую кисть; работать со слоями и использовать режим наложения.
С помощью пяти видов перспектив у вас получится нарисовать полноценные 3D-изображения. Кроме того, имеющиеся инструменты позволят легко корректировать холст (переворачивать, наклонять и т. д.).
Find My Font
Find My Font – оригинальное решение для распознавания шрифтов, изначально дебютировавшая как десктопный софт, куда импортируются фотографии с целью определения используемой типографики. Однако интеграция этого умного инструмента в мобильные устройства открыла новые горизонты – теперь пользователи могут в любое время и в любом месте идентифицировать интересные варианты шрифтов дабы внедрить их в своих проектах.
Благодаря огромной базе данных (свыше 150 000 фонтов) эта программа для дизайна на Андроид способна распознать связанные и отдельные буквы и получить максимально точные результаты вплоть до размера текста.
Adobe Capture CC
Кроме того, с помощью этого дизайн приложения в Android можно мгновенно создавать геометрические узоры из любого изображения или цветовую палитру из фотографий. А благодаря аккаунту в Creative Cloud ваши творения мгновенно станут доступны в настольном софте Adobe, который вы используете.
Sketcher Free
В Sketcher Free для «процедурного рисования» есть 12 кистей, богатая цветовая палитра и ластик. Однако главным достоинством программы по праву является пользовательский интерфейс с отличным набором полезных фишек.
Color Reference
Приложение Color Reference является альтернативой сервисов генераторов палитр, позволяющее создавать и экспортировать цветовые палитры, а также подбирать цвета из импортируемых изображений. Кроме того, в нем есть огромное количество автоматически созданных вариантов. Забавная особенность здесь – опция, с помощью которой вы сможете создать обои для вашего телефона на основе выбранных цветовых предпочтений.
Итого. В статье рассмотрели разные дизайн приложения в Android по типу Фотошопа, Иллюстратора и т.п. софта, помогающие в работе с вектором, рисунками, шрифтами, эскизами. Надеемся они вам пригодятся. Все мобильные программы бесплатны.
Если знаете еще какие-то интересные альтернативы фотошопу в Android или любые другие решения, полезные для дизайнеров, пишите названия/ссылки ниже.
10 лучших Android-приложений для графических дизайнеров
Еще совсем недавно компьютер или ноутбук был основным инструментом графического дизайнера. Но технологии стремительно развиваются и появляются альтернативы, с помощью которых дизайнеры могут реализовать свои идеи. Сегодня смартфон или планшет стоят сравнительно недорого, это уже не «элитные» устройства. Производители выпускают целые линейки смартфонов для пользователей с небольшими доходами, смартфон больше не является чем-то недоступным.
С появлением операционной системы Android возникла настоящая экосистема приложений. С помощью этих приложений можно делать буквально все, так что неудивительно, что появились специальные Android-приложения для дизайнеров.
Многие из этих приложений достаточно мощные и функциональные, их появление позволило дизайнерам творить независимо от места, где они находятся. Больше не надо держать идею в голове или делать наброски на бумаге: все что нужно – это достать из кармана смартфон, запустить нужное приложение и начать работать. FreelanceToday предлагает вашему вниманию 10 Android-приложений для дизайнеров.
Недавно выпущенное приложение Infinite Design предназначено для работы с векторной графикой. С помощью этого приложения графические дизайнеры и веб-разработчики могут создавать проекты любого уровня сложности, используя смартфон или планшет, работающий на ОС Android. Это не просто векторный редактор, приложение позволяет дизайнеру создавать даже трехмерные изображения, весь необходимый для этого функционал присутствует.
Кроме того, в Infinite Design имеется целый ряд новаторских функций, таких как бесконечный холст, логические операции, сетки и многое другое. Дизайнер может добавлять различные эффекты при редактировании контуров и контролировать процесс, используя улучшенный инструмент Pen Tool.
Еще одно популярное Android-приложение для дизайнеров – это Sketchbook Express. Приложение позволяет создавать быстрые эскизы и имитирует процесс рисования красками. Это лучший выбор для тех, кто ни дня не может прожить без творчества и любит воплощать свои идеи с помощью скетчей. Инструментарий приложения включает 15 предустановленных кистей и расширенный цветовой круг. Такие функции, как эффект нажатия кисти и сглаживание форм открывают большие возможности для дизайнеров. Среди других функций стоит отметить мультитач-навигацию, несколько стилей рисования, контроль прозрачности и переключение состояния слоев.
Artflow – одно из лучших приложений для рисования. Приложение было создано с целью заменить традиционные блокноты и альбомы, и изначально разрабатывалось для смартфонов, работающих на ОС Android. В Artflow имеется свыше 70 кистей и есть все необходимые инструменты для работы. С помощью приложения можно создавать как простенькие наброски, так и сложные графические работы.
Приложение отличается дружественным интерфейсом, что делает его доступным для всех категорий пользователей. Приложение можно запустить, если восьмилетнему ребенку вдруг захотелось порисовать, в то же время Atflow могут использовать опытные дизайнеры, реализовывая свои идеи. С помощью приложения можно создавать файлы с максимальным разрешением 4096х4096 пикселей, что делает его достаточно привлекательным для профессионалов.
Приложение Paperless постепенно набирает популярность в дизайнерской среде и является одним из лучших инструментов для создания визуального контента. Paperless предоставляет пользователю доступ к 6 различным типам инструментов, с помощью которых можно создавать наброски и полноцветные иллюстрации. Так дизайнер может добавлять к графике текстовые аннотации. Возможности приложения позволяют разработчикам сохранять свои файлы в виде электронных книг.
С помощью Paperless разработчики могут делиться своими идеями с пользователями социальных сетей – расшаривать контент можно непосредственно из приложения. Это достаточно простой графический редактор, в нем можно создавать всего три слоя, но для создания несложных скетчей этого вполне достаточно.
AutoCAD – одно из самых полезных Android-приложений для дизайнеров. AutoCAD позволяет разработчикам создавать, редактировать, просматривать и обмениваться чертежами. Удобный интерфейс и множество полезных функций существенно упрощают процесс создания чертежей. Приложение узкоспециальное, в нем не так много инструментов для рисования, однако все необходимое есть. Все-таки AutoCAD 360 «заточен» именно под проектирование и все функциональные возможности рассчитаны на то, чтобы в приложении можно было создавать чертежи любой сложности.
Разработка компании Adobe, приложение Illustrator Draw – это мощный векторный редактор, работающий на мобильной операционной системе Android. С помощью приложения пользователь может легко создавать сложные векторные иллюстрации. Редактор имеет интуитивно понятный интерфейс с удобным сенсорным управлением. В приложении есть 5 встроенных кистей, с помощью которых можно создавать быстрые скетчи. Кроме того, Illustrator Draw поддерживает самые продвинутые инструменты для рисования, такие как Adonit Jot Touch, Adobe Ink, Apple Pencil и т.д.
С помощью приложения можно реализовать даже самые сложные идеи, создание контуров занимает минимум времени, в Draw есть множество эффектов, один дизайн-проект может включать до 10 слоев, также есть возможность импорта фотографий.
Разработанное компанией Appic Labs приложение Camera MX предназначено для создания и редактирования фото и видеоконтента. Отличительной особенностью этого приложения является функция Live Shot, позволяющая сохранить несколько секунд изображения до его фиксации. Но популярность этому приложению принесли уникальные наборы эффектов, среди которых эффект вращение, цветовое тонирование, управление контрастность и обрезка видео.
Идея добавить в черно-белое изображение немного цвета далеко не нова. С появлением приложения Color Pop Effects процесс создания подобный иллюстраций стал намного проще. Приложение имеет достаточно мощный функционал, есть возможности для панорамирования и масштабирования, пользователь может использовать отмену и повтор, регулировать размер кисти и контролировать непрозрачность. Есть множество способов для точного окрашивания фрагментов иллюстрации, кроме того, созданным изображением можно поделиться с пользователями социальных сетей – картинку можно расшарить не выходя из приложения.
Как ясно из названия, приложение Fresco Paint Pro предназначено для создания цифровой живописи. Это один из лучших графических редакторов для рисования, который можно установить на смартфонах с ОС Android. Что есть в наличии: возможность создавать 4 слоя, есть 12 предустановленных кистей и 21 фильтр. Приложение позволяет получить пользователям реальный опыт рисования. Также дизайнеры могут совместно использовать изображения, которые они размещают в Facebook, Twitter или Dropbox.
Если дизайнер является новичком, но хочет больше знать о типографике и шрифтах, то ему стоит установить на своем смартфоне или планшете приложение Type:Reader. Это очень полезное приложение, которое сделает процесс обучения более интересным. На самом Type:Rider является игрой, которая помогает пользователю познакомиться с историей типографики, узнать много нового о шрифтах и различных символах.
Как создаётся дизайн мобильных приложений
150 тысяч новых приложений регистрируют в App Store и Google Play каждый месяц. Привлечь внимание пользователей и добиться коммерческого успеха помогает продуманный дизайн мобильных приложений. Так, согласно исследованию McKinsey, в компаниях с хорошим дизайном рост выручки больше на треть.
О том, какие знания и навыки нужны дизайнеру приложений, как создаётся мобильное приложение, что нужно учитывать при разработке, рассказывает Алексей Комаров, UX/UI-дизайнер в IBM и преподаватель Нетологии на курсе «Дизайнер мобильных приложений».
UX/UI-дизайнер в IBM
Дизайнер приложения отвечает за эмоции от использования продукта. Для реализации этой задачи дизайнер должен создавать не только привлекательный визуальный облик, но и уметь выяснять потребности пользователей с помощью исследований, составлять навигационную модель (как связаны экраны приложения), проектировать интерфейс (расставлять по важности иерархию компонентов).
Давайте разбираться с самого начала.
Что нужно знать мобильному дизайнеру
Колористика
— искусство сочетания цветов.
Например, вместе не рекомендуется использовать зелёный и красный — насыщенные цвета, которые как бы перекрикивают друг друга. Получается вырвиглазный интерфейс, отсутствует контрастность и объекты трудно различить на экране. Для несочетаемых цветов дизайнеры даже придумали определение «зелубой» (зелёный + голубой).
Для подбора цвета часто используют специальные палитры или цветовые круги — например, Material palette, Adobe Color.
Также можно брать на заметку палитры готовых продуктов. Например, в Америке существует определённый культ кроссовок, где их покупают не ради замены старой пары, а, скорее, с эстетической точки зрения. Поэтому некоторые экземпляры можно назвать источником вдохновения для дизайнеров, которые используют цветовые схемы кроссовок для своих продуктов.
Типографика
— умение оформлять текст при помощи набора и вёрстки.
По сути дизайн — это оформление контента, 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, схемы бизнес-процессов, типичные пользовательские пути и другое, — создают артефакты аналитики.
На основе вышеуказанных артефактов дизайнер принимает решения.
Также артефакты помогают управлять коммуникацией с бизнесом: чтобы каждую неделю не прилетали изменения, все бизнес-требования обговариваются и фиксируются. Это важно, чтобы не делать работу в стол и избежать бесконечных доработок.
Если каждую неделю приходят новые требования, то бизнес-заказчик не знает или не понимает, что на самом деле он хочет. А если нет чётких критериев приёмки, будет сложно показывать результат работы. Можно попасть в петлю непрекращающихся правок и постоянных переделок.
Вышеперечисленное — исследования, общение с бизнесом, аналитика — может сделать дизайнер, менеджер продукта или аналитик, если есть такой специалист в компании. Это зависит от компании и бюджета на проект.
Если есть выделенные аналитики, то зона ответственности между ними для целей разработки приложения может распределяться следующим образом:
Проектирование
По сути это создание скелета приложения: дизайнер понимает, где какая будет информация, раскидывает контент по экранам и определяет, сколько экранов будет в каждом пользовательском сценарии.
Чтобы проверить эту логику на практике, дизайнер собирает черновик приложения. Там он тестирует связку экранов, проверяет, что компоненты интерфейса расположены в правильном месте и понятно, как с ними взаимодействовать: что-то нужно нажать, потянуть, выделить или удалить.
На этом этапе важно не переходить в визуальный дизайн и не углубляться в вопросы из серии «какого цвета будет кнопка» или «какие сделать скругления у картинки».
Для проектирования чаще всего используют чёрно-белые прототипы — вайрфреймы, которые создаются в графическом редакторе.
Перед вайрфреймами некоторые создают бумажные прототипы — от руки делают эскиз будущего приложения на бумаге.
Бумажные прототипы подходят для быстрого обсуждения идей, чтобы проверить себя и синхронизироваться с командой перед тем, как приступить к работе в графическом редакторе.
Бумага и карандаш — такие же инструменты дизайнера, как и графический редактор.
Когда дизайнер продумывает процессы в приложении, сложно удержать всё в памяти в один момент времени — нужно фиксировать ход мысли. И в этом сложно полагаться на графические редакторы, которые заточены под определённые задачи — например, обработать фотографии или создать иллюстрации. К тому же, когда мы сразу работаем в графическом редакторе, мы вынуждены подстраиваться под его ограничения, то есть не мы управляем инструментом, а инструмент — нами.
Между идеей в голове и её реализацией получается много посредников: интерфейс графического редактора, экран монитора, клавиатура, мышка. А при работе с бумагой идея быстрее становится осязаемой.