Glass tiene un estilo único, por lo que proporcionamos plantillas de tarjetas estándar, paletas de colores, tipografía y lineamientos de escritura para que sigas siempre que sea posible.
Antes de crear diseños personalizados, usa los diseños CardBuilder disponibles que proporciona GDK para brindarles a los usuarios una experiencia coherente. Si ninguno de estos diseños cumple con tus requisitos, sigue los lineamientos que se indican a continuación.
Métricas y cuadrículas
La interfaz de usuario de Glass tiene lineamientos de diseño y márgenes estándar para los diferentes tipos de tarjetas de cronograma. Por lo general, las tarjetas tienen las siguientes regiones generales, y establecimos algunos lineamientos que debes seguir para un conjunto general de tarjetas.
Regiones de tarjeta
Glass define las dimensiones para un conjunto de regiones comunes a fin de facilitar el diseño y la visualización de diferentes tarjetas de manera coherente.
| Contenido principal El contenido de texto principal de la tarjeta está en Roboto Light con un tamaño mínimo de 32 píxeles y está delimitado por padding. El texto de 64 píxeles y más grande usa Roboto Thin. Imagen sin márgenes Las imágenes funcionan mejor cuando tienen sangrado completo y no requieren los 40 px de relleno que requiere el texto. Padding Las tarjetas de cronograma tienen 40 píxeles de padding a ambos lados del contenido de texto. Esto permite que la mayoría de los usuarios vean tu contenido con claridad. |
Pie de página En el pie de página, se muestra información complementaria sobre la tarjeta, como la fuente de la tarjeta o una marca de tiempo. El texto del pie de página tiene un tamaño de 24 píxeles, Roboto Regular y blanco (#ffffff). Imagen o columna de la izquierda Las imágenes o las columnas de la izquierda requieren modificaciones en el padding y el contenido del texto. |
Plantillas de diseño
El GDK proporciona varios diseños de CardBuilder que puedes usar.
Color
Glass muestra la mayor parte del texto en blanco y usa los siguientes colores estándar para indicar la urgencia o importancia. Puedes usar estos colores en tus tarjetas de cronograma:
| Clase de CSS | Valor RGB |
|---|---|
white |
#ffffff |
gray |
#808080 |
blue |
#34a7ff |
red |
#cc3333 |
green |
#99cc33 |
yellow |
#ddbb11 |
En el siguiente ejemplo, se usan colores para indicar información importante sobre las líneas de entrenamiento y el estado.
Tipografía
Glass muestra todo el texto del sistema en Roboto Light, Roboto Regular o Roboto Thin según el tamaño de la fuente. Si vas a crear tarjetas o inmersiones, no dudes en usar diferentes tipografías para transmitir tu marca.
Roboto Light
Glass muestra la mayor parte del texto de esta fuente.
ABCDEFGHIJKLMN
OPQRSTUVWXYZa
bcdefghijklmnopqr
stuvwxyz1234567
890!?/+-=()[]#@$
%^&*<>:;"
Roboto Regular
Glass muestra texto con una nota al pie en esta fuente.
ABCDEFGHIJKLMNOPQRST
UVWXYZabcdefghijklmnopq
rstuvwxyz1234567890??/+-=
()[]#@$%^&*<>:;”.
Roboto Thin
En esta fuente, Glass muestra texto más grande (64 px o más).
ABCDEFGHIJKLMNOPQ RSTUVWXYZabcdefghij klmnopqrstuvwxyz1234 567890??/+-=()[]#@$%^ &*<>:;"
Cambio de tamaño del texto dinámico
Cuando usas los diseños CardBuilder.TEXT y CardBuilder.COLUMNS, Glass usa el tamaño de fuente más grande posible según la cantidad de contenido.
En las siguientes tarjetas, se muestran ejemplos de las características de la tipografía del texto según la cantidad de texto.
Escritura
Como el espacio para el texto es limitado, sigue estos lineamientos cuando escribas texto para Glassware.
Sea breve. Sea conciso, simple y preciso. Busca alternativas a texto largo, como leer el contenido en voz alta, mostrar imágenes o videos, o quitar características.
No lo complique. Imagine que le habla a alguien que es inteligente y competente, pero que no comprende la jerga técnica y es posible que no hable muy bien el inglés. Usa palabras cortas, verbos activos y sustantivos comunes.
Sé amable. Relájate un poco. Háblale directamente al lector usando la segunda persona ("tú"). Si el texto no se lee tal como lo harías en una conversación informal, es probable que no sea así.
Incluya lo más importante en primer lugar. Las primeras dos palabras (alrededor de 11 caracteres, incluidos los espacios) deben incluir, al menos, una muestra de la información más importante en la string. Si no es así, empiece de nuevo. Describe solo lo necesario y nada más. No intentes explicar diferencias sutiles. Se perderán en la mayoría de los usuarios.
Evite la repetición. Si se repite un término significativo en una pantalla o un bloque de texto, busca una forma de usarlo una sola vez.