01 sa 09
Unsaon Ang Pagpasugod sa UXPin
Sa atong pagbalhin sa nataran sa mobile design, app design ug responsive design adunay nagkadugang nga pag-focus sa UX (User Experience) ug wireframing , interactive prototyping ug mockups. Adunay usa ka tonelada nga mga galamiton nga gitumong dinhi niining lugara ug ilang gipadagan ang bug-os nga gamut gikan sa komplikado, hagdan nga punoan nga mga behemoths nga diyutay ra ug halos mapuslanon. Usa sa mga himan nga nakakuha sa akong mata mao ang UXPin tungod kay kini gimugna sa mga tigdesinyo alang sa mga tigdesinyo.
Sa dili pa kita magpadayon ... usa ka caveat. Kon ang imo usa ka organisasyon nga mas gusto nga makaangkon sa software, ang UXPin dili alang kanimo. Ang tanan nga trabaho nga gibuhat sa niini nga app gihimo sa browser ug ang mga proyekto nga imong gitipigan naluwas sa imong account.
Aron makasugod sa UXPin ikaw maglansad og browser ug paingon sa UXPin. Gikan dinhi mahimo ka magpalista alang sa usa ka Free Trial o maghimo alang sa usa ka binulan nga plano base sa imong gipaabut nga panginahanglan. Ang proseso sa pagparehistro dali ra ug sa higayon nga imong gi-set ang imong User Name ug Password, imong andam na nga magsugod.
02 sa 09
Unsaon Pagsugod Usa ka Proyekto sa UXPin
Kon mag-log in mo moabot sa Dashboard ug, gikan dinhi makahukom ka paghimo og bag-ong wireframe, usa ka bag-ong mobile nga proyekto o proyekto nga Responsive Web Design. Adunay mga plug-in usab alang sa UXPin nga magtugot kanimo sa pagdala sa imong mga proyekto sa Photoshop o Sketch. Alang niini Unsaon Ko Paghimo og usa ka bandera nga adunay pipila ka teksto ug idugang ang usa ka button sa email ngadto sa bandera. Aron mahimo kini gipili nako ang Create a new wireframe.
03 sa 09
Unsaon Paggamit Ang UXPin Interface
Ang Disenyo nga Surface gibungkag ngadto sa upat ka mga dapit. Diha sa itom nga dapit sa wala ang serye sa mga himan nga makapauli ka sa dashboard, buksan ang mga Elemento nga imong gamiton, ablihi ang Smart Elements panel, pangitaa ang mga elemento, idugang ang mga nota sa panid ug idugang ang mga sakop sa team. Sa ubos usa ka buton nga nagbukas sa usa ka mubo nga panudlo, lain nga nagtugot kanimo sa pag-access sa imong account ug sa usa nga nag-access sa FAQ, maghangyo ka sa mga pangutana ug gani maghatag og feedback.
Diha sa asul nga dapit sa ibabaw ang usa ka serye sa mga himan ug mga kabtangan. Ang mga darker nga mga buton sa tuo nga kilid nagtugot kanimo sa pag-usab sa imong disenyo, pag-adjust sa mga setting sa proyekto, pagpaambit sa panid ug paghimo sa usa ka in-browser nga simulation sa panid.
Ang panel sa Mga Elemento mao ang imong gikuha ang mga piraso ug mga piraso alang sa Design Surface, ngalanan ang imong proyekto ug idugang o kuhaa ang mga panid.
Ang librarya sa Elemento usa ka maanindot nga katingala alang sa mga UX nga tigdesinyo. Kini nga pop-up makapili nimo gikan sa anon 30 ka mga librarya gikan sa iOS ngadto sa Android Lolipop Maingon nga ikaw adunay access sa Bootstrap ug Foundation nga mga elemento uban sa Font Awesome icon, Gesture nga mga icon alang sa mobile ug usa ka koleksyon sa Social Widgets.
04 sa 09
Unsaon Pagdugang Usa ka Sangkap Ngadto sa UXPin nga panid
Aron masugdan akong giguyod ang Box element ngadto sa disenyo nga nawong ug, sa dihang gibuhian ko ang mouse, ang Properties panel moabli. Ang mga Properties button mopaila kanimo sa ngalan sa elemento ug ipahimutang ang gitas-on sa gilapdon sa elemento ug ang mga posisyon sa posisyon. Mahimo usab nimo nga idugang ang padding sa elemento, libut sa mga eskina ug i-adjust ang opacity. Ang pag-klik sa Background Color button moabli sa RGBA color picker.
Mahimo ka usab mag-assign sa usa ka font, utlanan ug sumbanan sa pinili nga elemento. Ang Lightning Bolt naghatag kaninyo sa abilidad sa pagdugang sa interactivity ngadto sa usa ka pinili nga elemento.
05 sa 09
Unsaon Pagdugang Ug I-format ang Teksto Sa UXPin
Aron makadugang sa teksto, i-drag ang elemento sa text sa disenyo nga nawong ug ipasulod ang imong teksto. I-klik ang button sa Property sa Text aron maablihan ang mga kabtangan sa Font ug i-format ang imong teksto. Kon kinahanglan nimo ang usa ka block sa dummy text, pagdugang og text element ug i-klik ang GENERATE LOREM IPSUM button sa Font properties.
06 sa 09
Unsaon Pagdugang Usa ka Imahe Ngadto sa UXPin Page
Adunay duha ka mga paagi aron matuman kini nga buluhaton. Mahimo nimong gamiton ang Imahe sa Imahe sa toolbar, idugang ang usa ka elemento sa Imahe gikan sa Library o i-drag ug i-drop ang usa ka imahe gikan sa imong desktop ngadto sa elemento sa disenyo sa ibabaw sama sa gipakita sa ibabaw.
07 sa 09
Unsaon Pagdugang Usa ka Butang Sa UXPin Page
Bisag adunay elemento sa Button, pagsulod sa " Button " sa Search area, ingon sa gipakita sa ibabaw, gibuksan ang tanang mga buton nga makita sa tanang mga Librarya. Gitahi ang usa nga nagtrabaho alang kanimo ngadto sa disenyo sa nawong ug gamiton ang mga Properties sa pag-usab sa kolor, sa font, ug bisan sa Border radius. Aron mausab ang teksto sa sulod sa buton, i-click sa makausa sa teksto ug isulod ang bag-ong teksto.
08 sa 09
Unsaon Pagdugang sa Interactivity ngadto sa usa ka pahina sa UXPin
Dili kini sama ka komplikado kay kini unang makita. Alang sa input sa email, nagdugang ko og input element, gibag-o kini, misulod sa teksto ug giporma ang teksto. Uban sa input elemento nga napili i-klik ang Properties button ug, sa diha nga makita ang Element properties makita ang Visibility button - ang eyeball - sa ibabaw nga tuo nga bahin sa panel.
Pilia ang butones ug i-klik ang Button sa mga Interaksi - ang Lightning Bolt- sa mga kabtangan. Pag-abli sa panel sa Interaksi, pilia ang New Interaction. Pagpili sa Click gikan sa Trigger pop down. Sa Action area pilia ang Show Element. Gipangutana ka karon kung unsang Elemento ang ipakita. Pag-click sa makausa sa gunsite ug i-klik ang Input element. Uban sa giila nga elemento, mahimo nimong mahibal-an karon kung mapalong ba o dili ang elemento. Sa kini nga kaso nakahukom ko nga ipakita ang Input box nga may kasayon sa ug miadto sa default nga gidugay nga gidugangan nga 300ms.
Gusto usab nako nga ang pindutan molihok mga 65 ka pixel sa tuo kon kini i-klik. Gipili nako ang buton, gibuksan ang panel sa Interaction ug gipili ang New Interaction . Gigamit nako kini nga mga kahimanan:
- Trigger : Click
- Aksyon: Pagbalhin By
- Move Direction : 65 px sa x axis
- Animation : Linear
- Gidugayon: 300 ms
Aron makuha ang interaction pagpili sa elemento ug ablihi ang Interaction panel. Pilia ang interaksiyon sa panel ug i-klik ang Trash Can aron makuha kini.
09 sa 09
Unsaon Pagsulud sa Imong Pahina Sa UXPin
Tungod sa kamatuoran nga nagtrabaho ka sa browser, ang pagsulay sayon ra kaayo. I-klik ang Button sa Simulate Design . Ang panid mag-abli sa browser ug mahimo ka nga sulayan ang paagi. Adunay usab usa ka panel nga idugang sa wala nga bahin sa panid nga nagtugot alang sa mga Comment, usa ka Mapa sa Site kon adunay daghang mga panid, Usability Testing, Live Sharing, Editing ug usa ka pagbalik sa Dashboard.
Sa ubos sa panid usa ka laing gamay nga panel nga nagtugot kanimo sa pagpakita sa Interactive nga mga elemento, ipakita o itago ang mga komentaryo ug ipakigbahin ang link sa proyekto ngadto sa uban.