Páginas

segunda-feira, 4 de fevereiro de 2013

Layouts para Aplicativos Mobile



Hoje sem dúvida o acesso a internet através de dispositivos móveis, tas como smartphones e tablets, estão em alta. O baixo custo de alguns destes dispositivos possibilita que um público crescente acesse a internet. Naturalmente as empresas devem repensar a apresentação de seus sites para esse meio de acesso. Isso se dá por que a usabilidade de um dispositivo móvel é bem diferente de um computador tradicional.


Em um computador tradicional o espaço na tela fornece liberdade de layout e o poder de processamento possibilita o uso de plugins tais como o flash e o java para maior interatividade. Porém isso não ocorre em um dispositivo móvel, onde além do pequeno espaço de tela, possui recursos limitados. Enquanto num PC o mouse fornece precisão no click, telas touch dos dispositivos móveis precisam de muito mais espaço para os clicks, levando em conta o tamanho da superfície do dedo do usuário.

Assim, ao desenharmos telas das aplicações para mobile, é bom seguirmos alguns padrões de layout e usabilidade. Existem muitos padrões, mas nesse artigo só vou citar 2 deles: Galeria e Menu de Lista.

Padrão Galeria

No padrão Galeria temos os links dispostos em forma de icones grandes. São facilmente visualizados em uma tela pequena, também fornecem precisão no toque do usuário. 

Como deve ser:


Na parte superior, é comum um banner com a marca da empresa e algumas operações globais, tais como a busca.

Exemplos:






Padrão Menu de Lista

Nesse padrão os itens são apresentados em forma de lista. Ele é melhor quando forem muitos ítens. Muitos itens no padrão Galeria talvez exija uma grande quantidade de downloads de imagens dos itens.

Como deve ser:


Ao clicar em um item pode-se exibir um subitem com nova listagem.

Exemplos:









Pode-se perceber claramente que esses padrões são pensados para a facilidade de uso nos dispositivos móveis, onde a facilidade, praticidade e performance são prioridade.

Atenciosamente,
Gustavo Marques

Nenhum comentário:

Postar um comentário

Veja também

Related Posts Plugin for WordPress, Blogger...