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ť.
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.
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 09Ako pridať prvok na stránku UXPin
Na začiatok som pretiahol prvok Box na povrch návrhu a keď som uvoľnil myš, Panel Vlastnosti otvorí. 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 09Ako pridať a formátovať text v UXPin
Ak chcete pridať text, presuňte textový element na povrch návrhu a zadajte text. Kliknite na Vlastnosť textu , čím otvoríte vlastnosti písma a formátujete text. Ak potrebujete blok fiktívneho textu, pridajte textový prvok a kliknite na GENERÁCIU LOREM IPSUM vo vlastnostiach písma.
06 z 09Ako pridať obrázok na stránku UXPin
Existuje niekoľko spôsobov, ako túto úlohu splniť. Môžete použiť Image Tool v paneli s nástrojmi pridajte obrázok z knižnice alebo jednoducho pretiahnite obrázok z pracovnej plochy na prvok na konštrukčnom povrchu, ako je to znázornené vyššie.
07 z 09Ako pridať tlačidlo na stránku UXPin
Aj keď je prvok tlačidla, zadávanie " gombík " do Vyhľadávanie 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 09Ako 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. S vybraným prvkom Vstup kliknite na tlačidlo Vlastnosti a, keď Vlastnosti prvku kliknite na tlačidlo viditeľnosť tlačidlo - okuliare - v pravom hornom rohu panelu.
Vyberte tlačidlo a kliknite na tlačidlo Tlačidlo interakcií - Lightning bolt - v 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 vybral Nová interakcia, Tieto nastavenia som použil:
- spúšť: Kliknite na
- akcie: Presunúť
- Presuňte smer: 65 px na osi x
- animácie: Lineárne
- doba trvania: 300 ms
Ak chcete odstrániť interakciu, vyberte prvok a otvorte panel Interakcie. Vyberte interakciu v paneli a kliknutím na koš na odpad môžete odstrániť.
09 z 09Ako testovať svoju stránku v UXPin
Vzhľadom na to, že pracujete v prehliadači, testovanie je jednoduché. Kliknite na tlačidlo Simulovať dizajn Tlačidlo. 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.
