Tajemství efektivního designu založeného na kartě
Chcete se dostat na trend s rozhraním ve stylu karty? To je asi skvělý nápad; karty jsou populární a uživatelsky přívětivá volba pro všechny typy digitálního designu na různých velikostech zařízení.
Klíčem k návrhu karty je vytvoření něčeho, co uživatelé chtějí kliknout. (To je klíč k skvělé kartě.) Karta by měla sloužit jako kontejner pro konkrétní obsah obsahu - odkaz na obsah, registraci, přehrávač videa atd., S nímž uživatelé chtějí komunikovat.
Zde je návod, jak jej navrhnout ...
Začněte černým a bílým obrysem
Zní to jednoduše: začněte s černobílým drátem pro návrh. Přemýšlejte o záměru karty a o jejích částech klikněte nebo klepněte na tlačítko. (Celá karta může sloužit jako odkaz.)
Plán pro prvky, jako jsou mezery, obrázky a typografie, takže kartu můžete vidět bez barvy nebo výzdoby. Mysli na to jako na "hrací kartu" fázi návrhu. Všechny prvky karty jsou zde. Zdá se vám to jako rámec, který je snadno pochopitelný?
Přemýšlejte o tom, jak byste z této fáze využili. Kde byste klikli na akci? Je vzor a výsledek jasný? Jak se vrátíte nebo postupujete? Odpovědi na tyto otázky by měly být relevantní, aniž by na obrazovce blikalo červené tlačítko "klikněte sem".
Stejně jako u jiných projektů, pokud obrys nefunguje černobíle, konečný návrh pravděpodobně ani nebude.
Použijte přehnané mezery
Největší výzva, pokud jde o karty, je vytvoření kompaktního designu, který se necítí přeplněný. To je místo, kde se objevují mezery. A budete chtít více využívat, než se nejprve cítí pohodlně.
Přidání bílé barvy dává prvkům větší prostor pro dýchání, čímž se zdá, že celková karta je prostornější a čitelnější.
Obecně byste chtěli začít s dvojnásobným rozestupem, který byste mezi jednotlivými prvky obvykle považovali. Žlaby by měly být mimořádně široké a řádkování by mohlo využít i extra pokoj. Extra prostor vám pomůže vytvořit otevřený design a uspořádat obsah jasněji. Karta má poměrně omezené plátno a mělo by se vejít na jednu obrazovku v telefonu a podobně velká část obrazovky na větších zařízeních, jako jsou tablety nebo stolní počítače. Karty mohou také soupeřit s ostatními kartami, aby se na větší obrazovky soustředily. Přidané mezery pomohou celému designu cítit otevřenější a snadno se ponořit do.
Přidání přirozené barvy a stínování
Nyní jste připraveni přemýšlet o barvě a stínování pro design. Udržujte ji přirozeně vypadající a napodobte realitu ve stínech a stylech designu.
Ne, zde nehovoříme o skeuomorfismu, mluvíme o vytváření barvy s přirozeným obrysem a stíny. Přemýšlejte o tom, jak bude karta zobrazena. Uživatel by měl mít stejný pocit, jako kdyby ho vlastně držel.
Použijte některá základní pravidla fyziky, abyste si představili (a navrhli) každou kartu tak, jak by se měla konat:
- Osvětlení by mělo vrhat některé stíny na zadní a spodní část.
- Nejtmavší část konstrukce je pravděpodobně ve spodní části díky světelným podmínkám, které obvykle pocházejí shora.
- Vyhněte se obsahu v oblastech, které jsou potřebné pro držení karty.
- Kontaktní body (a přidružené výzvy k akci) by měly být ústředním bodem a snadno komunikovat. (Stejně jako tvář hrací karty je v centru návrhu.)
- Jedna karta se rovná jedné bitové informaci.
Vytvořte jednoduché vrstvy
Nyní, když přemýšlíte o fyzice, přejděte na další úroveň jednoduchým vrstvením, abyste vytvořili jednotný styl karty pro celé rozhraní. Nejste si jisti, kde začít? Google je Pokyny pro návrh materiálu jsou skvělým výchozím bodem.
"V materiálovém provedení jsou fyzikální vlastnosti papíru přeloženy na obrazovku. Pozadí aplikace připomíná plochou, neprůhlednou texturu listu papíru.
Chování aplikace napodobuje schopnost papíru být znovu rozměrováno, promícháváno a svázáno dohromady na více listů. Prvky, které žijí mimo aplikace, jako jsou stavové nebo systémové lišty, dostávají odlišné zacházení. Jsou odděleny od obsahu aplikace pod nimi a nenesou fyzické vlastnosti papíru.
Rozlomte to a vrátí se k vytvoření digitálního objektu vypadat a cítit fyzický. A pokud se uživatelé chtějí dotknout, budou chtít kliknout na něj. Koncept je prostě tak jednoduchý.
Dodržujte jednoduché písmo
Pokud jde o typografii, často jsou odpovědi jednoduché bezpatkové. Vyhněte se superstrým nebo kondenzovaným možnostem, protože mohou být trochu tvrdší na očích.
Většina karet pracuje nejlépe se dvěma možnostmi písma (i když pocházejí ze stejné rodiny) - něco pro hlavní tělo a další pro nadpis nebo výzvu k akci. Nejdůležitějším faktorem, pokud jde o typografii, je zapamatovat si, že obsahuje dostatek kontrastu, takže textové prvky jsou snadno čitelné. Nezapomeňte zahrnout kontrast mezi písma a kontrast mezi prvky pozadí a textu pro každou kartu.
Omezit prvky uživatelského rozhraní
Opakujte po mně: jedna karta se rovná jedné akci.
Takže to pravděpodobně znamená, že nemusíte zahrnovat spoustu prvků uživatelského rozhraní, jako jsou tlačítka v celém návrhu.
Nemusíte dokonce potřebovat tlačítko v designu ve stylu karty.
Ale pokud si myslíte, že uživatelé potřebují vizuální narážku, stačí jedno tlačítko. Udržujte tvar a design jednoduchý - opět je příkladem materiálového designu dobrá volba - a držte se pouze jednoho tlačítka.
Tlačítko je pravděpodobně jediný element UI, který potřebujete. Toto je váš návrhový cíl.
Závěr
Neexistuje kouzelný vzorec pro perfektní kartu, ale existují některé možnosti návrhu, které můžete udělat, aby každý uživatel klepnul (nebo klepnul). Udržujte svůj design ve středu reality, postupujte podle minimalistického přístupu s dostatkem prostoru a kontrastu, důraz na jednoduchou typografii a vytvořte jednotnou akci pro každou kartu.
Na základě tohoto náčrtku vám pomohou nejlépe představit a konceptualizovat projekty ve stylu karet, s nimiž uživatelé chtějí komunikovat. Kombinujte tyto myšlenky s teorií designu a vašimi šílenými dovednostmi pro skvělý projekt, který bude zábavný pro uživatele a estetický trend.