Лого vc.ru

Инструмент: Прототипирование интерфейсов при помощи Floid

Инструмент: Прототипирование интерфейсов при помощи Floid

Менторы рубрики «Интерфейсы» на 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 — это прекрасный инструмент для прототипирования в том случае, если вы любите боль и страдания.

Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

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

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

0

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

0

Здравствуйте!
Про Flinto я уже писал. Вы можете прочесть обзор здесь: yalantis.com/blog/how-can-you-use-flinto-to-create-cool-interactive-prototypes/
Также там есть обзоры Principle и Pixate от наших дизайнеров.
Principle: 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/

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

0

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Актуальная Птица

у соседа на заборе тоже написано :)
исполнятся одни желания, появятся другие
а если желаний нет то вы уже почти святой.

«Добро пожаловать в 2030 год»: член датского парламента о счастливой жизни без приватности и личных вещей
0
Kirill Nikolaev

Да тут та же самая проблема, как на фрилансе. Смотрим портфель, смотрим квалификацию.
Заплатили за шлак - пишем в ТП.

Bramio — поиск экспертов и решение задач с помощью видеозвонков
0
Kirill Nikolaev

Короче, вот:
1. Я зарегистрировался. Почему-то смутило, что в блоке "номер телефона", на вкладке "верификация" номер телефона отображался, как верифицированный. Хотя я его только лишь ввёл.
2. Ребята, пожалуйста, UX, UX, UX в личном кабинете.
3. А где работа-то? Одна заявка двухмесячной давности. Или я не вовремя зашёл?
4. Деньги через пейр. Только пейр. Вы серьёзно? В 2016м? А что не онли догекоины? Я честно создал второй акк, чтобы потестить, как происходит сам "процесс", но, к сожалению, после составления контакта баланс я так и не смог пополнить, хотя в пейре я всё-таки зарегистрировался (ну за что)
5. Опять же, классификаторы и рубрикаторы очень надо адекватные делать. Очень. Надо.

Резюмирую (очень субъективно):
Очень сыро, но задатки хорошие.
Самая боль - это ux и биллинг. Я понимаю, что вы можете заставлять пройти 9 кругов ада, чтобы вывести деньги. Но дайте мне, чёрт возьми, возможность их туда завести так, как мне удобно.

Bramio — поиск экспертов и решение задач с помощью видеозвонков
0
Andre Vlasov

Эцсамое. Во первых Amy Tunick это женщина, а во вторых ник fuck Jerry - это не "переспать с Джерри", а "ну его Джерри ***** (на половой член)". Причём там Под Джерри имеется в виду комик Джерри Сайнфелд. Ну и ещё, beigeCardigan это вроде его девушка. А в остальном все верно. Спасибо, пожалуйста.

«Брендам должно быть комфортно»: как американский блогер под псевдонимом FuckJerry завоевал популярность рекламодателей
0
Слава Діонісьєв

К роскомдозору стоит очередь

Роскомнадзор заявил об отсутствии претензий к Netflix из-за «непопулярности сервиса» в России
0
Показать еще