Solución de diseño de botones en línea: cómo diseñar botones de aplicaciones de diseño

¿Cuáles son los métodos de diseño de botones? Las diferentes categorías de botones son las siguientes: * Botones de acción * Estilos de botones comunes * Colores y formas de botones * Estados y comentarios de botones * Botones de etiquetas * Botones de pantalla táctil * Posiciones de botones * Botones de sistema * Botones de acción resumidos Analizaremos la jerarquía de botones y lo que comunican lenguaje. Si bien algunos botones son familiares y fáciles de entender, su funcionamiento no depende de su apariencia sino del comportamiento del usuario. 1_1. Llamada de comportamiento (CTA/C2A) En el diseño, los botones de llamada de comportamiento suelen solicitar a los usuarios que se registren/compren ahora, etc. En el diseño de productos, si se anima encarecidamente a los usuarios a hacer algo, se deben utilizar botones de CTA. Botones de llamada a la acción Para los botones de CTA, me gusta usar botones redondos para que sean más notorios. 1_2. Botones de acción principales Aunque el botón CTA y el botón principal parecen iguales, me gusta mantenerlos separados. El botón de inicio debe ser un indicador visual potente que ayude a los usuarios a completar su viaje. El botón principal debe usarse cuando el usuario quiera "Siguiente", "Listo", "Iniciar", etc. Los botones de operación principales son las operaciones principales. Me gusta usar botones físicos. 1_3. El botón de acción secundario es el botón secundario que va desde volver al siguiente botón primario, o desde el botón secundario editado al botón primario guardado. Los botones secundarios son alternativas a las acciones principales que ofrecemos a los usuarios. De los dos diseños de botones auxiliares al lado del botón principal, prefiero usar botones lineales o enlaces de texto como botones auxiliares. 1_4. Los botones de tercer nivel se suelen utilizar para otras operaciones, que pueden no ser lo que el usuario quiera hacer por el momento. Como "agregar amigo", "escanear", "editar" o "eliminar", siempre que no sea la operación principal. Diferentes formas de botones terciarios En general, la gente usa estilos de botones más pequeños o menos prominentes. Estilos de botones comunes A continuación, presentaremos estilos de botones comunes, diferentes estilos de botones y sus técnicas de uso. 2_1. Botón sólido Un botón sólido es un botón con relleno sólido. Botón sólido 2_2. Botones lineales y fantasma Los botones lineales son exactamente lo opuesto a los botones sólidos. Un botón C vacío es sólo un contorno. Aunque a menudo se usan indistintamente, prefiero pensar en los botones lineales como claros (el contorno del botón y el color del texto son más oscuros sobre un fondo blanco) y los botones fantasma como oscuros (el contorno y el color del texto del botón están en un negro más claro sobre el fondo). . Botón lineal (izquierda) y botón fantasma (derecha) 2_3. Botón circular Los bordes del botón circular se establecen en el radio de esquina máximo. Botón redondo 2_4. FAB (botón flotante) El botón flotante es un patrón de diseño inteligente que es popular en Google Material Design. Aunque parecen un botón de icono, en realidad son los botones de acción principales en la pantalla.

Cómo diseñar botones de aplicaciones de diseño La primera situación: diseño de botones en aplicaciones sociales.

Lo más llamativo de la interfaz de la aplicación anterior son los hermosos botones. Estos botones de aplicaciones atraen directamente a los usuarios a hacer clic e interactuar. Además, el diseño del botón y el diseño de todo el elemento están centrados, lo que pertenece al diseño del eje en el diseño de la interfaz de usuario. La atmósfera es estable.

El segundo caso: diseño de botones en una aplicación de comercio electrónico

Esta es una muy buena interfaz de diseño de aplicaciones para ropa infantil extranjera. Las dos interfaces que 25 Academy captura de pantalla son el diseño de interfaz de un carrito de compras. Espero que puedas echarle un buen vistazo.

El diseño de botones de esta APP es muy rico. Cada elemento se compone básicamente de botones y está dispuesto.

Existen diez pautas básicas sobre cómo diseñar botones comúnmente utilizados en el diseño de UI. Siempre que diseño un botón, tengo en cuenta estas cosas. No publicaré mi fórmula en capas, pero no siempre piensen que esto es una predicación vacía. La comprensión del diseño por parte de un buen diseñador va más allá de PS y suite, porque tiene su propio pensamiento de diseño.

1. Ser coherente con la marca.

Los botones deben ser acordes con la marca, y el color y estilo visual no deben diferir demasiado del logo. Puede aprender de la forma, el material, el estilo, etc. del logotipo. Si el logo es redondo, los botones también pueden probar con círculos y otras formas que evoquen un llamado a la acción.

La forma, el color, el material, el patrón y la fuente pueden afectar la experiencia de navegación del usuario.

Si predominan los colores planos de la interfaz, intenta no utilizar botones de estilo de imitación. Por supuesto, si has superado las habilidades básicas, puedes intentar mezclar y combinar estilos, y puedes probar colores, formas, efectos y varios métodos decorativos.

2. Consistente con el contexto.

En realidad es casi igual que el anterior. Deja de usar "Paquete PSD". Aunque se ve genial, es el diseño de otra persona y puede que "no coincida" un poco en su interfaz. Recuerde, "el contenido es el rey" en la interfaz, no el "diseño para botones bonitos".

3. Asegúrese de que el botón se utilice para realizar una comparación adecuada.

Muchos diseños de interfaz están profundamente influenciados por Apple. Muchos kits de interfaz de usuario se pueden ver de un vistazo y los botones pueden pasar desapercibidos. La solución es utilizar color, tamaño, espacio y fuentes para mejorar la expresión visual del botón y guiar la interacción del usuario.

Es necesario enfatizar los botones importantes.

4. Considere botones con ángulos redondeados o rectos.

Si muchos elementos de la interfaz son redondos, los botones también se pueden formar en ángulo recto, de modo que el contraste sea fuerte y pueda desencadenar llamadas de comportamiento.

5. Los elementos secundarios de la interfaz de usuario pueden verse ligeramente debilitados.

Algunos elementos o botones secundarios de la interfaz de usuario se pueden debilitar reduciendo la decoración para resaltar los botones principales.

Menos efectos de sombras, inclinaciones y encuentros menos obvios, para que los elementos principales destaquen.

Debilitar otros elementos de la interfaz de usuario = resaltar el elemento principal (Accesos)

6. Bordes de los botones

La mayoría de los botones que vemos tienen bordes. Si su botón es más oscuro que el fondo, entonces un borde oscuro se verá bonito y ningún borde se verá bien. Las claves sin bordes serán particularmente complicadas si son más claras que el fondo. Los botones sólo pueden parecer "vivos" si tienen un borde oscuro.

7. Cuidado con las sombras borrosas

Yo personalmente tengo una "ley de sombra", que es: cuando el elemento es más claro que el color de fondo, el efecto de sombra es mejor, cuando el elemento es más claro que el color de fondo, el efecto de sombra es mejor. Cuando el fondo es oscuro, las sombras deben usarse con moderación.

Un poco como una frontera. Esta regla es buena y lo mismo ocurre con otros elementos de la interfaz de usuario.

Las sombras borrosas funcionan bien en fondos claros y las sombras funcionan bien en fondos oscuros.

8. Utiliza más símbolos/iconos

Por ejemplo, las flechas son definitivamente más intuitivas que las descripciones de texto.

Una flecha que apunta hacia la derecha puede significar que abandonas la página. Una flecha hacia abajo puede significar abrir el contenido a continuación o abrir un menú a continuación.

9. Distinguir entre el primer, segundo y tercer nivel de importancia

Si tu interfaz tiene muchos puntos funcionales, entonces necesitas diseñar un conjunto de primer, segundo y tercer nivel. botón.

El botón principal tiene la expresión visual más fuerte, el botón secundario es ligeramente más débil y el tercer botón importante es incluso peor que el botón secundario. Puedes modificar estos estilos: color, sombra, tamaño, espacios en blanco, métodos decorativos, etc.

10. El botón debe tener estado de retroalimentación.

Una cosa que se pasa por alto fácilmente es que debe haber retroalimentación en el funcionamiento del botón para que el usuario sepa lo que está sucediendo. Debido a que los usuarios crean modelos cognitivos basados en la vida real, se sentirán frustrados si sus botones no responden como lo hacen los usuarios reales.

Los efectos de retroalimentación se pueden lograr mediante algunos ajustes simples de CSS, como sombras, bordes y degradados.

Estado predeterminado, estado de desplazamiento, estado de clic, estado ocupado, estado no válido.

上篇: 下篇: ¿Qué tan riesgoso es pasar del comercio exterior a la contabilidad?