Principle что это за программа
Principle: инструмент для прототипирования, который вы должны попробовать
От переводчика
Principle — приложение для Mac OS, которое позволяет в два счета создать анимацию элементов пользовательского интерфейса и сгенерировать его интерактивный прототип. Будь то многоэкранное приложение или просто придуманный вами контрол, так просто и быстро реализовать это раньше не позволял ни один сервис. Бенжамин Бергер — бета-тестер ранней версии Principle, описал свой опыт в статье на Medium, где рассказал о первых впечатлениях и привел пару наглядных примеров использования.
———
Вот уже 5 месяцев прошло с тех пор как Даниель Купер показал мне его новый продукт. Тогда он дал мне потрясающую возможность стать бета-тестером ранней версии Principe. До этого я долгое врем искал способ, который бы дал мне возможность быстро оживить дизайн и при этом иметь возможность взаимодействовать с ним.
Я работал с After Effects
Это требовало серьезных временных затрат, выглядело не очень удобно и, по большому счету, было вообще нереально. Я потратил огромное количество времени, работая с кривыми, чтобы добиться идеально гладкой анимации, которую разработчики никогда бы не смогли воспроизвести.
Я пробовал Pixate и Atomic.io
Но так и не разобрался с ними, потому что их интерфейс не очень привычен. Они требуют некоторой практики и времени (которого у меня нет), чтобы понять как они работают. Так что я удалил их, впустую потратив свой 30-дневный триал.
У меня не пошло с Framer.js
Я не очень хорош в программировании. Мне кажется, если ты можешь написать код, чтобы создать прототип, тогда ты способен выучить реальный язык и потратить некоторое время на самостоятельную разработку. (Я преувеличиваю здесь, я знаю, что Framer имеет свои фишки, но все же.)
Origami слишком большой, чтобы разобраться в нем
Многие дизайнеры считают его крутым. И я согласен, это выглядит очень мощно и эффективно, особенно большое комьюнити, где люди делятся своими знаниями. Но сама среда не очень близка мне, поэтому я не стал продолжать.
Proto.io потерял меня из-за окна предварительного просмотра
Это очень мощный инструмент, но тот факт, что вам нужно сохранять и перезагружать ваш прототип всякий раз, как вы внесли изменения, стал решающим моментом не в его пользу. Хотя у него есть действительно интересные возможности.
Изучать новые продукты бывает немного лень, не так ли?
Я предпочитаю работать с визуальными средами. И зачастую, использование разных приложений становится контрпродуктивно, если они не используют одни и те же концепции, названия и элементы интерфейса. (Я говорю это тебе Adobe. Как может клавиша T в AE использоваться не для инструмента Текст?)
Мой священный грааль называется Principle
Этот продукт — умный микс между Sketch, Keynote, Flash и After Effects (плюс некоторые крутые возможности для интерактивных прототипов). Что меня поразило в первый момент, все кажется очень знакомым. Если вы работали со Sketch, вы без труда разберетесь с Principle: инспектор, список слоев, артборды.
Как это работает?
1. Вы создаете или импортируете ваш набор элементов интерфейса.
2. Выбираете элемент и способ взаимодействия.
Здесь выделен большой синий прямоугольник. Я выбираю способ взаимодействия — тап по элементу.
3. Автоматически создается копия вашего артборда, где вы можете изменить любой компонент.
4. Для каждого изменения автоматически будут сгенерированы транзишены, и вы уже сможете поиграть со своим прототипом.
Это позволяет чертовски быстро и просто создавать сложные переходы.
Чем так хороши артборды в процессе прототипирования?
Однажды я прочитал, что анимация интерфейса подобна хореографии. Холст это сцена, контролы — танцоры. Любая анимация должна иметь смысл. Артборды здесь подходят лучше всего, так как у вас есть возможность видеть каждый экран и каждое состояние вашего приложения, а также то, как элементы интерфейса будут реагировать на него.
Ключевые возможности
Простота создания перехода от одного состояния к другому — это для меня главное в подобного рода приложениях. Вместе с этим в Principle есть и другие возможности, которые поднимут ваш прототип на новый уровень.
Интерактивность
Этот инструмент был разработан в основном для устройств с тач экранами, поэтому он позволяет определить множество типов взаимодействия: тап, драгэнддроп, скролл, долгое нажатие.
Панель анимации
Что общего имеют все статьи об анимации? Они настоятельно рекомендуют никогда не делать анимацию линейной, потому что ее не существует в реальном мире. И здесь Principle снова на высоте. По умолчанию к каждой анимации будет применяться easy-in/easy-out эффект, который вы можете легко перенастроить самостоятельно.
Также эта панель позволяет изменить продолжительность анимации, выбрать какой элемент будет проанимирован первым и создать основные необходимые транзишены.
Панель анимации расположена в самом низу экрана, там вы можете контролировать каждую анимацию (совсем как в After Effects, только в 10 раз быстрее).
Это превью анимации с различными настройками.
Вот как это работает.
1. Подготавливаем элементы.
Фиолетовый прямоугольник находится за пределами артборда и если потянуть его вниз, перекрывающий слой будет постепенно появляться.
2. Откроем драйвер-панель (сверху) и выберем прямоугольник. Это наш будущий перекрывающий слой. Сейчас он полностью прозрачен.
3. Добавим ключевые кадры прозрачности на этот слой, фиолетовый прямоугольник переместим ниже и сделаем перекрывающий слой более темным.
Теперь прототип полностью готов. Тут нужна практика, но если вы однажды попробовали это…
Кое-что еще
Конечно, есть множество более мелких функций, таких как: маски, текст, предустановки, артборды… И еще, для вас дриббблеры, есть автоматический экспорт анимаций в GIF, чтобы поделиться ими с друзьями-дизайнерами.
Инструкция: разработка прототипов приложений при помощи Sketch и Principle
Перевод заметки дизайнера Google
Дизайнерское сообщество Sketchapp подготовило перевод заметки дизайнера Google Джо Тоскано о том, как организовать работу по созданию макетов в Sketch и приложении для прототипирования Principle.
Вы, возможно, уже работали в Principle ранее и успели его возненавидеть, потому что далеко не сразу понятно, как создать в нем модульный организованный рабочий процесс. Вы наверняка не понимали, почему какие-то слои-призраки летают там, где вы их никогда не создавали.
Эта заметка изменит ваш стандартный процесс прототипирования в Principle к лучшему.
Организация — это ключ ко всему
Ключом к приятному опыту работы в Principle является организация. И начинается она с вашего файла Sketch. Если вы не организовались правильно перед синхронизацией Sketch-файла с приложением, ждите кошмара вместо нормальной работы.
Как вы должны это сделать
О важности организации и модульности файлов дизайна написано немало, так намного быстрее и удобнее работается.
Я сам использую организацию очень похожую на то, как упорядочивают свою работу программисты. Ранее я изучил синтаксис Block Element Modifier (BEM), когда раньше занимался программированием, и этот подход значительно изменил мою работу.
Синтаксис BEM (Блок, элемент, модификатор) можно разбить на простые составные части:
Если по-русски, то это выглядит так:
Если вы посмотрите на мои артборды и группы или слои, вы увидите, что они следуют этому синтаксису, например:
Группы-слои также называются по этому принципу:
Я делаю так по нескольким причинам:
Скачать Sketch-файл по ссылке.
Базовый принцип
Если вы хотите, то можете использовать Principle как использовали бы InVision или любой другой похожий продукт — реализуя однокликовые взаимодействия на основе состояний. Это не лучший способ использования Principle, но если нужно сделать прототип по-быстрому, то это самый удачный вариант.
Достичь этого можно, просто экспортируя каждое состояние интерфейса в PNG и затем добавляя невидимые слои поверх ваших представлений, чтобы они работали как хот-споты.
Самый важный момент — вы не переключаете непрозрачность слоя до нуля, вы доводите непрозрачность до нуля в селекторе цветов. Если вы выключите непрозрачность до нуля в настройках, кнопка станет невидимой и некликабельной.
После того, как все хот-споты спрятаны, вам нужно всего лишь соединить экраны, и получится кликабельный прототип.
Скачать базовый PDF-файл Principle по ссылке.
Principle для профессионалов
Создание более детального, сложного прототипа в Principle может быть более трудоемким. И тут на помощь приходит правильное расслоение и нейминг.
Вы уже наверняка заметили и без меня, что состояния, которые видны в моем файле Sketch, не совпадают с теми, что есть в моем файле Principle.
И на это есть своя причина, зарытая в анимации. В Principle анимация основана на состояниях. То есть группы и слои движутся на основе их состояния на каждом артборде.
В примере в слое demo-shape нет радиуса границ, заливка оттенка hex #FA5367 и координаты (70, 500) в State 1 анимации (первый кадр). В State 2 демофигура уже идет с радиусом границ 70, заливкой hex #2B96FE и координатами (190, 270) на экране.
Между состояниями это будет выглядеть примерно так.
Если у вас получаются неказистые анимации, скорее всего, причина в том, что группы и слои не были названы корректно перед импортом.
Principle — это инструмент для прототипирования на основе состояний, который использует линейное перемещение для передвижения групп и слоев на основе их названий, которые вы задаете, выбранных вами атрибутов для каждого состояния, а также настроек драйвера или анимации для каждого взаимодействия
При импорте без определения групп или слоев Principle задаст эти имена за вас. Эта автоматизация ведет к конфликтам названий групп или слоев между состояниями, что и приводит в итоге к корявым анимациям.
Чтобы анимации были плавные, нужно привести названия групп или слоев в полное соответствие, а также убедиться, что они доступны на каждом экране, с которым вы взаимодействуете — включая состояния, где эти группы или слои должны быть невидимы.
Вот, что на самом деле происходит под капотом прототипов Principle и почему вы увидите столько разных слоев, не вмещающихся в артборд или рабочее окно в моих файлах Principle.
Как вы видите, клавиатура доступна для каждого состояния приложения, но показывается в рабочем окне только по необходимости, как и кнопка Log Out.
Если клавиатура и кнопка не были бы доступны на каждом состоянии, программа бы не распознала их переход, и они бы появлялись гораздо быстрее — по ощущениям было бы слишком внезапно или выглядело глюком.
Скачать неанимированный PDF-файл по ссылке.
Скачать анимированный PDF-файл по ссылке.
Principle для экспертов
После того, как вы освоите теоретические и практические основы, как все движется в Principle, программа становится больше похожей на игру по взлому ощущений. Есть потрясающие прототипы и анимации Principle, которые смотрятся действительно красиво, при этом не требуют огромных усилий на разработку. Все они основаны на линейном и вращательном движениях, а также креативном расслоении графики.
Мультимедиа
Одним из наиболее мощных аспектов Principle является возможность встройки видео, чего до сих пор не позволяют многие другие инструменты прототипирования.
Эта опция выведет ваш прототип на новый уровень, особенно если ваш продукт ориентирован на видео-контент.
Скачать источник по ссылке.
Декоративные переходы
Хотя Principle — это не та программа, в которой обычно создают дизайны, вы можете использовать векторные исходники, созданные в других программах, для создания красивых эффектов с помощью небольшого взлома системы.
В этом демо векторные исходники движутся на экране линейно. Этот эффект стал возможен благодаря креативной анимации и наслоению.
Скачать источник по ссылке.
Нелинейное движение
Ощущение нелинейности в движении достигается за счет креативного наслоения. Нелинейные исходники сами по себе создаются в векторных редакторах, а затем импортируются в Principle для анимирования.
Посмотрите примеры работ в Dribbble-аккаунте Jardson Almeida
Если вы откроете исходник этого файла, то увидите, что все движение в этом прототипе создано с помощью линейной и вращательной анимации, а иллюзия нелинейности обеспечена креативным наслоением.
Скачать исходник по ссылке.
Асинхронная анимация
Как и несколько последних анимаций, эта анимация выглядит намного более сложной, чем является на самом деле.
Больше примеров на Dribble-аккаунте Mario Šimić
Если вы откроете исходник и поиграетесь с ним, вы увидите, что анимация — это невероятно креативный плод вашего восприятия через комбинацию наслаивания и асинхронных линейных движений.
Скачать источник по ссылке.
Интерактивное движение
Движение, при котором множество фрагментов движутся с разными скоростями или в разных направлениях на основе взаимодействий пользователя с одним слоем или группой обычно называется «Драйвер».
Драйверы — это немного глубже, чем простая анимация между состояниями, но они не так сложны в сборке, как кажется. Вы можете ознакомиться с драйверами детальнее в документации Principle, а также в отличном видео-уроке.
Скачать источник по ссылке.
Как далеко может зайти креатив
Надеюсь, что теперь эта программа кажется вам намного более доступной. После небольшой практики с Principle вы будете быстро расти в прототипировании. Он действительно фокусируется на наиболее важных основах. Для вдохновения посмотрите репозиторий Principle.
Principle что это за программа
Я часто сталкиваюсь с ситуациями, когда люди пытаются сложно заанимировать простые вещи. При этом они тратят на это кучу драгоценного времени, но взамен получают только головную боль. Я много об этом думал и даже провел вполне успешный мастер-класс по анимации в Principle в Прожекторе, на котором протестировал нижеприведенные идеи.
В этом тексте я не буду говорить о таких очевидных вещах, как «нужно сначала распланировать свою анимацию» и т.д. Описанные ниже принципы действительно помогают не только мне, поэтому я хочу поделиться с вами и надеюсь получить фидбек.
Кратко о том, как работает Principle
В первую очередь, я хочу объяснить, как работает самый простой путь анимации в Principle (о drivers говорить не буду, да и эту часть можно пропустить, если вы знаете, что и как):
Конечно, для этого нужно соблюдать некоторые условия. Например, для работы анимации необходимо, чтобы объект присутствовал на обоих арт-бордах и носил одинаковое название, тогда изменения в его свойствах станут доступны для анимирования. В противном случае, объекты просто будут мгновенно появляться и исчезать.
Например, чтобы превратить круг в квадрат, нам нужно:
Экран с настройками, которые позволят превратить круг в квадрат и обратно.
Все эти манипуляции можно провести и с любыми другими характеристиками объекта. Например: прозрачность, размер, расположение, цвет и другие.
Экран, в котором меняются различные настройки.
И еще одна важная вещь: чтобы гладко что-то анимировать, нужно подготовить движение на предыдущем экране. Опять же, объект должен присутствовать на обоих экранах (даже если он невидим на одном из них), а разница между ними будет анимирована. Позже я приведу пример.
Принцип 1: не использовать «импорт из Sketch»
Итак, вспомним все вышесказанное. Что нам нужно сделать, чтобы, например, анимировать открытие компактного плеера Apple Music при нажатии на трек?
Как минимум, какой-нибудь симпатичный бесплатный UI-кит iOS для Sketch. Я предпочитаю этот.
Арт-борд с компактным плеером Apple Music из UI-кита.
Что теперь с этим делать? Для начала, экран с плеером можно вынести на отдельную страницу, чтобы нам не мешали остальные экраны. Сейчас мы переходим к самому интересному. Какое следующее действие люди совершают чаще всего?
Судя по моему опыту, большинство пользователей нажимает кнопку «Импорт из Sketch». И после этого, как правило, пытаются упорядочить и заставить работать все слои, которые появились у них в Principle.
Хаос из слоев после импорта из Sketch.
Я предлагаю не использовать импорт из Sketch. По крайней мере, пока вы не знаете точно, зачем он вам нужен или не знакомы с документацией Principle по части импорта.
Как по мне, более простым способом будет распланировать свою анимацию и экспортировать из Sketch только необходимые группы как *.png. Даже если сделать это неправильно, их всегда можно заменить или обновить.
Например, чтобы анимировать простой скролл лендинга, нам не нужно импортировать все его составляющие. Мы можем экспортировать только один *.png в нужном качестве, который будет легко заанимировать.
Чтобы анимировать открытие плеера Apple Music, нам не нужны все составляющие экрана. Нам нужны только следующие png-шки:
Всего три импортированных png-шки.
Может, этот плеер не самый удачный и слишком простой пример, но моя задача — продемонстрировать подход. К тому же, я хочу, чтобы у каждого была возможность попробовать, поэтому привожу пример на базе бесплатного и доступного ui-кита, скорее всего известного пользователям Мака ОС iOS 10.
Для того, чтобы все это заанимировать, надо:
Условия, которые нам надо соблюсти:
Настройки экрана, на которых плеер появляется и исчезает.
Теперь, если мы запустим нашу анимацию (не забудьте связать арт-борды), плеер изменит свою позицию с первоначальной на первом арт-борде, на свою позицию на втором. Все, что нам остается сделать, это настроить тайминг. И я бы добавил немного прозрачности спрятанному плееру.
Есть еще метод: для объединения сложных групп при импорте из Sketch, добавляя ‘*’ к имени группы. Но его стоит использовать в случаях, когда анимация сложная и необходимо регулярно обновлять часто изменяющиеся объекты повторным импортом.
Принцип 2: Это не настоящее приложение, это фейк
Моё второе наблюдение: люди часто пытаются сделать полноценный прототип из своего проекта, когда всё, что им нужно – это простое видео, объясняющее поведение приложения в той или иной ситуации для членов команды, менеджмента, пользователей.
Это все равно, что вам надо снять фильм, но вы пытаетесь сделать сценарий реальностью.
Просто постарайтесь сделать анимацию как можно проще. Пусть только видео кажется реальным. Не всегда вам нужны кликабельные триггеры именно на тех местах, где расположены небольшие кнопки. В большинстве случаев можно сделать кликабельным весь экран и скрыть курсор. Это касается и доступа всех функций приложения с одного первого арт-борда. И тут мы подходим к следующему принципу.
Принцип 3: Одно действие = один экран
Не пытайтесь сделать из анимации прототип InVision. Просто распланируйте последовательность действий, как сценарий, и снимите собственный фильм. Это сэкономит кучу времени и сделает жизнь проще.
Простая последовательность экранов, которую я использовал в Louder.me (сейчас в бете).
P.S.: Это моя первая статья и я надеюсь, она вам поможет и сэкономит время при работе с анимацией. А мне очень поможет ваш фидбек, поэтому не стесняйтесь писать мне на Facebook.
Также статья доступна на английском языке на Medium.
Анимация прототипов с помощью комбо Principle и Figma
Principle — фантастически понятный и быстрый инструмент UI/UX дизайнера. Он здорово ускоряет воплощение любых ux-идей. А в связке с Figma — это просто пушка.
Продуктовый дизайнер (UX/UI), веб-дизайнер и бренд-дизайнер. Опыт проектов в международных компаниях Omega-R (агентство), iSpring Solutions (продуктовая) и со стартапами по всему миру. Преподаватель курсов «UI-дизайн и анимация интерфейсов» и «Веб-дизайн» в Институте программных систем и godesign.school.
Июн 24, 2020 · 3 мин читать
Вы наверняка в курсе, что Principle в паре с Figma помогают творить чудеса в создании интерактивных прототипов, Дак вот, в этой статье мы расскажем все так детально, чтобы вы по итогу просто взяли и попробовали эту пару на деле!
Интеграции Figma и Principle открывает просто безумные возможности по сборке не просто анимашек, а целых интерактивных систем приближенных к реальности (попробуй отличи!), т.е с этим комбо вы можете шлепать продвинутые анимации и воплощать все, что только вам придет в голову (и конечно зайдет юзерам!). А, да. Напомним, что Principle зарелизили в 2015 году, да так, что он сразу ворвался на пьедестал must-have инструментов для ux/ui дизайна. А значит, до интеграции Figma + Principle нужно было просто добраться естественным образом по бэклогу. Такие дела.
Рекомендуем также обратить внимание на курс по Principle, там интересные проекты по прокачке пользовательских сценариев.
Что дает интеграция? Если кратко, вы импортируете свои исходники Figma в Principle, а затем накатываете анимацию поверх. Ну не просто анимацию конечно: прорабатываете микровзаимодействия, вытачиваете микро анимации, настраиваете мягкие переходы, в общем доводите прототип до уровня продакшн-реди. Больше никаких листов A4 в прототипах, ну или клик-клик переходов. Только моушн, только плавность, только текучесть, тягучесть, естественностью и непрерывность ux.
Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.
В этой статье мы постараемся дать самый полный ответ на вопрос: “Почему же поклонникам Principle ну просто крышу сносит!”. Кто-то говорит, что в нем идеальный баланс сочетания простой + функциональный + мощный. А кто-то считает, что в нем все, что только нужно для создания реалистичных прототипов и кодить не нужно. Сейчас все и посмотрим.
«Даже если вы одинаково хорошо рубите как в дизайне так и программировании, то как ни крути, вашему мозгу приходится через усилие выныривать из одной области в другую».
Дэниэл Хупер, создатель Principle
«А еще при переключении на инженрное мышление, у вас просто отключается визуальный аппрарат решения задачи. Вытачивать детали и творить чувственно-целое — это разные фазы решения задачи и разные стили мышления».
Дэниэл Хупер, создатель Principle
В Principle простой UI и здесь вам уже все будет знакомо. Интеграция работает крайне просто: открываете Principle и через функцию import вытягиваете нужный дизайн из аккаунта Figma.
Если вам нужно подтюнить дизайн в Figma, то вообще не вопрос. Все изменения оригинального дизайна подхватываются на лету. Попробуйте просто увеличить кнопку и тут уже уведите как она увеличится в Principle. Кстати, анимации тоже все сохранятся. Ничего не слетает.
В общем нам в Figma Principle зашел — это очень удобный инструмент для UI-анимации и моушн-дизайна в интерфейсов, даже для начинающих. Вот держите файлик и попробуйте его в деле. Principle скачать можно вот здесь. А если вы не знакомы с Figma, то рекомендую подобрать курс по Figma и стартовать. Спасибо, что были на связи!
Пример анимации Principle (по ссылке выше).