UI Básico (1) :
¿Cómo diseñar botones?

UI Básico (1): ¿Cómo diseñar botones?

1. Conceptos: tamaño, forma y padding
2. Usando el color
3. Sombras e ilusiones 3D

 

 


Los botones son un componente fundamental en el diseño de nuestra aplicación móvil. El saber cómo diseñar botones es una de las mejores formas de consolidar le diseño de toda la interfaz. Que nuestros usuarios identifiquen claramente la funcionalidad de los botones marcará la diferencia entre el éxito y el fracaso. Además, diseñar botones supone el reto más complejo de superar a la hora de crear nuestra aplicación.

En los peores los botones tienen enlaces rotos, no son responsivos o presentan dificultad a hacer click en ellos. ¿Cómo diseñar botones qué enriquezcan nuestra interfaz de usuario (UI)? En esta entrada comento algunos consejos para crear vuestros propios botones. Vamos a botonear un poco.


1. Conceptos: tamaño, forma y padding

Como he mencionado el diseño de botones en User Interface (UI) es complejo. Lo primero que me planteo siempre es qué función tendrá el botón. Esta función será la que condicione su forma, tamaño y padding. Existen conceptos y tendencias mucho más profundas como el Skeumorfismo, el Flat Design o el Floating Action. Pero para este primer acercamiento al diseño de botones voy a centrarme en el tamaño, la forma y el padding. Estos serán los elementos determinantes para que un usuario encuentre y comprenda el diseño de nuestro botón.

Tamaño

En mi anterior post sobre el tamaño, os adelanté la importancia de saber elegir la dimensión de nuestros componentes. En este caso voy a tomar como referencia Material Designdonde indica que el tamaño de los botones debe ser de 36dp mínimo de alto, siendo 48dp el idóneo para hacerlo clickable. Además, entre los botones debe existir una separación de 8dp mínimo.

Padding

El padding es el espaciado entre los componentes. El saber con qué espacio se siente cómodo nuestro potencial usuario, nos ayudará a crear experiencias que no le sean agobiantes. En mi anterior entrada sobre la simplicidad os daba algunas recomendaciones.


Forma

La forma de los botones deberá ir en sintonía con el diseño general de la aplicación. Aún así Material Design establece una guía de cómo crear un botón estándar de 36dp de alto, un mínimo de 88dp de ancho, un rounded corners (esquinas redondeadas) de 2dp y una elevación de 2dp.


 

2. Usando el color

El estilo de los botones a lo largo del tiempo ha evolucionado y ha sufrido severos cambios. Lo que se ha mantenido todo este tiempo sin embargo es el color y el contraste. Estos atributos están vinculados y aportan al usuario la información para que este pueda identificar la posible interacción de los botones. En este punto nuestra paleta de colores determinará las opciones de nuestra aplicación será determinante a la hora de establecer los estados de nuestros botones: normal, deshabilitado, seleccionado, presionado.

 


3. Sombras e ilusiones 3D

Cuando diseño una pantalla, lo primero que me pregunto es ¿Cuáles son las principales tareas? Una vez hecha una clara jearquía, intento ofrecer al usuario un proceso rápido y directo. Unir color y contraste en nuestro diseño de botones puede ser insuficiente para resaltar algunas funcionalidades sobre el contexto. Para ello contamos con las sombras la ilusión 3D.

El añadir sombra y elevar el botón en una ilusión 3D, hace que dicho botón gane relevancia y el usuario lo interprete con un componente interactivo.

¡Fin! Hasta aquí la entrada de hoy, la cual espero os ayude con vuestros diseños futuros.
Tened buen día, y si os ha gustado, recordad que compartir es vivir  😛. Además, si dejáis comentarios, estaré encantado de responderlos.

Dejar un comentario

Escríbeme

¿Tienes una idea? Juntos podemos hacerla realidad, no dejes que tu idea se pierda.