01 of 09
Hoe't jo begjinne mei UXPin te begjinnen
As wy nei it ryk fan mobyl ûntwerp ferpleatse, app ûntwerp en responsive ûntwerp is der in tanimmend fokus op UX (User Experience) en wireframing , ynteraktive prototyping en mockups. Der binne in ton fan arken dy't derop rjochte binne op dizze niche en se fiele de folsleine gamut út komplek, funksjonele ladenheime nei sparse en kaak nuttich. Ien fan 'e arken dy't my yn' e eagen fûn is UXPin gewoan omdat it ûntwikkele is troch ûntwerper foar ûntwerper.
Foardat wy nei foaren rinne ... in behertiging. As jo in organisaasje dy't de software foarkomt, dan is UXPin net foar jo. Alle wurken yn dizze app wurde dien yn 'e browser en de projekten dy't jo bewarje wurde bewarre wurde op jo akkount.
Om UXPin te begjinnen begjinne jo in blêder op en stjoere nei UXPin. Fan hjir ôf kinne jo jo oanmelde foar in frije probleem of jo organisearje in moanneplan op basis fan jo ferwachte need. It oanmeldenproses is hiel maklik en as jo jo brûkersnamme en wachtwurd ynsteld hawwe, binne jo klear om te begjinnen.
02 of 09
Hoe't jo in projekt begjinne yn UXPin
As jo ynlogge dan komme jo by it Dashboard en kinne fanôf hjirmei beslute om in nije wireframe te meitsjen, in nije mobile projekt of in Responsive Web Design projekt. Der binne ek plug-ins foar UXPin dy't jo bringe yn jo Photoshop of Sketch-projekten. Hjirfoar sil ik in flagel mei wat tekst meitsje en in e-knop taheakje oan 'e banner. Om dit te ferwêzentlikjen haw ik selektearre in nij draadram oanmeitsje.
03 of 09
Hoe brûk it UXPin-ynterface
De ûntwerpferbining wurdt brutsen yn fjouwer gebieten. Yn it swarte gebiet oan 'e lofter binne in rige ynstruminten dy't jo weromkieze nei it buroblêd, iepenje de eleminten dy't jo brûke, iepenje it paniel Smart Elements, sykje eleminten, tafoegje tafoegje oan de side en taheakje taheaksels. Oan 'e boaiem is in knop dy't in koarte tutorial iepent, in oare dy't jo tagong jout tagong ta jo akkount en in oar dy't de FAQ's tagong, lit jo fragen stelle en sels feedback jaan.
Yn it blauwe gebiet lâns de top binne in searje fan ark en eigenskippen. De dûnkerige knoppen op 'e rjochterkant litte jo jo ûntwerp iterearje, de projektynstellingen oanpasse, de side akseptearje en in yn-browser-simulaasje fan' e side dwaan.
It paniel foar eleminten is wêr't jo de bitsjes en stikken foar 'e Designferbining krije, jo projekt neamme en tafoegje of ferwiderje siden.
De bibleteekseleminten binne in noflike ferrassing foar UX-ûntwerper. Dizze pop-up litte jo kieze fan anon 30 biblioteken fanút iOS oant Android Lolipop As jo tagong hawwe ta Bootstrap en Foundation-eleminten tegearre mei de Font Awesome ikoanen, Gesture-ikon's foar mobile en in samling fan Social Widgets.
04 of 09
Wolle jo in elemint taheakje oan in UXPin-side
Om te begjinnen te sluten Ik it Kastel-elemint oan it ûntwerpflak sluten en, as ik de mûs frijljeitsje, iepenet it Eigenskippenpaniel . De knop Eigenskippen lit jo it elemint neame en de eleminten 's breedteheids- en posysjewearden ynstelle. Jo kinne ek padding oan it elemje taheakje, de hoeken ôfsette en de opsetsje oanpasse. Klik op de Eftergrûnkleur knop iepenet in RGBA kleurplaat.
Jo kinne ek in lettertype, grins en patroan oanjaan oan it selekteare elemint. De Blitze Bolt jout jo de mooglikheid om ynteraktiviteit te tafoege oan in selekteare elemint.
05 of 09
Hoe taheakje en tekst te brûken yn UXPin
Om tekst ta te foegjen, ferpleatse it tekstelemel nei it ûntwerpspatroan en ynfiere jo tekst. Klik de teksttype knop om de lettertypen te iepenjen en jo tekst te foarmjen. As jo in blok fan dummy tekst nedich hawwe, taheakje in teksteljocht en klikje op 'e GENERATE LOREM IPSUM knop yn' e Font-eigenskippen.
06 van 09
Hoe kinne jo in ôfbylding taheakje oan in side UXPin
Der binne in pear mooglikheden om dizze taak te meitsjen. Jo kinne it Image-ark yn de arkbalke brûke, in foto-elemint útfiere fan 'e bibleteek, of jo gewoan in ôfbylding fan jo buroblêd nei it elemint te dragjen en ôfbrekke as jo hjirboppe sjen litte.
07 of 09
Hoe kin in knop ta in UXPin side taheakje
Hoewol is der in elemint knop, wêrtroch't " Knop " yn 'e sykgebiet, lykas hjirboppe sjen litten, alle knoppen fûn yn alle biblioteken. Sleep dejinge dy't jo foar it ûntwerpflak wurket en de eigenskippen brûke om de kleur te feroarjen, it lettertype, en sels de Borderradius. Om de tekst yn 'e knop te feroarjen, klik ienris op' e tekst en ynfiere de nije tekst.
08 of 09
Wolle jo interaktiviteit taheakje oan in UXPin-side
Dit is net sa komplisearre as it earst ferskynt. Foar de e-mail-ynfier, haw ik in yngong-elemint tafoegje, it resize, ynsteld en de tekst formulearre. Mei it selekteare ynfier-elemint klikke jo op de knop Properties en as de eigenskippen foar elemint ferskine, klikke jo op de sichtberens knop - de eyeball - yn 'e boppeste rjochte hoeke fan it paniel.
Selektearje de knop en klik op de knop Ynteraksjes - de Blêdwizzen yn 'e eigenskippen. As it paniel ynteraksjes iepen stiet, selektearje New Interaction. Selektearje Klik fan 'e Trigger-pop-op. Yn it Actiongebiet selektearje Element sjen litte. Jo wurde no frege wat elemint sjen litte sil. Klik ienris op 'e gunsite en klikje op it ynfier elemint. Mei it elemint as jo identifisearje, kinne jo no bepale hoe't it elemint animearje of net. Yn dat gefal haw ik besletten om de ynfierkast mei in lûd te sjen en gie mei de standertdirektwearde fan 300ms.
Ik wol ek de knop ha om likernôch 65 piksels te rjochtsjen as it klikke is. Ik haw de knop selektearre, iepene it paniel Interaksjes en selektearre nije ynteraksje . Ik brûkte dizze ynstellings:
- Trigger : klikke
- Aksje: Move By
- Bewurkje Direksje : 65 px op 'e x-ach
- Animation : Linear
- Duration: 300 ms
Om in ynteraksje te ferwiderjen selektearje it elemint en iepenje it paniel Interaksjes. Selektearje de ynteraksje yn it paniel en klik op 'e Jiskefet om it te wiskje.
09 of 09
Hoe jo jo side yn UXPin te testen
Troch it feit dat jo wurkje yn 'e blêder, is it testen deadien ienfâldich. Klikje op 'e knop Simulaasjeûntwerp. De side sil iepenje yn 'e blêder en jo kinne kinne wize. Der sil ek in paniel tafoegje oan de lofter side fan 'e side dy't Korrespondinsje, in side-map, as jo meardere siden hawwe, Usability Testing, Live Sharing, bewurkje en in werom nei it Dashboard.
Oan 'e boaiem fan' e side is in oar lyts paniel dat jo de ynteraktive eleminten sjen litte, sjen litte of ferbergje kommentaar en dielen de projektlink mei oaren.