--- title: "Temas para aplicações móveis aumentam a satisfação dos utilizadores" date: "2022-03-02" categories: - "app-development" - "mobile-development" - "mobiletogether" tags: - "mobile-app-themes" - "mobile-app-user-interface" - "mobile-development-tools" - "mobiletogether" description: Explore como os temas de aplicações móveis aumentam a satisfação do utilizador, permitindo a personalização das cores dos gráficos e dos modos de visualização, utilizando as poderosas ferramentas de design da MobileTogether. --- Status: #blog Tags: #mobile-app-themes #mobile-app-user-interface #mobile-development-tools #mobiletogether Categories: [mobile-development](/blog/pt/category/mobile-development.md) | [mobile-development](/blog/pt/category/mobile-development.md) | [mobile-development](/blog/pt/category/mobile-development.md) # Temas para aplicações móveis aumentam a satisfação dos utilizadores Os temas para aplicações móveis aumentam a satisfação dos utilizadores, permitindo que cada utilizador personalize a aparência da aplicação de acordo com as suas preferências. Uma forma de implementar vários temas em aplicações que reportam e visualizam dados é oferecer aos utilizadores uma escolha de paletas de cores para gráficos e diagramas. O MobileTogether utiliza uma combinação de design de interface gráfica por arrastar e soltar, a poderosa linguagem de programação visual Action Tree para o tratamento de eventos, e programação funcional padronizada para a seleção e processamento de dados. Os desenvolvedores utilizam o MobileTogether diariamente para [criar aplicações elegantes e compatíveis com diferentes plataformas,](https://www.altova.com/pt/mobiletogether) com gráficos e diagramas ricos em todos os formatos populares. As configurações principais de apresentação permitem que os desenvolvedores de aplicações móveis escolham entre quatro paletas de cores pré-definidas, ou até mesmo definam uma paleta de cores personalizada para gráficos e diagramas, durante o desenvolvimento da aplicação. Combinadas com as opções de visualização em modo escuro e modo claro, estas configurações criam dez possibilidades de personalização visual. Em vez de impor uma escolha de cores durante o desenvolvimento, os desenvolvedores podem utilizar as funcionalidades do MobileTogether para permitir que os utilizadores escolham as suas próprias preferências. Vamos analisar um exemplo. ![](/blog/images/mt_darktheme_blog_3.jpg) A imagem abaixo mostra a caixa de diálogo de seleção do esquema de cores "Mobile Together" e um gráfico de uma aplicação móvel que reporta a produção de energia solar para sistemas instalados em telhados. [![Defina os temas das aplicações móveis através de esquemas de cores](/blog/images/user-schema-def.png)](user-schema-def.png) O programador atribuiu um esquema de cores personalizado nas configurações do gráfico, onde a área do gráfico de fundo é preenchida com laranja e as barras são azuis. Se o gráfico incluísse elementos adicionais, as próximas cores seriam verde, amarelo, violeta, etc. O programador podia ter selecionado qualquer esquema de cores pré-definido no menu suspenso: [![Os esquemas de cores integrados podem criar uma variedade de temas para aplicações móveis](/blog/images/schema-choose.png)](schema-choose.png) ### **Criar temas para aplicações móveis** Vamos analisar uma estratégia para permitir que os utilizadores, em qualquer dispositivo móvel, escolham um esquema de cores quando a aplicação é executada. Esta aplicação já possui uma página de configurações, o que torna esse um local natural para adicionar um seletor de temas de aparência. Podemos começar criando uma tabela com botões de opção e amostras de cores para cada esquema de cores. Aqui está uma visualização da tabela completa no MobileTogether Designer: [![Tabela de seleção de temas para aplicações móveis, como a que se encontra no programa MobileTogether Designer](/blog/images/theme-buttons-1.png)](theme-buttons-1.png) O MobileTogether suporta todos os elementos de seleção familiares. Por exemplo, uma caixa de combinação aparece imediatamente acima da tabela. Optámos por um conjunto de botões de opção para os temas da aplicação móvel, de forma a apresentar todas as opções de cores simultaneamente. Os gráficos desta aplicação contêm apenas um ou dois elementos cada, pelo que cada par de cores ilustra as duas primeiras cores da lista para cada esquema. Aqui está uma visão da mesma parte da página de Configurações na janela do simulador MobileTogether: [![Seletor de temas de cores, como o que se encontra no simulador MobileTogether](/blog/images/theme-buttons-2.png)](theme-buttons-2.png) A caixa de diálogo principal de configuração de gráficos permite aos programadores criar rapidamente o gráfico ideal para visualizar praticamente qualquer conjunto de dados, incluindo gráficos de área, gráficos de barras, gráficos de velas, gráficos de medidores e gráficos de pizza. É possível até mesmo combinar diferentes tipos de gráficos em camadas. O gráfico de produção mensal mostrado acima é um gráfico em camadas com um gráfico de barras sobreposto. No entanto, qualquer elemento de um gráfico pode também ser definido como o resultado de uma expressão XPath processada durante a execução da aplicação. As configurações XPath dinâmicas, definidas no diálogo correspondente, substituem as configurações básicas originais do gráfico. ![Configuração XPath dinâmica para escolher um esquema de cores](/blog/images/dynamic-xpath-settings.png) A caixa de diálogo "Configurações XPath Dinâmicas" permite-nos especificar o esquema de cores para cada gráfico, através do elemento XML chamado "graphColorBase". A tabela de botões de opção na página de configurações da aplicação atribui um dos seguintes valores de texto a "graphColorBase": "Padrão", "Escala de cinzentos", "Colorido", "Pastel" ou "Personalizado". Aqui estão algumas capturas de ecrã da aplicação final, mostrando a seleção de temas para aplicações móveis num telemóvel Android, no modo escuro: [![Seleção de temas para aplicações móveis num telemóvel Android](/blog/images/android-example.png)](android-example.png) E exemplos de esquemas de cores padrão e em tons de cinza num iPhone no modo claro: [![Temas de aplicações móveis visualizados num iPhone](/blog/images/iphone-example.png)](iphone-example.png) O esquema de cores em tons de cinza pode ser ideal para utilizadores com daltonismo! Veja o nosso MobileTogether [demonstrações em vídeo](https://www.altova.com/pt/mobiletogether/demos#video_Demos), mais [aplicativos de exemplo](https://www.altova.com/pt/mobiletogether/demos), ou até mesmo o/a [manual online](https://www.altova.com/manual/MobileTogether/mobiletogetherdesigner/) Para obter informações detalhadas sobre o MobileTogether, consulte os recursos disponíveis. Quando estiver pronto para melhorar a satisfação dos utilizadores com os temas de aplicações móveis nas suas próprias aplicações multiplataforma, [Descarregue o programa MobileTogether Designer](https://www.altova.com/pt/mobiletogether/download).