• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
[dig2012] 12 - Interfaces mobile
 

[dig2012] 12 - Interfaces mobile

on

  • 592 views

 

Statistics

Views

Total Views
592
Views on SlideShare
592
Embed Views
0

Actions

Likes
1
Downloads
25
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    [dig2012] 12 - Interfaces mobile [dig2012] 12 - Interfaces mobile Presentation Transcript

    • Interfaces Embarcadas Eduardo Novais - Design de Interfaces Gráficassá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 Plataformassá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 crescimentosábado, 21 de abril de 2012
    • interfaces mobilesá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
    • Uso Planejamento Tela Ícone Testesábado, 21 de abril de 2012
    • Uso Planejamento Tela Ícone Testesábado, 21 de abril de 2012
    • Situações de Usosá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 interfacesá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õessá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). To scroll or pan (that is, move side to side). Drag To drag an element. Flick To scroll or pan quickly. With one finger, to reveal the Delete button in a table-view row or to reveal Swipe Notification Center (from the top edge of the screen). With four fingers, to switch between apps on iPad. To zoom in and center a block of content or an image. Double tap To zoom out (if already zoomed in). Pinch open to zoom in. Pinch 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
    • Uso Planejamento Tela Ícone Testesábado, 21 de abril de 2012
    • Definiçõessá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-alvosá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 feitosá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
    • Estruturasá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
    • Androidsá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
    • Uso Planejamento Tela Ícone Testesábado, 21 de abril de 2012
    • Definiçõessá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 bastantesábado, 21 de abril de 2012
    • sábado, 21 de abril de 2012
    • Restriçõessá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 telassá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
    • Dicassá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
    • Uso Planejamento Tela Ícone Testesá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
    • Planejamentosá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
    • Dicassá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
    • Uso Planejamento Tela Ícone Testesá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 Mobilesábado, 21 de abril de 2012
    • Rapidezsá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 limitadasá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 desejamsábado, 21 de abril de 2012
    • Tipografiasá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
    • Imagenssá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áriosá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 cargasá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 Relacionamentossá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çassá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çãosá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ênciassá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-sizessá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.htmlsá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