Fundamentos

Resumen

Esta página describe los elementos de diseño comunes a todas las apps: los colores (primario, de fondo, de texto y de estado) con sus valores y variables en cada plataforma, la tipografía, los iconos, cómo nombrar una app y las pautas de redacción. Está dirigida a quienes diseñan o desarrollan apps.

Fuente: documentación de Nextcloud, «developer_manual/design/foundations», versión 3ad9158, licencia CC BY 3.0; traducida y adaptada para APS Conecta Gestión.

Hay varios elementos de diseño comunes a todas las apps de APS Conecta Gestión. Si se desarrolla para una plataforma que tiene sus propias especificaciones de diseño, por ejemplo Android, conviene tenerlas en cuenta al diseñar la app.

Para las apps web existen la biblioteca Vue y el kit de diseño de Penpot.

Color

Colores en Penpot

Color primario

#0082C9

Aunque este es el color primario asociado a Nextcloud y puede usarse para llamar la atención sobre un elemento, es mejor limitar su uso a las acciones primarias y otros elementos importantes.

Nota

Quienes administran pueden personalizar el color primario mediante la tematización, pero la experiencia predeterminada será el azul de Nextcloud. Si el color primario se tematiza con algo muy claro, como un tono de amarillo, el texto o los iconos de la cabecera se invertirán automáticamente a oscuro.

Color de fondo

Fondo para el tema claro: #FFFFFF

Fondo para el tema oscuro: #181818

Las apps de APS Conecta Gestión tienen un tema claro y uno oscuro, con colores elegidos de forma adecuada para todos los elementos.

Color del texto

Texto en el tema claro: #222222

Texto en el tema oscuro: #D8D8D8

Este es el color principal del texto en el tema claro y en el tema oscuro.

  • En la web: var(--color-main-text)

  • Android: usa el color predeterminado de Material Design «high emphasis»

  • iOS: label (en UITextView, dejar el textColor predeterminado)

  • Escritorio: pautas predeterminadas de Qt

Texto secundario en el tema claro: #767676

Texto secundario en el tema oscuro: #8C8C8C

Además, se usa un color más suave para el texto secundario, como líneas secundarias, marcas de tiempo y similares.

Estado e indicadores

Información: #006AA3

Éxito: #46BA61

Error: #E9322D

Advertencia: #ECA700

Los elementos de la interfaz asociados a un estado, como información, éxito, error o advertencia, también pueden colorearse para comunicar mejor la acción.

Aunque los elementos de la interfaz, como los botones, se colorean de forma distinta según su acción, el color del texto de ese elemento es casi siempre uno de los colores principales del texto, es decir, claro u oscuro.

  • En la web:

    • Color de información: var(--color-info)

    • Color de éxito: var(--color-success)

    • Color de advertencia: var(--color-warning)

    • Color de error: var(--color-error)

  • Android: pautas de Material Design

  • iOS: colores de las Apple HIG

    • éxito: systemGreen

    • error: systemRed

  • Escritorio: pautas predeterminadas de Qt

Tipografía

Tipografía en Penpot

Para asegurar la compatibilidad con las distintas plataformas, las apps de APS Conecta Gestión usan siempre la fuente nativa del sistema.

Por legibilidad, asegurarse de que el texto del contenido use:

  • Negrita para dar énfasis

  • Un interlineado de entre el 130 % y el 150 %

  • El espaciado entre caracteres predeterminado de la fuente

  • Nada de cursiva ni MAYÚSCULAS, ya que estos estilos de texto son menos legibles

Los tamaños de texto para las distintas plataformas son:

Iconos

Iconos en Penpot

Los iconos pueden usarse para comunicar la intención de una acción o para dar interés visual a la pantalla. Usamos iconos monocromos en todas las plataformas: Material Symbols (no Material Icons, y el estilo con contorno predeterminado de 20 px) para web, Android, Windows y Linux, y SF Symbols (grosor, escala y variante predeterminados) para iOS y macOS.

La excepción es el icono de la propia app, que puede ser un icono personalizado. Aun así, la mayoría usa también un icono de app de Material Symbols para mantener la coherencia.

Asegurarse de:

  • No abusar de los iconos

  • Cuando sea posible, usar texto junto con los iconos para que quede claro a qué se refieren

  • En casos especiales, como las advertencias, combinar el icono con un color para realzar su visibilidad

Nombres

Para que se entiendan de inmediato, elegimos nombres de apps genéricos y fáciles de traducir. Además, son cortos y caben fácilmente en la navegación superior sin cortarse.

Archivos, Contactos, Calendario y Correo no necesitan más explicación, por eso recomendamos elegir un nombre de app que se explique por sí mismo.

Otros buenos ejemplos de esto: Notas, Marcadores, Mapas, Formularios, Tareas, Música.

Redacción

La redacción y el lenguaje de la app marcan su tono y lo cercana que resulta.

  • Nextcloud debe escribirse siempre completo, y solo con N mayúscula. No «NextCloud» ni «Nc».

  • Ser cercano y accesible, no condescendiente.

  • Usar un lenguaje comprensible, no jerga técnica. Por ejemplo, «enlace» es mucho mejor que «URL», y explicar los errores es mejor que mostrar códigos de error.

  • No escribir TODO EN MAYÚSCULAS, ya que no es tan legible y da la impresión de estar gritando, lo que resulta agresivo. Usar también mayúscula de oración y no Mayúscula En Cada Palabra, con la excepción de los nombres de productos como Nextcloud Talk, Nextcloud Hub, etc.

  • Somos una comunidad, así que es mejor escribir «Nos complace anunciar» en lugar de «Me complace anunciar».

  • Si el contenido de la app está vacío, puede ser útil añadir un mensaje atractivo. «¡Añada o importe su primer marcador!» es mucho más agradable que «Aún no hay marcadores».

  • Intentar evitar usar «mis» o «sus», como en «Mis archivos» o «Sus archivos», y usar en su lugar «Todos los archivos». En las frases más largas en que no se pueda evitar, usar «su», nunca «mi».

  • Usar lenguaje neutro en cuanto al género. Esta guía internacional de escritura inclusiva en cuanto al género contiene información y ejemplos sobre la redacción neutra en cuanto al género en distintos idiomas.

  • Usar el nombre completo en lugar de solo el nombre de pila al dirigirse a la persona que usa la app.

  • En cualquier acción «Eliminar», dar contexto sobre lo que eliminará, como «Borrar conversación» o «Eliminar usuario», para que quede claro específicamente en esta acción destructiva.

  • Mantener un lenguaje breve y conciso, y tener en cuenta que debe ser fácil de traducir.

  • Asegurarse de pasar el corrector ortográfico a todo lo que se escriba.