Lange Übersetzungen können das Layout Ihrer Software beeinträchtigen. Erfahren Sie, wie Sie Ihre Benutzeroberfläche in jeder Sprache sauber und funktional halten können.
Bei der Lokalisierung von Software ist die Länge der Übersetzung nicht immer vorhersehbar. Einige Sprachen benötigen mehr Platz als andere, und diese Unterschiede können dazu führen, dass Elemente Ihrer Benutzeroberfläche (UI) beschädigt werden.
Betrachten Sie das folgende Beispiel. Die polnische Übersetzung von „Batterie schwach“ ist 65 % breiter als die englische Version. Ohne ausreichend Platz kann die Übersetzung überlaufen, abgeschnitten werden oder andere Elemente verschieben.
Englisch
122 px
Polnisch
207 px
Betrachten Sie nun den umgekehrten Fall. Einige Sprachen, wie Chinesisch, verwenden weniger Zeichen, um dieselbe Bedeutung auszudrücken.
Englisch
150 px
Chinesisch
63 px
Wenn Ihre Benutzeroberfläche nur englischen Text berücksichtigt, können kürzere Übersetzungen zu viel leeren Raum hinterlassen, wodurch sich Beschriftungen und Schaltflächen unzusammenhängend anfühlen.
Um Layoutprobleme vor dem Start zu vermeiden, erfahren Sie in diesem Leitfaden, wie Sie:
- Lange Übersetzungen simulieren
- Layouts an unterschiedliche Textlängen anpassen
- Die Längenprüfungs-Warnungen von PTC nutzen, um Probleme frühzeitig zu erkennen
Bewährte Verfahren, um zu verhindern, dass Übersetzungen Ihre UI beschädigen
Eine gut aufgebaute UI passt sich sowohl kurzen als auch langen Übersetzungen an. Kein einzelner Ansatz funktioniert für jede Benutzeroberfläche, aber diese bewährten Verfahren helfen, Ihr Layout in verschiedenen Sprachen reaktionsschnell und lesbar zu halten.
1. Lange Übersetzungen vor der Bereitstellung simulieren
Bevor Sie echte Übersetzungen hinzufügen, ist es wichtig zu prüfen, wie Ihre aktuelle UI längere Texte verarbeitet. Eine Möglichkeit, dies zu testen, ist die Generierung künstlich erweiterter Übersetzungen. Anstatt jede Zeichenkette manuell zu ändern, können Sie ein Skript verwenden, um die Textlänge in einer gesamten Ressourcendatei zu erhöhen.
Zum Beispiel, wenn Sie ein WordPress-Theme oder -Plugin entwickeln, können Sie unser Dummy-Übersetzungstool verwenden:
Es nimmt eine bestehende .po-Datei, erweitert die übersetzten Zeichenketten um einen festgelegten Faktor und generiert eine neue .po– und .mo-Datei zum Testen. Standardmäßig erhöht es die Länge um das 1,5-fache, aber Sie können dies an Ihre Bedürfnisse anpassen.
2. Überprüfen Sie die GUI Ihrer Software manuell auf Layout-Empfindlichkeiten
Nachdem Sie Dummy-Langübersetzungen generiert haben, laden Sie diese in Ihre Software und prüfen Sie, wie Ihre UI den erweiterten Text verarbeitet. Während automatisierte Tests einige Probleme mit der Übersetzungslänge erkennen können, zeigen sie nicht immer Usability-Probleme auf.
Navigieren Sie durch verschiedene Bildschirme und suchen Sie nach:
Abgeschnittener Text
Einige Texte könnten verschwinden oder nicht vollständig angezeigt werden
Überlappende Elemente
Schaltflächen, Beschriftungen oder UI-Komponenten könnten kollidieren
Fehlausgerichtete Layouts
Längere Übersetzungen können Elemente verschieben
Unleserlicher Text
Einige UI-Komponenten könnten Text verkleinern oder komprimieren
Ungleichmäßiger Abstand
Kurze Übersetzungen können übermäßige Lücken erzeugen
Für beste Ergebnisse ändern Sie die Fenstergröße (für Desktop-Anwendungen), testen Sie auf verschiedenen Bildschirmgrößen (für Web/Mobil) und machen Sie Screenshots von fehlerhaften Layouts. Dies hilft Ihnen, Bereiche zu identifizieren, die möglicherweise flexible Layoutanpassungen benötigen, bevor Sie echte Übersetzungen hinzufügen.
3. Das Layout flexibel anpassen
Wenn Ihre manuelle Überprüfung wiederkehrende Layout-Probleme aufzeigt, beheben Sie Elemente nicht einzeln. Machen Sie Ihre UI stattdessen anpassungsfähiger.
Anstatt Text in feste Bereiche zu zwingen, erstellen Sie Layouts, die sich automatisch basierend auf dem Inhalt erweitern und verkleinern.
Auto-Skalierungselemente verwenden
Konzentrieren Sie sich nur auf Zeichenketten, die echte UI-Probleme verursachen könnten. Schaltflächen, Beschriftungen und Eingabefelder sollten sich an die Textlänge anpassen, anstatt feste Breiten zu haben.
Sehen Sie sich die folgenden Beispiele an. Der erste Ansatz verwendet feste Dimensionen, die die Texterweiterung einschränken und es schwierig machen, Symbole und Text dynamisch auszurichten. Der zweite Ansatz verwendet relative Einheiten und Flexbox, wodurch die Schaltfläche dynamisch wachsen kann, während Text und Symbole korrekt ausgerichtet bleiben.
Festes Layout (Problematisch)
button {
display: inline-block; /* Static display */
width: 150px; /* Fixed width */
height: 40px; /* Fixed height */
padding: 10px; /* Fixed padding */
font-size: 14px; /* Fixed font size */
…
}Flexibles Layout (besserer Ansatz)
button {
display: inline-flex; /* Use flexbox for alignment */
align-items: center; /* Center content vertically */
justify-content: center; /* Center content horizontally */
padding: 0.75em 1.5em; /* Relative padding for scalability */
font-size: 1rem; /* Relative font size */
…
}Textumbruch aktivieren
Längere Übersetzungen passen möglicherweise nicht in eine einzige Zeile. Das Zulassen von Textumbruch verhindert das Abschneiden.
Ein Einstellungsfeld mit der Bezeichnung „Battery Percentage“ (Batterieprozentsatz) auf Englisch kann auf Deutsch zu „Prozentanzeige für Batterie“ werden, was nicht in eine einzige Zeile passt.
Ohne Umbruch (Problematisch)
.nav-item {
white-space: nowrap;
}Mit Umbruch (besserer Ansatz)
.nav-item {
white-space: normal;
word-wrap: break-word;
}Feste Breiten für Container vermeiden
Anstatt starre Dimensionen festzulegen, lassen Sie Container sich an den Inhalt anpassen. Dies ermöglicht es Elementen wie Seitenleistenmenüs, in verschiedenen Sprachen zu funktionieren.
Feste Breite (Problematisch)
.sidebar {
width: 250px;
}Flexible Breite (besserer Ansatz)
.sidebar {
min-width: 250px;
max-width: 40%;
}Relative Abstände verwenden
Feste Abstände und Ränder können zu Fehlausrichtungen führen, wenn sich der Text ausdehnt. Die Verwendung von Prozentwerten stellt sicher, dass die Abstände proportional bleiben. Ein Anmeldeformular mit den Feldern „Username“ (Benutzername) und „Password“ (Passwort) sieht auf Englisch möglicherweise gut aus, wird aber auf Französisch unausgewogen („Nom d’utilisateur“).
Fester Abstand (Problematisch)
label {
margin-right: 20px;
}Relativer Abstand (besserer Ansatz)
label {
margin-right: 5%;
}4. Eine kurze Liste von UI-Elementen führen, die manuelle Anpassungen benötigen
Auch bei flexiblen Layouts benötigen einige UI-Elemente möglicherweise noch manuelle Aufmerksamkeit. Dazu gehören:
- Navigationsmenüs
- Kleine Schaltflächen, Beschriftungen oder Tooltips
- Elemente mit fester Breite
- Zeichenketten-Verkettungen
Wenn bestimmte Komponenten bei der Übersetzung immer wieder fehlerhaft sind, markieren Sie diese, um Elemente im Auge zu behalten, die layoutabhängig sind und eine zusätzliche Überprüfung erfordern.
Anschließend können Sie mit PTC vor der Bereitstellung prüfen, ob es Probleme mit der Übersetzungslänge gibt, um sicherzustellen, dass Ihre Benutzeroberfläche in allen Sprachen korrekt funktioniert.
Wie Sie PTC verwenden, um sicherzustellen, dass Übersetzungen zu Ihrem Layout passen
Wenn Sie bereit sind, können Sie sich für eine kostenlose 30-Tage-Testversion anmelden und PTC zur Übersetzung Ihres Projekts nutzen.
PTC nutzt KI, um bessere Übersetzungen als von Menschen zu erstellen. Standardmäßig werden projektweite Längenbeschränkungen basierend auf der jeweiligen Zielsprache angewendet. Zum Beispiel:
- Polnisch → Standard-Längenbegrenzung: 120 %
- Deutsch → Standard-Längenbegrenzung: 130 %
Wenn eine Übersetzung diese Begrenzung überschreitet, markiert PTC sie zur Überprüfung. Wenn dies geschieht, können Sie:
Folgen Sie der Aufforderung und erweitern Sie zusätzliche Optionen für die markierte(n) Zeichenkette(n).
Entscheiden Sie dann, wie Sie vorgehen möchten.
Erlauben Sie eine längere Übersetzung, wenn Ihre UI ausreichend Platz bietet.
Sie können die Längenbegrenzung für diese spezifische Zeichenkette anpassen, um eine längere Übersetzung zu ermöglichen.
Bitten Sie PTC, die Zeichenkette neu zu übersetzen, um sie zu kürzen.
Beachten Sie, dass PTC immer die bestmögliche Übersetzung priorisiert, sodass eine kürzere Neuübersetzung möglicherweise nicht so genau ist.
Mit diesem Ansatz können Sie:
- Sich nur auf Zeichenketten konzentrieren, die echte UI-Probleme verursachen könnten
- Vermeiden Sie unnötige Längenbeschränkungen für Ihr gesamtes Projekt
- Entscheidungen basierend auf dem tatsächlichen UI-Verhalten treffen
Halten Sie Ihre UI für Jede Sprache bereit
Eine gut geplante UI passt sich verschiedenen Sprachen an, ohne zu brechen. Das Simulieren langer Übersetzungen, das Testen Ihres Layouts und die Flexibilisierung Ihrer UI können helfen, Probleme zu vermeiden, bevor sie auftreten.
PTC geht noch einen Schritt weiter, indem es Übersetzungen erkennt, die Längenbegrenzungen überschreiten, und Ihnen Optionen für das weitere Vorgehen bietet. Sie können Längenbeschränkungen anpassen, eine Neuübersetzung anfordern oder Ihre UI an die Übersetzung anpassen – alles vor der Bereitstellung.
Lassen Sie nicht zu, dass lange Übersetzungen Ihre Benutzeroberfläche beschädigen
Starten Sie Ihre kostenlose Testversion von PTC und stellen Sie sicher, dass jede Übersetzung in Ihre Software passt.
