Grafické prvky

grafických prvků vizuálně zobrazit relace, hierarchii a zvýraznění. Patří mezi ně pozadí, bannery, sklo, agregátory, oddělovače, stíny a úchyty.

Příklad s několika typy grafických prvků.

Grafické prvky obvykle nejsou interaktivní. Oddělovače jsou však interaktivní pro měnitelný obsah a popisovače jsou grafika, která zobrazuje interaktivitu.

Poznámka: Pokyny týkající se skupinových polí, animace, ikona brandingu jsou uvedeny v samostatných článcích.

Je toto správné uživatelské rozhraní?

I když jsou grafické prvky silným vizuálním prostředkem označující relace, jejich nadměrné použití přidává vizuální nepotřebné prvky a snižuje prostor dostupný na povrchu. Měly by se používat střídmě.

Trend návrhu v systému Microsoft Windows je jednodušší a čistější vzhled odstraněním nepotřebných grafiky a čar.

Pokud chcete rozhodnout, jestli je grafický prvek nezbytný, zvažte tyto otázky:

• Je prezentace a komunikace návrhu stejně jasná a účinná bez prvku? Pokud ano, odeberte ho.
• Můžete efektivně komunikovat relace pomocí samotného rozložení? Pokud ano, použijte rozložení. Související ovládací prvky můžete umístit vedle sebe a umístit nadbytečné mezery mezi nesouvisejícími ovládacími prvky. K zobrazení hierarchických relací můžete použít také odsazení.

V tomto příkladu se k zobrazení relací ovládacích prvků používá samotné rozložení.

• Je komunikace efektivní bez textu? Pokud ne, použijte pole skupiny , oddělovač s popiskem nebo jiný popisek.

Vzory použití

Grafické prvky mají několik vzorů použití:

Element	Popis
grafické ilustrace vizuální sdělení nápadu.	Grafické ilustrace jsou podobné ikonám s tím rozdílem, že můžou mít libovolnou velikost a obvykle nejsou interaktivní. V tomto příkladu se k návrhu povahy funkce používá grafický obrázek.
pozadí slouží k zdůraznění nebo zrušení zvýraznění různých typů obsahu.	Pozadí lze použít ke zvýraznění důležitého obsahu. v tomto příkladu se pozadí používá ke zvýraznění důležitého úkolu. pozadí lze také použít k odstranění zvýraznění sekundárního obsahu. V tomto příkladu jsou sekundární úlohy zvýrazňovány jejich umístěním v podokně úloh.
bannery slouží k označení důležitého stavu.	Na rozdíl od pozadí bannery zvýrazňují především jeden textový řetězec. V tomto příkladu se používá banner, který označuje, že nastavení stránky jsou řízena zásadami skupiny.
sklo použití strategicky ke snížení vizuální hmotnosti okna.	Sklo může snížit hmotnost povrchu tím, že se zaměří na obsah místo samotného okna. V tomto příkladu se sklo zaměřuje pozornost uživatele na obsah místo ovládacích prvků.
agregátorů slouží k vytvoření vizuální relace mezi ovládacími prvky se silnými souvislostmi.	v tomto příkladu se pozadí agregátoru používá ke zvýraznění vztahu mezi tlačítky zpět a vpřed v Průzkumníku. V tomto příkladu se agregátor hranic používá k zdůraznění vztahu mezi ovládacími prvky a jejich pocit, že se místo osmi ovládacích prvků cítí jako jeden ovládací prvek.
oddělovače slouží k oddělení slabě souvisejících nebo nesouvisejících ovládacích prvků.	Oddělovače můžou být interaktivní nebo neinteraktivní. Interaktivní oddělovače mezi měnitelným obsahem se označují jako rozdělovače. v tomto příkladu se interaktivní oddělovač používá pro měnitelný obsah. V tomto příkladu není oddělovač interaktivní.
stínů umožňuje vizuálně vyniknout obsah na pozadí.	Stíny v tomto příkladu zvýrazní kresbu na pozadí.
úchyty slouží k označení, že objekt lze přesunout nebo změnit jeho velikost.	Úchyty jsou vždy interaktivní a jejich chování navrhuje ukazatel myši při najetí myší. ukazatelem velikosti V těchto příkladech popisovače označují, že objekt lze změnit velikost.

Pokyny

Obecné

• Nepředávejte základní informace prostřednictvím samotných grafických prvků. Při tom jsou problémy s přístupností pro uživatele se zrakovým postižením nebo postižením.

Grafické návrhy

• Grafika je nejúčinnější, když vyztuží jedinou jednoduchou myšlenku. Složité grafiky, které vyžadují, aby interpretovat, nefungují dobře. Hieroglyfy jsou nejlepší vlevo pro jeskynní kresby.

  nesprávná odpověď:

  

  V tomto příkladu se složitý obrázek ze systému Windows XP neefektivní snaží vysvětlit komplexní rozhodnutí o důvěryhodnosti.

• Nepoužívejte šipky, dvojité šipky, snímky tlačítek ani jiné cenové možnosti přidružené k interaktivním ovládacím prvkům. Tím uživatele pozvete k interakci s grafikou.

• Vyhněte se čistě červeným, žlutým a zeleným vzorům. Abyste se vyhnuli nejasnostem, zarezervujte si tyto barvy pro komunikaci stavu. Pokud tyto barvy musíte použít pro něco jiného než stav, použijte místo čistých barev ztlumené tóny.

• Používejte kulturně neutrální návrhy. To, co může mít určitý význam v jedné zemi, oblasti nebo kultuře, nemusí mít stejný význam v jiné.

• Vyhněte se používání lidí, tváří, pohlaví nebo částí těla, stejně jako náboženské, politické a národní symboly. Takové obrázky se nemusí snadno překládat nebo by mohly být urážlivé.

• Když musíte reprezentovat lidi nebo uživatele, znázornit je obecně; vyhněte se realistickým zobrazením.

Pozadí a bannery

• Pokud chcete zdůraznit obsah, použijte tmavý text na světlém pozadí. Černý text na světle šedém nebo žlutém pozadí funguje dobře.

  

  V tomto příkladu získá odkaz pozornost uživatele, protože je na žlutém pozadí.

• Pokud chcete obsah zvýraznit, použijte světlý text na tmavém pozadí. Bílý text na tmavě šedém nebo modrém pozadí funguje dobře.

  

  V tomto příkladu tmavé pozadí zvýrazní obsah.

• Pokud se použije přechod, ujistěte se, že barva textu má dobrý kontrast v celém přechodu.

• K upoutat pozornost banneru vždy pomocí ikony 16 × 16 pixelů. Bannery jsou příliš snadné přehlédnout jinak. Další pokyny a příklady najdete v tématu standardní ikony.

• Používejte pozadí a bannery s opatrností. I když záměrem pozadí nebo banneru může být zdůraznit obsah, poměrně často jsou výsledky opačným jevem známým jako "banner blindness".

Sklo

• Zvažte použití skla strategicky v malých oblastech, které se dotknou rámečku okna bez textu. Díky tomu může mít program jednodušší, světlejší a soudržnější vzhled tím, že se oblast jeví jako součást rámce.
• Nepoužívejte sklo v situacích, kdy by bylo poutavější nebo jednodušší použít pozadí prostého okna.

Oddělovače

• Pro oddělovače použijte svislé a vodorovné čáry. Ujistěte se, že máte dostatek místa mezi oddělovači a obsahem odděleným.
• U oddělovačů mezi sizable obsahem (rozdělovači) zobrazte ukazatel změny velikosti při najetí myší.

V těchto příkladech se při najetí myší zobrazí změna velikosti ukazatelů.

Stíny

• Používejte pouze k tomu, aby byl nejdůležitější obsah nebo objekty, které se přetahují, vizuálně vynikly na pozadí. V jiných případech zvažte vizuální nepotřebné stíny.

Podpora vysokého dpi

• Podporuje režimy videa 96 a 120 bodů na palec (dpi). Rozpozná režim dpi při spuštění a zpracuje události změn dpi. Systém Windows je optimalizovaný pro 96 a 120 dpi a ve výchozím nastavení používá 96 dpi.
• Raději poskytovat samostatné rastrové obrázky vykreslené speciálně pro 96 a 120 dpi přes měřítko grafiky. Alespoň 96 a 120 dpi verze pro nejdůležitější, viditelné rastrové obrázky a buď na střed, nebo měřítko ostatních. Takové aplikace jsou považovány za "s vysokým rozlišením dpi" a poskytují lepší vizuální prostředí než programy, které jsou automaticky škálovány systémem Windows.
  • Vývojáři: Můžete deklarovat program s vysokým rozlišením dpi (a zabránit automatickému škálování) nastavení příznaku dpi v manifestu programu nebo voláním rozhraní SetProcessDPIAware() API během inicializace programu. Makra můžete použít ke zjednodušení výběru správné grafiky. U rastrových obrázků Win32 můžete použít SS_CENTERIMAGE k zarovnání na střed nebo SS_REALSIZECONTROL ke škálování.
• Zkontrolujte program na 96 i 120 dpi pro:
  • Grafika, která je příliš malá nebo příliš velká.
  • Grafika, která se ořízne, překrývá nebo jinak neodpovídá správně.
  • Grafika, která je špatně roztažená ("pixilated").
  • Text, který je oříznutý nebo neveřený na pozadí grafiky.

Text

• Pro usnadnění a lokalizaci nepoužívejte v grafikách žádný text. Výjimky, které představují branding a text jako abstraktní koncept.