{"id":118284,"date":"2023-02-01T15:00:00","date_gmt":"2023-02-01T18:00:00","guid":{"rendered":"https:\/\/fluency.io\/br\/blog\/?p=14984"},"modified":"2023-07-26T16:18:03","modified_gmt":"2023-07-26T19:18:03","slug":"60-30-10","status":"publish","type":"post","link":"https:\/\/homolog.fluency.io\/br\/blog\/60-30-10\/","title":{"rendered":"Transforme sua interface de usu\u00e1rio com a regra 60-30-10"},"content":{"rendered":"\n

A interface do usu\u00e1rio \u00e9 a primeira coisa que os usu\u00e1rios veem ao usar um aplicativo ou site, e \u00e9 por isso que \u00e9 t\u00e3o importante que ela seja atraente e f\u00e1cil de usar. O design da interface do usu\u00e1rio<\/a> \u00e9 um aspecto crucial para garantir que os usu\u00e1rios tenham uma boa experi\u00eancia ao usar um produto digital. \u00c9 importante que os designers de UI considerem v\u00e1rios fatores, incluindo a cor, a tipografia, a navega\u00e7\u00e3o e a disposi\u00e7\u00e3o dos elementos, ao projetar a interface do usu\u00e1rio. Uma das melhores maneiras de garantir que a interface do usu\u00e1rio seja atraente e eficiente \u00e9 aplicar a regra dos 60-30-10. <\/p>\n\n\n\n

Esta regra \u00e9 uma dica importante para designers de UI que desejam criar equil\u00edbrio e harmonia em suas interfaces. Ela sugere que 60% da cor da interface do usu\u00e1rio deva ser uma cor dominante, 30% deva ser uma cor secund\u00e1ria e 10% deve ser uma cor terci\u00e1ria. Al\u00e9m disso, a regra dos 60-30-10 tamb\u00e9m pode ser aplicada a outros aspectos do design da interface do usu\u00e1rio, como a disposi\u00e7\u00e3o dos elementos e a tipografia.<\/p>\n\n\n\n

Neste post, vamos explorar como aplicar a regra dos 60-30-10 na interface do usu\u00e1rio e como ela pode ajudar a garantir que sua interface seja atraente e f\u00e1cil de usar. Al\u00e9m disso, vamos dar exemplos de como a regra pode ser aplicada em diferentes tipos de interfaces do usu\u00e1rio e como ela pode ser adaptada para atender \u00e0s suas necessidades espec\u00edficas.<\/p>\n\n\n\n

O que \u00e9 a regra dos 60-30-10 e como ela pode ser aplicada na interface do usu\u00e1rio<\/strong><\/h2>\n\n\n\n

A regra dos 60-30-10 \u00e9 uma dica importante para designers de UI que desejam criar equil\u00edbrio e harmonia em suas interfaces. Ela sugere que 60% da cor da interface do usu\u00e1rio deva ser uma cor dominante, 30% deva ser uma cor secund\u00e1ria e 10% deve ser uma cor terci\u00e1ria. A cor dominante<\/strong> \u00e9 a cor principal usada na interface do usu\u00e1rio e \u00e9 a cor que domina a paisagem visual. A cor secund\u00e1ria<\/strong> \u00e9 uma cor complementar \u00e0 cor dominante e \u00e9 usada para criar contraste. A cor terci\u00e1ria <\/strong>\u00e9 uma cor adicional usada para adicionar interesse visual.<\/p>\n\n\n\n

A regra dos 60-30-10 \u00e9 uma forma simples e eficiente de garantir que a interface do usu\u00e1rio seja atraente e equilibrada. Al\u00e9m da cor, a regra dos 60-30-10 tamb\u00e9m pode ser aplicada \u00e0 disposi\u00e7\u00e3o dos elementos<\/a> na interface do usu\u00e1rio e \u00e0 tipografia. A ideia \u00e9 criar equil\u00edbrio visual e evitar que uma \u00fanica cor ou elemento domine a interface do usu\u00e1rio.<\/p>\n\n\n\n

Al\u00e9m disso, a regra dos 60-30-10 pode ser aplicada a diferentes tipos de interfaces do usu\u00e1rio, incluindo aplicativos m\u00f3veis, sites e aplicativos de desktop. \u00c9 importante que os designers de UI considerem as suas necessidades espec\u00edficas ao aplicar a regra dos 60-30-10. Por exemplo, se voc\u00ea estiver projetando uma interface do usu\u00e1rio para um aplicativo m\u00e9dico, poder\u00e1 querer usar cores mais s\u00f3brias e tranquilas para transmitir seriedade e confian\u00e7a.<\/p>\n\n\n\n

Em resumo, a regra dos 60-30-10 \u00e9 uma dica importante para designers de UI que desejam criar interfaces de usu\u00e1rio atraentes e equilibradas. A regra sugere que 60% da cor da interface do usu\u00e1rio deva ser uma cor dominante, 30% deve ser uma cor secund\u00e1ria e 10% deve ser uma cor terci\u00e1ria. Al\u00e9m disso, a regra dos 60-30-10 pode ser aplicada \u00e0 disposi\u00e7\u00e3o dos elementos e \u00e0 tipografia na interface do usu\u00e1rio e pode ser adaptada para atender \u00e0s suas necessidades espec\u00edficas.<\/p>\n\n\n\n

Como aplicar a regra dos 60-30-10 \u00e0 cor na interface do usu\u00e1rio<\/strong><\/h2>\n\n\n\n

A cor \u00e9 um aspecto fundamental da interface do usu\u00e1rio e pode ter um impacto significativo na forma como os usu\u00e1rios experimentam a interface<\/a>. A regra dos 60-30-10 fornece uma diretriz para escolher e aplicar as cores na interface do usu\u00e1rio de maneira estrat\u00e9gica e equilibrada.<\/p>\n\n\n\n

Para aplicar a regra dos 60-30-10 \u00e0 cor na interface do usu\u00e1rio, voc\u00ea deve primeiro escolher uma cor dominante. Essa cor deve ser a cor principal usada na interface do usu\u00e1rio e deve ser usada para criar a paisagem visual. Em seguida, voc\u00ea deve escolher uma cor secund\u00e1ria. Essa cor deve ser complementar \u00e0 cor dominante e deve ser usada para criar contraste. Por fim, voc\u00ea deve escolher uma cor terci\u00e1ria. Essa cor adicional deve ser usada para adicionar interesse visual.<\/p>\n\n\n\n

Al\u00e9m de escolher as cores certas, \u00e9 importante aplic\u00e1-las na interface do usu\u00e1rio de maneira estrat\u00e9gica. Por exemplo, voc\u00ea pode usar a cor dominante para os fundos e a cor secund\u00e1ria para os textos. Voc\u00ea tamb\u00e9m pode usar a cor terci\u00e1ria para elementos de destaque ou bot\u00f5es. \u00c9 importante ter em mente que a regra dos 60-30-10 n\u00e3o \u00e9 uma regra r\u00edgida e pode ser adaptada para atender \u00e0s suas necessidades espec\u00edficas.<\/p>\n\n\n\n

Em resumo, a cor \u00e9 um aspecto fundamental da interface do usu\u00e1rio e a regra dos 60-30-10 fornece uma diretriz para escolher e aplicar as cores de maneira estrat\u00e9gica e equilibrada. Para aplic\u00e1-la na interface do usu\u00e1rio, voc\u00ea deve escolher uma cor dominante, uma cor secund\u00e1ria e uma cor terci\u00e1ria, e aplic\u00e1-las de maneira estrat\u00e9gica na interface do usu\u00e1rio. A regra pode ser adaptada para atender \u00e0s suas necessidades espec\u00edficas.<\/p>\n\n\n\n

Como a regra dos 60-30-10 pode ser aplicada ao design de cores da interface do usu\u00e1rio<\/strong><\/h2>\n\n\n\n

O design de cores \u00e9 outro aspecto crucial para determinar a apar\u00eancia e a usabilidade de uma interface<\/a>. A regra dos 60-30-10 pode ser usada para escolher e aplicar as cores da interface do usu\u00e1rio de maneira estrat\u00e9gica e equilibrada.<\/p>\n\n\n\n

Para aplicar a regra dos 60-30-10 ao design de cores da interface do usu\u00e1rio, voc\u00ea deve escolher tr\u00eas cores principais. A cor dominante deve ser usada para 60% da interface, a cor secund\u00e1ria para 30% e a cor terci\u00e1ria para 10%. A cor dominante deve ser usada para elementos importantes, como o fundo ou a barra de navega\u00e7\u00e3o. A cor secund\u00e1ria deve ser usada para complementar a cor dominante e deve ser usada em elementos como a barra lateral ou o conte\u00fado. A cor terci\u00e1ria deve ser usada como um complemento adicional e para adicionar interesse visual \u00e0 interface.<\/p>\n\n\n\n

Al\u00e9m de escolher as cores corretas, \u00e9 importante aplicar as cores de maneira estrat\u00e9gica. Por exemplo, voc\u00ea pode usar a cor dominante para o fundo e a cor secund\u00e1ria para a barra de navega\u00e7\u00e3o. Voc\u00ea tamb\u00e9m pode usar a cor secund\u00e1ria para o conte\u00fado e a cor terci\u00e1ria para o t\u00edtulo. \u00c9 importante ter em mente que a regra dos 60-30-10 n\u00e3o \u00e9 uma regra r\u00edgida e pode ser adaptada para atender \u00e0s suas necessidades espec\u00edficas.<\/p>\n\n\n\n

Em resumo, o design de cores \u00e9 outro aspecto crucial para determinar a apar\u00eancia e a usabilidade de uma interface. A regra dos 60-30-10 pode ser usada para escolher e aplicar as cores da interface do usu\u00e1rio de maneira estrat\u00e9gica e equilibrada. Para aplicar a regra dos 60-30-10 ao design de cores da interface do usu\u00e1rio, voc\u00ea deve escolher tr\u00eas cores principais, aplicar as cores de maneira estrat\u00e9gica e adaptar a regra para atender \u00e0s suas necessidades espec\u00edficas.<\/p>\n\n\n\n

Exemplos de como a regra dos 60-30-10 pode ser aplicada em interfaces do usu\u00e1rio reais<\/strong><\/h2>\n\n\n\n

A regra dos 60-30-10 pode ser aplicada a v\u00e1rias interfaces do usu\u00e1rio reais de maneiras diferentes e criativas. Aqui est\u00e3o alguns exemplos de como essa regra pode ser aplicada:<\/p>\n\n\n\n