Comprender el diseño web y la experiencia del usuario

Name: Comprender el diseño web y la experiencia del usuario
Author: Matthew Brown

En este capítulo aprenderá sobre los elementos de diseño del control de entrada para incluir botones, menús desplegables, botones de opción y controles…

Preview the first lesson free — get full access to all 6 lessons.

Solicitar una demo Iniciar sesión

Curso: bajo demanda

Hola. En este capítulo, buscaremos en el diseño web desde la perspectiva de experiencia de usuario y elementos de diseño. Los elementos de la interfaz de usuario se agruparán en cuatro categorías. Controles de entrada. Estos permiten a los usuarios ingresar información en el sistema. Componentes de navegación, estos permiten a los usuarios para moverse por su aplicación o sitio web. Los componentes informativos permitirán al desarrollador para compartir cualquier información que sea pertinente con los usuarios. Los contenedores le permiten mantener juntos el contenido relacionado. Comenzaremos analizando algunos de los controles de entrada más comunes que todos los diseñadores y desarrolladores deben conocer. El primero de ellos son los botones. Estas son las formas más comunes de entrada del usuario que a menudo se muestran como formas con una etiqueta en ellos. Esto permite a los usuarios realizar acciones, como guardar o enviar. Entonces tenemos casillas de verificación, que permite a los usuarios hacer selecciones basadas sobre las opciones disponibles. Los menús desplegables permiten a los usuarios hacer selecciones de una lista de artículos. Campos de entrada, un lugar donde los usuarios ingresan el texto o el contenido, como archivos adjuntos en el sistema. Y también tenemos botones de radio. Son elementos circulares que permiten a los usuarios para seleccionar entre las opciones. Y finalmente, tenemos controles deslizantes se utiliza para permitir al usuario seleccionar un valor de un rango de valores. Como podemos ver aquí, tenemos una página simple abierta en Notepad++ con algunos ejemplos de solo algunos de los controles de entrada que son posibles. Primero, tenemos la entrada de texto, y esto es solo una entrada de texto para el nombre y el apellido. Estamos usando el tipo de entrada de texto. Si tenemos el DNI primer nombre o fname. Y luego el nombre es fname. ¿Todo bien? Y luego tenemos una etiqueta para el apellido y luego tenemos una entrada para el apellido. Y luego tenemos también un tipo de entrada de envío, cual es mi boton El siguiente control que tenemos en esta página es el botón de radio. Tenemos un párrafo simple. que indica cuál es tu lenguaje de programación favorito. Tenemos un tipo de entrada de radio. Identificación, HTML. Nombre, idioma favorito y valor, HTML. Tenemos otra etiqueta para HTML. Y tenemos otro botón de opción de entrada para CSS. Y otro botón de opción de entrada para JavaScript. Entonces, cuando ejecutemos esto, veremos cómo se ve. El siguiente control que hemos llamado aquí es una casilla de verificación con una pregunta que medio de transporte tienes? Un párrafo sencillo. Pero el tipo que se usa esta vez es la casilla de verificación y tenemos tres valores para la casilla de verificación. Tenemos el vehículo uno, que es que tengo una bicicleta. Tengo vehículo dos, tengo carro. Y el vehículo tres, tengo un bote. Y puedes ver la sintaxis con él. Luego tenemos la lista desplegable, que es la etiqueta para los coches. Elegir un coche es la etiqueta y luego las opciones, usamos la etiqueta de opción. Tenemos un Volvo, Saab, Fiat y Audi. Y luego el control final que tenemos es un control deslizante. Mi tipo de entrada es un rango. Los puntos de identificación y el nombre son puntos. El valor mínimo es cero, el valor máximo es 10. Así que ahora habremos ejecutado esto y ver cómo se ve realmente. Nuevamente, esta es solo una página simple. donde tenemos el campo de entrada para el nombre, un campo de entrada para el apellido, y luego tenemos el botón Enviar. Porque no hay código detrás de ese botón de enviar, en realidad no hace nada. Y luego tenemos los botones de radio. ¿Cuál es tu lenguaje de programación favorito? Y luego podemos ver que podemos elegir cualquiera de los botones. Y luego tenemos la casilla de verificación. ¿Cuál es su modo de transporte? ¿Tengo una bicicleta, tengo un coche, tengo un barco? Y puedo elegir cualquiera de estas casillas de verificación o todos ellos. Y luego tenemos nuestro menú desplegable, elige tu coche. Volvo, Saab, Fiat. Y luego tenemos nuestro control deslizante. Valor mínimo de cero, valor máximo de 10. Gracias por unirte. En la próxima lección, veremos los componentes de navegación para el diseño.

Principiante Proveedor : Matthew Brown 6 lecciones · 21m en Árabe, Alemán, Inglés, Español, Francés, Portugués, Chinese

Descripción del curso

En este capítulo aprenderá sobre los elementos de diseño del control de entrada para incluir botones, menús desplegables, botones de opción y controles deslizantes. Este capítulo también cubrirá el uso de contenedores HTML para organizar el contenido de la página web, así como los elementos del diseño intuitivo de la interfaz de usuario.

Objetivos de aprendizaje:

Habilidades:

Lo que aprenderás

Crear elementos de control de entrada en un sitio web, incluidos botones, menús desplegables, botones de radio y controles deslizantes
Controlar color, texto y estilos para un mejor diseño web
Implementar elementos de navegación en un sitio web
Usar contenedores HTML para organizar el contenido de páginas web
Diseñar botones CTA, botones de acción principal, iconos, superposiciones de imagen, gradientes y mensajes de error
Aplicar principios de diseño de interfaz de usuario intuitivos, como familiaridad, consistencia y capacidad de aprendizaje

Puntos clave

El capítulo cubre elementos de diseño de control de entrada, incluidos botones, menús desplegables, botones de radio y controles deslizantes.
Los contenedores HTML se utilizan para organizar el contenido de páginas web.
El diseño de interfaz de usuario intuitivo se basa en familiaridad, consistencia y diseño aprendible e invisible.
Los elementos de diseño para la experiencia del usuario incluyen colores, gradientes, mensajes de error, estilos de texto, fuentes y superposiciones de imagen.

Preguntas frecuentes

¿Qué aprenderé en este capítulo?

Aprenderás cómo crear elementos de control de entrada en un sitio web, cómo controlar el color, el texto y los estilos para un mejor diseño web e implementar elementos de navegación en un sitio web.

¿Qué elementos de diseño cubre este capítulo?

Cubre botones CTA, botones de acción principal, iconos, superposiciones de imagen, botones de radio, menús desplegables, colores, gradientes, mensajes de error, estilos de texto y fuentes.

¿Aborda este capítulo la experiencia del usuario y el diseño de interfaz?

Sí. Cubre los elementos del diseño de interfaz de usuario intuitivo, incluida la familiaridad, la consistencia y el diseño aprendible e invisible.

¿Qué habilidades ayuda a desarrollar este capítulo?

Desarrolla habilidades en Componentes HTML, Controles HTML, Diseño de Interacción, Diseño de Interfaz, Diseño de Interfaz de Usuario (UI) y Diseño Web UI.