¿Cuáles son los tipos de buttons en material design?

Material design es un lenguaje de diseño que te guía en el proceso de diseñar una app o web y te proporciona herramientas para que logres tu objetivo, como son los diferentes tipos de buttons en material design. Una app cuenta con muchos elementos gráficos que ayudan a que esta tenga un impacto en el usuario para generar una buena UX a través de una UI práctica. Esto se lleva a cabo con el fin de lograr que la interacción sea correcta y no presente ningún inconveniente.

Es en relación a esto por lo que, en este post, te mencionaremos cuáles son los tipos de buttons en material design y para qué se usa cada uno de ellos.

Botones en material design

Los botones material design (en inglés buttons) son elementos que le permiten al usuario realizar una acción y elegir algo con un solo clic. Estos se ubican en toda la interfaz y es posible encontrarlos en:

• Diálogos
• Ventanas modales
• Formularios
• Tarjetas
• Barras de herramientas

Lo que caracteriza a los botones en material design es que son identificables, es decir, indican algo que promueve una acción; son localizables, debido a que estos deben de ser fáciles de diferenciar de otros elementos, y, además, deben ser claros, puesto que la acción y estado del botón no deben confundir al usuario en ningún momento.

Si quieres profundizar en algunos aspectos generales de material design, te invitamos a consultar nuestro post ¿Qué es el material design?, en donde te hablamos acerca de qué es, cuál es su propósito y cómo surge.

Tipos de buttons en material Design

Podemos encontrar cuatro tipos de buttons en material design (o tipos de botones ui , como son llamados). Estos botones se diferencian por su aspecto y son los siguientes:

• Botón de texto
• Botón con contorno
• Botón de contenido
• Botón de alternar

En general, podemos decir que estos hacen referencia al diseño de los botones y a su uso. Por ejemplo, cuando tenemos un botón de texto nos encontramos con una acción que, en la mayoría de los casos, no es de vital importancia en la aplicación; mientras que un botón de contorno indica una acción de más relevancia, aunque se usa para destacar acciones con un énfasis medio.

Por otra parte, el botón de contenido se utiliza para dar un énfasis alto al elemento que queremos resaltar, puesto que estos contienen un relleno de color y una sombra que permite destacar más el contenido.

Por último, en el caso del botón de alternar, podemos decir que se caracteriza por agrupar un conjunto de acciones; esto lo logra a través del buen uso del diseño y el espaciado, aunque se suele utilizar menos que los otros tipos de botones o buttons sons .

Anatomía de los botones en material design

La anatomía de los botones se caracteriza por tener un elemento obligatorio y cuatro elementos que son opcionales para el diseñador. En el caso del elemento obligatorio, es lo que permite diferenciar un tipo de botón de otro; por lo tanto, los elementos opcionales son los que el diseñador considere adecuados añadir con el propósito de facilitar la interacción del usuario con el botón.

Un aspecto importante que es característico de los botones de texto y los botones de contenido es que usan etiquetas de texto. Estas etiquetas se utilizan para describir la acción que va a ocurrir al seleccionar este botón. Aunque material design nos dice que emplearlas no es obligatorio, siempre y cuando se use un icono que reemplace dicha etiqueta.

Es oportuno resaltar que en material design se tiene el uso de mayúscula sostenida en las etiquetas de texto para los botones como una característica predeterminada. Esto se hace con el fin de que sea posible diferenciar el texto contenido en el botón del texto que se encuentra por fuera de este.

Otra característica de los botones en el lenguaje de diseño material design es que contienen un área denominada InkWell Class. Esta es el área que corresponde al tacto. En la página web api.flutter.dev es posible encontrar toda la información sobre qué es este tipo de elemento o aspecto interactivo y cómo funciona, al igual que un ejemplo de un botón que contiene esta característica con los respectivos datos para programarlo.

En caso de que quieras conocer más sobre los tipos de buttons en material design, puedes encontrar toda esta información y mucho más en la página web Material.io. Asimismo, te ofrece la posibilidad de acceder a diferentes elementos o recursos que te pueden servir como una guía de cómo diseñar una app.

Después de conocer algunos elementos gráficos que puedes incluir en tu interfaz según Google, como son los tipos de buttons en material design, ¿te gustaría conocer más sobre las opciones que tienes para desarrollar y diseñar una aplicación? Si deseas formarte en esta rama del sector IT, no puedes perderte nuestro Desarrollo de Apps Móviles Full Stack Bootcamp. En este bootcamp aprenderás pautas y fundamentos del diseño y, en pocos meses, conseguirás dominar algunos programas destinados a esto. ¡Apúntate ya y conviértete en un experto!