Обърнете внимание на примерните прототипи по-долу. Те бяха направени във Framer. След този урок ще можете да започнете да създавате свои собствени зашеметяващи анимирани прототипи за нула време.

Framer излезе с най-новата си версия преди седмица и пазарът на прототипи никога няма да бъде същият. Инструментът за прототипиране Framer беше труден за усвояване, но полезен като най-точния и неограничен софтуер за прототипиране. Сега нещата се промениха. Framer вече се предлага с функции Design + Code + Collaborate, което означава, че можете да създадете своя прототип директно във Framer, като разработите напълно функционален прототип без никакъв софтуер на трети страни и без никакви умения за кодиране.

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

Основи на Framer

Да започваме! Просто отидете на framer.com и изтеглете пробна версия. Те ви дават две седмици от напълно функционалната си демонстрация и повярвайте ми, достатъчно време е да се научите много за този софтуер за прототипиране.

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

(В този урок за Framer ще се съсредоточа върху създаването на прототипи директно във Framer.js. Трябва също така да знаете, че има и други начини за започване на прототипиране във Framer. Например, можете да работите директно с файловете на Sketch. Ще покрия този работен поток в друга статия.)

Изцяло новият Framer - Режим на дизайн

В тази статия ще създадем три страхотни прототипа в рамките на минути с минимално използване на кода: основни взаимодействия , превъртащ компонент , и компонент на страницата

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

Нека създадем дизайн от тип приложение

В първата част на този урок ще подготвим детска площадка за нашия прототип на Framer. Ще създадем дизайн от тип приложение с три различни типа слоеве: вектор, изображение и текст.

Стъпка 1: Създайте прост бутон и фон.

За да започнете своя дизайн, изберете първия раздел - който е режим на проектиране —И добавете артборд, точно както в Sketch. В този урок ще работим върху прототип на iPhone 7, така че избрах тази предварително зададена като размер на моята дъска. Добавих и запълване на син фон.

След това изберете правоъгълник инструмент и създайте форма под формата на обикновен кръгъл бутон.

Стъпка 2: Добавете карта с изображение.

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

Стъпка 3: Добавете заглавие на приложение.

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

Стъпка 4: Кажете на Framer кои слоеве са интерактивни.

Имаме още една стъпка, преди да започнем нашия прототип на Framer. Просто трябва да кажем на Framer кои слоеве ще бъдат интерактивни. Просто щракнете върху точката до името на слоя вътре в панела на слоя. Добре е да назовавате всеки слой правилно за по-нататъшна употреба. Назовах слоевете си карта и бутон .

Стъпка 5 (Бонус): Определете вашите глобални цветове.

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

Когато настройвате цветовете си, просто ги назовете в редактора на кода и предоставете стойности HEX, RGB или RGBa след съответния знак „=“. Не забравяйте да запазите всички променливи в горната част на вашия код.

# variables ------------------------------- blue = '#005D99' green = '#3DBE8B' white = '#FFFFFF'

Стъпка 6 (Бонус): Добавяне на относителна позиция.

С новия Framer е много лесно да поддържате прототипа си отзивчив. Можете да зададете относителни позиции от режим на проектиране , както е показано по-долу:

Ето кратък списък на свойствата, които са полезни за подравняване и изчисляване на позицията на слоя директно в кода. Можете да направите необходимата математика за изчисляване на позициите на слоя. Това става необходимо, когато добавяте взаимодействия по-късно и искате да запазите своя прототип отзивчив.

# This is how you can align layer position: x: Align.center(0) # align layer horizontaly x: Align.center(200) # align layer horizontaly with 200 offset x: Align.right(0) x: Align.left(0) y: Align.center(0) # align layer verticaly y: Align.top(0) y: Align.bottom(0) # You can use also some variables width: Screen.width # current device width height: Screen.height # current device height # As a reference you can also user layer names x: layerA.x # layerA horizontal position y: layerA.y # layerA vertical position width: layerA.width # layerA width height: layerA.height # layerA height # You can combine all of this into the simple math to calculate position or dimensions width: Screen.width / 2 - layerA.width

Сега сте готови - да започнем нашия проект

Създадохме различни видове слоеве Framer. Сега нашата площадка за взаимодействие е готова за работа.

Накрая! Скучната част приключи. Сега е време за дизайн на взаимодействие.

Изтеглете целия прототип тук .

1. Създаване на взаимодействие с обратна връзка с бутон

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

Стъпка 1: Създаване на събитието за взаимодействие.

Ще го направим просто. Нека създадем обратна връзка с бутон, когато го докоснете, като използвате следната команда:

layerA.onTap (event, layer) ->

Framer току-що написа този ред код за вас. Това означава, че когато докоснете слоя бутон, нещо ще се случи.

Стъпка 2: Добавяне на анимация към събитието.

Нека започнем анимация след този тригер. За да направите това, щракнете върху точката до бутон слой в панела на слоя, след което изберете Добавете анимация . Когато добавяте анимация, Framer преминава в режим за редактиране на анимация. Можете да мащабирате, премествате, завъртате или променяте всеки параметър на слоя:

Фреймър добави още няколко реда код. (Не се притеснявайте - все още можете да редактирате анимацията си с панела за анимация.)

button.onTap (event, layer) -> button.animate borderRadius: 27 borderWidth: 10 borderColor: 'rgba(115,250,121,1)' options: time: 0.30 curve: Bezier.ease

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

Стъпка 3: Нулиране на анимацията.

Добави друго събитие , почти както преди. Разликата е, че търсим събитие, когато анимацията приключи:

Този път кодът, добавен от Framer, ще изглежда така:

button.onAnimationEnd (event, layer) ->

Така че, когато анимацията на бутон слоят е завършен, можем да добавим следващата анимация, която ще нулира бутон параметри на слоя:

button.onAnimationEnd (event, layer) -> button.animate borderWidth: 100 borderColor: 'rgba(255,255,255,1)' borderRadius: 100 options: time: 0.3 curve: Bezier.ease

Това е! Сега имаме работна обратна връзка след натискане на нашия бутон.

2. Създаване на различни състояния за взаимодействия между слоевете на карти

Добре, сега знаете как да проектирате анимация и да я задействате. По-често трябва да проектирате различни състояния на слой. Можете да проектирате множество състояния на един и същ слой, като промените само някои параметри, като позиция, размер или непрозрачност.

Стъпка 1: Добавяне и създаване на състояния за слой от карта.

Начинът за добавяне на състояние към карта е почти същото като добавяне на анимация. Трябва да щракнете върху точката до карта слой и след това щракнете върху Добавяне на държава . Сега преминахте в режим на редактиране на държавата. Проектирайте го, както ви харесва:

Моля, обърнете внимание на отстъпа на кода. Трябва да започне от първия ред.

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

card.states.a = width: 248 height: 287 x: 63 y: 190 borderWidth: 10 borderColor: 'rgba(115,250,121,1)' card.states.b = x: 139 y: 529 width: 98 height: 98 borderRadius: 49 borderWidth: 1 borderColor: 'rgba(255,255,255,1)'

Стъпка 2: Добавяне на събития.

Има само още една стъпка, която да го накара да работи. Трябва да създадем събитие за промяна на тези състояния.

button.onTap -> card.stateCycle()

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

button.onTap -> card.stateSwitch('b')

Този фрагмент е полезен, когато искате да задействате определено състояние на слоя.

Последната корекция, която направих в моя прототип, е промяна на скоростта на анимация и кривата между състоянията:

card.animationOptions = curve: Spring time: 0.8

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

Ускоряване на работата ви във Framer: Компоненти

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

1. Първият компонент: превъртане

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

Стъпка 1: Създаване на слоеве и настройка на компоненти.

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

scroll = new ScrollComponent width: Screen.width height: Screen.height

Този код създава невидима област с ширината и височината на текущото устройство.

Стъпка 2: Кажете на Framer кои слоеве искате да превъртите.

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

list.parent = scroll.content

Стъпка 3: Заключване на вертикално превъртане.

Разрешено ни е да превъртаме сега, но това се случва във всички посоки. Трябва да заключим превъртането по вертикална ос:

scroll.scrollHorizontal = false

Еха! Създадохте свитък във вашето приложение само с пет реда прост код.

2. Компонент на страницата: Плъзгане на екрана към екран

Много популярно взаимодействие за превключване между екрани е плъзгането. Идеята тук е много подобна на скролиращия компонент. Можете да изтеглите работещ прототип тук .

Стъпка 1: Настройка на компонента.

Първо, трябва да създадем „кутия“ в редактора на кода, където ще се случи магията:

page = new PageComponent width: 315 height: Screen.height x: Align.center scrollVertical: false clip: false # the content outside the box won't be clipped

На този етап трябва да сте запознати с целия код тук. Това е просто проста настройка на компонента и неговата област. Сега трябва да създадем няколко слоя, за да прекараме пръст.

Стъпка 2: Създаване на слоеве

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

Отначало трябва да направим артборда два пъти по-широк. В панела със свойства на монтажната плоча намерете ширината и я умножете по две (или просто добавете *2). Поставете картите една до друга, активирайте ги със синята точка и ги наименувайте правилно: карта1 и карта2 .

Стъпка 3: Добавяне на слоеве към компонента на страницата.

В края на нашия код в редактора на кода трябва да добавим:

card1.parent = page.content card2.parent = page.content

Това означава, че добавяме тези слоеве към компонента.

Компонентът на страницата вече е готов за работа!

Заключителна дума

Това е всичко приятели! Надявам се, че този урок за Framer е полезен за започване на вашето пътуване с най-мощния инструмент за прототипиране на пазара. Също така, трябва да помислите за присъединяване към Група Framer във Facebook . Наоколо има огромна общност и те са полезни, когато започвате.

Ако искате да влезете още по-дълбоко във Framer, опитайте да прочетете Документация на Framer .

• • •

Допълнително четене в блога за дизайн на ApeeScape:

• eCommerce UX - преглед на най-добрите практики (с инфографика)
• Значението на ориентирания към човека дизайн в продуктовия дизайн
• Най-добрите портфейли на UX Designer - вдъхновяващи казуси и примери
• Евристични принципи за мобилни интерфейси
• Предвиден дизайн: Как да създадем магически потребителски опит