Piktogramy
Malé, jednoduché grafické prvky, které vylepšují klíčové webové komponenty a rychle a efektivně sdělují myšlenky.
Doslovné, funkční a geometrické — naše piktogramy redukují myšlenky na jejich nejčistší podobu a vyjadřují jasný účel a nadčasovou jednoduchost.
Typ
Piktogramy Spaceship se dodávají ve dvou typech: regular a comp. Typ comp kombinuje běžný piktogram s ikonou z knihovny Spaceship Iconography Library, což nám umožňuje vyjadřovat složitější a specifičtější koncepty.
Verze
Všechny piktogramy Spaceship jsou dostupné ve dvou verzích: filled (primární) a outlined (sekundární). Obrysová verze by se měla používat pouze tehdy, když piktogram potřebuje menší vizuální váhu než okolní piktogramy, text nebo komponenty UI. To pomáhá vytvářet vizuální hierarchii ve složitých rozvrženích.
Konstrukce
Piktogramy vycházejí ze sady pravidel, od základní mřížky po parametry přechodů a tahů, aby byly zajištěny konzistentní a vyvážené výsledky.
Velikost
Piktogramy Spaceship jsou navrženy tak, aby byly škálovatelné, zachovávaly vizuální konzistenci a zajišťovaly co nejlepší čitelnost. V našem design systému existuje pět velikostí piktogramů.
Barvy
Piktogramy obvykle používají jeden odstín. Jedinou výjimkou je typ comp, který může zahrnovat barvy značky nebo notifikační barvy; více informací o nich najdete níže. Aby byla zajištěna konzistence v kontextech UI, piktogramy se řídí barevnými referencemi systému Spaceship Design System.
Výchozí barva
Šedá je výchozí barvou pro piktogramy a měla by se používat k reprezentaci zpráv, akcí nebo funkcí. Ve výjimečných případech ji lze použít také pro produkty. Obrysové piktogramy jsou dostupné pouze ve výchozí barvě.
Barvy značky
SPS Blue, SPS Dark Gray nebo bílá mohou být také použity místo výchozí barvy, když je potřeba větší vizuální dopad nebo posílení identity Spaceship. Další podrobnosti najdete na stránce o barvách.
Barvy produktů
Hlavní barva produktu by se měla používat pro piktogramy v kontextech věnovaných produktu (stránky produktů, produktové karty atd.) u všech současných i připravovaných produktů.
Notifikační barvy
Tyto barvy by se měly používat k posílení sdělení notifikace. Verze comp by se měla používat pouze v obecných systémových zprávách, nikoli ve varovných stavech.
Pokyny
Zde je několik příkladů toho, čemu se při vytváření a používání piktogramů vyhnout.
Nedovolte, aby klíčové prvky běžného piktogramu zasahovaly do pravého dolního rohu.
Ve vyplněných verzích nepoužívejte složité ani vícebarevné přechody.
V typu comp nemíchejte vyplněné a obrysové prvky.
Ve vyplněných verzích nepoužívejte jiné barvy než ty, které jsou uvedeny výše.
U obrysových verzí nepoužívejte žádnou jinou barvu než výchozí.
Nekombinujte výchozí barvu s žádnou jinou barvou kromě primární barvy značky Spaceship a notifikačních barev.