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