01 09
Wéi Dir Iech mat UXPin ugefaangen hutt
Wéi mir an de Räich vum mobilen Design réckelen, App Design a reagéiert Design huet et ëmmer méi ugemooss op UX (User Experience) a Draadframing , interaktive Prototypen a Mockups. Et sinn eng Tonne vun Tools déi do u seng Nisch opgeriicht sinn an si féieren den vollen Spektakel vu komplexen, charakteristesche Beemoths ze späicheren an kaum nëtzlech. Ee vun den Tools, déi mäi Aen opgemaach huet ass UXPin einfach, well se vun Designer fir Designers entwéckelt gouf.
Eier mer réckelen ... en Oppositioun. Wann Är ass eng Organisatioun déi d'Software ze besëtzen ass dann UXPin net fir Iech. All d'Aarbechten an dëser App gëtt am Browser gemaach an d'Projeten déi Dir späichere sinn op Äre Kont gespaichert.
Fir mat UXPin ze fänken, brénge mir e Browser a Kapp fir UXPin. Vun hei aus kënnt Dir Iech fir e Gratisprobe registréieren oder e Mount moossen op Ärem anticipéierte Besoin unzepassen. Den Aschreiwungsprozess ass ganz einfach an ech hunn Äert Usernumm a Passwuert geännert, Dir sidd bereet fir se ze begonnen.
02 09
Wéi starten e Projet am UXPin
Wann Dir Iech umellt, kënnt Dir am Dashboard ukommen, an da kënnt Dir entscheeden fir e neie Wireframe, e neien mobilen Projet oder e Responsive Web Design Projet ze erstellen. Et ginn och Plug-Ins fir UXPin, déi Iech erlaabt Iech Är Photoshop oder Sketch Projeten ze bréngen. Fir dat ze maachen Wéi ech e Banner mat e puer Text ze schafen an eng E-Mail Knäppchen op de Banner ze schreiwen. Fir dat ze maachen, hunn ech e neie Kabel.
03 vun 09
Wéi benotzt Dir d'UXPin Interface
D'Design Surface ass op véier Beräicher gebrach. Am schwaarzen Deel op der lénkser Säit sinn eng Rei vun Tools, déi Dir op d'Arméi liesen léisst, d'Elemente benotzen déi Dir benotzt, opmaachen fir d'Panel Smart Elements opmaachen, fir Elementer ze sichen, Notizen un d'Säit eropkréien a Membere vum Team addéieren. Am ënnendrënner ass e Knäppchen, deen e klengt Tutorial mécht, eent wat Dir kënnt op Äre Kont zougänglech maachen an een aneren deen op d'FAQs kënnt, lued Iech Froen an suergt och Feedback.
Am bloe Sekteur laanscht d'Top sinn eng Rei vun Instrumenter an Eegeschaften. Déi donkere Knäppchen op der rietescher Säit erlaaben Iech de Konstruktioun ze kreéieren, d'Projeten agefouert, d'Säiten unzezéien an eng Browser-Simulatioun vun der Säit ze maachen.
De Panel vum Elements ass wou Dir d'Bits an d'Stécker fir d'Design Surface ergraff hutt, Äert Projet nennt oder d'Säiten ofhuele kënnt.
D'Elementbibliothéik ass eng schéin Iwwerraschung fir UX Designer. Dëse Pop-Down léisst Iech aus anon 30 Bibliothéiken reest vu bis zu Android Lolipop. Well Dir hutt Zougang zu Bootstrap an Foundation Elementer zesummen mat den Font Awesome Symbolen, Gesture-Ikonen fir Mobiltelefone an eng Sammlung vun Social Widgets.
04 vun 09
Wéi een Element zu enger UXPin Säit fügen
Fir unzefänken, hunn ech d'Box Element op d'Designfläch gedreckt an wann ech d'Maus maachen, äntweren de Properties Panel . De Knäppchen Properties kënnt Dir Äert Element nennen an d'Breethoch- a Positionswäerter vum Element setzen. Dir kënnt och d'Fëllung vum Element addéieren, d'Ecken verrëngeren an seng Opazitéit maachen. Klickt op d'Background Color-Schaltfläche op en RGBA-Faarf Picker.
Dir kënnt och Schrëft, Grenz a -Muster dem gewielten Element zouweisen. De Blitz Bolt gitt Dir d'Fäegkeet fir interaktiv mat engem gewielte Element ze addéieren.
05 09
Wéi fügen a Formatéieren Text an UXPin
Fir Text ze addéieren, zitt d'Textelement op d'Designfläche zou a fëllt Är Text. Klickt op d' Schaltfläche Text Properties fir d'Schrëftstären opzemaachen an Äre Text ze Formatéieren. Wann Dir e Block of Dummy Text brauch, add een Textelement a klickt op den GENERATE LOREM IPSUM Knäppchen an der Schrëft.
06 vun 09
Wéi Dir e Bild op eng UXPin Säit fügen
Et ginn e puer Weeër fir dës Aufgab ze maachen. Dir kënnt d' Image Tool an der Toolbar, en Element vun der Bibliothéik addieren oder einfach e Bild aus Ärem Desktop op den Element op der Designfläche drécken, wéi et uewen gesitt.
07 vun 09
Wéi kënnt Dir e Knäppchen op eng UXPin Säit fügen
Obwuel et e Knäppelelement gëtt, erënnt " Knäppchen " an de Sichvirgang , wéi et uewe genannt ass, all d'Knäpper an allen Bibliotheken. Verklengt deen deen Iech fir op der Designoberfläche funktionnéiert a benotzt d'Eegeschafte fir d'Faarf, d'Schrëft a souguer de Border Radius ze änneren. Fir Äert Text ze änneren, klickt emol op den Text a gitt den Text.
08 09
Wéi eng Interaktivitéit op eng UXPin Säit ze addelen
Dëst ass net esou komplizéiert wéi et zulescht ufänkt. Fir den E-Mail-Input huet ech en Input-Element addéieren, hunn se mat der Vergréisserung, de Text erfaasst an den Text formatéiert. Mat dem Input Element ausgewielt klickt op de Knäppchen Properties, a wann déi Elemente Properties erscheinen klicken klickt op d' Visibilitéit Knäppel - eyeball - an der oberer rechter Ecke vum Panel.
Dréckt den Knäppchen an klickt op d' Interaktiounsknopper - the Lightning Bolt - an den Eegeschafte. Wann d'Panel Interaktiounen opmaacht, wielt Nei Interaktioun. Klickt op de Trigger Pop op. An der Aktiounsfläche markéiert Element. Dir sidd elo gefrot wat Element fir ze weisen. Klickt eemol op de Gunsite an klickt op den Input-Element. Mat deem Element, deen identifizéiert gëtt, kanns de feststellen datt d'Element ass animéieren oder net sinn. An dësem Fall huet ech beschloss, de Input Box mat enger einfacher ze gesinn an ass mat der Default Dauer vun 300ms gaangen.
Ech wëll och de Knäppchen huelt ongeféier 65 Pixel op der rietser Säit wann et geklickt gëtt. Ech hunn d'Knäppche gewielt, de Panel Interaktiounen geännert an d' New Interaction ausgewielt . Ech hunn dës Astellunge benotzt:
- Trigger : Klickt
- Aktioun: Beweegen
- Riets Richtung : 65 px op der x-Achs
- Animatioun : Linear
- Dauer: 300 ms
Fir eng Interaktioun ze rauszefannen, wielt d'Element an de Panel Interaktiounen opmaachen. Wielt d 'Interaktioun am Panel a klickt op de Trash Can et ze läschen.
09 09
Wéi Dir Är Säit an UXPin testen
Wéinst der Tatsaach sidd Dir am Browser an, ass Tester einfach einfach. Klickt op d'Schaltfläche Simulate Design . D'Säit fänkt am Browser op a kënnt Dir testen. Et gëtt och e Panel op d'Link vun der Säit hinzugefügt, wat Erlaabt Commentairen, e Site Map wann et e puer Säiten ass, Usability Testing, Live Sharing, Editing an e Retour un der Dashboard.
Am ënneschten Deel vun der Säit ass eng aner kleng Panel déi Iech erméiglecht d'Interaktiounsdeel ze weisen, ze kommentéieren oder ze versteieren an de Projet Link mat anere ze verbannen.