Skúsenosti s Adobe skúsenosťami, tipy a techniky

01 z 07

Skúsenosti s Adobe skúsenosťami, tipy a techniky

Keď spoločnosť Adobe uviedla skúsenosť s dizajnom ako verejný náhľad , spoločnosť dosiahla dve skôr úžasné výkony súčasne. Po prvé, vyčlenili priestor na rozvíjajúcom sa trhu softvérového prototypu. Po druhé, vytvorili príležitosť pre používateľov hrať s "nedokončenou prácou" a umožňujú používateľom ovplyvňovať tento pokrok. Teraz, keď bola aplikácia k dispozícii niekoľko mesiacov, myslela som si, že by bolo vhodné podeliť sa o nejaké triky, tipy a techniky skúseností s návrhom.

Ale najprv vás možno zaujímalo, čo sa myslí ako Prototyping Software. Medzi hlavných hráčov v tomto priestore patria Proto.io, Princíp, UXPin, Atomic.io , Skúsenosti s dizajnom a InVision. Na rozdiel od aplikácií ako Sketch 3, Photoshop a Illustrator, kde sa vytvárajú statické návrhy, tieto grafické editory predstavujú interaktivitu, pohyb a ďalšie prvky bežné v dnešnom mobilnom a webovom dizajnovom priestore.

S nárastom mobilného a nevyhnutného zamerania na používateľa v podobe laseru už nie je postačujúce, aby návrhár rozbiť niekoľko nákresov, vytiahol niekoľko komponentov a potom uvoľnil projekt alebo ho nahrať na webový server. UI / UX pracovný postup zásadne zmenil veci. Každý krok procesu, od identifikácie užívateľa, náčrtov, drôtov, modelov a prototypov, je teraz predmetom rozsiahleho testovania používateľov.

Je to posledná fáza - prototypovanie - kde sú body bolesti objavené a fixované predtým, než sa projekt presunie do konečnej produkcie. To je miesto, kde je interakcia, pohyb, prechod obrazovky a umiestnenie všetkého na obrazovke tak kritické. Problémy a problémy nemožno jednoducho zobraziť ako statický obrázok alebo vysvetliť slovne. Koniec koncov, tieto výrobky sú pre skutočných ľudí. Namiesto toho, aby sa všetko presunulo na kód, proces prototypovania sa čoraz častejšie realizuje pomocou grafického softvéru určeného len na tento účel. Je jednoduchšie opraviť chybu, nahradiť obrázok, prepísať nejaký text, presunúť tlačidlo a tak ďalej pomocou vizuálneho editora ako neustále prepisovanie a ladenie kódu.

V skutočnosti sa tento softvér stal kľúčovým komponentom dnešného dizajnového a vývojového prostredia "Rapid Prototyping".

S tým povedal, poďme sa pobaviť s Experience Design.

02 z 07

Vytvorte cieľový pin s jednoduchým kruhom v aplikácii Adobe Experience Experience

Jedným čistým aspektom XD je jeho použitie nástrojov na kreslenie vektorov. Nepodarilo sa nájsť ikonu? Žiaden problém. Prejdite svoj vlastný. Tu je postup:

1. Vyberte nástroj Ellipse a stlačením tlačidiel Option / Alt-Shift nakreslite kruh.
2. S vybratým kruhom nastavte farbu Vyplniť na hodnotu FF0000 a okraj na hodnotu "none" vo vlastnostiach.
3. Dvakrát kliknite na kruh, čím zobrazíte body ukotvenia. Presuňte spodnú kotvu smerom nadol.
4. Dvakrát kliknite na vybraný bod ukotvenia a krivky sa nahradia čiarami.
5. Nakreslite ďalší malý kruh s bielou výplňou a bez stoku. Presuňte ho do polohy a vyberte kolík a kruh. V paneli Zarovnať v hornej časti Vlastnosti kliknite na tlačidlo Horizontálne centrum a vytvorí sa Pin.

03 z 07

Vytvorte rozostrenie pozadia v aplikácii Adobe Experience Design

Je bežné mať text alebo iný obsah na pozadí pozadia. Problémom je, že obraz, častejšie než je, prevyšuje obsah nad ním. Jedným zo spôsobov riešenia tohto problému je rozmazanie obrazu pozadia. Môžete rozmazať obraz vo Photoshope alebo inom softvéri na úpravu obrázkov, ale toto je trochu neefektívne, najmä preto, že XD teraz môže túto úlohu zvládnuť pre vás. Tu je postup:

1. Vytvorte novú kresbu a pridajte pozadie na pozadí.
2. Vyberte nástroj Obdĺžnik a nakreslite obdĺžnik nad obrázkom. S vybratým obdĺžnikom nastavte možnosť Vyplniť na bielu a zdvihnutie na hodnotu Žiadne.
3. Ak je vybraný obdĺžnik, v paneli vlastností vyberte položku Rozmazanie pozadia . Tri posúvače sú rozmazané množstvo, jas a opacita. Tu je to, čo robia:

• Rozmazaná veľkosť: Upravuje rozmazanie obrazu pod tvarom. Maximálna hodnota je +50.
• Jas: Upravuje zvýraznenia a tieň v obraze. Minimálna hodnota je -50 a maximálna hodnota je +50.
• Neprístupnosť: ovplyvňuje priehľadnosť tvaru a viditeľnosť obrazu pod tvarom. Hodnoty sa pohybujú od 0% do 100%.

Ak naozaj chcete "zmeniť veci", zmeniť farbu tvaru a prehrať s hodnotou Opacity zmeniť vzhľad obrazu.

04 z 07

Vytvorte Scrim v aplikácii Adobe Experience Design

Spoločným problémom s návrhom sú prvky prvkov rozhrania, ktoré musia byť bežnou farbou, ale sú stratené, keď sa nachádzajú na pozadí pozadia alebo na plnej farbe. Riešením je škrabka. Skriňa je mierne nepriehľadný gradient umiestnený medzi prvkom rozhrania a pozadím. To je ľahké dosiahnuť v XD. Tu je postup:

1. Vytvorte si kresbu v XD, pridajte obrázok a skopírujte a prilepte elementy rozhrania z príslušnej UI Kit - File> Open UI Kit ... - do výkresovej dokumentácie. Vo vyššie uvedenom obrázku je zložitá viditeľnosť stavového panela a lišty aplikácií.
2. Vyberte nástroj Obdĺžnik a nakreslite obdĺžnik. V paneli Vlastnosti zvoľte možnosť Vyplniť a vyberte položku Gradient z pop-up v Pole na výber farieb. Nastavte prechodové farby na čiernobielo. Nastavte hodnotu A - Opacita- na hodnotu 60% a hodnotu B biele A na 0%.
3. S vybratým obdĺžnikom vyberte položku Objekt> Usporiadať> Odoslať späť . Prvky rozhrania sú teraz viditeľné na obrázku.

05 z 07

Vytvorte avatar Avatar v aplikácii Adobe Experience Design

Spoločný dizajnový vzor sa nachádza v aplikáciách Chat, kde si ľudia hovoria a na obrazovke sa zobrazí obrázok reproduktora. Tieto avatary sú väčšinou obrazy, ktoré boli maskované. Je mŕtve jednoduché to dosiahnuť v XD. Tu je postup:

1. Začíname s obrázkom a kruhom alebo iným tvarom na kreslici. Kruh môžete vyplniť ľubovoľnou farbou. Čo nemusíte robiť, je pridať farbu tahu. Pri vytváraní efektu zmizne, tak prečo sa obťažujem. Ak potrebujete prerušiť kruh, skopírujte ho do schránky.
2. Presuňte kruh na obrázok a vyberte obrázok aj kruh. S vybratými objektmi botu vyberte položku Objekt> Maska s tvarom . Keď uvoľníte myš, Avatar sa vytvorí. Odtiaľ môžete zmeniť veľkosť.
3. Ak potrebujete pridať zdvih, vložte kruh umiestnený vo schránke na kreslicu plochu. S vybratou kópiou vypnite vyplnenie vlastnosti a pridajte farbu a šírku tahu. Ak ich chcete zarovnať, vyberte obidva objekty a kliknite na tlačidlo Zarovnať v strede v možnosti Zarovnať v hornej časti panelu vlastností.
4. Ak chcete fotografiu presunúť v maske, dvakrát kliknite na masku. Zobrazí sa obraz a tvar masky. Kliknite na obrázok a presuňte ho do polohy. Keď uvoľníte myš, obraz bude vo svojej novej polohe vnútri masky.

06 z 07

Zahrajte si s Adobe Experience Design Artboards

Skúsenosti s dizajnom Skúsenosti s dizajnom nie sú len pre vás, aby ste umiestnili obsah. Aj oni môžu byť manipulovaní. Tu je niekoľko vecí, ktoré môžete urobiť:

1. Ak potrebujete verziu kresby na šírku a na výšku, duplikujte výkresovú tabuľu a s vybratým duplikátom kliknite na tlačidlo na šírku v paneli Vlastnosti. Kresba sa zmení na orientáciu na šírku. Ak má Artboard na nej obsah, kliknite na názov Artboard a na paneli Vlastnosti sa objavia vlastnosti Artboard.
2. Ak chcete pridať vlastnú farbu do umelej lišty, a projekt, ak to chcete urobiť, vyberte kresbu Artboard a kliknite na čiaru Fill color v časti Appearance v paneli Properties. Zadajte hexadecimálnu hodnotu farby a kliknite na znamienko +. Farba sa pridá ako vlastná farba. Ak chcete túto farbu aplikovať inde, vyberte objekt a kliknite na vlastný farebný čip a aplikujte farbu.
3. Artboardy môžu byť vertikálne posúvateľné. Ak to chcete urobiť, vyberte kreslicu dosku a zmeňte jej výšku buď na paneli Vlastnosti, alebo ťahaním spodnej časti kresliacej lišty nadol. V oblasti Posúvanie na paneli vlastností zvoľte vertikálne z pop-up menu a zadajte výšku výrezu pre obrazovku. Táto prerušovaná modrá čiara zobrazuje spodnú časť výrezu. Ak chcete otestovať, kliknite na tlačidlo Prehrať a prejdite. Ak chcete vypnúť posúvanie, v rozbaľovacej ponuke Rolovanie vyberte možnosť Žiadne.

07 z 07

Upravte súpravu mobilného používateľského rozhrania v aplikácii Adobe Experience Design

Experience Experience obsahuje UI Kit pre vývoj aplikácií iOS, Android a Windows UI. Keď ich prvýkrát otvoríte, možno si myslíte, že sú naozaj dobre nastavené. Nie tak celkom - každý z týchto kusov je plne editovateľný. Dozvieme sa tým, že postavíme drôtovú kostru pre Android.

1. Začnite výberom nástroja Artboard a výberom aplikácie Android Mobile v sekcii Google v paneli Vlastnosti .
2. Vyberte Súbor> Otvoriť UI Kit> Materiál Google . Otvorí sa to sada Material UI Kit. Zvoľte zväčšovacie sklo a označte grafickú lištu . Rád by som začal s týmto, pretože mi dáva návody na správne umiestňovanie prvkov rozhrania na obrazovke. Ak kliknete na jednu z modrých pruhov, uvidíte, že je uzamknutá. Kliknutím na zámok pripojený ku každému z nich ho odomknete . Umiestnite kreslicu kresbu a skopírujte výber do schránky. Vráťte sa do svojho dokumentu a prilepte obrazovku na kresbu.
3. Kliknite raz na paneli aplikácií, ktorý je umiestnený v hornej časti grafickej plochy. Všimnite si, ako si ho môžete vybrať. Vyberte položku Objekt> Usporiadať> Bring to Front. Váš výber je teraz nad vodítkami obrazovky. Mali by ste povedať, že každý z prvkov na obrazovke je možné upravovať.
4. Dvakrát kliknite na Stavový riadok v hornej časti a v paneli Vlastnosti a na položku Fill color na 455A64 . Dvakrát kliknite na panel App a nastavte jej na 607D8B. Mali by ste povedať, že každý prvok v používateľskej zostave môže byť upravený tak, aby spĺňal špecifikácie farby projektu.
5. A čo ikony? Tu je postup, ako zmeniť ich farbu. Dvakrát kliknite na srdce a vyberte ho. Ak sa pozriete na panel Vlastnosti, môžete predpokladať, že výber nemôžete upraviť. Nie tak celkom. Dvakrát kliknite na srdce ešte raz . Vlastnosti sa otvoria a zmeníte farbu výplne na hodnotu FF0000. Opakujte tento dvojitý klikací trik pre zvyšné ikony a text.