Прочитайте первую часть (введение), если вы не знакомы с этим приложением.
Мы узнаем о ключевых функциях Principle, которые определяют новый подход к прототипированию и поддерживают линейный процесс. Эта половина экспресс-курса содержит интерактивное обучение и позволяет понять почему Principle называют «Sketch прототипирование».
Возьмите снэки и откройте Principle. Каждый раздел содержит от одного до двух упражнений.
Скачайте файл упражнений для этого экспресс-курса здесь.
Все что вам понадобиться для этого экспресс-курса уже есть в файлах упражнений, включая элементы дизайна:
#1 Основы: настройка событий
Мы начнем с самой простой задачи — как заставить кнопки работать. Всякий раз, когда вы выбираете объект в Principle, вы видите значок молнии. Нажмите на него, а затем перетащите его из требуемого триггера (пузырь речи исчезнет) на нужный артборд. Во всплывающем меню вы увидите, что Principle может обрабатывать множество типов триггеров.
Когда объекты на разных артбордах имеют одно и то же имя, Principle автоматически применяет переходы между этими объектами.
Упражнение #1A: Настройка кнопок (3минуты)
Шаг 1: Выберите желтую кнопку (вы можете обходить группы, содержащие элемент, удерживая нажатой клавишу ⌘cmd, когда вы нажимаете на кнопку)
Шаг 2: Нажмите на значок молнии. Перетащите из опции «Tap» на второй артборд. Второй артборд должен загореться фиолетовым цветом.
Шаг 3: Протестируйте кнопку в окне Preview.
Шаг 4: на втором артборде выделите слой «Logo» в «Header», чтобы вернуть прототип на первый артборд.
Шаг 5:Нажмите на значок молнии и снова используйте «Tap», но на этот раз перетащите его на первый артборд.
Совет #1: Всегда следите за тем, чтобы ваш дизайн был зациклен, чтобы пользователи могли вернуться к первому экрану без проблем. В этом причина настройки второй кнопки.
Совет #2: Вы заметите, что контент с обеих страниц размещен на обоих артбордах, причем контент на странице 2 имеет непрозрачность 0% на артборде № 1 и наоборот. Это позволяет контенту исчезать и появляться с переходом. В приведенном ниже примере нет дублирующегося контента.
В этом примере нет затухания или постепенного появления после удаления дубликатов страниц с изменением непрозрачности
Упражнение #1B: Создание вкладок (3минуты)
Шаг 1: Выделите «Tab-02»
Шаг 2: Перетащите из опции «Tap» непосредственно на артборд. Вы увидите, как появится второй артборд.
Шаг 3: Откройте в Инспекторе раскрывающееся меню «Fill» и поменяйте наоборот цвета двух вкладок, тогда «Tab-02» станет активной, а «Tab-01» неактивной.
Шаг 4: На втором артборде уменьшите непрозрачность «Tab-page-1» до 0%.
Шаг 5: Теперь мы создадим backdoor pathway, чтобы пользователь мог вернуться. Выделите «Tab-01» на втором артборде. Нажмите значок молнии. Перетащите из «Tap» на первый артборд.
Совет № 1: Нажатие клавиши «w» в окне предварительного просмотра может вернуть вас к началу прототипа.
Упражнение #1C: Настройка гамбургер-меню (5минут)
Метод 1: Используется в этом упражнении. Опускание выпадающего меню, расположенного вне артборда, когда оно неактивно
Метод 2: Или измените высоту фона заголовка, чтобы он действовал, как меню
Шаг 1: Выделите «HamburgerIcon-Group»
Шаг 2: Нажмите на значок молнии для «Tap», а затем перетащите его на текущий артборд, чтобы продублировать его на второй артборд
Шаг 3: Перейдите на второй артборд, расположите «Меню-BG», чтобы соответствовать размеру экрана.
Шаг 4: Выделите «HamburgerIcon—Group», но в этот раз на втором артборде.
Шаг 5: Нажмите на значок молнии для «Tap», а затем перетащите его на первый артборд.
Теперь, когда гамбургер-меню работает, вы захотите сделать еще один шаг для анимации иконки. Мы будем работать в «HamburgerMenu—Group» внутри «Header».
Шаг 6: На втором артборде выделите «Top» и установите в Инспекторе угол 45 °.
Шаг 7: Затем установите для «Bottom» угол -45 ° (это отрицательное значение!).
Шаг 8: Измените непрозрачность для «Middle» на 0%, чтобы он исчез.
Шаг 9: Центрируйте все в пределах «BoundingBox» и вуаля! У вас должна быть иконка креста.
Готово!
Вы можете сгруппировать прозрачный квадрат вместе с вашей иконкой, чтобы увеличить активную область кнопки. В этом упражнении активную область «BoundingBox».
#2 Группирование
В Principle, группирование выходит за рамки организации слоев. Группы могут превращаться в прокручиваемый контент, и они также могут действовать как маски. Изменение размера группы больше не влияет на размер дочерних элементов. Представьте это как невидимый (и магический) прямоугольник.
Упражнение #2A:Сделать контент прокручиваемым по вертикали (3 минуты)
Шаг 1: Сгруппируйте следующие слои: «Headline», все три группы карточек и «Spacer» * (горячие клавиши: cmd + g)
Шаг 2: Выделите группу и измените размер ограничительной рамки, чтобы она соответствовала артборду.
Шаг 3: Выберите в Инспекторе «Scroll» над «Vertical» на панели инструментов
Шаг 4: Тест-драйв в окне «Preview»!
* Spacer — это просто прямоугольник без заливки. Он нужен, чтобы можно было скроллить до конца страницы, а не только до низа последней карточки. Не совсем поняли, что я имею ввиду? Удалите spacer из своей группы и прокрутите страницу вниз в окне предварительного просмотра.
Упражнение #2B: Сделать контент прокручиваемым по горизонтали (3минуты)
Шаг 1: Сгруппируйте все группы карточек и «Spacer».
Шаг 2: Измените размер ограничивающей рамки, чтобы она соответствовала ширине артборда
Шаг 3: Выделите в Инспекторе «Scroll» над «Horizontal» на панели инструментов
Готово!
Упражнение #2C: Делайте привязку контента к центру при свайпе (5 минут)
Упражнение 2C: Контент должен быть привязан к центру мобильного телефона, если он предназначен для чтения по отдельности
Шаг 1: Сгруппируйте вместе все слои от «Card-01» до «Card-05» и «Spacer».
Шаг 2: Выделите в Инспекторе «Page» над «Horizontal» на панели инструментов.
Шаг 3: Измените размер ограничивающей рамки группы на область повторяющейся плитки — это ширина карточки, плюс граница слева и справа. См. скриншот ниже.
Конец!
Упражнение #2D: Расширяемый контент, или, аккордеон (5 минут)
Это еще одна фишка, которую вы можете сделать с группами в Principle — применить маску.
Упражнение 2D: Использование группы в качестве маски для раскрытия контента
Шаг 1: Выберите группу «ExpandableContent» и установите флажок «Clip Sublayers» в Инспекторе. Смотрите ниже. Теперь ваша группа стала маской.
Шаг 2: Оставаясь в Инспекторе, измените высоту с 450 до 0. Ваша маска / группа сжалась, чтобы скрыть контент.
Шаг 3: Выберите группу значков «Icon-Arrow-Down», нажмите значок молнии для «Tap» и перетащите на текущий артборд, чтобы сделать дубликат.
Шаг 4:На втором артборде выберите «ExpandableContent» (проще сделать в списке слоев, так как нет высоты для него), измените в Инспекторе высоту до 450. Теперь контент снова должен стать видимым.
Повернем стрелку вверх дном, чтобы указать действие «закрытия».
Шаг 5: Выделите «Icon—Arrow—Down» на втором артборде и напечатайте «180» выше Angle в инспекторе.
Шаг 6: Теперь соедините второй артборд с первым при помощи «Icon—Arrow—Down» используя опцию «Tap».
Вы сделали это!
Вторая половина этого быстрого и легкого экспресс-курса будет опубликована на следующей неделе. Мы поговорим о Drivers и компонентах в Principle.
Пожалуйста, оставляйте комментарии, если у вас есть какие-либо вопросы или замечания. Удачного прототипирования!
