Společné prvky použité v návrhu rozhraní tlačítek
Tlačítka a navigační prvky jsou zcela pravděpodobně nejčastěji používané objekty rozhraní v desktopovém i mobilním provedení. Vytáhnou rozhraní společně a umožňují uživatelům dostat se z A do B jediným kliknutím.
A co je nejdůležitější, tlačítko musí vypadat dobře. Musí křičet "Klepněte na mě!", Jinak to jednoduše nebude tak efektivní, jak má být. Tlačítka se běžně používají pro vyhledávání, "" Odeslat, "" Odeslat, "" Koupit "a" Nahrát ".
V tomto článku se podíváme na sedm společných prvků tlačítek v moderním designu rozhraní: textury, vzory, 3-D, pixelové dokonalé tahy, odsazené pozadí, záře a zvýraznění.
Najdete zde 35 fantastických příkladů těchto technik, stejně jako hrstka mini tutoriálů pro Photoshop.
1. Textury
Použití textury je skvělý způsob, jak přidat tlačítka do určité hloubky a vyniknout trochu od zbytku rozhraní (a nakonec je více kliknout). Níže jsou některé skvělé příklady textur v knoflících.
ShelfLuv používá textura po celé délce pro přidání kóty do rozhraní, zejména v oblasti tlačítek a textových polí.
Textury se používají po celém tomto rozhraní, ale v oblasti "Nahrát" je těžší, což je ohnisko.
Textury se zde dobře míchají se zkoseným tlačítkem, což vypadá skutečně.
Textura není ve skutečnosti použita na tomto tlačítku UI, ale objevuje se v pozadí, což umožňuje, aby se toto tlačítko vyčlenilo.
Vytvoření texturovaného tlačítka
Vytvořte jednoduché pozadí pomocí nástroje Tvar a přidáním šumu (Filtr → Hluk → Přidání šumu).
Znovu vyberte nástroj Tvar a nakreslete obdélník a ujistěte se, že jeho horní část je skrytá od okraje plátna.
Změna barvy tvaru na modrou. Používal jsem # 00A3D9.
Duplikujte vrstvu Tvar a změňte její velikost ve stejné pozici. Změňte barvu na trochu tmavší modrou barvu.
Duplikujte vrstvu ještě jednou. Umístěte vrstvu pod poslední dvě vrstvy Tvaru a změňte barvu na světle šedou.
Fotografujte nebo stáhněte strukturu papíru (z jedné jsem použil Lost & Taken ). Přejděte do Soubor → Umístění a vyhledejte soubor a vložte jej do dokumentu. Změňte velikost a umístěte jej na modré tvary.
Odstraňte přebytečnou strukturu pomocí nástroje Nástroj pro výběr a změňte režim prolnutí textury. Experimentujte s různými režimy, protože různé textury vytvářejí různé výsledky. Můžete také chtít trochu snížit hladiny krytí.
Otevřete okno Styl vrstvy pro váš tmavší modrý tvar a použijte následující styl stínového drop pro přidání jemného bílého stínu.
Nyní použijete do tvaru zdvih pomocí níže uvedených nastavení.
Konečně přidejte do tvaru vnitřní stín, abyste dal další dimenzi.
Přidejte nějaký text k tlačítku a jste hotovi!
2. Vzory
Vzory jsou dalším skvělým způsobem, jak přidat tlačítka a motivy k hloubce. Níže uvádíme několik příkladů vzorků v tlačítcích, které jsou všechny jemné, avšak efektivní.
Na levé straně tlačítka se zde používá diagonální odraz, aby se ikona oddělila od typu.
Na tomto tlačítku je použita diagonální čára, která přiléhá k výběrovému vzhledu při přidávání rozměru k návrhu.
Toto je moje oblíbené použití vzoru v těchto příkladech. Ačkoli se nepoužívají v samotných tlačítek, vzorek v šedé hlavičce přidává rozměr do celého návrhu a nakonec pomáhá oranžovým tlačítkům vystupovat.
Vytvoření vzorovaného pásu karet
Po vytvoření texturovaného pozadí pomocí techniky v předchozím mini tutoriálu nakreslete obdélník pomocí nástroje Tvar a vyplňte ho modrozelenou barvou. Použil jsem barvu # 008B8D.
Nakreslete jiný tvar se stejnou výškou a barvou.
Pomocí nástroje Lasso vytvořte trojúhelník, jak je vidět níže. Umístěte ji přes okraj nového tvaru a klepnutím na tlačítko "Odstranit" odstraňte oblast, kterou nepotřebujeme.
Duplikujte tvar a přejděte na položku Upravit → Transformovat → Převrátit vodorovně tak, aby se obrátil opačným směrem.
Umístěte dva tvary pod větší tvar, jak je vidět níže.
Klepněte pravým tlačítkem myši na jeden z vašich tvarů a otevřete okno Blending Options / Layer Style. Použijte překryvný gradient podobný tomu, který je vidět níže. Můžete také přidat jemný Drop Shadow. Po dokončení klikněte pravým tlačítkem myši na vrstvu a vyberte možnost "Kopírovat styl vrstvy". Vyberte jiný tvar banneru. Klepněte pravým tlačítkem myši a vyberte možnost "Vložit styl vrstvy". Otevřete okno Styl stylu a změňte úhel přechodu přechodu od 180 ° na 0 °.
Pomocí nástroje Lasso vytvořte výběr podobný tomu, který je vidět níže, aby odpovídal dvěma rohům našich tvarů. Vyplňte ji ještě tmavší barvou.
Duplikujte vrstvu, otočte ji vodorovně a umístěte ji na druhou stranu.
Vytvořte vzorek čáry. Nebo můžete použít ten, který jsem udělal níže.
Vložte vzor na celý banner. Zatímco držíte příkaz Command + Shift, klikněte na miniatury vrstev všech vrstev banneru. Tímto vyberete všechny. Klepněte pravým tlačítkem myši a vyberte možnost "Select Inverse" (Vybrat směr). S vybranou vrstvou vzoru řádků stiskněte tlačítko "Delete" (Odstranit) pro odstranění oblastí vzoru, který nepotřebujete.
Změňte režim Blending vrstvy vzoru na "Násobit", abyste skryli bílou vrstvu. Nyní sklopte neprůhlednost až někde mezi 25 a 75%. Experimentujte s nejlepším výsledkem.
Pomocí nástroje Tvar vytvořte některé řádky podobné těm, které jsou uvedeny níže.
Odstraňte oblasti, které sedí na pozadí snímku.
Experimentujte s míchacím režimem každé z vašich linek. Zde je výsledek:
3. 3-D
Trojrozměrné tlačítka jsou vynikající, protože tlačítka jsou mnohem realističtější. Jsou téměř nemožné kliknout! Jedinou nevýhodou je, že efekt je spíše hravý a není vhodný pro všechny webové stránky (například firemní). Níže je výběr některých krásných 3-D tlačítek.
Stíny a čáry s 1 pixelem zde zvýrazňují určité oblasti a zobrazí se tlačítko 3-D. Toto a některé dobré efekty CSS by znamenaly pro super interaktivní tlačítko.
Náš druhý prvek (vzory) se v tomto návrhu také používá k přidání rozměru k již velmi velkému 3-D tlačítku.
Toto tlačítko má trochu jiný přístup, spoléhat se pouze na přechody pro jeho 3-D vzhled.
Tato sada zobrazuje různé výšky, které indikují, zda je tlačítko v normálním, vznášedlém nebo aktivním stavu. Linky a textury dávají knoflíkům více vzhled.
Jako pár dalších příkladů v této části kombinace gradientů a tahů způsobí, že tato tlačítka vypadají 3-D.
Toto tlačítko vypadá 3-D kvůli jeho "out of the box" designu, který je zabalen kolem uživatelského rozhraní.
Vytvoření tlačítka 3D
Začněte kreslením tvaru nástrojem Obdélník s poloměrem rohu 7 pixelů. Otevřete okno Styl vrstvy a použijte gradientovou překryv od tmavě červené do světle červené. Použijte ještě světlejší červenou barvu na samém konci gradientu, abyste vyzdvihli vrchol toho, co bude naše tlačítko 3D.
Nyní použijte tlačítko. Změňte typ výplně na "Přechod", abyste změnili barvu horní a spodní části tahu. Přejděte ze světle do tmavě červené (naopak v přechodu přechodem).
Mělo by to vypadat takto:
Duplikovat vrstvu Tvar. Natočte původní vrstvu dolů o přibližně 10 pixelů.
Použijte stín Drop na původní vrstvu pomocí nastavení zobrazených na následujícím snímku obrazovky.
Tmavší překryvování barvy také ztmaví tím, že každá barva v gradientu je trochu tmavší.
Měli byste mít něco, co vypadá takto:
Vyberte nástroj Text a zadejte něco na tlačítku. Otevřete okno Styl stylu a použijte překryvný gradient podobný tomu, který je vidět níže:
Aplikujte vnitřní stín pomocí těchto nastavení:
Aplikujte Drop Shadow pomocí těchto nastavení:
A skončili jsme! Měli byste skončit s tímto:
4. Pixel-Perfect Strokes
Umění zdokonalování pixelů se stalo nedílnou součástí všech aspektů návrhu uživatelského rozhraní, nikoliv pouze tlačítek. Jedno-pixelové čáry (nebo tahy) poskytují hloubku tlačítek a mírně 3-D vzhled. Oni také dělají tlačítka vypadat odsazeně. Zde jsou některé skvělé příklady toho.
Jasně vidíte, že bílá (překryta) 1-pixelová čára se používá jako zvýraznění v horní části červeného tlačítka s tmavší čárou v dolní části. To způsobí, že se objeví mírně 3-D a přidává do stránky spoustu detailů.
Typografie v tomto tlačítku má vnitřní stín, takže se tlačítko objeví tak, jako by sedělo nad rozhraním.
Tato tlačítka typu CSS3 (absolutně bez Photoshopu) mají tahy o velikosti 1 pixel, které z nich vyčnívají z pozadí a na kliknutí se zobrazují odsazením.
Dalším příkladem 1-pixelového světelného zdvihu v horní části tlačítka se projevuje zvýraznění.
Toto zelené tlačítko ukazuje trochu jiný přístup, přičemž vnitřní světlo působí jako zvýraznění v horní části tlačítka. Tah venku vytváří velmi jemný stín.
Ještě další tlačítko kombinující výše uvedené techniky.
Toto základní tlačítko má tenký zdvih a jemný stín, aby vypadal z jednoduchého designu.
Toto tlačítko má jemné vnitřní záře, aby se vyniklo z pozadí. Jeho aktivní stav má sníženou opacitu, což dělá trik.
Zapomeňte na tlačítko: celý tento design je pixel-dokonalý, jeho moderní typografie a linie vytvářejí krásné uživatelské rozhraní.
Vytvořte tlačítko Pixel-Perfect
Zvolte nástroj Rectangle Shape (umístěný na panelu nástrojů v horní části aplikace Photoshop, když je vybrán nástroj Tvar) a nastavte poloměr rohu 5 pixelů. Nakreslete černý obdélník podobný níže uvedenému.
Otevřete okno stylu vrstvy a do tvaru použijte překryvný gradient. Používala jsem tmavě zelené až lehce světlejší.
Dejte tvaru gradientní cévní mozkovou příhodu, od zelené až po stále tak trochu tmavější zelenou.
Nyní udělejte tvar bílého stylu Inner Shadow pomocí níže uvedených nastavení.
A nyní Stín stínu, o velikosti 0 pixelů a opacitě pouhých 5%.
Najděte ikonu na Internetu (nebo vytvořte vlastní) a vložte ji do dokumentu tím, že přejdete do Soubor → Umístění a správně ji umístíte. Použijte na něj překryvný gradient.
Vložte vnitřní stín vaší ikony do vzdálenosti 1 pixelu a bílý stín stínu na vzdálenost 1 pixel. To způsobí, že ikona vypadá, jako by byla vyryta do tlačítka.
Přidejte do textu nějaký text a použijte efekt Drop Shadow s nízkou opacitou v okně Styl vrstvy. Zde je výsledek:
5. Oddělené pozadí
Oddělené pozadí způsobí, že tlačítko vypadá tak, že je pohřbeno v něm, dává hloubku tlačítka a vizuální zájem. Níže uvádíme několik skvělých příkladů.
Toto pozadí pozadí má jemný vnitřní stín, aby vypadalo jako odsazené.
Převrácené přechody v tomto pozadí způsobují, že se tlačítka zobrazí odsazené.
Kombinace tahů a stínů podávání dává těmto odsazeným tlačítkům větší hloubku.
Toto pozadí tlačítka má několik stylů, včetně přechodu, vnitřního stínu a stínu.
Toto pozadí s odráženými knoflíky je mnohem menší než to, co jsme viděli, ale stále následují stejné techniky.
Ještě jednou se k vytvoření odsazení použije stín a vnitřní stín.
6. Svítí
Záře jsou poměrně obtížnou technikou, kterou lze vynechat v návrhu rozhraní a jsou obvykle vidět pouze v tmavých rozhraních (ačkoli uvidíme níže uvedený světelný příklad). Tyto příklady ukazují, jak mohou být záře použity různými způsoby.
Na vnitřní straně tohoto tlačítka se používá světlo, které mu dává celosvětové zvýraznění.
Záblesky jsou šikovně používány k tomu, aby se typografie v tomto tlačítku vynikla z tmavého pozadí. A záblesky způsobují, že nakládací lišty vypadají živě.
Záblesky se běžně používají v tmavých rozhraních pro iPhone. Zde vidíme záblesk kolem typografie, když je tlačítko v aktivním stavu.
Světlá a poměrně jemná záře dává tomuto tlačítku extra nárust, který potřebuje, aby se stal krásným.
Vytvoření světelného tlačítka
Pomocí nástroje Rectangle Shape znovu nakreslete obdélník, tentokrát s poloměrem rohu 3 pixely. Použijte překryvný gradient podobný níže uvedenému. Dejte středovým barvám polohu "49" a "50".
Použijte následující vnitřní stín.
Použijte následující Drop Shadow.
Použijte následující vnější záře.
Přidejte k tlačítku nějakou typografii. Měli byste skončit s příjemným, čistým a neuvěřitelně snadno vyrobitelným výsledkem, jako je toto:
7. Hlavní body
Důležité upozornění poskytují hloubku tlačítek, vizuální zájem a možnost kliknutí. Níže uvedené příklady to dokazují.
Na horní polovině tohoto tlačítka se používá jednoduchý bílý tvar s nízkou opacitou, který mu dává trochu hloubky a pomáhá mu přizpůsobit celkové červené a šedé rozhraní.
Stejně jako u mnoha dalších tlačítek v tomto příspěvku, tento 1-pixelový zdvih tuto skutečnost zdůrazňuje.
Světlá až tmavá až lehká přechody slouží jako upozornění a stín pro tato tlačítka.
Tento příspěvek byl napsán výhradně pro WDD Callum Chapman , muž za sebou Picmix Store a Blog Circlebox .
Které návrhy tlačítek nejvíce používáte a proč? Zjistili jste pro některé návrhy vyšší míru kliknutí? Podělte se prosím níže ...