[dig2012] 12 - Interfaces mobile
-
Upload
eduardo-novais -
Category
Education
-
view
460 -
download
1
Transcript of [dig2012] 12 - Interfaces mobile
Interfaces EmbarcadasEduardo Novais - Design de Interfaces Gráficas
sábado, 21 de abril de 2012
Interfaces mobile e em telas touchscreen estão se tornando cada vez mais popular.
sábado, 21 de abril de 2012
trendwatching.com (FEV/2012)
sábado, 21 de abril de 2012
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
sábado, 21 de abril de 2012
Divisão do Mercado em Duas Plataformas
sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
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
interfaces mobile
sábado, 21 de abril de 2012
O design para tais aplicativos é diferente para páginas Web e R.I.A.
sábado, 21 de abril de 2012
UsoPlanejamentoTelaÍconeTeste
sábado, 21 de abril de 2012
UsoPlanejamentoTelaÍconeTeste
sábado, 21 de abril de 2012
Situações de Uso
sábado, 21 de abril de 2012
Considerar o que as pessoas estão fazendo enquanto estão usando seu aplicativo.
sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
O horário de pico do uso de um iPad para entretenimento é de 20 às 23 hs.
sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
Já o iPhone pode ser utilizado em filas de banco ou dentro de um ônibus.
sábado, 21 de abril de 2012
Manipulando a interface
sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
O dedo é maior e menos preciso que um mouse.
sábado, 21 de abril de 2012
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
O tamanho mínimo que a Apple sugere é de 44 x 44 px.
sábado, 21 de abril de 2012
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
Padrões
sábado, 21 de abril de 2012
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
sábado, 21 de abril de 2012
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
Esquemas de cores oferecem um pouco mais de liberdade criativa.
sábado, 21 de abril de 2012
UsoPlanejamentoTelaÍconeTeste
sábado, 21 de abril de 2012
Definições
sábado, 21 de abril de 2012
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
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
sábado, 21 de abril de 2012
Público-alvo
sábado, 21 de abril de 2012
Planeje o aplicativo sempre na perspectiva do usuário.
sábado, 21 de abril de 2012
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
sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
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
Não projete o app da maneira mais fácil de desenvolver.
sábado, 21 de abril de 2012
Estrutura
sábado, 21 de abril de 2012
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
Desenhe o fluxograma completo do aplicativo conectando todas as telas e pontos.
sábado, 21 de abril de 2012
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
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
Evite mostrar muitas informações: amontoar as coisas em telas pequenas confude o usuário.
sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
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
sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
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
sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
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
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
Android
sábado, 21 de abril de 2012
Se portar algum aplicativo para Android, alguns aparelhos trabalham com layout fixo, vale redesenhar algumas telas.
sábado, 21 de abril de 2012
Por ter outras formas de interação, o uso de uma app Andróid pode variar bastante.
sábado, 21 de abril de 2012
UsoPlanejamentoTelaÍconeTeste
sábado, 21 de abril de 2012
Definições
sábado, 21 de abril de 2012
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
Lembre-se também que o tamanho de tela em dispositivos móveis varia bastante
sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
Restrições
sábado, 21 de abril de 2012
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
Projetando para diferentes telas
sábado, 21 de abril de 2012
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
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
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
Dicas
sábado, 21 de abril de 2012
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
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
UsoPlanejamentoTelaÍconeTeste
sábado, 21 de abril de 2012
Se um ícone não chama a atenção, ele não cumpre sua tarefa.
sábado, 21 de abril de 2012
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
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
sábado, 21 de abril de 2012
O ícone pode ser detalhado, mas esse detalhe não pode prejudicar o seu foco central.
sábado, 21 de abril de 2012
Evite colocar textos no ícone: mantenha-o como uma representação visual do aplicativo.
sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
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
Usuários de iOs são exigentes em relação aos ícones que selecionam na tela principal.
sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
Planejamento
sábado, 21 de abril de 2012
Ao desenvolver um ícone, compare-o com outros das principais categorias da app store.
sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
Desenvolva um mock-up do ícone no meio de outros apps.
sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
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
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
sábado, 21 de abril de 2012
Dicas
sábado, 21 de abril de 2012
Evite deixar para pensar no ícone muito tarde.
sábado, 21 de abril de 2012
Ícones simples são sempre os melhores.
sábado, 21 de abril de 2012
UsoPlanejamentoTelaÍconeTeste
sábado, 21 de abril de 2012
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
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
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
sábado, 21 de abril de 2012
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
sábado, 21 de abril de 2012
Faça testes finais do app em dispositivos reais. (Ainda mais se for para Android).
sábado, 21 de abril de 2012
Páginas Mobile
sábado, 21 de abril de 2012
Rapidez
sábado, 21 de abril de 2012
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
Arquitetura limitada
sábado, 21 de abril de 2012
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
Tipografia
sábado, 21 de abril de 2012
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
Imagens
sábado, 21 de abril de 2012
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
Perspectiva do usuário
sábado, 21 de abril de 2012
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
Alivie a carga
sábado, 21 de abril de 2012
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
Construa Relacionamentos
sábado, 21 de abril de 2012
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
Mesmas diferenças
sábado, 21 de abril de 2012
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
Inspiração
sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
sábado, 21 de abril de 2012
Referências
sábado, 21 de abril de 2012
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
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
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
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
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
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