Rozložení obsahu a mezery

Tento článek obsahuje několik praktických tipů a příkladů, které vám pomůžou navrhnout obsah aplikace: důvody pro mezery ve Windows, použití rampy typu k předvedení hierarchie, seznamů a mřížek a postupu seskupování ovládacích prvků.

Mezery a žlaby

Použití konzistentně velkých mezer a okrajů sémanticky seskupuje prostředí do samostatných složek. Tyto hodnoty se promítají do logiky kulatých rohů a společně pomáhají vytvořit jednotné a funkční rozložení.

Dvě tlačítka oddělená o 8 pixelů

8epx mezi tlačítky

Tlačítko a informační panel oddělený 8 pixelů.

8epx mezi tlačítky a vyskakovacími okny

Ovládací prvek a záhlaví oddělené 8 pixely.

8epx mezi ovládacím prvkem a záhlavím

Ovládací prvek a popisek oddělený 12 pixelů

12epx mezi ovládacím prvku a popiskem

Dvě oblasti obsahu oddělené 12 pixely

12epx mezi oblastmi obsahu

Povrch obsahující text s 12pixelovými okraji na obou stranách.

16epx mezi povrchem a hraničním textem

Text + hierarchie

Naše typová rampa (link) je navržena tak, aby poskytovala řadu velikostí, které mohou pomoci s komunikací hierarchie v rámci aplikace.

Příklad textu, který používá styl nadpisu, podnadpisu a textu, pokud je dostatek místa.

Použití titulu, titulku a textu s rozestupem 12 px.

Příklad použití stylu Body Strong místo titulu v omezeném prostoru.

Při odlišování titulku v omezeném prostoru UI použijte styl Body Strong pro titulek bez přidávání mezer mezi textovými bloky.

Příklad použití stylu titulku v omezeném prostoru

Použijte velikost titulku pro velmi omezené mezery, kde je text potřebný, například příkazová tlačítka.

Seznamy a mřížky

Existují různé styly seznamů a mřížky, které je možné vytvořit. Níže jsou uvedeny různé kompozice používané ve Windowsu.

Příklad seznamu s položkami seznamu s více prvky.

U víceřádkových seznamů použijte styl Základní text a Titulek z typografického systému a ikony o velikosti 32epx.

Pro záhlaví oddílů použijte Body Strong.

Příklad vodorovných seznamů

Pokud pro položky mřížky používáte ikony nebo prvky obrázku osoby, použijte text titulku, který je zarovnaný na střed.

Příklad seznamu obsahující velké položky seznamu.

Pokud váš seznam obsahuje velké grafické prvky s textem, použijte pro primární text styl Body a zarovnejte ho nalevo k obrázku.

Použití ovládacích prvků

Některé příklady toho, jak se ovládací prvky můžou vzájemně propojit v běžných konfiguracích.

Příklad rozšíření s podřízenými ovládacími prvky.

Příklady ukazující, jak používat ovládací prvek expanderu (odkaz) se styly seznamů a běžnými ovládacími prvky. Ovládací prvky by měly být zarovnané doprava s 16epx mezi ovládacím prvkem a tlačítkem expanderu.

Příklad zarovnání ovládacích prvků uvnitř expanderu

Tento příklad ukazuje zarovnání ovládacích prvků při umístění uvnitř expanderu. Odsazení ovládacích prvků 48epx

  • Last updated on