En los últimos años, en muchos países en desarrollo, la industria del diseño se encuentra entre las profesiones mejor pagadas. Hay muchas áreas en la industria del diseño y el diseño UI/UX es una de ellas y actualmente está creciendo muy rápidamente.
El trabajo de un diseñador UI/UX es implementar ideas, analizar los requisitos del cliente y luego diseñar un producto con una interfaz hermosa (buena UI y fácil de usar) buena UX. Especialmente debido a la diversión del trabajo, muchas personas han querido cambiar a UI/UX. Si está haciendo la transición de desarrollador de software, es genial, los términos de TI ya los conoce muy bien. Pero cuando pasas del diseño gráfico u otros dominios, muchas cosas te sorprenden al principio. Los nombres y usos de los elementos en la interfaz de usuario son una de esas cosas que te confundirán aunque los encuentres en aplicaciones y sitios web todos los días.
Estos son los elementos de UI más comunes que los diseñadores principiantes de UI/UX no conocen.
1. Barras de navegación inferiores (barras inferiores)
Las barras de navegación inferiores muestran de tres a cinco destinos en la parte inferior de una pantalla. Cada destino está representado por un icono y una etiqueta de texto opcional. Cuando se toca un ícono de navegación inferior, el usuario es llevado al destino de navegación de nivel superior asociado con ese ícono.
Diseño de materiales de navegación inferior https://material.io/components/bottom-navigation
Tienda de juegos APP Tabbar Egg_Kim
aplicación de facebook
El área de la barra inferior es pequeña, por lo que es necesario considerar cuidadosamente la disposición del contenido aquí. El diseño de los íconos aquí también debe hacerse con delicadeza para que los usuarios puedan reconocer fácilmente la función de esa pestaña. Utilice una jerarquía de colores para que los usuarios sepan qué pestañas están activas y cuáles están deshabilitadas. En las pantallas que son más profundas, debes desactivar la barra inferior porque, en estas pantallas, ya no es realmente necesaria. Además, puede agregar efectos de animación al cambiar a otras pestañas para aumentar la experiencia del usuario.
2. modales
Un modal es un cuadro de diálogo o una ventana emergente, que muestra sobre todo el resto del contenido de la página actual. El propósito de Modal es notificar al usuario sobre algo en la aplicación o esperar a que el usuario ingrese información.
El cuadro modal se puede ver como parte del contenido de la página, pero está oculto cuando no es necesario, algunas aplicaciones prácticas del cuadro modal se pueden mencionar como el formulario de registro, la imagen de tamaño completo o la información de contacto del propietario del sitio web,…
Modal de arranque
Modal de perfil de Facebook
Modal se utiliza para atraer la atención, necesitar información ingresada por el usuario y mostrar información adicional al contenido sin perder el contexto de la página original (mostrar una foto más grande, reproducir un video). Un modal no debe ser demasiado grande ni demasiado pequeño, el contenido debe ajustarse al modal, si el modal es demasiado largo y requiere desplazamiento de página, entonces debería considerar la posibilidad de crear una nueva página en lugar de usar el modal.
3. Control deslizante: carrusel
Una presentación de diapositivas o control deslizante es un conjunto de imágenes bastante grandes que se pueden deslizar hacia adelante y hacia atrás entre imágenes; a menudo se colocan en la parte superior de la página para describir las características. Contenido destacable de la página en su momento.
Carousel es un complemento de jQuery que convierte cualquier elemento HTML en un carrusel. En bootstrap, este complemento está integrado en el archivo bootstrap.js y ya es CSS, por lo que no es necesario escribir nada más.
Biblioteca deslizante elegante
Widget social de Instagram de Francesco Zagami
4. Paginación
La paginación es el proceso de dividir el contenido en una serie de páginas. Esta es una técnica popular y ampliamente utilizada para paginar páginas web para dividir una lista de artículos o productos en un formato fácil de entender. Por lo general, la paginación se ve con mayor frecuencia en tipos de sitios web como blogs, foros, noticias, comercio electrónico,…
Paginación de Google
Paginación
5. Pan rallado
Breadcrumb es un conjunto de enlaces que ayudan a los usuarios a localizar su posición actual en la estructura del sitio web. En un sitio web con una estructura compleja o mucho contenido, Breadcrumb Navigation es una forma eficaz de localizar y es más conveniente cuando los usuarios se mueven entre páginas.
Ayudar a los usuarios a navegar en un sitio web Rutas de clic más cortas al navegar por los niveles del sitio web Atraer el interés del usuario hacia elementos superiores en la jerarquía del sitio Impulsar una fuerte interacción del usuario
Componente de diseño de interfaz de usuario Breadcrumbs: kit de interfaz de usuario React para Figma de Roman Kamushken
6. Barra lateral
Se entiende por barra lateral una columna que muestra información junto al contenido principal del sitio web. El uso de la barra lateral, que suele aparecer en sitios web con muchas funciones de gestión de información, ayudará a los usuarios a acceder rápidamente a las categorías que utilizan con mayor rapidez. No siempre es una columna vertical al costado. Puede ser un rectángulo horizontal debajo o encima del área de contenido, pie de página, encabezado o cualquier parte del tema que pueda expandirse o reducirse para evitar afectar el espacio de visualización de otros elementos principales.
Diseño del menú de navegación izquierda por Sagor Shopon
7. Cargador – Girador
Loader, también conocido como spinner, es un efecto indispensable en la web moderna. El objetivo es lograr una mejor interacción entre la web y los usuarios. Puede aparecer al abrir una nueva página, después de iniciar sesión, cargar archivos, etc. Con el uso de un cargador, para aumentar la experiencia del usuario, se debe aplicar una barra de progreso para que al usuario le resulte más fácil saber cómo funciona la página. ha cargado.
Cargador de neón de Asif Adnan Tuhin
8. tostadas
Los mensajes brindis permiten a los usuarios saber que la tarea que acaban de realizar fue exitosa. Estos mensajes brindan a los usuarios comentarios inmediatos después de realizar alguna acción. Los usuarios no necesitan descartar los mensajes de brindis, ya que aparecen solo por un momento antes de desaparecer. Utilice mensajes de brindis para confirmaciones frecuentes, como la finalización exitosa de una tarea o transacción, o cuando no sea crítico que el usuario lea el mensaje.
Mensajes de brindis por Jon Rundle
9. Botón de opción y casilla de verificación
Las casillas de verificación y los botones de opción son elementos para realizar selecciones. Las casillas de verificación permiten al usuario elegir elementos entre un número fijo de alternativas, mientras que los botones de opción le permiten al usuario elegir exactamente un elemento de una lista de varias alternativas predefinidas.
Casillas de verificación
Las casillas de verificación se utilizan para elegir tantas opciones como desee a la vez entre un número limitado de opciones. Puede seleccionar ninguna, una o tantas opciones como desee en un grupo de casillas de verificación. También puede haber solo una casilla de verificación. Elija un nombre que distingue explícitamente dos estados o contrastes diferentes.
Botones de radio
Los botones de opción se utilizan para elegir una opción a la vez entre un número limitado de opciones. Organice los botones de opción en grupos (los grupos gráficos se definen en Screen Painter). Coloque al menos dos botones de opción en un grupo. Siempre se debe seleccionar un botón de opción en un grupo. Si el usuario debe tener la oportunidad de elegir ningún elemento de las opciones ofrecidas, cree un botón de opción separado con una etiqueta “Sin selección” o texto similar que desactiva las otras opciones relacionadas con el contenido.
Los botones de opción y las casillas de verificación no pueden coexistir uxmovement.com
10. Información sobre herramientas
La información sobre herramientas, también conocida como información informativa o sugerencia, es un elemento común de la interfaz gráfica de usuario (GUI) en el que, al pasar el cursor sobre un elemento o componente de la pantalla, un cuadro de texto muestra información sobre ese elemento, como una descripción de la función de un botón. qué significa una abreviatura, o la marca de tiempo absoluta exacta sobre un tiempo relativo (“…hace”).
He escrito muchos detalles sobre la información sobre herramientas aquí, puedes visitar para ver más https://medium.com/@NALSengineering/how-to-design-a-good-tooltip-in-ui-design-309bcf0bc4da
Información sobre herramientas en PC y tableta
Es difícil cuando cambias UI/UX de otra industria que no es de TI, pero con este artículo, espero que todos puedan reconocer los nombres de los conceptos más básicos de una UI. Le resultará más fácil comunicar ideas al equipo y escribir documentos más adelante.
Elementos de UI más comunes: los diseñadores principiantes de UI/UX no conocen el nombre
Barras de navegación inferiores (barras inferiores) ModalSlider – CarruselPaginaciónBreadcrumbsSidebarLoader – SpinnerToastBotón de radio y casilla de verificaciónInformación sobre herramientas
Espero que esto haya sido útil para ti. Gracias por leer hasta el final.