01 z 09
Ako sa dostať na začiatok s UXPin
Keď sme sa presunuli do oblasti mobilného dizajnu, dizajnu aplikácie a citlivého dizajnu, stále viac sa zameriava na UX (užívateľské skúsenosti) a wireframing , interaktívne prototypy a mockups. Existuje tona nástrojov, ktoré sú zamerané na túto výklenku a oni bežia v plnej škále od zložitých, funkčné naložené behemoths na riedke a sotva užitočné. Jedným z nástrojov, ktoré som zachytil moje oko je UXPin jednoducho preto, že bol vyvinutý dizajnérmi pre návrhárov.
Predtým, než budeme pokračovať ... výhrady. Ak je vaša spoločnosť, ktorá preferuje vlastniť softvér, potom UXPin nie je pre vás. Všetka práca vykonaná v tejto aplikácii sa vykonáva v prehliadači a ukladané projekty sa ukladajú do vášho účtu.
Ak chcete začať s aplikáciou UXPin, spustite prehliadač a prejdite na UXPin. Odtiaľ sa môžete zaregistrovať na bezplatnú skúšobnú verziu alebo si zariadiť mesačný plán na základe očakávanej potreby. Proces registrácie je pomerne jednoduchý a po nastavení používateľského mena a hesla ste pripravení začať.
02 z 09
Ako spustiť projekt v UXPin
Keď sa prihlásite, prídete na Dashboard a odtiaľ sa môžete rozhodnúť vytvoriť nový drôtový rám, nový mobilný projekt alebo projekt Responsive Web Design. K dispozícii sú tiež plug-iny pre UXPin, ktoré vám umožnia priniesť projekty Photoshop alebo Sketch. Pre toto Vytvoriť banner s nejakým textom a pridať tlačidlo e-mailu na banner. Na tento účel som vybral Vytvoriť nový drôtový rám.
03 z 09
Ako používať rozhranie UXPin
Návrhový povrch je rozdelený na štyri oblasti. V čiernej oblasti vľavo sú rad nástrojov, ktoré vám umožňujú vrátiť sa na palubnú dosku, otvoriť prvky, ktoré použijete, otvoriť panel Smart Elements, vyhľadať prvky, pridať poznámky k stránke a pridať členov tímu. V spodnej časti je tlačidlo, ktoré otvára krátky tutoriál, ďalší, ktorý umožňuje prístup k vášmu účtu a inému, ktorý pristupuje k často kladeným otázkam, položme si otázky a dokonca poskytnite spätnú väzbu.
V modrej oblasti pozdĺž hornej časti je rad nástrojov a vlastností. Tmavšie tlačidlá na pravej strane umožňujú opakovanie vášho návrhu, úpravu nastavení projektu, zdieľanie stránky a simuláciu stránky v prehliadači.
Na paneli Elements je miesto, kde uchopíte kúsky pre návrhový povrch, pomenujete projekt a pridáte alebo odstráňte stránky.
Knižnica Elements je pre dizajnérov UX príjemným prekvapením. Tento pop-up vám umožňuje vybrať si z 30 knižníc, od iOS až po Android Lolipop. Taktiež máte prístup k prvkom Bootstrap a Foundation spolu s ikonami Font Awesome, ikonami Gesture pre mobily a kolekciou Social Widgets.
04 z 09
Ako pridať prvok na stránku UXPin
Na začiatok som pretiahol prvok Box na povrch dizajnu a po uvoľnení myši sa otvorí panel Vlastnosti . Tlačidlo Vlastnosti vám umožňuje pomenovať prvok a nastaviť jeho výšku a polohu. Môžete tiež pridať polstrovanie k prvku, zaokrúhliť rohy a upraviť jeho neprístupnosť. Kliknutím na tlačidlo Farba pozadia sa otvorí výber farieb RGBA.
Môžete tiež priradiť zvolenému prvku písmo, okraj a vzor. Osvetľovací skrutka vám dáva možnosť pridávať interaktivitu k vybranému prvku.
05 z 09
Ako pridať a formátovať text v UXPin
Ak chcete pridať text, presuňte textový element na povrch návrhu a zadajte text. Kliknutím na tlačidlo Vlastnosti textu otvoríte vlastnosti písma a formátujete text. Ak potrebujete blok fiktívneho textu, pridajte textový prvok a kliknite na tlačidlo GENERATE LOREM IPSUM vo vlastnostiach písma.
06 z 09
Ako pridať obrázok na stránku UXPin
Existuje niekoľko spôsobov, ako túto úlohu splniť. Na paneli s nástrojmi môžete použiť nástroj Image Tool , pridať prvok Obrázok z knižnice alebo jednoducho pretiahnuť obrázok z pracovnej plochy na prvok na konštrukčnom povrchu, ako je znázornené vyššie.
07 z 09
Ako pridať tlačidlo na stránku UXPin
Hoci je prvok tlačidla, zadávanie " tlačidla " do oblasti vyhľadávania , ako je uvedené vyššie, otvára všetky tlačidlá nájdené vo všetkých knižniciach. Pretiahnite ten, ktorý pracuje pre vás na povrch návrhu a použite Vlastnosti na zmenu farby, písma a dokonca aj polomer okrajov. Ak chcete zmeniť text vo vnútri tlačidla, kliknite raz na text a zadajte nový text.
08 z 09
Ako pridať interaktivitu na stránku UXPin
Nie je to tak zložité, ako by sa to mohlo na prvý pohľad objaviť. Pre e-mailový vstup som pridal vstupný prvok, zmenil jeho veľkosť, vložil text a formátoval text. Pri zvolenom prvku Vstup kliknite na tlačidlo Vlastnosti a po zobrazení vlastností prvkov kliknite na tlačidlo Viditeľnosť - okuliare - v pravom hornom rohu panelu.
Vyberte tlačidlo a kliknite na tlačidlo Interakcie - blesk Bolt - vo vlastnostiach. Keď sa otvorí panel Interakcie, vyberte položku Nová interakcia. Kliknite na položku Kliknite z popredia spustenia. V oblasti Akcia vyberte položku Zobraziť prvok. Teraz budete požiadaný, ktorý element sa má zobraziť. Jedným kliknutím kliknite na miesto pre prácu s guličkami a kliknite na prvok Vstup. S identifikovaným prvkom môžete teraz určiť, či sa má prvok animovať alebo nie. V tomto prípade som sa rozhodol ukázať vstupnú schránku ľahko a šiel s predvolenou hodnotou trvania 300 ms.
Tiež by som chcel, aby sa tlačidlo po kliknutí presunulo o 65 pixelov doprava. Vybral som tlačidlo, otvoril panel Interakcie a vybrané Nové interakcie . Tieto nastavenia som použil:
- Trigger : Kliknite na
- Akcia: Presuňte sa
- Posun smeru : 65 px na osi x
- Animácia : Lineárna
- Trvanie: 300 ms
Ak chcete odstrániť interakciu, vyberte prvok a otvorte panel Interakcie. Ak chcete odstrániť interakciu, kliknite na paneli a kliknite na koš.
09 z 09
Ako testovať svoju stránku v UXPin
Vzhľadom na to, že pracujete v prehliadači, testovanie je jednoduché. Kliknite na tlačidlo Simulate Design . Stránka sa otvorí v prehliadači a môžete testovať. Na ľavej strane stránky sa pridá aj panel, ktorý umožňuje komentáre, mapa stránok, ak existuje viac stránok, testovanie použiteľnosti, zdieľanie naživo, úprava a návrat na informačnú tabuľku.
V dolnej časti stránky je ďalší malý panel, ktorý vám umožňuje zobraziť interaktívne prvky, zobraziť alebo skryť komentáre a zdieľať projektový odkaz s ostatnými.