Botones
Los botones ejecutan una acción o cambian el estado de una aplicación. Ayudan al usuario a comprender qué acción ocurrirá cuando toquen en ellos. Los botones hacen visibles las acciones. Se ha procurado diseñar botones fácilmente visibles, limpios, con colores sólidos, sin iconos y con etiquetas claras.
Los botones en Cuico son redondeados en los laterales, usando el color azul oscuro para realizar las acciones principales de la aplicación, el gris pálido cuando están desactivados, el gris azulado cuando se refiere a una acción secundaria en la pantalla o el rosa fucsia cuando implica una acción que suponga una contratación de servicios. Los textos están centrados.
Los botones en Cuico son de 5 tipos:
Primario: es el que representa la acción principal de una pantalla, y ha sido fácilmente destacado con un fondo azul marino.
Defecto: en el caso de haber dos o más opciones entre las que elegir, este es el formato elegido para la opción menos habitual.
Desactivado: este es tipo el botón diseñado para cuando una acción no está disponible hasta que no se realicen otras acciones previamente, como rellenar un formulario, elegir una etiqueta o una casilla de verificación…
Contratación: este tipo de botón está vinculado a comportamientos dirigidos a acciones de compra dentro de la aplicación.
Botones fantasma: son botones con un fondo transparente, alrededor de los cuales existe un área de activación. están relacionados con iconos del sistema como volver, cerrar, añadir, plegar, desplegar…
Smart Layout: Se ha dejado un padding horizontal de 35dp y vertical de 15dp para los botones grandes, y un padding horizontal de 20dp y vertical de 10dp para el botón de contratar.
Los botones fantasma tienen el mismo tratamiento de padding que los iconos.
En cuanto al radio de los bordes de los botones es de 24dp para los grandes y 16dp para el botón de contratación.
Campos de entrada de datos
Los campos de entrada permiten a los usuarios agregar texto dentro de un área definida, para escribir por ejemplo la dirección de email, las opciones de búsqueda o una reseña de valoración.
.
Elementos de selección y pestañas
Para seleccionar elementos múltiples en Cuico hemos optado por usar etiquetas en formato Choice Chips, en lugar de casillas de verificación, reservadas para la aplicación del trabajador a la hora de gestionar y cumplimentar sus tareas. Cuico dispone de etiquetas de selección de tareas preconfiguradas.
Las pestañas de selección se utilizan para navegar a destinos relacionados. En cuico son discretas y no muy numerosas, para evitar excesivos tiempos de carga. Cuico dispone de un sistema de pestañas también en forma de etiquetas, como se muestra en los siguientes elementos. Para diferenciar entre la selección activa y la inactiva se juega con el contorno de la etiqueta y con el peso de la fuente
.
Iconos
Los iconos en Cuico usan metáforas universales se pueden identificar rápidamente. La mayoría de los iconos se han obtenido de la Web “The Noun Project”. Se han elegido iconos con trazos finos y redondeados para mantener el aspecto de elegancia y sobriedad que busca todo el proyecto Cuico
.
