Kluk design dispositivos moveis ufpb 20131025
-
Upload
hanry-marcel-kluk -
Category
Documents
-
view
216 -
download
0
Transcript of Kluk design dispositivos moveis ufpb 20131025
![Page 1: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/1.jpg)
Mini Curso Design para Dispositivos Móveis
![Page 2: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/2.jpg)
TÓPICOS !• Entendendo Dispositivos Móveis e o Processo de Desenvolvimento de UI’s • Definindo as Funcionalidades do seu Aplicativo• Por que um “bom” Design é um diferencial? • A apresentação começa com o Ícone • Padrões de Interação e a Importância do Fluxo de uma Interface • Guias (HIG’s) e a Interface de Usuário • Prototipação Rápida• Identidade Visual, criando seu próprio “Look and Feel!”
![Page 3: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/3.jpg)
EU!
Hanry Marcel Kluk !• Curioso por natureza! • Co-fundador do da Iniciativa
Startup Curitiba • Co-fundador da Snowman
Labs • Designer, ilustrador, fotógrafo
amador, cozinheiro...
![Page 4: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/4.jpg)
...e vocês?
![Page 5: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/5.jpg)
O CURSO
40% Conceitos
60% Atividades
![Page 6: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/6.jpg)
Para ENTENDER os dispositivos móveis é importante entender os seus USUÁRIOS...
![Page 7: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/7.jpg)
...E O QUE ELES BUSCAM!
• Facilidade • Agilidade • Intuitividade • Algo “novo” • Se surpreender • “Transparência”
![Page 8: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/8.jpg)
ENTENDA AS LIMITAÇÕES
Usuários não têm um PONTEIRO nos dedos
![Page 9: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/9.jpg)
ENTENDA AS LIMITAÇÕES
Nem são águias com super VISÃO
![Page 10: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/10.jpg)
ENTENDA AS LIMITAÇÕES
Geralmente interagem com um aplicativo POR VEZ.
![Page 11: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/11.jpg)
VOCÊ TEM QUE SER O USUÁRIO!Aprenda TUDO sobre o dispositivo • como ele funciona? • é pesado ou leve? • é confortável de segurar? • como acesso suas funções? • quais botões ele possui? • quais aplicativos são “legais”? • quais não são?
![Page 12: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/12.jpg)
NÃO É UM COMPUTADOR TRADICIONAL!
![Page 13: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/13.jpg)
A INTERFACE TEM QUE SER REPENSADA
Ctrl+C, Ctrl+V NÃO FUNCIONA
![Page 14: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/14.jpg)
...PARA ATENDER AO DISPOSITIVO MÓVEL
Somente os elementos CHAVE se mantém!
![Page 15: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/15.jpg)
Manutenção
PROCESSO DE DESENVOLVIMENTO
Conceito Design Desenvolvimento
Distribuição Marketing
![Page 16: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/16.jpg)
DESENVOLVIMENTO > DESIGN =
ATIVIDADE X TEMPO
Debug
Teste
Design
Desenvolvimento
![Page 17: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/17.jpg)
DESENVOLVIMENTO > DESIGN =
ATIVIDADE X TEMPO
Debug
Teste
Design
Desenvolvimento
![Page 18: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/18.jpg)
COMO VAMOS CHEGAR LÁ?
Ideia (Refinar)
Processo (Executar)
Interface (Desenhar)
![Page 19: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/19.jpg)
Eficiência para Entreter O principal foco de um aplicativo de entretenimento sério, é permitir que o usuário consuma mídia. Usuários esperam uma interface com customizações porém fácil de navegar. A interface é o conteúdo.
Eficiência para Entreter Um app de produtividade, como uma Ferramenta Séria, cumpre uma tarefa bem específica. Seu aplicativo deve rapidamente e de maneira fácil, realizar o que 80% das pessoas vão fazer com ele. Vá direto ao ponto.
Jogar e se Divertir Tipo de aplicativo que vai entreter o usuário ou jogos. Seu foco deve ser somente um, dar um momento de diversão. Vá direto ao ponto e não use muito hierarquia. A história, experiência e jogabilidade são cruciais.
Elementos inovadores resolvendo problemas Uma Ferramenta Divertida, têm o foco em resolver ou alcançar algo porém incentiva a exploração entregando informações relevantes.
X-Y: TIPO DE APLICATIVO
Eixo X: Uso Eixo Y: ConteúdoDivertido
Sério
Entre
teni
men
to
Ferra
men
ta
![Page 20: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/20.jpg)
Eixo X: Uso Eixo Y: ConteúdoDivertido
Sério
Entre
teni
men
to
Ferra
men
ta
X-Y: TIPO DE APLICATIVO
![Page 21: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/21.jpg)
Quem é o seu PÚBLICO ALVO? • Pessoas de negócios ou usuários finais • Jovens ou idosos • Homens ou Mulheres • Vão usar diariamente ou ocasionalmente
Quais são as principais FUNCIONALIDADES? • Consumir ou produzir conteúdo? • É necessário já possuir algum serviço? • O que realmente o usuário vai querer?
“DECLARAÇÃO DE DEFINIÇÃO DO PRODUTO”
REFINANDO A SUA IDÉIA
![Page 22: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/22.jpg)
Resuma a ideia em uma frase: <<Diferenciação>> <<Solução>> para <<Público>> !Exemplo: !<<Uma maneira rápida e fácil>> para <<criação de ATA’s de reunião>> para <<profissionais de todas as áreas>>
DECLARAÇÃO DE DEFINIÇÃO DO PRODUTO
![Page 23: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/23.jpg)
• ESCOLHAM uma categoria de aplicativo dos Post-It`s • DEFINAM quem será o público alvo e o tipo do seu aplicativo
(eixo x-y) • LEVANTEM todas as funcionalidades que consigam pensar
(brainstorm) • CORTEM funcionalidades que não fazem parte do core (menos
importantes) • JUNTE o PÚBLICO ALVO e as FUNCIONALIDADES criando a
declaração
EXERCÍCIO: CRIANDO A SUA DECLARAÇÃO
30 MIN.Post-it Papel Lápis/caneta
![Page 24: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/24.jpg)
DESIGN COMO UM DIFERENCIAL
![Page 25: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/25.jpg)
PORQUE TERDESIGN?!
• Maior apelo aos usuários • Mais atenção da mídia • Diferencial vs. Concorrência • Da vontade de “voltar” • Incentiva a exploração • VENDE MAIS!
![Page 26: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/26.jpg)
• Aplicativo para conversão de unidades
• Preço: U$0.99 • Lançado em Agosto de 2009 • Unidades vendidas: 197,424 • Faturamento bruto: $195,450 • Faturamento liquido: $137,065
Muitos concorrentes GRÁTIS já estabelecidos, porém SEM DESIGN!
ESTUDO DE CASO: CONVERT
![Page 27: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/27.jpg)
• É a porta de ENTRADA de seu aplicativo • Se bem desenhado pode REPRESENTAR seu produto • “Eu nem entro se o ICONE for RUIM”! • Apresenta FUNÇÕES de maneira VISUAL para o usuário
A IMPORTÂNCIA DOS ÍCONES
![Page 28: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/28.jpg)
ANTES DE ENTRAR VOCÊ JULGA
![Page 29: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/29.jpg)
• Foco em uma forma padrão, não em diversos elementos que deixam o icone “sujo”. • Escolha cores com cuidado, use cores da interface. • Evite usar fotos e muito texto. • Se usar uma marca, deixe somente o necessário para dar representatividade.
COMO?
![Page 30: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/30.jpg)
• LEIAM novamente a “Declaração de Definição do Produto” (DDP)
• BUSQUEM elementos que possam inspirar o icone, considerando a DDP
• DESENHEM 5 conceitos de icone • SELECIONEM 1 conceito • DESENHEM o icone “final”
EXERCÍCIO: DESENHANDO UM ÍCONE
30 MIN.Papel Lápis/caneta Cores
![Page 31: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/31.jpg)
• iOS Toolbar Icons • Glyphish’/> • iOS Toolbar Icon Set • iOS Toolbar Icons 2 • 30 Free Vector Icons • iconSweets • The Android Developer
Common Icon Set II • 30 Free Android Menu Icons • Free Android 2.x Monster
Icons
FONTES DE ÍCONES
![Page 32: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/32.jpg)
INTERAGINDO COM DISPOSITIVOS MÓVEIS
![Page 33: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/33.jpg)
• Lembre-se que existem diferentes meios de interagir com o dispositivo
• Antes de desenhar a UI, é necessário avaliar qual destes estão disponíveis e serão utilizados
• Analise se não existe outra maneira de usuários entrarem com “dados”
• Seja criativo e não se limite ao “tradicional”
MÉTODOS DE INTERAÇÃO
![Page 34: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/34.jpg)
EXEMPLO DE APLICATIVO
Anotação Localização Lembrete
![Page 35: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/35.jpg)
• Definem alguns CONTROLES e ELEMENTOS padrões para o design de interfaces para dispositivos móveis
• É uma maneira de aprendermos com soluções que foram bem APLICADAS e DOCUMENTADAS por outros designers
• Ótimo ponto de PARTIDA para DESENHARMOS e entendermos partes específicas de um aplicativo
PADRÕES DE INTERAÇÃO
![Page 36: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/36.jpg)
Manipulação INDIRETA
• É necessário aprender o mapeamento das teclas
• Deve ser muito consistente • Não são muito flexíveis
Joystick Direcional • Botões Alfa-numéricos • Soft-keys
Rodas Manipulação por GESTOS
• Utilizada através de sensores • Através do dispositivo por completo • Inclinando • Asoprando • Chacoalhando
PADRÕES DE INTERAÇÃO
![Page 37: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/37.jpg)
Manipulação DIRETA/Touch/Haptic
• Não existe mapeamento pois as teclas são “virtuais” • Difícil aprender todos os meios de entrada • São muito flexíveis • Toques curtos e longos • Arrastar• Deslizar• Girar • Pinçar e Expandir
PADRÕES DE INTERAÇÃO
![Page 38: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/38.jpg)
Botões ou Links
Indicadores de Espera
Entrada de Texto Limpa texto
PADRÕES DE INTERAÇÃOListas
![Page 39: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/39.jpg)
• Um diagrama SIMPLES que mostra como uma TELA é ligada a outra • Te obriga a pensar na FLUIDEZ da sua interface, sem considerar os
detalhes dela • Mesmo que pequena, pode ser CRUCIAL para o desenvolvimento de
uma boa NAVEGAÇÃO
DIAGRAMA DE FLUXO DAS TELAS
Tools
![Page 40: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/40.jpg)
MEU DIAGRAMA
• Você pode criar a sua própria forma de diagramar o fluxo.
![Page 41: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/41.jpg)
EXERCI'CIO: Traçando seu DIAGRAMA
• LEIAM novamente a “Declaração de Definição do Produto” (DDP)
• CONSIDEREM as interações que você vai utilizar para navegação e inputs
• TRACEM o seu DIAGRAMA, considerando os GESTOS efetuados
• DESAFIO: tentem REMOVER 1 à 2 das telas e MANTER a funcionalidade
![Page 42: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/42.jpg)
• LEIAM novamente a “Declaração de Definição do Produto” (DDP)
• CONSIDEREM as interações que você vai utilizar para navegação e inputs
• TRACEM o seu DIAGRAMA, considerando os GESTOS efetuados
DESAFIO: tentem REMOVER 1 à 2 das telas e MANTER a funcionalidade
EXERCÍCIO: TRAÇANDO SEU DIAGRAMA
30 min.Papel Lápis/caneta
![Page 43: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/43.jpg)
INTERFACE DE USUÁRIO
![Page 44: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/44.jpg)
• Vai além : ENCANTADORA e ATRAENTE
• Boa anfitriã : CONVIDATIVA e CATIVANTE
• Te ajuda : FACÍL de usar • Traz o novo : INOVADORA ...
“Eu NUNCA fiz isso!” • Não está atoa : entrega
SOLUÇÕES e não somente FUNÇÕES
• É NOVA e DESENHADA!
UMA BOA INTERFACE DE USUÁRIO
![Page 45: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/45.jpg)
DISPOSITIVOS MÓVEIS
![Page 46: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/46.jpg)
ENTENDENDO CADA DISPOSITIVO
![Page 47: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/47.jpg)
iPhone (iOS) HIG : Introdução
![Page 48: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/48.jpg)
CARACTERÍSTICAS do iPhone • Tamanho da tela é COMPACTA • Memória é LIMITADA • Usuários visualizam e interagem com UM
APLICATIVO de cada vez. • TIPOS de aplicativos • NATIVO: desenvolvidos com o SDK • WEB: abertos pelo browser • HÍBRIDOS: tem como predominância
uma webview, porém possuem controles de aplicativos nativos
iPhone (iOS) HIG: INTRODUÇÃO
![Page 49: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/49.jpg)
Como ESCOLHER ? • Comportamentos e USO • Características VISUAIS • Modelo dos DADOS • EXPERIÊNCIA de usuário
DIFERENTES ESTILOS DE APLICATIVOS
• Qual a motivação do usuário para usar este aplicativo?
• Qual a experiência de usuário que você quer proporcionar?
• Qual o seu objetivo para o aplicativo?
![Page 50: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/50.jpg)
PRODUTIVIDADE
orga
nizar
info
rmaç
ões
de fo
rma
HIER
ÁRQ
UICA
UTILITÁRIOS
UMA TAREFA com pouco input do usuário • Usuários abrem o aplicativo e a informação já é apresentada • Pouca interação
Organizar listas Adicionar ou remover itens
Entrar até o nível de informação desejada e realizar atividades com ela
DIFERENTES ESTILOS DE APLICATIVOS
![Page 51: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/51.jpg)
TELA TODA, em ambientes ricos visualmente
Muito peculiar Sem controles padrão
Diversão, como jogos e rich-media
IMER
SIVA
DIFERENTES ESTILOS DE APLICATIVOS
![Page 52: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/52.jpg)
INTERFACE DO USUÁRIO
![Page 53: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/53.jpg)
Status bar
Navegation bar
Navegation bar
Toolbar
ELEMENTOS
![Page 54: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/54.jpg)
AÇÕES E VIEW MODAL
![Page 55: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/55.jpg)
ALERTAS E NOTIFICAÇÕES
![Page 56: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/56.jpg)
EXEMPLO DE VIEW MODAL MAL DESENHADA
![Page 57: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/57.jpg)
Simples Indexada Agrupada
TABELAS
![Page 58: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/58.jpg)
Pickers
CONTROLES
Busca Slider e Switch Segmentados
![Page 59: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/59.jpg)
Toolbar
Pop-overs
iPad
![Page 60: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/60.jpg)
ATUALIZAÇÃO iOS 7Clareza • texto é sempre legível, icones são precisos, • adornos são sutís e foco em • funcionalidade é a inspiração. Deferência • a UI ajuda ousuário, porém não compete • com o conteúdo Profundidade • camadas visuais e movimento • auxilia entendimento e prazer • de usar o app.
![Page 61: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/61.jpg)
• App NOVO: já pense em usar elementos e UI para o iOS 7 • App LANÇADO: começem a pensar como re-desenar a interface para • iOS 7 • Fontes: Helvetica Neue (a fonte desta apresentação) • Icone: Use o Grid • Elementos: já use e se adapte aos novos • UI Dynamics: uma engine física para dar movimento, fluidez e realidade
ao app (não somente animação).
iOS 7 UI Transition Guide https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/TransitionGuide/index.html#//apple_ref/doc/uid/TP40013174-‐CH6-‐SW1
O QUE DEVO FAZER
![Page 62: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/62.jpg)
GRID DE ÍCONES
![Page 63: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/63.jpg)
GRID DE ÍCONES
![Page 64: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/64.jpg)
Android: Design
![Page 65: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/65.jpg)
MUITOS DEVICES
![Page 66: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/66.jpg)
MUUUUITOS DEVICES
3997 resoluções disponíveis - 2012
![Page 67: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/67.jpg)
• Seja Flexível
• OTIMIZE layouts para diferentes telas
• Recursos para diferentes DPIs
DISPOSITIVOS E DISPLAYS
![Page 68: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/68.jpg)
Holo Light Holo Dark Holo Light/Dark
TEMAS E TIPOGRAFIA
![Page 69: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/69.jpg)
Icones Action Bar Notificações
ICONOGRAFIA
![Page 70: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/70.jpg)
Action Bar
Multi-pane
Selection
PADRÕES DE UI
![Page 71: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/71.jpg)
EXEMPLO DE NAVEGAÇÃO: UP vs. BACK
![Page 72: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/72.jpg)
• Talvez o elemento MAIS IMPORTANTE • ADAPTÁVEL a rotação e diferentes telas • Pode ser CONTEXTUAL (ex.seleção) • COMPOSTA por: • Top Action Bar• Middle Action Bar • Bottom Action Bar
ACTION BAR GERAL
![Page 73: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/73.jpg)
• Scrollable Tabs
• Spinners
• Fixed Tabs !
• Spinners
• Action Overflow
• Buttons
ACTION BAR: ELEMENTOS
![Page 74: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/74.jpg)
Phone
Tablet
LAYOUTS MULTIPLANE
![Page 75: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/75.jpg)
http://developer.android.com/design/downloads/index.html
ELEMENTOS
![Page 76: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/76.jpg)
• http://developer.apple.com/iphone/library/documentation/
userexperience/conceptual/mobilehig/Introduction/
Introduction.html
• http://developer.apple.com/iphone/library/documentation/
general/conceptual/ipadhig/Introduction/ Introduction.html
• http://developer.android.com/design/index.html
• UI Design and Interaction Guide for Windows Phone 7 v2.0
• http://wiki.forum.nokia.com/index.php/
Guidelines_for_Mobile_Interface_Design
LINKS PARA OS HIG´S
![Page 77: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/77.jpg)
• Importante iniciar com o NÍVEL mais BAIXO o possível
• NÃO se apegue a DETALHES : use círculos, quadrados, retângulos
• Capturar visualmente a lista de FUNCIONALIDADES considerando a ORDEM definida pelo DIAGRAMA
• Use ELEMENTOS conhecidos, e considere o HIG da plataforma escolhida
• SOMENTE após estes desenhos prontos você pode passar para o COMPUTADOR para testar!
DESENHANDO INTERFACES
![Page 78: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/78.jpg)
• LEIAM novamente a “Declaração de Definição do Produto” (DDP)
• ANALISEM o diagrama de fluxo e ESCOLHAM as telas a serem desenhadas
• DESENHEM as interfaces das telas no stencil
• USEM Post-It’s para mostrar as interações
EXERCÍCIO: DESENHANDO SUA INTERFACE
1 HORA.Papel Lápis/caneta Post-it Stencil
![Page 79: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/79.jpg)
PROTOTIPAÇÃO RÁPIDA
![Page 80: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/80.jpg)
• Utilizada para PROTOTIPAR objetos, conceitos, serviços e
• interfaces • Serve para se ter algo PALPÁVEL de maneira rápida
que possam ser testados • Visualizar as INTERFACES e USAR-LAS de maneira
simples • Traz RESULTADOS e agiliza o processo de
ITERAÇÃO • Podem ser utilizadas FERRAMENTAS físicas,
computacionais ou uma combinação de ambas • DETALHES são irrelevantes, ou até PROIBIDOS
O QUE É PROTOTIPAÇÃO RÁPIDA
![Page 81: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/81.jpg)
![Page 82: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/82.jpg)
FERRAMENTAS E LINKS https://gomockingbird.com/
http://www.mobilesketchbook.com/
http://keynotopia.com/
http://mockapp.com/download/
https://pidoco.com/en
http://balsamiq.com/products%23
![Page 83: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/83.jpg)
• REVISEM as interfaces desenhadas
• LEVEM as interfaces uma a uma para o computador
• UTILIZEM formas padrão (circulos, quadrados, etc.) para representar
• elementos como botões, caixas de texto, etc.
• CRIEM os links definidos no “Diagrama de Fluxo da Telas”
• TESTEM o protótipo para avaliar a usabilidade com outras equipes
EXERCÍCIO: DESENHANDO SUA INTERFACE
1 HORA. Computador
![Page 84: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/84.jpg)
ALGUMAS DICAS
![Page 85: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/85.jpg)
• Registro FORÇADO no primeiro uso
• Usar textos de DIFÍCIL LEITURA e evite
• misturar diferentes FONTES
• Passar ALERTAS ambíguos ao usuário. Use “labels” que representam o resultado (Vizualizar vs. OK). Coloque afirmativa a direita.
• Usar LINGUAGEM técnica que o usuário não entende.
• Botões de voltar sem CONTEXTO
O QUE NÃO FAZER
![Page 86: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/86.jpg)
Look & Feel
![Page 87: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/87.jpg)
• Muitos dos CONTROLES e elementos padrão das plataformas, podem ser customizados
• Pequenas mudanças podem dar um POLIMENTO especial para sua interface
• EVITE mudar radicalmente os controles que fazem ações PADRÃO
• CRIE temas diferentes, com cores, texturas, e imagens e teste o MELHOR
SUA IDENTIDADE VISUAL
![Page 88: Kluk design dispositivos moveis ufpb 20131025](https://reader034.fdocument.pub/reader034/viewer/2022042614/5579a145d8b42ac1148b47fb/html5/thumbnails/88.jpg)
Muito Obrigado!