Compreender o design web e a experiência do usuário

Name: Compreender o design web e a experiência do usuário
Author: Matthew Brown

Neste capítulo, aprenderás sobre elementos de design de controlo de entrada para incluir botões, menus suspensos, botões de rádio e controlos deslizantes. Este…

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

Solicitar uma demonstração Entrar

Curso: sob demanda

Olá. Neste capítulo, veremos no web design a partir da perspectiva de experiência do usuário e elementos de design. Os elementos da interface do usuário serão agrupados em quatro categorias. Controles de entrada. Estes permitem que os usuários insiram informações no sistema. Componentes de navegação, estes permitem que os usuários para se movimentar em seu aplicativo ou site. Componentes informativos permitirão ao desenvolvedor para compartilhar qualquer informação que é pertinente com os usuários. Os contêineres permitem que você mantenha o conteúdo relacionado em conjunto. Começaremos analisando alguns dos controles de entrada mais comuns que todos os designers e desenvolvedores devem estar cientes. O primeiro deles são os botões. Estas são as formas mais comuns de entrada do usuário que geralmente são exibidos como formas com uma etiqueta sobre eles. Isso permite que os usuários executem ações, como salvar ou enviar. Temos então caixas de seleção, que permite aos usuários fazer seleções com base nas opções disponíveis. Os menus suspensos permitem que os usuários façam seleções de uma lista de itens. Campos de entrada, um local onde os usuários inserem o texto ou conteúdo, como anexos no sistema. E também temos botões de rádio. São elementos circulares que permitem aos usuários para selecionar entre as opções. E, finalmente, temos controles deslizantes usado para permitir que o usuário selecione um valor de um intervalo de valores. Como podemos ver aqui, temos uma página simples aberta no Notepad++ com alguns exemplos de apenas alguns dos controles de entrada que são possíveis. Primeiro, temos a entrada de texto, e esta é apenas uma entrada de texto para nome e sobrenome. Estamos usando o tipo de entrada de texto. Se tivermos o nome do ID ou fname. E então o nome é fname. Tudo bem? E então temos um rótulo para o sobrenome e então temos uma entrada para o sobrenome. E também temos um tipo de entrada de envio, que é o meu botão. O próximo controle que temos nesta página é o botão de rádio. Temos um parágrafo simples que indica qual é a sua linguagem de programação favorita. Temos um tipo de entrada de rádio. ID, HTML. Nome, idioma favorito e valor, HTML. Temos outro rótulo para HTML. E temos outro botão de opção de entrada para CSS. E outro botão de opção de entrada para JavaScript. Então, quando executarmos isso, veremos como fica. O próximo controle que chamamos aqui é uma caixa de seleção com uma pergunta que meio de transporte você tem? Um parágrafo simples. Mas o tipo que está sendo usado desta vez é checkbox e temos três valores para a caixa de seleção. Temos um veículo, que é que eu tenho uma bicicleta. Eu tenho veículo dois, eu tenho um carro. E veículo três, eu tenho um barco. E você pode ver a sintaxe com ele. Em seguida, temos a lista suspensa, que é etiqueta para carros. Escolha um carro é o rótulo e, em seguida, as opções, usamos a tag de opção. Temos um Volvo, Saab, Fiat e Audi. E então o controle final que temos é um controle deslizante. Meu tipo de entrada é um intervalo. Os pontos e o nome do ID são pontos. O valor mínimo é zero, o valor máximo é 10. Então agora vamos ter executado isso e veja como ele realmente se parece. Novamente, esta é apenas uma página simples onde temos o campo de entrada para o primeiro nome, um campo de entrada para o sobrenome, e então temos o botão Enviar. Como não há código por trás desse botão de envio, na verdade não faz nada. E então temos os botões de rádio. Qual é a sua linguagem de programação favorita? E então podemos ver que podemos escolher qualquer um dos botões. E então temos a caixa de seleção. Qual é o seu meio de transporte? Tenho bicicleta, tenho carro, tenho barco? E posso escolher qualquer uma dessas caixas de seleção ou todos eles. E então temos nosso menu suspenso, escolha seu carro. Volvo, Saab, Fiat. E então temos nosso controle deslizante. Valor mínimo de zero, valor máximo de 10. Obrigado por se juntar. Na próxima lição, veremos os componentes de navegação para o design.

Principiante Fornecedor : Matthew Brown 6 lições · 21m em Árabe, Alemão, Inglês, Espanhol, Francês, Português, Chinese

Descrição do curso

Neste capítulo, aprenderás sobre elementos de design de controlo de entrada para incluir botões, menus suspensos, botões de rádio e controlos deslizantes. Este capítulo também cobrirá o uso de contêineres HTML para organizar o conteúdo da página da web, bem como os elementos de design de interface de usuário intuitiva.

Objectivos de aprendizagem:

O Que Você Vai Aprender

Criar itens de controle de entrada em um site, incluindo botões, menus suspensos, botões de opção e controles deslizantes
Controlar cor, texto e estilos para melhor web design
Implementar elementos de navegação em um site
Usar contêineres HTML para organizar conteúdo de página web
Projetar botões CTA, botões de ação primária, ícones, sobreposições de imagem, gradientes e mensagens de erro
Aplicar princípios de design de interface do usuário intuitivo, como familiaridade, consistência e aprendibilidade

Principais Conclusões

O capítulo cobre elementos de design de controle de entrada, incluindo botões, menus suspensos, botões de opção e controles deslizantes.
Os contêineres HTML são usados para organizar conteúdo de página web.
O design de interface do usuário intuitivo baseia-se em familiaridade, consistência e design aprendível e invisível.
Os elementos de design para experiência do usuário incluem cores, gradientes, mensagens de erro, estilos de texto, fontes e sobreposições de imagem.

Perguntas Frequentes

O que vou aprender neste capítulo?

Você aprenderá como criar itens de controle de entrada em um site, como controlar cor, texto e estilos para melhor web design e como implementar elementos de navegação em um site.

Quais elementos de design este capítulo cobre?

Ele cobre botões CTA, botões de ação primária, ícones, sobreposições de imagem, botões de opção, menus suspensos, cores, gradientes, mensagens de erro, estilos de texto e fontes.

Este capítulo aborda experiência do usuário e design de interface?

Sim. Ele cobre os elementos de design de interface do usuário intuitivo, incluindo familiaridade, consistência e design aprendível e invisível.

Quais habilidades este capítulo ajuda a desenvolver?

Ele desenvolve habilidades em HTML Components, HTML Controls, Interaction Design, Interface Design, User Interface (UI) Design e Web UI Design.