Fundamentos do UX em Mobile: Efeitos das Cores na Experiência do Usuário

Introdução ao UX para Mobile Fundamentos Sumário Paleta de cores Princípios Mockups As cores na experiência do usuário Cores dão identidade expressividade e personalidade a tudo Elas são importantes em todos os aspectos da nossa vida e por que não no âmbito digital As cores na experiência do usuário Vamos ver as cores e o comportamento humano em relação a elas em nível psicológico físico e emocional E como essa influência está diretamente ligada à experiência de navegação Essa cor é a cor do ano de 2013 da Pantone Emerald Segundo eles Emerald é viva radiante luxuosa A cor da elegância e beleza que aumenta a nossa sensação de bemestar equilíbrio e harmonia Por que 07 Efeitos Psicológicos da Cor A cor pode aumentar a memorização recordação e reconhecimento Em projetos interativos a cor pode sugerir categorias e dão identidade aos pedaços de informação Isso pode criar um design que é mais eficiente mais claro e fácil de entender logo a navegação será mais positiva e a experiência também A Globocom por exemplo usa essa separação de categoria por cores há vários anos Efeitos Psicológicos da Cor A Globocom por exemplo usa essa separação de categoria por cores há vários anos Efeitos Fisiológicos da Cor As cores afetam nosso sistema nervoso Os estudos mostram que vermelhos brilhantes estimulam o sistema nervoso simpático o que resulta em alterações fisiológicas tais como um aumento do ritmo cardíaco Efeitos Fisiológicos da Cor Em contraste tons suaves de azuis e verdes criam o efeito fisiológico oposto e nos ajudar a relaxar Efeitos Emocionais da Cor As cores e os significados que atribuímos a quando já passaram pelo psicológico e pelo fisiológico afetam nossas emoções e o nosso humor Por exemplo a maioria das pessoas associa a cor amarela com felicidade e energia Em termos individuais uma pessoa poderia associar a cor amarela com a cor de sua casa durante a infância que invoca lembranças e sentimentos agradáveis Contexto Cultural da Cor Lembrese que o significado é culturalmente construído Sensibilidade ao contexto cultural da cor dentro do seu grupo de usuários é importante Por exemplo em muitas culturas ocidentais o preto representa a morte Em algumas culturas orientais o branco representa a morte Contexto Cultural da Cor E mesmo dentro do nosso país por exemplo não vá para o Rio Grande do Sul desenhar um site azul para torcedores do Internacional pois o azul remete automaticamente a seu time rival o Grêmio A cor como aliada na hora de desenhar UX Vermelho Aumenta as taxas de pressão arterial coração e respiração Estimula as glândulas suprarenais e pituitária o que pode aumentar temporariamente a força e resistência Representa vitalidade ambição e paixão Pode afastar os pensamentos negativos Associada com a raiva perigo endividamento e irritabilidade A cor como aliada na hora de desenhar UX Vermelho Uma cor estimulante mental pode aumentar pressão sanguínea e o ritmo respiratório Está ligada a paixão entusiasmo impacto agressividade força energia erotismo amor e liderança Uma cor quente que cansa rapidamente Cor oposta Verde A cor como aliada na hora de desenhar UX Rosa Induz sensações de relaxamento tranquilidade carinho e proteção Reduz os sentimentos de agressividade e irritação Associado com carinho altruísta generosa amor Rosa claro é associado com a feminilidade enquanto tons mais ousados e mais quente sugerir energia jovem e divertida A cor como aliada na hora de desenhar UX Amarelo Estimula o cérebro criando agilidade e energia Ativa o sistema linfático Feliz otimista confiante e edificante Associada com o intelecto organização discernimento memória clareza tomada de decisão e bom senso A cor como aliada na hora de desenhar UX Amarelo Indicada para situações de calma reflexão e decisão pode ter efeito calmante Utilizada para estimular o conhecimento e prender a atenção gera otimismo alegria felicidade idealismo e arrogância Aumenta um pouco a pressão sanguínea e favorece indigestões e gastrites Cor oposta Roxo A cor como aliada na hora de desenhar UX Laranja Estimula o sistema digestivo e imunológico Associado com a energia e vitalidade Audiências mais jovens respondem com laranjas fortes enquanto o público mais velho e de alto nível responder positivamente aos tons mais suaves Afeta positivamente e o humor e consideram a cor antidepressiva A cor como aliada na hora de desenhar UX Laranja Cor que aumenta a emotividade promove sensação de bem estar e alegria Cor quente ligada a vitalidade energia criatividade equilíbrio entusiasmo e diversão Acelera a produção de suco gástrico dando fome é antiséptico Cor oposta Azul A cor como aliada na hora de desenhar UX Verde Traz equilíbrio e relaxamento sentimentos de conforto Nos ajuda a respirar mais profundo e mais lento Sugere natureza paz bemestar Tons profundos sugerem riqueza Representa a proteção em ambientes Tonalidades particulares de verde como o verdeoliva pode representar doença e náuseas A cor como aliada na hora de desenhar UX Verde Bemestar tranqüilidade descanso serenidade ciúme inteligência Tonifica o sistema nervoso é tranqüilizante Cor das pessoas confiáveis melancólicas e introvertidas Cor oposta Vermelho A cor como aliada na hora de desenhar UX Azul Reduz a pressão arterial tem um efeito refrescante e calmante Azul profundo estimula a glândula pituitária que regula os padrões de sono e está associado com calma Inspira controle mental clareza e criatividade Um excesso de azul escuro pode ser deprimente A cor como aliada na hora de desenhar UX Azul Representa calma tranquilidade clareza credibilidade confiança e harmonia Cor utilizada para gerar reflexão e contemplação É sedativo e curativo diminui a pressão arterial Cor oposta Laranja A cor como aliada na hora de desenhar UX Roxo Violeta sugere purificação limpeza paz e equilíbrio Choque de Combate e medo Todos os tons de ajudar com transtornos mentais e nervosos Estimula a compaixão intuição e imaginação Associado com o lado direito do cérebro Referese a sensibilidade beleza e idealismo Associada com a realeza e nobreza A cor como aliada na hora de desenhar UX Roxo Muito ligada a espiritualidade realeza otimismo e sabedoria Cor que produz efeito calmante e dá um ar de mistério Cor das pessoas altamente criativas e inovadoras é a cor da arte e da cultura Cor oposta Amarelo A cor como aliada na hora de desenhar UX Marron Sugere terra casa e lar estabilidade e segurança Também pode sugerir sujeira ou retiro e isolamento do mundo A cor como aliada na hora de desenhar UX Marrom Cor neutra que representa a justiça Ligada à segurança solidez estabilidade conservadorismo e calma A cor como aliada na hora de desenhar UX Preto Reconfortante e protetora Misterioso sugere o silêncio e a morte Também pode ser considerado elegante e sofisticado A cor como aliada na hora de desenhar UX Preto Uma cor deprimente quando usada só Ligada à luto sofisticação formalidade medo raiva e poder Tem boa utilização como contraste para outras cores Cor Oposta Branco A cor como aliada na hora de desenhar UX Branco Pureza clareza paz e conforto Sugere liberdade embora muito pode ser considerado fria e solitária A cor como aliada na hora de desenhar UX Branco Ligado diretamente à pureza e a paz Ligado também a ausência de cor Cor oposta Preto A cor como aliada na hora de desenhar UX Cinza Sugere independência e autossuficiência Pode ser uma cor negativa sugerindo a evasão inconsequência separação falta de envolvimento e solidão A cor como aliada na hora de desenhar UX A cor como aliada na hora de desenhar UX A cor como aliada na hora de desenhar UX As 7 características aparentes das cores 1 Dimensão dependendo da cor utilizada você pode ter a sensação de um ambiente mais espaçoso ou um ambiente menor 2 Peso as cores podem tornar aparentemente objetos mais pesados ou mais leves 3 Iluminação basicamente absorver uma parte da luz que recebe e acaba refletindo a outra 4 Temperatura inconscientemente podem imprimir a ideia de quente e frio 5 Simbolismo representam um simbolismo totalmente subjetivo para você pode representar uma coisa que varia de acordo com suas vivências 6 Emoção as cores desempenham um papel direto no nosso psiquismo visto que a partir delas podemos ativar sentimento e expressõesdia cinzento 7 Recordação muito ligado à emoção a cor pode te remeter a um experiência vivida ou a um momento específico de sua vida As 7 características aparentes das cores As cores são classificadas como quentes e frias suaves e fortes pesadas e leves vamos entender agora o que cada uma delas gera em nós e como isso nos afeta O Poder da Dupla Marketing e Cor Com todas as caraterísticas descritas acima fica claro como a cor pode influenciar diretamente o que você sente Então pensando em atrair sua atenção e conduzir as suas ações para o mais próximo do desejável as empresas se esforçam em produzir Logos Layouts e divulgação de Conteúdo coloridos e que chamem a atenção Segundo um estudo chamado O Impacto das Cores no Marketing foi possível descobrir que até 90 dos julgamentos feitos precipitadamente ocorrem baseado apenas na cor O Poder da Dupla Marketing e Cor O blog Kissmetrics nos mostra que 93 dos consumidores prestam atenção primeiramente na aparência visual de um produto enquanto 6 na textura e por fim 1 no som e no cheiro Mais da metade dos consumidores desistem de comprar um produto porque ele não tem sua cor favorita O Poder da Dupla Marketing e Cor O Poder da Dupla Marketing e Cor Os anúncios em cores tem uma taxa de 62 a mais de visibilidade comparado com os anúncios em preto e branco As cores também possuem a habilidade de atrair o público para um determinado tipo de local Combinações de Cores AZUL E PRETO Transmitem confiança credibilidade e sensação de poder Combinações de Cores AZUL E BRANCO Conferem harmonia de espírito confiança idéia de doçura e generosidade Combinações de Cores VERMELHO E AZUL Causam a sensação de força espiritual requinte e delicadezasendo muito empregadas no apelo de vendas Combinações de Cores VERMELHO E AMARELO Criam sensações de insatisfação contraste acentuado de calor e impetuosidade Combinações de Cores AMARELO E VERDE Produz a sensação de eficácia Visualmente porém não é uma combinação agradávelcausando a impressão de que algo está faltando As representações das cores Agora que você entendeu melhor como as cores podem despertar sentimento e emoções em nós iremos entender como nós significamos as cores ou seja como damos significados a ela Existem três tipos de representações que as cores assumem universal coletiva e pessoal O caráter do simbolismo das cores vai além da universalidade e passa pelo conhecimento cosmológico psicológico e místico Ou seja as interpretações dadas as diferentes cores podem variar de pessoa a pessoa cultura a cultura Mas como foi mencionado podem variar e é isso que a Representação Universal mostra As representações das cores no mundo todo As representações das cores Cores por cultura As representações das cores As representações das cores As representações das cores Mobile App Design 14 esquemas de cores da moda Hoje o design de aplicativos para dispositivos móveis é vital para qualquer empresa se ele visa proporcionar uma excelente experiência ao usuário Segundo estudos os usuários gastam 89 do tempo de mídia de smartphones em aplicativos móveis Isso é demais Além disso mais de 50 das pessoas acordam e começam a usar seus telefones celulares imediatamente Esse conhecimento aumenta drasticamente a importância de um design de aplicativo móvel Mobile App Design 14 esquemas de cores da moda Uma parte essencial do design do aplicativo móvel é o esquema de cores Não se pode subestimar o poder da cor nos aplicativos O esquema de cores correto ajuda não apenas a definir o humor do seu aplicativo para que os usuários possam interpretálo da maneira que você deseja Também ajuda os usuários a interagir com certos elementos e a entender ações importantes dentro do aplicativo Mobile App Design 14 esquemas de cores da moda Ao tomar uma decisão sobre um esquema de cores e cores primárias os designers de aplicativos podem seguir duas maneiras paletas de cores tradicionais e personalizadas Os esquemas de cores tradicionais incluem análogos monocromáticos tríades complementares e compostos Mobile App Design 14 esquemas de cores da moda Ao tomar uma decisão sobre um esquema de cores e cores primárias os designers de aplicativos podem seguir duas maneiras paletas de cores tradicionais e personalizadas Os esquemas de cores tradicionais incluem análogos monocromáticos tríades complementares e compostos Porém esquemas de cores personalizados são um campo em constante evolução para experimentos O principal desafio é selecionar o esquema de cores que está na moda o suficiente e ao mesmo tempo suporta efetivamente a usabilidade de aplicativos móveis Mobile App Design 14 esquemas de cores da moda O que é comum em todo esquema de cores é a roda de cores Ao combinar as cores da roda de cores os designers criam um esquema de cores distinto e assim atingem um certo efeito Vejamos 14 esquemas de cores da moda que os designers usam com sucesso Mobile App Design 14 esquemas de cores da moda Mobile App Design Analogous Scheme O esquema de cores análogo é uma das paletas de cores tradicionais usadas pelos designers É uma combinação de cores relacionadas que estão localizadas próximas à roda de cores Geralmente uma cor é dominante enquanto outra enriquece o esquema No entanto todas as cores no esquema análogo também podem ser usadas igualmente em alguns modelos Cores análogas são fáceis de encontrar na natureza Eles são muito harmoniosos e é por isso que são tão agradáveis aos olhos no design de aplicativos para dispositivos móveis Mobile App Design 14 esquemas de cores da moda Mobile App Design 14 esquemas de cores da moda Esquema análogo na roda de cores Mobile App Design 14 esquemas de cores da moda Mobile App Design Monochromatic Scheme Os esquemas de cores monocromáticos usam uma cor base seus tons e tons como uma paleta estendida Tais esquemas criam um efeito reconfortante para os olhos especialmente se forem usados verdes ou azuis Para obter uma tonalidade os designers adicionam branco à cor base e para a criação de tons é necessário adicionar preto ou cinza Com um esquema monocromático os designers conseguem obter uma aparência simples porém coesa e elegante do aplicativo móvel Mobile App Design 14 esquemas de cores da moda Mobile App Design 14 esquemas de cores da moda Esquema monocromático na roda de cores Mobile App Design 14 esquemas de cores da moda Mobile App Design Triadic Scheme O esquema de cores triádico é baseado na combinação de três cores localizadas uniformemente na roda de cores O segredo do sucesso usando o esquema triádico é deixar uma cor ser dominante e usar outras para dar ênfase Assim a harmonia no esquema de cores triádico alcançada pelo uso equilibrado de todas as cores Mobile App Design 14 esquemas de cores da moda Mobile App Design 14 esquemas de cores da moda Esquema triádico na roda de cores Mobile App Design 14 esquemas de cores da moda Mobile App Design Complementary Colors Scheme Cores complementares estão situadas nos lados opostos da roda de cores Exemplos de cores complementares são vermelho e verde laranja e azul amarelo e roxo Eles se contrastam fortemente Portanto os designers usam cores complementares se quiserem destacar algum elemento na interface do aplicativo móvel Mobile App Design 14 esquemas de cores da moda Mobile App Design 14 esquemas de cores da moda Cores complementares na roda de cores Mobile App Design 14 esquemas de cores da moda Mobile App Design Compound color scheme O esquema de cores compostas também é conhecido como divisão complementar Ele usa cor base e duas cores análogas O esquema de cores composto é quase tão contrastante quanto o esquema complementar No entanto tem menos ênfase visual do que o esquema de cores complementar Welcome Mobile App Design 14 esquemas de cores da moda Esquema de cores compostas na roda de cores Mobile App Design 14 esquemas de cores da moda Mobile App Design Color ShadesTons de cor As sombras são criadas adicionando preto à cor base Um esquema de cores usando tons permite obter um design de aplicativo móvel atraente e integral Tons de cores são muito eficazes para acentuar determinadas áreas ou funcionalidades importantes da interface do usuário do aplicativo Eles também são úteis para a criação de conexões visuais Ive just finished my studies in Industrial Design Engineering Mobile App Design 14 esquemas de cores da moda Mobile App Design Custom Color Scheme Os esquemas de cores personalizados devem ser cuidadosamente elaborados usando as melhores práticas das combinações de roda de cores Designers experientes podem aproveitar combinações avançadas de cores no design de aplicativos para dispositivos móveis No entanto os iniciantes devem optar por esquemas de cores tradicionais antes de iniciar experimentos de cores complexos Os designs de aplicativos móveis personalizados bemsucedidos costumam usar cores básicas mínimas 1 ou 2 e tons porque permitem obter conexões visuais rápidas com a marca ROCKS AND SKY Mobile App Design 14 esquemas de cores da moda Mobile App Design Colorful illustrations Hoje os slides integrados com ilustrações coloridas são uma prática muito comum no design de aplicativos para dispositivos móveis Ilustrações coloridas especialmente eficazes estão em interfaces móveis mínimas Geralmente eles desempenham um poderoso efeito contrastante e assim ajudam a transmitir fortemente a mensagem da marca Ilustrações arrojadas e coloridas no design de aplicativos para dispositivos móveis também fornecem um pouco de vivacidade e diversão Eles cativam facilmente os usuários de aplicativos móveis Save Money Mobile App Design 14 esquemas de cores da moda Mobile App Design Colorful Gradients Uma das tendências interessantes no design de aplicativos para dispositivos móveis dos últimos anos são os gradientes complementares coloridos Os gradientes anteriores da mesma cor eram a norma mas hoje a norma são os gradientes complementares de alto contraste Transições de vermelho para laranja roxo para azul permitem obter belos efeitos visuais No entanto é importante usar esses gradientes de cores vivas com iconografia e imagens minimalistas 27 K FOLLOWERS Mobile App Design 14 esquemas de cores da moda Mobile App Design Black ShadesPreto e Tons A tendência do design mínimo de aplicativo móvel resultou inevitavelmente no uso mínimo de cores Assim como um vestidinho preto se tornou um símbolo de elegância na moda a cor preta nas interfaces de usuário móveis agora desempenha um papel sofisticado Embora a cor preta sempre se destaque em todo o design juntamente com brancos e cinzas ela pode criar um esquema altamente contrastante mas não brutal PORTOFINO Mobile App Design 14 esquemas de cores da moda Mobile App Design Pastel colors Cores suaves e pastel no design de aplicativos para dispositivos móveis são outra grande tendência para os designers assistirem De fato eles ajudam a alcançar o equilíbrio visual na interface do usuário móvel De uma maneira distinta as cores pastel proporcionam uma experiência harmoniosa aos usuários móveis CLOUDY 100 HUMID 22C NEW GIRL Mobile App Design 14 esquemas de cores da moda Mobile App Design Bright Icons Hoje os designers usam iconografia clara e arrojada para diferenciar ações e elementos nas interfaces de usuário móveis Ícones de cores brilhantes causam um grande impacto visual na interface do usuário móvel Eles também permitem que os usuários móveis entendam facilmente o fluxo de aplicativos móveis sua mensagem e o cenário do usuário NEW TASK Estimated time 1120 Task start 1825 Reminder 15 min before Mobile App Design 14 esquemas de cores da moda Mobile App Design Subtle Shadows O uso de sombras sutis em fundo branco ou sem som é uma das tendências efetivas nos esquemas de cores móveis modernos Geralmente sombras sutis porém coloridas ajudam os designers a criar efeitos visuais interessantes e bonitos para os usuários Robert Bimmer Dermatologist Rosacea Skin Diseases Skin Cancer Treatment Get Rid Of Acne Forever Mobile App Design 14 esquemas de cores da moda Mobile App Design HighContrast Colors As cores de alto contraste no design de aplicativos para dispositivos móveis apareceram após a introdução do iPhone 7 da Apple Azuis turquesas rosas vermelhos e verdes brilhantes têm um efeito significativo nas modernas interfaces móveis de alto contraste Além disso os aplicativos móveis com cores de alto contraste ajudam a fornecer uma experiência do usuário de claro impacto visual Calls Dealer 099 Cupcake Factory 199 Camera man FREE myMusic 099 Super wallpapers FREE Explore Featured Top paid Download Design for the Dark Theme Tema Escuro Design for the Dark Theme Tema Escuro Na I O 2019 o Google anunciou que o Android agora suportará o Tema Escuro no nível do SO Ao mesmo tempo estamos vendo mais aplicativos do Google sendo lançados com suporte escuro à interface do usuário Em breve isso se tornará um padrão comum e outros aplicativos seguirão esse caminho Veremos como adaptar o design para o Dark Theme em um de nossos aplicativos Shutter Points Design for the Dark Theme Tema Escuro E se você encontrar um lugar incrível que você sabe que seria perfeito como pano de fundo para o seu próximo projeto de fotografia de animais ou se vir um grande ângulo para o pôrdosol entre edifícios quando não tiver o equipamento certo ou as condições não forem perfeitas Você faz uma anotação com Shutter Points Como Shutter Points funciona A interface do usuário do Shutter Points apresenta uma coleção de anotações de fotos do usuário como uma lista ou uma exibição de mapa Com uma ação rápida os usuários podem adicionar novas notas e atribuirlhes categorias e tags sugeridas automaticamente pelo aplicativo Qualquer nota pode ser encontrada no local procurando por qualquer uma das tags atribuídas Como Shutter Points funciona Add title Architecture Industrial Interior Bad Camera Traffic jam Hong Kong Queens Road Central 14 Sep at 1103 PM Sky view Choose your camera equipment Lens Multipurpose Wide angle Alan Fisher 68 works Como Shutter Points funciona A interface do usuário do Shutter Points apresenta uma coleção de anotações de fotos do usuário como uma lista ou uma exibição de mapa Com uma ação rápida os usuários podem adicionar novas notas e atribuirlhes categorias e tags sugeridas automaticamente pelo aplicativo Qualquer nota pode ser encontrada no local procurando por qualquer uma das tags atribuídas Otimização de cores A paleta de cores A paleta de cores A interface do usuário do Shutter Points é principalmente monocromática Isso permite que o conteúdo fotográfico se destaque e tire a maior parte da cena A cor Primária é usada na navegação principal e cinco cores secundárias são usadas em tags para conectar as anotações da foto a categorias específicas Cores primária e secundária aplicadas à interface do usuário com tema claro no Shutter Points Cores primária e secundária aplicadas à interface do usuário com tema claro no Shutter Points Otimização de cores A paleta de cores Ao aplicar o Tema escuro as cores mais claras e desaturadas são preferidas às cores vibrantes Tons mais claros garantem que seus elementos ainda estejam acessíveis e tenham uma taxa de contraste adequada contra o fundo escuro Otimização de cores A paleta de cores Conforme sugerido pelas diretrizes de Design de materiais uma boa regra geral é permanecer em torno do valor 200 de suas paletas de tons ao usar uma interface do usuário de tema escuro Uma variante mais clara das cores da Marca é escolhida para o Tema Escuro