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

Этот пост изменит ваш стандартный процесс прототипирования в Principle к лучшему.

Организация — это ключ ко всему

Ключом к приятному опыту работы в Principle является организация. И начинается она с вашего файла Sketch. Если вы не организовались правильно перед синхронизацией Sketch-файла с приложением, ждите кошмара вместо нормальной работы.

Как вы должны это сделать.

О важности организации и модульности файлов дизайна написано немало, так намного быстрее и удобнее работается.

Я сам использую организацию, очень похожую на то, как упорядочивают свою работу программисты. Ранее я изучил синтаксис Block Element Modifier (BEM), когда раньше занимался программированием, и этот подход значительно изменил мою работу.

Синтаксис BEM (Блок, элемент, модификатор) можно разбить на простые составные части:

Название-блока_название-элемента_название модификатора

Если по-русски, то это выглядит так:

Человек

Человек_рука

Человек_рука_вправо

человек_рука_влево

Если вы посмотрите на мои артборды и группы/слои, вы увидите, что они следуют этому синтаксису, например:

Название-артборда

Название-артборда_модификатор

Группы-слои также называются по этому принципу:

Название-модуля

Название-модуля_название-элемента

Название-модуля_название-элемента_название модификатора

Я делаю так по нескольким причинам:

  1. Легко найти все, что нужно, и следовать сценарию приложения.
  2. Мои дизайны модульно структурированы, что позволяет мне мгновенно каскадировать изменения, экспоненциально увеличивая скорость итераций.
  3. Когда дело доходит до передачи дизайна кому-то, файл структурирован так, что его легко понять без лишних манипуляций.

СКАЧАТЬ SKETCH-ФАЙЛ

Базовый принцип

Если вы хотите, можете использовать Principle, как использовали бы InVision или любой другой похожий продукт — реализуя однокликовые взаимодействия на основе состояний. Это не лучший способ использования Principle, но если нужно сварганить прототип по-быстрому, это самый удачный вариант.

mobile app

Достичь этого можно просто экспортируя каждое состояние интерфейса в PNG, и затем добавляя невидимые слои поверх ваших представлений, чтобы они работали как хот-споты.

Самый важный момент — вы не переключаете непрозрачность слоя до нуля, вы доводите непрозрачность до нуля в селекторе цветов. Если вы выключите непрозрачность до 0 в настройках, кнопка станет невидимой и некликабельной.

прозрачность в principle

После того, как все хот-споты спрятаны, вам нужно всего лишь соединить экраны, и получится кликабельный прототип!

СКАЧАТЬ БАЗОВЫЙ PRD-ФАЙЛ PRINCIPLE

Principle для профессионалов

Создание более детального, сложного прототипа в Principle может быть более трудоемким. И тут на помощь приходит правильное расслоение и нейминг.

principle рабочая область

Вы уже наверняка заметили и без меня, что состояния, которые видны в моем файле Sketch, не совпадают с теми, что есть в моем файле Principle.

И на это есть своя причина, зарытая в анимации.

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

principle слои

В примере в слое demo-shape нет радиуса границ, заливка оттенка hex #FA5367 и координаты (70, 500) в State 1 анимации (первый кадр). В State 2 демо-фигура уже идет с радиусом границ 70, заливкой hex #2B96FE и координатами (190, 270) на экране.

Между состояниями это будет выглядеть примерно так:

principle анимация переходом из состояния в соятояние

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

Principle — это инструмент для прототипирования на основе состояний, которые использует линейное перемещение для передвижения групп и слоев на основе их названий, которые вы задаете, выбранных вами атрибутов для каждого состояния, а также настроек драйвера или анимации для каждого взаимодействия.

При импорте без определения групп/слоев, Principle задаст эти имена за вас. Эта автоматизация ведет к конфликтам названий групп/слоев между состояниями, что и приводит в итоге к корявым анимациям.

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

Вот что на самом деле происходит под капотом прототипов Principle, и почему вы увидите столько разных слоев, не вмещающихся в артборд/рабочее окно в моих файлах Principle:

организация слоев в principle

Как вы видите, клавиатура доступна для каждого состояния приложения, но показывается в рабочем окне только по необходимости, как и кнопка ‘Log Out'.

Если клавиатура и кнопка не были бы доступны на каждом состоянии, программа бы не распознала их переход, и они бы появлялись гораздо быстрее — по ощущениям было бы слишком внезапно или выглядело глюком.

СКАЧАТЬ НЕАНИМИРОВАННЫЙ PRD-ФАЙЛ

СКАЧАТЬ АНИМИРОВАННЫЙ PRD ФАЙЛ

Principle для экспертов

После того, как вы освоите теоретические и практические основы, как все движется в Principle, программа становится больше похожей на игру по взлому ощущений. Есть потрясающие прототипы и анимации Principle, которые смотрятся действительно красиво, при этом не требуют огромных усилий на разработку. Все они основаны на линейном и вращательном движениях, а также креативном расслоении графики.

Мультимедиа

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

principle мультимедиа

Эта опция выведет ваш прототип на новый уровень, особенно если ваш продукт ориентирован на видео-контент.

СКАЧАТЬ ИСТОЧНИК

Декоративные переходы

Хотя Principle — это не та программа, в которой обычно создают дизайны, вы можете использовать векторные исходники, созданные в других программах, для создания красивых эффектов с помощью небольшого взлома системы.

декоративные переходы в principle

В этом демо векторные исходники движутся на экране линейно. Этот эффект стал возможен благодаря креативной анимации и наслоению.

СКАЧАТЬ ИСТОЧНИК

Нелинейное движение

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

нелинейное движение principle

Посмотрите примеры работ в Dribbble-аккаунте Jardson Almeida

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

СКАЧАТЬ ИСХОДНИК

Асинхронная анимация

Как и несколько последних анимаций, эта анимация выглядит намного более сложной, чем является на самом деле.

асинхронная анимация

Больше примеров на Dribble-аккаунте Mario Šimić

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

СКАЧАТЬ ИСТОЧНИК

Интерактивное движение

Движение, при котором множество фрагментов движутся с разными скоростями и/или в разных направлениях на основе взаимодействий пользователя с одним слоем/группой обычно называется Драйвер.

интерективное движение principle

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

СКАЧАТЬ ИСТОЧНИК

Как далеко может зайти креатив?

Надеюсь, что теперь эта программа кажется вам намного более доступной. После небольшой практики с Principle вы будете быстро расти в прототипировании. Он действительно фокусируется на наиболее важных основах.

Если у вас возникли вопросы, или вы хотите поделиться своим опытом, пишите комментарии, обсудим это вместе. Присылайте примеры своих работ в Principle!

Для вдохновения посмотрите репозиторий Principle.
Спасибо за чтение!