"Diseño UI" 9 principios básicos sobre cómo diseñar bien botones

Los botones son un elemento interactivo imprescindible en cualquier interfaz de usuario (ya sea de escritorio o móvil): incluso se puede decir que todo el diseño de la página estará incompleto sin un botón.

A continuación, hablemos de algunos de los problemas que encontraremos al formular las especificaciones de los botones. Aunque solo hay botones normales, todavía hay muchos detalles en los que vale la pena pensar y aprender.

El esquema es el siguiente

1. Tipo de botón

2. Estado del botón

3. Relación primaria y secundaria de botones

4. El tamaño del diseño del botón

5. Las esquinas redondeadas del botón

6. El texto del botón

7. El estilo del botón es consistente

8. Color de los botones

9. Ubicación de los botones

1. Tipos de botones

Hay muchos tipos de botones. Este artículo principalmente. Lo que compartimos son algunos tipos de botones que usamos a menudo en el diseño. Por ejemplo, botones normales, botones de iconos, botones de texto, botones desplegables, etc.

2. Estado del botón

El estado del botón generalmente se divide en tres tipos: estado normal, no se puede hacer clic estado y estado en el que se puede hacer clic.

No hace falta hablar del estado normal. Estado presionado: un método común que uso es cambiar la opacidad del botón a 80-85:

Para el estado en el que no se puede hacer clic, se recomiendan dos métodos de implementación, uno es reducir la transparencia a 30 y y el otro es reducir la transparencia a 30. El primero es atenuar directamente:

3. La relación primaria y secundaria de los botones

La información del contenido de la página puede formarse una relación jerárquica a través del tamaño y color del texto. En el mismo diseño de botones, podemos diferenciar el estilo para hacer que el botón principal y el botón secundario sean diferentes, para lograr una mejora visual de la estructura jerárquica y guiar mejor a los usuarios para operar de acuerdo con la trayectoria establecida.

4.? Tamaño del diseño del botón

4.1? Tamaño apropiado

Los botones deben ser convenientes para que los usuarios hagan clic si el usuario no hace clic o lo hace por error. Los clics en los elementos circundantes brindarán una experiencia hostil a los usuarios. Si se trata de un botón con texto, siempre que el tamaño del texto no sea inferior al valor límite, que es 44 * 44 en un dispositivo móvil, normalmente la zona activa de interacción del botón implementada cumplirá con los requisitos de clic.

4.2 Altura de los botones

Cada plataforma tendrá múltiples tipos de botones. Los más comunes que he visto se pueden dividir en 5 tipos: botón extra grande, botón grande, botón mediano. y botón pequeño, botones ultrapequeños, puedes personalizar tantos tipos como necesites según tu plataforma. Cada botón debe tener una altura específica, entonces, ¿cómo establecer esta altura de manera más científica? Aquí podemos recomendar una forma, es decir, la altura del botón es aproximadamente tres veces mayor que el texto, lo que se verá más cómodo:

4.2 El ancho del botón

El ancho del botón en diferentes páginas El ancho es aleatorio, por lo que necesitamos funciones específicas para establecer el ancho específico del botón.

Por ejemplo, en la página de inicio de sesión y en la página de compra de la APLICACIÓN Xianyu, el ancho de los botones no es el mismo.

5.? Esquinas redondeadas de botones

Para los bordes de los botones, generalmente utilizamos esquinas completamente redondeadas y pequeñas esquinas redondeadas, que se ven estables y majestuosas. Generalmente, el valor de empalme que uso para esquinas completamente redondeadas es igual a la mitad del valor de altura del botón, mientras que el valor de empalme para esquinas redondeadas pequeñas generalmente se controla dentro de 1/4H (un cuarto del valor de altura).

Al mismo tiempo, una cosa a tener en cuenta es que en el mismo producto, es necesario asegurarse de que las esquinas redondeadas de todos los botones sean consistentes en proporción, no uniformes. Si los botones de diferentes tamaños tuvieran las mismas esquinas redondeadas, se vería muy incómodo.

6.? Texto del botón

El texto y el borde del botón deben diseñarse para dejar una cierta cantidad de espacio. No hagas un diseño "reacio" que haga que el botón se sienta abarrotado.

Si no tienes un buen control, puedes analizar el espacio negativo de algunos botones para ganar experiencia y ver si existe cierta relación proporcional entre el tamaño del texto y el espacio negativo. Encontrar esta relación proporcional y aplicarla al diseño de botones puede hacer que su diseño parezca más maduro y estable.

Se recomienda que el texto del botón generalmente no exceda los 6 caracteres chinos.

7. Los estilos de los botones deben ser consistentes

En la misma página, los estilos de los botones deben ser consistentes y no deben generar ningún costo para los usuarios entenderlos.

8. El color del botón

La parte del color es relativamente simple y generalmente se utilizará el color del sistema estándar. Sin embargo, el rojo o el naranja estimulan en su mayoría la acción y no son adecuados para abusar cuando se utilizan colores que no son de marca. Los colores gris claro o de baja saturación tendrán atributos como no disponible, deshabilitado, no válido, etc., y deberán seleccionarse adecuadamente.

9. La ubicación de los botones

La ubicación de los botones generalmente depende de la experiencia visual del usuario y de sus hábitos operativos.

Bueno, lo anterior es el intercambio sobre las especificaciones de los botones. Espero que pueda ayudarte a brindar algunas ideas e inspiración.