×
Namespaces

Variants
Actions

Mobile Web Design Pattern: Grid (Português)

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata

Artigo
Tradução:
Por maiconherverton
Última alteração feita por hamishwillee em 08 Dec 2011

Este padrão de projeto é parte de Mobile Web Design Patterns.

Contents

Descrição

Uma série de itens da lista dispostas em uma ou mais linhas horizontais e/ou colunas verticais para formar uma grade 'grid'.

19-Grid.png


Figura: Este é um grid em uma linha no site BBC Proms poderia facilmente ter sido expandida para criar algo mais tradicional como o padrão listas.

Usar quando

  • Use como uma alternativa para uma lista vertical contendo um ícone e um texto. É mais adequada se o texto é curto e não e não se espera que ele seja quebrado.


Fundamentação

Grids tem várias vantagens sobre outros formatos:

  • Muitas vezes, ocupam menos espaço do que as listas verticais puramente vertical.
  • Quando bem implementadas, podem fornecer um agrupamento visual mais interessante.

Dicas de design

  • Certifique-se de testar o seu layout grid em dispositivos com tamanhos de telas diferentes de dpi, revendo o tamanho e facilidade de seleção em cada item do grid. Não se esqueça de ajustar a lista e o espaço entre os itens, se necessário, para facilitar a seleção.
  • Lembre-se que a série S40 e S60 os navegadores tem modelos de interação diferentes. Navegando em um grid pode demorar um pouco mais do que navegar uma lista, especialmente se o item que deseja selecionar exige que você passe por muitos outros itens do grid.
This page was last modified on 8 December 2011, at 04:51.
36 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×