Как да стигнете с UXPin
Докато се движим в сферата на мобилния дизайн, дизайна на приложението и отзивчивият дизайн, се фокусира все повече върху UX (потребителски опит) и wireframing, интерактивни прототипи и макети. Налице е един тон на инструменти, насочени към тази ниша и те изпълняват пълната гама от сложни, функция натоварени behemoths до рядко и едва ли е полезно. Един от инструментите, които ми хвана окото, е UXPin, защото е разработен от дизайнери за дизайнери.
Преди да продължим напред … предупреждение. Ако вашият е организация, която предпочита да притежава софтуера, тогава UXPin не е за вас. Цялата работа, извършена в това приложение, се извършва в браузъра и проектите, които запазвате, се запазват в профила ви.
За да започнете работа с UXPin, стартирайте браузър и се насочете към UXPin. Оттук можете да се регистрирате за безплатен пробен период или да подредите месечен план въз основа на очакваната ви потребност. Процесът на регистрация е доста лесен и след като сте задали потребителско име и парола, вие сте готови да започнете.
Как да стартирам проект в UXPin
Когато влезете, пристигате в таблото за управление и оттук можете да решите да създадете нов корпус, нов мобилен проект или проект за отговорно уеб дизайн. Има и плъгини за UXPin, които ще ви позволят да внесете вашите Photoshop или Sketch проекти. За това как да създам банер с някакъв текст и да добавите бутон за имейл към банера. За да направите това, избрах Създаване на нова телени рамка.
Как да използвате UXPin интерфейса
Проектната повърхност е разделена на четири области. В черната зона отляво има серия от инструменти, които ви позволяват да се върнете в таблото за управление, да отворите Елементите, които ще използвате, да отворите панела Smart Elements, да търсите елементи, да добавите бележки към страницата и да добавите членове на екипа. В долната част има бутон, който отваря кратък урок, друг, който ви позволява да осъществите достъп до профила си и друг, който има достъп до често задавани въпроси, да зададете въпроси и дори да предоставите отзиви.
В синята зона отгоре са серия от инструменти и свойства. По-тъмните бутони от дясната страна ви позволяват да подновите дизайна си, да коригирате настройките на проекта, да споделите страницата и да направите симулация на страницата в браузъра.
Панелът Елементи е мястото, където вземете парчетата за дизайнерската повърхност, наименувате проекта си и добавете или премахнете страници.
Библиотеката Elements е приятна изненада за дизайнерите на UX. Това поп надолу ви позволява да избирате между 30 библиотеки, от iOS до Android Lolipop. Също така имате достъп до елементи от Bootstrap и Foundation, заедно с иконите Font Awesome, иконите за жестове за мобилни устройства и колекция от социални приспособления.
04 от 09Как да добавите елемент към страница на UXPin
За да започнете, влачех елемента "Кутия" на дизайнерската повърхност и, когато пуснах мишката, Панел за свойства се отваря. Бутонът "Свойства" ви позволява да наименувате елемента и да зададете стойностите за височината и позицията на елемента. Можете също така да добавите подложка към елемента, да завършите ъглите и да коригирате непрозрачността му. Натискането на бутона Цвят на фона отваря избор на цвят RGBA.
Можете също така да присвоите шрифт, очертание и шаблон на избрания елемент. Lightning Bolt ви дава възможност да добавите интерактивност към избран елемент.
05 от 09Как да добавяте и форматирате текст в UXPin
За да добавите текст, плъзнете текстовия елемент към дизайнерската повърхност и въведете текста си. Кликнете върху текстовата собственост за да отворите свойствата на шрифта и да форматирате текста си. Ако имате нужда от блок на сляпо текст, добавете текстов елемент и кликнете върху Генерирай LOREM IPSUM бутон в свойствата на шрифта.
06 от 09Как да добавите изображение към UXPin страница
Има няколко начина за изпълнение на тази задача. Можете да използвате Инструмент за изображения в лентата с инструменти добавете елемент "Изображение" от библиотеката или просто плъзнете и пуснете изображение от работния плот върху елемента върху дизайнерската повърхност, както е показано по-горе.
07 от 09Как да добавите бутон към UXPin Page
Въпреки че има елемент с бутони, въвеждайки " бутон " в Търсене както е показано по-горе, се отварят всички бутони, намиращи се във всички библиотеки. Плъзнете този, който работи за вас върху дизайнерската повърхност и използвайте Properties, за да промените цвета, шрифта и дори радиуса на границата. За да промените текста в бутона, кликнете веднъж върху текста и въведете новия текст.
08 от 09Как да добавите интерактивност към UXPin страница
Това не е толкова сложно, колкото може да се появи. За входа за електронна поща добавих входен елемент, преоразмерих го, вмъкнах текста и форматирах текста. С избрания елемент за въвеждане кликнете върху бутона "Свойства" и, когато Елементи свойства кликнете върху видимост бутон - очната ябълка - в горния десен ъгъл на панела.
Изберете бутона и кликнете върху Бутон за взаимодействия - светлинния болт - в свойствата. Когато се отвори панелът "Взаимодействия", изберете Ново взаимодействие. Изберете Изтеглете от Тригера. В областта Действие изберете Покажи елемент. Вече ще бъдете попитани кой елемент да покажете. Кликнете веднъж върху пункта и кликнете върху елемента за въвеждане. С идентифицирания елемент вече можете да определите дали да анимирате елемента. В този случай реших да покажа входната кутия с лекота и да отида с стойността по подразбиране по подразбиране от 300ms.
Искам също така бутонът да се придвижи около 65 пиксела надясно, когато е натиснат. Избрах бутона, отворих панела "Взаимодействия" и избрах Ново взаимодействие, Използвах тези настройки:
- тригер: Кликнете
- действие: Преместване
- Преместване на посоката: 65 px по оста x
- Анимация: Линейно
- Продължителност: 300 ms
За да премахнете взаимодействие, изберете елемента и отворете панела "Взаимодействия". Изберете взаимодействието в панела и кликнете върху контейнера за отпадъци, за да го изтриете.
09 от 09Как да тествате страницата си в UXPin
Поради факта, че работите в браузъра, тестването е мъртъв. Кликнете върху Симулиране на дизайна бутон. Страницата се отваря в браузъра и можете да изпробвате пътя. Ще има и панел, добавен в лявата част на страницата, който позволява Коментари, Карта на сайта, ако има няколко страници, тестване на ползваемостта, споделяне на живо, редактиране и връщане към таблото за управление.
В долната част на страницата има още един малък панел, който ви позволява да показвате интерактивните елементи, да показвате или скривате коментари и да споделяте връзката с други хора.
