terça-feira, 31 de julho de 2012

Padrões de Design no Android

Olá! Aqui no blog, até agora, só fizemos posts e tutoriais sobre desenvolvimento, códigos, APIs, mas não só disso são feitos os aplicativos. Já comentei sobre a importância de um bom design na produção de um bom aplicativo, mas esse será o primeiro post dedicado exclusivamente a isso.

Por que se deve usar padrões? Se seu aplicativo utilizar padrões que o usuário já conhece, então ele também já sabe como usar seu aplicativo. Ou seja, deixa o aplicativo mais fácil de se utilizar, usuários terão uma melhor experiência, mais pessoas utilizarão e mais "vendas" você terá.

Então se você quer que muitas pessoas utilizem seu aplicativo, use sempre que possível os padrões do Android. Claro que se houver algo muito único a se fazer, ou se você encontrou uma forma muito boa de fazer algo, use-o, mas tente deixar de uma forma que seja fácil aprender essa nova utilização. A seguir irei abordar alguns padrões mais conhecidos, como e quando utiliza-los (ou não):

Action Bar

A Action Bar vem para solucionar alguns problemas comumente encontrado em aplicativos: você quer que o usuário saiba onde está, e quer oferecer ações frequentes a fácil acesso, e é exatamente isso que a Action Bar faz. Normalmente ela possui um logo que quando clicado leva a Home ou a navegação Up, possui um título da tela atual e os botões de ação frequentes. Em tablets ela também é usada para navegação através de tabs ou spinners (dropdown lists).

A partir do Honeycomb (3.0) a Action Bar passou a ser implementada nativamente, com classes no SDK que ajudam (e muito) na criação e manipulação da Action Bar. Em versões anteriores ela tem que ser criada utilizando layouts, views, e isso fica a cargo do desenvolvedor.








Dashboard

O Dashboard tem como objetivo definir um ponto de entrada para o seu aplicativo, exibindo as categorias (ou ações) disponíveis. Geralmente apresenta um ícone e um nome imediatamente abaixo e fica disposta em grade, geralmente de duas colunas para orientação em portrait e três colunas na orientação landscape

Pessoalmente eu recomendo utilizar esse padrão apenas quando se tem várias categorias (entre 3 e 8) ou quando os itens representam coisas bastante distintas. Se esse não for o caso, talvez seja melhor apresentar diretamente o conteúdo para o usuário, pois muitas vezes o usuário não sabe o que quer e logo de inicio ter que pedir para que ele decida algo pode não ser muito bom.









Quick Actions

O propósito desse padrão é apresentar opções de ações sobre um determinado item. Funciona da seguinte forma: ao se clicar em um item (1) aparece um "pop-up" que possui referência ao item clicado exibindo as ações possíveis. Enquanto o pop-up estiver aberto, normalmente, ao tocar em algum ponto fora do pop-up ele é dispensado, usando animações tanto na abertura quanto no fechamento.

A vantagem desse padrão é que ele não trava e ocupa toda a tela, atrapalhando menos o usuário. Esse padrão não deve ser usado caso haja alguma ação muito mais frequente que as outras. Nessa caso talvez seja melhor usar um toque simples para a ação frequente e um clique longo exibindo um menu de contexto (ou até mesmo o Quick Actions) com as outras ações.


Uma coisa importante: nunca tente copiar a interface ou design de outra plataforma para o Android. Esse é o maior problema da maioria dos programas que permitem que se crie aplicativos para multi-plataformas, o aplicativo criado dessa forma só vai ficar bom mesmo em no máximo uma plataforma, pois cada uma tem suas peculiaridades e forçar uma na outra só vai confundir o usuário.

Por hoje é só. Se quiser saber mais sobre padrões comente no post dando sua opinião e buscando no resto da internet. Até mais.

17 comentários:

Matheus Grijo at 31 de julho de 2012 09:45 disse...

Parabéns pelo post!
Muito bom!
Continue assim!

Hellen Karolyne at 3 de agosto de 2012 12:17 disse...

Cê abandonou seus apps? Uso todos e não tenho recebido atualizações. Uma pena se desistiu. São muito massa. Vlw!

Gustavo Carvalho at 4 de agosto de 2012 18:20 disse...

@Hellen

Não abandonei, apenas tenho estado bastante ocupado esses dias... Mas pode deixar que novidades virão em breve!

Obrigado por usa-los.

Vitor Morelli at 7 de agosto de 2012 10:03 disse...

Bom dia Gustavo!
Parabéns pelo post!
Gostaria que vc desse uma olhada em meu APP, para alguma sugestão ou criticas! posso postar o link aqui?

Abraço!

Gustavo Carvalho at 11 de agosto de 2012 15:50 disse...

@Vitor: Claro, seria muito interessante. Posta aí.

Vitor Morelli at 13 de agosto de 2012 11:35 disse...

Opa, vlw!! e nao leva muito a sério, foi meu primeiro app, e tenho várias idéias pra ele ainda, mas quero fazer outra versão com mais recursos.
Qualquer coisa me dá um toque!
Segue o link:

https://play.google.com/store/apps/details?id=br.com.lembreme.telas

Agraço!

Gustavo Carvalho at 15 de agosto de 2012 05:30 disse...

@Vitor: Vamos lá, vou analisar com base na minha experiência e estudo, mas nada aqui é verdade absoluta ok?


A primeira tela está trabalhando contra você. Se o usuário baixou seu aplicativo ele já sabe do que se trata, não precisa explicar novamente (e pior, toda vez que ele entra no app). Ele baixou o app, abre e a primeira coisa que vc pede pra ele é: "Quer mesmo usar o app ou quer sair?" Alias, botões de Sair não fazer sentido no Android já que temos o botão voltar.

2ª tela: Sempre explique o minimo possível com texto. Usuário é impaciente, ele não quer ter q ler para aprender a usar seu app. Nessa tela temos uma ação comum (eu acho) que é adicionar pessoas. Uma action bar com essa opção cairia muito bem aqui. Outra coisa é a opção Voltar no menu, inútil.

Tela de adicionar pessoa: E se eu quiser adicionar uma opção que não ta na lista, um tipo de esporte que não tá naqueles pré-estabelecidos?

Não é possível editar o nome da pessoa? Se eu edito o nome é criado uma nova pessoa. Isso não deveria acontecer.

Por enquanto é isso. Dicas principais: Tire a primeira tela (se quiser troque-a por uma Splash Screen) e use Action Bar.

Vitor Morelli at 15 de agosto de 2012 09:27 disse...

Obrigado pela analise Gustavo!!
Realmente, nao estava gostando mesmo da primeira tela...rs...Então, como eu disse, esse foi o primeiro, sei que poderia ter muitos outros recursos e opções, e foi pra aprender melhor sobre a plataforma, com o tempo vou melhorando ele, minha ideia era montar outro com várias opções pra pessoa cadastrar os itens que deseja colocar e tudo mais.
Obrigado mesmo, com suas sugestões já melhorou bastante minha visao!

Vlw!

Abraço!

Anônimo at 6 de setembro de 2012 15:24 disse...

Olá Gustavo. Site interessante. Já tá no "Favoritos".

Estou encontrando uma certa dificuldade para desenvolver aplicativos para mobiles e tablets. O problema é com as imagens. Fiz um aplicativo usando praticamente JS para quase tudo e deu certo, mas tive que criar páginas em duplicidade com dimensões diferentes. Baita trabalho, mas o resultado ficou perfeito. Estou pensando em desenvolver só para mobile e só para tablet (apps/arquivos diferentes). É possível publicar assim no Google Play? (só para mobile) Você já fez isso?

Renato

Gustavo Carvalho at 16 de setembro de 2012 11:44 disse...

@Anônimo Sim, é possível publicar diferentes apks para um mesmo aplicativo, desde que eles atendam dispositivos exclusivamente diferentes. Nunca fiz isso, mas não é difícil. Entretanto é extremamente recomendado que se utilize apenas um apk, pois é muito mais fácil de manter. Nunca usei JS em aplicativos Android então não sei exatamente como você fez isso, mas a plataforma Android oferece uma boa forma de lidar com diferentes tamanhos de tela, resoluções, etc, sem duplicar códigos: http://developer.android.com/guide/practices/screens_support.html

Anônimo at 26 de setembro de 2012 10:47 disse...

Parabéns pelo tutorial...

qual é a ferramenta que você utilizou para criar estes protótipos?

Adriano

Gustavo Carvalho at 1 de outubro de 2012 11:17 disse...

@Anônimo: As imagens foram retiradas do site http://www.androidpatterns.com

Administrador at 22 de março de 2013 12:48 disse...

Gustavo Carvalho, estou tentando desenvolver um aplicativo, e queria pedir se vc pode me ajudar ensinando como se criar estes menu do Dashboard, e que quando alguen tocar em alguns dos icones, va para o que eu chamo de "area de publicaçoes", tipo a do twitter ( exe: a imagen do quick acition). Sou novo e ainda nso conheço muito sobre programacao, mais sei um pouco de c++,(por que comecei este ano a fazer um curso) , sei html, estou fazendo um curso basico de java. Voce poderia me disponibilizar alguma apostila ou turtorial que ensinan a fazer estes tipos de menus e paginas?.
Desde ja estou grato. Muito bom seu siteee.

Meu email: indiourbanizado@gmail.com

Gustavo Carvalho at 28 de março de 2013 18:02 disse...

@Administrador: O dashboard você pode fazer utilizando um GridView, que funciona de forma similar a uma ListView, que pode ser usada para sua "área de publicações". Não conheço nenhum tutorial especifico disso, mas pesquisando no Google e olhando a documentação oficial ( http://d.android.com ) é possível achar tudo que procura.

Unknown at 14 de agosto de 2013 19:46 disse...

Gustavo, preciso montar um app com 2 abas.
aba 1 e aba 2
na aba 1, colocar 3 editText
na aba 2 um botão. Ao clicar no botão, recuperar os valores dos editText. Isso que preciso.

Anônimo at 28 de fevereiro de 2014 10:25 disse...

Otimo conteudo, sinto falta de um livro focado a este assunto com exemplos de codigo fonte. Voces ja pensaram em escrever algo semelhante? Um ebook igual os oferecidos na casadocodigo.com.br seria mto bom.

Lia Siqueira at 4 de abril de 2014 17:32 disse...

Estava precisando disso, muito obrigada! Continue escrevendo por favor :)

Postar um comentário

 
© 2011 Tutoriandroid | Recode by Ardhiansyam | Based on Android Developers Blog