Textskalierung

  • Artikel

Hero-Abbildung mit einem Beispiel für die Textskalierung von 100 % auf 225 %.
Beispiel für die Textskalierung in Windows 11 (100 % bis 225 %)

Übersicht

Das Lesen von Text auf einem Computerbildschirm (von mobilen Geräten über Laptop über Desktopmonitor bis hin zum riesigen Bildschirm eines Surface Hub) kann für viele Menschen eine Herausforderung darstellen. Umgekehrt stellen einige Benutzer fest, dass die schriftgrößen, die in Apps und Websites verwendet werden, größer als erforderlich sind.

Um sicherzustellen, dass Der Text für eine möglichst große Anzahl von Benutzern lesbar ist, bietet Windows Benutzern die Möglichkeit, den relativen Schriftgrad sowohl für das Betriebssystem als auch für einzelne Anwendungen zu ändern. Statt eine Bildschirmlupen-App zu verwenden(die normalerweise einfach alles in einem Bereich des Bildschirms vergrößert und eigene Nutzbarkeitsprobleme mit sich bringt), die Bildschirmauflösung zu ändern oder sich auf die DPI-Skalierung zu verlassen (bei der die Größen aller Elemente anhand der Anzeige und des typischen Betrachtungsabstands geändert werden), kann ein Benutzer schnell auf eine Einstellung zugreifen, um nur die Textgröße im Bereich von 100 % (Standardgröße) bis zu 225 % zu ändern.

Support

Universelle Windows-Anwendungen (sowohl Standard als auch PWA) unterstützen standardmäßig die Textskalierung.

Wenn Ihre Windows-Anwendung benutzerdefinierte Steuerelemente, benutzerdefinierte Textoberflächen, hartcodierte Steuerhöhen, ältere Frameworks oder Frameworks von Drittanbietern enthält, müssen Sie wahrscheinlich einige Updates vornehmen, um eine konsistente und nützliche Erfahrung für Ihre Benutzer sicherzustellen.

DirectWrite, GDI und XAML SwapChainPanels unterstützen keine native Textskalierung, während die Win32-Unterstützung auf Menüs, Symbole und Symbolleisten beschränkt ist.

Benutzerfreundlichkeit

Benutzer können die Textskala mit dem Schieberegler Text vergrößern auf dem Bildschirm Einstellungen –> Erleichterte Bedienung –> Sehen/Anzeigen anpassen.

Screenshot der Seite
Textskalierungseinstellung aus Einstellungen –> Erleichterte Bedienung –> Bildschirm "Sehen/Anzeigen"

Erläuterungen zur Benutzeroberfläche

Wenn die Größe von Text geändert wird, müssen Steuerelemente und Container auch die Größe ändern und den Fluss ändern, um den Text und sein neues Layout zu berücksichtigen. Wie bereits erwähnt, wird je nach App, Framework und Plattform ein Großteil dieser Arbeit für Sie erledigt. Der folgende UX-Leitfaden behandelt die Fälle, in denen dies nicht der Fall ist.

Verwenden der Plattformsteuerelemente

Haben wir das schon gesagt? Es lohnt sich, zu wiederholen: Verwenden Sie nach Möglichkeit immer die integrierten Steuerelemente, die mit den verschiedenen Windows-App-Frameworks bereitgestellt werden, um eine möglichst umfassende Benutzererfahrung bei möglichst geringem Aufwand zu erhalten.

Beispielsweise unterstützen alle UWP-Textsteuerelemente die Volltextskalierung ohne Anpassungen oder Vorlagen.

Hier sehen Sie einen Codeausschnitt aus einer einfachen UWP-App, die einige Standardtextsteuerelemente enthält:

<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>

Animation der Textskalierung von 100 % bis 225 %.
Skalierung animierter Text

Verwenden der automatischen Größenanpassung

Geben Sie keine absoluten Größen für Ihre Steuerelemente an. Lassen Sie die Plattform nach Möglichkeit die Größe Ihrer Steuerelemente automatisch basierend auf Den Benutzer- und Geräteeinstellungen ändern.

In diesem Codeausschnitt aus dem vorherigen Beispiel verwenden wir die Auto Breitenwerte und * für eine Reihe von Rasterspalten und lassen die Plattform das App-Layout basierend auf der Größe der im Raster enthaltenen Elemente anpassen.

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

Verwenden von Textumbruch

Um sicherzustellen, dass das Layout Ihrer App so flexibel und anpassungsfähig wie möglich ist, aktivieren Sie textumbruch in jedem Steuerelement, das Text enthält (viele Steuerelemente unterstützen standardmäßig keine Textumbrüche).

Wenn Sie keinen Textumbruch angeben, verwendet die Plattform andere Methoden zum Anpassen des Layouts, einschließlich Clipping (siehe vorheriges Beispiel).

Hier verwenden wir die AcceptsReturn TextBox-Eigenschaften und TextWrapping , um sicherzustellen, dass unser Layout so flexibel wie möglich ist.

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

Animation der Textskalierung von 100 % bis 225 % mit Textumbruch.
Skalierung von animiertem Text mit Textumbruch

Festlegen des Textkürzungsverhaltens

Wenn text wrapping nicht das bevorzugte Verhalten ist, können Sie mit den meisten Textsteuerelementen den Text entweder beschneiden oder Auslassungspunkte für das Textkürzungsverhalten angeben. Clipping wird Ellipsen bevorzugt, da Ellipsen selbst Platz einnehmen.

Hinweis

Wenn Sie Ihren Text ausschneiden müssen, schneiden Sie das Ende der Zeichenfolge ab, nicht den Anfang.

In diesem Beispiel wird gezeigt, wie Text in einem TextBlock mit der TextTrimming-Eigenschaft beschnitten wird.

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

Screenshot: Textskalierung von 100 % bis 225 % mit Textausschnitt
Textskalierung mit Textausschnitt

Verwenden einer QuickInfo

Wenn Sie Text ausschneiden, verwenden Sie eine QuickInfo , um ihren Benutzern den vollständigen Text bereitzustellen.

Hier fügen wir einer TextBlock-Datei eine QuickInfo hinzu, die das Umschließen von Text nicht unterstützt:

<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>

Auf Schriftarten basierende Symbole oder Symbole nicht skalieren

Wenn Sie schriftartbasierte Symbole zur Hervorhebung oder Dekoration verwenden, deaktivieren Sie die Skalierung für diese Zeichen.

Legen Sie die IsTextScaleFactorEnabled-Eigenschaft für die meisten XAML-Steuerelemente auf fest false .

Unterstützung der nativen Textskalierung

Behandeln Sie das TextScaleFactorChanged UISettings-Systemereignis in Ihrem benutzerdefinierten Framework und ihren Steuerelementen. Dieses Ereignis wird jedes Mal ausgelöst, wenn der Benutzer den Textskalierungsfaktor auf dem System festlegt.

Zusammenfassung

Dieses Thema bietet eine Übersicht über die Unterstützung der Textskalierung in Windows und enthält UX- und Entwickleranleitungen zum Anpassen der Benutzeroberfläche.

API-Referenz