Fonty
Poznámka
Tento průvodce návrhem byl vytvořen pro Windows 7 a nebyl aktualizován pro novější verze Windows. Většina pokynů se stále používá v zásadě, ale prezentace a příklady neodráží naše aktuální pokyny k návrhu.
Uživatelé pracují s textem více než s jakýmkoli jiným prvkem v systému Microsoft Windows. Segoe UI (vyslovuje se "SEE-go") je systémové písmo systému Windows. Standardní velikost písma byla zvýšena na 9 bodů.
písma segoe ui
Písmo Segoe UI.
Segoe UI a Segoe nejsou stejné písmo. Segoe UI je písmo Windows určené pro textové řetězce uživatelského rozhraní. Segoe je písmo značky používané Microsoftem a partnery k výrobě materiálů pro tisk a reklamu.
Segoe UI je přístupný, otevřený a přívětivý typ a v důsledku toho má lepší čitelnost než Tahoma, Microsoft Sans Serif a Arial. Má vlastnosti humanistského sans serif: různé šířky svých hlavních písmen (úzké E a S, například v porovnání s Helvetica, kde šířky jsou spíše, poměrně široké); napětí a písmena jeho malých písmen; a jeho pravdivá kurzíva (spíše než "šikmá" nebo šikmá římská, jako mnoho průmyslových sans serifů). Typ písma má mít stejný vizuální efekt na obrazovce i v tisku. Byl navržen tak, aby byl humanistický sans bez silné postavy nebo rušivé nechtěnosti.
Uživatelské rozhraní Segoe je optimalizované pro ClearType, které je ve výchozím nastavení ve Windows zapnuté. S povolenou funkcí ClearType je uživatelské rozhraní Segoe elegantním čitelným písmem. Bez povolení ClearType je uživatelské rozhraní Segoe přijatelné pouze na okraji. Tento faktor určuje, kdy byste měli použít uživatelské rozhraní Segoe.
Segoe UI zahrnuje latinku, řečtinu, cyrilici a arabské znaky. Existují nová písma, optimalizovaná také pro ClearType, vytvořená pro jiné znakové sady a použití. Patří mezi ně Meiryo pro japonštinu, Malgun Gothic pro korejštinu, Microsoft JhengHei pro čínštinu (tradiční), Microsoft YaHei pro čínštinu (zjednodušená), Gisha pro hebrejštinu a Leelawadee pro thajštinu a písma ClearType Collection navržená pro použití v dokumentu.
Meiryo obsahuje latinky založené na Verdana. Malgun Gothic, Microsoft JhengHei a Microsoft YaHei používají přizpůsobené uživatelské rozhraní Segoe. Použití kurzívy těchto písem se nedoporučuje. Malgun Gothic, Microsoft JhengHei a Microsoft YaHei jsou dodávány pouze v pravidelných a tučných stylech, což znamená, že kurzíva jsou syntetizovány nakláněným styly. I když Meiryo obsahuje skutečnou kurzívu a tučné kurzívu, tyto styly se vztahují pouze na latinky, japonské znaky zůstávají při použití kurzívy v pořádku.
V uživatelském rozhraní pásů karet uživatelského rozhraní se upřednostňuje varianta Meiryo s názvem Meiryo UI.
Pro podporu národních prostředí pomocí těchto znakových sad se uživatelské rozhraní Segoe nahradí správnými písmy v závislosti na každém národním prostředí během lokalizace procesu.
Pokud chcete licenci Segoe UI a dalších písem Microsoftu pro distribuci pomocí programu založeného na Systému Windows, obraťte se na Monotype.
Poznámka: Pokyny týkající se stylu a tónu a textu uživatelského rozhraní jsou uvedeny v samostatných článcích.
Koncepty návrhu
Písma, písma, písma, velikosti bodů a atributy
V tradiční typografii písmo popisuje kombinaci řezu písma, velikosti bodu a atributů. Typ písma je vzhled písma. Segoe UI, Tahoma, Verdana a Arial jsou všechny typy. Velikost bodu odkazuje na velikost písma měřenou od horní části vzestupných dolů sestupných hodnot minus vnitřní mezery (označované jako úvodní). Bod je přibližně 1/72 palce. A konečně písmo může mít atributy tučného písma nebo kurzívy.
Neformálně lidé často místo písma používají písmo, jak to dělá tento článek, ale technicky vzato, segoe UI je písmo, nikoli písmo. Každá kombinace atributů je jedinečné písmo (například 9 bodů Segoe UI regular, 10 point Segoe UI bold atd.).
Serif a sans serif
Písma jsou buď bezpatková, nebo bezpatková. Serif označuje malé tahy, které často končí tahy písmen v písmu. Bezpatkový typ písma nemá patky.
Čtenáři obecně dávají přednost bezpatkovým písmům používaným jako základní text v dokumentu. Patky poskytují pocit formality a eleganci dokumentu. U textu uživatelského rozhraní je potřeba čistý vzhled a nižší rozlišení počítačových monitorů usnadňuje výběr bezpatkového písma.
Kontrast
Text se nejsnadněji čte, pokud je mezi světelností textu a pozadím velký rozdíl. Černý text na bílém pozadí poskytuje nejvyšší kontrastní tmavý text na velmi světlém pozadí může také poskytovat vysoký kontrast. Tato kombinace je nejvhodnější pro primární plochy uživatelského rozhraní.
Světlý text na tmavém pozadí nabízí dobrý kontrast, ale ne tak dobrý jako tmavý text na světlém pozadí. Tato kombinace funguje dobře pro sekundární plochy uživatelského rozhraní, jako jsou podokna úloh Průzkumníka, která chcete zvýraznit vzhledem k primárním povrchům uživatelského rozhraní.
Pokud chcete zajistit, aby uživatelé text přečetli, použijte tmavý text na světlém pozadí.
Affordances
Text může použít následující cenových k označení, jak se používá:
- Ukazatel. Ukazatel I-pruh ("výběr textu") označuje, že text je možné vybrat, zatímco ukazatel na šipku vlevo ("normální výběr") označuje, že text není.
- Vynechávka. Když má text fokus, kurzor je blikající svislý pruh, který označuje kurzor nebo bod výběru ve vybraném nebo upravitelném textu.
- Krabice. Pole kolem textu, které označuje, že je možné ho upravit. Pokud chcete snížit váhu prezentace, může se pole dynamicky zobrazovat jenom v případě, že je vybraný upravitelný text.
- Barva popředí Světle šedá označuje, že text je zakázaný. Nešedlé barvy, zejména modré a fialové, označují, že text je odkaz.
- Barva pozadí Světle šedé pozadí slabě naznačuje, že text je jen pro čtení, ale v praxi může mít jakýkoli barevný pozadí.
Tyto cenové možnosti jsou kombinovány pro následující významy:
- Upravitelný. Text zobrazený v poli s ukazatelem výběru textu, kurzorem (na vstupním fokusu) a obvykle na bílém pozadí.
- Je možné vybrat jen pro čtení. Text s vybraným ukazatelem a kurzorem (na vstupním fokusu)
- Jen pro čtení, není možné vybrat. Text s ukazatelem šipky
- Invalidní. Světle šedý text s ukazatelem šipky, někdy na šedém pozadí.
Text jen pro čtení má tradičně šedé pozadí, ale šedé pozadí není nutné. Ve skutečnosti může být šedé pozadí nežádoucí, zejména pro velké bloky textu, protože naznačuje, že text je zakázaný a nedoporučuje čtení.
Přístupnost a systémové písmo, velikosti a barvy
Pokyny pro zpřístupnění textu uživatelům s postižením nebo postižením se dají omezit na jedno jednoduché pravidlo: Respektujte nastavení uživatele tak, že vždy používáte systémové písmo, velikosti a barvy.
Pokud děláš jen jednu věc...
Respektujte nastavení uživatele vždy pomocí systémového písma, velikostí a barev.
vývojáři: Z kódu můžete určit vlastnosti systémového písma (včetně jeho velikosti) pomocí funkce Rozhraní API GetThemeFont. Systémové barvy můžete určit pomocí funkce GetThemeSysColor API.
Vzhledem k tomu, že nemůžete provádět žádné předpoklady o nastavení systémového motivu uživatelů, měli byste:
- Barvy písma a pozadí vždy založte ze systémových barev motivu. Nikdy nevytvádejte vlastní barvy založené na pevných hodnotách RGB (červené, zelené, modré).
- Barvy systémového textu se vždy shodují s odpovídajícími barvami pozadí. Pokud například zvolíte COLOR_STATICTEXT pro barvu textu, musíte také zvolit COLOR_STATIC pro barvu pozadí.
- Vždy vytvářejte nová písma na základě poměrných variant systémového písma. Vzhledem k metrikám systémových písem můžete vytvořit tučné písmo, kurzívu, větší a menší varianty.
Jednoduchý způsob, jak zajistit, aby program respektoval nastavení uživatelů, je otestovat pomocí jiné velikosti písma a barevného schématu s vysokým kontrastem. Ve zvoleném barevném schématu by se měl správně zobrazit veškerý text.
Vzory použití
Text má několik vzorů použití:
Zvyk | Popis |
---|---|
text záhlaví Text v záhlaví, který identifikuje okno. |
![]() |
hlavní pokyny Text, který vysvětluje, co dělat na stránce, okně nebo dialogovém okně |
![]() |
sekundární pokyny Doplňkový text, který vysvětluje, co dělat na stránce, okně nebo dialogovém okně |
![]() |
normálního textu Běžný (jen pro čtení) zobrazený v uživatelském rozhraní |
![]() |
zvýrazněný text Tučný text se používá k usnadnění parsování textu a k upoutat pozornost uživatelům textu, který musí číst. Kurzíva se používá k doslova odkazování na text (místo uvozovek) a ke zvýraznění konkrétních slov. |
![]() |
upravitelné textové Text, který můžou uživatelé upravovat, se zobrazí v poli. pokud chcete snížit váhu prezentace, může být pole zobrazeno pouze v případě, že je vybraný upravitelný text. |
![]() |
Zakázáno textové Text, který se nevztahuje na aktuální kontext, například popisky pro zakázané ovládací prvky. zakázaný text označuje, že uživatelé (obvykle) by neměli text číst. |
![]() |
odkazy Text použitý k přechodu na jinou stránku, okno nebo téma nápovědy nebo inicializaci příkazu |
![]() ![]() |
záhlaví skupiny Text použitý k seskupení položek v zobrazení seznamu |
![]() |
názvu souboru Text názvu souboru (jenom v zobrazení obsahu) |
![]() |
text dokumentu Text použitý v dokumentech (na rozdíl od textu uživatelského rozhraní) |
![]() |
nadpisy dokumentu Text použitý jako nadpis v dokumentu |
![]() |
Pokyny
Písma a barvy
- Následující písma a barvy jsou výchozí pro Systém Windows Vista a Windows 7.
Vzor | Symbol motivu | Písmo, barva |
---|---|---|
![]() |
TitulekFont |
9 bodů černá (#0000000) Segoe UI |
![]() |
MainInstruction |
12 bodů modrá (#003399) Segoe UI |
![]() |
Instrukce |
9 bodů černá (#0000000) Segoe UI |
![]() |
Základní text |
9 bodů černá (#0000000) Segoe UI |
![]() |
Základní text |
9 bodů. černá (#0000000) Segoe UI, tučné písmo nebo kurzíva |
![]() |
Základní text |
9 bodů černé (#0000000) Segoe UI v poli |
![]() |
Invalidní |
9 bodů– tmavě šedá (#323232) Segoe UI |
![]() |
HyperLinkText |
9 bodů modrá (#0066CC) Segoe UI |
![]() |
Horký |
9 bodů– světle modrá (#3399FF) Segoe UI |
![]() |
11 pt. blue (#003399) Segoe UI |
|
![]() |
11 bodů černá (#0000000) Segoe UI |
|
![]() |
(žádný) |
9 bodů černá (#0000000) Calibri |
![]() |
(žádný) |
17 bodů černá (#000000) Calibri |
- Zvolit písma a optimalizovat rozložení oken na základě technologie uživatelského rozhraní a cílové verze Windows:
Technologie uživatelského rozhraní | Cílová verze Windows | Písma, která se mají použít a optimalizovat pro |
---|---|---|
Windows Presentation Foundation |
Všichni |
Používejte části motivu WPF. |
Win32 nebo WinForms |
Windows Vista nebo novější |
Použijte příslušné písmo uživatelského rozhraní Segoe. |
Rozšiřitelné komponenty nebo před windows Vista |
Chcete-li cílit na systém Windows XP a Windows 2000, použijte 8 bod MS Shell Dlg 2 pseudo písmo, které mapuje na Tahoma. Chcete-li cílit na starší verze systému Windows, použijte 8 bod MS Shell Dlg pseudo písmo, které mapuje tahoma v systémech Windows 2000 a Windows XP a MS Sans Serif ve Windows 95, Windows 98, Windows Millennium Edition a Windows NT 4.0. |
- vývojáři :
- U prvků, které používají pevné rozložení (například šablony dialogových oken Systému Windows a WinForms), pevně zakódujte příslušné písmo z předchozí tabulky.
- Pro prvky, které používají dynamické rozložení (například Windows Presentation Foundation), použijte písma motivu. Pomocí rozhraní API motivu, jako je DrawThemeText, můžete nakreslit text na základě symbolu motivu. Pokud služba motivu není spuštěná, nezapomeňte použít alternativu založenou na systémových metrikách.
- V případě uživatelského rozhraní Segoe použijte velikost písma o velikosti 9 bodů nebo větší. Písmo Segoe UI je optimalizované pro tyto velikosti, takže nepoužívejte menší velikosti.
- Barvy systémového textu se vždy shodují s odpovídajícími barvami pozadí. Pokud například zvolíte COLOR_STATICTEXT pro barvu textu, musíte také zvolit COLOR_STATIC pro barvu pozadí.
- Vždy vytvářejte nová písma na základě poměrných variant systémového písma. Vzhledem k metrikám systémových písem můžete vytvořit tučné písmo, kurzívu, větší a menší varianty.
- Zobrazí velké bloky textu jen pro čtení (například licenční podmínky) na světlém pozadí místo šedého pozadí. Šedé pozadí naznačují, že text je zakázaný a nedoporučuje čtení.
- Zvažte maximální délku řádku 65 znaků, aby byl text snadno čitelný. (Znaky zahrnují písmena, interpunkci a mezery.)
Atributy
- Většina textu uživatelského rozhraní by měla být prostý bez jakýchkoli atributů. Atributy lze použít takto:
- Tučný. V popiscích ovládacích prvků se text snadněji parsuje. Používejte střídmě při upoutat pozornost uživatelům textu, které musí číst. Použití příliš velkého tučného písma sníží jeho dopad.
- Kurzíva. Umožňuje odkazovat na text doslova místo uvozovek. Používejte střídmě ke zvýraznění konkrétních slov. Používá se pro výzvy v textových polích a upravitelných rozevíracích seznamech.
- Tučný kurzíva. Nepoužívejte.
- Podtrhnout. Nepoužívejte s výjimkou odkazů. Pro zdůraznění používejte kurzívu.
- Ne všechna písma podporují tučné písmo a kurzívu, takže by nikdy neměly být pro pochopení textu zásadní.