Szövegméretezés

Példa a szöveg méretezésére Windows 11-ben (100%–225%)

Áttekintés

A szöveg olvasása a számítógép képernyőjén sokak számára kihívást jelenthet. Ezzel szemben egyes felhasználók úgy találják, hogy az alkalmazásokban és webhelyeken használt betűméretek a szükségesnél nagyobbak.

Annak érdekében, hogy a szöveg a lehető legtágabb felhasználói kör számára olvasható legyen, a Windows lehetővé teszi a felhasználók számára a relatív betűméret módosítását mind az operációs rendszerben, mind az egyes alkalmazásokban. Ahelyett, hogy nagyítóalkalmazást használna (amely általában csak a képernyő egy területén belül nagyít mindent, és saját használhatósági problémákat vezet be), megváltoztatja a megjelenítési felbontást, vagy DPI-méretezésre támaszkodik (amely mindent átméretez a megjelenítés és a tipikus megtekintési távolság alapján), a felhasználó gyorsan access egy beállítást, amely csak a szöveget méretezi át, 100% (az alapértelmezett méret) 225%.

Support

A WinUI-alkalmazások alapértelmezés szerint támogatják a szövegméretezést.

Ha a Windows-alkalmazás egyéni vezérlőket, egyéni szövegfelületeket, szigorúan kódolt vezérlőmagasságokat, régebbi keretrendszereket vagy külső keretrendszereket tartalmaz, valószínűleg frissítenie kell néhány frissítést, hogy egységes és hasznos felhasználói élményt biztosíthasson a felhasználóknak.

A DirectWrite, a GDI és az XAML SwapChainPanels natív módon nem támogatja a szövegméretezést, míg a Win32-támogatás menükre, ikonokra és eszköztárakra korlátozódik.

Felhasználói élmény

A felhasználók a Beállítások -> Kisegítő lehetőségek -> Vision/Display képernyőn a Szövegméret növelése csúszkával növelhetik a szöveg méretét.

Szövegméret beállítások a Beállítások -> Könnyű hozzáférés -> Látás/Kijelző képernyő

Útmutató az UX-hez

A szöveg átméretezésekor a vezérlőknek és tárolóknak is át kell méreteznie és újra kell átfutnia a szöveget és az új elrendezést. Ahogy korábban említettük, az alkalmazástól, a keretrendszertől és a platformtól függően a munka nagy része az Ön számára történik. Az alábbi UX-útmutató azokat az eseteket ismerteti, amikor nem.

A platformvezérlők használata

Ezt már mondtuk? Érdemes megismételni: Ha lehetséges, mindig használja a különböző Windows app keretrendszerekhez biztosított beépített vezérlőket, hogy a lehető legátfogóbb felhasználói élményt nyújtsa a lehető legkevesebb erőfeszítéshez.

Például az összes WinUI-szövegvezérlő támogatja a teljes szövegméretezést testreszabás és templatálás nélkül.

Az alábbi kódrészlet egy egyszerű WinUI-alkalmazásból származik, amely néhány szabványos szövegvezérlőt tartalmaz:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <TextBlock Grid.Row="0" 
                Style="{ThemeResource TitleTextBlockStyle}"
                Text="Text scaling test" 
                HorizontalTextAlignment="Center" />
    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Image Grid.Column="0" 
                Source="Assets/StoreLogo.png" 
                Width="450" Height="450"/>
        <StackPanel Grid.Column="1" 
                    HorizontalAlignment="Center">
            <TextBlock TextWrapping="WrapWholeWords">
                The quick brown fox jumped over the lazy dog.
            </TextBlock>
            <TextBox PlaceholderText="Type something here" />
        </StackPanel>
        <Image Grid.Column="2" 
                Source="Assets/StoreLogo.png" 
                Width="450" Height="450"/>
    </Grid>
    <TextBlock Grid.Row="2" 
                Style="{ThemeResource TitleTextBlockStyle}"
                Text="Text scaling test footer" 
                HorizontalTextAlignment="Center" />
</Grid>

Animált szövegméretezés

Automatikus méretezés használata

Ne adjon meg abszolút méreteket a vezérlőkhöz. Amikor csak lehetséges, hagyja, hogy a platform automatikusan átméretezje a vezérlőket a felhasználói és eszközbeállítások alapján.

Ebben az előző példában szereplő kódrészletben a rácsoszlopok és Auto a * szélesség értékeit használjuk, és lehetővé tesszük, hogy a platform a rácson belül található elemek mérete alapján módosítsa az alkalmazás elrendezését.

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>

Szöveg körbefuttatásának használata

Annak érdekében, hogy az alkalmazás elrendezése a lehető legrugalmasabb és rugalmasabb legyen, engedélyezze a szöveg körbefuttatását minden olyan vezérlőben, amely szöveget tartalmaz (számos vezérlő alapértelmezés szerint nem támogatja a szövegburkolást).

Ha nem ad meg szövegburkolást, a platform más módszerekkel állítja be az elrendezést, beleértve a kivágást is (lásd az előző példát).

Itt a AcceptsReturn és TextWrapping TextBox tulajdonságok használatával biztosítjuk, hogy az elrendezés a lehető legrugalmasabb legyen.

<TextBox PlaceholderText="Type something here" 
          AcceptsReturn="True" TextWrapping="Wrap" />

Animált szövegméretezés szövegburkolással

Szövegkivágási viselkedés megadása

Ha a szöveg körbefuttatása nem megfelelő, a legtöbb szövegvezérlő lehetővé teszi, hogy vagy a szöveget levágja, vagy három pontot válasszon a szövegvágási beállításhoz. A kivágást részesítik előnyben a három ponttal szemben, mivel a három pont maguk is helyet foglalnak.

Ebben a példában azt mutatjuk be, hogyan lehet szövegrészeket kivágni egy TextBlockban a TextTrimming tulajdonság használatával.

<TextBlock TextTrimming="Clip">
    The quick brown fox jumped over the lazy dog.
</TextBlock>

Szövegméretezés szövegkivágással

Súgó buborék használata

Ha szöveget vág ki, használjon egy tooltipet a teljes szöveg megjelenítéséhez a felhasználóknak.

Itt egy olyan elemleírást adunk hozzá a TextBlockhoz, amely nem támogatja a szövegburkolást:

<TextBlock TextTrimming="Clip">
    <ToolTipService.ToolTip>
        <ToolTip Content="The quick brown fox jumped over the lazy dog."/>
    </ToolTipService.ToolTip>
    The quick brown fox jumped over the lazy dog.
</TextBlock>

Ne méretezze át a betűkészlet-alapú ikonokat és szimbólumokat

Ha betűtípusalapú ikonokat használ a kiemeléshez vagy a díszítéshez, tiltsa le a skálázást ezeken a karaktereken.

Állítsa az IsTextScaleFactorEnabled tulajdonságotfalse a legtöbb XAML-vezérlőre.

A szöveg natív skálázásának támogatása

Kezelje a TextScaleFactorChanged UISettings rendszereseményt az egyéni keretrendszerben és vezérlőkben. Ez az esemény minden alkalommal létre lesz hozva, amikor a felhasználó beállítja a szövegméretezési tényezőt a rendszeren.

Összefoglalás

Ez a témakör áttekintést nyújt a windowsos szövegméretezés támogatásáról, és a felhasználói élmény testreszabásával kapcsolatos UX- és fejlesztői útmutatást tartalmaz.

Kapcsolódó cikkek

API-referencia

• IsTextScaleFactorEnabled
• TextScaleFactorChanged