Tartalomelrendezés és térköz

Ez a cikk gyakorlati tippeket és példákat tartalmaz az alkalmazás tartalmának megtervezéséhez: a Windows térközének indoklása, a típusrámpa használata a hierarchia, a listák és a rácsok bemutatásához, valamint a vezérlők csoportosításához.

Térközök és margók

A konzisztens méretű térközök és ereszcsatornák használata szemantikailag külön összetevőkbe csoportosítja a tapasztalatokat. Ezek az értékek összhangba hozzák a lekerekített sarkok logikáját, és együtt segítenek kohéziós és használható elrendezést létrehozni.

Két gomb 8 képponttal elválasztva.

8epx a gombok között

Egy gomb és egy lebegő menü, amelyeket 8 képpont választ el egymástól.

8epx a gombok és a úszó panelek között

Egy vezérlőelem és egy 8 képponttal elválasztott fejléc.

8epx a vezérlő és a fejléc között

Vezérlő és 12 képponttal elválasztott címke

12epx a vezérlőelem és a címke között

Két tartalomterület 12 képponttal elválasztva.

12epx a tartalomterületek között

Egy 12 képpontos ereszcsatornákkal rendelkező szöveget tartalmazó felület mindkét oldalon.

16epx a felület és az él szöveg között

Szöveg + hierarchia

A típus rámpa (link) úgy lett kialakítva, hogy olyan mérettömböt biztosítson, amely segíthet az alkalmazások hierarchiájának kommunikációjában.

Példa a cím, alcím és szövegtörzs stílusát használó szövegre, ha elegendő hely áll rendelkezésre.

Cím, alcím és szövegtörzs használata 12epx térközrel.

Példa a Body Strong használatára a Cím helyett egy szűk helyen.

Ha egy címet korlátozott felhasználói felületi térben különböztet meg, a szövegblokkok közötti térköz nélkül használja a Body Strong függvényt a címhez.

Példa a Felirat stílus használatára egy szűk térben.

Használjon feliratméretet olyan szűk szóközökhöz, ahol szövegre van szükség, például parancsgombokhoz.

Listák és rácsok

Számos lista- és rácsstílus hozható létre. Az alábbiakban a Windowsban használt különféle kompozíciók találhatók.

Példalista többelemes listaelemekkel.

Többsoros listák esetén használja a Szövegtörzs és felirat lehetőséget a szöveghierarchiából, valamint a 32px-es ikonokat.

Szakaszfejlécekhez használja a Body Strong parancsot.

Példa vízszintes listákra.

Ha rácselemekhez ikonokat vagy személyképelemeket használ, középre igazított feliratszöveget használjon.

Nagy listaelemeket tartalmazó példalista.

Használjon törzsstílust az elsődleges szöveghez, és igazítsa balra a szöveget a képhez, ha a lista nagyméretű, szöveggel ellátott grafikus elemeket tartalmaz.

Vezérlők használata

Néhány példa arra, hogyan viszonyulhatnak egymáshoz a vezérlők a közös konfigurációkban.

Példa egy gyermekvezérlőkkel rendelkező kibontóra.

Példák a kiterjesztő vezérlőelem (hivatkozás) listastílusokkal és gyakori vezérlőkkel való használatára. A vezérlőket jobbra kell igazítani, 16epx távolságot hagyva a vezérlő és a kibontógomb között.

Példa a kibontó vezérlőinek igazítására.

Ez a példa azt mutatja be, hogyan igazodnak a vezérlők, amikor a kibontóban vannak elhelyezve. A vezérlők behúzása 48epx.

  • Last updated on