01 ng 09
Paano Kumuha ng Inyong Sarili Nagsimula Sa UXPin
Sa paglipat namin sa larangan ng disenyo ng mobile, ang disenyo ng app at tumutugon na disenyo ay nagkaroon ng isang pagtaas ng focus sa UX (Karanasan ng User) at wireframing , interactive prototyping at mockups. Mayroong isang tonelada ng mga tool out doon na naglalayong ito angkop na lugar at patakbuhin nila ang buong gamut mula sa kumplikadong, tampok na laden behemoths sa kalat-kalat at bahagya kapaki-pakinabang. Isa sa mga tool na nahuli ang aking mata ay UXPin dahil lamang ito ay binuo ng mga designer para sa mga designer.
Bago tayo sumulong ... isang caveat. Kung sa iyo ay isang organisasyon na mas gusto mag-aari ng software, ang UXPin ay hindi para sa iyo. Ang lahat ng mga gawain na ginawa sa app na ito ay tapos na sa browser at ang mga proyekto na iyong ini-save ay nai-save sa iyong account.
Upang makapagsimula sa UXPin inilunsad mo ang isang browser at tumungo sa UXPin. Mula dito maaari kang mag-sign up para sa isang Libreng Pagsubok o mag-ayos para sa isang buwanang plano batay sa iyong inaasahang pangangailangan. Ang proseso ng pag-sign up ay napakadali at sa sandaling naitakda mo ang iyong User Name at Password, handa ka nang magsimula.
02 ng 09
Paano Magsimula Ang Isang Proyekto sa UXPin
Kapag nag-log in ka dumating sa Dashboard at, mula dito maaari kang magpasya na lumikha ng isang bagong wireframe, isang bagong mobile na proyekto o isang tumutugon proyekto sa Web Design. Mayroon ding mga plug-in para sa UXPin na magpapahintulot sa iyo na dalhin ang iyong mga proyekto sa Photoshop o Sketch. Para sa Paano Ako Magtatayo ng isang banner na may ilang teksto at magdagdag ng isang pindutan ng email sa banner. Upang magawa ito pinili ko Gumawa ng bagong wireframe.
03 ng 09
Paano Gamitin Ang UXPin Interface
Ang Disenyo ng Ibabaw ay nasira sa apat na lugar. Sa itim na lugar sa kaliwa ay isang serye ng mga tool na nagbibigay-daan sa iyo upang bumalik sa dashboard, buksan ang Mga Sangkap na gagamitin mo, buksan ang panel ng Mga Elemento ng Smart, maghanap ng mga elemento, magdagdag ng mga tala sa pahina at magdagdag ng mga miyembro ng koponan. Sa ibaba ay isang pindutan na nagbubukas ng isang maikling tutorial, isa pang na nagbibigay-daan sa iyo upang ma-access ang iyong account at isa pang na-access ang FAQ's, hilingin sa iyo ng mga tanong at kahit na magbigay ng feedback.
Sa asul na lugar kasama ang tuktok ay isang serye ng mga tool at mga katangian. Ang darker na mga pindutan sa kanang bahagi ay nagbibigay-daan sa iyo upang maulit ang iyong disenyo, ayusin ang mga setting ng proyekto, ibahagi ang pahina at gumawa ng isang in-browser na simulation ng pahina.
Ang panel ng Mga Sangkap ay kung saan hinawakan mo ang mga piraso at piraso para sa Disenyo ng Ibabaw, pangalanan ang iyong proyekto at idagdag o alisin ang mga pahina.
Ang mga elemento ng library ay isang kasiya-siyang sorpresa para sa mga designer ng UX. Ang pop na ito ay nagpapahintulot sa iyo na pumili mula sa anon 30 mga aklatan mula sa iOS hanggang Android Lolipop Gayundin mayroon kang access sa mga elemento ng Bootstrap at Foundation kasama ang mga Font Awesome na mga icon, Mga icon ng kilos para sa mobile at isang koleksyon ng mga Social Widget.
04 ng 09
Paano Upang Magdagdag ng Elemento sa isang pahina ng UXPin
Upang makapagsimula nag-drag ako sa elemento ng Kahon sa ibabaw ng disenyo at, kapag inilabas ko ang mouse, bubukas ang Properties panel . Hinahayaan ka ng pindutan ng Properties na pangalanan mo ang elemento at itakda ang taas ng lapad ng elemento at mga halaga ng posisyon. Maaari ka ring magdagdag ng padding sa elemento, i-round off ang mga sulok at ayusin ang opacity nito. Ang pag-click sa pindutan ng Kulay ng Background ay nagbubukas ng isang picker ng kulay ng RGBA.
Maaari ka ring magtalaga ng isang font, hangganan at pattern sa piniling elemento. Binibigyan ka ng Lightning Bolt ng kakayahang magdagdag ng interactivity sa napiling elemento.
05 ng 09
Paano Upang Magdagdag At Mag-format ng Teksto Sa UXPin
Upang magdagdag ng teksto, i-drag ang elemento ng teksto sa ibabaw ng disenyo at ipasok ang iyong teksto. I-click ang pindutan ng Ari-arian ng Teksto upang buksan ang mga katangian ng Font at i-format ang iyong teksto. Kung kailangan mo ng isang bloke ng dummy text, magdagdag ng isang elemento ng teksto at i-click ang pindutan ng GENERATE LOREM IPSUM sa mga katangian ng Font.
06 ng 09
Paano Upang Magdagdag ng Isang Larawan Upang Isang UXPin Page
Mayroong ilang mga paraan upang magawa ang gawaing ito. Maaari mong gamitin ang Tool ng Larawan sa toolbar, magdagdag ng isang elemento ng Larawan mula sa Library o i-drag lamang at i-drop ang isang imahe mula sa iyong desktop papunta sa elemento sa ibabaw ng disenyo tulad ng ipinapakita sa itaas.
07 ng 09
Paano Upang Magdagdag ng Isang Pindutan Upang Isang UXPin Page
Kahit na may elemento ng Pindutan, ang pagpasok ng " Pindutan " sa lugar ng Paghahanap , tulad ng ipinapakita sa itaas, ay bubukas ang lahat ng mga pindutan na matatagpuan sa lahat ng Mga Aklatan. I-drag ang isa na gumagana para sa iyo papunta sa ibabaw ng disenyo at gamitin ang Mga Katangian upang baguhin ang kulay, ang font, at kahit na ang Border radius. Upang baguhin ang teksto sa loob ng pindutan, i-click nang isang beses sa teksto at ipasok ang bagong teksto.
08 ng 09
Paano Upang Magdagdag ng Interactivity sa isang pahina ng UXPin
Hindi ito kumplikado dahil maaaring lumitaw muna ito. Para sa pag-input ng email, nagdagdag ako ng elemento ng pag-input, pinalitan ito, ipinasok ang teksto at na-format ang teksto. Sa napiling input elemento i- click ang pindutan ng Properties at, kapag lumitaw ang mga elemento ng Pag- click, i-click ang button ng Visibility - ang eyeball - sa kanang itaas na sulok ng panel.
Piliin ang pindutan at i-click ang pindutan ng Mga Pakikipag - ugnayan - ang Lightning Bolt- sa mga katangian. Kapag bubukas ang panel ng Mga Pakikipag-ugnayan, piliin ang Bagong Pakikipag-ugnayan. Piliin ang Mag-click mula sa Trigger pop down. Sa lugar ng Pagkilos piliin ang Ipakita ang Elemento. Tatanungin ka na kung anong Elemento ang ipapakita. Mag-click nang isang beses sa gunsite at mag-click sa Input element. Gamit ang elemento na kinilala, maaari mo na ngayong matukoy kung o hindi upang mai-animate ang elemento. Sa kasong ito nagpasya akong ipakita ang kahon ng Input na may kadalian sa at nagpunta sa default na halaga ng tagal ng 300ms.
Gusto ko rin na pindutin ang pindutan ng tungkol sa 65 pixels sa kanan kapag ito ay na-click. Pinili ko ang pindutan, binuksan ang panel ng Mga Pakikipag-ugnayan at piniling Bagong Pakikipag-ugnayan . Ginamit ko ang mga setting na ito:
- Pag-trigger : Mag-click
- Aksyon: Ilipat Sa pamamagitan ng
- Ilipat ang Direksyon : 65 px sa x axis
- Animation : Linear
- Tagal: 300 ms
Upang alisin ang isang pakikipag-ugnayan piliin ang elemento at buksan ang panel ng Mga Pakikipag-ugnayan. Piliin ang pakikipag-ugnayan sa panel at i-click ang Trash Can upang tanggalin ito.
09 ng 09
Paano Upang Subukan ang Iyong Pahina Sa UXPin
Dahil sa ang katunayan ikaw ay nagtatrabaho sa browser, ang pagsusuri ay simpleng patay. I-click ang button na Disenyo ng Simulate . Magbubukas ang pahina sa browser at maaari mong subukan ang paraan. Magkakaroon din ng isang panel na idinagdag sa kaliwang bahagi ng pahina na nagbibigay-daan para sa Mga Komento, isang Mapa ng Site kung maraming mga pahina, Pagsubok sa Kakayahan, Pamamahagi ng Live, Pag-edit at pagbalik sa Dashboard.
Sa ibaba ng pahina ay isa pang maliit na panel na nagpapahintulot sa iyo na ipakita ang mga elemento ng Interactive, ipakita o itago ang mga komento at ibahagi ang link sa proyekto sa iba.