01 од 09
Како да се започнете со UXPin
Додека се движиме во сферата на мобилниот дизајн, дизајнот на апликации и дизајнот на одзив, се повеќе се фокусира на UX (корисничко искуство) и жичен фрекфенции , интерактивни прототипови и мокети. Има еден тон на алатки таму насочени кон оваа ниша и тие работат на целиот спектар од сложени, карактеристики ладен behemoths на редок и едвај корисни. Едно од алатките што го привлекоа моето око е UXPin едноставно затоа што беше развиена од дизајнери за дизајнери.
Пред да тргнеме напред ... предупредување. Ако твое е организација која претпочита да го поседувате софтверот тогаш UXPin не е за вас. Целата работа направена во оваа апликација е направена во прелистувачот и проектите што ги зачувувате се зачувани на вашата сметка.
За да започнете со UXPin, стартувате прелистувач и упатете се на UXPin. Од тука можете да се пријавите за бесплатен пробен период или да организирате месечен план заснован на вашата очекувана потреба. Процесот на пријавување е прилично лесен и откако ќе го поставите вашето корисничко име и лозинка, вашите се подготвени да започнете.
02 од 09
Како да започнете проект во UXPin
Кога ќе се најавите, ќе пристигнете во контролната табла и од тука можете да одлучите да создадете нова жица, нов мобилен проект или проект Отворени веб дизајн. Исто така има и приклучоци за UXPin кои ќе ви овозможат да ги внесувате вашите проекти на Photoshop или Sketch. За ова Како да одам да креирам банер со некој текст и да додадам копче за е-пошта до банерот. За да го направам ова, избрав Креирај нова рамка.
03 од 09
Како да го користите UXPin интерфејсот
Проектната површина е поделена на четири области. Во црната област лево се серија на алатки кои ќе ви овозможат да се вратите на контролната табла, отворете ги Елементите што ќе ги користите, отворете панел Smart Elements, побарајте елементи, додајте белешки на страницата и додајте членови на тимот. Во долниот дел е копче кое отвора кратко упатство, друго кое ви овозможува да пристапите до вашата сметка и друга која што пристапува до најчесто поставуваните прашања, ајде да поставувате прашања, па дури и да дадете повратни информации.
Во сината површина по должината на врвот се серија алатки и својства. Потемните копчиња на десната страна ќе ви овозможат да го повторите вашиот дизајн, да ги прилагодите поставките на проектот, да ја делите страницата и да направите симулација на страната во прелистувачот.
Елементите панелот е местото каде што ќе го зграби делови и парчиња за Дизајн површина, името на вашиот проект и да додадете или отстранувате страници.
Библиотеката Елементи е пријатно изненадување за UX дизајнерите. Ова pop-up ви овозможува да изберете од 30 библиотеки, кои се движат од iOS до Android Lolipop. Исто така, имате пристап до Bootstrap и Foundation елементи, заедно со иконите Font Awesome, икони за движење за мобилни и колекција на социјални додатоци.
04 од 09
Како да додадете елемент на страница UXPin
За да започнете, го влечев елементот Box на површината на дизајнот и, кога го пуштам глувчето, се отвори панелот Properties . Копчето Својства ви овозможува да го именувате елементот и да ги поставите висината на ширината на елементот и вредноста на позицијата на елементот. Можете исто така да додадете дополнување на елементот, заокружете ги аглите и прилагодете ја неговата непроѕирност. Со кликнување на копчето Боја на позадина се отвара RGBA боја.
Исто така можете да доделите фонт, граница и шема до избраниот елемент. Молнията Болт ви дава можност да додадете интерактивност на избраниот елемент.
05 од 09
Како да додадете и форматирате текст во UXPin
За да додадете текст, повлечете го текстот на површината на дизајнот и внесете го текстот. Кликнете на копчето Сопственост на текстот за да ги отворите својствата на фонтот и да го форматираат текстот. Ако ви треба блок од кус текст, додадете текстуален елемент и кликнете го копчето GENERATE LOREM IPSUM во својствата на Фонт.
06 од 09
Како да додадете слика на UXPin страница
Постојат неколку начини за остварување на оваа задача. Можете да ја користите алатката за слика во лентата со алатки, да додадете елемент за слика од библиотеката или едноставно да ја влечете и испуштите сликата од вашата работна површина кон елементот на површината на дизајнот како што е прикажано погоре.
07 од 09
Како да додадете копче на страница со UXPin
Иако постои елемент на копче, влегувајќи во " Копчето " во областа за пребарување , како што е прикажано погоре, се отвораат сите копчиња пронајдени во сите библиотеки. Повлечете го оној што работи за вас на површината на дизајнот и користете ги Properties за да ја смените бојата, фонтот, па дури и радиусот на границата. За да го промените текстот во копчето, кликнете еднаш на текстот и внесете го новиот текст.
08 од 09
Како да додадете интерактивност на UXPin страница
Ова не е толку комплицирано што може да се појави. За внесување на е-пошта, додадов елемент за внесување, го променувам големината, влегов во текстот и го форматирав текстот. Со избраниот елемент Влезен, кликнете на копчето Својства, и кога ќе се појават својствата на елементот, кликнете на копчето Видливост - очното јаболко - во горниот десен агол на панелот.
Изберете го копчето и кликнете на копчето Интеракции - Молния Болт - во својствата. Кога ќе се отвори панелот Интеракции, одберете New Interaction. Изберете Кликни од спуштањето на триггерот. Во областа за акција, изберете Покажи елемент. Сега ќе бидете прашани кој елемент ќе се прикаже. Кликнете еднаш на пиштолот и кликнете на елементот Влез. Со идентификуваниот елемент, сега можете да одредите дали да го анимирате елементот. Во овој случај решив да ја покажам полето за внесување со леснотија и отиде со стандардната вредност на траење од 300ms.
Исто така сакам да го поместите копчето околу 65 пиксели десно, кога е кликнато. Го избрав копчето, го отворив панелот Интеракции и избрав нова интеракција . Ги користев овие поставки:
- Активирање : Кликни
- Акција: Премести
- Помести насока : 65 px на x оската
- Анимација : Линеарна
- Времетраење: 300 ms
За да отстраните интеракција, одберете го елементот и отворете го панелот Интеракции. Изберете интеракција во панелот и кликнете на ѓубрето за да ја избришете.
09 од 09
Како да ја тестирате вашата страница во UXPin
Поради фактот дека работите во прелистувачот, тестирањето е мртво едноставно. Кликнете на копчето Симулативен дизајн . Страницата ќе се отвори во прелистувачот и ќе може да пробате начин. Исто така, ќе биде додаден панел на левата страна на страницата, која овозможува коментари, Мапа на сајтот, ако има повеќе страници, Тестирање на употребливост, Споделување во живо, уредување и враќање на контролната табла.
На дното на страницата е уште еден мал панел кој ви овозможува да ги покажете Интерактивните елементи, да ги покажете или скриете коментарите и да споделите врска со проектот со други.