O melhor pedaço da Maçã.
MM News

Receba os nossos principais artigos diariamente, por email.

Design de interface para iOS: Blueprint

Há pouco tempo comecei um trabalho bem legal com a Gaudium, e eles me recomendaram um app para ajudar na primeira fase do projeto, o wireframe. Essa dica foi tão legal que penso ser totalmente válida a esta série de posts sobre design!

Publicidade

Nota: se você não acompanhou os outros posts, “No Papel” é mais um que trata dessa fase inicial do desenvolvimento de um app. Está até um pouco desatualizado pela data de publicação, então mais pra frente eu devo dar sequência com novas dicas no assunto.

Segundo a Wikipédia — e com algumas modificações que achei pertinente —, o wireframe é um guia visual básico usado em design de interface para sugerir a estrutura de um projeto — app, site, etc. — e o comportamento entre suas telas, funcionalidades e elementos visuais. São concluídos antes que o trabalho artístico seja iniciado, pois o objetivo é entender o que os envolvidos estão esperando.

Entre dezenas de aplicativos com esse objetivo de montar telas com os elementos padrão do iOS, o Blueprint se destacou por algumas funcionalidades bem interessantes. A principal delas é a possibilidade de demonstrar o wireframe “funcionando”, atribuindo ações para botões, por exemplo. Mas vamos por partes…

Montando uma tela

O aplicativo tem uma galeria de botões, menus, ícones, tabelas e toda uma coleção dos elementos mais comuns do próprio Interface Builder. É só arrastar esses objetos para a tela (na moldura de um iPhone ou um iPad), personalizar com texto, ícone, cor, estado (ativo ou inativo, por exemplo) e outras opções básicas para ilustrar sua ideia da melhor maneira.

É claro que há limitações, pois nem todos os elementos de GUI (graphical user interface) estão lá, além de a personalização ficar restrita aos padrões do sistema móvel da Apple. No entanto, como a intenção é fazer uma representação básica, ainda não é o momento de se apegar aos detalhes.

Ligando várias telas

Inserindo um menu, por exemplo, você pode atribuir uma ação a cada botão para que no momento da demonstração esses links funcionem com o toque.

Nessa visão geral, mostrada acima, dá pra ter uma boa ideia da navegação entre as telas, montar a hierarquia, adicionar comentários e, é claro, facilitar a vida do designer, do desenvolvedor e também do cliente.

Demonstração do app

Chegou a parte interessante. A qualquer momento você pode dar um “play” no projeto e simular sua interface no iPad. Mesmo se estiver fazendo um app projetado para o iPhone, ele adiciona uma moldura em torno das telas. Essa funcionalidade serve não só para você ver e testar a navegação do projeto, como também é uma ótima maneira de apresentar uma proposta a um cliente e corrigir uma coisa ou outra de imediato.

Pra completar, os projetos criados podem ser exportados para PDF, PNG ou no próprio formato do aplicativo. Utilizando este último, outra pessoa (colega ou mesmo o cliente) pode visualizar a demonstração em seu iPad pelo Blueprint Viewer, um app gratuito para que não seja preciso pagar o preço do aplicativo completo novamente.

Publicidade

·   ·   ·

O Blueprint custa US$20 na App Store [8,4MB; requer o iOS 4.2 ou superior de iPads], ainda possui uma versão “Lite” gratuita e o visualizador (Viewer) que roda também em iPhones/iPods touch e não custa nada [4,9MB; requer o iOS 4.1 ou superior]. O preço é um pouquinho acima do padrão da App Store, mas vale a pena o investimento para quem quer trabalhar com o iOS.

Espero que seja tão útil para vocês como tem sido para mim! E logo mais volto com outros posts dessa série, porque tem mais apps de desenvolvimento na fila de indicações… 😉

Ver comentários do post

Carregando os comentários…
Artigo Anterior
iPhone 4S na China Mobile

↪ Apple afirma estar trabalhando em problema com chips da China Mobile no iPhone 4S

Próximo Artigo
Wolfram|Alpha na Siri do iPhone 4S

Uma em cada quatro buscas realizadas no Wolfram|Alpha hoje em dia é oriunda da Siri

Posts Relacionados