Specifikace Material Design od společnosti Google byla původně zaměřena na platformu Android jako způsob, jak navrhnout konzistenci návrhu na platformě.
01 z 06Jak vytvořit kartu designu materiálu v prostředí Adobe Experience Design CC
Jakmile se návrháři začali procházet a pochopit myšlení, které se za ním stalo, materiálový design se tiše stal jednou z nejvlivnějších vizuálních filozofií v oblasti webových a mobilních návrhů. Vše, co musíte udělat, abyste zjistili, na čem se dostáváme, je provést materiálové vyhledávání v Pinterestu a uvidíte stovky příkladů a experimentů na zařízeních, tabletech a dokonce i na webových stránkách.
Fascinujícím aspektem materiálového designu je, že Google přemýšlí o tom, jak by se aplikace měly zobrazovat a pracovat na mobilních zařízeních, ale koncepty se aplikují na jakoukoli obrazovku jakékoli velikosti na libovolné platformě. Jak uvádí Google v úvodním odstavci specifikace: "Vyzvali jsme se, abychom vytvořili vizuální jazyk pro naše uživatele, který syntetizuje klasické zásady dobrého designu s inovací a možností technologie a vědy. Jedná se o materiálový design. Tato specifikace jsou živým dokumentem, který bude aktualizován, protože budeme i nadále rozvíjet principy a specifika materiálu. "
Materiál, o kterém se hovořil, je ve velmi obecném pojetí papírem a charakteristickým znakem Material Design je karta. Přemýšlejte o indexové kartě na povrchu a vy jste na správné cestě. Karta je prvek, který obsahuje fotografie, videa, textové odkazy atd., Ale liší se od většiny interaktivních návrhů, je zaměřen na jediný předmět. Karty mají zaoblené rohy, obsahují slabé stíny, které naznačují, že jsou nad povrchem a pokud jsou všechny ve stejné rovině, jsou označovány jako "sbírka".
V tomto "Jak na to" vytvoříme kartu založenou na specifikaci. Místo toho, abychom vytvořili kartu s různými zobrazovacími a kreslicími nástroji, přijdeme k ní z jiného směru. Budeme používat nástroje v prostředí Adobe Experience Experience Design, které jsou v současné době dostupné pouze ve veřejném náhledu Macintosh a jsou zdarma. Můžete si jej stáhnout zde.
Začněme.
02 ze dne 06Vytvoření prototypové kresby v Adobe Experience Design CC
Neexistuje žádný zřejmý způsob, jak vytvořit obrazovku Android z úvodní obrazovky v Experience Design CC (XD). Co jsme dělali při otevření XD, je vybrat možnost iPhone 6 a po otevření rozhraní vybereme nástroj Artboard v dolní části panelu nástrojů a vybereme Android Mobile z výběru na panelu Vlastnosti napravo. Poté přejdeme na nástroj pro výběr, jednou klikneme na název grafické karty iPhone a odstraníme kreslicí plátno. Žádné další.
V aktuální verzi XD je vedle ikony 6 malá šipka, která při klepnutí otevře rozbalovací nabídku. Odtud vybíráte verzi Android Mobile a vybranou grafickou kartu Android Mobile se otevře v rozhraní.
Abychom zajistili, že pro kartu máme správné místo pro obrazovku, obvykle se přesučíme do náčrtu 3 a do výkresové dokumentace zkopírujeme a vložíme stavovou lištu, navigační panel a lištu aplikací z šablony návrhu materiálu. Skica 3.2 obsahuje šablonu pro návrh materiálu (Soubor> Nový ze šablony> Návrh materiálu) a další opravdu dobrý volný je od Kyle Ledbetter, který můžete získat zde. Pokud nemáte náčrt, můžete je zkopírovat a vložit z nálepky XD Soubor> Otevřít soubor UI> Materiál Google. Můžete je také stáhnout z Googlu pro použití v aplikacích Photoshop, Illustrator, After Effects a Sketch.
03 ze dne 06Přidání karet s materiálem na desku Adobe XD CC
Jednou z nejužitečnějších vlastností XD je zahrnutí sad UI pro Apple iOS, materiál Google a Microsoft Windows. V mnoha ohledech přidají slovo "Rapid" k výrazu "Rapid Prototyping" a zároveň usnadňují designerovu práci v tom, že běžné prvky uživatelského rozhraní nemusí být neustále znovu vytvářeny v aplikaci Design, jako jsou Photoshop, Illustrator nebo Skica.
Prvek UI, který jsme potřebovali, byl kartou. Abychom se k němu dostali, vybrali jsme si Soubor> Otevřít soubor UI> Materiál Google a souprava byla otevřena jako nový dokument. Prvek, který jsme potřebovali, byl nalezen v kategorii Karty.
To, co se nám líbí, je to, že dodržují specifikaci Materiálového designu, jak je stanoveno v specifikacích Content Blocks, stejně jako formátování textu a specifikace rozmístění, které jsou uvedeny v typografické specifikaci.
Kartový styl, který jsme chtěli, byl ten vlevo dole. Jednoduše ji označujeme myší a zkopírujeme jej do schránky. Bohužel XD neobsahuje rozhraní pro otevřené dokumenty. Co děláme je přemístit otevřené okno dokumentu trochu dolů, abyste odhalili ten, na kterém pracujeme, vyberte jej a vložte. Další způsob rychlého přepínání mezi otevřenými dokumenty XD je stiskněte příkaz-.
04 z 06Jak upravit element návrhu materiálu v aplikaci Adobe Experience Design CC
Když karta v XD přichází ze schránky, nezačne s ní pracovat. První věc, kterou musíte udělat je zrušit kartu protože potřebujete přístup ke kousky a kousky složené z karty. Chcete-li to provést, vyberte kartu a vyberte Objekt> Odebrat nebo stiskněte klávesu Shift-Command-G.
Vaše karta je nyní složena ze tří kusů:
- Světle šedá rámeček pro obrázek.
- Střední šedá políčka pro text
- Zadní rámeček slouží jako pozadí.
Prvním krokem je odstranění světle šedé krabice. Jeho jediným účelem je působit jako zástupný symbol obrazu, který je, pokud se rozhodnete, volitelný.
Krabice s textem je ve skutečnosti tmavě šedá s 50% opacitou. Toto pole lze použít jako textové pozadí a můžete změnit barvu a neprůhlednost rámečku.
Ačkoli to není okamžitě zřejmé, světle šedá skříňka se řídí specifikací Material Design v tom, že její horní rohy jsou zaobleny o 2 pixely. Mějte to na paměti, pokud přidáváte obrázek. Bude také potřebovat zaoblené rohy, které mohou být přidány do zobrazovací aplikace nebo do XD.
Když vidíme, jak to je klidový stav karty, potřebuje také stín. Specifikace jasně dokazuje, že je zde položka na výšku 2 pixelů. Chcete-li toto přidat, vyberte černý tvar pozadí a nastavte hodnoty Y a B (Rozostření) na 2 v panelu vlastností.
05 ze dne 06Jak přidat obrázek na kartu materiálového návrhu v Adobe XD CC
Víte, že karta má šířku 344 pixelů a oblast obrazu je 150 pixelů vysoká ( polovinu výšky světle šedé skříňky ) Otevírali jsme obraz ve Photoshopu, ořízli jsme ho na velikost a uložili jsme ho pomocí možnosti @ 2x ve Photoshopu Export jako dialogové okno. Obraz byl importován do Adobe XD.
Pak jsme přetáhli světle šedou krabičku nad obrázek na karton a vybrali Objekt> Maska s tvarem. Výsledkem byl obraz, který vyzdvihl zaoblené rohy tvaru. Pak jsme obrázek přesunuli do konečné pozice.
S obrazem na místě jsme změnili barvu pozadí středně šedé pole, změnili text a barvu textu odkazu.
06 z 06Pomocí funkce Adobe XD CC Grid
S kartou je třeba ji řádně umístit podle specifikace materiálu Design. To znamená, že na obou stranách karty je 8 pixelů a karta musí být 8 pixelů pod panelem aplikací. Chcete-li to provést, klepněte jednou na název výkresové desky a v panelu Vlastnosti vyberte mřížku. Mřížka se zobrazí nad kreslicí deskou.
Výchozí velikost mřížky je 8 pixelů, které mají stejnou velikost mřížky pro návrh materiálu. Pokud potřebujete jinou velikost, změňte hodnotu v oblasti mřížky. Pokud chcete změnit barvu mřížky, klepněte na barevný čip a vyberte barvu z výsledného Výběr barev.
S viditelnou mřížkou klikněte na kartu a přemístěte ji do své konečné pozice.
Pro dokončení jsme zvolili kartu, klikli na tlačítko Opakovat mřížku a změnili vzdálenost mezi kartami na 8 pixelů.
