CAPÍTULO 1 Projetando para o Android
Contents
1. Depois Na vers o remodelada dessa tela mantenha o uso da navega o acima com a remo o da funcionalidade global de navega o Mas para onde devem ir os bot es de a o e qual a melhor maneira de identificar a a o principal aquela que mais provavelmente ser executada pelo cliente f cil entender uma forma de implementar essa solu o no sistema operacional Android 40 ao observar a tela da aplica o nativa Gmail para o Android Fig 1 18 Cap tulo 1 Projetando para o Android um estudo de caso 43 Kindle Keyboard Leather Cover SALE While Supplies Last Amazon com store news amazon c To me 2 35am de Show pictures Liebe Kollegen und Gesch ftspartner Newer 201133 Older s E E G or s Figura 1 18 O aplicativo Gmail usa o controle deslizante para as visualiza es em sua tela de detalhamento de resultados Para reduzir o vai e vem a aplica o nativa do Gmail usa um controle inteligente da interface do sistema operacional Android visualiza es deslizantes Swipe Views para tornar a navega o mais eficiente Esse controle permite ao usu rio deslizar seu dedo na tela da direita para a esquerda para obter os detalhes do pr ximo resultado Essa funcionalidade exibida ao cliente na forma de uma linha escura e fina na parte de baixo da tela que mostra 2 de 133 Mesmo que funcione a usabilidade dessa fun o na descoberta de resultados mostrou se pobre2. o precisa mostrar t o proeminentemente Privacy Policy gt BMW 325i gt Visitor Agreement gt Milpitas CA Within 25 miles gt Email Feedback New Used amp Certified Cars Year Range 1981 2013 Price Range 0 100 000 EE Version 1 2 1 214416 Figura 1 3 O aplicativo AutoTrader enfatiza a in til fun o Settings no projeto de sua tela principal Em contraste com o super enfatizado bot o Settings as fun es essenciais que precisam ser utilizadas aquelas relativas a encontrar carros vendedores a listar e procurar e s fun es e buscas personalizadas do usu rio My Auto Trader est o escondidas na barra do menu de navega o no antigo estilo do Android 23 Fig 14 A pr xima se o descreve como o aplicativo poderia ser remodelado conforme as diretrizes do Android 4 0 usando as barras de a es de forma efetiva e tornando mais proeminentes as fun es mais importantes Cap tulo 1 Projetando para o Android um estudo de caso 29 BMW 325i gt BMW 325i gt Milpitas CA within 25 miles gt Milpitas CA Within 25 miles gt New Used amp Certified Cars New Used amp Certified Cars Year Range 1981 2013 Year Range 1981 2013 Price Range 0 100 000 Price Range 0 100 000 Find Dealers Scan amp Find My AutoTrader Figura 14 O aplicativo Auto Trader coloca suas fun es essenciais na barra do menu de navega o n
3. Abas As abas tabs s o um elemento essencial navega o secund ria e podem ser usadas em uma variada forma de aplica es na plataforma Android O padr o Tabs abordado no cap tulo 8 Ordena o e filtragem O aplicativo AutoTrader usa o estilo visual do projeto do iOS exibindo as abas com cantos arredondados mas com a apar ncia de um chanfro em baixo relevo para a aba selecionada Fig 1 9 Advanced Recent Figura 1 9 A parte de cima mostra as abas do aplicativo Auto Trader antes da remodelagem sugerida a parte de baixo o tratamento proposto para o Android 4 0 Adote uma remodelagem simples para esse controle utilizando um sublinhado de fim a fim sem sombras chanfros ou cantos arredondados O elemento com mais sublinhado sinaliza a aba selecionada Nessa tela h apenas espa o suficiente para etiquetas de texto compactas Basic Advanced Recent em portugu s b sico avan ado e recente respectivamente Essa foi a forma utilizada na remo delagem sugerida Mas se a tela for menor do que o suficiente para acomodar confortavelmente o texto completo nas abas A as etiquetas de texto se transformar o em abas ba seadas em cones correspondentes Como voc ler no cap tulo 2 O que torna o Android diferente a escalabilidade da execu o da interface e dispositivos com telas sens veis menores s o o grande diferencial do sistema operacional Android Essa escalabilidade por s
4. E Figura 16 Na vers o 2 as fun es mais teis est o na barra de a es superior e a fun o Settings foi movida para o menu sobreposto Essa uma arquitetura de informa o aceit vel e est de acordo com as reco menda es para as vers es Ice Cream Sandwich 4 0 e Jelly Bean 4 1 do sistema operacional Entretanto isso aponta alguns desafios chave da barra de a es para a implementa o da especifica o da interface de usu rio atual Por exemplo na maioria dos dispositivos voc n o pode ter mais que umas poucas fun es na barra de a es sem que isso tome mais que os 50 recomendados para o espa o dispon vel Al m disso a coloca o de mais a es em barras de a es adicionais acaba roubando o espa o vertical de que a aplica o precisa desesperadamente al m de gerar polui o visual e complexidade Essa n o uma considera o que possa ser facilmente descartada O desafio principal cognitivo nem toda a o pode ser facilmente representada com apenas um cone Por exemplo na figura 16 utilizei ambos os cones originais Find Dealers e My AutoTrader Mesmo que nenhum deles seja ruim eles podem facilmente ser interpretados de forma errada assim como todos os cones con cebidos para representar a es complexas ou n o usuais Voc poderia remover todos os cones e colocar todas as a es no menu sobreposto mas essa solu o tamb m est longe de ser a ideal j q
5. New photosphere taken from the top of from the top of nF Rothorn motintain in the Swiss Alps in the Swiss Alps 2 Notifications Figura 1 7 O projeto do aplicativo Google Plus utiliza um menu Drawer que inclui tanto texto como cones A especifica o da interface de usu rio do Android encoraja o uso do elemento Drawer para a navega o de mais alto n vel caso exista um n mero de visualiza es no aplicativo que n o tenham uma rela o direta entre si Esse exatamente Cap tulo 1 Projetando para o Android um estudo de caso 33 o caso do AutoTrader A rea Car Search da aplica o diferente das visualiza es Find Dealer e My AutoTrader assim colocar essas fun es de navega o de mais alto n vel no menu Drawer mostrado na vers o 3 da remodelagem na figura 1 8 faz muito sentido A fun o Scan amp Find relativa busca por autom veis ent o faz sentido torn la contextual visualiza o Car Search Ela acessada com um simples toque na barra de a es A fun o in til mas como os advogados podem argumentar necess ria Settings a nica escondida no menu sobreposto ela n o precisa ser acessada com apenas um toque e por isso escond la a melhor estrat gia BMW 325i gt amp Find Dealers BMW 325i Milpitas CA within 25 miles gt E My AutoTrader Milpitas CA New Used amp Certified Cars New Used amp Certifi Year Range 1981 2013 Year R
6. 4 750 111 650 miles BMW 325i gt Black ap APR Impo Used 2006 BMW 325i Sedan Milpitas CA within 25 miles gt Used 1988 BMW 325i F T ii 15 900 64 350 miles New Used amp Certified Cars 3 500 44 989 miles Save Share Year Range 1981 2013 Black gt A Plus Imports Price Range 0 100 0004 z Used 2004 BMW 325i Roadsport Reset a 10 995 925 323 5800 Email Seller E 86 635 miles cdi gt Silver gt Motor Team Vehicle Information Used 2006 BMW 325i Body Style Sedan 14 000 Exterior Color Sparkling Graphite 72 848 miles Metallic P la Infinit gt att Interior Color Black Figura 1 20 assim que as tr s telas do Auto Trader s o apresentadas antes de sua remodelagem Afigura 121 mostra as tr s telas remodeladas j imbu das do DNA do Android 40 Na remodelagem foram usados um conjunto especializado de controles por toque e um esquema uniforme de navega o recomendados pelas diretrizes do Android 40 Na perspectiva visual o novo projeto usa bot es planos pain is de toque e barras de a es que acima de tudo n o fazem uso de gradientes e cantos arredondados Finalmente o novo projeto remove containers e indicadores de toque desnecess rios 46 Padr es de Projeto para o Android 4 750 BMW 325 111 650 miles Black A Plus Imports Miptas CA Within 25 m os Used 1988 BMW 325i Used 2006 BMW 325i Sedan 3 500 15 900 YEAR RANGE 44 989 miles 64 350 m
7. rio do Android Os bot es restantes Map e Filter s o implementados com cones no estilo Android planos em cor nica e posicionados direita na barra de a es Essa uma forma pela qual a rela o entre mapas e listas pode ser im plementada Padr es muito mais efetivos para a busca e filtragem s o discutidos no cap tulo 7 Busca e no cap tulo 8 Ordena o e filtragem 40 Padr es de Projeto para o Android 4 750 111 650 miles Black A Plus Imports Used 1988 BMW 325i 3 500 44 989 miles Black A Plus Imports Used 2004 BMW 325i r 10 995 pan 86 635 miles Silver Motor Team Used 2006 BMW 325i 14 000 72 848 miles g Peninsula Infiniti Figura 1 15 Esta a primeira vers o da remodelagem da tela de busca do aplicativo Auto Trader com uma barra de t tulo Al m do tratamento da barra de t tulo na barra de a es uma outra vers o poss vel um controle suspenso que pode ser usado para a sele o de m ltiplas visualiza es neste caso para diferentes maneiras de organizar o invent rio Na vers o 2 da remodelagem o t tulo da tela fabricante e modelo do carro exibido acima do seletor suspenso das m ltiplas formas de visualiza o Essa vers o a recomendada j que adiciona uma funcionalidade chave ao aproveitar totalmente as capacidades do Android 40 Fig 1 16 preciso destacar a aus ncia do s mbolo da seta gt nos resultado
8. 1 Projetando para o Android um estudo de caso 27 i MON Nov 5 FU FatDux Duck for Visual Design Chapter 9pm 9 50pm in Linkedin E Catch ACE to reat America 3Uam 8 50am EB vote 11am 2pm Facebook Messaging Gallery redbox Figura 1 1 Os cones de lan amento do Yelp e do Twitter possuem formatos diferenciados 2 der Gom AutoTrader AutoTrader Figura 1 2 O cone de lan amento original do AutoTrader n o distintivo assim aqui est um cone remodelado Antes Repare na tela padr o principal a busca por um carro A fun o do menu que recebe mais nfase Settings configura es apresentada com destaque no can to superior direito Fig 1 3 Essa posi o indiscutivelmente o segundo mais importante e proeminente ponto na interface de usu rio do dispositivo m vel o primeiro ponto mais proeminente o canto superior esquerdo ocupado pelo grande logotipo 28 Padr es de Projeto para o Android Ainda que seja admir vel a tentativa de destaque da fun o Settings eu infe lizmente n o consigo imaginar um caso de uso prim rio ou secund rio que a envolva Especialmente porque o que est marcado como Settings n o nada mais do que um local reservado para banalidades legais como a pol tica de privacidade o contrato com o visitante e um bot o para a comunica o atrav s de email dificilmente essa a funcionalidade essencial que a aplica
9. as abas s o baseadas em texto e possuem chanfros e cantos arredondados De forma similar tela de resultados de busca h um outro bot o de compartilhamento entretanto nessa tela ele aparece duas vezes uma na barra de menu superior e uma vez dentro da tela na forma de um bot o Save Share salvar compartilhar o que se torna confuso 42 Padr es de Projeto para o Android BAY AREA o JAGUAR RE TAL ER XF Used 2006 BMW 325i Sedan 15 900 64 350 miles Save Share Roadsport 925 323 5800 Email Seller Vehicle Information Body Style Sedan Exterior Color Sparkling Graphite Metallic Interior Color Black Figura 1 17 Assim apresentada a tela original de detalhamento de resultados do aplicativo Auto Trader antes de sua remodelagem Outras a es incluem o contato por telefone ou email com o vendedor ainda que nenhum bot o possa ser identificado como o mais importante nesse conjunto completo n o est claro o que o aplicativo quer que o cliente fa a primeiro O restante da tela constru do com containers de cantos arredondados que devem ir para o lixo claro O mais importante que a nica maneira de navegar para o pr ximo item da lista por meio do m todo vai e vem pressionar o bot o Voltar para retornar tela de resultados de busca e ent o selecionar uma outra tela de detalhamento O vai e vem Pogosticking um antipadr o de navega o descrito no cap tulo 13
10. de um estudo de caso de um aplicativo que poderia ser beneficiado por um projeto mais refinado a aplica o AutoTrader Os padr es apropriados s o referenciados em cada se o deste cap tulo sinta se vontade para consultar as p ginas relevantes e explorar as solu es de projeto mais detalhadamente 25 26 Padr es de Projeto para o Android O aplicativo AutoTrader o t pico exemplo de um porte direto quer dizer ele basicamente uma aplica o do iOS que foi r pida e minimamente feita para traba lhar no Android As se es a seguir mostram como remodelar esse aplicativo para o Android 40 Ice Cream Sandwich N o ser coberta toda a aplica o j que seria excessivamente entediante escrever sobre isso e seria um t dio ainda maior ler Ao inv s disso tr s telas representativas ser o discutidas a tela principal com um formul rio de busca a tela com os resultados de busca e a tela de detalhamento do item Essas telas devem dar uma boa ideia de alguns aspectos nicos e interessantes do projeto visual do Android e a navega o nele Elas tamb m ser o uma introdu o para os padr es de projeto de intera o deste livro Pense neste cap tulo como um aperitivo do rico banquete de solu es pr ticas que esperam por voc na parte II O cone de lan amento O primeiro item a observar o cone de lan amento A maioria das aplica es que s o um porte direto do iOS negligenciam a essencial tarefa de r
11. detalhamento de carros voc precisa de uma nica barra de a es no topo acomodando as tr s a es acima das abas perto do t tulo da tela o nome da listagem Se voc pre cisar de mais espa o em dispositivos pequenos ou se intera es futuras no pro jeto adicionarem mais funcionalidade algumas das a es da p gina de detalhes podem migrar para um menu sobreposto ou para a barra de a es dividida esta ser abordada no pr ximo cap tulo Por ltimo mas n o menos importante remova todos os containers da tela substituindo os com os cabe alhos Android 4 0 seguindo o princ pio do espa o m vel sem limites Mobile Space Unbound discutido no cap tulo 2 Note que o modesto uso do espa o permite que a tela remodelada mostre linhas adicionais de texto algo muito importante em telas de dispositivos m veis Cap tulo 1 Projetando para o Android um estudo de caso 45 Juntando tudo A figura 120 mostra tr s telas do AutoTrader antes da remodelagem sugerida Repare na arquitetura da informa o anterior e no tratamento de controles campos e bot es no estilo iOS As se es de telas s o separadas umas das outras por containers com cantos arredondados Dentro de cada se o os elementos que implementam interatividade s o especialmente acionados pelo s mbolo gt para separ los visualmente dos elementos n o interativos dando uma apar ncia pesada ao estilo visual geral Info Photos Map
12. o eletr nica Carolina Kuwabata ISBN 978 85 7522 358 1 Hist rico de impress es Agosto 2013 Primeira edi o Novatec Editora Ltda Rua Lu s Ant nio dos Santos 110 02460 000 S o Paulo SP Brasil Tel 55 11 2959 6529 Fax 55 11 2950 8869 Email novatec mnovatec com br Site www novatec com br Twitter twitter com novateceditora Facebook facebook com novatec LinkedIn linkedin com in novatec MP20130812 PARTE Princ pios de UX e considera es sobre o Cap tulo 1 Cap tulo 2 Cap tulo 3 Cap tulo 4 24 Android OS Projetando para o Android um estudo de caso O que torna o Android diferente Fragmenta o do Android Processo de projeto de aplicativos m veis CAP TULO 1 Projetando para o Android um estudo de caso Este Livro sobre coisas que funcionam padr es de projeto Os padr es de projeto deste livro s o constru dos com base nas recomenda es de projetos oficiais do Google Android que indicam as melhores pr ticas ao mesmo tempo em que atendem s complexidades envolvidas em problemas reais de projetos As recomenda es oficiais do Android dispon veis em http developer android com design get started ui overview html s o a sua base este Livro mostra como dar vida a essas recomenda es na forma de solu es completas para desafios reais de projetos Neste cap tulo apresento a base para os 58 padr es e os 12 antipa dr es que constam neste livro por meio
13. A plataforma Android fornecida com um total complemento de controles amig veis ao toque que voc pode usar em telas de m ltiplos tamanhos e configura es de dispositivos O Ice Cream Sandwich vem totalmente equipado com controles deslizantes uma entrada de texto completamente remodelada e uma nova roleta de controle com dupla fun o todos discutidos detalhadamente no cap tulo 10 Entrada de dados Para esta se o suficiente dizer que o porte do AutoTrader para o Android ainda utiliza o formato no estilo iOS em seus controles e cabe a lhos de se o em formul rios As se es a seguir descrevem como remodel los no estilo Android 36 Padr es de Projeto para o Android Antes O primeiro item a observar a roleta de controle composta no estilo iOS que o cliente usa no aplicativo Auto Trader para selecionar o ano e o pre o Fig 111 BMW 325i gt Milpitas CA Within 25 miles gt New Used amp Certified Cars Year Range 1981 2013 Price Range 0 100 000 Figura 1 11 O aplicativo Auto Trader usa um formato no estilo iOS para a sele o do ano e do pre o O controle do iOS uma roleta n o nativa que precisa mudar para o estilo de con trole do Android Verifique algumas ideias a esse respeito na pr xima se o Depois Outro aspecto importante desse modelo de formul rio seu recept culo con tainer arredondado para os campos de entrada com u
14. PROJETO PARA SOLU ES DE PROJETOS DE INTERA O PARA DESENVOLVEDORES Greg Nudelman Tradu o BrodTec com Novatec All rights reserved Authorized translation from the English language edition entitled Android Design Patterns Copyright O 2013 by John Wiley amp Sons Inc Indianapolis Indiana Responsibility for the accuracy of the translation rests solely with Novatec Editora Ltda and is not the responsibility of John Wiley amp Sons Inc No part of this book may be reproduced in any form without the written permission of the original copyright holder John Wiley amp Sons Inc Todos os direitos reservados Tradu o autorizada da edi o em ingl s intitulada Android Design Patterns Copyright 2013 by John Wiley amp Sons Inc Indianapolis Indiana A responsabilidade pela precis o da tradu o exclusiva da Novatec Editora Ltda e n o de responsabilidade da John Wiley amp Sons Inc Nenhuma parte deste livro pode ser reproduzida em qualquer formato sem a autoriza o por escrito do titular original do copyright John Wiley amp Sons Inc O Novatec Editora Ltda 2013 Todos os direitos reservados e protegidos pela Lei 9 610 de 19 02 1998 proibida a reprodu o desta obra mesmo parcial por qualquer processo sem pr via autoriza o por escrito do autor e da Editora Editor Rubens Prates Tradu o BrodTec com Revis o t cnica Aurelio Jargas Revis o gramatical Cristiane Bernardi Editora
15. ange Price Range 50 100 000 Price Range aa Figura 1 8 A vers o 3 a recomendada para o aplicativo AutoTrader uma remodelagem de alto n vel que usa o menu Drawer A vers o 3 o modelo preferido Ela encontra um bom equil brio ao mostrar tanto os cones quanto o texto ao mesmo tempo em que torna a navega o acess vel ao permitir o deslizamento da direita para a esquerda ou um toque no cone Voltar o sinal de menor ou Isso tamb m libera espa o na barra de a es superior permitindo a inclus o de um t tulo de tela limpo e de bom tamanho Uma mo difica o recomendada para as diretrizes padr o do Android uma linha fina ao longo de toda a borda esquerda da tela sinalizando aos usu rios que eles podem abrir o menu Drawer deslizando o dedo na tela da direita para a esquerda assim como ao clicar no cone Voltar 34 Padr es de Projeto para o Android De acordo com as diretrizes de interface de usu rio do Android o Drawer pode ser usado apenas para a navega o em n vel superior o que significa que enquanto seus clientes est o no meio de um fluxo dentro da visualiza o Car Search eles podem estar uma ou mais etapas al m do acesso a visualiza es adicionais A boa not cia que com a navega o global fora do caminho a barra de a es pode incluir fun es que estejam no contexto da p gina onde navegam o que recomendado no documento de padr es de projeto do Android
16. delagem eles est o no meio dela e uma proposta alternativa com as reas de toque do Android mostrada a seguir Em contrapartida os bot es do Android s o de acordo com o estilo do mundo de neg cios planos sem gradientes e com cantos ligeiramente arredondados O tratamento preferido do Android para os bot es Cancel OK transform los em reas quadradas s lidas que ocupam 100 da largura da tela com apenas uma linha fina usada como separador As reas de toque ser o discutidas adiante no cap tulo 2 Optei por enfatizar o bot o de a o principal Search permitindo o toque mais f cil nele ao torn lo mais largo e tamb m adicionei uma lupa como cone Resultados de busca Com a tela principal e a arquitetura de informa o remodeladas preste aten o agora na tela de resultados de busca Esses resultados aparecem imediatamente ap s a pesquisa feita pelo usu rio no formul rio da tela principal assim isso faz sentido Antes Mais uma vez a tela com os resultados de busca para o aplicativo Auto Trader foi de maneira geral projetada sem sua adapta o para as diretrizes do sistema operacional Android em suas vers es Ice Cream Sandwich e Jelly Bean Fig 114 A tela usa principalmente padr es iOS com uma pequena mistura de Android e nela s o vis veis tr s bot es dois com texto e outro com um cone Todos os bot es possuem cantos arredondados e chanfros Al m disso cada resultado na tela aprese
17. emodelar esse cone O cone de lan amento do Android n o limitado pelo formato quadrado com bordas arredondadas do iOS Os projetistas s o encorajados a dar a seus cones de lan amento para o Android um formato distinto de bordas Observe os cones usados para o Yelp e o Twitter na figura 11 seus desenhistas souberam faz lo Em contraste o aplicativo Auto Trader objeto deste estudo de caso n o recebeu a dedica o devida para a personaliza o de seu cone Felizmente essa frequen temente uma modifica o simples No caso do Auto Trader uma remodelagem sugerida est inclusa na figura 1 2 Voc poderia utilizar a letra A emprestada do aplicativo vindo do iOS e remover seu preenchimento de fundo para criar uma forma distinta Voc n o est limitado a usar alguma parte do logotipo original por exemplo o cone poderia ter o formato de um carro ou de um volante de carro Como o olho percebe mais prontamente o formato do cone quando ele diferente do de outras aplica es os clientes do Auto Trader poderiam identificar a aplica o mais rapidamente em uma longa lista Barras de a es e arquitetura de informa o Em geral as barras de a es e suas respectivas fun es formam a espinha dorsal de uma aplica o e s o importantes em seu projeto global Infelizmente o pro jeto atual da aplica o Auto Trader deixa muito a desejar nesse quesito e o que torna este estudo matador Cap tulo
18. iles 1981 4 2013 4 Black Roadsport A Plus Imports PRICE RANGE so 4 100 000 4 Used 2004 BMW 325i 10 995 E 86 635 miles BODY STYLE Sedan Silver ad A E EXTERIOR COLOR Sparkling Graphite Meallic ion Pini 3 E INTERIOR COLOR Black Used 2006 BMW 325i ENGINE 6 Cylinder Gasoline 14 000 wi DRIVE TYPE 2 Wheel Drive Rear 72 848 miles FUEL TYPE Gasoline Peninsula Infiniti Figura 1 21 As tr s telas do Auto Trader remodeladas para o Android 4 0 Durante o processo voc examinou v rias vers es diferentes de cada tela Isso natural o projeto com o Android n o complicado mas bastante sofisticado com restri es extremas de espa o e novas e excitantes oportunidades de intera o Por isso devem ser realizados testes completos de uso de novas ideias de projeto antes de sua implementa o utilizando prot tipos r pidos e baratos Eu prefiro fazer a prototipagem e os testes com notas adesivas Neste livro voc ver muitos exemplos de uso dessa metodologia de modelagem O cap tulo 4 Processo de modelagem m vel fornece uma descri o detalhada de todo o processo de mo delagem e prototipagem e apresenta t cnicas pr ticas para a abordagem de testes de uso com confian a O AutoTrader ofereceu uma grande oportunidade de mostrar os detalhes dos componentes e da linguagem de projeto visual do Android servindo como um poderoso exemplo para o pontap inicial deste livro Ainda assim essa apenas uma vi
19. m cabe alho de se o no estilo do iOS Como discutido no cap tulo 2 o Android utiliza o princ pio de estilo visual espa o m vel sem limites Mobile Space Unbound que remove quaisquer containers e caixas especialmente os de cantos arredondados Depois Como discutido no cap tulo 10 h v rias maneiras amig veis ao toque para im plementar a entrada de s ries de valores no Android A mais direta a convers o da roleta composta em roletas distintas para a sele o de valores m ximos e m nimos marcadas por uma linha com um pequeno tri ngulo direita A figura 112 mostra como isso pode parecer Cap tulo 1 Projetando para o Android um estudo de caso 37 YEAR RANGE 1981 2013 Figura 1 12 A remodelagem usa controles nativos do Android no formato de roleta e um cabe alho de se o Ainda que controles no estilo roleta ofere am uma solu o decente voc pode usar uma variedade de outros padr es de projeto de intera o Os cap tulos 10 e 11 discutem um controle composto no estilo de uma lista suspensa drop down controles deslizantes distintos para valores m nimos e m ximos um controle deslizante duplo e um controle deslizante com o padr o de projeto experimental Histograma Histogram A aplica o desses padr es n o complicada mas um trabalho sofisticado discutido detalhadamente na parte II deste livro Os padr es s o projetados especialmente para limitar os casos de resultado
20. nos testes Dessa forma para a remodelagem do aplicativo AutoTrader voc deve usar o breve tutorial sobreposto descrito no cap tulo 5 A experi ncia de boas vindas ou um padr o Watermark de transi o animada descrito no cap tulo 13 para des tacar o controle de deslizamento de visualiza es para o usu rio e melhorar a experi ncia de descoberta dessa importante funcionalidade Independentemente da introdu o de boas vindas que voc optar por apresentar o tutorial n o mais necess rio depois que o usu rio compreende a a o podendo ser suprimido Por isso esses padr es n o ser o mostrados aqui 44 Padr es de Projeto para o Android A a o de deslizamento em alguns aplicativos usada para navegar entre as abas Se voc quiser preservar a a o deslize para a pr xima para navegar para o pr ximo detalhamento de item use apenas abas para o toque no topo da p gina como mostrado na figura 1 19 ANO YOUR BAY AREA JAGUAR BETALER Used 2006 BMW 325i Sedan 15 900 64 350 miles Roadsport BODY STYLE Sedan EXTERIOR COLOR Sparkling Graphite Meallic INTERIOR COLOR Black ENGINE 6 Cylinder Gasoline DRIVE TYPE 2 Wheel Drive Rear FUEL TYPE Gasoline Figura 119 assim que voc pode remodelar a p gina de detalhes do AutoTrader As a es contextuais prim rias e secund rias podem agora ser colocadas na barra de a es Como existem apenas tr s a es na p gina de
21. nta o tratamento padr o da seta do iOS Da mesma forma j ob servada na tela principal o menu no topo do aplicativo pode ser obtido com o toque na tecla de menu na barra de navega o na parte inferior do dispositivo Cap tulo 1 Projetando para o Android um estudo de caso 39 4 750 idos 111 650 miles Black gt A Plus Imports Used 1988 BMW 325i 3 500 A 44 989 miles Black gt A Plus Imports Used 2004 BMW 325i 10 995 E 86 635 miles Silver gt Motor Team 14 000 72 848 miles E Peninsula Infiniti gt Figura 1 14 A tela de resultados de busca apresentada desta forma antes de sua remodelagem Depois O menu de navega o de n vel superior no estilo gaveta Drawer foi segura mente removido da tela com os resultados de busca O toque no cone no canto superior esquerdo leva de volta tela inicial onde o usu rio pode chegar ao menu principal simplesmente tocando novamente o mesmo bot o Isso libera espa o na tela para os bot es contextuais de a o Filter Map e Share respectivamente filtrar mapa e compartilhar conforme visto na figura 115 A partir da vers o Ice Cream Sandwich do sistema operacional a fun o Share compartilhar ganhou um uso especial em fun o das m ltiplas fun es de compartilhamento agora oferecidas Assim voc pode implementar a a o Share na forma de um menu suspenso de acordo com os padr es de projeto da interface de usu
22. o estilo antigo o que constitui um antipadr o Depois O primeiro conserto a ser feito no estilo dos bot es Os cantos arredondados e chanfros devem ser simplesmente eliminados e as fun es identificadas por palavras como Settings devem sair da barra de a es No Android 40 as a es presentes na barra de a es aparecem como cones e as a es do menu sobrepos to aparecem como texto Mantendo esse esquema a primeira sugest o levar as fun es do menu antigo para a barra de a es como mostrado na figura 1 5 Nessa vers o o bot o Settings tornou se o cone com o martelo e a chave inglesa e o menu de navega o inferior foi movido para o menu que se sobrep e tela na barra de a es O logotipo gigante da empresa foi substitu do por um do estilo da barra de a es do Android 40 combinando com o cone de lan amento no formato da letra A e o t tulo da tela Note que de acordo com as diretrizes de modelagem do Android o t tulo da tela n o deve exceder 50 da largura total dela o que n o o caso aqui isso apenas algo que voc deve ter em mente 30 Padr es de Projeto para o Android E ls BMW 325i BMW 325i Scan and Find Milpitas CA within 25 miles gt Milpitas CA My AutoTrader New Used amp Certified Cars New Used amp Certified Cars Year Range 1981 2013 Year Range 1981 2013 Price Range S0 100 000 Price Range S0 S100 000 Figura 1 5 A vers o 1
23. s o geral dos muitos padr es de projetos ino vadores interessantes e teis encontrados no Android Antes do aprofundamento nos padr es de projeto que formam a maior parte do material deste livro o pr ximo cap tulo aborda superficialmente alguns poucos aspectos do Android que o diferenciam de outros sistemas operacionais para dispositivos m veis
24. s de busca Como mencionado anteriormente os espa os da tela devem permitir o toque sem o uso de nenhum tipo de indicador visual espec fico Se uma a o como o aprofundamento em telas de detalhamento dos resultados de busca impor tante para o cliente ela deve estar dispon vel na forma de um alvo de toque sem nenhum indicador visual externo Falando nisso tempo de fingir que algu m realmente tocou nos resultados de busca A pr xima se o descreve a terceira e ltima tela o detalhamento dos resultados Cap tulo 1 Projetando para o Android um estudo de caso 4 4 750 111 650 miles Black A Plus Imports Used 1988 BMW 325i 3 500 44 989 miles Black A Plus Imports Used 2004 BMW 325i F 10 995 eas 86 635 miles Silver Motor Team Used 2006 BMW 325i 14 000 72 848 miles g Peninsula Infiniti Figura 1 16 A Vers o 2 0 recomendada para a tela de busca do aplicativo Auto Trader adicionando um seletor de tipo de ordena o para as visualiza es Detalhamento dos resultados O que acontece quando o cliente aprofunda sua navega o chegando tela de detalhamento dos carros Esta ltima tela oferece muitas oportunidades para uma nova remodelagem para o Android desde a arquitetura da informa o at abas e bot es Antes Atela de detalhamento como todas as anteriores inclui principalmente elementos nativos do iOS Fig 1 17 Como discutido anteriormente
25. s nulos na busca como escolher uma faixa de valores de pre os que sejam baixos demais ou n o existir estoque para o ano desejado Esse o t pico discutido detalhadamente no cap tulo 9 Evitando resultados nulos ou indesejados Os formul rios no Android 40 e 4 1 t m fluidez para se ajustarem a uma variedade de alturas e larguras de tela Assim ao inv s de usar containers para as se es dos formul rios as v rias partes deles s o separadas umas das outras por cabe a lhos simples Cabe alhos nativos s o exibidos em letras mai sculas com a fonte Roboto a Helv tica usada em figuras sublinhados com uma linha divis ria fina em uma cor contrastante Bot es O aplicativo AutoTrader usa bot es no estilo iOS com cantos arredondados e chanfros Os bot es est o em duas diferentes alturas com tratamentos visuais tamb m distintos e com muito espa o entre eles o que deixa a tela bastante as sim trica Al m disso os bot es est o posicionados como Search Reset buscar limpar em outras palavras na ordem OK Cancel OK Cancelar como pode ser visto na figura 1 13 Conforme descrito no cap tulo 11 Formul rios a orienta o preferencial dos bot es a oposta a essa Cancel OK assim a remodelagem inverte os bot es a partir de sua posi o no leiaute anterior 38 Padr es de Projeto para o Android E e ee Figura 1 13 Os bot es atuais do AutoTrader s o mostrados no topo da figura na remo
26. ua vez dita muitas das escolhas e diretivas do projeto visual b sico Cap tulo 1 Projetando para o Android um estudo de caso 35 P gina de sele o dedicada A p gina de sele o dedicada Dedicated Selection Page o padr o prim rio para a sele o a partir de uma longa lista Ela ser abordada mais detalhadamente no cap tulo 12 Servi os banc rios para dispositivos m veis O aplicativo Auto Tra der usa o estilo de sele o do iOS com o sinal de maior ou o s mbolo da seta apontando para a direita gt como pode ser visto no topo da figura 110 BMW 325i gt Milpitas CA Within 25 miles gt BMW 325i Milpitas CA Within 25 miles Figura 1 10 O topo da figura mostra o link para a p gina de sele o dedicada antes da remodelagem sua parte de baixo o tratamento sugerido para o Android 4 0 O iOS usa o gt para mostrar a interatividade baseada em linhas Em contraste no sistema operacional Android n o existe a indica o dessa funcionalidade subja cente Como discutido no cap tulo 2 o conceito de toque em qualquer lugar Tap Anywhere importante no sistema Android Se h qualquer raz o para tocar em qualquer coisa como um seletor presume se que ele possui a interatividade correspondente Assim o projeto visual implementado de acordo com o jeito espartano do Android utilizando um fundo levemente mais escuro na linha sem o sinal de maior Sele o e controle
27. ue ela exige que todos os itens do menu sejam puramente texto Quando voc usa apenas texto perde o aspecto l dico que 32 Padr es de Projeto para o Android os cones trazem computa o m vel o que ao menos para mim o cora o da navega o m vel Eu percebo repetidas vezes que o uso de cones e texto em conjunto torna a navega o muito mais efetiva Quando os clientes utilizam pela primeira vez um aplicativo eles dependem de ambos os aspectos da navega o Depois que o est o utilizando por algum tempo o cone frequentemente oferece a carga de informa o suficiente para garantir o reconhecimento da a o que ele representa E o Android Oferece alguma forma de usar tanto cones como texto em conjunto Afortunadamente a recente remodelagem do aplicativo Google Plus aponta a forma de utilizar tanto cones como textos por meio do elemento Drawer ga veta como visto na figura 1 7 O Drawer e outros padr es de navega o do tipo de Canivete su o s o abordados no cap tulo 13 Navega o dessa forma n o necess rio tratar deles aqui Basta dizer que a interface de usu rio do elemento Drawer permite o uso tanto de cones como de texto o melhor de dois mundos Es Z Stream WHAT S HOT ALL CIR Stream JR Raphael Profile Nexus 4 vs Galaxy Nexus Gentlemen start Messenger Gentlemen start your eng Atondering just how muc just how muc Z2 Hangout Photos Circles Local Nexus l
28. um porte direto para o Android 4 0 com configura es e a es no menu sobreposto Infelizmente como discutido na se o Antes essas mudan as n o est o nem pr ximas de serem suficientes Essa remodelagem b sica lida com o porte da ar quitetura de informa o para o Ice Cream Sandwich mas n o com as limita es da arquitetura da aplica o atual fun es chave como a Find Dealers encontrar revendas e My AutoTrader op es e buscas personalizadas pelo usu rio ainda est o escondidas e o cone que substitui Settings claramente n o de utilidade alguma Pior do que isso a coloca o do bot o Settings na barra superior ir de fato desencorajar a explora o do menu quando o cliente descobrir que essa fun o basicamente muito ruim Isso enviar um forte sinal de que as demais fun es escondidas no menu sobreposto s o ainda piores E o design pode ser mais aprimorado Uma abordagem poss vel mover as fun es Find Dealers e My AutoTrader para a barra de a es superior e Settings para o menu sobreposto A figura 1 6 mostra como isso ficaria Cap tulo 1 Projetando para o Android um estudo de caso 31 Scan and Find BMW 325i gt BMW 325i Settings Milpitas CA within 25 miles gt Milpitas CA within 25 miles gt New Used amp Certified Cars New Used amp Certified Cars Year Range 1981 2013 Year Range 1981 2013 Price Range S0 100 000 Price Range S0 S100000
Download Pdf Manuals
Related Search