Productos y servicios digitales móviles

El Ayuntamiento de Zaragoza, con el objetivo de crear una identidad visual robusta y coherente, se encuentra trabajando en el diseño y desarrollo de un sistema de diseño para los productos y servicios digitales del mismo ayuntamiento.

Este documento, concebido como el punto de partida fundamental para esta iniciativa, establece los principios básicos que conformarán el futuro sistema de diseño.

Actualmente, este documento ofrece una serie de recursos para diseñadores, entre los que se incluyen directrices de estilo y componentes. Para cualquier pauta o componente de diseño que no se encuentre establecido en esta guía, por favor, le invitamos a ponerse en contacto con la Oficina de Transparencia y Gobierno Abierto del Ayuntamiento de Zaragoza.

Esta sección presenta una visión de los diversos tipos de menús que puede abarcar una aplicación, desde el menú grid o el tab superior hasta el menú principal o el menú lateral.

Para una comprensión exhaustiva, se incluye información detallada sobre cada elemento que compone el menú, abarcando fondos, botones, iconos, radios y estados.

Menú lateral

Los menús laterales presentan contenido secundario que se encuentra anclado al lateral de la pantalla, proporcionando una forma eficaz de retornar rápidamente al contenido principal. Estas barras laterales pueden incorporar elementos como un icono de retroceso para la navegación, botones de acción, opción de cierre con una "x", así como una amplia gama de diseños y contenidos, que van desde listas de acciones hasta información adicional presentada en un formato tabular.

Usos más comunes:

• Mostrar una lista de acciones que afectan al contenido principal de la pantalla, como filtros y opciones de clasificación.

• Mostrar contenidos y funciones complementarios.

Menú inferior

En la parte inferior de muchas de las pantallas hay un menú que consta de tres iconos interactivos con fondo blanco. Cuando se selecciona alguno de ellos, el icono se vuelve rojo (#D92A22) con una línea superior del mismo color. Cuando estén deseleccionados serán de color gris oscuro (#3C3C3B). Este menú no se encuentra en todas las pantallas, solo en las principales.

Cada uno de estos botones lleva a una pantalla distinta y tienen una altura de 1.66em:

Menú superior

(solo para apps aplicaciones secundarias)

La aplicación armonizada del Ayuntamiento de Zaragoza permite acceder al resto de aplicaciones directamente desde ella.

Cuando la app se abre dentro de otra, se incorporará un menú superior específico para que se pueda retornar fácilmente a la aplicación principal, así como para identificar que una aplicación del Ayuntamiento de Zaragoza.

En estos casos, el menú inferior de la aplicación principal desaparecerá para dar paso al menú propio de la aplicación secundaria.

Tabs. Sección superior

Cuando hay un menú superior con secciones, por defecto sale la primera marcada. Siempre se utiliza sobre fondo blanco.

Para saber que estamos en esa sección, se debe utilizar tipografía de color rojo (#D92A22) junto a una línea en la parte inferior de la largura del texto.

Cuando no esté seleccionada la sección, simplemente aparecerá el texto en el color gris oscuro (#3C3C3B).

Dentro de la aplicación, la información se presenta de diversas formas, adaptándose a las distintas pantallas y contextos. En este apartado, se exhiben los variados tipos de bloques de información disponibles para asegurar una presentación clara y efectiva de los datos.

La clasificación se ha realizado considerando el estilo característico de cada tipo, agrupándolos en secciones específicas. Entre estos estilos se incluyen fichas, modales, desplegables y avisos. Cada sección ofrece una descripción detallada, resaltando las características visuales y funcionales de cada tipo de bloque de información.

Ficha

Esta plantilla se utilizará para las páginas de fichas de los productos de un listado, como: producto, ideas, lugares, etc.

Una ficha se puede componer de los siguientes elementos:

• Imagen (optativa)
• Cabecera (optativa)
• Fecha (optativa)
• Título (obligatorio)
• Icono de guardado (optativo)
• Texto (obligatorio; divisible en párrafos con subtítulos)
• Mapa (optativo)

Desplegables

Se encuentran en los mapas diversos desplegables. Estos aparecen al seleccionar alguno de los pines del mapa, pero según la pantalla no aparece la información completa. Esta información aparece en la parte inferior de la pantalla y se podrá desplegar hacia arriba para verla. Si se realiza la acción contraria, desaparecería de la pantalla. La línea superior es de color gris (#909091) y tiene una longitud de 2.2 em.

Equipamientos: se muestra toda la información directamente. Se puede ver un icono junto a la categoría, un título, una dirección, un teléfono, un email y un botón de ver más y otro de guardar. Esta es la máxima información que podría aparecer en este desplegable.

Si ese equipamiento no tiene tanta información, este bloque sería más pequeño, pero tendría que seguir respetando los márgenes correspondientes.

Otros tipos de desplegables que podemos encontrar son:

Desplegable con botones

Opciones de filtrado

Grid

Un menú grid emplea una estructura organizativa basada en cuadrícula para presentar opciones de forma visualmente atractiva, posibilitando una disposición ordenada y estructurada.

Existen dos tipos de menú grid que se pueden utilizar según el elemento que se representa: menú grid de servicios y de aplicaciones.

Grid servicios

Cada opción del menú puede ir acompañada de un icono representativo y una etiqueta descriptiva, contribuyendo así a mejorar la comprensión y accesibilidad.

En cuanto al formato visual de la cuadrícula se adapta de manera fluida a distintos tamaños de pantalla, manteniendo una apariencia coherente y funcional. El diseño está compuesto de un fondo blanco con dimensiones de

8.2em x 9.3em y un radio de 0.26em. En su interior, se encuentra un icono blanco sobre un fondo rojo (#D92A22).

Grid aplicaciones

Las opciones de este menú están representadas por el icono de identificación de la aplicación en la tienda de aplicaciones y una etiqueta textual descriptiva, contribuyendo así a mejorar la comprensión y accesibilidad.

Los elementos de la cuadrícula pueden ser interactivos y responden a clics o toques, lo que permite activar acciones o mostrar submenús según la elección del usuario.

Hay dos tipos de visualización:

• Aplicaciones instaladas: aquellas apps que estén instaladas en el dispositivo aparecerán con el icono en su color real y servirá de enlace para abrir la aplicación.

• Aplicaciones no instaladas: aquellas apps que no estén instaladas en el dispositivo aparecerán en tono gris, y. al hacer clic sobre ellas conducirá a la tienda de aplicaciones para poder realizar la descarga directa.

En cuanto al formato visual de la cuadrícula se adapta de manera fluida a distintos tamaños de pantalla, manteniendo una apariencia coherente y funcional.

Ventanas emergentes. Modales

Todos los modales siguen la misma plantilla base, ancho de

28.67 em y altura adaptada al contenido de su interior. Los modales tendrán un redondeo de 0,73 em y un margen de 1,47 em. Se utilizan sobre un fondo negro (#585857) con transparencia del 70%.

En la parte superior se encuentra simplemente una “x” a la derecha. A partir de ahí aparece la información del modal. Están formados por un título, un texto y uno o dos botones dependiendo de las características del modal. Además de texto, si es necesario como en el caso de los servicios, se podrá añadir un bloque debajo del texto.

En el caso de las leyendas, habrá un título centrado horizontalmente y a continuación, los iconos correspondientes con el texto al que hacen referencia. Al contrario que el otro tipo de modal, el texto está justificado a la izquierda.

Calendario

Dentro de los filtros se pueden hacer búsquedas por fecha. Tienen un ancho total de 28.67 em y una altura de 31.87 em. Este modal debe ir alineado verticalmente a la mitad de la pantalla.

Los cuadros de las fechas tendrán un marco gris (#939494) cuando no estén completos o cuando ya esté la fecha seleccionada. Cuando se esté durante el proceso de selección de la fecha correspondiente, el marco será de color rojo (#D92A22) para saber cuál es la que se está editando.

El proceso de selección de fechas una vez abierto el modal es: seleccionar en el calendario el día correspondiente al cuadro “desde”, y a continuación, seleccionar la fecha correspondiente al cuadro “hasta”. Si se quiere cambiar la fecha de alguno de los cuadros, simplemente habrá que seleccionarlo.

Avisos de acción

Se avisará siempre al usuario de aquellas acciones que impliquen un cambio, como: guardar, borrar, etc.

Este modal es de color gris (#706F6F) con la tipografía en blanco. El ancho del mismo se adapta al contenido y el alto es de 3,73 em. Siempre aparecerá en la parte de abajo de la pantalla encima del menú inferior.

Avisos

Este tipo de mensajes no tienen fondo, sino que aparecen directamente sobre el fondo gris de la pantalla. Utilizan la tipografía Body 2 y se encuentran centrados horizontalmente en la pantalla.

En el menú principal, se puede dar el caso de que el usuario no haya añadido los servicios que quiera a esta misma pantalla. Cuando suceda eso, aparecerá un mensaje de aviso.

Cuando no hay información acerca de una búsqueda aparece una ilustración junto a un texto explicativo que indica que no hay resultados.

Etiquetas en imágenes

Aparece un mensaje en la propia imagen que está formado por un rectángulo negro de altura 2.13 em y de ancho el de la imagen, junto a un texto en color blanco.

Tarjeta

Toda la tarjeta que tenga un aviso de acción tiene aspecto conopacidad y aparecen los botones de la acción requerida.

Avisos de error en formularios

Hay dos tipos de errores, el primero surge cuando hay que rellenar un cuadro obligatoriamente y el usuario no lo hace. El cuadro de texto pasará a tener borde naranja (#EF7813) y en la parte inferior saldrá un aviso con icono en naranja también.

Por otro lado, el otro error que se puede generar es el de datos introducidos incorrectos, al igual que en el caso anterior, el cuadro se vuelve naranja (#EF7813) y aparece un aviso en la parte inferior.

Esta sección presenta una variedad de filtros disponibles para integrar en las aplicaciones del Ayuntamiento de Zaragoza, desde opciones básicas hasta filtros más avanzados. Cada tipo de filtro se examina detalladamente, abordando elementos clave como fondos, botones, iconos, criterios de selección y estados correspondientes.

Filtros rápidos. Chips

En la parte superior de algunas pantallas se encuentra un buscador, unas etiquetas, el acceso a los filtros y a un calendario.

Los filtros se componen de una serie de etiquetas que se encuentran en la parte superior de las pantallas. Aquellos que estén seleccionados son rojos (#D92A22) con la tipografía en blanco.

Los que no están seleccionados, tienen dos formatos dependiendo del fondo. Cuando el fondo de la pantalla es blanco, se utiliza un botón gris (#F3F4F4), y cuando el fondo es un mapa, el botón es blanco.

Estos filtros son de selección múltiple, por lo que se podrán tener varios seleccionados al mismo tiempo. Cuando se seleccione la opción de “todos/as”, se deseleccionarán.

Nota: en todos los filtros rápidos hay una opción que te deja seleccionar todas las disponibles. Dependiendo a qué haga referencia, se utilizará el texto en femenino o en masculino. Ejemplo: incidencias - todas, equipamientos – todos.

Filtros avanzados

Se puede encnotrar un icono a la derecha del buscador que accede directamente a un calendario para filtrar con fechas.

Estos botones tendrán un tamaño de 2,33em y 2,33em y un área de respeto de 1,13em.

Ocurre lo mismo con el botón que accede directamente a la pantalla de los filtros. Este consta de un icono rojo (#D92A22) con fondo gris (#F3F4F4) cuando la pantalla es blanca, y fondo blanco si está sobre un mapa. También se puede encontrar este botón a la derecha del buscador cuando no hay etiquetas, adaptándose al tamaño del buscador por lo que el tamaño será de 3,33em x 3,33em.

Filtros mapa

Caso especial: Quejas y sugerencias

En el caso de quejas y sugerencias, los filtros rápidos funcionan de forma distinta. En esta pantalla, cada uno de los botones hace referencia a un apartado de los filtros y seleccionándolos aparece un desplegable en la parte inferior de la pantalla donde se pueden seleccionar las opciones correspondientes: en el caso de fecha, hay que seleccionar el año; en el caso de categorías, se muestran todas las categorías para seleccionar; y, por último, se puede seleccionar estado leído o no leído.

Además de poder acceder por estos filtros rápidos, hay un botón desde donde se accede directamente a una pantalla general de todos los filtros juntos.

En la aplicación existen diversas zonas con buscadores y filtros para ordenar o mostrar información. En este apartado se desglosan todas las opciones de los mismos, así como su funcionamiento. Además, también se explican los diversos iconos y formas de los mismos.

Como ya se ha comentado en repetidas ocasiones el tamaño de los elementos no es inamovible, pueden realizarse algunas modificaciones en el mismo, siempre que se mantengan las proporciones y los colores intactos.

Tipos de buscadores

A lo largo de la aplicación, se identifican cinco tipos distintos de buscadores, de los cuales tres se ubican junto a un mapa, mientras que los dos restantes se sitúan sobre fondo blanco. Se observan también variaciones en los tamaños, si bien la mayoría se caracteriza por presentar un ícono en forma de lupa de color gris (#3C3C3B) acompañado del término "buscar". En función de la pantalla, estos buscadores se encuentran acompañados por otras funcionalidades que poseen un radio de 0.26em.

Cuando el buscador adopta el color gris (#F3F4F4), se le añade una discreta sombra perimetral, destacando así este cuadro destinado a la introducción de búsquedas.

Todos los buscadores comparten una altura uniforme de 3.33 em.

Buscador estándar

Buscadores en mapas

Al seleccionar el buscador, aparecerán por defecto las últimas búsquedas realizadas y una opción de geolocalización. Estas últimas búsquedas se muestran junto a un icono de un reloj en la parte izquierda. A la derecha se encuentra una “x”, que en el caso del buscador eliminaría el texto escrito y en las búsquedas del desplegable serviría para eliminar esa búsqueda.

Las búsquedas no tendrán en cuenta las tildes escritas o no escritas para mostrar los resultados.

Cuando se introduce el texto, aparecen las búsquedas recomendadas. Estas se muestran junto a un icono de una lupa a la izquierda. Se marcan en estilo Bold aquellas letras que coincidan con la búsqueda. Por último, aparecerá un símbolo de ubicación cuando la búsqueda coincida con el nombre de una calle.

Cuando se haga una búsqueda de dirección, aparecerán las distintas opciones de calles. Si el usuario selecciona la dirección correcta, se mostrará la calle en el mapa en primer plano.

Por otro lado, al hacer una búsqueda por palabras, aparecerán en el buscador una serie de opciones que sean iguales o relacionadas con la palabra escrita. Tras elegir la búsqueda deseada, aparecerán todos los pines relacionados con esa búsqueda. Si se ha marcado algo más concreto, aparecerá simplemente el pin que haga referencia a esa búsqueda.

Pin de geolocalización

En el mapa se mostrará un pin de geolocalización actualizado a tiempo real. Este pin está formado por un círculo rojo (#D92A22) de diámetro 2.33 em con borde blanco, y un segundo círculo más transparente de diámetro 10.33 em.

Buscadores en formularios

En este caso, el buscador tiene una función distinta. Aparece dentro de un formulario de quejas y sugerencias para marcar la ubicación de la queja correspondiente.

Ancho del buscador: 22.60 em.

Cuando se pulsa el buscador, aparece una opción de seleccionar la ubicación del usuario, por si esa queja hace referencia a esa misma ubicación.

Si la dirección es otra, se podrá escribir en el buscador y funciona de la misma manera que los buscadores anteriores.

En la aplicación existen diversas zonas de formularios y otras funciones que necesitan campos de introducción de texto. Dependiendo del caso, estos tendrán unas proporciones y funcionalidades diversas. También se ponen ejemplos de los diversos avisos de error que se necesitan cuando los usuarios no introducen correctamente los datos.

Se recuerda que los tamaños son orientativos y podrían modificarse siempre y cuando se mantengan las proporciones.

Formularios de datos

Formularios para acciones tipo: iniciar sesión, crear una cuenta, editar perfil, etc.

Formularios con progreso

Formularios para acciones tipo: hacer un reporte, poner una queja, realizar un trámite, etc.

Estos formularios incluyen una barra de progreso que indica la etapa en la que te encuentras en cada momento.

Los listados desempeñan un papel crucial en la presentación y organización de información dentro del entorno digital. Estos elementos proporcionan una estructura visual que facilita la visualización y la interacción con conjuntos de datos variados.

Se proponen diversos estilos de listas, como listas simples, listas con iconos, listas con descripción y listas con imágenes, para adaptarse a diferentes contextos y necesidades de diseño.

Listados simples

Listados con iconos

Listados con descripción

Este tipo de bloques utilizan el propio fondo blanco de la aplicación. Se encuentran en el apartado de mis guardados y en todos ellos podemos observar esta opción. Todos ellos tienen título y el resto de información varía de uno a otro. Para separarlos entre sí se utiliza una línea de color (#CDCCCC) y respetan unos márgenes de 1.47 em.

Listados con imagen

Carrusel de imágenes

Elemento interactivo que permite la presentación secuencial de contenido, generalmente imágenes o tarjetas, en un formato de desplazamiento horizontal o vertical.

Este componente debe utilizarse para facilitar la visualización dinámica de información, promociones o productos, permitiendo a los usuarios explorar fácilmente diferentes elementos en una interfaz compacta.

Se pueden personalizar con distinta información siguiendo el ejemplo de las imágenes.