Download - [dig2012] 12 - Interfaces mobile
![Page 1: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/1.jpg)
Interfaces EmbarcadasEduardo Novais - Design de Interfaces Gráficas
sábado, 21 de abril de 2012
![Page 2: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/2.jpg)
Interfaces mobile e em telas touchscreen estão se tornando cada vez mais popular.
sábado, 21 de abril de 2012
![Page 3: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/3.jpg)
trendwatching.com (FEV/2012)
sábado, 21 de abril de 2012
![Page 4: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/4.jpg)
POINT-KNOW-BUY | Com métodos de busca e informação à base de texto largamente disponíveis à maioria das pessoas, (...) inicia-se a corrida para disponibilizar métodos de busca e informações visuais instantâneos (...). Logo, qualquer objeto(senão pessoa) no mundo real poderá ser "conhecido" por consumidores equipados com smartphones (...). Estes aparelhos poderão ser apontados a qualquer coisa para obter/encontrar informações pertinentes, sempre que seus usuários quiserem. E claro, algum tipo de comércio baseado nisso deverá vir em seguida ;-)
sábado, 21 de abril de 2012
![Page 5: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/5.jpg)
sábado, 21 de abril de 2012
![Page 6: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/6.jpg)
Divisão do Mercado em Duas Plataformas
sábado, 21 de abril de 2012
![Page 7: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/7.jpg)
sábado, 21 de abril de 2012
![Page 8: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/8.jpg)
Têm-se aí, um mercado já não tão novo mas ainda cheio de oportunidades e crescimento
sábado, 21 de abril de 2012
![Page 9: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/9.jpg)
interfaces mobile
sábado, 21 de abril de 2012
![Page 10: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/10.jpg)
O design para tais aplicativos é diferente para páginas Web e R.I.A.
sábado, 21 de abril de 2012
![Page 11: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/11.jpg)
UsoPlanejamentoTelaÍconeTeste
sábado, 21 de abril de 2012
![Page 12: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/12.jpg)
UsoPlanejamentoTelaÍconeTeste
sábado, 21 de abril de 2012
![Page 13: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/13.jpg)
Situações de Uso
sábado, 21 de abril de 2012
![Page 14: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/14.jpg)
Considerar o que as pessoas estão fazendo enquanto estão usando seu aplicativo.
sábado, 21 de abril de 2012
![Page 15: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/15.jpg)
sábado, 21 de abril de 2012
![Page 16: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/16.jpg)
O horário de pico do uso de um iPad para entretenimento é de 20 às 23 hs.
sábado, 21 de abril de 2012
![Page 17: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/17.jpg)
sábado, 21 de abril de 2012
![Page 18: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/18.jpg)
Já o iPhone pode ser utilizado em filas de banco ou dentro de um ônibus.
sábado, 21 de abril de 2012
![Page 19: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/19.jpg)
Manipulando a interface
sábado, 21 de abril de 2012
![Page 20: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/20.jpg)
sábado, 21 de abril de 2012
![Page 21: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/21.jpg)
O dedo é maior e menos preciso que um mouse.
sábado, 21 de abril de 2012
![Page 22: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/22.jpg)
As área ativas em uma interface touchscreen devem ter uma margem de erro, sem controles muito próximos.
sábado, 21 de abril de 2012
![Page 23: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/23.jpg)
O tamanho mínimo que a Apple sugere é de 44 x 44 px.
sábado, 21 de abril de 2012
![Page 24: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/24.jpg)
Se a área visual de um controle é menor que a mínima recomendada, certifique-se de que a área da tela ativa que responde ao toque de um usuário seja suficiente grande para garantir a operação.
sábado, 21 de abril de 2012
![Page 25: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/25.jpg)
Padrões
sábado, 21 de abril de 2012
![Page 26: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/26.jpg)
Usuários esperam certos comportamentos e interfaces. Não se usa o gesto de pinch para nenhuma função além de aumento ou redução de zoom.
sábado, 21 de abril de 2012
![Page 27: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/27.jpg)
sábado, 21 de abril de 2012
![Page 28: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/28.jpg)
Gesture Action
Tap To press or select a control or item (analogous to a single mouse click).
DragTo scroll or pan (that is, move side to side).To drag an element.
Flick To scroll or pan quickly.
SwipeWith one finger, to reveal the Delete button in a table-view row or to reveal Notification Center (from the top edge of the screen).With four fingers, to switch between apps on iPad.
Double tapTo zoom in and center a block of content or an image.To zoom out (if already zoomed in).
PinchPinch open to zoom in.Pinch close to zoom out.
Touch and hold In editable or selectable text, to display a magnified view for cursor positioning.
Shake To initiate an undo or redo action.
sábado, 21 de abril de 2012
![Page 29: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/29.jpg)
Esquemas de cores oferecem um pouco mais de liberdade criativa.
sábado, 21 de abril de 2012
![Page 30: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/30.jpg)
UsoPlanejamentoTelaÍconeTeste
sábado, 21 de abril de 2012
![Page 31: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/31.jpg)
Definições
sábado, 21 de abril de 2012
![Page 32: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/32.jpg)
Defina claramente o objetivo de seu app antes de pensar no visual, bem como seu público-alvo.
sábado, 21 de abril de 2012
![Page 33: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/33.jpg)
Defina o recurso principal do aplicativo o quanto antes. Não se desvie desse objetivo colocando funções opcionais.
sábado, 21 de abril de 2012
![Page 34: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/34.jpg)
sábado, 21 de abril de 2012
![Page 35: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/35.jpg)
Público-alvo
sábado, 21 de abril de 2012
![Page 36: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/36.jpg)
Planeje o aplicativo sempre na perspectiva do usuário.
sábado, 21 de abril de 2012
![Page 37: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/37.jpg)
Cada público tem seu estilo: um aplicativos de negócios não deve ter um visual cartoon.
sábado, 21 de abril de 2012
![Page 38: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/38.jpg)
sábado, 21 de abril de 2012
![Page 39: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/39.jpg)
sábado, 21 de abril de 2012
![Page 40: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/40.jpg)
sábado, 21 de abril de 2012
![Page 41: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/41.jpg)
sábado, 21 de abril de 2012
![Page 42: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/42.jpg)
O estilo couro costurado no app "Find my friends" é um exemplo do que não deve ser feito
sábado, 21 de abril de 2012
![Page 43: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/43.jpg)
Não projete o app da maneira mais fácil de desenvolver.
sábado, 21 de abril de 2012
![Page 44: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/44.jpg)
Estrutura
sábado, 21 de abril de 2012
![Page 45: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/45.jpg)
Comece o processo de design com a estrutura de navegação e, em seguida crie os blocos de funções principais.
sábado, 21 de abril de 2012
![Page 46: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/46.jpg)
Desenhe o fluxograma completo do aplicativo conectando todas as telas e pontos.
sábado, 21 de abril de 2012
![Page 47: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/47.jpg)
Pense no seu App uma tela por vez. Concentre-se no objetivo principal que cada tela vai ter.
sábado, 21 de abril de 2012
![Page 48: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/48.jpg)
Comece com estrutura, arquitetura de informação e padrões de interação bem elaborados, e mantenha-os consistentes. Assim, pode-se acrescentar características secundárias sem comprometer o núcleo do app.
sábado, 21 de abril de 2012
![Page 49: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/49.jpg)
Evite mostrar muitas informações: amontoar as coisas em telas pequenas confude o usuário.
sábado, 21 de abril de 2012
![Page 50: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/50.jpg)
sábado, 21 de abril de 2012
![Page 51: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/51.jpg)
Desenvolva o projeto e funcionalidade o máximo que puder no papel, usando estênceis disponíveis para iPad e iPhone como guias.
sábado, 21 de abril de 2012
![Page 52: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/52.jpg)
sábado, 21 de abril de 2012
![Page 53: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/53.jpg)
sábado, 21 de abril de 2012
![Page 54: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/54.jpg)
sábado, 21 de abril de 2012
![Page 55: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/55.jpg)
Desenvolva o mock-up do aplicativo, retire captura das telas e visualize-as no aplicativos de fotos para garantir que sejam bem apresentadas.
sábado, 21 de abril de 2012
![Page 56: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/56.jpg)
sábado, 21 de abril de 2012
![Page 57: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/57.jpg)
sábado, 21 de abril de 2012
![Page 58: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/58.jpg)
Defina o nível de personalização que sua interface terá. Lembre-se disso em todas as fases.
sábado, 21 de abril de 2012
![Page 59: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/59.jpg)
Certifique-se que o usuário possa encontrar as características mais importantes do app em um ou dois toques. Mesmo os mais avançados devem ser acessados em no máximo 3 toques.
sábado, 21 de abril de 2012
![Page 60: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/60.jpg)
Android
sábado, 21 de abril de 2012
![Page 61: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/61.jpg)
Se portar algum aplicativo para Android, alguns aparelhos trabalham com layout fixo, vale redesenhar algumas telas.
sábado, 21 de abril de 2012
![Page 62: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/62.jpg)
Por ter outras formas de interação, o uso de uma app Andróid pode variar bastante.
sábado, 21 de abril de 2012
![Page 63: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/63.jpg)
UsoPlanejamentoTelaÍconeTeste
sábado, 21 de abril de 2012
![Page 64: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/64.jpg)
Definições
sábado, 21 de abril de 2012
![Page 65: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/65.jpg)
A principal diferença em projetar para a web e para tablet é que cada elemento tem uma posição fixa, diferente da web. Isso requer cuidado, mas deve ser encarado com um benefício.
sábado, 21 de abril de 2012
![Page 66: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/66.jpg)
Lembre-se também que o tamanho de tela em dispositivos móveis varia bastante
sábado, 21 de abril de 2012
![Page 67: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/67.jpg)
sábado, 21 de abril de 2012
![Page 68: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/68.jpg)
Restrições
sábado, 21 de abril de 2012
![Page 69: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/69.jpg)
As retrições de um smartphone restringem o projeto de uma app somente para sua função principal.
Já em um tablet, podemos considerar a inclusão de recursos adicionais.
sábado, 21 de abril de 2012
![Page 70: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/70.jpg)
Projetando para diferentes telas
sábado, 21 de abril de 2012
![Page 71: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/71.jpg)
Ao projetar para iPad e para iPhone, comece sempre pela tela maior e depois simplifique o design para a menor.
sábado, 21 de abril de 2012
![Page 72: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/72.jpg)
Aproveite o máximo dos modos retrato e paisagem para incorporar diferentes pontos de vista e funções.
sábado, 21 de abril de 2012
![Page 73: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/73.jpg)
Esticar um layout de um smartphone para um tablet pode parece mais fácil, mas a maneira indicada - embora demorada - é repensar totalmente a interação.
sábado, 21 de abril de 2012
![Page 74: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/74.jpg)
Dicas
sábado, 21 de abril de 2012
![Page 75: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/75.jpg)
Em apps para uso em tempo real (como jogos) é muito importante deixar os elementos principais grandes de forma que sejam selecionados com facilidade.
sábado, 21 de abril de 2012
![Page 76: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/76.jpg)
Pelas suas limitações (falta de teclado, tela pequena e poucos botões físicos), é necessário uma hierarquia das partes mais importantes de cada tela.
Se um botão é apertado constantemente, deixe-o na parte inferior da tela.
sábado, 21 de abril de 2012
![Page 77: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/77.jpg)
UsoPlanejamentoTelaÍconeTeste
sábado, 21 de abril de 2012
![Page 78: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/78.jpg)
Se um ícone não chama a atenção, ele não cumpre sua tarefa.
sábado, 21 de abril de 2012
![Page 79: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/79.jpg)
O ícone é a primeira impressão que o usuário tem do app. Se ele for mal feito, você não terá sucesso.
sábado, 21 de abril de 2012
![Page 80: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/80.jpg)
O ícone NÃO precisa comunicar todas as funções do app, mas deve parecer profissional e ter relação com a interface de seu aplicativo.
sábado, 21 de abril de 2012
![Page 81: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/81.jpg)
sábado, 21 de abril de 2012
![Page 82: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/82.jpg)
O ícone pode ser detalhado, mas esse detalhe não pode prejudicar o seu foco central.
sábado, 21 de abril de 2012
![Page 83: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/83.jpg)
Evite colocar textos no ícone: mantenha-o como uma representação visual do aplicativo.
sábado, 21 de abril de 2012
![Page 84: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/84.jpg)
sábado, 21 de abril de 2012
![Page 85: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/85.jpg)
Um bom ícone deve mostrar suas funções com clareza e transparência, mas de uma forma visualmente atraente.
sábado, 21 de abril de 2012
![Page 86: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/86.jpg)
Usuários de iOs são exigentes em relação aos ícones que selecionam na tela principal.
sábado, 21 de abril de 2012
![Page 87: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/87.jpg)
sábado, 21 de abril de 2012
![Page 88: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/88.jpg)
sábado, 21 de abril de 2012
![Page 89: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/89.jpg)
sábado, 21 de abril de 2012
![Page 90: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/90.jpg)
Planejamento
sábado, 21 de abril de 2012
![Page 91: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/91.jpg)
Ao desenvolver um ícone, compare-o com outros das principais categorias da app store.
sábado, 21 de abril de 2012
![Page 92: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/92.jpg)
sábado, 21 de abril de 2012
![Page 93: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/93.jpg)
sábado, 21 de abril de 2012
![Page 94: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/94.jpg)
Desenvolva um mock-up do ícone no meio de outros apps.
sábado, 21 de abril de 2012
![Page 95: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/95.jpg)
sábado, 21 de abril de 2012
![Page 96: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/96.jpg)
Lembre-se de criar todos os tamanhos possíveis para garantir que o ícone será exibido com boa resolução.
sábado, 21 de abril de 2012
![Page 97: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/97.jpg)
Se a Apple colocá-lo em destaque, haverá poucos dias para mandar uma versão em alta-resolução.
sábado, 21 de abril de 2012
![Page 98: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/98.jpg)
sábado, 21 de abril de 2012
![Page 99: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/99.jpg)
Dicas
sábado, 21 de abril de 2012
![Page 100: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/100.jpg)
Evite deixar para pensar no ícone muito tarde.
sábado, 21 de abril de 2012
![Page 101: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/101.jpg)
Ícones simples são sempre os melhores.
sábado, 21 de abril de 2012
![Page 102: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/102.jpg)
UsoPlanejamentoTelaÍconeTeste
sábado, 21 de abril de 2012
![Page 103: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/103.jpg)
Peça a alguém que não conhece o projeto olhar o esboço de seu projeto e dizer se as funções parecem naturais a ele.
sábado, 21 de abril de 2012
![Page 104: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/104.jpg)
Mostre o resultado a algumas pessoas que não conhecem o app e confira se entendem o conceito.
sábado, 21 de abril de 2012
![Page 105: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/105.jpg)
Encontre um usuário com mãos grandes, pois é a forma mais eficaz para descobrir se algum elemento está de difícil acesso.
sábado, 21 de abril de 2012
![Page 106: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/106.jpg)
sábado, 21 de abril de 2012
![Page 107: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/107.jpg)
Quando tiver um protótipo funcional, convide alguém para um café em troca de um teste de usabilidade informal de 10 minutos.
sábado, 21 de abril de 2012
![Page 108: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/108.jpg)
sábado, 21 de abril de 2012
![Page 109: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/109.jpg)
Faça testes finais do app em dispositivos reais. (Ainda mais se for para Android).
sábado, 21 de abril de 2012
![Page 110: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/110.jpg)
Páginas Mobile
sábado, 21 de abril de 2012
![Page 111: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/111.jpg)
Rapidez
sábado, 21 de abril de 2012
![Page 112: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/112.jpg)
Bons sites mobile são elegantes e simples. Tente entender o que as pessoas que estão visitando o seu site vão realmente querer ver - pesquise aos seis clientes o que é importante para eles e faça considerações sobre que informações eles irão querer acessar rapidamente, tais como informações de reserva, cardápio e localização em uma página de um restaurante.
sábado, 21 de abril de 2012
![Page 113: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/113.jpg)
Arquitetura limitada
sábado, 21 de abril de 2012
![Page 114: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/114.jpg)
Tente manter o máximo de três níveis de navegação em um site mobile. Alguns designers tentam se manter em apenas dois níveis. Usuários de sites mobile querem a informação rapidamente, eles não irão querer clivar em vários locais até chegar na informação que desejam
sábado, 21 de abril de 2012
![Page 115: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/115.jpg)
Tipografia
sábado, 21 de abril de 2012
![Page 116: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/116.jpg)
A antiga regra de tipografia para web ainda é válida por aqui, tente evitar fontes com serifa a não ser que a fonte muito boa leitura. A boa notícia é que com fontes incorporadas, abre-se uma grande gama de possibilidades. Ainda assim, mantenha as coisas o mais simples possíveis.
sábado, 21 de abril de 2012
![Page 117: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/117.jpg)
Imagens
sábado, 21 de abril de 2012
![Page 118: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/118.jpg)
Criar um gráfico em 72 dpi implica em uma imagem pixelada em um iPhone4. Não há problema em fazer uma imagem que é maior do que o mínimo necessário - usando um JPEG otimizado para que o arquivo não seja muito grande - e, em seguida deixar o código cuidar de encolhê-lo onde for necessário.
sábado, 21 de abril de 2012
![Page 119: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/119.jpg)
Perspectiva do usuário
sábado, 21 de abril de 2012
![Page 120: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/120.jpg)
Tente compreender o uso do dispositivo do ponto de vista do usuário. Teste o seu design em um dispositivo e peça para o seus clientes testarem também, assim você poderá ver que existem algumas informações que não deveriam estar ali ou que não foram incluídas. Teste com usuário é sempre muito importante.
sábado, 21 de abril de 2012
![Page 121: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/121.jpg)
Alivie a carga
sábado, 21 de abril de 2012
![Page 122: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/122.jpg)
Quando as pessoas acessam um site mobile elas não estão em casa. É possível que eles estejam inclusive caminhando. Muito usuários ainda tem o limite de dados. Assim, se seu site é muito cheio de imagens, é possível que ele saia também muito caro para o seu usuário.
sábado, 21 de abril de 2012
![Page 123: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/123.jpg)
Construa Relacionamentos
sábado, 21 de abril de 2012
![Page 124: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/124.jpg)
Já que o design é o que primeiro vende o seu produto, a relação do usuário nasce entre ele e o website. Tudo diz respeito a como ele interage com o site e faz o que deseja. A apresentação do site deve ser fluida e simples para poder construir um forte relacionamento com o usuário.
sábado, 21 de abril de 2012
![Page 125: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/125.jpg)
Mesmas diferenças
sábado, 21 de abril de 2012
![Page 126: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/126.jpg)
Ainda que você precise estar consciente do fato de que nem todo mundo está usando o mesmo dispositivo - por exemplo, nem todos os smartphones têm touchscreens - a tecnologia utilizada em diferentes dispositivos móveis é quase a mesma. Então lembre-se que nem todos tem a mesma resolução de tela ou formas de entrada de dados, mas não se preocupe muito com isso.
sábado, 21 de abril de 2012
![Page 127: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/127.jpg)
Inspiração
sábado, 21 de abril de 2012
![Page 128: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/128.jpg)
sábado, 21 de abril de 2012
![Page 129: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/129.jpg)
sábado, 21 de abril de 2012
![Page 130: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/130.jpg)
sábado, 21 de abril de 2012
![Page 131: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/131.jpg)
Referências
sábado, 21 de abril de 2012
![Page 132: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/132.jpg)
http://trendwatching.com/pt/trends/pointknowbuy/
http://blog.nielsen.com/nielsenwire/consumer/more-us-consumers-choosing-smartphones-as-apple-closes-the-gap-on-android/
http://blog.iskysoft.com/category/mac/
sábado, 21 de abril de 2012
![Page 133: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/133.jpg)
http://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/Characteristics/Characteristics.html#//apple_ref/doc/uid/TP40006556-CH7-SW7
http://www.tentandote.com/2010/03/02/gallery-for-prototyping-android-applications-en-galeria-para-prototipar-aplicaciones-de-android-es/
sábado, 21 de abril de 2012
![Page 134: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/134.jpg)
http://www.rainydaymagazine.com/RDM2010/Home/July/Week5/RDMHomeJul3010.htm
http://emilychang.com/2010/03/ipad-templates-and-stencils/
http://blog.vovici.com/Portals/60483/images/Screen_resolution_by_device.png
http://www.macstories.net/ipad/imockups/
sábado, 21 de abril de 2012
![Page 135: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/135.jpg)
http://www.computerarts.co.uk/features/50-tips-designing-brilliant-ios-apps
http://www.androidpatterns.com/
http://www.iosinspires.me/
http://www.iosinspires.me/category/appicons/
http://mrgan.tumblr.com/post/708404794/ios-app-icon-sizes
sábado, 21 de abril de 2012
![Page 136: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/136.jpg)
http://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/Characteristics/Characteristics.html#//apple_ref/doc/uid/TP40006556-CH7-SW1
http://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html
sábado, 21 de abril de 2012
![Page 137: [dig2012] 12 - Interfaces mobile](https://reader034.vdocuments.us/reader034/viewer/2022052619/555ad802d8b42a62528b4ab8/html5/thumbnails/137.jpg)
http://mobile-patterns.com/
http://pttrns.com/
http://kenyarmosh.com/blog/ios-pattern-slide-out-navigation/
http://androidniceties.tumblr.com/
http://mobilegui.net/inspiration/
sábado, 21 de abril de 2012