Adobe Experience Design Triky, tipy a techniky

01 z 07

Adobe Experience Design Triky, tipy a techniky

Když společnost Adobe představila Experience Design jako veřejný náhled , společnost dosáhla současně dvou úžasných výkonů. Za prvé, vyčlenily prostor na nově vznikajícím trhu s prototypovým softwarem. Za druhé, vytvořili uživatelům příležitost hrát s "nedokončeným" a umožňují uživatelům ovlivňovat tento pokrok. Nyní, když byla aplikace k dispozici na několik měsíců, myslela jsem si, že by bylo vhodné se podělit o některé triky, tipy a techniky Experience Design.

Ale nejprve se možná ptáte, co se rozumí Prototypovým softwarem. Mezi hlavní hráči v tomto prostoru patří Proto.io, Princip, UXPin, Atomic.io , Experience Design a InVision. Na rozdíl od aplikací, jako jsou Sketch 3, Photoshop a Illustrator, kde jsou vytvářeny statické návrhy, představují tyto grafické editory interakci, pohyb a další prvky běžné v dnešním mobilním a webovém designu.

Se vzestupem mobilního a nevyhnutelného laserového zaměření na Uživatele už nestačí, aby si návrhář rozbalil několik nákresů, vytáhl několik kompozitů a pak uvolnil projekt nebo ho nahrabil na webový server. Pracovní postup UI / UX zásadně změnil věci. Každý krok procesu, od identifikace uživatele, skic, drátových rámů, modelů a prototypů, je nyní podroben rozsáhlému testování uživatelů.

Je to poslední fáze - prototyp - kde jsou body bolesti objeveny a fixovány předtím, než se projekt přesune do finální produkce. To je místo, kde je kritika interaktivita, pohyb, přechody obrazovky a umístění všechno na obrazovce. Problémy a problémy nelze jednoduše zobrazit jako statický obraz nebo vysvětlit slovně. Koneckonců, tyto výrobky jsou pro skutečné lidi. Spíše než přesunout vše do kódu, proces prototypování se stále častěji provádí grafickým softwarem, který je určen právě pro tento účel. Je snadnější opravit chybu, nahradit obrázek, přepsat nějaký text, přesunout tlačítko a tak dále pomocí vizuálního editoru než neustále přepisovat a ladit kód.

Ve skutečnosti se tento software stal klíčovým prvkem v dnešním designu a vývojovém prostředí "Rapid Prototyping".

S tím jsme se bavili s Experience Design.

02 z 07

Vytvořte cílový pin s jednoduchým kruhem v aplikaci Adobe Experience Experience

Jeden čistý aspekt XD je jeho použití vektorových kreslících nástrojů. Nelze najít ikonu? Žádný problém. Přetočte své vlastní. Zde je návod:

1. Vyberte nástroj Elipsa a stisknutím klávesy Option / Alt-Shift nakreslete kružnici.
2. Pomocí vybraného kruhu nastavte barvu Výplně na FF0000 a okraj na hodnotu "none" ve vlastnostech.
3. Poklepáním na kruh zobrazte kotevní body. Přitáhněte dolní kotvu směrem dolů.
4. Poklepejte na vybraný bod ukotvení a křivky se nahradí řádky.
5. Nakreslete další malý kruh s bílou výplní a bez stoku. Přesuňte jej do polohy a vyberte kolík a kruh. V panelu Zarovnat v horní části vlastností klikněte na tlačítko Horizontální střed a vytvoří se Pin.

03 ze dne 07

Vytvoření rozostření pozadí v prostředí Adobe Experience Design

Je běžné mít text nebo jiný obsah nad obrazem na pozadí. Problémem je, že obraz, častěji než ne, nadhodnocuje obsah nad ním. Jedním ze způsobů řešení tohoto problému je rozmazání obrazu na pozadí. Obraz můžete rozmazat ve Photoshopu nebo v jiném softwaru pro úpravu obrázků, ale to je poněkud neúčinné, zejména proto, že XD nyní může pro vás tuto práci zvládnout. Zde je návod:

1. Vytvořte novou kreslicí desku a přidejte obrázek na pozadí.
2. Vyberte nástroj Obdélník a na obrázku nakreslete obdélník. Pokud je vybrán obdélník, nastavte položku Vyplnit na bílou a zdvihněte na hodnotu Žádný.
3. Pokud je vybrán obdélník, v panelu vlastností vyberte položku Rozostření pozadí . Tři posuvníky jsou rozostření, jas a opacita. Tady je to, co dělají:

• Velikost rozostření: Upravuje rozmazanost obrazu pod tvarem. Maximální hodnota je +50.
• Jas: Upravuje zvýraznění a stíny v obraze. Minimální hodnota je -50 a maximální hodnota je +50.
• Neprůhlednost: ovlivňuje průhlednost tvaru a viditelnost obrazu pod tvarem. Hodnoty se pohybují od 0% do 100%.

Pokud opravdu chcete "změnit věci", změňte barvu tvaru a přehrajte s hodnotou Opacity, abyste změnili vzhled obrazu.

04 z 07

Vytvořte aplikaci Scrim v prostředí Adobe Experience Design

Společným problémem návrhu jsou elementy prvků rozhraní, které mají být společné barvy, ale jsou ztraceny, když jsou umístěny na pozadí obrázku nebo na plné barvě. Řešením je plátno. Scrim je poněkud neprůhledný gradient umístěný mezi prvkem rozhraní a pozadím. To je snadné dosáhnout v XD. Zde je návod:

1. Vytvořte kreslicí desku v XD, přidejte obrázek a zkopírujte a vložte prvky rozhraní z příslušné UI Kit - File> Open UI Kit ... - do výkresové dokumentace. Ve výše uvedeném obrázku se z fotografické stránky liší stavový řádek a panel aplikace.
2. Vyberte nástroj Obdélník a nakreslete obdélník. V panelu Vlastnosti vyberte možnost Vyplnit a vyberte možnost Gradient (Gradient) v rozbalovací nabídce Výběr barev (Color Picker). Nastavte gradientní barvy na Černobílé. Nastavte hodnotu A - Neprůhlednost - na 60% a hodnotu B bílý A na 0%.
3. Při výběru obdélníku vyberte Objekt> Uspořádat> Odeslat zpět . Prvky rozhraní jsou nyní viditelné na obrázku.

05 z 07

Vytvořte obrázek Avatar v prostředí Adobe Experience Design

Společný návrhový vzor se nachází v aplikacích chatu, kde si lidé mluví, a na obrazovce se objeví obrázek reproduktoru. Tyto avatary jsou většinou obrazy, které byly maskované. Je mrtvé jednoduché to udělat v XD. Zde je návod:

1. Začínáte obrazem a kruhem nebo jiným tvarem na kreslicí desce. Kruh můžete vyplnit libovolnou barvou. To, co nemusíte dělat, je přidat barvu tahu. Při vytváření efektu zmizí, tak proč se obtěžovat. Pokud potřebujete kroužku stokovat, zkopírujte ji do schránky.
2. Přesuňte kružnici na obrázek a vyberte obrázek i kruh. Při výběru objektů bot vyberte Objekt> Maska s tvarem . Když uvolníte myš, vytvoří se Avatar. Odtud můžete měnit velikost.
3. Pokud potřebujete přidat tah, vložte kruh umístěný ve schránce na kreslicí desku. S vybranou kopií vypněte vyplnění vlastností a přidejte barvu a šířku tahu. Chcete-li je zarovnat, vyberte obě objekty a klepněte na tlačítka Zarovnat střed v možnostech Zarovnat v horní části panelu vlastností.
4. Pokud chcete posunout fotografii v masce, klikněte dvakrát na masku. Zobrazí se obrázek a tvar masky. Klikněte na obrázek a přetáhněte jej na místo. Když uvolníte myš, obrázek bude ve své nové pozici uvnitř masky.

06 z 07

Zahrajte si s Adobe Experience Design Artboards

Kreativita Design Experience není jen pro vás, abyste umístili obsah. I oni mohou být manipulováni. Zde je několik věcí, které můžete udělat:

1. Pokud potřebujete verzi kresby na šířku a na výšku, zkopírujte kreslicí desku a s vybraným duplikátem klepněte na panelu Vlastnosti na tlačítko na šířku. Obrazovka se změní na orientaci na šířku. Pokud má Artboard na sobě obsah, klepněte na název Artboard a na panelu Vlastnosti se objeví vlastnosti Artboard.
2. Chcete-li přidat vlastní barvu na kreslicí plochu, a projekt, který má zájem, vyberte kreslicí desku a klepněte na čárku barvy výplně v části Vzhled v panelu Vlastnosti. Zadejte šestnáctkovou hodnotu barvy a klepněte na znaménko +. Barva bude přidána jako vlastní barva. Chcete-li tuto barvu aplikovat jinde, vyberte objekt a klepněte na čip Vlastní barva.
3. Umělecké štítky mohou být vertikálně posunovatelné. Chcete-li to provést, vyberte kreslicí desku a změňte její výšku buď na panelech vlastností nebo přetažením dolní části kreslicí plochy směrem dolů. V oblasti Směrovatelnost panelu vlastností vyberte z horního menu vertikální výběr a zadejte výšku výřezu obrazovky. Tato přerušovaná modrá čára zobrazuje dolní část výřezu. Chcete-li jej otestovat, klikněte na tlačítko Přehrát a posuňte se. Chcete-li vypnout rolování, vyberte v rozevíracím seznamu Scrolling možnost Žádný.

07 z 07

Upravte sadu Mobile UI v aplikaci Adobe Experience Design

Experience Design obsahuje sadu UI pro vývoj aplikací iOS, Android a Windows UI. Když je poprvé otevřete, možná si myslíte, že jsou dobře zavedené. Ne docela - každý z kusů v těchto sadách je plně upravitelný. Podívejme se na to, že budeme postavit drátový systém Android.

1. Začnete tím, že vyberete nástroj Artboard a vyberete Android Mobile v sekci Google v panelu Vlastnosti .
2. Vyberte Soubor> Otevřít soubor UI> Materiál Google . Tím se otevře sada materiálů UI. Zvolte zvětšovací sklo a označte kreslicí prkno . Ráda začínám tímto, protože mi dává návody pro správné umístění prvků rozhraní na obrazovce. Pokud kliknete na jednu z modrých částí, uvidíte, že je uzamčena. Klepnutím na zámek připojený ke každému z nich jej odemknete . Ukažte kreslicí plátno a zkopírujte výběr do schránky. Vraťte se do dokumentu a vložte obrazovku do výkresu.
3. Jedním klepnutím na lištu aplikací umístěte horní část kreslicího plátna. Všimněte si, jak si ji můžete vybrat. Vyberte objekt> Uspořádat> Přivést na přední stranu. Váš výběr je nyní nad Průvodci obrazovkou. Mělo by vám to říci, že každý z prvků na obrazovce je možné upravovat.
4. Poklepejte na stavový řádek nahoře a na panelu Vlastnosti a na barvu Výplň na 455A64 . Klikněte dvakrát na lištu aplikací a nastavte jej na 607D8B. Mělo by se vám říci, že každý prvek v sadě UI může být upraven tak, aby splňoval barevné specifikace projektu.
5. A co ikony? Zde je návod, jak změnit jejich barvu. Poklepejte na srdce a vyberte jej. Pokud se podíváte na panel Vlastnosti, můžete předpokládat, že výběr nemůžete upravit. Ne tak docela. Dvakrát klikněte na srdce ještě jednou . Vlastnosti se otevře a změníte barvu výplně na hodnotu FF0000. Zopakujte tento dvojitý klik na zbývající ikony a text.