01 од 09
Како да се започнете са УКСПин-ом
Како се крећемо у области мобилног дизајна, дизајна апликације и одговарајућег дизајна, све више се фокусира на УКС (корисничко искуство) и вирефраминг , интерактивне прототипове и моцкупс. Постоји једна тона алата која је усмерена на ову нишу и покрећу пуну гаму од сложених, оптерећених бехемота до ретких и једва корисних. Један од алата који ме је ухватио је УКСПин једноставно зато што су га развили дизајнери за дизајнере.
Пре него што кренемо напред ... опомена. Ако је ваша организација која више воли да поседује софтвер, УКСПин није за вас. Сви радови у овој апликацији се обављају у прегледачу, а пројекти које сачувате се чувају на вашем рачуну.
Да бисте започели са УКСПин-ом, покренете претраживач и идите у УКСПин. Одавде се можете пријавити за бесплатни пробни рад или договорити месечни план на основу ваше очекиване потребе. Процес регистровања је прилично једноставан и када сте поставили своје корисничко име и лозинку, ваши су спремни за почетак.
02 од 09
Како започети пројекат у УКСПин-у
Када се пријавите долазите до Дасхбоард-а, и одавде можете одлучити да креирате нову вирефраме, нови мобилни пројекат или пројект Респонсиве Веб Десигн. Постоје и плуг-инс за УКСПин који ће вам омогућити да унесете своје Пхотосхоп или Скетцх пројекте. За ово Како ћу креирати банер са неким текстом и додати дугме е-поште на банер. Да бих ово остварио, изабрао сам Креирај нову жичну карту.
03 од 09
Како користити УКСПин интерфејс
Пројектна површина је подељена на четири подручја. У црној области с леве стране налази се низ алата који вам омогућавају да се вратите на контролну таблу, отворите Елементе које ћете користити, отворите панел Смарт Елементс, потражите елементе, додајте белешке на страницу и додајте чланове тима. На дну је дугме које отвара кратки туторијал, други који вам омогућава приступ вашем налогу, а други који приступа најчешће постављањима често постављате питања и чак пружите повратне информације.
У плавој области на врху су серија алата и својстава. Тамнија дугмад на десној страни омогућавају вам да поновите свој дизајн, прилагодите поставке пројекта, подијелите страницу и направите симулацију странице у претраживачу.
Панел Елементс је место на коме ћете грабити делове за Десигн Сурфаце, назвати свој пројекат и додати или уклонити странице.
Библиотека Елементс је пријатно изненађење за УКС дизајнере. Овај поп уп омогућава вам да изаберете из анон 30 библиотека који се крећу од иОС-а до Андроид-а Лолипоп Такође имате приступ елементима Боотстрап-а и Фоундатион-а заједно са Фонт Авесоме иконама, иконама Гестуре за мобилне уређаје и колекцијом друштвених додатака.
04 од 09
Како додати један елемент на страницу УКСПин
Да бих започео, повлачио сам елемент кутије на површину дизајна и, када пустим миш, отвара се панел за особине . Дугме Својства вам омогућава да наведете елемент и подесите висину и положај ширине елемента. Такође можете додати паддинг елементу, заокружити углове и прилагодити његову прозирност. Кликом на дугме Бацкгроунд Цолор отвара се РГБА колекција боја.
Такође можете доделити фонт, границу и образац одабраном елементу. Молни вијак вам даје могућност додавања интерактивности одабраном елементу.
05 од 09
Како додати и форматирати текст у УКСПин
Да бисте додали текст, превуците текстни текст на површину дизајна и унесите свој текст. Кликните на дугме Својство са текстом да бисте отворили својства фонта и форматирали свој текст. Ако вам је потребан блок лажног текста, додајте текстуални елемент и кликните на дугме ГЕНЕРАТЕ ЛОРЕМ ИПСУМ у својствима фонта.
06 од 09
Како додати слику на УКСПин страницу
Постоји неколико начина за постизање овог задатка. Можете да користите Имаге Тоол на траци са алаткама, додајте Елемент Имаге из библиотеке или једноставно превуците и отпустите слику са радне површине на елемент на површини дизајна као што је приказано горе.
07 од 09
Како додати дугме на страницу УКСПин
Иако постоји елемент дугмета, уносећи " Буттон " у поље за претрагу , како је приказано горе, отвара се сва дугмад која се налазе у свим библиотекама. Повуците ону која ради за вас на површину дизајна и користите Пропертиес за промјену боје, фонта, па чак и граничног прелаза. Да бисте променили текст унутар дугмета, кликните једном на текст и унесите нови текст.
08 од 09
Како додати интерактивност на УКСПин страницу
То није тако компликовано као што се можда прво појављује. За унос е-поште, додао сам улазни елемент, променио величину, ушао у текст и форматирао текст. Са изабраним улазним елементом кликните на дугме Својства и, када се појављују својства елемената, кликните на дугме Видљивост - очна икона - у горњем десном углу панела.
Изаберите дугме и кликните на дугме Интерацтионс - Лигхтнинг Болт - у својствима. Када се отвори панел Интерацтионс, изаберите Нев Интерацтион. Изаберите Клик из тастера Триггер. У области "Акција" изаберите Прикажи елемент. Сада ће вас упитати који Елемент ће се приказати. Кликните једном на пиштољ и кликните на улазни елемент. Са идентификованим елементом, сада можете одредити да ли желите да анимирате или не. У том случају сам одлучио да прикажем улазну кућицу са лакоћом и отишао уз задату вриједност трајања од 300мс.
Такође желим да се дугме помера око 65 пиксела на десно када се кликне. Ја сам изабрао дугме, отворио панел Интерацтионс и одабрао Нев Интерацтион . Користио сам ове поставке:
- Триггер : Кликните
- Акција: Мове Би
- Мове Дирецтион : 65 пк на к оси
- Анимација : Линеарна
- Трајање: 300 мс
Да бисте уклонили интеракцију, изаберите елемент и отворите панел Интерацтионс. Изаберите интеракцију на панелу и кликните на Трасх Цан како бисте је избрисали.
09 од 09
Како тестирати страницу у УКСПин-у
Због чињенице да радите у претраживачу, тестирање је једноставно мртво. Кликните на дугме Симулате Десигн . Страница ће се отворити у прегледачу и можете тестирати начин. Такође ће се додати панел на левој страни странице која омогућава Коментари, Мапа сајта ако има више страница, Тестирање употребљивости, Дељење уживо, уређивање и повратак на Дасхбоард.
На дну странице је још један мали панел који вам омогућава приказивање интерактивних елемената, прикажите или сакријте коментаре и делите везу са другим пројектима.