Glass hat einen einzigartigen Stil. Daher bieten wir Standardkartenvorlagen, eine Farbpalette, Typografie und Schreibrichtlinien, an denen Sie sich möglichst orientieren können.
Verwenden Sie vor dem Entwerfen benutzerdefinierter Layouts die vom GDK bereitgestellten CardBuilder-Layouts, um den Nutzern eine konsistente Nutzererfahrung zu bieten. Wenn keines dieser Layouts Ihren Anforderungen entspricht, halten Sie sich an die folgenden Richtlinien für Ihr Design.
Messwerte und Raster
Die Glass-Benutzeroberfläche hat Standardrichtlinien für das Layout und die Ränder für verschiedene Arten von Zeitachsenkarten. Infokarten haben in der Regel die folgenden allgemeinen Regionen. Für allgemeine Karten gibt es einige Richtlinien.
Kartenregionen
Glass definiert Abmessungen für eine Gruppe von gemeinsamen Regionen, damit verschiedene Karten einheitlich gestaltet und angezeigt werden können.
| Hauptinhalt Der Haupttext der Karte befindet sich in Roboto Light mit einer Mindestgröße von 32 Pixeln und wird durch Padding begrenzt. Texte mit einer Größe von 64 Pixeln verwenden Roboto Thin. Randloses Bild Bilder funktionieren am besten randlos und benötigen keinen Abstand von 40 Pixeln für den Text. Abstand Die Zeitachsenkarten haben auf allen Seiten einen Abstand von 40 Pixeln für den Textinhalt. So können die meisten Nutzer deine Inhalte gut erkennen. |
Fußzeile Die Fußzeile enthält ergänzende Informationen zur Karte, z. B. die Quelle der Karte oder einen Zeitstempel. Der Text der Fußzeile ist 24 Pixel, Roboto Regular und weiß (#ffffff) in Farbe. Linkes Bild oder linke Spalte Bei einem Bild oder einer Spalte auf der linken Seite müssen die Abstände und der Text geändert werden. |
Layoutvorlagen
Der GDK bietet verschiedene CardBuilder-Layouts, die Sie verwenden können.
Farbe
Glass zeigt den meisten Text in Weiß an und verwendet die folgenden Standardfarben, um die Dringlichkeit oder Wichtigkeit hervorzuheben. Sie können diese Farben auch für Ihre Zeitachsenkarten verwenden:
| CSS-Klasse | RGB-Wert |
|---|---|
white |
#ffffff |
gray |
#808080 |
blue |
#34a7ff |
red |
#cc3333 |
green |
#99cc33 |
yellow |
#ddbb11 |
Im folgenden Beispiel werden wichtige Informationen zu Bahnlinien und Status mithilfe von Farben gekennzeichnet.
Typografie
Glass zeigt den gesamten Systemtext in Roboto Light, Roboto Regular oder Roboto Thin an, abhängig von der Schriftgröße. Wenn Sie Live-Karten oder immersive Inhalte erstellen, können Sie andere Brandingtypen verwenden, um Ihr eigenes Branding zu vermitteln.
Roboto Light
Glass zeigt den meisten Text in dieser Schriftart an.
ABCDEFGHIJKLMN
OPQRSTUVWXYZa
bcdefghijklmnopqr
stuvwxyz1234567
890!?/+-=()[]#@$
%^&*<>:;“
Roboto Regular
Glass zeigt Fußnotentext in dieser Schriftart an.
ABCDEFGHIJKLMNOPQRST
UVWXYZabcdefghijklmnopq
rstuvwxyz1234567890!?/+-=
()[]#@$%^&*<>:;“
Roboto Thin
Glass zeigt größeren Text (mindestens 64 Pixel) in dieser Schriftart an.
ABCDEFGHIJKLMNOPQ RSTUVWXYZabcdefghij klmnopqrstuvwxyz1234 567890!?/+-=()[]#@$%^ &*<>:;“
Größenanpassung von dynamischem Text
Wenn Sie die Layouts CardBuilder.TEXT und CardBuilder.COLUMNS verwenden, verwendet Glass die größtmögliche Schriftgröße.
Die folgenden Karten zeigen Beispiele der Typografiemerkmale von Text basierend auf der Textmenge.
Schreiben
Beachten Sie die folgenden Richtlinien, wenn Sie Text für Glassware schreiben.
Fassen Sie sich kurz. Prägnant, einfach und präzise Suche nach Alternativen zu langem Text, z. B. Inhalte vorlesen, Bilder oder Videos zeigen oder Elemente entfernen.
Weniger ist oft mehr Stell dir vor, dass du mit jemandem sprichst, der intelligent und kompetent ist, aber keinen Fachjargon kennt und möglicherweise nicht gut Englisch spricht. Verwenden Sie kurze Wörter, aktive Verben und Gattungsnamen.
Seien Sie freundlich. Use contractions. Sprich direkt mit dem Leser über die zweite Person („du“). Wenn Ihr Text nicht so aussieht, wie Sie ihn in einer lockeren Unterhaltung sagen würden, ist es wahrscheinlich nicht der richtige Schreibstil.
Das Wichtigste zuerst Die ersten beiden Wörter (etwa 11 Zeichen, einschließlich Leerzeichen) sollten mindestens einen Vorgeschmack auf die wichtigsten Informationen im String enthalten. Wenn nicht, beginnen Sie von vorn. Beschreiben Sie nur, was erforderlich ist, und nicht mehr. Versuchen Sie nicht, kleine Unterschiede zu erklären. Sie gehen bei den meisten Nutzern verloren.
Vermeiden Sie Wiederholungen. Wenn ein wichtiger Begriff auf einem Bildschirm oder Textblock wiederholt wird, suche nach einer Möglichkeit, ihn nur einmal zu verwenden.