Инструкция: разработка прототипов приложений при помощи 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.
—
© vc.ru
