Obrázky a ikony pro Visual Studio

Platí pro: Visual Studio Visual Studio pro Mac Visual Studio Code

Použití obrázku v sadě Visual Studio

Než začnete vytvářet umělecká díla, zvažte použití 1 000 obrázků v knihovně obrázků sady Visual Studio.

Typy obrázků

• Ikony. Malé obrázky, které se zobrazují v příkazech, hierarchiích, šablonách atd. Výchozí velikost ikony použitá v sadě Visual Studio je 16x16 PNG. Ikony vytvořené službou imagí automaticky generují formát XAML pro podporu HDPI.

  Poznámka

  I když se obrázky používají v systému nabídek, neměli byste pro každý příkaz vytvořit ikonu. Podívejte se na nabídky a příkazy pro Visual Studio a zjistěte, jestli má příkaz získat ikonu.

• Miniatury. Obrázky použité v oblasti náhledu dialogového okna, například dialogové okno Nový projekt

• Obrázky dialogových oken Obrázky, které se zobrazují v dialogových oknech nebo průvodcích, buď jako popisné obrázky, nebo indikátory zpráv. Používejte zřídka a pouze v případě, že je to nutné k ilustraci obtížného konceptu nebo získání pozornosti uživatele (upozornění, upozornění).

• Animované obrázky. Používá se v indikátorech průběhu, stavových úsecích a dialogových oknech operací.

• Kurzory. Slouží k označení, zda je operace povolena pomocí myši, kde může být objekt vyřazen atd.

Návrh ikony

Přehled

Visual Studio používá ikony moderního stylu, které mají čistou geometrii a rovnováhu 50/50 kladných/záporných (světlých/tmavých) a používají přímé srozumitelné metafory. Klíčové body návrhu ikon se zaměřují na přehlednost, zjednodušení a kontext.

• Přehlednost: zaměřte se na základní metaforu, která dává ikoně svůj význam a individualitu.

• Zjednodušení: zmenšete ikonu na její základní význam – získejte motiv pouze s potřebnými prvky a žádnými ozdobnými prvky.

• Kontext: Při vývoji konceptu zvažte všechny aspekty role ikony, což je zásadní při rozhodování o tom, které prvky tvoří základní metaforu ikony.

  S ikonami existuje řada bodů návrhu, kterým se můžete vyhnout:

• Nepoužívejte ikony, které označují prvky uživatelského rozhraní s výjimkou případů, kdy je to vhodné. Zvolte abstraktivnější nebo symbolický přístup, pokud prvek uživatelského rozhraní není běžný, jasný ani jedinečný.

• Nepoužívejte příliš běžné prvky, jako jsou dokumenty, složky, šipky a lupa. Tyto prvky používejte pouze v případě, že jsou nezbytné pro význam ikony. Například pravé lupy by měly znamenat pouze hledání, procházení a hledání.

• I když některé starší prvky ikon udržují použití perspektivy, nevytvávejte nové ikony s perspektivou, pokud prvek nemá přehlednost bez něj.

• Nepřetěžujte do ikony příliš mnoho informací. Jednoduchý obrázek, který lze snadno rozpoznat nebo naučit jako rozpoznatelný symbol, je mnohem užitečnější než příliš složitý obrázek. Ikona nemůže říct celý příběh.

Vytvoření ikony

Vývoj konceptů

Visual Studio má v uživatelském rozhraní širokou škálu typů ikon. Pečlivě zvažte typ ikony během vývoje. Nepoužívejte nejasné nebo neobvyklé objekty uživatelského rozhraní pro prvky ikon. V těchto případech zvolte symbolický symbol, například s ikonou inteligentní značky. Všimněte si, že význam abstraktní značky vlevo je jasnější než vágní verze založená na uživatelském rozhraní napravo:

Správné použití symbolických obrázků	Nesprávné použití symbolických obrázků

Existují instance, ve kterých standardní, snadno rozpoznatelné prvky uživatelského rozhraní fungují dobře pro ikony. Přidat okno je jedním z takových příkladů:

Oprava prvku uživatelského rozhraní v ikoně	Nesprávný prvek uživatelského rozhraní v ikoně

Nepoužívejte dokument jako základní prvek, pokud není nezbytné pro význam ikony. Bez elementu dokumentu přidat dokument (pod) význam je ztracen, zatímco při aktualizaci prvku dokumentu není nutné sdělit význam.

Správné použití ikony dokumentu	Nesprávné použití ikony dokumentu

Koncept "show" by měl být reprezentován ikonou, která nejlépe ilustruje, co se zobrazuje, například pomocí příkladu Zobrazit všechny soubory. Metafora objektivu může být použita k označení konceptu "zobrazení", pokud je to potřeba, například v příkladu zobrazení zdrojů.

"Zobrazit"	"Zobrazení"

Ikona lupy vpravo by měla představovat pouze hledání, hledání a procházení. Levá varianta se znaménkem plus nebo mínus by měla představovat pouze přiblížení nebo oddálení.

"Hledat"	"Lupa"

Ve stromových zobrazeních nepoužívejte ikonu složky i modifikátor. Pokud je k dispozici, použijte pouze modifikátor.

Správné ikony stromové zobrazení	Nesprávné ikony stromové zobrazení

Podrobnosti stylu

Layout

Prvky zásobníku, jak je znázorněno pro standardní ikony 16x16:

Zásobník rozložení pro ikony 16x16

Prvky oznámení o stavu se lépe používají jako samostatné ikony. Existují však kontexty, ve kterých by se mělo oznámení naskládat na základní prvek, například s ikonou Dokončení úkolu:

Samostatné ikony oznámení

Ikona Dokončení úkolu

Ikony projektu jsou obvykle soubory .ico, které obsahují více velikostí. Většina ikon 16x16 obsahuje stejné prvky. Verze 32x32 obsahují další podrobnosti, včetně typu projektu, pokud je to možné.

Ikony projektu knihovny ovládacích prvků VB, 16x16 a 32x32

Na střed ikony v rámci jeho pixelu. Pokud to není možné, zarovnejte ikonu k hornímu nebo pravému rámečeku.

Ikona za střed v rámci pixelu

Ikona zarovnaná k pravému hornímu rohu rámce

Ikona je zarovnaná na střed a zarovnaná na začátek rámečku.

Abyste dosáhli ideálního zarovnání a rovnováhy, vyhněte se obstrukci základního prvku ikony pomocí glyfů. Umístěte glyph v levém horním rohu základního prvku. Při přidávání dalšího prvku zvažte zarovnání a rovnováhu ikony.

Správné zarovnání a vyvážení	Nesprávné zarovnání a vyvážení

Zajistěte paritu velikosti pro ikony, které sdílejí prvky a které se používají v sadách. Všimněte si, že v nesprávném párování se kruh a šipka překrývají a neodpovídají.

Správná parita velikosti	Nesprávná parita velikosti

Používejte konzistentní tloušťku čar a vizuálů. Vyhodnoťte, jak se ikona, kterou vytváříte, porovnává s jinými ikonami pomocí souběžného porovnání. Nikdy nepoužívejte celý rámec 16x16, použijte 15x15 nebo menší. Poměr záporných k pozitivním (tmavým až světlým) by měl být 50/50.

Oprava záporného a kladného poměru	Nesprávný poměr záporných a kladných

Pomocí jednoduchých, srovnatelných obrazců a doplňkových úhlů můžete vytvářet prvky bez obětování integrity prvků. Pokud je to možné, použijte úhly 45° nebo 90°.

Perspektiva

Nechte ikonu přehlednou a srozumitelnou. Perspektivu a zdroj světla používejte pouze v případě potřeby. I když použití perspektivy prvků ikon by se mělo vyhnout, některé prvky jsou bez něj nerozpoznané. V takových případech stylizovaná perspektiva komunikuje srozumitelnost elementu.

Perspektiva 3 bodů

Perspektiva 1 bodů

Většinaprvkůchmm prvkům by

Zdroje světla používejte pouze v případě, že objektu přidáte potřebnou srozumitelnost.

Oprava zdroje světla	Nesprávný zdroj světla

Pomocí osnov můžete zlepšit čitelnost nebo lépe sdělit metaforu. Poměr negativních pozitivních (tmavých světel) by měl být 50/50.

Správné použití osnov	Nesprávné použití osnov

Typy ikon

Ikony panelu prostředí a panelu příkazů se skládají z více než tří z následujících prvků: jeden základ, jeden modifikátor, jedna akce nebo jeden stav.

Příklady ikon příkazového řádku a prostředí

Ikony panelu příkazů okna nástrojů se skládají z maximálně tří následujících prvků: jeden základ, jeden modifikátor, jedna akce nebo jeden stav.

Příklady ikon panelu příkazů panelu nástrojů

Ikony nejednoznačného zobrazení stromu se skládají z více než tří z následujících prvků: jeden základ, jeden modifikátor, jedna akce nebo jeden stav.

Příklady ikon nejednoznačného zobrazení stromové struktury

Ikony taxonomie hodnot na základě stavu existují v následujících stavech: aktivní, aktivní a neaktivní.

Příklady ikon taxonomie hodnot na základě stavu

Ikony IntelliSense se skládají z maximálně tří následujících prvků: jeden základní, jeden modifikační a jeden stav.

Příklady ikon IntelliSense

Malé ikony projektu (16x16) by neměly mít více než dva prvky: jeden základ a jeden modifikátor.

Příklady malých ikon projektu (16x16)

Velké ikony projektu (32x32) se skládají z maximálně čtyř následujících prvků: jeden základ, jeden až dva modifikátory a jeden překryv jazyka.

Příklady velkých ikon projektů (32x32)

Podrobnosti o produkčním prostředí

Všechny nové prvky uživatelského rozhraní by měly být vytvořeny pomocí windows Presentation Foundation (WPF) a všechny nové ikony pro WPF by měly být ve 32bitovém formátu PNG. 24bitový formát PNG je starší formát, který nepodporuje průhlednost, a proto se nedoporučuje pro ikony.

Uložte rozlišení při rozlišení 96 DPI.

Typy souborů

• 32bitový formát PNG: upřednostňovaný formát pro ikony. Bezeztrátový formát souboru komprese dat, který může uložit jeden rastrový obrázek (pixel). 32bitové soubory PNG podporují průhlednost alfakanálu, opravu gama a prokládání.

• 32bitový BMP: pro ovládací prvky, které nejsou WPF. Označuje se také jako XP nebo vysoká barva, 32bitová BMP je formát obrázku RGB/A, který je ve formátu true-color s průhledností alfakanálu. Alfa kanál je vrstva průhlednosti určená v aplikaci Adobe Photoshop, která se pak uloží v rastrovém obrázku jako další (čtvrtý) barevný kanál. Během produkce uměleckých děl se do všech 32bitových souborů BMP přidá černé pozadí, které vám poskytne rychlou vizuální pomůcku k barevné hloubkě. Toto černé pozadí představuje oblast, která se má maskovat v uživatelském rozhraní.

• 32bitová ICO: pro ikony projektu a přidat položku. Všechny soubory ICO mají 32bitovou skutečnou barvu s průhledností alfakanálu (RGB/A). Vzhledem k tomu, že soubory ICO mohou ukládat více velikostí a barevnou hloubku, ikony Vista jsou často ve formátu ICO obsahující velikosti obrázků 16x16, 32x32, 48x48 a 256x256. Aby se soubory ICO správně zobrazovaly v Průzkumníku Windows, musí být uloženy do 24bitové a 8bitové hloubky barev pro každou velikost obrázku.

• XAML: pro návrh povrchy a doplňky windows. Ikony XAML jsou soubory obrázků založené na vektorech, které podporují škálování, otáčení, vyplňování a průhlednost. V současné době nejsou v sadě Visual Studio běžné, ale jsou oblíbenější z důvodu jejich flexibility.

• SVG

• 24bitový BMP: pro panel příkazů sady Visual Studio. Formát obrázku RGB s skutečnou barvou, 24bitový BMP je konvence ikon, která vytváří vrstvu průhlednosti pomocí purpurové vrstvy (R=255, G=0, B=255) jako barevné klávesy pro vrstvu průhlednosti vyřazení. V 24bitovéM BMP se všechny purpurové povrchy zobrazují pomocí barvy pozadí.

• 24bitová verze GIF: pro panel příkazů sady Visual Studio Formát obrázku RGB s true-color, který podporuje průhlednost. Soubory GIF se často používají v animaci GIF průvodce.

Konstrukce ikon

Nejmenší velikost ikony v sadě Visual Studio je 16x16. Největší běžně používané použití je 32x32. Při návrhu ikony nezapomeňte vyplnit celý rámec 16x16, 24x24 nebo 32x32. Čitelné, jednotné ikony konstrukce je nezbytné pro rozpoznávání uživatelů. Při vytváření ikon dodržujte následující body.

• Ikony by měly být jasné, srozumitelné a konzistentní.

• Je lepší použít prvky oznámení o stavu jako jediné ikony, a ne je naskládat nad základní prvek ikony. V určitých kontextech může uživatelské rozhraní vyžadovat spárování prvku stavu se základním prvkem.

• Ikony projektů jsou obvykle soubory .ico, které obsahují několik velikostí. Aktualizují se jenom ikony 16x16, 24x24 a 32x32. Většina ikon 16x16 a 24x24 bude obsahovat stejné prvky. Ikony 32x32 obsahují další podrobnosti, včetně jazyka projektu, pokud je to možné.

• U ikon 32x32 mají základní prvky obecně 2 pixelovou tloušťku čáry. Pro prvky podrobností lze použít tloušťku 1 až 2 pixelů. Použijte svůj nejlepší úsudek k určení, která je vhodnější.

• Ikony 16x16 a 24x24 mají alespoň 1 pixelové mezery. U ikon 32x32 použijte 2 pixelové mezery mezi prvky a mezi modifikátorem a základním prvkem.

  
  Mezery mezi prvky pro ikony velikosti 16x16, 24x24 a 32x32

Barva a přístupnost

Pokyny pro dodržování předpisů sady Visual Studio vyžadují, aby všechny ikony v produktu prošly požadavky na přístupnost pro barvu a kontrast. Toho dosáhnete prostřednictvím inverze ikon a při navrhování byste měli mít na paměti, že budou invertovány programově v produktu.

Další informace o použití barev v ikonách sady Visual Studio najdete v tématu Použití barev v obrázcích.

Použití barev v obrázcích

Přehled

Ikony v sadě Visual Studio jsou primárně monochromaticky. Barva je vyhrazena ke sdělení konkrétních informací a nikdy pro dekoraci. Používá se barva:

• označení akce

• upozorňování uživatele na oznámení o stavu

• určení přidružení jazyka

• rozlišovat položky v IntelliSense

Usnadnění

Pokyny pro dodržování předpisů sady Visual Studio vyžadují, aby všechny ikony, které jsou v produktu zaškrtnuté, prošly požadavky na přístupnost pro barvu a kontrast. Barvy v paletě vizuálních jazyků byly testovány a splňují tyto požadavky.

Inverze barev pro tmavé motivy

Aby se ikony zobrazovaly se správným poměrem kontrastu v tmavém motivu sady Visual Studio, použije se inverze programově. Barvy v této příručce byly vybrány částečně tak, aby se správně invertovaly. Omezte použití barvy na tuto paletu nebo při použití inverze se zobrazí nepředvídatelné výsledky.

Příklady ikon s invertovanými barvami

Základní paleta

Všechny standardní ikony obsahují tři základní barvy. Ikony neobsahují žádné přechody ani stíny s jednou nebo dvěma výjimkami pro ikony 3D nástrojů.

Využití	Name	Hodnota (světlý motiv)	Políčko	Příklad
Pozadí/tmavá	VS BG	424242 / 66,66,66
Popředí/světlá	VS FG	F0EFF1 / 240 239 241
Obrys	VS Out	F6F6F6 / 246,246,246

Kromě základních barev může každá ikona obsahovat jednu další barvu z rozšířené palety.

Rozšířená paleta

Modifikátory akcí

Následující čtyři barvy označují typy akcí vyžadovaných modifikátory akcí:

Využití	Name	Hodnota (všechny motivy)	Políčko
Kladné	Akce VS – zelená	388A34 / 56 138,52
Záporný	VS Action Red	A1260D / 161 38,13
Neutral	Modrá akce VS	00539C / 0,83,156
Vytvoření nebo nový	Oranžová akce VS	C27D1A / 194 156,26

Příklady

Zelená se používá pro modifikátory pozitivních akcí, jako je "Přidat", "Spustit", "Přehrát" a "Ověřit".

Spustit	Spustit dotaz	Přehrát všechny kroky	Přidat ovládací prvek

Červená se používá pro modifikátory negativních akcí, jako je "Delete", "Stop", "Cancel" a "Close".

Odstranění relace	Odstranit sloupec	Zastavit dotaz	Připojení offline

Modrá se použije u modifikátorů neutrálních akcí, které jsou nejčastěji reprezentované jako šipky, například "Otevřít", "Další", "Předchozí", "Import" a "Export".

Přejít na pole	Dávkové Check-In	Editor adres	Editor přidružení

Tmavě zlato se primárně používá pro modifikátor "Nový".

Nový projekt	Vytvoření nového grafu	Nový test jednotek	Nová položka seznamu

Zvláštní případy

Ve speciálních případech může být modifikátor barevné akce použit nezávisle jako samostatná ikona. Barva použitá pro ikonu odráží akce, ke kterým je ikona přidružená. Toto použití je omezené na malou podmnožinu ikon, včetně:

Spustit	Zastavit	Odstranit	Uložit	Přejít zpět

Paleta hierarchie kódu

Složka

Využití	Name	Hodnota (všechny motivy)	Políčko	Příklad
Složky	Složka	DCB67A / 220 182,122

Jazyky sady Visual Studio

Každý z běžných jazyků nebo platforem dostupných v sadě Visual Studio má přidruženou barvu. Tyto barvy se používají na základní ikoně nebo v modifikátorech jazyka, které se zobrazují v pravém horním rohu složených ikon.

Využití	Name	Hodnota (všechny motivy)	Políčko
ASP, HTML, WPF	ASP HTML WPF Blue	0095D7 / 0,149,215
C++	CPP Fialová	9B4F96 / 155 79 150
C#	CS Green (VS Action Green)	388A34 / 56 138,52
Šablony stylů CSS	CSS Red	BD1E2D / 189,30,45
F#	FS Fialová	672878 / 103,40,120
JavaScript	JS Orange	F16421 / 241 100,33
VB	VB Blue (VS Action Blue)	00539C / 0 83 156
TypeScript	TS Orange	E04C06 / 224 76,6
Python	PY Green	879636 / 135,150,54

Příklady ikon s modifikátory jazyka

VB	C#	C++	F#	JavaScript	Python

HTML	WPF	ASP	Šablony stylů CSS	TypeScript
HTML	WPF	ASP	Šablony stylů CSS	TypeScript

IntelliSense

Ikony IntelliSense používají exkluzivní paletu barev. Tyto barvy slouží k rychlému rozlišení různých položek v seznamu automaticky otevíraných oken IntelliSense.

Využití	Name	Hodnota (všechny motivy)	Políčko
Třída, událost	VS Action Orange	C27D1A / 194 125 26
Extension – metoda, metoda, modul, delegát	VS Action Purple	652D90 / 101 45 144
Pole, položka výčtu, makro, struktura, typ hodnoty sjednocení, operátor, rozhraní	VS Action Blue	00539C / 0 83 156
Objekt	VS Action Green	388A34 / 56 138 52
Konstanta, výjimka, položka výčtu, mapa, položka mapy, obor názvů, šablona, definice typu	Pozadí (VS BG)	424242 / 66,66,66

Příklady ikon IntelliSense

Třída	Soukromá událost	Delegát	Metoda Friend	Pole

Chráněná položka výčtu	Objekt	Template (Šablona)	Zástupce výjimky

Oznámení

Oznámení v sadě Visual Studio slouží k označení stavu. Paleta oznámení používá následující čtyři barvy, stejně jako černé nebo bílé možnosti výplně popředí k definování oznámení s následujícími úrovněmi stavu.

Využití	Name	Hodnota (všechny motivy)	Políčko
Stav: neutrální	Modrá oznámení (VS Blue)	1BA1E2 / 27 161 226
Stav: pozitivní	Oznámení zelená (VS Zelená)	339933 / 51,153,51
Stav: negativní	Oznámení Červené (VS Red)	E51400 / 229 20 0
Stav: upozornění	Oznámení žlutá (vs oranžová)	FFCC00 / 255 204 0
Výplň popředí	Oznámení Černá (černá)	000000 / 0,0,0
Výplň popředí	Bílá oznámení (bílá)	FFFFFF / 255 255 255

Příklady ikon oznámení

Výstrahy	Upozornění	Dokončit	Zastavit