Guía de estilo de IU para complementos del editor

Complementos del editor compilar interfaces de usuario (menús, barras laterales y diálogos) con la infraestructura Servicio HTML. Debido a que las interfaces se desarrollan en HTML y CSS, son muy personalizables. Sin embargo, cuando al crear tu interfaz de complemento, debes diseñarla de modo que ofrezca un buen nivel de una experiencia fluida a los desarrolladores.

Los mejores complementos extienden cada editor de forma natural mediante el uso de controles conocidos y los comportamientos del modelo. Cuando compiles un nuevo complemento:

Texto

Nombre del complemento

Debes establecer el nombre de tu complemento cuando publiques. que la modifica. El nombre aparece en muchos lugares, como la tienda de complementos y dentro de los menús.

  • Usa mayúsculas de título.
  • Evita la puntuación, en especial los paréntesis, a menos que sean parte de tu marca.
  • Sé breve (lo mejor es tener 30 caracteres o menos). Los nombres largos pueden ser se truncará automáticamente.
  • No incluyas el nombre del producto de Google para el que es el complemento (o usa el palabra Google).
  • Omite la información de la versión.
  • Asegúrate de que el nombre publicado del complemento sea el mismo que el nombre de archivo del complemento proyecto de secuencia de comandos. El nombre del proyecto aparecerá en el diálogo de autorización.
Qué no debes hacer Qué debes hacer
Nombres de complementos incorrectos Nombres adecuados para complementos

Estilo de escritura

No debería ser necesario escribir mucho. La mayoría de las acciones deben quedar claras iconografía, diseño y etiquetas cortas. Si encuentras una parte de tu complemento necesita una explicación más amplia de lo que pueden proporcionar las etiquetas cortas, práctica crear una página web separada que describa tu complemento y que incluya un enlace a él.

Cuando escribas texto de IU, ten en cuenta lo siguiente:

  • Usa mayúscula inicial (especialmente para botones, etiquetas y elementos de menú).
  • Prefiere textos breves y simples sin jerga ni acrónimos.
Qué no debes hacer Qué debes hacer

Sugerencia posterior a la instalación

La sugerencia posterior a la instalación aparece inmediatamente después de que un usuario instala tu complemento aparece en Ayuda. Tienes un par de oraciones para ayudar a los usuarios a comenzar rápidamente.

  • Comienza con una palabra de acción.
  • Describe el primer paso para usar tu complemento.
  • Si tienes una IU principal, como una barra lateral, explica cómo abrirla.
  • No promociones el complemento aquí, ya está instalado.
Qué no debes hacer Qué debes hacer
Mala sugerencia posterior a la instalación Sugerencia posterior a la instalación

A diferencia de los proyectos normales de Apps Script, los complementos no aparecen en el editor de secuencias de comandos o un administrador de guiones; los usuarios no pueden ejecutar secuencias de comandos de complementos directamente. En cambio, cada complemento ocupa un lugar en el menú de complementos. El menú (y posiblemente un diálogo o barra lateral) te permite los usuarios interactúan con el complemento.

  • El menú es una parte clave del modo en que los usuarios controlan tu complemento, por lo que debes diseñar su estructura y redacción cuidadosamente.
  • Evita usar elementos del menú que simplemente repitan el nombre de tu complemento. En cambio, comienza con un palabra de acción.
  • Si el elemento de tu menú principal comienza un flujo de trabajo y no hay un solo verbo que describe lo que hace, llámalo "Inicio". Este patrón se usa en el Guía de inicio rápido sobre el complemento de Documentos.
  • A menos que tu menú tenga más de seis elementos, trata de no usar submenús. Pueden ser complicada y difícil de seleccionar.
  • Describe la tarea, no el componente de la IU que muestra el elemento de menú.
Qué no debes hacer Qué debes hacer
Etiquetas incorrectas de elementos de menú Etiquetas buenas para los platos del menú

Mensajes de error

Cuando algo sale mal, es importante usar un lenguaje sencillo. Explica problema desde el punto de vista del usuario y sugerir cómo solucionarlo.

  • No permitas que el usuario vea ninguna excepción que arroje tu código. En cambio, usa try...catch para interceptar excepciones y, luego, mostrar un mensaje de error fácil de usar con texto intercalado con estilo Clase error del CSS de complementos o un diálogo de alerta.
  • Antes de publicarla, comprueba que tu complemento no registre información de depuración en la Consola de JavaScript; usar Stackdriver Logging en su lugar.
Qué no debes hacer Qué debes hacer
Mensaje de error incorrecto Mensaje de error correcto

Contenido de ayuda

El menú de cada complemento incluye un diálogo de ayuda automático. Si proporcionas una URL de ayuda cuando los publiques, aparecerá la página "Más información" vínculos a esa página. A menos que tu no tiene explicación, proporciona una página que explique cómo utilizarlo.

  • Cuando sea posible, muestra las instrucciones en una lista numerada o con viñetas. Guía a los usuarios hasta el resultado final, con referencias claras a los elementos de la IU con nombre.
  • Asegúrate de que tus instrucciones expliquen claramente los requisitos, como la configuración una hoja de cálculo de cierta manera.
  • No dudes en incluir también vínculos a tu contenido de ayuda desde tu interfaz de usuario principal. Si tu complemento crea un documento nuevo, también puedes mostrar instrucciones en en el cuerpo del documento.

Interfaces de usuario personalizadas

Algunos complementos simples del editor pueden controlarse completamente desde su menú, pero la mayoría mostrar una barra lateral o diálogo con contenido.

  • Las barras laterales son mejores para las herramientas persistentes que es probable que las personas usen reiteradamente mientras consultan el contenido del documento o de la hoja de cálculo.
  • Los diálogos son mejores para herramientas de un solo uso, páginas de configuración y mensajes importantes.

Texto de la IU

En cualquier diálogo o barra lateral, supongamos que las personas solo leen las etiquetas de título y botón. ¿Todavía saben qué hace la interfaz y toman una buena elección?

  • Usa etiquetas de título y botón que sean independientes.
  • Evita los bloques largos de texto descriptivo.

Diálogos

Los diálogos son excelentes para las herramientas que las personas usan una vez y, luego, siguen adelante. Por ejemplo, si tu Este complemento permite que las personas inserten un gráfico. Puedes mostrar un diálogo con opciones de lo que se debe insertar y luego cierra el diálogo cuando se inserte el gráfico. Los diálogos son también sirve para mostrar la configuración de tu complemento o para comunicar una mensaje importante.

  • No abras un diálogo (que incluya alerta o instrucción) desde otro diálogo mostrar uno a la vez.
  • Para el título del diálogo, usa una palabra o frase corta que comience con la palabra importante.
  • Las etiquetas de los botones deben relacionarse con el título del diálogo.
  • Prefiere dos botones, generalmente una acción principal y "Cancelar". Para casos especiales que requieren un tercer botón, considera la esquina inferior derecha.
  • Coloca los botones en la esquina inferior izquierda del diálogo. El botón azul principal debe estar a la izquierda, con los botones secundarios grises a la derecha.
Qué no debes hacer Qué debes hacer
Título incorrecto del diálogo Buen título del diálogo

Las barras laterales permiten a los usuarios consultar sus documentos, hojas de cálculo, presentaciones o forma mientras se toman decisiones. También permiten que las personas usen tu complemento varias veces. Cada vez que se abre una barra lateral nueva, cualquier barra lateral anterior se cierra automáticamente. Son ideales para los modos temporales que el usuario cierra cuando termina.

  • Es posible que los usuarios tengan otros complementos con sus propias barras laterales. Si dos complementos intentan las barras laterales al mismo tiempo, solo se mostrará una.
  • No muestres una barra lateral ni un diálogo cuando se abre un documento por primera vez.
  • Solo los complementos que funcionan en AuthMode.FULL puedes abrir barras laterales o diálogos. Puedes usar un elemento de menú para abrir una barra lateral, ya que se le solicita al usuario que proporcione la autorización completa.

Controles

Las buenas IU de complementos dejan un poco de espacio en sus controles. Márgenes adecuados y un relleno pueden ser muy útiles, mientras que los controles densos pueden parecer abrumadores. Al entrar dudas, toma prestado un diseño del editor. Por ejemplo, revisa los datos diálogos en Documentos de Google, como Archivo > Configuración de la página, cuando crees una propia.

La documentación del paquete de CSS de complementos se proporciona lenguaje de marcado de muestra para cada uno de los tipos de controles que se indican a continuación.

Botones

Usa botones para controlar las acciones principales de tu interfaz de usuario en lugar de las simples enlaces u otros elementos.

  • Evita mostrar más de un botón azul, rojo o verde a la vez. Gris pueden aparecer repetidamente.
  • La mayoría de las etiquetas de botones deben constar en mayúscula inicial y comenzar con un verbo. Rojo los botones, por lo general, para crear acciones, deben estar en mayúsculas.
Qué no debes hacer Qué debes hacer

Casillas de verificación y botones de selección

Usa casillas de verificación cuando las personas puedan seleccionar varias opciones o ninguna opción. Usa botones de selección (o un menú de selección) cuando se debe seleccionar solo una opción.

  • No modificar las casillas de verificación para imitar los botones de selección.
  • No realice ninguna acción de inmediato después de revisar los resultados. Las personas cometen errores. Espera hasta que los usuarios hagan clic en un botón para confirmar sus elecciones.

Seleccionar menús

Las selecciones son una excelente manera de ofrecer una breve lista de alternativas.

  • Ordenar las opciones alfabéticamente o según un esquema lógico que todos los usuarios puedan entender (como los días de la semana, a partir del domingo).
  • Si la lista crece demasiado, te recomendamos usar otro control. Por ejemplo: puedes mostrar una lista desplazable para darle más espacio al menú y hacer que sea más fácil de navegar.

Áreas de texto

Si las personas necesitan escribir más que unas pocas palabras, utiliza un área de texto.

  • Haz que las áreas de texto tengan una altura de, al menos, dos líneas para que sean más fáciles de usar y no como campos de texto.
  • Coloca las etiquetas en la parte superior.

Campos de texto

Usa campos de texto si las personas solo necesitan escribir una o dos palabras.

  • El ancho de un campo de texto debería sugerir lo que esperas que las personas escriban en él.
  • Evita usar texto de marcador de posición como etiqueta, ya que desaparece cuando se enfoca. El texto de marcador de posición es útil para dar ejemplos o detalles adicionales.
  • Coloca las etiquetas en la parte superior, pero siéntete libre de colocar campos de texto cortos uno al lado del otro.

Desarrollo de la marca

En tu complemento

Si deseas incluir un desarrollo de la marca, sé breve y sencillo. Esto ayuda los usuarios se enfocan en la IU y hacen que tu complemento parezca parte del editor.

  • Todos los aspectos de tu complemento deben cumplir con las lineamientos de desarrollo de la marca.
  • No incluyas la palabra “Google” ni uses íconos de producto de Google.
  • El texto no debe tener más que unas pocas palabras y debe tener el estilo Clase gray del CSS de complementos .
  • Los gráficos deben estar sobre un fondo blanco y no deben pesar más de 200 px × 60 px.
  • En los diálogos, la marca debe estar en la esquina inferior derecha.
  • En el caso de las barras laterales, el desarrollo de la marca puede aparecer en la parte superior o inferior.

En la tienda

Para publicar un complemento del editor, necesitas lo siguiente: de recursos de imagen. Estos recursos se usan para crear la ficha de Play Store del complemento.

Accesibilidad

Todos deberían poder disfrutar de tu complemento, sin importar si ven colores. de manera diferente, usar un lector de pantalla o tener otras necesidades. La accesibilidad es un que no se puede abordar completamente en esta guía de estilo. Un recurso útil es el sitio de Accesibilidad de Google. Pero aquí a continuación, te presentamos algunas sugerencias para comenzar:

  • Asegúrate de poder navegar por todos los controles de la IU con el teclado. Agrega tabindex=0 a controles personalizados (como los creados con <div>) para que los usuarios puedan pestaña a ellos. Considera si también se deben admitir otras teclas, como flechas para obtener una lista.
  • Es posible que algunas personas usen un lector de pantalla con tu complemento. Por lo tanto, las imágenes deben tienen un atributo alt, y los controles personalizados deben tener Atributos de ARIA para describir su uso
  • No confíes únicamente en el color para comunicar el estado. También usa íconos y texto.

Si usas controles web estándar, como los descritos anteriormente en esta guía, hacer que el complemento sea más accesible.