Прототипы — отличный способ показать, как ваш продукт работает и взаимодействует с пользователем, даже на ранних стадиях разработки. Приложений для создания прототипов так много… Но поговорим же о моих любимых:
Я стараюсь не писать так, будто рекламирую эти продукты, но по-моему следующее приложение сведет на нет эти старания: я считаю, чтоAtomic(браузер) это новое открытие в сфере приложений для создания прототипов. И у меня есть причины так думать: Atomic позволяет вам запрограммировать логику предложения в прототипе. Что значит, что вы получите не просто прототип, который выглядит как будущее приложение, а который действует как приложение. Это трудно объяснить словами, так что если из всей статьи вы решите перейти только по одной ссылке — переходите по ссылке на Atomic. Это предложение стоит вашего внимания.
Следующий в списке — Flinto(Mac). Flinto позиционирует себя как смесь всего, но что в нем получается реально хорошо, так это анимации. Такие вещи как скроллинговые взаимодействия, сложные переходы и микровзаимодействия в Flinto получаются легко и быстро. Приложение также позволяет вставлять видео и GIF-ки. Но больше всего мне в Flinto нравится встроенный симулятор. Он реально быстрый и это самый близкий к продукту прототип, который я видел. Это прекрасный инструмент, если вам нужны точные анимации и взаимодействия.
Наконец-то, настало время для InVision(браузер). Я не фанат InVision, и я считаю, что они немножко чересчур тратятся на маркетинг, и недостаточно на поддержку продукта.
Но приложение отлично выполняет свою функцию, генерируя прототипы в HTML, которыми можно делиться и комментировать, а также модифицировать их прямо на ходу.
И хотя InVision, несомненно, заслуживает свое место в этом списке, в большинстве случаев, я предпочитаю Atomic. Если вы не хотите использовать Atomic и учитесь работать в InVision, сперва задумайтесь над использованием встроенных инструментов Figma илиSketch’s — оба варианта поддерживают основные кликабельные прототипы, но им не хватает таких функций, как скроллинг и продвинутая анимация. Но для базового прототипа этого должно быть достаточно.
Осталось несколько представителей тяжелой артиллерии, о которых я еще не писал, так что позвольте сказать пару слов:
Principle(Mac): Я нахожу Principle очень тяжелым в использовании, и действительно не понимаю, с чего вокруг него такая шумиха. Но программа очень популярна, так что наверное, тому есть причины.
Marvel(браузер): У меня мало опыта работы с Marvel, но это одно из немногих приложений в этом списке, которое можно использовать на ПК. И он интегрирует парочку крутых функций для сотрудничества.
Axure (Mac, ПК): Изначально я исключил Axure из этого списка, так как он слегка устарел. Но несколько людей в комментариях указали, что регулярно пользуются Axure, поэтому я решил оказать ему должное признание. Я процитирую комментарий от пользователяRobert Mion, который очень емко описывает Axure:
Это инструмент все-в-одном. Несколько больших компаний — которые поддерживают целый список программ — предлагают его в качестве инструмента для дизайнеров. К счастью Axure — как вы уже сказали — не уступает по возможностям другим инструментам, описанным выше… Стоит только стать продвинутым пользователем, и вы сможете создать практически любой прототип.
Подытоживая, возможно вы не будете его использовать, поскольку работаете в среде, где доступны другие инструменты, но это не повод недооценивать Axure.
Balsamiq(Apple 2, Windows XP): буду честен, долгое время я считал Balsamiq приложением с низкой точностью воспроизведения прототипов, хотя в нем имеются все основные ранее упоминаемые функции. К тому же экспортировать работу в другие приложения не получится.
Figma(браузер, ПК, Mac) определенно мой фаворит. В основном потому, что это инструмент для работы на ПК. А еще я обожаю инструмент “ручка” в Figma. Вроде мелочь, но рисовать очень удобно. А еще мне нравится, как Figma работает с внесенными изменениями. Вместо бесконечных диалоговых панелей и текстовых окон, Figma просто позволяет модифицировать слой и воспринимает внесенные изменения, как поправки. Это проще, чем в Sketch и позволяет вносить более сложные изменения. И к тому же, у Figma отличные инструменты для коллективной работы. Хотя, инструментами их и назвать-то трудно, поскольку это облачное приложение, достаточно просто открыть файл и начать работать. Каждый, кто имеет доступ к файлу, может видеть изменения вживую. Ах да, и я уже упоминал, что версия для одного пользователя у Figma бесплатная?
Sketch(Mac). Ни для кого не секрет, почему Sketch настолько популярен для экранной разработки. Когда Bohemian запустили продукт, на рынке попросту еще не было ничего подобного. Благодаря колоссальной поддержке плагинов и ресурсов, Sketch заслуженно остается королем UX ПО.
С недавних пор разработка Sketch ощутимо замедлилась. Последнее обновление принесло функцию создания прототипов, основанную на InVision, что собственно уводит вас к InVision. Более того, после стольких лет, Sketch все еще ограничен платформой Maс.
К счастью, Lunacy(ПК) от Icons8 умеет открывать файлы Sketch. Оно работает не идеально — я бы даже сказал так себе — но для работы сгодится. И у Lunacy есть общедоступны список запросов на функции, так что всегда можно посмотреть, что же появится следующим. Когда у Lunacy появится поддержка символов, он может стать действительно хорошей программой.
Adobe XD(Mac, ПК): Я всегда отношусь к продуктам Adobe с определенной долей скептицизма. И хотя некоторые из моих любимых программ из Adobe, такие как например Photoshop и After Effects, многие их новинки кажутся явно “сырыми” и требующими доработки. Adobe XD постепенно становится очень и очень хорошим инструментом — быстрым, с отличными функциями и дизайнерскими наборами. И программа также поддерживает сложные анимации и инструменты для создания прототипов, что не может не радовать. И что действительно важно, программа идеально импортирует файлы из других продуктов Adobe (и даже вполне сносно работает с импортами из Sketch).
Также стоит отметить, что Adobe XD поддерживает основные функции контроля версий через облако — Creative Cloud. И как было отмечено пользователем Hollvetica в комментариях, позволяет экспортировать файлы в Zeplin (сохраняя даже кликабельность прототипов). Я бы советовал использовать более узкоспециализированные инструменты, но и Adobe XD может оказаться полезным. Я недостаточно долго им пользовался, чтобы действительно что-то советовать, но попробовать программу стоит, особенно если вы уже пользователь Adobe Creative Cloud.
InVision Studio: Представьте себе Sketch, только с крутым маркетингом и практически полным отсутствием функций. Хотя это немного жестко — для новичка InVision Studio неплохо начали. Программа обещает вам все в одном флаконе. Но пока что оно просто не готово. Что ж, посмотрим, что будет дальше.
Итак, у вас есть прекрасная идея, ее разработка и подходящий дизайн. Замечательно! Неважно, работаете ли вы по найму, в студии дизайна, или в команде, следующим шагом станет продажа вашей идеи. Честно говоря, многие дизайнеры не особо-то волнуются об этом. Возможно, у вас есть кто-то, кто будет презентовать вашу идею вместо вас, или вы считаете, что продукт сам за себя все скажет. Но когда-нибудь у вас будет прекрасная идея, продать которую сможете только вы. Давайте же поговорим о том, как именно это сделать.
Для создания шумихи вокруг продукта я использую Keynote (Mac) от Apple. Небольшая подсказка от человека, работающего в корпорации: люди в бизнесе обожают слайды.
Keynote выделяется на фоне PowerPoint и Google Slides благодаря легким, но впечатляющим анимациям. Альтернативы: PowerPoint (ПК, Mac), Google Slides (браузер), Prezi (браузер)
Как и контроль версий, документация становится все более востребованным элементом в дизайнерской работе. Речь идет о записи всех важных деталей вашего дизайна, для отчетности или для других команд.
Для этого моя команда использует Confluenceот Atlassian. По сути это что-то внутренней Википедии, с продвинутыми функциями доступа. Дизайнеры могут добавлять пути клиента, бизнес команда — критерии, разработчики могут использовать все это, как ресурс для лучшего понимания логики и задач продукта.
Я не люблю Confluence. Это, наверное, самый нелюбимый мой продукт в этой статье, из-за неуклюжего интерфейса и запутанной навигации. Хотя надо признать, программа свою работу делает, и выполняет важную роль в рабочем процессе.
Было бы непростительным упущением не написать о моем любимом Coda.io(браузер).
Задача Coda состоит в том, чтобы заменить все ваши приложения для ведения документации одним, поддерживающим текстовые документы, формулы, таблицы, графики и тому подобное. Это приложение — мой фаворит для личных проектов. И когда оно выйдет за пределы бета-версии, я думаю, будет хитом.
Вместо того, чтобы предлагать альтернативы, я лишь скажу: документация очень важная часть командной работы. Она нужна для того, чтобы ваши идеи, мысли и планы продолжали жить, даже когда вы уже не будете над ними работать. И также это помогает избегать проблем при передаче продукта другим членам команды. Есть множество способов вести документацию, но главное в этом — действительно это делать.
Раз мы уже тут, просто упомяну несколько лучших приложений:
Overflow: Пока что я мало времени провел, работая с Overflow, но приложение выглядит очень многообещающим. Идея приложения в том, чтобы создать диаграмму пользовательского маршрута, которую потом можно презентовать или использовать в дальнейшей разработке.
Давайте под конец еще раз ненадолго вернемся к нашему старому доброму другу Zeplin. Есть несколько способов использования Zeplin, в зависимости от типа проекта, над которым вы работаете. Программа может пригодиться для создания руководства по стилю, или сохранения исходников. Как только вы начнете углубляться в работу, обнаружатся все новые и новые прелести этого приложения, такие, как возможность экспортировать отрывок кода. Подобные свойства позволяют существенно ускорить процесс разработки, поскольку разработчиками не нужно бегать за вами, в поисках нужных ресурсов.
Еще одно приложение, к которому я хотел бы вернутся, это InVision. Исполнение в InVision немного проще, чем в Zeplin — можно просто выделить объект или группу и InVision выдаст вам их свойства. Очень удобно так определять размеры, цвета и стиль текста.
Можно экспортировать исходники, правда, важно настроить экспортируемые файлы заранее (так же как и в Zeplin). InVision также поддерживает некоторые функции экспорта кода, но для исчерпывающего сравнения Zeplin и InVision в этом плане, вам лучше обратиться за консультацией к разработчику.
Avocode: Avocode заслуживает краткого упоминания, потому что поддерживает больше, чем просто Sketch; Avocode также поддерживает Figma, Adobe XD и Photoshop. И приложение создано для генерации кода на основе вашего дизайна. Мой опыт с Avocode весьма ограничен, но если вам нужно передать свой дизайн разработчику, пожалуй, стоит присмотреться к этому инструменту.
Вот и все! Надеюсь, вы узнали для себя что-то новое, что пригодится вам в работе. Еще одно последнее замечание — многие из этих инструментов становятся реально дорогими. Если вы знаете более дешевые альтернативы, я был бы рад узнать об этом.
Если я что-то упустил — дайте знать. Я большой любитель хороших инструментов для работы, поэтому всегда рад новым пунктам в моем списке.
0 комментариев