Transferir como PDF, PPTX
Carregado porJane Vita
Mini Curso - Design de Interface para Dispositivos Móveis
O minicurso sobre design de interface para dispositivos móveis aborda aspectos fundamentais do design, incluindo elementos essenciais, princípios de interação, e exemplos práticos de aplicativos. O conteúdo é direcionado para a criação de interfaces eficientes e atraentes em dispositivos móveis, enfatizando a simplicidade e a usabilidade. O curso também explora diferentes sistemas operacionais e diretrizes de design, além de discutir a prototipagem e a apresentação de ideias.
Mais conteúdo relacionado
Semelhante a Mini Curso - Design de Interface para Dispositivos Móveis
Mini Curso - Design de Interface para Dispositivos Móveis
- 1. minicurso Design de Interface paraDispositivos Móveis Jane Vita - Interaction and Visual Designer
- 2. Conteúdo Programático 1. Introduçãosobre design para pequenas interfaces 2. Elementos e cuidados comuns na construção de pequenas interfaces, 3. Exemplos de interfaces para dispositivo móvel (Mobile websites, aplicações, touch UI, low-end devices), 4. Princípios de design de interação para dispositivos móveis, 5. UI Guidelines, Design Patterns (Nokia, Android, iPhone, Windows Phone), 6. Desenvolvendo widgets para mobile, 7. Prototipagem 8. Apresentação, 9. Avaliação.
- 3. Sobre o quevamos falar? Design de Interface para Dispositivos Móveis 1. A que público se destina; 2. O contexto de uso; 3. Funcionalidades do aplicativo; 4. Tecnologia usada; 5. Interface.
- 4. 1. Introdução sobredesign para pequenas interfaces O design para dispositivos móveis se difere do design para outras interfaces de várias maneiras e a maioria destas diferenças estão relacionadas ao fato do usuário levar o dispositivo para qualquer lugar onde vai. Cada dispositivo móvel tem particularidades que devem ser levadas em conta em todo o desenvolvimento do projeto. • Simplicidade, • Rapidez, • Objetividade, • Eficaz, • Estética / agradável, • Adequado, • Consistente.
- 5. 2. Elementos ecuidados comuns na construção de pequenas interfaces
- 6. Acesso as principaisfuncionalidades
- 7.
- 8.
- 9.
- 10.
- 11. Espaço, gráficos, corese fontes, identidade visual • Tamanho da tela, escalabilidade, • Informações sobre as • funcionalidades / adequação • Layout para ícones, labels, menus, caixas de diálogos e erros, • Palheta de cores, • Fontes, • Telas, • Direção de arte para áudio, animações e transições.
- 12. Adequado ao usuário(dia-a-dia) Um layout adequado permite o melhor uso da aplicação e aproveitamento do aparelho. (reforçando conceitos de usabilidade)
- 13. 3. Exemplos deinterfaces para dispositivos móveis
- 14. Skype Use Skype everywhere- over 3G or WiFi. Free Skype-to-Skype calls from any WiFi zone. See who's online and send and receive instant messages on the move.
- 16.
- 17. Evernote PC Crie e salve notas, atalhos, imagens, tarefas, PDFs e mais. Capture texto, links e imagens de sites no Evernote. Crie notas de texto, fotos e gravações de voz. Navegue e realize buscas das notas salvas.
- 19. Visualize e acessetodas as notas com apenas um deslizar de dedos. Encontre rapidamente suas notas através dos Notebooks e Tags.
- 20. Crie notas detextos, imagens, mensagens de voz e anexe arquivos. Procure e acesse notas criadas no seu telefone, PC ou na internet.
- 21.
- 23.
- 26. 4. Princípios dedesign de interação para dispositivos móveis 8 Regras de Ouro de Ben Shneiderman 1. Mantenha a consistência, 2. Ofereça atalhos aos usuários experientes, 3. Ofereça feedbacks informativos, 4. Apresente as etapas do processo, 5. Ofereça uma forma simples de correção de erros, 6. Permita fácil reversão de ações, 7. O controle do sistema é do usuário, 8. Reduza a carga de memória curta do usuário.
- 27. 4. Princípios dedesign de interação para dispositivos móveis Heurísticas de Nielsen 1. Visibilidade do status do sistema 2. Correspondência entre o sistema e o mundo real 3. Liberdade e controle do usuário 4. Consistência e padrões 5. Prevenção de erros 6. Reconhecimento ao invés de memorização 7. Flexibilidade e eficiência de uso 8. Estética e design minimalista 9. Ajude os usuários a reconhecerem, diagnosticarem e recuperarem-se de erros 10. Ajuda e documentação
- 28.
- 29. Iphone demo - http://www.youtube.com/watch?v=8kwmEIctuUw official website - http://www.apple.com/iphone/ UI design guidelines - http://developer.apple.com/iphone/library/index.html • A interface é construída em torno de uma página principal, onde é disponibilizada uma lista de aplicações. (botão do meio - acesso) • As aplicações normalmente rodam individualmente (non- multitask) • Exceções para ligações e para escutar músicas • Aplicativos padrão – Mensagens, Calendário, Fotos, Câmera, You tube, Mapas, Clima, Recados de voz, Recados, Relógio , Calculadora, Configurações, loja iTunes, App Store e Bússola (3G) • Menu alinhado na parte inferior exibindo 4 ícones com as funções : Telefone, e-mail, Internet (Safári) e Ipod (multimídia)
- 30. Iphone demo - http://www.youtube.com/watch?v=8kwmEIctuUw official website - http://www.apple.com/iphone/ UI design guidelines - http://developer.apple.com/iphone/library/index.html • Permite o usuário acessar páginas no Safári através de ícones personalizados (Web Clips). • Usuários podem adicionar e organizar até 16 ícones por tela (home) até 4 ícones na barra de menu home. • A maior parte da interação acontece por touchscreen . É possível ativar funcionalidades como zoom e rolagem através do movimento de touch-drag. Nesses casos são aplicados efeitos aos movimentos simulando a física (fricção). Outros efeitos incluem sub-seleção de rolagem horizontal, barra de favoritos e teclado de rolagem vertical e widgets que giram para exibir as configurações no “verso”. • Na hierarquia do menu, um botão de voltar no canto superior direito exibe o nome da pasta. • Ipod touch - As diferenças incluem ausência fone e câmera e no uso de aplicativos distintos para reprodução de músicas e vídeos. Ambos utilizam sistema operacional do iPhone.
- 32. Androide – hero Demo - http://www.youtube.com/watch?v=Et3v8qkwHSI Official website - http://www.htc.com/www/product/hero/overview.html UI design guidelines - http://developer.android.com/guide/practices/ui_guidelines/index.html - • Android é um sistema operacional para dispositivos móveis, usa uma versão modificada do Linux Kernel. Foi inicialmente desenvolvido pela Android Inc. , empresa comprada pela Google, e mais tarde pela Open Handset Alliance. Permite o desenvolvedores escreverem código gerenciado em Java, controlando o dispositivo através de livrarias Java do Google. • Em Android a interface é construída utilizando a objetos View e ViewGroup. Existem vários tipos de Views e ViewGroups, que são descendentes da classe View. • A classe View serve de base para um conjunto de elementos de tela interativos chamados widgets. Widgets podem ser Text, EditText, InputMethod, MovementMethod, Button, RadioButton, Checkbox e ScrollView.
- 34. Windows Phone 7series Demo - http://www.youtube.com/watch?v=w0-pxBZBvlM official website - http://www.windowsphone7.com/#gotophonedemolink UI design guidelines - http://developer.windowsphone.com/windows-phone-7/ • A nova interface (Metro) é muito similar a do Zune HD. A tela home (chamada tela inicial) é composta de um mosaico (customizáveis), que são links para as principais funções como telefone, musicas e vídeos, email, SuiteOffice e Contatos. • Interface touchscreen mais amigável do que as versões anteriores com o uso da tecnologia multitouch. • Integrado com redes sociais populares como Twitter, Facebook e Windows Live e serviços como Xbox Live, Zune e Bing. • Não suporta copiar e colar ou múltiplas tarefas para aplicativos de outros desenvolvedores. • Microsoft Kin - primo próximo - tem similaridades de interface - especificações de hardware consistentes. Microsoft disse que a longo prazo o Microsoft Phone 7 será integrado ao Kin.
- 35. Nokia mobile devices demo - http://www.youtube.com/watch?v=4Az8VE1NtY8 official website - http://www.nokia.com.br UI design guidelines – http://www.forum.nokia.com/Design/Design_process/
- 36.
- 37. 6. Desenvolvendo widgetspara mobile
- 38. 6. Desenvolvendo widgetspara mobile • Definição de Widget • Uso do Widget • Ótima aparência • Melhor interação do usuário com aparelho • Exercício – Widget para Iphone • Tecnologia: Iphone (toolkit) • Divisão em grupos • Tema: Gastronomia
- 39.
- 40. Algumas ferramentas paraprototipagem em dispositivos móveis. • Forum Nokia – Flowella http://www.forum.nokia.com/info/sw.nokia.com/id/ 7557c13f-0b43-4805-85ce-8414bfbade57/Flowella.html • Flash – Adobe Device Central • Pidoco - https://pidoco.com/en • LiveView - http://labs.ideo.com/category/iphone/ • Videos
- 41.
- 42.
- 43. Alguns links úteis • http://deviceatlas.com/ • http://patterns.design4mobile.com/index.php/Main_Page • http://www.yuiblog.com/blog/2007/10/02/challenges-of-interface-design-for-mobile-devices/ • http://www.callingallinnovators.com/venture_challenge.aspx • http://www.taptaptap.com/#voices • http://www.teehanlax.com/blog/2009/06/18/iphone-gui-psd-30/ • http://www.small.fi/ http://www.smallsurfaces.com/ • http://ignorethecode.net/blog/2010/01/21/realism_in_ui_design/ • http://martinfowler.com/bliki/HumaneInterface.html • http://www.teehanlax.com/blog/2009/06/18/iphone-gui-psd-30/ • http://gizmodo.com/310295/microsoft-phone-patent-looks-just-like-the-iphone • http://idlemode.com/category/oems/ • http://www.myersdesign.com/wordpress/?m=200802
- 44. Mais links úteis… • http://ignorethecode.net/blog/2010/01/21/realism_in_ui_design/ • http://www.small.fi/ • http://gettingreal.37signals.com/toc.php • http://wiki.forum.nokia.com/index.php/Mobile_developing_and_design_guidelines • http://www.smallsurfaces.com/ • http://www.appleinsider.com/articles/09/02/28/japanese_hate_for_iphone_all_a_big_mistake.html • http://i.gizmodo.com/5165225/click-a-visual-tour-of-camera-interfaces?skyline=true&s=xhttp:// www.experiencedynamics.com/science-usability/ui-style-guides • http://konigi.com/wiki/design-pattern-repositories • http://www.interactivegestures.com/index.php?title=Main_Page • http://www.teehanlax.com/# • http://uxmag.com/design/ipad-user-experience-guidelineshttp://wiki.forum.nokia.com/index.php/ Mobile_Design_Pattern:_Widgets_elegantes_em_dispositivos_m%C3%B3veis
- 45. Jane Vita Obrigada! www.janevita.com.br Interaction and Visual Designer [email protected]