¿Has dominado los siete detalles del diseño de la interfaz web?
Explica principalmente las técnicas de diseño muy pequeñas en la interfaz UI.
01. Utilice el color y el peso de la fuente para crear una estructura jerárquica, en lugar de una pura comparación de tamaño.
Al controlar el estilo del texto de la interfaz de usuario, el error más común es la confianza excesiva. en tamaño de fuente para crear contraste.
Pero sobre un fondo de color, si quieres reducir el contraste, debes hacer que el texto se acerque gradualmente al color de fondo en lugar de cambiar a gris.
02. Si desea reducir el contraste con el color de fondo, suele haber dos métodos:
1. Reducir la opacidad del texto blanco.
Reduzca la opacidad del texto blanco. La transparencia permite que se vea parte del color de fondo, lo que reduce el contraste entre el texto de primer plano y el fondo de una manera no conflictiva.
2. Seleccione manualmente el color del texto según el color de fondo.
Cuando el fondo es una imagen o patrón, el texto translúcido afectará la legibilidad. En este momento, es mejor seleccionar. el color según el color de fondo para seleccionar el color de texto correspondiente.
03. Diseño de sombras
En comparación con el uso de sombras difusas y desenfocadas a gran escala, el uso de sombras verticales sutiles tiene un efecto más obvio y natural. Simula las características de luz más comunes. , el efecto de sombra creado por la luz que brilla de arriba a abajo.
Si estás interesado en esto, MaterialDesignGuideline te explica claramente los detalles para hacer dicha sombra.
04. Utilizar los bordes lo menos posible
El modelo de caja es la herramienta más utilizada en el front-end de las páginas web. Cuando necesites crear una separación entre dos elementos, intenta evitar utilizar el borde entre los dos elementos para hacer contacto directo.
Aunque Border es una buena forma de separar dos elementos, no es la única forma de usarlo demasiado reducirá el sentido del diseño de todo el diseño e incluso causará confusión.
Así que puedes probar los siguientes métodos para evitarlo:
1. Utiliza boxshadow
boxshadow también puede crear una sensación de límite y es más sutil. y no parece molesto y no distrae al usuario.
2. Utilice diferentes colores de fondo para distinguirlos
Por lo general, los fondos de elementos adyacentes solo necesitan diferencias sutiles para permitir que las personas los distingan. Entonces, todo lo que necesitas hacer es usar diferentes colores de fondo en diferentes secciones e intentar eliminar el borde porque no lo necesitas en absoluto.
3. Agregue espacios en blanco adicionales
La creación de un efecto de separación entre elementos no necesariamente tiene que expresarse a través de estructuras alámbricas. Solo agregue espacios en blanco adicionales para separarlos. Agrupar elementos mediante espacios en blanco y espaciado es una técnica común en el diseño de UI.
05. No permita que los íconos pequeños se expandan innecesariamente
Cuando esté diseñando una página de destino, puede resaltar las funciones del producto. En este momento, necesita algunos íconos grandes. para que sirvan como anclajes visuales En este punto, puede ir a un sitio web como FontAwesome o Zondicons para encontrar algunos íconos vectoriales gratuitos y luego ampliarlos a un tamaño que satisfaga sus necesidades.
Todos son iconos vectoriales y se pueden ampliar sin pérdida. Pero un icono que suele ser de sólo 16×16 se amplía tres o cuatro veces. Aunque no tiene pérdidas, visualmente parece bastante poco profesional: carece de detalles y siempre se siente demasiado grueso.
Sin embargo, si estos pequeños íconos son el único material que puedes conseguir, entonces intenta colocarlos en otro gráfico con color:
Tal diseño no solo el ícono puede alcanzar el efecto visual esperado tamaño, pero también parece más detallado que simplemente agrandándolo. Eso sí, si no andas tan escaso de dinero, lo mejor es comprar unos cuantos iconos de gran tamaño y calidad, como Heroicons o Iconic.
06. Agrega un borde de un solo lado con color para realzar la personalidad.
Por supuesto, puede que no seas un diseñador con suficiente experiencia en diseño gráfico, pero aún puedes diseñar la interfaz. es lo suficientemente atractivo visualmente.
La forma más sencilla es agregar un color sólido o incluso un borde degradado a un lado del borde de la interfaz, lo que puede hacer que una interfaz sosa cobre vida de repente.
Por ejemplo, en el lateral del cuadro emergente de advertencia:
O en la parte inferior de la barra de navegación para indicar la activación:
O en el Parte superior de toda la página:
Esto no requiere ninguna experiencia en diseño gráfico, pero mejorará significativamente el sentido del diseño.
Dando un paso atrás, si no sabes qué color elegir, simplemente ve a la búsqueda de colores de Dribbble y encuentra algunos colores bonitos, que en realidad son suficientes.
07. No todos los botones necesitan color
Muchas veces, el contexto del botón en sí y el contenido del texto del botón pueden resultar confusos. Marcos como BootStrap permiten a los diseñadores tomar decisiones basadas en el contexto y la semántica:
De hecho, la semántica está estrechamente relacionada con el diseño del botón en sí, pero hay una dimensión más importante que se ha ignorado, y es jerarquía. .
Cada operación en la página web en realidad se ubica en algún lugar de toda la pirámide de interacción. La gran mayoría de las páginas en realidad tienen sólo una operación principal, junto con algunas operaciones secundarias menos importantes y algunas operaciones de tercer nivel.
Al diseñar estas interacciones, un paso de diseño importante es presentar la importancia de estas interacciones a través de una estructura jerárquica.
Resumen
Los siete consejos para manejar pequeños detalles del diseño de la interfaz de usuario resumidos anteriormente se resumen de una gran cantidad de trabajos de proyectos reales y son fáciles de entender e implementar. Algunas personas pueden decir que incluso un solo píxel está siendo derribado y que no es el lanzamiento de un cohete de investigación científica. Lo único que puedo decir es que es una cuestión de profesionalidad y actitud en el trabajo. Quizás un píxel no afecte la belleza de la interfaz de usuario, pero marca la diferencia entre un maestro y un trabajador común y corriente.