Лого 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

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

Сейчас обсуждают
Azat Shauen

Ему не интересно править одной страной, играя в рамках прописанных правил. Он хочет власти над всем миром и создавать свои правила.

Марк Цукерберг объявил о нежелании выдвигаться на пост президента США
0
Mike Kosulin

Сначала шутишь в комментариях, а потом без VPN смотришь только рутьюб.

Телеканал «Пятница» добился «вечной» блокировки видеохостинга Dailymotion в России
0
Глеб Горохов
Versta

Хм, обнаружил на VC вот такое: vc.ru/p/30-bezumnyih-otzyivov-v-google-play

По теме же, где рекомендации?) Стыдно?

Apple позволит разработчикам отвечать на отзывы в App Store
0
John Doe

Самое очевидное что на ум приходит это если будет значимая посещаемость, найдутся и те кто захочет продвинуть(не бесплатно) свои места в сервисе. Впрочем какой вариант монетизации видит автор я не знаю

GoWithKid — сервис по поиску мест для отдыха с ребёнком
0
Эдгар Китаев

Что-то вроде 👽

Президент «Дикси» и два топ-менеджера покинули компанию после падения выручки ритейлера
0
Показать еще