Não desordenar a tela com opções de navegação

Nas opções de navegação na maioria dos sites tradicionais, links para todas as páginas principais estão sempre visíveis. Um site típico inclui uma linha de links na parte superior ou no lado superior esquerdo ou direito da tela com links comuns às secções principais, incluindo a página inicial, a página About Us, e outras seções importantes.

Manter links de navegação no topo de cada página torna fácil encontrar, mas enche o espaço de design. Adicione o seu logotipo e outros elementos de marca, links sub-navegação, e, possivelmente, publicidade e - yuck - o que é uma bagunça.

Não há sites de jornais maravilha são sempre descritos como # 147-ocupado # 148- ea maioria dos modelos de blog são considerados chato. Incluindo informações demais em todas as páginas antes mesmo de começar a adicionar o conteúdo torna difícil manter as coisas interessantes.

Agora, considere a abordagem que a maioria dos designers têm levado a criação de aplicativos do iPad. Na concepção de sites para o iPad e iPhone, você pode se beneficiar da nova geração de designers de aplicativos que estão lá fora.

Uma grande variedade de aplicativos do iPad, incluindo revistas populares Wired e Sports Illustrated, exibir duas áreas consistentes onde os designers de aplicativos estão colocando elementos de navegação:

  • No canto superior esquerdo ou direito da página: Ao contrário de páginas da web, os links de navegação na maioria dos aplicativos são visíveis apenas quando você toca em um ícone, como o ícone Home no canto superior esquerdo, como mostrado na revista abelha.

    image0.jpg
  • Na parte inferior da página: Mais uma vez, um conjunto opcional de links de navegação aparece somente quando você toca na parte inferior da tela, como mostrado nesta figura.

    image1.jpg

Esta nova prática de design pode ser uma nova forma útil para criar páginas web, bem como apps. O projeto mostrado nas figuras foi originalmente criado como um aplicativo para o iPad. Foi criado com novas ferramentas de publicação digital da Adobe, que são ideais para a criação de revistas interativas e e-books melhorados.

Mas depois que o projeto foi concluído com ferramentas de publicação digital da Adobe, que criam automaticamente os links de navegação exibidos, não havia razão para não fazer a mesma coisa em uma versão da página web.

Assim, o mesmo projeto foi então recriado em HTML e CSS e testou-o no navegador Safari. Voil # 224-! Esta abordagem para a navegação funciona lindamente na web móvel, bem como, e deixa muito mais espaço para a criação de excelente aparência desenhos que enchem a tela do iPad.

Mesmo na versão da página web do site, no menu drop-down mostrado aparece somente quando você toca no ícone Início. O menu desaparece assim que você toca em um link da lista.

menu