Ui Design

Ръководство стъпка по стъпка за анимация на потребителския интерфейс с принцип и скица



Проектирането на потребителски интерфейс с анимация и преходи е чудесен начин да планирате по-добро потребителско изживяване (UX) за следващото си приложение. Анимираните микро-взаимодействия са идеалният начин за стимулиране на ангажираността на потребителите в един свят на краткотрайно внимание. Ето защо Airbnb наскоро представи Lottie - своя „Нов инструмент с отворен код, който прави добавянето на анимация към родните приложения бързо.“

Проекти като Lottie показват нарастващото значение на добавянето на движение като нов елемент за създаване на подобрен UX както за приложения, така и за уебсайтове.



В този урок ще научите ефективно Технически интерфейс за анимация използвайки Принцип за Mac. След като преминете през това ръководство, ще можете да превърнете скучните и статични макети в интерактивен прототип, за да покажете по-добре работата си. Можете да приложите това, което ще научите тук, за да подобрите следващите си стъпки на потребителския интерфейс и Dribbble снимки.



Да започваме.



Изтеглете тези безплатни ресурси, за да продължите.

Ще ви трябват само приложения Principle и Sketch, които да следвате. Ако вече нямате такива, можете да изтеглите безплатна пробна версия, като използвате връзките по-долу.

Общ преглед на принципния интерфейс

Ръководство за анимиране на потребителския интерфейс с принцип и скица

Ако сте свикнали с Mac OS, интерфейсът на Principle ще изглежда много познат. Той има три основни раздела: странична лента, зона за дизайн, която показва монтажните плоскости, и прозорец за предварителен преглед, който можете да преоразмерите и да се движите.



Разбиране на основните концепции за анимация по принцип

Сравнително лесно е да анимирате с Принцип. Не е необходимо да имате анимационен фон, за да започнете. Всъщност повечето от тежките повдигания са автоматизирани от Принцип и трябва да се съсредоточите само върху това, което започва анимация (т.е. бутон, връзка, събитие за превъртане), как започва анимацията и как завършва.

За да ви помогнем да следвате по-добре, ето кратък лексикон от термини, които ще видите в цялото ръководство.



  • Съставна част: Компонентът е вид групиране, което помага да се съдържат елементи и дори анимации. Това е еквивалент на „интелигентен обект“ във Photoshop или „символ“ в Illustrator.
  • Задействане: Начин за стартиране на анимация - т.е. чрез докосване, превъртане, задържане и т.н.
  • Преход: Промяна на състоянието от едно монтажно поле към друго, т.е. плъзгане наляво или надясно.
  • Облекчаващ ефект: Нивото на плавност на прехода въз основа на начина, по който анимацията започва и завършва.

А. Задействане и преход

Ръководство за анимиране на потребителския интерфейс с принцип и скица

Първата стъпка за анимиране с Principle е да настроите тригер (поведението или действието, което стартира анимацията) върху елемент (т.е. бутон или връзка) и да промените първоначалното и / или крайното му състояние (т.е. неговата позиция или мащаб от началото до края на анимацията).



  1. Определете начално състояние: как изглеждат елементите на потребителския ви интерфейс в началото, преди да се осъществи анимацията.
  2. Дефинирайте спусъка: като изберете елемента за взаимодействие и кое действие активира анимацията.
  3. Определете крайното състояние: как се показват елементите в края на анимацията.

След като зададете анимацията, можете да я визуализирате в прозореца за предварителен преглед.

Б. Дължина на анимацията и облекчаващ ефект

Урок за анимиране на потребителски интерфейс с Принцип и Скица

По подразбиране Principle създава половин секунда анимация. Понякога това не е достатъчно, за да се види ефектът на прехода в детайли. Можете да промените продължителността и „облекчаващия“ ефект от панела за анимация, като следвате тези три стъпки.

как се прави тестване на единици
  1. Отворете панела за анимация: Изберете черните стрелки между две монтажни плотове и кликнете върху бутона „Анимиране“, разположен в горната лента.
  2. Удължете дължината на анимацията: Преместете крайните точки на сините линии.
  3. Прилагане на облекчаване: Изберете всички точки с форма на диаманти и изберете „Лесно и двете“ от падащото меню, за да изгладите преходите.

Какво ще получите

Това видео ви показва какво можете да създадете, след като преминете през този урок. Демонстрационното приложение показва цветовата палитра на Material Design на Google и ви дава повече подробности, след като изберете цвят. Ще създадете анимация за зареждане, някои преходи на страници с плавен ефект на паралакс и плъзгач на менюто.

Уверете се, че сте изтеглили безплатния изходен файл на урока тук .

Да започваме.

Преминаване от файл на скица към принцип

  1. Преместете монтажните дъски, за да се подготвите за естествени преходи между тях: Например, плъзгащ се отдясно екран трябва да докосва десния ръб на екрана, който замества върху анимацията.
  2. След като файлът Ви със скица е готов, преминете към Принцип, създайте празен документ, съответстващ на съотношението 360x640, и кликнете върху бутона „Импортиране“.

Премахване на заглавките на екраните за безпроблемно превъртане

За да създадете безпроблемен преход между страниците, можете да премахнете всяка заглавка с изключение на първата. Първоначално заглавията бяха добавени, само за да покажат външния вид и усещането на приложението. Ще запазите заглавката само на екрана „Добре дошли“ и тя ще служи като лепкава лента с менюто и заглавието на приложението.

купете кредитна карта онлайн от хакери

Създаване на зареждаща анимация - фигурите

  1. Изберете групата за зареждане на фигури и кликнете върху „Създаване на компонент“, съдържаща формите за зареждане и текст. Създайте компонент за текста в рамките на първия символ; ще анимираме текста отделно веднага след това.
  2. Изберете групираните фигури. Изберете спусъка „Докосване“ и плъзнете и пуснете върху същия монтаж, за да създадете дубликат.
  3. Второто монтажно поле представлява крайното състояние на анимацията и можете да завъртите групата, като използвате свойството ъгъл. Дайте различни стойности на ъгъла на „запълване“ и „контур“, за да създадете по-интересен ефект.
  4. За да завършите, изберете стрелките между монтажните плоскости, щракнете върху „Анимиране“, за да отворите „панела за анимация“ и променете продължителността, като плъзнете крайните точки на около 1,00 s.

Създаване на зареждаща анимация - Текстът

  1. Първо, създайте плъзгащата се анимация. Изберете формата на бутона и приложете събитието за задействане „Tap“. В новия артборд преместете всички екрани нагоре с 640px (равна на текущата височина на монтажната плоча).
  2. Сега, нека създадем паралакса. Отидете до предишния монтаж, на началния екран, преместете геометричните фигури и текста надолу при различни Y стойности.
  3. И накрая, вътре в анимационния панел удължете времевата скала, да речем до 1s. Приложете ефект „Улесни и двете“ към хронологията (уверете се, че сте избрали всички ромбовидни точки и кликнете върху която и да е синя линия, за да приложите ефекта към всички).
  4. Визуализирайте анимацията си и премествайте фигурите наоколо, докато ефектът на паралакс ви изглежда добре.

Създаване на Parallax Effect - Добре дошли

  1. Изберете зареждащия компонент и приложете спусъка „Докосване“, като плъзнете стрелка от него навсякъде в таблото.
  2. Изберете всички екрани (от главната група) и го преместете с 640px нагоре. Тази стъпка извежда екрана за добре дошли на екрана.
  3. Върнете се към предишното табло и преместете фигурите на екрана „Добре дошли“ надолу. Това създава асинхронен плъзгащ ефект, наречен паралакс.
  4. Регулирайте анимацията, като добавите време към прехода вътре в панела за анимация: Изберете стрелката между таблото, след което плъзнете крайните точки на сините линии до около 1s.

Създаване на Parallax Effect - About Page

  1. Изберете бутона със стрелка надолу (уверете се, че сте избрали цялата група) и приложете спусъка „Докосване“, като плъзнете стрелка от него навсякъде в таблото.
  2. Изберете всички екрани (от главната група) и преместете всичко нагоре с 640px. Тази стъпка извежда екрана „Информация“ на екрана.
  3. Върнете се към предишния монтаж и преместете фигурите на екрана „Информация“ надолу. Това създава асинхронен плъзгащ ефект, наречен паралакс.

Създаване на ефект Паралакс - Страница с цветове

  1. Приложете спусъка „Докосване“ към бутона със стрелка надолу (уверете се, че сте избрали цялата група) и това ще създаде нов монтаж.
  2. На новия артборд изберете всички екрани и ги преместете с 640px нагоре.
  3. На предишното табло преместете цветовете и текста надолу. Имайте предвид, че колкото по-ниско премествате обект, толкова по-дълго отнема да се плъзнете обратно нагоре, така че не забравяйте да използвате различно разположение, за да създадете по-динамичен ефект.
  4. И накрая, като удължите анимацията и приложите „улесни и двете“ върху всички сини времеви линии в панела за анимация.

Плъзгане на страница отстрани - страница за избор на цвят

  1. Приложете спусъка „Докосване“ към бутона „Зареждане на още“ на екрана „Цветове“.
  2. В новия артборд преместете съдържанието „Цветове“ и „Избор“ наляво с 360px (ширина на монтажния плот)
  3. Върнете се към предишния монтаж и преместете съдържанието на екрана в обратна посока - надясно.
  4. Имайте предвид, че можете също да анимирате непрозрачността на плъзгащия се екран от нула процента до 100 процента.
  5. Играйте с продължителност на анимацията и облекчаващ ефект, за да промените ефекта на прехода.

Анимиране на иконата на менюто

  1. Имайте предвид, че всеки слой и форма, които са имали ефект (като сенки) от оригиналния файл на Sketch, се импортират в Principle като изображение. Ако трябва да редактирате фигури в Принципа, опитайте се да не добавяте специален ефект до след импортирането.
  2. Като се има предвид това, използвайки съществуващата икона като ориентир, нарисувайте три тънки правоъгълника и ги групирайте, за да създадете иконата на менюто за хамбургер. Сега можете да изтриете или да скриете предишната икона на менюто.
  3. Изберете новосъздадената икона и приложете спусъка „докосване“ към нея.
  4. В новия монтаж, завъртете горния и долния правоъгълник на иконата на менюто, уверете се, че са подравнени по центъра и дайте нула процента непрозрачност на средния.
  5. За да видите току-що създадената от вас анимация, свържете обратно променената икона на менюто с предварителен панел за визуализация със спусъка „Докосване“ и я тествайте.

Създаване на ефект на плъзгача на менюто

  1. На таблото за монтаж в крайното състояние преместете екраните надясно, докато връзките към менюто се изравнят вляво от иконата на затварящото меню.
  2. Изберете всичко в папката „Цветове“ с изключение на съдържанието на менюто и светлосивия фон и намалете непрозрачността до 25 процента. Анимацията ще избледнява съдържанието на страницата, за да се съсредоточи върху менюто.
  3. Удължете продължителността на анимацията и преминете към предишния монтаж, за да преместите леко съдържанието на менюто, за да създадете плавен ефект.

Преминаване към екрана за контакти

  1. В отвореното меню приложете спусъка „Tap“ върху бутона „Contact Us“.
  2. На новосъздаденото монтажно поле, преместете всички екрани нагоре с 640 px.
  3. След това се върнете към монтажната област на визуализациите и преместете елементите от страницата „Форма“ надолу.
  4. Преместете елементите при различни Y стойности, за да създадете паралакс ефект.
  5. И накрая, изберете стрелките между монтажните плоскости, удължете дължината на анимацията и приложете “Ease Both” към сините времеви линии.

Завършване със страницата Благодаря

  1. Приложете тригер „Докосване“ върху бутона „изпращане на съобщение“.
  2. На новия артборд преместете всички екрани нагоре с 640 px.
  3. След това се върнете към монтажната област на визуализациите и преместете елементите от страницата „Потвърждение“ надолу.
  4. Играйте с мащаб и завъртане за цветната икона, за да създадете по-динамичен ефект.
  5. Уверете се, че сте добавили към дължината на анимацията, за да възприемете по-добре ефекта на прехода.

Простотата на добавяне на анимации с принцип.

Принципът е фантастичен инструмент за оживяване на вашите идеи за взаимодействие с потребителския интерфейс.

Интерфейсът е удобен за Mac и е създаден да работи безпроблемно с файловете на Sketch.

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

Моля, оставете въпроси в коментарите по-долу. Щастлив съм да им отговоря.

Брифинг: Хранилището за данни

Бъдещето На Работата

Брифинг: Хранилището за данни
Всичко в семейството - Ръководство за семейни офиси

Всичко в семейството - Ръководство за семейни офиси

Инвеститори И Финансиране