Android Wear 2.0: Construindo Projetos de Aplicativos para Relógios Wearables

On 8 de junho de 2016 by Anderson Luís Cavalcanti Sales

No último texto da série de artigos sobre o Android Wear 2.0, apresentamos as principais características e novidades dessa tecnologia. Nesta sessão trataremos de algumas técnicas de projetos para desenvolvimento de aplicações baseadas nos novos padrões de design em aplicações Android Wear. Saiba como adicionar novos elementos a partir da biblioteca wearable Android, bem como projetar as melhores práticas para smartwatches no Android Wear.

Construindo Projetos com  Android Wear

Da mesma forma que o Google Design fornece técnicas para apresentação em telas de todos os tamanhos como TVs grandes, computadores, tablet e celular também é sugerido a utilização destas técnicas para o as telas de relógio, mais conhecido como SmartWatch de acordo com o padrão de aplicativos Android Apps.

Por terem o caráter utilitário e apresentarem um critério de facilidade de acesso o android Wear 2.0 visa apresentar aplicações que não podem ser complexas ao ponto de precisarem de muitas entradas de dados nem o resultado da aplicação pode apresentar muitos dados. Manter o foco nas principais funcionalidades é o mais importante. Este dispositivo não será útil para imprimir documentos, editar conteúdo de websites ou coisas que precisam de uma precisão maior e/ou entrada de dados mais coerentes, não restringindo apenas à uma tela pequena e redonda de um relógio.

Programando para Android Wear

No entanto, quando se fala em programação para relógios, não se programa pensando em tela redonda. Ao contrário dos smartfones, tables e telas de notebooks que são retangulares, a maioria dos dispositivos Android Wear do mercado, são circulares. Este círculo se encaixa em um quadrado e possui uma superfície 22% menor, ou seja, telas redondas possuem uma superfície útil menor.

Design do Android Wear

As usabilidades encontradas no Google Design para utilização destes dispositivos são divididas em 3 áreas:

Telas Verticais

permitem aos usuários deslocar em uma única direção para visualizar todo o conteúdo. Existem os layouts verticais (os quais são recomendados a utilização) e os multidirecionais (que não são muito recomendados por serem confusos).

img01

As navegações entre as diferentes aplicações ocorrem onde cada aplicação possui sua paleta guia ou aba de cores na vertical, facilitando a identificação do conteúdo e tema de forma fácil.

img02

Cores mais escuras

são consideradas melhores para ambientes sociais além de economia de energia em telas de OLED. É necessário apenas alterar a intensidade do brilho e intensidade do cinza na cor, como na tabela seguinte;

UI Região Valor do brilho sugerido
1 App color Default color
2 Dark background 15%
3 Lighter background 30%
4 UI element 40%
5 Lighter UI element 65%
6 Accent 100%

 

img03 Neste exemplo, considerando o sistema de cores RGB, (rosa, 500), temos:
R: 156 G:39 B:176 – Decimal
R: 9C  G:27 B:B0   – HexadecimalHSB – Hue Saturation Brightness:
H: 292º  S:78%  B:74%Manipulando o brilho e intensidade de cada cor, através do assistente de cores, é possível criar à partir de uma única cor, uma gama de cores relacionadas com funcionalidades diferentes, como mostrado no quadro ao lado.

 

Os seguintes tons exigem correção de cor para uso acessível no visor do relógio:
Amarelos: tons de amarelo entre 45°-75° sobre o espectro de cores deve usar os valores de matiz, saturação e brilho (HSB) neste diagrama para fundos escuros (região UI 2 ao lado).
Azul: tons azuis entre 190°-300° no espectro de cores deve aumentar o valor de saturação de 100% para fundos escuros e mais leves (regiões de UI 2 e 3 listados ao lado). Tons de azul na faixa de 190 ° -300 ° também deve ajustar o nível de saturação para 50% e brilho para 100% para realçar as cores (região UI 6 listadas acima).
img04

Componentes e design de aplicativos padrões

estas orientações aplicam-se à visualização do desenvolvedor;

img05

1. Título e Nome
Font: Roboto Cond. Light
Font size: 16sp
Leading: 20sp
color: #000
Alignment: center
Max line: 2
Character count: 18
Padding between icon and title or name: 12dp
A. Cor de Fundo
Color: app specified
B. Icones
App icon: 46x46dp
Color: #FFF

Os Drawer do Android Wear

Navigation drawer é um painel que exibe as principais áreas de navegação do relógio Android Wear. Ele fica oculto maior parte do tempo, mas é exibido quando o usuário desliza o dedo na tela da parte superior para baixo. Apresentando outras funções disponíveis para utilização na aplicação. O Navigation drawer mostra pontos de navegação para orientar os usuários entre suas paginações, qual é a atual e quais mais disponíveis possuem.

img06
Action drawer fornece acesso à opções adicionais do Android Wear. Ele torna-se visível apenas de acordo com a ação feita pelo utilizador, deslizando na borda inferior, de baixo para cima. Ele pode surgir para apresentar mais funcionalidades da aplicação. Neste caso ao lado, o menu Action drawer fornece mais opções do menu principal, ou seja, uma lista de opções com ícones e ações possíveis disponíveis para utilização. Dependendo da quantidade de ações disponíveis, este menu pode ser maior que o possível demonstrado em somente uma tela, podendo o usuário deslizar o dedo para selecionar a ação desejada.

img07

Veja mais a respeito do Android Wear 2.0 em:

Referências

[1] https://www.google.com/design/spec-wear/material-design-for-wearables/introduction.html

[2] https://developer.android.com/wear/preview/api-overview.html

[3] https://www.youtube.com/watch?v=LtD7eJp2ILo

Summary
Android Wear - Um Guia básico
Article Name
Android Wear - Um Guia básico
Description
Nesta sessão trataremos de algumas técnicas de projetos para desenvolvimento de aplicações baseadas nos novos padrões de design em Android Wear. Saiba como adicionar novos elementos a partir da biblioteca wearable Android, bem como projetar as melhores práticas para smartwatches.
Author
Publisher Name
iMobilis
Publisher Logo

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *