Você precisa de um sistema de forma

Dave Chiu Blocked Desbloquear Seguir Seguindo 28 de novembro de 2018

Quando os designers expressam a marca e a hierarquia na interface do usuário, frequentemente recorrem a sistemas familiares de cores, tipografia e imagens. Mas há outro elemento negligenciado na caixa de ferramentas do designer: a forma.

De botões a cartões, campos de texto, menus e botões de ação flutuante (FABs), a forma é um aspecto inegável de todas as interfaces. E agora, a mais nova seção das diretrizes do Material Design é inteiramente dedicada às melhores práticas para usar a forma na interface do usuário . O que se segue é um pouco de inspiração para como você pode usar a forma para melhorar sua marca, atenção direta e suporte a interações.

Forma reforça sua marca

Uma das maneiras mais holísticas de abordar a forma na interface do usuário é considerar sua capacidade de expressar a marca quando aplicada de forma ponderada em um aplicativo. Uma marca com uma sensação mais orgânica ou amigável pode optar por formas arredondadas, enquanto uma marca com um estilo geométrico ou um desejo de expressar precisão pode optar por uma forma mais angular. Por exemplo, o aplicativo Shrine usa cortes nítidos em toda a interface do usuário para refletir a forma angular do logotipo.

Hierarquia de unidades de forma

Fortes diferenças na forma podem ser usadas expressamente para direcionar a atenção. Por exemplo, se uma interface do usuário contiver formas arredondadas, a introdução de um botão em forma de diamante pode chamar a atenção para esse componente. A interface clássica do Material Design de um FAB redondo na frente de cartões retangulares é outro exemplo de como a forma pode ser usada para dar ênfase. Um uso mais harmonioso ou sutil da forma dentro da hierarquia visual pode comunicar as relações entre os elementos, como cartões em formato similar que aparecem como pares, ou formas que ajudam a distinguir superfícies separadas – uma abordagem usada pelo componente de fundo .

Forma aponta para interação

A forma também pode ser usada mais taticamente para indicar estados específicos ou oportunidades de interação. Alterar o canto de um cartão para indicar um estado de seleção pode complementar técnicas como usar ícones, alterar a opacidade do conteúdo do cartão ou alterar o tamanho do cartão. Mudanças na forma também podem indicar sutilmente a oportunidade de interação com uma superfície. Por exemplo, cantos arredondados podem implicar que uma folha inferior pode ser puxada para cima, enquanto cantos quadrados podem implicar que todo o conteúdo é exibido atualmente. No entanto, usar esse tipo de linguagem visual para indicar oportunidades de interação não está bem estabelecido ou sistematizado, portanto evite confiar apenas na forma para comunicar o significado.

Comece a construir seu sistema de formas

  1. Considere os atributos da sua marca. Que forma central incorpora a vibração e a personalidade da sua marca? Use esse ponto de partida para desenvolver uma família complementar de formas. O seu núcleo é arredondado? Tente emparelhar as placas de cantos arredondados com uma FAB estendida em formato de pílula que chama a atenção. Mais em ângulos? Considere cortar cantos nos botões e nas folhas inferiores.
  2. Pense na hierarquia da sua interface do usuário e como a forma pode ser implantada para chamar a atenção para as partes apropriadas da tela.
  3. Use a forma consistente e com propósito em todo o seu aplicativo, para que suas escolhas de formas desenvolvam significado para seus usuários. O uso inconsistente da forma pode ser confuso e o uso excessivo pode diluir a expressão da sua marca. Além disso, certifique-se de que a forma puramente ornamental não pareça funcional ou interativa, e que a forma usada para comunicar o significado é óbvia e não ambígua.
  4. Teste também sua história de forma com os usuários. Por si só, a forma pode ser ambígua e pode ser melhor combinada com um ícone ou texto para comunicar o significado explícito. Por fim, o teste do usuário é a melhor maneira de determinar se o uso pretendido da forma funciona e é entendido da maneira que você pretende.

Ajude-nos a projetar o futuro

Ao contrário dos sistemas existentes, como tipo e cor, a forma não tem regras bem definidas para o aplicativo na interface do usuário. Use essa oportunidade para experimentar a forma sozinha ou em combinação com padrões de interface do usuário mais estabelecidos para encontrar a maneira mais eficaz de se comunicar com seus usuários.

Compartilhe seus experimentos de forma com a gente @materialdesign .