Tipográfia a Windows rendszerben

A Segoe felhasználói felület változójában megjelenített szavak

A nyelv vizuális ábrázolásaként a tipográfia fő feladata az információk közlése. A Windows típusrendszer segítségével struktúrát és hierarchiát hozhat létre a tartalomban annak érdekében, hogy a felhasználói felületen maximalizálhassa az olvashatóságot és az olvashatóságot.

Segoe felhasználói felület változó a Windows új rendszer betűtípusa. Ez egy frissített változat a klasszikus Segoeról, amely változó betűtípus-technológiát használ, hogy dinamikusan biztosítson kiváló olvashatóságot nagyon kis méretek esetén, és továbbfejlesztett körvonalakat a kijelző méretű szövegekhez.

Jótanács

Ez a cikk a Fluent Design nyelv alkalmazását ismerteti Windows alkalmazásokra. További információ: Fluent Design – Tipográfia.

A Segoe Fluent Változó használata

A Segoe UI-változó két tengelyt támogat a szöveg finomabb szabályozásához: a súlyt és az optikai méretet.

  • A súlytengely (wght) fokozatos, Vékonytól (100) Félkövérig (700) terjedő súlyokkal.
  • Az optikai mérettengely (opsz) alapértelmezés szerint automatikus és be van kapcsolva. A betűtípusban szabályozza a számlálók alakját és méretét, hogy a kis méreteknél az olvashatóságot, míg a nagy méreteknél a személyiséget részesítse előnyben (optikai méretezés esetén 8 pontostól 36 pontosig).

Az XAML gyakori vezérlőinek használatakor alapértelmezés szerint a Segoe UI Változó betűtípus lesz kiválasztva a támogatott nyelvekhez. Ha ezt a betűtípust vagy egy másik, optikai tengelyt tartalmazó változó betűtípust használ, az optikai méret automatikusan megegyezik a kért betűmérettel. HTML használata esetén az optikai skálázás is automatikus, de meg kell adnia a Segoe UI Változó betűtípust a CSS-ben.

A Segoe UI-változóban megjelenített

Súlyok

Súly neve Súlytengely értéke Vizuális
Világos 300 A Segoe UI Változó fényében megjelenített
Szemi-fény 350 A Segoe UI Változó féllámpában megjelenített
Normál 400 A Segoe UI-változóban normál módon megjelenített
Félbold 600 A
Merész 700 A

Optikai tengely

A Segoe UI Variable betűtípusban renderelt kisbetű „a” különböző alakzatainak körvonalai a megjelenítési kontextus alapján

Ajánlott tipográfiai eljárások a Windows 11

Windows 11 Segoe felhasználói felületi változót használ a következő attribútumokkal a szöveg megjelenítésének kontextusa alapján.

Jellemző Érték Jegyzetek
Súly Normál, Félbold A legtöbb szöveghez használjon normál súlyt, a címekhez pedig a Semiboldot.
Igazítás Balra, Középre Alapértelmezés szerint balra igazítás, középre igazítás csak ritkán, például az alábbi szöveg ikonok esetén
Minimális értékek 14px Semibold, 12px Normál Az ilyen méretű és súlyú szövegek egyes nyelvekben olvashatatlanok
Burkolat Mondatos eset Mondatkezdő nagybetű használata az összes felhasználói felület szövegéhez, beleértve a címeket is
Truncálás Három pont és kivágás A legtöbb esetben használjon három pontot; A kivágást csak ritkán használják

Példák

Nyissa meg a WinUI 3 Katalógus alkalmazást, és tekintse meg a tipográfiai alapelveket működés közben

A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a legtöbb WinUI-vezérlőre, funkcióra és funkcióra. Az alkalmazás lekérése a Microsoft Store vagy a forráskód lekérése GitHub

Tipográfia az Windows-alkalmazásokban

fő kép

A nyelv vizuális ábrázolásaként a tipográfia fő feladata az információk közlése. A stílusnak soha nem szabad akadályoznia a célt. Ebben a cikkben meg fogjuk beszélni, hogyan lehet tipográfiai stílust használni a Windows alkalmazásban, hogy a felhasználók könnyebben és hatékonyabban megértsék a tartalmat.

Betűtípus

Az alkalmazás felhasználói felületén egy betűtípust kell használnia, és azt javasoljuk, hogy az alapértelmezett betűtípust használja Windows alkalmazásokhoz, Segoe UI-változó. Úgy tervezték, hogy a méret és a képpontsűrűség között optimális olvashatóságot tartson fenn, és tiszta, világos és nyitott esztétikát kínál, amely kiegészíti a rendszer tartalmát.

Segoe felhasználói felület változó betűtípusának mintaszövege.

Ha nem angol nyelvű nyelveket szeretne megjeleníteni, vagy másik betűtípust szeretne választani az alkalmazáshoz, tekintse meg Languages és Fonts az Windows-alkalmazásokhoz ajánlott betűtípusokat.

Méret és skálázás

Az XAML-alkalmazások betűméretei automatikusan skálázhatók az összes eszközön. A skálázási algoritmus biztosítja, hogy egy 24 px-es betűtípus egy 10 méterre lévő nagy képernyőn ugyanolyan olvasható legyen, mint egy 24 képpontos betűtípus egy néhány hüvelyknyire lévő kis képernyőn.

különböző eszközökhöz tartozó távolságok megtekintése.

A skálázási rendszer működése miatt hatékony képpontokban tervez, nem tényleges fizikai képpontokban, és nem kell módosítania a betűméreteket a különböző képernyőméretek vagy felbontások esetében.

Hierarchia

A felhasználók a vizuális hierarchiára támaszkodnak egy lap áttekintésekor: a fejlécek összegzik a tartalmat, a szövegtörzs pedig részletesebb információt nyújt. A tiszta vizuális hierarchia létrehozásához az alkalmazásban kövesse a Windows típuslépcsőt.

Képernyőkép három sornyi szövegről, ahol a betűméret egyik sorról a másikra csökken.

Gépelés rámpa

A Windows típusú rámpa kulcsfontosságú kapcsolatokat hoz létre a lapon található típusstílusok között, így a felhasználók könnyebben olvashatják a tartalmakat. Minden méret hatékony képpontban van megadva, és optimalizálva van a Windows alkalmazásokhoz, amelyek különböző képernyőméreteken futnak.

Windows 11 a következő értékeket használja a felhasználói felületen található különböző típusú szövegekhez.

példa Súly Méret/vonalmagasság
Példa feliratszöveg Kicsi 12/16 epx
Példa a szövegre Szöveg 14/20 epx
Példa erőteljes szövegre a törzsben Szöveg félkövér 14/20 epx
Példa nagyméretű szövegtörzsre Szöveg 18/24 epx
Példa nagy méretű, erős szövegtörzsre Szöveg félkövér 18/24 epx
Példa alcímszövegre Félkövér megjelenítés 20/28 epx
Példa a cím szövegére Félkövér megjelenítés 28/36 epx
Példa a cím nagy szövegére Félkövér megjelenítés 40/52 epx
Példa a megjelenítendő szövegre Félkövér megjelenítés 68/92 epx

Ezek a típusstílusok XAML statikus erőforrásként érhetők el, amelyek az XAML típusú rámpa-konvencióknak megfelelően érhetők el, így közvetlenül az alkalmazásban használhatja őket.

Megjegyzés:

A félkövér és dőlt stílusok nem részei a Windows betűtípus-skálájának. A kiemeléshez félkövér helyett kövér betűt használjon. A dőlt betű kizárt, mert csökkentheti az olvashatóságot és az érthetőséget, különösen a diszlexiában szenvedők számára.

Igazítás

Az alapértelmezett TextAlignment balra igazít, és a legtöbb esetben a balra igazított és cikk-cakkos jobb oldal biztosítja a tartalom következetes rögzítését és egységes megjelenését. RTL-nyelvek esetén lásd: Az elrendezés és a betűtípusok módosítása a globalizáció támogatásához.

Balra igazított szöveget mutat. 

<TextBlock TextAlignment="Left">

Karakterszám

Negyedik képernyőkép egy zöld sávról, amelynek zöld pipa és a Do szó van benne. Az olvasás megkönnyítése érdekében tartsa meg az 50–60 betűt soronként.

nem Ne használjon 20 karakternél kevesebbet vagy 60 karakternél több karaktert sorbanként, mivel ez nehezen olvasható.

Kivágás és három pont

Ha a szöveg mennyisége túllépi a rendelkezésre álló területet, javasoljuk, hogy vágja ki a szöveget, és szúrjon be három pontot [...], amely a legtöbb WinUI-szövegvezérlő alapértelmezett viselkedése.

Egy eszközkeretet jelenít meg, ahol a szöveg le van vágva. 

<TextBlock TextWrapping="WrapWholeWords" TextTrimming="Clip"/>

Az ötödik képernyőkép egy zöld sávról, amelyben zöld pipa és a Do szó látható. Szöveg kivágása és körbefuttatása, ha több sor is engedélyezve van.

nem Ne használjon három pontot a vizuális zsúfoltság elkerülése érdekében.

Megjegyzés:

Ha a tárolók nincsenek jól definiálva (például nem különböztetik meg a háttérszínt), vagy ha több szöveg megjelenítésére mutató hivatkozás található, használjon három pontot.

Nyelvek

A Segoe UI Variable az angol, az európai, a görög és az orosz nyelv betűtípusa. Más nyelvek esetén tekintse meg az alábbi javaslatokat.

Betűtípusok globalizálása/honosítása

A LanguageFont betűleképezési API-kkal programozott módon hozzáférhet egy adott nyelvhez az ajánlott betűcsaládhoz, mérethez, súlyhoz és stílushoz. A LanguageFont objektum hozzáférést biztosít a megfelelő betűtípus-információkhoz a tartalom különböző kategóriáihoz, beleértve a felhasználói felület fejléceit, az értesítéseket, a törzsszöveget és a felhasználó által szerkeszthető dokumentumtörzs betűtípusait. További információ: Elrendezés és betűtípusok módosítása a globalizáció támogatásához.

Betűtípusok nem latin nyelvű nyelvekhez

Betűcsalád Stílusok Jegyzetek
Ebrima Normál, félkövér Afrikai szkriptek felhasználói felületi betűtípusa (ADLaM, Ethiopic, N'Ko, Osmanya, Tifinagh, Vai).
Gadugi Normál, félkövér Felhasználói felületi betűtípus észak-amerikai szkriptekhez (kanadai Syllabics, Cherokee, Osage).
Leelawadee felhasználói felület Normál, Félvastag, Félkövér A délkelet-ázsiai szkriptek felhasználói felületi betűtípusa (Buginese, Khmer, Lao, Thai).
Malgun Gothic Rendszeres A koreai felhasználói felület betűtípusa.
Microsoft JhengHei felhasználói felület Normál, Félkövér, Könnyű A hagyományos kínaiak felhasználói felületi betűtípusa.
Microsoft YaHei felhasználói felület Normál, Félkövér, Könnyű Egyszerűsített kínai felhasználói felület betűtípusa.
Mianmar-szöveg Rendszeres Tartalék betűtípus a mianmari szkripthez.
Nirmala felhasználói felület Normál, Félvastag, Félkövér Felhasználói felületi betűtípus dél-ázsiai szkriptekhez (Bangla, Chakma, Devanagari, Gujarati, Gurmukhi, Kannada, Malayalam, Meetei Mayek, Odia, Ol Chiki, Sinhala, Sora Sompeng, Tamil, Telugu).
Segoe UI Normál, Dőlt, Világos dőlt, Fekete dőlt, Félkövér, Félkövér dőlt, Világos, Félkövér, Félkövér, Fekete Felhasználói felületi betűtípus arab, örmény, grúz és héber nyelven.
SimSun Rendszeres Régi kínai felhasználói felület betűtípusa.
Yu Gothic felhasználói felület Light, Semilight, Normál, Félkövér, Kövér Japán felhasználói felület betűtípusa.

Betűtípusok

Sans-serif betűtípusok

A Sans-serif betűtípusok remek választás címsorokhoz és felhasználói felületi elemekhez.

Betűcsalád Stílusok Jegyzetek
Arial Normál, Dőlt, Félkövér, Félkövér dőlt, Fekete Támogatja az európai és közel-keleti szkripteket (latin, görög, cirill, arab, örmény és héber). A fekete súly csak az európai szkripteket támogatja.
Calibri Normál, Dőlt, Félkövér, Félkövér dőlt, Könnyű, Könnyű dőlt Támogatja az európai és közel-keleti (latin, görög, cirill, arab és héber) szkripteket. Arab csak függőlegesen érhető el.
Consolas Normál, Dőlt, Félkövér, Félkövér Dőlt Rögzített szélességű betűtípus, amely támogatja az európai (latin, görög és cirill betűs) szkripteket.
Segoe UI Normál, Dőlt, Világos dőlt, Fekete dőlt, Félkövér, Félkövér dőlt, Világos, Félkövér, Félkövér, Fekete Európai és közel-keleti (arab, örmény, cirill, grúz, görög, héber, latin) és Lisu-szkriptek felhasználói felületi betűtípusa.
Selawik Normál, Félvilágos, Világos, Kövér, Félkövér Nyílt forráskódú betűtípus, amely metrikakompatibilis a Segoe felhasználói felületével, olyan más platformokon futó alkalmazásokhoz készült, amelyek nem szeretnék a Segoe felhasználói felületét csomagolni. Get Selawik on GitHub.

Serif betűtípusok

A serif betűtípusok jól alkalmasak nagy mennyiségű szöveg bemutatására.

Betűcsalád Stílusok Jegyzetek
Cambria Rendszeres Serif betűtípus, amely támogatja az európai szkripteket (latin, görög, cirill betű).
Futár Új Normál, Dőlt, Félkövér, Félkövér Dőlt Serif rögzített szélességű betűtípus, amely támogatja az európai és közel-keleti szkripteket (latin, görög, cirill, arab, örmény és héber).
Grúzia Normál, Dőlt, Félkövér, Félkövér Dőlt Támogatja az európai (latin, görög és cirill betűs) szkripteket.
Times New Roman Normál, Dőlt, Félkövér, Félkövér Dőlt Örökölt betűtípus, amely támogatja az európai szkripteket (latin, görög, cirill, arab, örmény, héber).

Változó betűtípusok

A változó betűtípusok alkalmasak a szöveg megjelenésének pontos szabályozására.

Betűcsalád Tengelyek Jegyzetek
Bahnschrift Súly, szélesség Latin, görög és cirill betűkészletet támogató változó betűtípus.
Segoe felhasználói felület változója Súly, optikai méret Latin, görög és cirill betűkészletet támogató változó betűtípus.

Szimbólumok és ikonok

Betűcsalád Stílusok Jegyzetek
Segoe Fluent Ikonok Rendszeres Az alkalmazásikonok felhasználói felületi betűtípusa. További információ: Segoe Fluent Icons betűtípus-cikk .
Segoe UI Emoji Rendszeres Az Emoji felhasználói felületi betűtípusa.
Segoe felhasználói felület szimbóluma Rendszeres Tartalék betűtípus szimbólumokhoz.
  • Last updated on