Desenvolvimento para dispositivos móveis

Prévia do material em texto

DESENVOLVIMENTO 
PARA DISPOSITIVOS 
MÓVEIS
Fabricio Machado da Silva
Design de interação para 
aplicações móveis
Objetivos de aprendizagem
Ao final deste texto, você será capaz de:
 � Identificar as principais guidelines de interação para desenvolvimento 
móvel.
 � Classificar guidelines de interação para Android e iOS.
 � Operacionalizar guidelines de interação para Android e iOS.
Introdução
O crescimento exponencial do mercado de aplicativos móveis torna cada 
vez mais desafiadora a criação dessas aplicações. Esses desafios estão 
relacionados a recursos físicos limitados, como central processing unit 
(CPU), memória, tela, dispositivos de entrada, bateria, entre outros. Além 
disso, algumas circunstâncias, como ambiente e contextos diversos com 
excesso de barulho e claridade, são complicações que também precisam 
ser gerenciadas nesse tipo de trabalho.
Neste capítulo, você vai conhecer os guias de desenvolvimento (di-
retrizes, ou guidelines) disponibilizados pelos principais fabricantes de 
sistemas operacionais para desenvolvimento em dispositivos móveis. 
Esses fabricantes são Google, com a plataforma Android, e Apple, com 
o iPhone Operative System (iOS). Além disso, você verá como classificar 
as diretrizes de interação para as respectivas plataformas e como opera-
cionalizar a interação nelas.
Principais diretrizes de desenvolvimento em 
dispositivos móveis
Para auxiliar os desenvolvedores, Google e Apple disponibilizam guias de 
recomendações para os desenvolvedores de aplicativos nessas plataformas. 
Essas diretrizes, ou guidelines, servem como referência para o design de apli-
cativos (ROCHA; BARANAUSKAS, 2003). Você verá a seguir as diretrizes 
da plataforma Android e iOS. A Figura 1 mostra um exemplo de interface de 
interação no iOS da Apple.
Figura 1. Exemplo de interface de interação no iOS.
Fonte: Data Entry... (2019, documento on-line).
Guidelines Android
Segundo o guia do desenvolvedor Android, os usuários de aplicativos dessa 
plataforma possuem uma expectativa alta em relação à aparência e ao com-
portamento, por isso é necessário que os desenvolvedores sigam não somente 
as diretrizes relacionadas aos padrões visuais e de navegação, mas também as 
de qualidade para compatibilidade, desempenho, segurança e outros.
Design de interação para aplicações móveis2
O foco neste texto são as diretrizes relacionadas aos padrões visuais, 
ou seja, as diretrizes de interação com os usuários. No Android elas estão 
classificadas em:
 � Usabilidade.
 � Animação.
 � Leiaute.
 � Padrão.
 � Estilo e componentes.
Guidelines iOS
No guia de desenvolvimento do iOS está escrito que, como designer de apli-
cativo, você tem a possibilidade de oferecer um produto extraordinário, que 
estará no topo dos gráficos da App Store, mas, para isso, é preciso atender às 
altas expectativas de qualidade e funcionalidade.
Para a Apple, três temas principais diferenciam a plataforma iOS de outras.
 � Clareza: em todo o sistema, o texto é legível em todos os tamanhos, os 
ícones são precisos e lúcidos, os adornos são sutis e apropriados. Um 
foco aguçado na funcionalidade motiva o design. Espaço negativo, cor, 
fontes, gráficos e elementos de interface realçam sutilmente conteúdos 
importantes e transmitem interatividade.
 � Deferência: movimento fluido e uma interface nítida e bonita ajudam as 
pessoas a entender e interagir com o conteúdo sem nunca competirem 
com ele. O conteúdo normalmente preenche a tela inteira, ao passo que 
a translucidez e o desfoque geralmente sugerem mais. O uso mínimo de 
painéis, gradientes e sombreados mantém a interface leve e ventilada, 
garantindo que o conteúdo tenha importância.
 � Profundidade: camadas visuais distintas e movimento realista trans-
mitem hierarquia e vitalidade e facilitam a compreensão. O toque e 
a capacidade de descoberta aumentam o prazer e permitem acesso 
e funcionalidade ao conteúdo adicional sem perder o contexto. As 
transições fornecem uma sensação de profundidade à medida que você 
navega pelo conteúdo.
3Design de interação para aplicações móveis
Uma característica importante para projetar e criar aplicativos para dispositivos móveis 
é que eles possuem um propósito bem específico. Ao contrário dos aplicativos para 
desktop, que em geral possuíam propósitos mais abrangentes, nos aplicativos para 
dispositivos móveis, há a oportunidade de trabalhar com aplicativos que resolvam 
problemas específicos, por isso tornam o desafio da interação entre homem e 
máquina mais interessante. 
Classificação de guidelines
Os padrões de interface são utilizados durante todo o seu ciclo de desenho, 
esses padrões ajudam os designers a traduzir as necessidades definidas para 
o aplicativo em estruturas e comportamentos esperados.
Esses padrões são chamados guidelines, que são regras construídas a partir 
de um conjunto de valores e crenças dos projetistas e designers, bem como 
na experiência em tentar atender a esses valores (relacionados a questões de 
comportamento, forma e conteúdo da interface).
Guia de interação Android – Material Design
O Material Design é um guia abrangente para design visual, de movimento 
e interação entre plataforma e dispositivos (MATERIAL..., 2019, documento 
on-line). Para usar o Material Design em seus aplicativos Android, você deve 
seguir as diretrizes definidas na sua especificação, e usar os novos componentes 
e estilos disponíveis na biblioteca de suporte do projeto de material.
O Material Design fornece os seguintes recursos para criação de aplicativos 
com padrões de interação com usuário:
 � um tema padrão para definir estilo visual de todos os widgets da in-
terface de usuário;
 � widgets para views complexas como listas;
 � application programming interfaces (APIs) novas para customizar 
sombras e animações.
Design de interação para aplicações móveis4
Para aproveitar os recursos do material, como padrão de estilos para widgets 
de interface de usuário, e simplificar a definição do estilo de aplicativo, você 
deve utilizar um tema baseado no guia de material para seu aplicativo (Figura 2).
Figura 2. Exemplo de temas diferentes no Android.
Fonte: Material... (2019, documento on-line).
Para fornecer aos seus usuários uma experiência mais familiar é necessário 
usar os padrões mais comuns do guia, seguindo as recomendações a seguir.
 � Permitir a ação principal da sua interface com um botão de ação 
flutuante.
 � Mostrar a sua marca, navegação, pesquisa e outras ações com a barra 
de aplicativos.
 � Mostrar e ocultar a navegação do seu aplicativo com a gaveta de 
navegação.
 � Usar um dos muitos componentes do Material Design para o leaiute e 
a navegação do aplicativo, como de barras de ferramentas, guias, barra 
de navegação inferior entre outras. Para ver todas, confira o catálogo 
de componentes de material para Android.
5Design de interação para aplicações móveis
Sempre que possível, use ícones de material predefinidos, como o botão "menu" de 
navegação da gaveta de navegação com o ícone "hambúrguer" padrão. Você também 
pode importar ícones do Scalable Vector Graphics (SVG) da biblioteca de ícones de 
materiais com o Vector Asset Studio do Android Studio.
Construindo uma user interface responsiva com o 
ConstraintLayout conforme Guia Desenvolvedor 
Android
O ConstraintLayout permite criar leiaute grandes e complexos com uma 
hierarquia de visualização simples (sem grupos de visualização aninhados). 
É semelhante ao RelativeLayout, pois todas as exibições são de acordo com 
os relacionamentos entre as exibições de irmãos e o leiaute pai, mas são mais 
flexíveis do que o RelativeLayout e mais fáceis de usar com o editor de leiaute 
do Android Studio.
O ConstraintLayout está disponível diretamente nas ferramentas visuais 
do editor de leiaute, porque a API de leiaute e o editor de leiaute foram es-
pecificamente construídos um para o outro. Assim, você pode construir seu 
leiaute com o ConstraintLayout arrastando e soltando, em vez de editar o XML.
O ConstraintLayoutestá disponível em uma biblioteca de APIs compatível 
com o Android 2.3 (nível 9 da API) e superior.
Para definir a posição de uma vista no ConstraintLayout, você deve adi-
cionar, pelo menos, uma restrição horizontal e uma vertical para a vista. Cada 
restrição representa uma conexão ou alinhamento para outra visualização, o 
leiaute pai ou uma diretriz invisível. Cada restrição define a posição da vista 
ao longo do eixo vertical ou horizontal. Portanto, cada visualização deve ter no 
mínimo uma restrição para cada eixo, mas, geralmente, são necessárias mais.
Quando você solta uma visualização no editor de leiaute, ela permanece 
onde você a deixa, mesmo que não tenha restrições. No entanto, isso é apenas 
para facilitar a edição; se uma visualização não tiver restrições quando você 
executar o leiaute em um dispositivo, ela será desenhada na posição [0,0] (o 
canto superior esquerdo).
Design de interação para aplicações móveis6
Na Figura 3, o leiaute fica bem no editor, mas não há restrição vertical na 
vista C. Quando esse leiaute é desenhado em um dispositivo, a visualização 
C alinha-se horizontalmente com as bordas esquerda e direita da vista A, mas 
aparece na parte superior da tela, porque não tem restrição vertical.
Figura 3. ConstraintLayout.
Fonte: Build... (2019, documento on-line).
Para usar o ConstraintLayout no seu projeto, proceda da seguinte maneira:
 � Verifique se você tem o repositório maven.google.com declarado em 
seu arquivo build.gradle de nível de módulo:
repositorios {
 Google()
}
 � Adicione a biblioteca como uma dependência no mesmo arquivo build.
gradle, conforme mostrado no exemplo a seguir. Observe que a versão 
mais recente pode ser diferente da mostrada no exemplo.
dependencias {
 implementacao 'com.android.support.constraint: constraint-
-layout: 1.1.2'
}
7Design de interação para aplicações móveis
 � Clique em Sincronizar projeto com arquivos Gradle na barra de ferra-
mentas ou na notificação de sincronização.
Agora você está pronto para construir seu leiaute com o ConstraintLayout. 
Para iniciar um novo arquivo de leiaute de restrição, siga as seguintes etapas:
 � Na janela Project, clique na pasta do módulo e selecione File> New> 
XML> Layout XML.
 � Digite um nome para o arquivo de layout e insira "android.sup-
port.constraint.ConstraintLayout" para a tag raiz.
 � Clique em Concluir.
Esse é um exemplo simplificado, mas útil e importante da utilização do 
padrão de design recomendado pelo guia do desenvolvedor do Android, uti-
lizando o ConstraintLayout.
Nos links a seguir você pode acessar os guias para desenvolvedor nos sistemas ope-
racionais iOS, da Apple, e Android, da Google.
https://qrgo.page.link/44YTi
https://qrgo.page.link/bNGty
O Guia do Microsoft Xamarim é uma Integrated Development Environment (IDE) de 
desenvolvimento mobile da Microsoft para plataformas Android e iOS.
https://qrgo.page.link/qV2mt
Design de interação para aplicações móveis8
BUILD a Responsive UI with ConstraintLayout. Android Developers, [S. l.], 2019. Disponível 
em: https://developer.android.com/training/constraint-layout/index.html. Acesso em: 
21 jul. 2019.
DATA ENTRY — User Interaction — iOS — Human Interface Guidelines. Apple, Cupertino, 
2019. Disponível em: https://developer.apple.com/design/human-interface-guidelines/
ios/user-interaction/data-entry/. Acesso em: 21 jul. 2019.
MATERIAL Design for Android. Android Developers, [S. l.], 2019. Disponível em: https://
developer.android.com/guide/topics/ui/look-and-feel. Acesso em: 21 jul. 2019.
ROCHA, H. V.; BARANAUSKAS, M. C. C. Design e avaliação de interfaces humano-compu-
tador. Campinas: Instituto de Computação, Universidade Estadual de Campinas, 2003. 
257 p. Disponível em: https://www.nied.unicamp.br/biblioteca/design-e-avaliacao-
-de-interfaces-humano-computador/. Acesso em: 21 jul. 2019.
Leituras recomendadas
BURNETTE, E. Hello, Android: introducing Google's mobile development platform. 3. 
ed. Raleigh; Dallas: The Pragmatic Bookshelf, 2010. 293 p.
DEITEL, P.; DEITEL, H.; WALD, A. Android 6 para programadores: uma abordagem baseada 
em aplicativos. 3. ed. Porto Alegre: Bookman, 2016. 618 p.
DOCS | Node.js. OpenJS Foundation, [S. l.], 2019. Disponível em: https://nodejs.org/en/
docs/. Acesso em: 21 jul. 2019.
DOCUMENTATION — TypeScript. Microsoft, Redmond, 2019. Disponível em: https://
www.typescriptlang.org/docs/home.html. Acesso em: 21 jul. 2019.
INTRODUCTION to the Angular Docs. Google, Mountain View, 2019. Disponível em: 
https://angular.io/docs. Acesso em: 21 jul. 2019.
IONIC: Cross-Platform Mobile App Development. Ionic, Madison, 2019. Disponível em: 
https://ionicframework.com. Acesso em: 21 jul. 2019.
LEE, W. M. Beginning Android tablet application development. Indianapolis: Wrox, 2011. 
288 p.
NPM Documentation. npm, Inc., Oakland, 2019. Disponível em: https://docs.npmjs.
com/. Acesso em: 21 jul. 2019.
9Design de interação para aplicações móveis