O que é design de interface web - uma definição detalhada
· Время на чтение: 14mínimo · por · Publicados · Atualizada 
Ouça este artigo
O que é design de interface web? Design de interface (ou seja, design de interface do usuário) é um meio de transferência e troca de informações entre humanos e máquinas. Diz-se que o FaceUI inclui uma interface de hardware e uma interface de software. Esta é a interseção da ciência da computação e da psicologia, a arte do design, a ciência cognitiva e a ergonomia. Nos últimos anos, com o rápido desenvolvimento da tecnologia da informação e do computador, bem como o rápido desenvolvimento da tecnologia de rede, o design e o desenvolvimento da interface homem-máquina se tornaram o campo de pesquisa mais ativo nos círculos internacionais de computação e design.
IU é uma abreviação de interface de usuário. O design da interface do usuário refere-se ao design geral da interação humano-computador, lógica de operação e interface bonita. Um bom design de interface do usuário não apenas torna o software pessoal e elegante, mas também torna a operação do software conveniente, fácil e gratuita, refletindo totalmente o posicionamento e as características do software.
Ao classificar vários requisitos de design de interface e a influência dos elementos de design de interface no comportamento do usuário, a importância dos usuários no design de interface é estudada.
interatividade tornou-se o objetivo do design de interface web. Para que um design atenda aos requisitos de usabilidade, é necessário ter um entendimento abrangente das características do usuário e dos diversos requisitos. Para fazer isso, é necessário encontrar o caminho certo para documentar e implementar uma variedade de requisitos do usuário.
Interface é o meio pelo qual pessoas e objetos interagem, ou seja, a interface é a nova cara que os designers dão aos objetos.
Classificação de design de interface web
1. Design de interface baseado na implementação de funções
A característica mais básica design de interface As interações são todas sobre funcionalidade e usabilidade. Por meio do design da interface, os usuários podem entender a operação funcional e as informações sobre a operação em si podem ser transmitidas de maneira mais suave ao usuário, ou seja, o usuário, que é a base e o valor da existência da interface funcional, mas como o nível de conhecimento e antecedentes culturais os usuários são diferentes, a interface deve refletir informações sobre a obra em si de forma mais internacional e objetiva.
2. Design de interface com ênfase na expressão emocional
O verdadeiro charme artístico do design está em transmitir emoção ao usuário por meio da interface. Os sentimentos do usuário ao entrar em contato com a obra fazem com que as pessoas sintam uma ressonância emocional, e a expressão emocional é usada para refletir efetivamente a relação emocional entre a obra e o usuário. Claro, há uma unidade de certeza e incerteza na transferência informação emocional. Por isso, prestamos mais atenção às experiências emocionais dos usuários quando entram em contato com as obras.
3. Design de interface baseado em fatores ambientais
Nenhum trabalho de design interativo pode existir sem um ambiente, e o ambiente tem uma influência especial na comunicação das informações do trabalho de design. Incorporando características da própria história, cultura, tecnologia e muitos outros aspectos, criar um ambiente para uma interface é um trabalho de design que não pode ser ignorado, pelo mesmo motivo que precisamos apagar as luzes ao assistir a um filme.
Como aprender design de interface web
Em primeiro lugar, aprenda a linguagem necessária para web design - a linguagem html. Observe que html não é uma linguagem de programação, mas uma linguagem de marcação. O conteúdo dessa linguagem é relativamente fácil de aprender e há uma página da Web que suporta a execução de código HTML online.
Aprenda HTML/CSS
Web design geralmente requer uma combinação de linguagem html e linguagem css. CSS é uma linguagem de criação de sites indispensável no web design. Aqui eu recomendo uma página chamada runoob que pode depurar e executar código em vários idiomas, o que é muito adequado para iniciantes como eu aprender.
Linguagem Javascript - também será útil
Para melhorar os efeitos especiais em páginas da web, você precisa aprender javascript. A linguagem javascript é uma linguagem de tipagem dinâmica e agora é necessário desenvolver várias páginas web dinâmicas. Se você tiver habilidades suficientes, também poderá aprender a linguagem Java.
Você deve ter certas habilidades artísticas
Imagens realmente boas geralmente não são geradas por código, então você precisa ter boas habilidades de desenho. Claro, você também pode pedir ajuda a amigos que sabem desenhar. Para aprender a usar o software Photoshop, é essencial um software de design gráfico. Este software é o software de design mais usado e mais fácil de aprender. Podemos dizer que é relativamente acessível e fácil de usar.
Se você realmente tem preguiça de desenvolver um site sozinho, também pode pedir a ajuda de outras pessoas para desenvolvê-lo, mas precisa combinar um preço com antecedência, afinal, desenvolver um site não é uma tarefa fácil!
Quais habilidades são necessárias para Web UI Design
Muitas pessoas querem ser um designer de interface de usuário da web, então eles querem saber algumas das habilidades que precisam ser dominadas, então a seguir apresentarei quais habilidades são necessárias para o design de interface de usuário da web, vamos ver.
1. Código HTML/CSS
HTML/CSS é a linguagem mais fácil no desenvolvimento da web e é importante que os web designers entendam como ler, editar e resolver problemas. De qualquer forma, entender como estilos e cores são controlados e configurados por meio do código pode ser muito útil a longo prazo.
2. Escrever títulos
Ao projetar páginas da Web, as seções principais podem ser usadas como espaços reservados, mas não como cabeçalhos. No design conceitual, as informações visuais e de conteúdo são o elo entre o título e você não pode usar apenas uma frase.
3. Familiarizado com vários equipamentos
Como web designer, você deve ser capaz de usar uma variedade de dispositivos digitais para navegar na web. Diferentes sistemas e dispositivos têm diferentes formas de visualização, portanto, os designers de interface web devem estar preparados para abandonar os dispositivos eletrônicos com os quais estão mais familiarizados e experimentar diferentes dispositivos digitais.
4. Entenda as tendências
Como web designer, você não precisa conhecer todas as tendências, mas pelo menos três das mais populares. Ser capaz de explicar as características visuais dessas tendências de design, por que você as usa, como funcionam, por que você gosta ou não delas, etc.
5. Explique a teoria do design
Cor, fluxo, equilíbrio, proporções, intervalos Esses conceitos gerais de design também devem ser compreendidos pelos designers de interface do usuário da web. Esses conceitos devem ser entendidos e aplicados ao projetar um projeto. O design não é apenas uma boa aparência, mas o que os conceitos e princípios podem dizer aos usuários. Compreendê-los e ser capaz de interpretá-los cria uma beleza equilibrada.
O que são programas de web design simples e práticos?
A Macromedia sempre foi líder em web design e seus "Três Mosqueteiros da Web" têm a vantagem em web design. "Web Musketeers Web Page" são três ferramentas de software amplamente utilizadas no processo de design da web, ou seja, Dreamweaver, Fireworks e Flash.
Software de web design Dreamweaver
tecelão de sonhos é uma poderosa ferramenta de web design com ferramentas e funções de digitação WYSIWYG úteis e práticas, a interface é muito amigável e fácil de usar. Você pode usar seus poderosos recursos para desenvolver páginas da Web profissionais sem ter que dominar a linguagem HTML.
O Dreamweaver também é uma ferramenta de programação conveniente, pode facilmente escrever códigos ASP, PHP, JSP, função de preenchimento automático de software e função de coloração de código pode efetivamente ajudar os usuários a escrever e depurar vários códigos. Com o Dreamweaver, você pode desenvolver rápida e facilmente uma variedade de sites dinâmicos ou estáticos.
O Dreamweaver pode facilmente criar um site e suas principais características são as seguintes:
- Você pode criar um site do Dreamweaver - por meio do site do Dreamweaver, você pode especificar o ambiente de trabalho do site, organizar arquivos no site, gerenciar de maneira conveniente e rápida vários recursos do site, registrar várias informações.
Somente depois de criar um site do Dreamweaver, você poderá aproveitar ao máximo os vários recursos do Dreamwaver para gerenciar os arquivos em seu site. Por exemplo, rastreie e mantenha automaticamente links, gerencie arquivos e compartilhe arquivos. - Você pode criar páginas da web, modelos da web e estilos CSS. É aqui que se concentra a maior parte do trabalho com o Dreamweaver. As ferramentas fornecidas pelo Dreamweaver facilitam a criação de páginas da Web, modelos da Web e estilos CSS.
- As páginas da Web podem ser testadas. O Dreamweaver fornece recursos de teste de página da Web convenientes e confiáveis que podem ajudá-lo a identificar rapidamente possíveis problemas em suas páginas da Web.
- As páginas da Web podem ser publicadas. Depois de configurar as informações do servidor do site remoto, você pode usar diretamente o Dreamweaver para carregar o site, bem como editar diretamente o conteúdo no site remoto.
Flash software de web design
Instantâneo é um padrão para gráficos vetoriais interativos e animação da web introduzido pela macromedia e adquirido pela Adobe. Web designers usam Flash para criar belas interfaces de navegação redimensionáveis e outros efeitos sofisticados. O antecessor do Flash é o Future Splash da Future Wave Company, o primeiro software comercial de animação vetorial 2D do mundo para projetar e editar documentos Flash.
As três principais funções do design de animação em Flash são importantes e fundamentais para toda a base de conhecimento de design de animação em Flash, incluindo desenho e edição de gráficos, interpolação e mascaramento. Essas são três funções lógicas intimamente relacionadas, e essas três funções existem desde o início do Flash.
Recursos do programa:
- O Flash é amplamente utilizado no design de animação vetorial de páginas da web. Graças ao uso de operações vetoriais (VectorGraphics), o filme resultante ocupa menos espaço de armazenamento.
- Os filmes criados com o Flash têm seu próprio formato de arquivo especial (SWF). A empresa afirma que os navegadores da Web 97% em todo o mundo possuem Flash Players integrados (FlashPlayer).
- O Flash é uma das plataformas de implementação do conceito "Rich Internet Application" (RIA) proposto pela Macromedia.
Algumas características do design da interface web
1. O princípio da orientação do usuário
Ao projetar uma página da Web, devemos primeiro definir os usuários da página da Web e considerar e projetar o design de uma perspectiva de experiência do usuário. Para fazer isso, você deve se comunicar com os usuários para entender suas necessidades, objetivos, expectativas e preferências. Os desenvolvedores de páginas da Web precisam estar cientes de que os usuários são diferentes e seus recursos são diferentes.
- Por exemplo, alguns usuários podem ser deficientes visuais (por exemplo, daltônicos) e incapazes de distinguir muitas cores;
- Alguns usuários também podem ter problemas de audição e demoram a responder aos comandos de voz do site;
- Para um número significativo de usuários de computador, a experiência ainda é muito rudimentar e parecerá muito demorada para operações complexas.
Além disso, a configuração do computador usada pelos usuários varia muito, como placa gráfica, placa de som, memória, velocidade da rede, sistema operacional e navegador etc. Se o designer ignorar essas diferenças, a página da Web projetada causará confusão quando exibida em máquinas diferentes.
2. O princípio da simplicidade e conveniência de operação
Simplicidade e facilidade de uso são os princípios mais importantes do web design. O site é basicamente um serviço de rede para acessar as informações dos usuários da web em geral. Não há necessidade de configurar muitas operações em uma página da web e acumular muitas imagens complexas e sofisticadas. Os requisitos deste princípio são os seguintes:
- O carregamento da página da Web não deve exceder 6 segundos (a banda larga doméstica típica é de 2M e a velocidade geralmente é de 220kbps);
- As páginas da Web devem aproveitar ao máximo os links de texto, minimizar o uso de imagens e animações grandes e acelerar o tempo de abertura da página da Web;
- O esquema de trabalho deve ser o mais simples possível e deve haver dicas de trabalho claras;
- Todos os conteúdos e serviços do site devem ser explicados aos usuários no local mais visível possível.
3. Controle de layout
Em termos de layout de página da web, muitos web designers não prestam atenção suficiente a ele, o design e o layout da interface da web são muito rígidos e até copiados por outros. Se o layout de uma página da Web estiver confuso, simplesmente acumular muitas informações na página dificultará a leitura do leitor. Geralmente, os princípios a seguir ao projetar um layout de interface da Web são os seguintes -
1. Fórmula de Miller 7±2
De acordo com a pesquisa do psicólogo George A. Miller, a quantidade de informação que as pessoas podem obter de uma só vez é de cerca de 7 bits. Resumindo a fórmula: a quantidade de informação que uma pessoa recebe por vez é de 7 ± 2 bits. Este princípio é amplamente utilizado na criação de websites. Geralmente, a melhor seleção de colunas em uma página da web é entre 5 e 9. Se os links de conteúdo fornecidos pelo site para o visualizador selecionar excederem esse intervalo, as pessoas ficarão psicologicamente aborrecidas. Isso fará com que as pessoas sintam que a informação é muito densa para ser vista e muito cansativa.
Por exemplo, as configurações da coluna Aol.com: Main, MyAol, Mail, People, Search, Shop, Channels e Devices têm um total de oito categorias. Configurações da coluna do Msn.com: MSN Home, My MSN, Hotmail, Search, Shopping, Money e People & Chat, sete no total. No entanto, muitos sites domésticos têm colunas bem fora desse intervalo.
2. Processamento em lote
Como mencionado acima, a classificação das informações ou colunas não pode passar de 9. Mas se o seu conteúdo for muito, mais que 9, você precisa agrupá-lo. Se sua página da web tiver dezenas de links de artigos, você precisará adicionar uma linha em branco ou uma linha paralela a cada 7 artigos para agrupá-los.
Se o conteúdo do seu site tiver mais de 9 colunas, como o site da Tencent ou vários outros portais conhecidos, há muitas colunas e mais de 9. Para não violar a fórmula Miller 7 ± 2, as categorias mais representativas estão em negrito no projeto, depois agrupados por natureza e finalmente divididos em 6 grandes colunas.
4. Equilíbrio visual
Ao projetar páginas da Web, vários elementos (como gráficos, texto, espaço em branco) devem ter um equilíbrio visual. De acordo com o princípio visual, o efeito visual de um gráfico é maior do que o de um texto.
Portanto, para alcançar o equilíbrio visual, você precisa equilibrar uma imagem com muito texto ao projetar uma página da web. Por exemplo, a maior parte do seu texto está alinhada à esquerda <Alinhar=esquerda>, você precisa adicionar algumas imagens ou algumas cores mais brilhantes e atraentes no lado direito da página da web.
Normalmente, cada página da Web terá uma parte de cabeçalho e uma parte de rodapé. A parte do cabeçalho geralmente contém banners publicitários ou barras de navegação e LOGO do site, e a parte do rodapé geralmente contém informações de contato, informações de direitos autorais etc., o site deve ser projetado com foco em equilíbrio visual.
Além disso, o valor do espaço em branco não deve ser subestimado, as informações exibidas na página da web são muito densas, o que não é apenas desfavorável para a leitura dos leitores, mas também repugna os leitores e estraga a imagem do site. No web design, adicione algum espaço em branco em locais apropriados para aprimorar e sublimar a imagem e a estética de sua página da web, tornando-a concisa.
Qual é a diferença entre design de interface do usuário e web art
Antes de tudo, é necessário interpretar as respectivas responsabilidades do design de interface do usuário e da web art:
- Design de IU: interface do usuário é, na verdade, a abreviação de interface do usuário, e interface do usuário refere-se à interface no processo de interação homem-máquina. O design da interface do usuário é o design dos elementos e etapas necessárias no processo de interação humano-computador. Tomando o telefone celular como exemplo, a interface do telefone móvel refere-se à interface do usuário. O usuário envia instruções para o celular por meio dessa interface, e o celular gera feedback apropriado de acordo com essas instruções. A pessoa que projeta esse conjunto de elementos de interface visual é chamada de designer de interface do usuário.
- Arte: geralmente se refere a talentos técnicos que adicionam nivelamento, cor, tom, criatividade, etc., divididos em arte plana, arte da web e arte tridimensional. Geralmente, é necessário conhecimento de software de design, como o Photoshop. A maioria dos cursos de arte está se desenvolvendo devido ao crescimento do comércio eletrônico, eles são os principais responsáveis pela embalagem da imagem da empresa, otimização de sites, álbuns de promoção de produtos e design de tema de comércio eletrônico.
A diferença entre design de interface do usuário e arte é esta:
1. A arte, como o nome sugere, deve decorar a aparência de um site. O nível mais profundo é enfatizar a conotação do próprio site. E o verdadeiro significado de ser um designer de interface do usuário não é sobre arte (e de forma alguma é apenas fazer o trabalho de "decorar").
2. Para ser mais preciso, o designer de interface do usuário se refere a um designer de interface do usuário especializado em pesquisa e desenvolvimento de produtos. O objetivo é tornar mais fácil para os usuários entender e operar por meio de um design de GUI razoável, de acordo com a premissa de satisfação da função, a fim de melhorar o produto na mente dos usuários.
3. A página da web há dois ou três anos se preocupava mais com a aparência da interface, então as pessoas que faziam a interface estática eram chamadas de artistas. Basicamente, a estrutura da página não precisava ser considerada, tudo era fixo e o cliente só queria deixá-la estilosa. Nos últimos dois anos, a eficácia interativa dos requisitos da página da Web tornou-se cada vez mais forte, e também foi dada atenção à experiência do usuário. No design, os designers devem organizar o design em termos de uso do usuário.
4. Não há dúvida de que a interface do usuário faz parte da TI e é um produto que só aparecerá quando a TI tiver desenvolvido um certo grau.
- O desenvolvimento da TI passou da implementação de funções à busca da beleza e da humanização;
- Ao mesmo tempo, também faz parte da categoria arte porque é o processo de combinar as ações do usuário com base na estética.
Portanto, os produtos de TI que podem apenas implementar funções não podem mais satisfazer as necessidades dos usuários, e considerar apenas a arte também levará a negligenciar a experiência do usuário.
5. Portanto, em geral, a diferença entre interface do usuário e gráfico é que a interface do usuário se concentra principalmente na experiência do usuário, enquanto o design gráfico são os efeitos da página com foco em mais conhecimento sobre a página.
Obrigado por ler Nicola Top
