Проектирайте интерактивни прототипи във Framer

Автор: John Stephens

Дата На Създаване: 27 Януари 2021

Дата На Актуализиране: 19 Може 2024

Съдържание

Импортиране от Sketch
Създайте слоеве маска и аватар
Определете състояния
Анимиране между държави
Опитайте на истинско мобилно устройство

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

Framer е нов инструмент за прототипиране, базиран на код. Можете да създавате макети в Sketch (или Photoshop), както обикновено, и да ги импортирате във Framer. След това напишете малко CoffeeScript и можете да постигнете много.

Ще ви науча на основите на прототипирането във Framer, като използвам примера на прототип на приложение за iOS с два изгледа: изглед на профил и увеличен изглед на изображението на аватара на потребителя. Ще прототипираме как ще се отваря и затваря разширеният изглед на снимки и ще го анимираме. Вижте онлайн демонстрацията тук (за да видите изходния код, просто щракнете върху иконата в горния ляв ъгъл). Ще ви трябва и безплатната пробна версия на Framer, която можете да получите на framerjs.com.

Импортиране от Sketch

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

скица = Framer.Importer.load "импортиран / профил"

Използвайте тази променлива за достъп до импортираните слоеве. Например, за да препратите към слоя, наречен „съдържание“ във файла Sketch, трябва да въведете sketch.content във Framer.

Създайте слоеве маска и аватар

Основната функция на този прототип е да разшири изображението на аватара, когато е докоснато, и след това да го затвори, когато бъде докоснато отново. Първо ще създадем два слоя маска - вложена маска или маска в друга маска. Ще анимираме и двете маски наведнъж, за да създадем приятен, фин ефект на отваряне и затваряне. Слоят headerMask ще изреже снимката на аватара в правоъгълник, когато се разшири, а слоят маска ще я изреже в малък кръг в изгледа на профила.

Създайте слоя headerMask по следния начин:

headerMask = нов Ширина на слоя: Ширина на екрана, височина: 800 backgroundColor: "прозрачен"

Първият ред код създава и назовава новия слой. След това, използвайки синтаксиса на отстъпа на CoffeeScript, задаваме свойствата на ширината, височината и фона. Ще използваме прозрачен фон, така че слоевете отдолу да се показват, когато снимката на аватара се разшири.

След това създайте слоя маска:

маска = нова Ширина на слоя: 1000, височина: 1000 фон Цвят: "прозрачен", граница Радиус: 500 y: sketch.header.height - 100 супер Layer: header Маска на маската: 0.2, originY: 0

Създаваме нов слой и задаваме свойства по същия начин. Големият граничен Радиус прави този слой кръг. Поставяме слоя маска така, че да припокрива заглавния слой, който е импортиран от Sketch. Също така ще намалим до 20 процента, или 0,2. Начало Y от нула задава опорната точка или регистрацията на изображението до горния ръб.

Останалото свойство, superLayer, задава слоя headerMask, който създадохме като родител на този нов слой. Ето как маскирането работи във Framer. Просто задайте свойството superLayer и родителският слой ще маскира детето.

След това трябва да създадем графиката на аватара и да я поставим в тези нови маски. За да увеличим и анимираме границите на изрязване, ще създадем ръчно слоя на аватара. Копирайте снимка в подпапката ’images’ на папката на проекта. След това създайте слой, като използвате това изображение:

аватар = нов слой на изображението: "images / avatar.png" ширина: mask.width, височина: mask.height суперLayer: маска, force2d: вярно

Забележете, че ние поставихме суперслоя на аватара да бъде слой маска. Сега и двете са вложени в headerMask. Също така задаваме ширината и височината, така че изображението да запълни маскираната област напълно.

И накрая, ще създадем променлива, за да съхраним позицията Y на маската, която ще използваме за анимацията. Ще го центрираме хоризонтално, тъй като е по-голям от екрана.

maskY = mask.y mask.centerX ()

Определете състояния

Първата стъпка в създаването на анимация е да се дефинират началното и крайното състояние. Във Framer състоянията са като ключови кадри, изписани в код. Държавата е просто съвкупност от имоти. Всеки слой има състояние по подразбиране. За този прототип това подразбиране ще служи като начална точка за анимацията, така че трябва да зададем само второ състояние за всеки слой.

Синтаксисът за състояния е много прост. Позовавайте се на слоя, използвайте метода layer.states.add () и след това избройте свойствата, които трябва да бъдат включени.

sketch.content.states.add (скрий: {непрозрачност: 0}) headerMask.states.add (ход: {y: 120}) mask.states.add (растеж: {мащаб: 1.1, y: маскаY - 420})

Второто състояние за слоя съдържание, което е импортирано от Sketch и съдържа всички останали елементи на екрана на профила, трябва да бъде напълно прозрачно. По този начин, когато аватарът се разшири, ще имаме черен фон и останалите импортирани икони и елементи ще се покажат.

Вторият ред от код създава състояние за headerMask, което просто ще го премести надолу до позиция Y от 120. Това ще позволи заглавието и бутонът за затваряне да се покажат в горната част на екрана, когато снимката на аватара бъде увеличена. Той също така ще анимира границите на изрязване на снимката на аватара.

И накрая, ново състояние за слоя маска ще го мащабира и ще го премести нагоре, използвайки променливата maskY, която създадохме по-рано. Тъй като начало Y (или опорна точка) на слоя маска е горният му ръб, трябва да го преместим с 420 пиксела, така че центърът на изображението да се вижда.

Анимиране между държави

За да анимираме между състоянията по подразбиране и новите, които току-що създадохме, ни трябват само още четири реда код. Ще зададем манипулатор на кликвания върху слоя на аватара. Когато потребителят го докосне на екрана на профила, ние ще преминем към разширения изглед чрез състояния на колоездене. Когато се докосне отново, ще се върнем към състоянията по подразбиране, така че да се върне в малък кръг. Същите редове на кода обработват и двете взаимодействия:

avatar.on Events.Click, -> headerMask.states.next () mask.states.next () sketch.content.states.next ()

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

След това просто се позоваваме на всеки слой и използваме метода layer.states.next () за превключване на състоянията. Когато използвате layer.states.next (), Framer ще използва вътрешните настройки за анимация по подразбиране. Това е изключително удобно, но можете да създадете още по-добри анимации, като подредите кривите на анимацията.

Когато използвате състояния като ние тук, можете лесно да промените всяка крива на анимация поотделно, като използвате свойството layer.states.animationOptions. Само с три леки настройки анимацията се чувства съвсем различно:

sketch.content.states.animationOptions = curve: "easy", time: 0.3 headerMask.states.animationOptions = curve: "spring (150, 20, 0)" mask.states.animationOptions = curve: "spring (300, 30, 0) "

За съдържателния слой, който изчезва и навлиза, ще изберем проста крива, предварително зададена, лесна и зададена продължителност на анимацията на 0,3, така че да е много бърза.

За слоевете headerMask и mask използвайте пружинна крива. За нашите цели просто трябва да знаете, че стойностите на пружинната крива променят скоростта и отскока на анимацията. Стойностите за слоя маска ще направят анимацията му много по-бърза от headerMask и съдържание. За повече подробности относно настройките на пружинната крива вижте документацията на Framer на адрес framerjs.com/docs.

Опитайте на истинско мобилно устройство

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

Научихте всичко, което трябва да знаете, за да прототипирате собствените си дизайни във Framer. Какво чакаш?

Думи: Джарод Драйсдейл

Jarrod Drysdale е автор, дизайнерски консултант, производител на цифрови продукти. Тази статия първоначално е публикувана в брой 270 на нетното списание.

Хареса ли ви това? Прочетете тези!