Imagens, ícones e botões de ferramentas em aplicações móveis

Já escrevemos anteriormente sobre a integração de APIs e aplicações móveis para criar uma experiência de utilizador rica e envolvente. Desde a publicação do nosso artigo anterior, continuamos a melhorar a aplicação de demonstração GPS, adicionando suporte a mais APIs para obter informações meteorológicas atualizadas e eventos agendados nas proximidades.

Um dos desafios de oferecer tanta funcionalidade num ecrã móvel pequeno é garantir que os utilizadores tenham acesso a um sistema de navegação claro, consistente e fácil de usar em todas as secções da aplicação.

A utilização de imagens de ícones como botões nas aplicações móveis pode criar um menu de navegação elegante e sofisticado, especialmente se os ícones forem escolhidos com base em convenções reconhecíveis e amplamente aceites. Por exemplo, uma seta apontando para a esquerda geralmente indica "voltar", e um ícone de disquete frequentemente representa a função de "guardar", mesmo que o destino final não seja um novo ficheiro ou um disco.

Neste artigo, vamos explicar como utilizar ícones de imagem para criar menus de navegação compatíveis com diferentes plataformas, com botões de ferramenta, em aplicações móveis, utilizando o MobileTogether.

As capturas de ecrã abaixo mostram a aplicação "Where Am I" a funcionar em dispositivos Apple iOS e Android.

Em cada visualização, o utilizador acabou de obter as coordenadas GPS atuais e é apresentado com a mesma série de opções, representadas por botões de ferramenta:

• Visualize uma fotografia de satélite da localização, com base no nível de zoom selecionado
• Envie uma mensagem de texto com a localização atual
• Abrir a aplicação de mapas predefinida, mostrando a localização atual
• Realize uma pesquisa geral na internet com base na localização atual
• Obtenha as condições meteorológicas atuais no local indicado
• Veja uma lista de eventos próximos que estão para acontecer
• Pesquise a área circundante utilizando a API de pesquisa da MapQuest

Os botões das ferramentas são definidos e configurados na aplicação utilizando o MobileTogether Designer, a ferramenta de desenvolvimento de aplicações visual que permite aos programadores visualizar o layout da aplicação e testar a lógica de execução complexa em qualquer momento durante o desenvolvimento.

O nosso menu de navegação é estruturado como uma série de tabelas, ilustradas aqui como aparecem na janela de design da página do MobileTogether Designer:

Existem vários aspetos a considerar ao criar um menu com ícones, especialmente para garantir uma experiência de utilizador previsível e consistente numa variedade de dispositivos móveis com diferentes tamanhos de ecrã e resoluções.

Primeiramente, é importante que cada imagem transmita de forma clara a função que será executada quando for clicada.

Em segundo lugar, as imagens devem ser suficientemente grandes para se adaptarem a utilizadores com diferentes tamanhos de dedos. Ouvimos frequentemente utilizadores de dispositivos móveis justificarem cliques acidentais com a desculpa de que têm "dedos desajeitados". Mas será que o utilizador é desajeitado, ou é que o layout da aplicação é demasiado pequeno e confuso para ser utilizado?

Finalmente, para aplicações que exibem várias telas com diversos botões de ferramentas, layouts e funcionalidades consistentes em todas as páginas tornam a aplicação muito mais intuitiva de usar.

A nossa aplicação de demonstração "Onde estou?" combina estrategicamente a funcionalidade de duas propriedades de controlo para gerir o tamanho e o layout dos ícones das ferramentas.

Definir a largura de cada ícone como "fill_parent" permite-nos utilizar um único ficheiro de imagem para todos os tamanhos de ecrã. Na nossa aplicação, cada ícone é um ficheiro de imagem .png com 192x192 pixels, e o "fill_parent" redimensionará automaticamente a imagem para preencher a largura da coluna em todos os dispositivos móveis dos utilizadores.

As larguras das colunas da tabela para cada ícone de ferramenta são definidas em expressões XPath. Utilizamos um elemento na árvore de dados persistentes para especificar a largura das colunas para os ícones das ferramentas. Isso permitiu-nos experimentar diferentes tamanhos em vários dispositivos, alterando o valor na árvore de dados em vez de editar cada propriedade de largura de coluna para cada teste. No geral, utilizamos três tamanhos diferentes de ícones na aplicação. Aqui está a parte da árvore de dados onde as larguras das colunas são armazenadas:

A tabela também inclui colunas vazias para criar margens em torno de cada ícone da ferramenta. A largura das colunas para as margens está em branco, o que significa que todo o espaço não atribuído é dividido igualmente entre elas. Adicionámos um controlo de espaço entre as linhas de ícones para criar a margem vertical entre as linhas.

Também pode optar por incorporar o ficheiro de imagem do ícone da ferramenta diretamente no ficheiro da aplicação, ou carregar as imagens separadamente para o servidor MobileTogether.

Definir ações para os botões de ferramentas em aplicações móveis

Definir as ações a serem executadas quando o ícone da ferramenta é clicado é simples. O MobileTogether permite que qualquer elemento seja clicável, tal como um botão. As ações dos elementos são definidas através do menu de contexto que aparece ao clicar com o botão direito:

O botão selecionado acima tem como objetivo abrir a aplicação de mapas predefinida no dispositivo móvel, centralizando-a nas coordenadas GPS. No entanto, o script de ação foi aprimorado com definições separadas para um toque (ou um clique normal) e um toque longo.

Com base na preferência do utilizador, um toque pode reproduzir um som de botão da biblioteca de sons integrada do MobileTogether. Um toque normal abre o mapa, mas um toque prolongado simplesmente abre uma caixa de mensagem que explica a função do botão.

Tamanhos Variáveis para os Botões de Ferramentas em Aplicações Móveis

Precisávamos de botões de ferramenta menores para situações em que o botão de ferramenta ocupa espaço com texto ou outros elementos de controlo na página, como, por exemplo, nas páginas de pesquisa e nos resultados de pesquisa mostrados aqui:

Os ícones das ferramentas nestas páginas foram definidos em colunas, utilizando o elemento de largura de ícone mais pequena na árvore de dados persistentes.

Saiba mais e experimente por si próprio

Se perdeu a nossa publicação anterior sobre a integração de APIs em aplicações móveis, pode consultá-la aqui. Ou, se é novo no MobileTogether, consulte a página Demonstrações do MobileTogether, que contém links para vídeos, tutoriais e mais aplicações de demonstração.

Pode examinar a nossa aplicação de demonstração com mais detalhes para ver exatamente como implementámos os botões de ferramentas em aplicações móveis, ou para consultar as APIs para mapas, pesquisa, clima e eventos. Basta descarregar o MobileTogether Designer, que é gratuito, e obter uma cópia da nossa aplicação no GitHub, neste repositório: https://github.com/altova/MobileTogether-more-examples/tree/master/Where%20Am%20I.</>