Инструмент: Прототипирование интерфейсов при помощи Floid Статьи редакции

Обзор дизайнера Yalantis Ильи Прукко

Менторы рубрики «Интерфейсы» на vc.ru продолжают публиковать кейсы компаний и инструменты, которые будут полезны представителям индустрии.

Сегодня в выпуске — обзор инструмента для протипирования интерфейсов Floid, подготовленный дизайнером компании-разработчика приложений Yalantis Ильёй Прукко.

Будучи дизайнером, я рад каждому новому инструменту для прототипирования. Они помогают дизайнерам лучше понимать поведение приложений, и вообще призваны делать нашу жизнь легче.

Я уже работал с Pixate, Flinto и Principle, поэтому, узнав о вышедшем в прошлом месяце Floid, я поспешил опробовать и этот инструмент. Однако, мой пыл быстро поутих.

Импорт файлов и создание нового документа

Итак, когда вы откроете Floid, вы увидите следующее:

Есть два пути: импортировать дизайн из Sketch или Photoshop или создать новый документ. Импорт работает довольно странно, Floid импортирует только те файлы из упомянутых программ, которые были предварительно сгруппированны.

Так что, если все слои в артборде будут в группе, то Floid импортирует весь артборд как один PNG. Если же вы хотите, чтобы все было отдельно, то каждый слой нужно запихивать в отдельную группу.

Также Floid не создает отдельных скринов для ваших артбордов, вместо этого все артборды будут свалены в кучу в одном скрине.

Но есть еще и второй путь. Новый документ.

Создание нового документа хорошо тем, что вы можете выбрать нужный вам девайс. Как Android, так и iOS.

После того, как вы создали традиционный скриншот для iPhone 6, вы можете поместить туда прямоугольник, кружочек или картинку.

Но прямоугольник не обычный. Вы не сможете пропорционально менять размер прямоугольника с зажатой клавишей Shift, как вы это делаете в Sketch, Photoshop и во всех других программах. Это ведь слишком просто. Во Floid, если вам вдруг захотелось пропорционально изменить размер объекта, нужно каждый раз нажимать маленькую иконку замочка. И только когда замочек закрыт, вы сможете пропорционально поменять размер. Каждый раз.

Совсем другая история с кружочком. Вы не сможете растянуть кружочек, как вам хочется, даже если замочек будет открыт. Это просто невозможно. Нужно только задавать параметры в «Инспекторе». Все это не такие уж и проблемы, но они крайне раздражают. А дизайнерам нельзя раздражаться.

Как я уже говорил, мне не очень нравится, как Floid импортирует файлы. Поэтому я сделал обычную нарезку. А потом два часа раставлял все элементы интерфейса по своим местам.

Собственно, прототипирование

После того, как вы все красиво расставили, можно начинать прототипировать. Нужно выбрать слой, с которого вы хотите начать, а затем выбрать жест.

После того, как вы выбрали жест, например, Touch, вы попадаете в редактор (Edit mode). Также для этого есть сочетание клавиш Cmd+E, и это киллер-фича Floid.

Edit mode достаточно простой в использовании, если у вас один скрин и несколько прямоугольников. Но если вы хотите сделать прототип из нескольких экранов с кучей слоев, то готовьтесь страдать. Очень сложно понять, где какой слой находится, в какой группе, нужно ли вообще создавать отдельную группу, чтобы заанимаровать слой, или нет.

И все это при том, что в «Редакторе» вы не видете координаты слоя, потому что «Инспектор» исчезает. Так что это просто сложно — сложно понять, как это работает.

Возможно, если бы я потратил целую неделю, я бы понял, как оно работает. Но это ведь просто инструмент для прототипирования — люди не должны тратить неделю на его изучение.

После того, как вы как-то создали простенькую анимацию, вам наверняка захочется посмотреть, как она будет работать. Для этого есть функция Preview. Кстати, достаточно неплохо работает. Серьезно.

Запись анимации

Также вы можете сделать видео или GIF со своей анимацией.

Запись работает хорошо, и ее качество тоже ничего. Но когда вы захотите выйти из экрана записи, то вы попадете в Preview. А если вы захотите выйти из Preview, то вы опять попадете на экран записи.

It's a trap!

Будьте бдительны с записью видео во Floid: чтобы выйти, вам понадобится закрывать всю программу. И если вы не догадались предварительно сохранить свои достижения, то вам придется переделывать все заново. Прямо как это делал я.

Заключение

Справедливости ради: я понимаю, что инструмент только появился, поэтому я надеюсь, что ребята из Floid учтут все замечания коммюнити и внесут нужные коррективы, чтобы сделать продукт более дружелюбным.

Но пока я потратил два дня на простенький прототип, и даже не совсем осознаю, как его закончил. Поэтому, все, что могу сказать: Floid — это прекрасный инструмент для прототипирования в том случае, если вы любите боль и страдания.

{ "author_name": "Филипп Концаренко", "author_type": "editor", "tags": ["\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435_\u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u043e\u0432","\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430_\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432","\u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435","\u043e\u0431\u0437\u043e\u0440_\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430","\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d","floid"], "comments": 6, "likes": 12, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 11730, "is_wide": true, "is_ugc": false, "date": "Tue, 10 Nov 2015 18:29:34 +0300", "is_special": false }
0
6 комментариев
Популярные
По порядку
Написать комментарий...

Спасибо за обзор! Последнее время подобных и близких по смыслу инструментов развелось невменяемое количество, и это, с одной стороны, радует (понятно почему), но с другой - почти все они оказываются неюзабельными или бесполезными.
Не поделитесь своим опытом использования упомянутых в статье Pixate, Flinto и Principle?

4

У всех есть свои плюсы и минусы, мы в Ялантисе все перепробовали, мне лично по-душе Principle, но и но не без ограничений. Но они его потихоньку обновляют.

0

Pixate годная тема. Установил на машину и работаешь. Для деталей идеальна. Для прототипирования тех же wireframe отлично подходит онлайн инструмент marvelapp.com

0

Здравствуйте!
Про Flinto я уже писал. Вы можете прочесть обзор здесь: https://yalantis.com/blog/how-can-you-use-flinto-to-create-cool-interactive-prototypes/
Также там есть обзоры Principle и Pixate от наших дизайнеров.
Principle: https://yalantis.com/blog/why-principle-is-the-simplest-tool-for-prototyping-interactive-user-interfaces/
Pixate:https://yalantis.com/blog/koloda-tinder-like-animation-version-2-prototyping-in-pixate-and-development-in-swift/

1

А activity flow можно построить?

0
Читать все 6 комментариев
Новые законы в области недвижимости

С 1 октября 2021 года вступают в силу новые законы в области недвижимости.

Неочевидные преимущества коллективного инвестирования

Почему инвестирование в паи открытых паевых инвестиционных фондов может быть интересно не только начинающим, но и опытным инвесторам.

Шпаргалка для инвестора: как инвестировать в облигации иностранных эмитентов

Рассказываем, что такое еврооблигации или евробонды, каких видов они бывают, и что нужно знать про них инвестору.

Лучшие стартапы в «Трибуне» с 11 по 17 октября 2021 года

Подборка лучших проектов по рейтингу подготовлена каналом @vchunt, где каждую неделю появляется топ-3 стартапа из «Трибуны». Подписывайтесь, чтобы поддержать русскоязычных фаундеров и не пропустить отличные продукты!

«Битрикс24» заявил о двукратном росте количества платных клиентов в Италии. Включая Мэрию Венеции

Период с июня 2020 года по июнь 2021 года оказался одним из самых сложных для экономики Италии. В этот отрезок количество компаний-клиентов, которые пользовались платными тарифами нашего сервиса, выросло в 2 раза. В их числе - мэрия Венеции

«Тинькофф» запустит новое направление для выхода клиентов на маркетплейсы Статьи редакции

Направление возглавит бывший гендиректор eBay на глобальных развивающихся рынках Илья Кретов.

Совладелец производителя сырков «Б.Ю. Александров» потребовал через суд вернуть 85% компании Статьи редакции

Юрий Изачик передал большую часть своей доли топ-менеджерам «после заблуждения» и «в тяжёлом психическом состоянии».

Фильмы на YouTube и локальные турниры: как киберспорту удержать интерес после победы россиян в главном турнире по Dota 2 Статьи редакции

Российская команда выиграла The International впервые — эксперты рассказывают, как не упустить момент.

«Авито» для юр. лиц просит загрузить паспортные данные физ. лица

По порядку: работаю маркетологом в компании, занимающейся монтажом видеонаблюдения, СКУД и т.д. Компания с опытом, но по местному рынку малоизвестная. Логичная мысль: разместить объявление с нашими услугами на Авито (площадка большая, известная и т.д.) и попробовать задействовать все их услуги по продвижению (посмотреть, как это все будет…

Илья Кретов покидает пост генерального директора eBay на глобальных развивающихся рынках

Илья Кретов покидает пост генерального директора eBay на глобальных развивающихся рынках и переходит в Тинькофф E-commerce на должность директора по электронной коммерции.

null