terça-feira, 7 de agosto de 2012

Como criar Interfaces para o Android - Parte 1



Olá! =D
Meu nome é Victor (Getexis), sou o parceiro de Gustavo na produção de aplicativos para android, sou o responsável pela construção do design e toda a conceitualização por traz do aplicativo.
Fui convidado postar artigos mais aprofundados sobre o assunto, espero que todos gostem.
Então vamos que vamos!

No ultimo post, mostramos os padrões de design, o que abordou o tema "Por que se deve usar padrões?" onde foi explicado os benefícios do uso, o aumento da usabilidade e o quanto equivale para a experiência do usuário.
Se caso não viu, veja : Padrões de design no Android

Seguindo o tema do post passado, hoje vamos falar sobre UX Design, a importância de escrever o projeto (mapa mental ao menos) e rascunhar, antes de levar o projeto para uma prototipagem final e consequentemente Photoshop/ Programação.

Então comecemos:
Primeiramente, é bom salientar, se você quer criar interfaces é importante ir já se familiarizando com o UX Design e o UI Design...

Mas então, o que é UX Design?
UX Design é o estudo da experiência do usuário (UXD ou UED) é um termo amplo que usamos para explicar todos aspectos da experiência do usuário com o app(ente outros sistemas) incluindo interface, gráficos, botões e etc. Toda a experiência do usuário desde da abertura do app ate o fechamento.

Quando desenvolvemos um app, uma interface, temos que criar pensando como o app será intuitivo e como será usado.Criamos o app pensando em como o usuário vai interagir com o app.

Mas como fazer isso?
O primeiro processo é ter o projeto do seu app. Escreva sua ideia, organize as funções, pense em quantas telas terá, defina os botões e quantos vão existir.
Um método muito eficiente é utilizar mapas mentais para  facilitar a compreensão da ideia.

Mapas mentais são diagramas, voltado para a gestão de informações, conhecimento, é usado para a compreensão e solução de problemas, na memorização e aprendizado, na criação de manuais, livros e palestras, como ferramenta de brainstorm(tempestade de ideias) e também no auxílio da gestão de estratégia de uma empresa ou negócio.
Aconselhamos o www.mindmeister.com por ser bem completo, intuitivo e permitir diversas projeções. 

Exemplo:
App Buzina
Toque buzina e incomode os outros.

Funções:
  • Toque manual
  • Toque automático
  • Definição de toque
  • Volume de toque
Telas:
  1. Tela - Inicial
    1. Buzina manual
    2. Buzina Automático
  2. Tela - Buzina Manual
    1. Botão - Toque
    2. Opções
  3. Tela - Opções
    1. Definir buzina
    2. Volume buzina
    3. Salvar
  4. Tela - Buzina Auto
    1. Definir toque
    2. Agendar horário/dia
    3. Salvar
Ai está a ideia de forma simplificada, tudo o que vamos ter no app.
Dessa forma você tem uma visão geral de tudo o que vai ter no app, agora já poderá partir para os rascunhos.
Experimente, abuse da criatividade mas sempre lembrando dos padrões, da intuitividade e de como vai ser a experiencia do usuário.

Rascunho - Não tenha medo de ficar feio. Este processo é experimentação.


Mapa
Bom, por hoje é só. Um post simples mostrando como iniciar o processo de criação de Interfaces.
Fiquem a vontade, dúvidas, sugestões, opniões comente no post. Ficaremos felizes em responder.
No próximo post irei continuar falando sobre esse processo, como fazer uma prototipagem e entre outros temas.Fiquem atentos!
Até mais. =)

13 comentários:

Pedro Ribeiro at 8 de agosto de 2012 às 22:31 disse...

Sou seu fã irmão!

Anônimo at 15 de agosto de 2012 às 16:03 disse...

Cara tem como fazer um crud cadastrando cliente,corretores, e imoveis, filtrando opções de imoveis e talz? faiz um tutorial fodão ai =D.

Flw irmao!

Gustavo Carvalho at 16 de agosto de 2012 às 15:52 disse...

Tem sim, esse tutorial: http://www.tutoriandroid.com/2012/01/persistencia-de-dados-com-sqlite.html

vai te dar uma base para isso.

Anônimo at 9 de setembro de 2012 às 20:20 disse...

Ow brother com esses tutorial tem como eu fazer um jogo foda tipo (q pesa pa krai)??

Gustavo Carvalho at 18 de setembro de 2012 às 17:36 disse...

@Anônimo: Tem sim! Só estudar bem os tutoriais, e mais vários livros, artigos, tutoriais, documentações, aulas e trabalhos práticos e você poderá fazer qualquer coisa que imaginar!

Rithie at 9 de dezembro de 2012 às 20:20 disse...

um estou curioso...aguardando, eu gostaria muito de aprender tanto esse processo, quanto a parte de poder utilizar meu próprio 'photoshop' nas interfaces, personalizar o app. /o/

Rithie at 28 de março de 2013 às 15:04 disse...

estou esperando ansiosamente, estou pesquisando por aí, ainda não encontrei como utilizar meu .psd com aplicações nativas. Alguém sabe de um tutorial?

Coração de Dragão at 22 de junho de 2013 às 19:52 disse...

Gustavo Carvalho poderia me tirar uma dúvida? Tipo o design você faz como se fosse uma figura mesmo? Tipo a tela de menu com os botões. E apenas os widgets que já tem de padrão no SDK que você utiliza ou cria eles? Poderia informar qual aplicativo seria bom para criar o layout dos aplicativos? Obrigado por tudo e é muito bom o seu blog.

Caio Kinupp at 2 de setembro de 2013 às 19:02 disse...

quero fazer um mapa mental de uma ideia de app, mas o mindmieister nao tem um modelo de mapa para app como nas imagens (ou eu nao achei), poderia dar uma forca? vlw

Cássio Brehm Corteze at 5 de setembro de 2013 às 22:55 disse...

Aguardando ansiosamente novos tutoriais :D - cara, PARABÉNS é o mínimo! Show de bola o site!
Abraço

SolFlavia at 19 de outubro de 2014 às 00:35 disse...

Muito bom o trabalho!de vcs bem transparente... parabéns!

Anônimo at 26 de maio de 2015 às 19:34 disse...

Como que eu faço para projetar um jogo com joystick?

Unknown at 18 de agosto de 2015 às 11:32 disse...

Victor, quando teremos a parte 2?

Postar um comentário

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