Divisores visuais em design para smartphones
Nesse breve post você verá alternativas de como utilizar divisores visuais. Ou seja, usando linhas (ou espaçamentos) para separar visualmente elementos no seu layout.
As referências aqui serão mais focadas em design para smartphones, pois nesse tipo de projeto cada pixel importa e quanto mais elementos, mais informação a ser interpretada.
Fazer um aplicativo para smartphone pode parecer fácil, mas isso só ocorre até o momento em que você se depara com determinada quantidade de informações a serem trabalhadas em um espaço extremamente limitado.
Trata-se de um dispositivo que, por sua natureza, oferece o maior volume de distrações para os usuários, seja através de notificações vindas de outros apps, seja através das distrações do ambiente físico onde o usuário está acessando seu aplicativo ou site. Por isso, cada detalhe importa. Muito!
Divisores tradicionais
Você pode usar divisores horizontais ou verticais com linhas. Normalmente, essa é a primeira ideia que nos vem em mente. Tanto em apps Android como em designs feitos para iOS utilizam esse recurso em larga escala. Não é de a toa que pensamos isso logo como 1ª opção a ser testada.
Essas linhas são ótimos recursos para criar ritmo e deixar clara a hierarquia entre os elementos.
Acima podemos ver um dos exemplos clássicos de divisão por linha. Nenhuma novidade, certo? Isso é familiar, pois deve ser uns 90% de todos os layouts dos nossos aplicativos favoritos. Desde Facebook e Whatsapp até aqueles menos populares.
No exemplo a seguir já temos outro modelo de divisão por linhas onde é possível observar agrupamentos de elementos que são divididos por linhas. Um exemplo clássico usado em ordenação alfabética de elementos. Exemplos? Abra sua lista de contatos no celular. Bem provável que ela faça algo semelhante :)
Alternativas para fugir dos divisores padrões
Os divisores tradicionais podem funcionar muito bem em uma tela de 15" (ou superior) de um desktop, mas eles têm uma grande desvantagem para aplicativos de celular: ocupam um espaço valioso de uma espaço limitado.
O abuso de divisores tradicionais pode deixar seu layout pesado e confuso. Ou seja, funcionando de forma oposta a proposta de uso de um divisor, que é organizar e hierarquizar informações.
Evite usar linhas e experimente os recursos de alinhamentos e espaçamentos para hierarquizar e separar informações. Menos linhas e divisores deixarão o seu layout mais limpo, moderno e funcional.
Espaço em branco
São áreas do seu layout onde não têm elementos. Espaçamentos generosos associados a um bom alinhamento podem deixar tudo bem organizado e limpo. Todo layout precisa respirar e o seu não é diferente.
Divisão por contrastes de cor
Contraste de cores é um dos mais poderosos recursos de design se usado da forma correta e respeitando conceitos aprendidos em disciplinas relacionada ao estudo das cores, círculo cromático e por aí vai.
Basicamente, tudo o que você precisa fazer é encontrar 2 cores que tenham bom contraste entre si e trabalhá-las em seu layout. Lembre-se de resgatar em sua memória conceitos de cores análogas, complementares, psicologia das cores, etc. Isso vai ajudar muito!
Divisão com sombras e efeitos de elevação
Sobras e elevações são capazes de criar sensação de profundidade no seu design e, por consequência, acabam funcionando também como divisores no layout. No exemplo de divisão de contraste de cores (acima) você pode observar que o designer utilizou também recursos de elevação e sombras para reforçar as divisões.
Eu, particularmente, não gosto muito deste recurso de sombras para as divisões e tenho visto sua utilização com pouca frequência. Casos raros me causam boa impressão, mas nesses raros casos, são layouts para se aplaudir de pé.
O Material Design (padrão visual e comportamental de desenvolvimento de aplicativos para Android) utiliza bastante o recurso de elevação e sombras.
Divisão com grid de imagens
Se seu layout é baseado em conteúdo de imagens como um banco de imagens, ou algo semelhante aos aplicativos Pinterest, Snapchat e outros, não se preocupe em criar divisores, boxes, etc. Suas imagens já são elementos bons o suficiente para que você faça essa hierarquia visual de forma simples, rápida e sem usar elementos de apoio. Um simples espaçamento entre as imagens, mesmo que pequeno, já pode ser tudo o que você precisava para deixar tudo organizado.
Conclusão
Existem vários recursos para deixar seu layout organizado. Estudar mais sobre princípios básicos do design, composições, grids, cores, etc ajudarão nessa tomada de decisões.
Embora eu tenha separado os divisores em partes diferentes, eles podem ser combinados entre si. Nada impede de usar divisão por contraste de cores associados ao grid de imagens ou mesmo elevação e sombras.
Quanto mais elementos tem o seu design, seu usuário tem mais informação para interpretar.
A dica aqui é SIMPLIFIQUE! Se você não precisa de determinado elemento, elimine-o! Se você consegue deixar seu layout compreensível sem usar linhas divisórias, delete-as imediatamente! Quanto mais objetivo e limpo for o seu design, mas sucesso pode ser esperado dele.
Esse post foi inspirado na seguinte publicação: http://babich.biz/visual-dividers-in-mobile-ui-design/
