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