Appworkbook

Olá
O Livro de Exercícios de Design de apps orienta você durante o ciclo de design

de apps e ajuda a dar vida às suas ideias de apps para iOS. Você vai definir,
prototipar, testar, validar e iterar o seu projeto ao vincular seu conceito de
design com o código Swift que alimenta os apps para iOS.
Os designers de apps gastam muito tempo para criar a aparência
e o comportamento perfeitos para seus apps. Mas isso é apenas uma parte de
um processo, que é muito mais extenso. E o design não é linear; os melhores
designs são refinados e aprimorados com o tempo. Um bom design de app
começa com a compreensão do usuário e se estende a todas as decisões que
você tomar, grandes e pequenas.
Por trás de todo grande app está uma pessoa ou equipe que começou com uma
ideia e o compromisso de aprimorá-la e refiná-la, etapa por etapa. Prepare-se
— você está prestes a dar o primeiro passo em uma jornada gratificante.
Ciclo de Design de apps
Como usar este livro de exercícios
Este livro de exercícios foi elaborado de forma que você possa personalizá-lo conforme avança. O resultado será exclusivo para você e seu app, e irá traduzir todas as decisões
que você tomar pelo caminho. Você pode adicionar observações e destaques aos exercícios e incluir suas próprias imagens e outros recursos.
Modelos
Alguns slides incluem modelos para preencher. Faça quantas cópias precisar.
Exercícios de protótipo
Os slides marcados com o ícone de protótipo do app indicam que você trabalhará em
um documento separado do Keynote para criar seu protótipo.
Explorações de código
Os slides marcados com o ícone do app Swift Playgrounds indicam que você se
aprofundará em código no Swift Playgrounds.
O que você precisará
Swift Playgrounds
Swift Playgrounds é um app revolucionário para iPad e Mac que ajuda você a aprender e explorar a
programação em Swift, que é a mesma linguagem poderosa usada para criar apps de nível mundial para a
App Store. Você usará o Swift Playgrounds em explorações opcionais de programação neste livro de
exercícios, se aprofundando em código para aprender conceitos que estão diretamente ligados ao seu app.
Baixar Swift Playgrounds para Mac >
Protótipo Go Green
Os exemplos neste livro de exercícios são baseados no Go Green — um protótipo de app de demonstração
em um arquivo do Keynote. Para simular o app, inicie a apresentação de slides e clique para avançar pelas
telas. Baixar protótipo do app Go Green >
Kit do Keynote para iOS

Você usará uma biblioteca de elementos de interface do iOS para criar seu protótipo do Keynote.
Baixar Kit do Keynote para iOS >
Noções básicas do Keynote
Antes de começar, você precisa se familiarizar com os princípios básicos de navegação do Keynote.
Para ver o navegador, clique no ícone de na barra de ferramentas ou no menu Visualizar e escolha
Navegador. Os grupos de slides têm um indicador de revelação para conteúdo oculto ( ) ou visível
( ). Para mostrar ou ocultar slides em um grupo, clique no indicador de revelação.
Para mover um slide, clique e arraste-o no navegador. Para duplicar um slide, selecione-o no navegador
e escolha Editar > Duplicar Seleção ou pressione Command ( ) + D.
Preencha os modelos editando o texto nas caixas. Para editar o texto em uma caixa, clique duas vezes
sobre ele.
Adicione imagens a espaços reservados arrastando e soltando.
Lembre-se: você sempre pode desfazer erros selecionando Editar > Desfazer ou pressionando
Command + Z.
Ciclo de Design de apps

Definir Prototipar Testar Validar Iterar
Descobrir Mapa Arquitetar Validar Iterar

Observar Esboçar as telas Definir testes Reunir anotações Organizar suas conclusões
Conhecer seus usuários Agrupar as telas Criar jornadas do usuário Gerar os principais insights Voltar: Definir
Considerar a diversidade Vincular as telas Definir um processo do formulário Voltar: Prototipar
Resumir seu público Wireframe Planejar uma introdução Tirar conclusões Voltar: Testar
Analisar Criar abas Script
Analisar causas Adicionar navegação Esboçar os scripts
Pesquisar concorrentes Criar modais Escrever os scripts
Potencializar os recursos Adicionar elementos da int Antecipar erros
Planejar erface Preparar
Encontrar diferenciais Refinar Reunir usuários
Definir recursos Dimensionar áreas de toque Realizar última verificação
Priorizar recursos Inserir conteúdo
Descrever as principais fun Avaliar peso e equilíbrio
ções Verificar alinhamento
Definir um MVP Estilo
Definir personalidade
Criar ícone
Definir
Sua jornada começa com a definição de seu app. Um processo de descoberta
inicial ajudará você a identificar o desafio que deseja resolver e a entender
seu público. Depois, você vai analisar como um app pode resolver o desafio
antes de criar uma lista de objetivos, recursos e principais funções.
Defini
r
Observar
Conhecer seus usuários Descobrir
Considerar a diversidade Você deve começar identificando um desafio e as pessoas que são afetadas por
Resumir seu público
ele. Ao final desta etapa, você terá uma compreensão completa de um desafio e
uma perspectiva sobre as pessoas que se beneficiariam com uma solução.
Observe tudo e mantenha a mente aberta. As perguntas que você faz — e os
cenários e pontos de vista que você imagina — determinarão adireção do seu
app e o sucesso final.
Mesmo se você já tiver uma ideia para seu app, os exercícios a seguir podem
ajudar a validar seu pensamento atual.
Há perguntas sobre as quais você ou outras pessoas pensam com frequência?
Título
Observar Lorem ipsum dolor sit amet, consectetuer adipiscing
Desperte
Lorem ipsum
sua imaginação.
dolor sit amet,
Pessoas
consectetuer
que criam Insira sua resposta aqui
adipiscing
grandes apps
elit,são
sedfrequentemente
diam nonummy motivadas
nibh
euismod
por abordar
tincidunt
um desafiout laoreet
que elas
dolore
ou magna
sua
aliquam erat experimentaram.
comunidade volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper
Crie quantas cópias deste slide
suscipit lobortis nisl ut aliquip
forem necessárias para registrar seus
pensamentos. Não tente filtrá-los demais!
Você nunca saberá qual deles levará você a
uma grande ideia de app. Quais desafios você ou outras pessoas enfrentam diariamente?
Lorem ipsum dolor sit amet, consectetuer adipiscing
Insira sua resposta aqui
Você ou outras pessoas usaram soluções alternativas em apps que já existem?

Lorem ipsum dolor sit amet, consectetuer adipiscing Lorem ipsum dolor sit amet, consectetuer adipiscing Lorem
Você
ipsumconhece
dolor sitalgum
amet,app que resolve
consectetuer parcialmente um desafio, mas exige que você o use de forma não intencional ou
adipiscing
aumente seus recursos com outros apps ou atividades?
Definir |
Descobrir
Explo
re
Code
Olá, mundo!
Você está
Lorem ipsum
usando
dolor
o Livro
sit amet,
de Exercícios
consectetuer
deadipiscing
Design deelit,
appssed
porque
diamtem
nonummy
uma ideia
nibhe euismod
quer transformá-la
tincidunt ut
em
laoreet
um app.dolore
Mas omagna
designaliquam
não é tudo.
erat Cada
volutpat.
app Ut
é desenvolvido com código. O design e o código de um app
estão relacionados, talvez de forma mais próxima do que você possa imaginar.
Se programação é novidade para você, as coisas podem parecer misteriosas e complexas. Embora leve
algum tempo para aprender as habilidades necessárias para criar um app por completo, os conceitos
básicos e as práticas são fáceis de entender. A perspectiva adquirida ao compreender até mesmo um pouco
Neste exercício, você vai:
do código por trás de um app dá a você uma vantagem no processo de design.
Escrever sua primeira linha de código.
código
Imprimir uma mensagem no console.
console Neste e nos exercícios futuros, você descobrirá como o código Swift — a mesma linguagem usada por
desenvolvedores de apps profissionais em todo o mundo — potencializa os recursos de um app.
Uma última coisa: não se preocupe com erros. Todos os programadores travam — do mais novo iniciante
ao especialista mais experiente. Você não precisará de nenhum código desses exercícios, então use-os para
brincar, explorar e matar a curiosidade.
Prepare-se para escrever suas primeiras linhas em Swift!

Título
Olá, mundo! Lorem ipsum dolor
Para começar, sit amet,
baixe o appconsectetuer adipiscing na
Swift Playgrounds elit,App
sed Store.
diam nonummy nibhpara
Disponível euismod
Mactincidunt
e iPad. ut
Aslaoreet dolore em todos os
instruções
magna aliquam erat volutpat. Ut
Baixe oipsum
Lorem app Swift
dolorPlaygrounds
sit amet, consectetuer
e exercícios do tipo Explore Code são para Mac.
adipiscing
crie um novo
elit,playground.
sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna Abra o app. Para criar um playground, encontre a seção Mais Playgrounds na parte inferior da tela e escolha Em
aliquam erat volutpat. Ut Branco ou selecione Arquivo > Novo Playground em Branco. Um playground é iniciado com uma página chamada
"Meu Playground". Você adicionará mais páginas nas próximas explorações de código. Clique duas vezes em seu
novo arquivo Meu Playground para abri-lo. Você verá a janela abaixo:
Págin
as
Área de
programaçã
o
Arquivos de código
adicionais
Explore Code
Título
Olá, mundo! Lorem ipsum
Procure dolorem
o texto sit azul,
amet, “Clique
consectetuer
paraadipiscing elit, sed diam
inserir código” nonummy
na área nibh euismod
de programação tincidunt
e insira ut laoreetcódigo
o seguinte dolore Swift:
Adicione
Lorem ipsum
umadolor
linha sit
de amet,
códigoconsectetuer
que mostrará o
adipiscing
texto no console.
elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna print("Explore Code!")
aliquam erat volutpat. Ut
Execute seu código clicando no botão Run My Code (Executar meu código) no canto inferior direito.
Este código produz uma mensagem no console. Observe que um símbolo vermelho aparece no botão no canto
inferior direito.
Esse é o botão do console. Clique nele para mostrar a saída do seu programa à direita do seu código.
print("Explore Code!")
Explore Code!
Explore Code
Título
Olá, mundo! Lorem ipsum
A página do dolor sit amet, consectetuer
seu playground agora deveadipiscing elit, sed diam
ter a seguinte nonummy nibh euismod tincidunt ut laoreet dolore
aparência:
Reveja ipsum
Lorem seu trabalho
dolor sit
e tente
amet,um
consectetuer
desafio.
adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna
Parabéns! Você acabou de concluir sua primeira exploração de código.
Desafio: os programadores que estão aprendendo uma nova linguagem geralmente escrevem um programa
simples que produz apenas a mensagem "Olá, mundo!". Agora você está pronto para fazer isso no Swift.
Experimente.
Dicas: substitua os caracteres entre as aspas duplas. É muito importante deixar aspas correspondentes no início
e no final. Você se lembrou de clicar em "Executar Meu Código" novamente?
Explore Code
Exemplo
Título
Conhecer seus usuários Quem
Loreméipsum
essa pessoa? Como
dolor sit elaconsectetuer
amet, se descreve?adipiscing
Escolha um dos
Lorem ipsum desafios
dolor e reúna
sit amet, informações
consectetuer Pai de sua
doisresposta
filhos, professor de jardim de infância, tendo aulas online de fotografia.
Insira aqui
sobre as pessoas
adipiscing que
elit, sed os enfrentaram.
diam nonummy nibh Cada
pessoa
euismodé diferente.
tincidunt utÉ laoreet
importante pensar
dolore de forma
magna
ampla
aliquampara
eratcapturar
volutpat.o máximo de diversidade
Ut wisi enim ad minim
possível.
suscipit lobortis
O bom design nisl ut aliquip
é centrado no usuário. Você Quantos anos ela tem? Quais são os aspectos importantes do ambiente dela?
começou bem pensando nos desafios que você e
outras pessoas enfrentam. Continue! Ao 31 Mora em um apartamento no terceiro andar. Não há espaço suficiente para lixeiras grandes em
restringir do geral ao específico, você colocará casa, então possui apenas uma pequena lixeira para reciclagem.
as pessoas individualmente no centro do seu
processo. Insira sua resposta aqui
Histórias pessoais de pessoas reais podem

fornecer uma perspectiva que você não teria de Como ela descreve o desafio que enfrenta?
outra forma. Considere entrevistar pessoas da Na verdade, não entendo o que pode ser reciclado e o que deve ir para o lixo. Os rótulos são difíceis de encontrar, e realmente
sua comunidade para criar perfis autênticos. não sei como diferenciar coisas como vários tipos de papel.
ipsum dolor
O que ela sitquer
mais amet,
emconsectetuer
uma solução?adipiscing
Como isso tornaria sua vida mais fácil?
Preciso de ajuda para identificar rapidamente o que é reciclável. Se eu conseguisse separar os itens rapidamente todas as noites,
poderiasua
Insira usar essa energia
resposta aqui mental que sobraria para os meus filhos, já que eles merecem o máximo da minha atenção.
Em quais circunstâncias específicas ela pode usar um app que resolva a seu desafio?
Eu poderia passar um pouco de tempo todas as noites com meus filhos separando nosso lixo diário.
Definir |
Descobrir
Título
Conhecer seus usuários Quem
Loreméipsum
essa pessoa? Como
dolor sit elaconsectetuer
amet, se descreve?adipiscing
Escolha um dos
Lorem ipsum desafios
dolor e reúna
sit amet, informações
consectetuer Insira sua resposta aqui
sobre as pessoas
adipiscing que
elit, sed os enfrentaram.
diam nonummy nibh Cada
pessoa
euismodé diferente.
tincidunt utÉ laoreet
importante pensar
dolore de forma
magna
ampla
aliquampara
eratcapturar
volutpat.o máximo de diversidade
Ut wisi enim ad minim
possível.
suscipit lobortis
O bom design nisl ut aliquip
é centrado no usuário. Você Quantos anos ela tem? Quais são os aspectos importantes do ambiente dela?
começou bem pensando nos desafios que você e
outras pessoas enfrentam. Continue! Ao
restringir do geral ao específico, você colocará Lorem ipsum dolor sit amet, consectetuer adipiscing
as pessoas individualmente no centro do seu
processo. Insira sua resposta aqui
Histórias pessoais de pessoas reais podem

fornecer uma perspectiva que você não teria de Como ela descreve o desafio que enfrenta?
outra forma. Considere entrevistar pessoas da
sua comunidade para criar perfis autênticos.
ipsum dolor
O que ela sitquer
mais amet,
emconsectetuer
uma solução?adipiscing
Como isso tornaria sua vida mais fácil?
Em quais circunstâncias específicas ela pode usar um app que resolva a seu desafio?
Definir |
Descobrir
Título
Considerar a diversidade Idades ipsum dolor sit amet, consectetuer adipiscing
Lorem Gêneros
Identifique
Lorem ipsumcoisas
dolorsobre
sit amet,
seus consectetuer
usuários que você Insira sua resposta aqui
adipiscing
pode ter esquecido.
A identidade e as circunstâncias de um usuário
aliquam erat volutpat. Ut wisi enim ad minim
terão um grande impacto em como ele
experimentará e usará um app. Faça um resumo de
todos os seus usuários com esses diferentes Idiomas Deficiências
aspectos em mente.
Todas as pessoas têm preconceitos e isso afeta a
maneira como o mundo é percebido. Compense Lorem ipsum dolor sit amet, consectetuer adipiscing
seus preconceitos para que eles não sejam Insira sua resposta aqui
inseridos no design do seu app.
Você identificou algo que não considerou Culturas
ao imaginar seu público? Por exemplo, todosos
seus usuários eram da mesma idade? Considere
voltar aos exercícios anteriores com seus novos
insights em mente.
ipsum dolor siteconômicas
Circunstâncias amet, consectetuer adipiscing
Situações de moradia
Definir |
Descobrir
Exemplo
Título seu público
Resumir Qual
Loremé aipsum
preocupação
dolor sitmais importante
amet, em uma
consectetuer solução?
adipiscing
Resumaipsum
Lorem suas descobertas
dolor sit amet,
sobre
consectetuer
usuários Compreender
Insira a porcentagem
sua resposta aqui de lixo vs. reciclagem.
adipiscing elit,
individuais. Consulte
sed diam
suanonummy
pesquisa anterior
nibh e
euismod
use-a paratincidunt
tirar algumas
ut laoreet
conclusões.
dolore magna
A faixa etária dos usuários é: Nosso app será aberto quando…
15 a 30. Coisas forem jogadas no lixo ou recicladas.

Nosso app será usado neste ambiente:
Interno com conexão Wi-Fi ou rede de celular.
ipsum dolor sit amet,
Nosso ambiente consectetuer
terá estas limitações:adipiscing
O usuário pode estar com as mãos ocupadas.

Ao projetar nosso app, precisamos considerar:
Os usuários podem não saber o que é reciclável.
Definir |
Descobrir
Título seu público
Resumir Qual
Loremé aipsum
preocupação
dolor sitmais importante
amet, em uma
consectetuer solução?
adipiscing
Resumaipsum
Lorem suas descobertas
dolor sit amet,
sobre
consectetuer
usuários Insira sua resposta aqui
adipiscing elit,
individuais. Consulte
sed diam
suanonummy
pesquisa anterior
nibh e
euismod
use-a paratincidunt
tirar algumas
ut laoreet
conclusões.
dolore magna
A faixa etária dos usuários é: Nosso app será aberto quando…

Nosso app será usado neste ambiente:
ipsum dolor sit amet,
Nosso ambiente consectetuer
terá estas limitações:adipiscing
Ao projetar nosso app, precisamos considerar:
Definir |
Descobrir
Defini
r
Analisar causas
Observar
Conhecer seus
Pesquisar concorrentes
usuários Analisar
Considerar a diversidade
Potencializar os recursos Agora que você identificou as pessoas que seu app atende e os desafios que elas
enfrentam, é hora de ser específico. Ao final deste estágio, você terá uma imagem
mais clara da forma que seu app pode assumir.
Você verá as causas básicas dos desafios dos usuários. E você vai usá-las para
estimular ideias que tirem proveito dos principais recursos do iOS, comparando
suas ideias com os aplicativos que já existem.
Exemplo
Título causas
Analisar Os usuários
Lorem ipsum dolor sitestão tendo
amet, este problema:
consectetuer adipiscing
Aprofunde-se
Lorem ipsum dolor
nos problemas
que você Insira suaEles gostariam
resposta aquide começar a reciclar, mas têm dificuldades para se responsabilizar.
adipiscingeelit,
observou encontre
sed diam
o problema
nonummycentral.
nibh
euismodconsidere
Depois, tincidunt como
ut laoreet
seu dolore
app poderia
magna
aliquam isso.
resolver erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper Isso acontece porque:
Perguntar por que algo acontece ajudará você
suscipit lobortis nisl ut aliquip É mais fácil jogar tudo em uma só lixeira.
a descobrir as causas ocultas por trás do que
foi observado diretamente. Quanto mais você
se aprofundar, mais perto chegará da
necessidade central da motivação para sua Lorem ipsum dolor sit amet, consectetuer adipiscing
O motivo:
solução.
Insira suaEles
resposta aqui
têm dificuldade para diferenciar lixo e reciclagem.
Crie quantas cópias do modelo a seguir forem
necessárias para descrever os problemas que
você identificou em sua pesquisa.
Isso acontece porque:
A reciclagem parece complicada e difícil de lembrar.
E a sit
ipsum dolor causa principal
amet, é este problema
consectetuer central:
adipiscing
As pessoas raramente são ensinadas a reciclar.
Podemos resolver esse problema em nosso app:
Ensinando as pessoas sobre o que se classifica como reciclagem e a gamificando a experiência, para que elas possam
se responsabilizar juntamente com seus pares.
Definir | Analisar
Descobrir
Título causas
Analisar Os usuários
Lorem ipsum dolor sitestão tendo
amet, este problema:
consectetuer adipiscing
Aprofunde-se
Lorem ipsum dolor
nos problemas
que você Insira sua resposta aqui
adipiscingeelit,
observou encontre
sed diam
o problema
nonummycentral.
nibh
euismodconsidere
Depois, tincidunt como
ut laoreet
seu dolore
app poderia
magna
aliquam isso.
resolver erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper Isso acontece porque:
Perguntar por que algo acontece ajudará você
a descobrir as causas ocultas por trás do que
foi observado diretamente. Quanto mais você
se aprofundar, mais perto chegará da
necessidade central da motivação para sua Lorem ipsum dolor sit amet, consectetuer adipiscing
O motivo:
solução.
Crie quantas cópias do modelo a seguir forem
necessárias para descrever os problemas que
você identificou em sua pesquisa.
Isso acontece porque:
E a sit
ipsum dolor causa principal
amet, é este problema
consectetuer central:
adipiscing
Podemos resolver esse problema em nosso app:
Definir | Analisar
Descobrir
Título
Pesquisar concorrentes Lorem ipsum dolorEste app éconsectetuer
sit amet, interessante porque:
adipiscing Gosto/não gosto deste app porque:
Encontre
Lorem ipsum
e descreva
dolor sit
osamet,
apps relacionados
consectetuer ao Insira sua resposta aqui
adipiscingque
problema elit,você
sed diam
identificou.
nonummy nibh
Descubra o que as pessoas estão usando
atualmente para resolver o problema. Pesquise na
App Store por apps semelhantes para descobrir o
que os usuários gostam ou não em sua solução.
Isto dará a você uma visão de quem são seus
concorrentes.
ipsum dolor sit amet, consectetuer adipiscing
Definir | Analisar
Descobrir
Título
Potencializar os recursos Mapa
Lorem ipsum dolor sit amet, consectetuer adipiscing Bluetooth
Mostre mapas interativos que localizam o usuário, Comunique-se sem fio com aparelhos próximos
Lorem
Veja osipsum dolor
recursos do sit
iOSamet, consectetuer
que você pode usar no fornecem aqui
Insira sua resposta instruções, indicam pontos de interesse, usando uma interface padrão, segura e de baixo
adipiscing
seu app. elit, sed diam nonummy nibh mostram imagens de satélite e muito mais. consumo de energia.
O iOS tem diversas tecnologias excelentes para
aliquam erat volutpat. Ut wisi enim ad minim NFC (Near field communication) GPS
definir como os usuários vão interagir com um
veniam, quis nostrud exerci tation ullamcorper Detecte quando seu aparelho está perto de um sensor Localize o aparelho em qualquer lugar do mundo e
app. Você verá algumas indicadas aqui, mas para interagir com sistemas de pagamento e muito procure as informações correspondentes, como país
lembre-se de que existem muitas outras. mais. e cidade.
Quais recursos seus concorrentes têm em comum
que podem ser necessários para o seu app? Quais Realidade aumentada Menus de contexto
recursos podem ser revolucionários? Lorem ipsum dolorobjetos
Coloque sit amet, consectetuer
virtuais adipiscing
no mundo para que Fornecem acesso rápido às ações para um objeto na
os usuários possam ver e interagir na tela. tela.
Visite o site iOS Human Interface Guidelines em Insira sua resposta aqui
User Interaction (Interação do usuário) e System Processamento de imagem Microfone e alto-falantes
Capabilities (Recursos do sistema) para saber Use algoritmos sofisticados para ajustar imagens e Capture e reproduza áudio estéreo de alta fidelidade.
mais. iOS Human Interface aplicar filtros.
Guidelines
Arrastar e soltar
Reconhecimento de voz Mova os itens pressionando e arrastando.
Converta áudio falado em texto.
Lorem ipsum dolor sit amet, consectetuer adipiscing Lorem ipsum dolor sit Acelerômetro
amet, consectetuere giroscópio
adipiscing Lorem
Resposta tátil Controle a orientação e o movimento do aparelho.
Forneça feedback por toque, fazendo o
aparelho vibrar.
Widgets
Insira sua resposta aqui Mostre informações relacionadas ao seu app na tela
Aprendizado de máquina de início em diversos tamanhos e estilos.
Use algoritmos sofisticados para analisar
e categorizar informações visuais, auditivas, textuais
e outras formas de informação. Notificações
Apresenta atualizações para o usuário
Câmera na tela bloqueada quando ele não estiver usando o
Use as câmeras frontal e traseira integradas e seus app.
poderosos recursos de processamento.
Definir | Analisar
Descobrir
Explo
re
Code
Olá, mundo!
Mapa
Um componente
Lorem ipsum dolor
importante
sit amet, da
consectetuer
programaçãoadipiscing
é reconhecer
elit, sed
o trabalho
diam nonummy
que já foinibh
feitoeuismod
para você
tincidunt
e descobrir
ut
laoreetusá-lo.
como doloreOs
magna
vários
aliquam
recursos
erat
integrados
volutpat.avançados
Ut do iOS são organizados em estruturas.
Neste exercício, você mostrará um mapa interativo usando uma estrutura para iOS. Para começar, lembre-se
de que o "Meu Playground" deve estar aberto no app Swift Playgrounds.

Criar
Escrever
umasua
página.
primeira linha de código
Importar
Imprimir uma
uma estrutura.
mensagem no console
Aprender sobre a visualização dinâmica.
Mostrar um mapa interativo.
Título
Mapa Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
Crie uma
Lorem ipsum
novadolor
página
sit eamet,
adicione
consectetuer
código para Caso não esteja aparecendo, abra a barra
adipiscing
criar um mapa.
elit, sed diam nonummy nibh lateral clicando em . Para criar uma nova
página, passe o mouse ao lado de "Páginas" e
clique no botão ou selecione Arquivo >
Nova Página.
Altere o título da página para "Mapa".

Enquanto você está editando os nomes
das páginas, clique com o botão direito
do mouse na página "Meu Playground",
clique em Renomear, depois digite
“Olá, mundo!" para dar um nome
mais descritivo.
No editor, digite o seguinte código Swift:
MKMapView()
Você verá um ponto vermelho, indicando um

erro:
MKMapView()
Explore Code
Título
Mapa Lorem
Este é ipsum dolorcorreto
o código sit amet, consectetuer
para criar umadipiscing
mapa, maselit,o sed diam nonummy
MKMapView estánibh
emeuismod tincidunt ut laoreet dolore
uma estrutura
Importeipsum
Lorem a estrutura
dolor MapKit.
sit amet, consectetuer especializada. Você precisará importar essa estrutura para usá-la em seu código.
aliquam erat volutpat. Ut Acima da sua primeira linha de código, insira:
import MapKit O Swift usa diferentes estilos de fonte

e cores (destaque de sintaxe) para
Seu código agora deve ter a seguinte aparência: ajudar você a ler o código.
import MapKit
MKMapView()
import é uma palavra-chave no Swift. Palavras-chave têm um significado especial no Swift e isso as
diferencia do resto do seu código.
Agora que você importou a estrutura MapKit, o erro desaparecerá. Clique em Executar Meu Código.
O código é executado, mas você não verá um mapa. Para visualizá-lo, você precisará fazer mais uma
coisa.
Explore Code
Título
Mapa Loremcriou
Você ipsumum
dolor sit amet,
mapa, masconsectetuer adipiscing
outra estrutura elit, sed diam
é necessária para nonummy
mostrá-lo.nibh euismod tincidunt ut laoreet dolore
A estrutura
Importeipsum
Lorem a estrutura
dolor PlaygroundSupport
para PlaygroundSupport permite controlar aspectos do próprio playground. Insira mais uma linha de
adipiscing
mostrar o mapa.
elit, sed diam nonummy nibh código acima da primeira linha:
import PlaygroundSupport
Depois, adicione o código destacado no início da última linha:
PlaygroundPage.current.liveView = MKMapView()
Lembre-se de incluir um espaço antes e depois do sinal de igual. Seu playground completo agora
deve ler:
import MapKit
PlaygroundPage.current.liveView = MKMapView()
Agora, execute seu código.

A visualização dinâmica no playground é aberta para mostrar o mapa que você criou. Você pode interagir
como faria com qualquer app que incorpora um mapa. Experimente clicar e arrastar para mostrar
diferentes regiões do mapa. Se você estiver usando um trackpad, use o gesto dos dois dedos para aumentar
o zoom.
Explore Code
Título
Mapa Lorem ipsum dolor
Seu exercício sit amet,agora
concluído consectetuer
deve teradipiscing elit, aparência:
a seguinte sed diam nonummy nibh euismod tincidunt ut laoreet dolore
Reveja ipsum
Lorem seu trabalho.
dolor sit amet, consectetuer
Este é um exemplo simples que mostra o poder das estruturas no Swift. Você pode usar um grande
conjunto de funcionalidades conhecidas apenas importando as que quiser. Na verdade, além das próprias
instruções de importação, usamos apenas uma linha de código para criar o mapa e mostrá-lo na
visualização dinâmica!
Explore Code
Defini
r
Encontrar diferenciais
Observar
Conhecer
Definir recursos
seus usuários Planejar
Considerar
Priorizar recursos
a diversidade Está tudo pronto para você montar um plano concreto para seu app. Ao final
Resumir seu
Descrever as público
principais
deste estágio, você terá um plano conciso e bem definido e já poderá
funções
começar o desenvolvimento de um protótipo.
Definir um MVP
Você construirá seu plano identificando os principais diferenciais, definindo
objetivos e, depois, restringindo seu conjunto de recursos exatamente aos
que são necessários para testar se seu app vai impactar usuários reais.
Título
Encontrar diferenciais Lorem ipsum dolorNosso appconsectetuer
sit amet, será diferenteadipiscing
desses apps por:
Crie uma
Lorem ipsum
listadolor
de maneiras
sit amet,que
consectetuer
seu app será Insira sua resposta aqui
adipiscingdos
diferente elit,apps
sed que
diam já nonummy
existem. nibh
Os diferenciais do seu app o colocam em
destaque comparado a outros no mercado.
Um diferencial
suscipit lobortisénislum ut
dos principais recursos do
aliquip
seu app. Não são diferenciais os seguintes:
Estilo, como cor, fontes, ícones e imagens.
Organização dos itens na tela. Lorem ipsum dolor sit amet, consectetuer adipiscing
Como as telas são organizadas. Insira sua resposta aqui
Definir | Planejar
Descobrir
Explo
re
Code
Olá, mundo!
Modelo e visualização
Lorem designer,
Como ipsum dolor
seu sit
focoamet, consectetuer
deverá adipiscing elit,
estar principalmente sed diamvisível
na interface nonummye na nibh euismod
usabilidade dotincidunt
app. Os ut
laoreet dolore magna
desenvolvedores usamaliquam
o termoerat volutpat. Utpara descrever as partes de um app que o usuário vê e interage.
"visualização"
O modelo de um app define seus dados. Ele é um complemento das visualizações do app e igualmente
importante.
Os desenvolvedores separam as visualizações dos modelos porque são independentes. Uma visualização
pode mostrar dados de diferentes modelos em momentos diferentes e os mesmos dados de um modelo
podem aparecer em várias visualizações.
Aprender
Escrever sua
como
primeira
separarlinha
modelos
de código
e
visualizações.
Imprimir uma mensagem no console Neste exercício, você criará dados de modelo e os mostrará em duas visualizações diferentes.
Criar variáveis.
Descobrir outra maneira de mostrar Para começar, lembre-se de que o "Meu Playground" deve estar aberto no app Swift Playgrounds. Depois,
um texto. crie uma nova página com o nome "Modelo e visualização".
Título e visualização
Modelo Lorem
Insira aipsum dolor linha
seguinte sit amet,
de consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
código Swift:
Mostre ipsum
Lorem dados dolor
de texto
sit no
amet,
console.
consectetuer
euismod tincidunt ut laoreet dolore magna "Explore Code!"
Este valor de texto é um modelo. Se você executar seu código agora, o texto será criado, mas você não verá
nada. Porém, você já mostrou dados usando o comando print(). O console é uma espécie de visualização. O
comando print() adiciona uma linha de texto a ela.
Adicione a seguinte linha de código; lembre-se de manter a primeira linha, você vai voltar nela.
Execute seu código e abra o console para ver a mensagem.
"Explore Code!"
print("Explore Code!") Explore Code!
Explore Code
Modelo Lorem ipsumé dolor
O console sit amet,
útil para consectetuer adipiscing
os desenvolvedores elit, sed diam
examinarem nonummy
os dados nibh apps,
em seus euismod tincidunt
mas ut laoreetpara
não é visível dolore
o usuário.
Mostre ipsum
Lorem dados dolor
de texto
sit na
amet,
visualização
consectetuer
dinâmica. Para mostrar texto no aparelho de um usuário, você precisará de outro tipo de visualização. Insira o seguinte
adipiscing elit, sed diam nonummy nibh código no início do seu playground:
import SwiftUI
Agora adicione a seguinte linha no final do seu playground para criar uma visualização e mostrar a string:
Text é um tipo de visualização
var textView = Text("Explore Code!") que pode mostrar dados de texto,
textView é uma variável que foi que são colocados
O sinal de igual associa o valor à entre parênteses.
declarada usando a palavra-chave direita com a variável à esquerda.
var. Você usa variáveis em Swift Isso é chamado de atribuição de
para se referir a coisas por nome. uma variável.
Você criou uma visualização para o seu texto. Agora é hora de mostrá-lo usando a visualização dinâmica.
Adicione mais duas linhas de código, conforme destacado abaixo:
Adiciona suporte para playground.
import SwiftUI
"Explore Code!"
var textView = Text("Explore Code!")
Define a visualização Text como
PlaygroundPage.current.setLiveView(textView) a visualização dinâmica da página
atual.
Agora execute o código para ver seu texto na visualização dinâmica.

Explore Code
Modelo Lorem ipsum
Observe quedolor
vocêsitinseriu
amet, consectetuer adipiscing
"Explore Code!" comoelit,um
sedvalor
diam nonummy nibhvezes.
de texto três euismod tincidunt
Não ut laoreet
é apenas dolore
repetitivo
Crie umipsum
Lorem modelodolor
usando
sit amet,
uma consectetuer
variável. — um erro de digitação em um valor quebraria sua intenção de fazer com que os três representem os
adipiscing elit, sed diam nonummy nibh mesmos dados do modelo.
aliquam erat volutpat. Ut Você acabou de aprender a criar uma variável para se referir a algo pelo nome. Você pode usar a mesma
técnica aqui com seus dados de texto. Atualize a linha em que você criou o valor "Explore Code!"
atribuindo-o a uma nova variável.
var message = "Explore Code!"
Agora você pode usar a variável message em qualquer lugar para se referir a este texto. Substitua as
instâncias restantes de "Explore Code!" por message. Seu código concluído agora deve ter a seguinte
aparência:
import SwiftUI
var message = "Explore Code!"
print(message)
var textView = Text(message)
PlaygroundPage.current.setLiveView(textView)
Execute seu código. Como antes, você deve ver esse valor de texto sendo
mostrado na visualização dinâmica e no console.
Você finalizou esta etapa para separar seu modelo de suas visualizações. A variável message armazena o texto do
modelo "Explore Code!". Você o mostrou em duas visualizações diferentes.
Explore Code 34
Modelo Lorem ipsum dolor
Reveja ipsum
Lorem seu trabalho
dolor sit
e tente
amet,um
consectetuer
desafio.
Uma parte importante do desenvolvimento de um app é definir e criar modelos e visualizações que o torne
mais potente. Ao separar os dois conceitos, você pode focar neles separadamente. Considere os tipos de
modelos e visualizações que seu app pode ter enquanto continua a criar.
Desafio: experimente mudar o texto que você atribuiu à variável message e observe o resultado.
Explore Code
Exemplo
Título recursos
Definir Atuais ipsum dolor sit amet, consectetuer adipiscing
Lorem focam principalmente
Resumaipsum
Lorem os recursos
dolor sit
básicos
amet,econsectetuer
os diferenciais do apps desua
Insira reciclagem
resposta aqui no que é considerado reciclagem.
adipiscing
seu app. elit, sed diam nonummy nibh
Estabelecer objetivos claros e fáceis de
se alcançar ajuda você a se concentrar nos
problemas que está tentando resolver e na
maneira como espera resolvê-los. Todas as
pesquisas anteriores ajudarão você a definir os Como básico, nosso app precisará:
recursos básicos e os diferenciais do seu app. Fazer o registro de lixo e reciclagem. Ler os códigos de barras dos produtos para saber se eles
Lorem ipsum dolor sit amet, consectetuer adipiscing são recicláveis.
Ensinar sobre o que é reciclável. Incluir links rápidos para causas ambientais.
Hospedar uma vitrine de produtos ecológicos. Apresentar a divisão entre lixo e reciclagem.

Nosso app será diferente por:
Estimular a reciclagem com a gamificação. Fazer comunicação com lixeiras inteligentes para calcular o
peso automaticamente.
Criar desafios para despertar ideias. Hospedar uma vitrine de materiais de reciclagem, como
lixeiras, sacos e ímãs.
Definir | Planejar
Descobrir
Título recursos
Definir Atuais ipsum dolor sit amet, consectetuer adipiscing
Resumaipsum
Lorem os recursos
dolor sit
básicos
amet,econsectetuer
os diferenciais do Insira sua resposta aqui
adipiscing
seu app. elit, sed diam nonummy nibh
Estabelecer objetivos claros e fáceis de
se alcançar ajuda você a se concentrar nos
problemas que está tentando resolver e na
maneira como espera resolvê-los. Todas as
pesquisas anteriores ajudarão você a definir os Como básico, nosso app precisará:
recursos básicos e os diferenciais do seu app.

Definir | Planejar
Descobrir
Explo
re
Code
Olá, mundo!
Strings
Lorem todos
Quase ipsumosdolor
appssit amet, consectetuer
mostram adipiscing
texto e muitos elit,
permitem quesed diam nonummy
o usuário nibh euismod
digite usando o teclado.tincidunt ut o
Em Swift,
laoreet dolore
conceito magna
de texto — ealiquam eratvocê
tudo o que volutpat.
pode Ut
fazer com ele — é chamado de "string". Você já usou strings
para criar valores como o "Explore Code!" Neste exercício, você vai explorar um pouco mais do que pode
ser feito com as strings.
Para começar, lembre-se de que o "Meu Playground" deve estar aberto no app Swift Playgrounds. Depois,
crie uma nova página com o nome "Strings".
Aprender sobre
Escrever sua strings.linha de código
primeira
Criar umauma
Imprimir string com concatenação.
mensagem no console
Criar uma string com interpolação.
Título
Strings Lorem ipsummais
A maneira dolorsimples
sit amet,de
consectetuer
trabalhar adipiscing elit,de
com valores sedstring
diam nonummy nibh euismod
é simplesmente inserirtincidunt
o textoutentre
laoreet dolore
aspas
Criar uma
Lorem ipsum
string
dolor
com
sitconcatenação.
amet, consectetuer duplas. Crie duas novas strings inserindo o seguinte código:
aliquam erat volutpat. Ut "Desafio do Fim do Azeite de Dendê"
"Desafio da Coleta de Lixo"
Observe o texto comum, "Challenge", em cada string. Agora imagine que seu app pode criar muitas
dessas strings de forma dinâmica. O Swift permite que você crie strings com várias partes. Comece
definindo uma nova variável abaixo para armazenar o texto que não é alterado, incluindo o espaço em
branco:
var challengeString = "Desafio "

Use outra variável para alterar o início da string, inserindo o seguinte código:
var name = "Fim do Azeite de Dendê"

Você pode combinar essas duas strings usando o operador "+". Isso se chama concatenação de string.
Insira as duas linhas a seguir para criar uma nova string e imprimi-la.
var noPalmOilChallenge = name + challengeString

print(noPalmOilChallenge)
Execute seu código e abra o console para ver a mensagem.
Explore Code
Título
Strings Lorem ipsum dolor
Outra maneira de sit amet, consectetuer
combinar strings é adipiscing
usando a elit, sed diam nonummy
interpolação nibh
de strings, euismod
que tinciduntautpreencher
é semelhante laoreet dolore
os espaços em
Criar uma
Lorem ipsum
string
dolor
com
sitinterpolação.
amet, consectetuer branco em uma frase. Pense nisso como um espaço reservado que irá inserir o valor do nome quando a string precisar
adipiscing elit, sed diam nonummy nibh ser usada.
aliquam erat volutpat. Ut "Desafio \(name)" … vai ficar… "Desafio ________"
Use a interpolação de strings para
Este é umcriar a mesma
espaço string
reservado que"Desafio
irá do Fim do Azeite de Dendê" digitando o seguinte
código: inserir o valor de name quando a
string precisar ser usada.
var anotherNoPalmOilChallenge = "Challenge \(name)"

print(anotherNoPalmOilChallenge)
Observe que a parte constante da string é vermelha, enquanto a parte interpolada é preta. Este é outro ótimo exemplo
de destaque de sintaxe.
A interpolação de strings é poderosa. Ela também funciona com números, por exemplo. Insira o seguinte código:
var pointsForCompletion = 8
print("Você pode marcar \(pointsForCompletion) pontos ao concluir.")
Uma string pode ter vários valores numéricos interpolados. Insira o seguinte código para substituir o nome do desafio
e o número de pontos em uma sequência mais longa:
print("Conclua o \(noPalmOilChallenge) para marcar \(pointsForCompletion) pontos!")
Execute seu código e analise o resultado no console.

Explore Code
Título
Strings Lorem ipsum dolor
Reveja ipsum
Lorem seu trabalho
dolor sit
e tente
amet,um
consectetuer
desafio.
Desafio: experimente o que você aprendeu sobre a construção de strings. Tente atribuir seu nome a givenName e
seu sobrenome a familyName e, depois, crie fullName usando concatenação (+). Use interpolação para incorporar
isso em uma string como: "Meu nome completo é _____ _____." Que tal adicionar sua idade? Reveja as
explorações anteriores e tente mostrá-las usando uma visualização de texto.
Explore Code
Exemplo
Título
Priorizar recursos Atuais ipsum dolor sit amet, consectetuer adipiscing
Faça uma
Lorem ipsum
cópiadolor
do exercício
anterior. Anote os apps desua
Insira reciclagem
resposta aqui no que é considerado reciclagem.
adipiscing
recursos mais
elit,importantes
sed diam nonummy
e classifique-os
nibh por
euismod tincidunt
prioridade. Pergunte-se
ut laoreet
quaisdolore
recursos
magna
são
aliquam erat volutpat.
absolutamente necessários.
Ut wisi
É possível
enim ad reduzir
minim
veniam,
sua lista quis
a trêsnostrud
ou quatro
exerci
recursos
tationprincipais?
ullamcorper
suscipit
Você precisa
lobortis
reclassificar
nisl ut aliquip
suas prioridades?
Identificar os recursos mais importantes de um Como básico, nosso app precisará:
app ajuda você a trabalhar para chegar ao seu Fazer o registro de lixo e reciclagem. Ler os códigos de barras dos produtos para saber se eles
produto mínimo viável (MVP). Sua primeira Lorem ipsum dolor sit amet, consectetuer adipiscing1 são recicláveis. 8
iteração do app deve incluir apenas os recursos
necessários para validar sua ideia. Insira sua resposta aqui
Para evitar o "aumento excessivo de recursos",
Ensinar sobre o que é reciclável. Incluir links rápidos para causas ambientais.
é importante diferenciar os recursos essenciais
daqueles que seriam grandes melhorias. O foco
2 5
claro e direto é essencial para o sucesso do
processo de design.
Hospedar uma vitrine de produtos ecológicos. Apresentar a divisão entre lixo e reciclagem.
7 6

Estimular a reciclagem com a gamificação. Fazer comunicação com lixeiras inteligentes para calcular o
3 peso automaticamente. 9
Criar desafios para despertar ideias. Hospedar uma vitrine de materiais de reciclagem, como
4 lixeiras, sacos e ímãs. 10
Definir | Planejar
Descobrir
Exemplo
Descrever as
Título Para este
Lorem recurso:
principais funções
Lorem ipsum dolor sit amet, consectetuer Fazer osua
Insira registro de lixo
resposta aquie reciclagem
adipiscing
Descreva aselit, sed diamfunções
principais nonummyparanibh
cada
recurso prioritário. Copie e cole este slide
quantas vezes Ut wisi enim ad minim
for necessário.
Inclua
suscipitaslobortis
informações
nisl utque o usuário verá e as
aliquip O usuário deverá ser capaz de fazer e ver o seguinte: Anotações:
ações que ele executará. Adicione anotações
Adicionar entrada de registro Selecionar peso ou item
para esclarecer seus pensamentos ou fazer
perguntas que você vai querer responder
enquanto trabalha em seu projeto. Lorem ipsum dolor sit amet, consectetuer adipiscing
Não pense na interface do usuário ainda. Insira sua resposta
Descrever os itens aqui O quanto foi reciclado no dia
Elementos como botões, abas e ícones
são compatíveis e definidos pelos dadose ações
em seu app. Quanto mais você entendê-los, mais
o seu design se ajustará aos recursos do MVP. Manter registros de itens antigos Dia, semana, mês
Escolher o dia em que a reciclagem foi feita

Definirsua
Insira a data de hoje
resposta como padrão
aqui Pode ser necessário um atalho rápido para "hoje"
Navegar pelas datas anteriores
Compartilhar entrada de registro nas redes sociais
Definir | Planejar
Descobrir
Descrever as
Título Para este
Lorem recurso:
principais funções
Lorem ipsum dolor sit amet, consectetuer Insira sua resposta aqui
adipiscing
Descreva aselit, sed diamfunções
principais nonummyparanibh
cada
recurso prioritário. Copie e cole este slide
quantas vezes Ut wisi enim ad minim
for necessário.
Inclua
suscipitaslobortis
informações
nisl utque o usuário verá e as
aliquip O usuário deverá ser capaz de fazer e ver o seguinte: Anotações:
ações que ele executará. Adicione anotações
para esclarecer seus pensamentos ou fazer
perguntas que você vai querer responder
enquanto trabalha em seu projeto. Lorem ipsum dolor sit amet, consectetuer adipiscing
Não pense na interface do usuário ainda. Insira sua resposta aqui
Elementos como botões, abas e ícones
são compatíveis e definidos pelos dadose ações
em seu app. Quanto mais você entendê-los, mais
o seu design se ajustará aos recursos do MVP.
Definir | Planejar
Descobrir
Exemplo
Título um MVP
Definir Para este
Lorem recurso:
Volte para
Lorem ipsum
os slides
dolor sit
“Descrever
amet, consectetuer
principais Fazer sua
Insira o registro de aqui
resposta lixo e reciclagem
adipiscingouelit,
funções” duplique-os
sed diam nonummy
e priorize as
nibh
euismodmais
funções tincidunt
importantes
ut laoreet
e cruciais
dolore magna
para a
implementação de cadaUtrecurso.
wisi enim ad minim
Crie seu MVP com base nos recursos que O usuário deverá ser capaz de fazer e ver o seguinte: Anotações:
identificar aqui.
Adicionar entrada de registro Selecionar peso ou item
Lembre-se de que você não é o usuário. Se 1
você ficar travado, pense no que mais
ajudaria o usuário a atingir os objetivos Lorem ipsum dolor sit amet, consectetuer adipiscing
identificados. Insira sua resposta
Descrever os itens aqui O quanto foi reciclado no dia
2
Manter registros de itens antigos Dia, semana, mês

3
Escolher o dia em que a reciclagem foi feita

Lorem ipsum dolor sit amet, consectetuer adipiscing Lorem
5 ipsum dolor sit amet, consectetuer adipiscing Lorem
Definirsua
Insira a data de hoje
resposta como padrão
aqui Pode ser necessário um atalho rápido para "hoje"
4
Navegar pelas datas anteriores

6
Compartilhar entrada de registro nas redes sociais

7
Definir | Planejar
Descobrir
Prototipar
É hora de construir um protótipo funcional do seu app no Keynote. Você começará
mapeando as telas para formar a arquitetura do app e, depois, aplicará os elementos
básicos de UI para criar um wireframe. Em seguida, você vai refinar seu protótipo
usando diretrizes de design comuns para garantir que o app atenda às expectativas do
usuário do iOS. E, finalmente, você definirá a personalidade do seu app com cores,
ícones e muito mais.
Protot
ipar
Esboçar as telas
Observar
Conheceras
Agrupar seus
telas
usuários Mapa
Considerar
Vincular as atelas
diversidade Um mapa de app é um conjunto de esboços que descrevem as informações e
as funções em cada tela, e como elas se relacionam entre si. Ao final desta
etapa, você terá um conjunto de esboços de telas com agrupamentos e
relacionamentos bem definidos.
Ao mapear seu app, você define a arquitetura dele. Os usuários do iOS têm
um conjunto de expectativas — um modelo mental — sobre a forma como
um app deve se comportar. Eles esperam que as informações relacionadas
sejam agrupadas e que as atividades sejam fáceis de navegar. Você irá
extrair a arquitetura do seu app das principais funções do MVP, tomando
decisões com base em como você espera que os usuários trabalhem com o
app.
Exemplo
Observaras telas
Esboçar Há perguntas frequentes sobre as quais você ou outras pessoas pensam regularmente?
Revise ipsum
Lorem as principais
dolor sit
funções
amet, consectetuer
do seu MVP Insira sua resposta aqui
eadipiscing
organize-as
elit,em
sedtelas,
diamdescrevendo
nonummy nibh
o conteúdo
eeuismod
as açõestincidunt
de cada ut uma.
As principais funções que você listou têm
relações naturais que sugerem quais delas
devem ficar juntas. Sinta-se à vontade para
dividir uma função em mais de um item em um Resumo do dia Informações do item Visualização Adicionar item
esboço de tela, ou combinar várias funções de calendário
principais em um item. As anotações ajudarão Quais são os desafios que você ou outras pessoas enfrentam diariamente?
você a tomar essas decisões. Resumo da reciclagem dehoje Tipo de item Calendário com data atual Selecionar lixo ou reciclagem
Procure manter o foco de cada tela em um único
conceito ou atividade, resumido no seu título, Lista detalhada da reciclagem de Peso Resumo dos itens do mês Selecionar por peso ou por item
sem se preocupar coma quantidade de telas. hoje
Depois, você vai organizá-las de uma maneira

que os usuários entendam. Ver as informações de um item Data Ver o registro de reciclagem de Informações de entrada: data,
registrado um dia tipo, peso
Trabalhe com esses esboços na etapa
de mapeamento. Durante a etapa de wireframe, Adicionar novos itens ao lixo ou à Informações de reciclagem
você converterá os esboços de tela em texto, reciclagem
imagens, controles, ícones e outros elementos Você ou outras pessoas usaram soluções alternativas em apps que já existem? Você conhece algum app que resolve
de UI no seu app. parcialmente um desafio, mas que exige que você o use de forma não intencional ou aumente seus recursos
Enviar itens com outros
apps ou atividades?
Cancelar entrada
Prototipar |
Descobrir
Mapa
Observaras telas
Esboçar Há perguntas frequentes sobre as quais você ou outras pessoas pensam regularmente?
Revise ipsum
Lorem as principais
dolor sit
funções
amet, consectetuer
do seu MVP Insira sua resposta aqui
eadipiscing
organize-as
elit,em
sedtelas,
diamdescrevendo
nonummy nibh
o conteúdo
eeuismod
as açõestincidunt
de cada ut uma.
aliquam erat volutpat. Ut Título da tela
As principais funções que você listou têm
relações naturais que sugerem quais delas
devem ficar juntas. Sinta-se à vontade para
dividir uma função em mais de um item em um
esboço de tela, ou combinar várias funções
principais em um item. As anotações ajudarão Quais são os desafios que você ou outras pessoas enfrentam diariamente?
você a tomar essas decisões.
Procure manter o foco de cada tela em um único
conceito ou atividade, resumido no seu título,
sem se preocupar coma quantidade de telas.
Depois, você vai organizá-las de uma maneira
que os usuários entendam.
Trabalhe com esses esboços na etapa
de mapeamento. Durante a etapa de wireframe,
você converterá os esboços de tela em texto, Principais funções
imagens, controles, ícones e outros elementos Você ou outras pessoas usaram soluções alternativas em apps que já existem? Você conhece algum app que resolve
de UI no seu app. parcialmente um desafio, mas que exige que você o use de forma não intencional ou aumente seus recursos com outros
apps ou atividades?
Prototipar |
Descobrir
Mapa
1. Crie um novo arquivo no Keynote.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
Abra
magna
2. o Inspetor
aliquam de documento
erat volutpat. Ut ou selecione
Visualizar > Inspetor > Documento.
3. Em Tamanho do Slide, selecione Personalizar

Tamanho do Slide.
Insira 375 para largura e 812 para altura. Clique em

Prototipa
4.
OK.
r eelit,
Lorem
Crie umipsum
novo dolor
adipiscing
protótipo
arquivo
adicione
sit do
sed diam
amet,
Keynote
um slide
consectetuer
nonummy
para o seu
para cada
nibhesboço
5. Abra o Inspetor de formato ou selecione Visualizar >
Inspetor > Formato.
de tela. tincidunt ut laoreet dolore magna
euismod
aliquam erat volutpat. Ut Em Fundo, selecione Preenchimento de
É hora de começar a criar seu protótipo de app 6.
em um novo documento do Keynote. O Cor e escolha cinza claro (ou outra cor para
Keynote é uma ótima maneira de fazer um
contrastar com o branco).
protótipo que pode ser visto noaparelho que
será testado. 7. Na parte superior do inspetor, use o botão Alterar
Mestre para selecionar o slide mestre em branco.
Agora crie um slide para cada esboço de tela e copie

seus esboços para os slides.
Para copiar um esboço de tela, clique e arraste para

selecionar todas as suas caixas. Copie e cole no slide
em branco no seu protótipo e arraste para posicioná-
lo.
Prototipar |
Descobrir
Mapa
Explo
re
Code
Olá, mundo!
Dados e nomenclatura
Texto não
Lorem ipsum
é o dolor
único sit
tipoamet,
de dado
consectetuer
em um app.
adipiscing
O Swiftelit,
podesed
trabalhar
diam nonummy
com muitos
nibhoutros
euismod
tipostincidunt
comunsutde
laoreet dolore
valores, como magna
números aliquam
e datas.erat
As volutpat.
diferentesUtformas dos dados são chamadas de tipos. Todos os dados no
Swift pertencem a um tipo — incluindo aqueles que você cria para representar as informações que serão
trabalhadas no app. Neste exercício, você criará seu próprio tipo personalizado.
crie uma nova página com o nome "Dados e nomenclatura".
Escrever sua
Aprender sobre
primeira
estruturas.
linha de código
Imprimir uma
Aprender sobremensagem
nomenclatura.
no console
Usar comentários de código.
Título e nomenclatura
Dados Lorem ipsum
Para criar dolor
seu sit amet,
próprio tipoconsectetuer
de dados em adipiscing
Swift, elit, sed diam nonummy
é necessário usar umanibh euismodCada
estrutura. tincidunt ut laoreet
estrutura dolore
personalizada
Defina ipsum
Lorem e nomeiedolor
uma
sitestrutura.
amet, consectetuer no seu código deve ter um nome reconhecível e compreensível — por exemplo, Challenge (Desafio),
adipiscing elit, sed diam nonummy nibh RecyclingItem (Item de reciclagem) e Achievement (Conquista). Por convenção, o nome de um tipo sempre
euismod tincidunt ut laoreet dolore magna começa com uma letra maiúscula. Não é permitido usar espaços em nomes de tipos. Se precisar de mais de
uma palavra para descrever um tipo, use CamelCase (a primeira letra de cada palavra em maiúscula).
Insira o código a seguir para criar uma estrutura (indicada pela palavra-chave struct). Certifique-se de incluir
as chaves, que ficam perto do P no seu teclado.
struct Challenge {
}
Você pode criar um novo valor para o desafio (uma instância) digitando seu nome seguido por parênteses.
Adicione o seguinte código para criar duas instâncias de Challenge e atribua um identificador a cada uma:
var noStraws = Challenge()

var pickUpTrash = Challenge()
Uma instância de estrutura é basicamente um valor como qualquer outro. Tente imprimir ambos no console:
print(noStraws)
print(pickUpTrash)
Você pode ver que, embora sejam duas instâncias diferentes atribuídas a duas variáveis diferentes, não há nada
para distinguir um desafio do outro.
Explore Code
Dados Lorem ipsum
Claro que dolor
não sit amet,
existem doisconsectetuer adipiscing
desafios iguais. elit, no
Pense sed que
diamdistingue
nonummyumnibhdesafio
euismoddetincidunt
outro. ut laoreet dolore
Liste asipsum
Lorem propriedades
dolor sitde
amet,
umaconsectetuer
estrutura. Quais propriedades o tipo Challenge precisa para oferecer suporte à funcionalidade do app? Fazer uma
adipiscing elit, sed diam nonummy nibh lista ou gráfico pode ajudar:
aliquam erat volutpat. Ut A próxima exploração mostrará
Título único como adicionar propriedades dentro da definição
Data e horadeespecíficas
um tipo. para
Mas,opor
enquanto, você pode usar comentários no seu código para planejar. O Swift vai ignorartérmino
qualquer coisa que
struct Challenge
você digitar depois de duas barras (//) até o final da linha. Os programadores usam comentários para fazer
anotações e Número de o
descrever pontos para
código. É um desafio em equipe, sim
conclusão ou não?
Insira alguns comentários entre chaves como espaços reservados para as propriedades da estrutura
Challenge. Você pode substituí-los por código mais tarde.
struct Challenge {
// título – o nome
// pontos – marcados após conclusão bem-sucedida
// é equipe – verdadeiro para um esforço em equipe, falso se foi feito sozinho
// data de término – quando não será mais oferecido
}
Explore Code
Dados Lorem ipsum dolor
Reveja ipsum
Lorem seu trabalho.
Desafio: pense nos tipos de dados que você precisa para seu próprio app. Crie uma nova estrutura para
cada tipo e use comentários para descrever as propriedades.
Explore Code
Exemplo
Observaras telas
Agrupar Há perguntas frequentes sobre as quais você ou outras pessoas pensam regularmente?
Agrupeipsum
Lorem seus títulos
dolor sit
de amet,
tela emconsectetuer
categorias e dê Insira sua resposta aqui
adipiscing
nome a eles.
elit,
Usesedo diam
app SFnonummy
Symbolsnibh
para
euismod otincidunt
escolher ícone que ut melhor
laoreet dolore
descreve
magna
cada Registro Desafios Conquistas
aliquam erat
categoria. Depois,
volutpat.
destaque
Ut a tela padrão para
cada categoria.
A arquitetura de um app geralmente se divide em
várias categorias globais de atividades que o
usuário pode selecionar de maneira fluida. Esses Visualização de calendário Entrar no desafio Conquistas
grupos de telas serão convertidos em elementos Quais são os desafios que você ou outras pessoas enfrentam diariamente?
de UI no próximo estágio de prototipagem.
Não se preocupe se suas telas não se
enquadrarem naturalmente em várias categorias. Adicionar item Inserir código global Ver conquista
Alguns apps focam somente em uma atividade.
Resumo do dia Exibir resultados
Você ou outras pessoas usaram soluções alternativas em apps que já existem? Você conhece algum app que resolve
parcialmente um desafio, mas que exige que você o use de forma não intencional ou aumente seus recursos com outros
Informações do item Desafios
apps ou atividades?
Reciclagem
Prototipar |
Descobrir
Mapa
Observaras telas
Agrupar Há perguntas frequentes sobre as quais você ou outras pessoas pensam regularmente?
Lorem
1. Copieipsum
a caixadolor
de título
sit amet,
paraconsectetuer
cada descrição de Insira sua resposta aqui
adipiscing
tela aqui.elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna Categoria
2. Agrupe os títulos das telas em categorias.
3. Duplique a caixa Categoria se necessário para
fornecer títulos e ícones para cada grupo de
telas.
4. Escolha o título da tela principal para cada Título da tela
categoria e destaque essa caixa. Quais são os desafios que você ou outras pessoas enfrentam diariamente?
Título da tela
Título da tela
Título da tela
apps ou atividades?
Título da tela
Prototipar |
Descobrir
Mapa
Lorem
1.
ipsum dolor
Classifique sit amet, consectetuer
os esboços de adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
tela por grupo.
2. Para cada grupo, use a tela

principal como primária e
arraste as outras abaixo
dela como secundárias.
Prototipa
r deelit,
Lorem
Use o navegador
ipsum dolor
adipiscing
esboços
de sit
tela sed
slides
por diam
amet,
para
categoria.
consectetuer
agrupar os
nonummy nibh
Prototipar |
Descobrir
Mapa
Explo
re
Code
Olá, mundo!
Tipos e propriedades
As estruturas
Lorem ipsum que
dolor
você
sit amet,
cria são
consectetuer
determinadas
adipiscing
pelos dados
elit, sed
no seu
diam
app.
nonummy
Você organiza
nibh euismod
cada coisa
tincidunt
que seu
ut app
laoreet dolore
representa agrupando
magna aliquam
dados relacionados
erat volutpat.
e dando
Ut a eles um nome. No Swift, você define uma estrutura e
declara suas propriedades. Neste exercício, você aprenderá como criar propriedades para uma estrutura,
para aprofundar sua compreensão dos tipos do Swift.
abra a página "Dados e nomenclatura".
Escreverpropriedades
Definir sua primeirapara
linhauma
de código
estrutura.
Imprimir
Usar diferentes
uma mensagem
tipos de dados.
no console
Fornecer valores para uma instância
de uma estrutura.
Títuloe propriedades
Tipos Lorem
Comeceipsum dolor sittudo,
excluindo amet, exceto
consectetuer adipiscinglinhas
as primeiras elit, sed
emdiam
quenonummy nibh
você criou euismod tincidunt
a estrutura ut laoreetAtualize
do Challenge. dolore as duas
Crie propriedades
Lorem ipsum dolordesitestrutura.
amet, consectetuer primeiras linhas dentro da estrutura criando duas variáveis:
euismod tincidunt ut laoreet dolore magna struct Challenge {
var title: String // o nome
var points: Int // pontos marcados após conclusão bem-sucedida
// é equipe – verdadeiro para um esforço em equipe, falso se foi feito sozinho
// data de término – quando não será mais oferecido
}
Uma variável dentro de uma estrutura tem um significado especial e é chamada de propriedade da estrutura. Você
criou duas propriedades: title e points. Cada uma tem um tipo. Veja como funciona:
var title : String
Diferente das variáveis que você criou anteriormente, não foram atribuídos valores a title ou points. Você atribuirá os
valores para todas as propriedades de uma estrutura cada vez que criar uma.
Observe os nomes dos dois tipos que você usou. Você já aprendeu sobre strings; o tipo oficial do Swiftdo
O nome tem
tipoo mesmo
nome e usa aDefine o nomededanomenclatura
convenção propriedade em letras maiúsculas. Int (abreviação de número inteiro) é um tipo que
representa números inteiros, como 0, 42 e -8.
Caractere especial de delimitação
Explore Code
Tipos Lorem o
Insira ipsum dolor para
seguinte sit amet, consectetuer
começar a criaradipiscing elit, seddadiam
uma instância nonummy
estrutura nibhdesafio,
do seu euismod interrompendo
tincidunt ut laoreet
comdolore
o
Crie uma
Lorem ipsum
instância
dolorde
sit uma
amet,estrutura
consectetuer
fornecendo parêntese aberto (:
adipiscing
valores paraelit,
as sed
propriedades.
diam nonummy nibh
aliquam erat volutpat. Ut var noStrawsChallenge = Challenge(
Olhe para a parte inferior do playground. Desta vez, há uma conclusão de código destacada em azul que
pode ser usada como atalho.
Pressione Return no teclado para inseri-lo em seu código:
Challenge(title: , points:
String ) Int
Agora que sua estrutura tem algumas propriedades, forneça valores para cada instância. Cada espaço
reservado indica o tipo da propriedade, que você substitui por um valor específico. Substitua o primeiro
espaço reservado por "Desafio Sem Canudos" e o segundo espaço reservado por 5 para criar uma instância
de Challenge única e específica. Depois, é só imprimir no console:
var noStrawsChallenge = Challenge(title: "Desafio Sem Canudos", points: 5)

print(noStrawsChallenge)
Você também pode revisar os valores diretamente sem imprimir clicando nos ícones de resultado ( ) e
( ) na margem direita do editor de código.
Explore Code
Tipos Lorem ipsumacessar
Você pode dolor sitosamet, consectetuer
valores adipiscing elit, individualmente
dessas propriedades sed diam nonummyusando
nibh euismod tincidunt
a notação ut laoreet
de pontos. dolore
Tente
Acesse ipsum
Lorem propriedades
dolor sitindividuais
amet, consectetuer imprimir os valores de cada propriedade usando o seguinte código:
adipiscing
de uma instância
elit, seddediam
estrutura.
nonummy nibh
aliquam erat volutpat. Ut print(noStrawsChallenge.title)
print(noStrawsChallenge.points)
Nome da propriedade
Variável (instância da estrutura)
Ponto
Execute seu código e analise a saída do console.

Você também pode usar a notação de pontos para modificar uma instância de estrutura que já existe. Use o
sinal de igual para atribuir um novo valor do tipo correto à propriedade escolhida. Por exemplo, adicione a
seguinte linha ao final de sua página:
noStrawsChallenge.points = 8
Adicione outra linha de impressão no final para mostrar o novo estado modificado do desafio usando
interpolação de strings:
print("O \(noStrawsChallenge.title) pode fazer você marcar

\(noStrawsChallenge.points) pontos!")
Explore Code
Tipos Lorem ipsum dolor
Reveja ipsum
Lorem seu trabalho.
Desafio: Além de String e Int, é possível representar valores em Bool que podem ser verdadeiros ou falsos e
Double para representar números decimais, como 3,14. Se você criou estruturas para os tipos de dados do
seu app, pratique substituir os comentários com propriedades reais e criar instâncias deles.
Existe alguma propriedade que não corresponde a um desses quatro tipos básicos? Tente criar uma nova
estrutura para representá-la e, depois, use-a como o tipo da propriedade. Ao criar uma instância, você
também terá que criar uma instância da estrutura da propriedade. Se você quiser se aventurar, pode estender
este exercício o quanto quiser, aninhando estruturas dentro de outras para criar tipos de dados complexos.
Explore Code
Observaras telas
Vincular Há perguntas frequentes sobre as quais você ou outras pessoas pensam regularmente?
Desenhe
Lorem ipsum
linhasdolor
que sit
conectem
amet, consectetuer
o conteúdo às Insira suaderesposta
Visualização calendárioaqui Resumo do dia Informações do item
adipiscing
telas que você
elit,esboçou
sed diame nonummy
agrupou. nibh
As telas dentro de cada categoria global são
aliquam erat volutpat. Ut Calendário com data atual Resumo da reciclagem de hoje Tipo de item
frequentemente organizadas em um fluxo
sequencial de uma para a outra.
Resumo dos itens do mês Lista detalhada da reciclagem Peso
Você pode notar que algumas telas têm muitas de hoje
linhas de saída, enquanto outras não têm

Ver o registro de reciclagem de Ver as informações de um item Data
nenhuma. Não se preocupe, você vai organizar um dia registrado
tudo isso no próximo exercício. Quais são os desafios que você ou outras pessoas enfrentam diariamente?
Adicionar novos itens ao lixo
Insira sua resposta aqui ou à reciclagem
Adicionar item Reciclagem
Selecionar lixo ou reciclagem Números e descrições

de plásticos recicláveis
normalmente aceitos
Selecionar por peso ou por item
Instruções de reciclagem
Você ou outras pessoas usaram soluções alternativas Informações

em appsde que já existem? Você conhece algum app que resolve
entrada: data,
tipo, peso
apps ou atividades?
Informações de reciclagem
Enviar itens
Cancelar entrada
Prototipar |
Descobrir
Mapa
Observaras telas
Vincular Há perguntas frequentes sobre as quais você ou outras pessoas pensam regularmente?
Copie os
Lorem ipsum
esboços
dolor
desit
tela
amet,
que consectetuer
já existem aqui e Insira sua resposta aqui
vincule-os.
Você provavelmente precisará de um
slide por grupo. Depois de colar os esboços,
redimensione-os para que caibam na tela.
Organize as telas de modo que as que
estão relacionadas fiquem próximas umas
das outras.
Desagrupe seus slides antes de adicionar Quais são os desafios que você ou outras pessoas enfrentam diariamente?
links. Selecione todas as telas e, depois, clique em Insira sua resposta aqui
Organizar > Desagrupar ou pressione
Option + Command + G.
Altere a cor das caixas que acionam
a apresentação de uma tela diferente. Use uma
linha de conexão para vincular uma caixa colorida
à tela de destino.
apps ou atividades?
Prototipar |
Descobrir
Mapa
Lorem ipsum
Para cada dolor
item quesitapresenta
amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
outra tela, adicione um link
do item à tela que ele
apresenta.
Para adicionar um link para

outro slide, clique com o
Prototipa botão direito em um objeto e
selecione Adicionar Link >
rVincular slides
Lorem ipsum
Adicione
adipiscing
linksdolor
entresit
asamet,
telas relacionadas.
consectetuer
é o processo de criação de áreas
Slide ou pressione
euismod tincidunt ut laoreet dolore magna Command + K. Selecione
de toque em um slide do Keynote aponta para um
aliquam erat volutpat. Ut Slide, depois selecione Slide
slide correspondente.
Para tornar este exercício mais fácil, destaque os
novamente (o último item da
mesmos itens que acabou de mostrar no mapa de lista) e insira o número do
apps. slide.
Depois de terminar, tente reproduzir seu protótipo
do Keynote e clicar nos links. (Você pode
reproduzir a apresentação em um iPhone para ter
uma ideia de como seu app ficará em um
aparelho.)
Prototipar |
Descobrir
Mapa
Protot
ipar
Criar abas
Observar
Conhecer seus
Adicionar navegação
usuários Wireframe
Considerar
Criar modais
a diversidade Um wireframe é um protótipo funcional mínimo. Ao final desta etapa, você
Resumir seu
Adicionar elementos
público de
terá um protótipo do Keynote em funcionamento que simula
interface
o comportamento do seu app.
Você vai construir um wireframe a partir do mapa de arquitetura do seu app,
convertendo esboços de tela em um rascunho da interface. Este é um
processo organizado, que começa com os elementos de navegação de nível
superior e se aprofunda progressivamente nos elementos em cada tela.
Exemplo
Observar
Criar abas Há perguntas frequentes sobre as quais você ou outras pessoas pensam regularmente?
Uma barra
Lorem ipsumde dolor
abas ésit
a forma
amet, consectetuer
mais comum InsiraVisualização
sua resposta aqui Resumo do dia Informações do item
adipiscing
de navegaçãoelit,global
sed diam
em apps.
nonummy
Ela permite
nibh que as de calendário
euismodselecionem
pessoas tincidunt utrapidamente
laoreet dolore
entre
magna
as
aliquam erat
diferentes seções
volutpat.
de um Utapp. Como está sempre na Calendário com data atual Resumo da reciclagem de hoje Tipo de item
parte inferior da tela e não muda, os usuários

podem contar com a barra de abas Resumo dos itens do mês Lista detalhada da reciclagem Peso
independentemente de onde estejam no app. de hoje
No exercício a seguir do Keynote, você adicionará Ver o registro de reciclagem de Ver as informações de um item Data
registrado
uma barra de abas ao seu protótipo. um dia
Quais são os desafios que você ou outras pessoas enfrentam diariamente?
Se seu app não tiver várias categorias de Insira sua resposta aqui
ou à reciclagem
navegação de nível superior, uma barra de
ferramentas pode ser útil. Use uma barra de
Adicionar item Reciclagem
ferramentas na parte inferior de uma tela para
fornecer ações importantes para essa tela.
Nunca use uma barra de abas e uma barra Selecionar lixo ou reciclagem Números e descrições
de ferramentas na mesma tela. normalmente aceitos

entrada: data,
tipo, peso
apps ou atividades?
Enviar itens
Cancelar entrada
Prototipar |
Descobrir
Wireframe
Lorem ipsumuma
Configure dolorbarra
sit amet,
deconsectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
abas global.
1. Copie e cole uma barra de abas da
apresentação "iOS Templates+UI-
Elements Keynote" em um slide do seu
protótipo.
Prototipa 2. Desagrupe-os clicando com o botão

direito e selecionando Desagrupar ou
r protótipoelit,e vincule
Lorem ipsum
Adicione
adipiscing
do
umadolorbarra sit
de amet,
sed diam
abas às
cada
consectetuer
nonummy
telas
aba à suanibh
tela
pressionando
Option + Shift + Command + G.
principal.tincidunt ut laoreet dolore magna
euismod
aliquam erat volutpat. Ut Defina os nomes e ícones dos itens das
Depois de terminar, experimente seu protótipo 3.
do Keynote e clique nas abas para navegar abas para corresponder às suas
entre as telas. Parabéns! Você está cada vez categorias de navegação.
mais perto de um protótipo que se parece com
um app nativo para iOS. 4. Para cada item da aba, adicione um link
a partir do item da aba para a página
principal daquela categoria de
navegação.
5. Agrupe a barra de abas novamente.

Selecione todos os seus itens, clique
com o botão direito e escolha Agrupar
ou pressione Option + Command + G.
Prototipar |
Descobrir
Wireframe
Lorem ipsumbarra
Crie uma dolor de
sit amet,
abasconsectetuer
para cada adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
tela principal.
1. Copie e cole a barra de abas

atualizada em cada esboçode tela
principal no seu protótipo.
Prototipa 2. Para cada tela principal, use o azul

padrão do iOS para destacar o ícone e
r protótipoelit,e vincule
Lorem ipsum
Adicione
adipiscing
do
umadolorbarra sit
de amet,
sed diam
abas às
cada
consectetuer
nonummy
telas
aba à suanibh
tela
o título de sua aba; e use a cor cinza
nas outras telas.
principal.tincidunt ut laoreet dolore magna
euismod
aliquam erat volutpat. Ut Crie barras de abas para todas
Depois de terminar, experimente seu protótipo
do Keynote e clique nas abas para navegar as telas secundárias.
entre as telas. Parabéns! Você está cada vez
mais perto de um protótipo que se parece com
3. Copie e cole as barras de abas de
um app nativo para iOS. cada tela principal
nas telas secundárias.
Prototipar |
Descobrir
Wireframe
Exemplo
Observar navegação
Adicionar Há perguntas frequentes sobre as quais você ou outras pessoas pensam regularmente?
Encontre
Lorem ipsum
os caminhos
dolor sit lineares
amet, consectetuer
entre as telas no Insira sua resposta aqui
adipiscing
mapa do seu
elit,
app.
sed diam nonummy nibh Resumo Calendário Hoje Hoje Informações do item

Os caminhos lineares entre as telas geralmente
são gerenciados por uma hierarquia de
navegação.
Resumo dos itens do mês Lista detalhada da reciclagem Peso
A barra de navegação gerencia uma sequência de de hoje
telas em hierarquia. Escolher um item na tela

Ver o registro de reciclagem de Ver as informações de um item Data
empurra o próximo item da direita e tocar no um dia registrado
botão Voltar permite que o usuário acesse a tela Quais são os desafios que você ou outras pessoas enfrentam diariamente?
anterior. Insira sua resposta aqui
ou à reciclagem
O título da tela atual aparece no centro da barra

de navegação. O botão Voltar aparece à esquerda Adiciona
e geralmente assume o título da tela anterior. O Hoje Adicionar item r item Reciclagem
lado direito da barra de navegação pode conter

ações como Adicionar e Buscar. Selecionar lixo ou reciclagem Números e descrições
normalmente aceitos
No exercício a seguir do Keynote,
você adicionará barras de navegação
ao seu protótipo.
entrada: data,
tipo, peso
apps ou atividades?
Enviar itens
Cancelar entrada
Prototipar |
Descobrir
Wireframe
Lorem ipsumtela
Para cada dolornositseu
amet, consectetuer
protótipo, adipiscing
faça o elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
seguinte:
1. Apague o seu nome.
2. Copie e cole uma barra de navegação

da apresentação iOS Templates+UI-
Prototipa Elements Keynote. (Escolha o mais
adequado para esta tela.)
r esboçoelit,de sed
Lorem ipsum
Adicione
adipiscing
cada
umadolor
barra sit
de amet,
teladiam
navegação
e vincule
consectetuer
nonummy
ao topo de
aos botões
nibh 3. Defina o título da barra de navegação.
Voltar. tincidunt ut laoreet dolore magna
euismod (Se o nome da tela for muito longo,
aliquam erat volutpat. Ut você pode escolher um título diferente
para a barra de navegação.)
4. Apague itens extras da barra

de navegação.
5. Vincule o botão Voltar à tela anterior, se

aplicável.
Prototipar |
Descobrir
Wireframe
Exemplo
Observar
Criar modais Há perguntas frequentes sobre as quais você ou outras pessoas pensam regularmente?
Os modais deslizam de baixo para cima e cobrem
Identifique
Lorem ipsum
atividades
dolor sit focadas
amet, consectetuer
e crie telas modais. Insira sua resposta aqui a tela que os acionou. Portanto, eles se apresentam
adipiscing elit, sed diam nonummy nibh Resumo Calendário Hoje de forma diferente. A barra de abas Hoje Informações do item
Modularização é uma técnica de design que ajuda não está mais visível e a barra de
euismod tincidunt ut laoreet dolore magna navegação está na tela do modal.
as pessoas a focarem em uma tarefa independente
ou em um conjunto de opções intimamente
relacionadas. Um modal apresenta o conteúdo em
Lista detalhada da reciclagem
um modo temporário separado do contexto Resumo dos itens do mês
de hoje
Peso
anterior do usuário e requer uma ação explícita

para sair. Ver o registro de reciclagem de Ver as informações de um item Data
um dia registrado
Sempre inclua um botão que fechaa visualização Quais são os desafios que você ou outras pessoas enfrentam diariamente?
do modal — na tela principal, na barra de Insira sua resposta aqui
ou à reciclagem
navegação ou em ambas. Por exemplo, você pode
usar um botão OK ou Cancelar. Incluir um botão
garante que a visualização do modal esteja Cancelar Adicionar item OK
Adicionar
item Reciclagem
acessível para tecnologias assistivas e oferece uma

alternativa para gestos de fechar. Selecionar lixo ou reciclagem Números e descrições
normalmente aceitos

entrada: data,
tipo, peso
apps ou atividades?
Enviar itens
Cancelar entrada
A primeira tela em um modal não possui um botão Voltar.

Se o modal for movido para uma tela secundária, o botão
Voltar será usado.
Prototipar |
Descobrir
Wireframe
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
Prototipa
r atividade
Lorem ipsum
Encontre telasdolor
adipiscing
uma
que apresentem
elit,focada
sed diam
para
nonummy
o usuárionibh
e converta-as
euismod tincidunt
em modais
ut laoreet
removendo
dolore magna
a barra
aliquam
de abas eerat
atualizando
volutpat.aUt
barra de navegação.
Prototipar |
Descobrir
Wireframe
Adicionar elementos
Observar Há perguntas frequentes sobre as quais você ou outras pessoas pensam regularmente?
de interface
Lorem ipsum dolor sit amet, consectetuer Resumo
Insira sua resposta aqui do dia
adipiscing elit, sedpadrão
Use os elementos diam nonummy
do iOS paranibh
converter
euismod tincidunt ut laoreet dolore
seus esboços de tela em wireframes. magna
Os usuários do iOS esperam elementos D S T Q Q S S
de interface padrão em apps quando 2 2 2 2 2 2 2

3 4 5 6 4 8 9
as informações, controles ou elementos
Resumo da reciclagem de hoje
de navegação são apresentados.
E os desenvolvedores de iOS adotam de forma
consistente um conjunto de práticas comuns, Quais são os desafios que você ou outras pessoas enfrentam diariamente?
documentadas nas Human Interface Guidelines.
Lista detalhada da reciclagem de hoje
Ver as informações de um
item registrado
Você ouAdicionar novos usaram

outras pessoas itens ao soluções
lixo ou alternativas em apps que já existem? Você conhece algum app que resolve
parcialmente um desafio, mas que exige que você o use de forma não intencionalREGISTRO
ou aumente
DE HOJEseus recursos com outros
à reciclagem
apps ou atividades? - �
Papel �
- �
Sobras do café da manhã �
- �
Borra de café �
Prototipar |
Descobrir
Wireframe
Lorem
1.
ipsum
Revise osdolor sit amet,
elementos deconsectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
UI nas Human
Interface Guidelines.
2. Decida quais elementos serão úteis

para o seu app.
3. Cole os elementos da apresentação

Prototipa iOS Templates+UI-Elements Keynote.
Crie todos os elementos

r
4.
Lorem ipsum
Converta o restante
dolor sit
dosamet,
seus consectetuer
esboços de tela em
adipiscing
elementos de
elit,interface
sed diamdononummy
usuário. nibh personalizados que forem necessários
euismod tincidunt ut laoreet dolore magna e não estiverem no modelo.
5. Altere as caixas de esboço de tela de
texto para elementos de UI.
Prototipar |
Descobrir
Wireframe
Explo
re
Code
Olá, mundo! baseada em eventos

Programação
Em umipsum
Lorem app para
dolor
iOS,
sitoamet,
usuário
consectetuer
está no controle.
adipiscing
As interações
elit, sed diam
realizadas
nonummyno seu
nibh
app
euismod
são representadas
tincidunt ut
laoreet
por umadolore
série de
magna
eventos.
aliquam
Seu erat
app responde
volutpat. Ut
a cada evento interpretando a ação do usuário e agindo sob
seu comando. Você escreve os controladores de eventos — blocos de código que executam o trabalho
— e os anexa a elementos interativos, como botões, campos de texto, controles deslizantes e seletores.
Pense em um botão do seu app. Como saber quando o usuário tocou no botão? A estrutura SwiftUI
fornece o tipo Button, que detecta os toques do usuário e permite que você capture uma ação específica
Criar um sua
botão. quando o botão é tocado. Neste exercício, você criará um botão que executa uma ação.
Escrever primeira linha de código
Atualizar o console
Imprimir uma quando
mensagem nooconsole
botão
Para começar, lembre-se de que o "Meu Playground" deve estar aberto no app Swift Playgrounds.
for clicado.
Atualizar o valor de uma variável. Depois, crie uma nova página com o nome "Programação baseada em eventos".
Programação baseada
Título Lorem ipsum
Insira as dolor
duas sit amet,
linhas consectetuer
a seguir adipiscing
para importar elit, sed diam
as estruturas nonummy nibh euismod
PlaygroundSupport tincidunt ut laoreet dolore
e SwiftUI:
em magna aliquam erat volutpat. Ut
Loremeventos
ipsum dolor sit amet, consectetuer
adipiscing elit, que
Crie um botão sed imprima
diam nonummy nibh
no console.
aliquam erat volutpat. Ut import SwiftUI
Agora crie um botão com as três linhas do código a seguir, tomando cuidado para que as chaves { },
parênteses ( ) e aspas duplas " " correspondam:
var challengeButton = Button("Concluir desafio") {

print("Um desafio foi concluído.")
}
Do início ao fim, o código faz o seguinte:
Cria uma variável para o botão.

var challengeButton Cria uma instância de Button — um tipo de
visualização SwiftUI — e define seu título com um
Button("Concluir desafio") valor String.
Define a ação do botão, que será executada cada vez

{ que o botão for clicado.
print("Um desafio foi concluído.")
}
Agora adicione mais uma linha para adicionar o botão à visualização dinâmica:
PlaygroundPage.current.setLiveView(challengeButton)
Explore Code
Título Execute seu código.
Lorem ipsum Você consectetuer
dolor sit amet, verá a visualização
adipiscingdinâmica do seu
elit, sed diam botão.nibh
nonummy Clique no botão
euismod do console;
tincidunt você verá um
ut laoreet dolore
em magna aliquam
vazio. erat volutpat.
cliqueUtno botão "Concluir desafio". Você deve ver o resultado da ação aparecer no console.
Loremeventos
ipsum dolor sit amet, consectetuer console Agora
adipiscing elit, sed diam
Criar uma variável que o nonummy nibh
botão irá atualizar.
euismod tincidunt ut laoreet dolore magna Conforme o usuário interage com as visualizações em um app, o app geralmente atualiza os dados do modelo na
aliquam erat volutpat. Ut resposta. Por exemplo, você pode querer controlar o número de desafios que o usuário concluiu.
Adicione uma variável para controlar o número total de desafios concluídos e inclua-a na string que você
imprimirá:
var numberCompleted = 0
var challengeButton = Button ("Concluir desafio") {
print("Desafio concluído! Número total de desafios concluídos: \(numberCompleted).")
}
Execute seu código e clique no botão algumas vezes.
Na visualização do console, você deve ver o seguinte:
Desafio concluído! Número total de desafios concluídos: 0.

Explore Code
Título Lorem ipsum dolor
Obviamente, vocêsitquer
amet,que
consectetuer
o númeroadipiscing elit, aumente
de desafios sed diam nonummy
cada vez nibh
que euismod
o botão tincidunt ut laoreet dolore
for clicado.
Loremeventos
adipiscing elit, sed diam nonummy nibhclicado.
Para fazer isso, o valor da variável na ação do botão deverá ser atualizado. Você alterou a propriedade de
Atualize a variável quando o botão for
euismod tincidunt ut laoreet dolore magna uma instância de estrutura atribuindo a ela um novo valor. Mas, desta vez, você deve basear o novo valor
aliquam erat volutpat. Ut no valor existente de numberCompleted. Você pode pensar em atribuir 1 à variável conforme mostrado
abaixo:

numberCompleted = 1
}
No entanto, isso não funcionará porque a variável mudará de 0 para 1 na primeira vez que o botão for
clicado, mas não mudará depois.
Explore Code
Título Lorem
Em vezipsum dolor
disso, sit vai
você amet, consectetuer
referenciar o adipiscing elit, sed variável
valor da própria diam nonummy nibh euismod
ao atualizá-la. tinciduntseu
Modifique ut laoreet
códigodolore
para
Loremeventos
ipsum dolor sit amet, consectetuer que fique dessa forma:
adipiscing elit, sed diam
Atualize a variável nonummy
quando nibhclicado.
o botão for
aliquam erat volutpat. Ut var numberCompleted = 0
numberCompleted = numberCompleted + 1
}
Para entender o que está acontecendo, leia a linha da direita para a esquerda:
numberCompleted = numberCompleted + 1
Execute seu código novamente. Clique no botão "Concluir desafio" algumas vezes. Cada vez que você
conclui2.um
Atribui
novoodesafio, o número total de desafios concluídos deve mudar no console.1. Recebe o valor atual de
novo valor
a numberCompleted. numberCompleted
e adiciona 1 a ele.
Explore Code
Título Lorem ipsum dolor
Loremeventos
adipiscing
Reveja seuelit, sed diam
trabalho nonummy
e tente nibh
um desafio.
Desafio: altere o título do botão, por exemplo, para "Outro desafio concluído!"
Altere o código na ação para criar e imprimir uma mensagem da sua escolha.
Crie um botão que faz a contagem regressiva a partir de um valor inicial.
Crie um botão que atualize o valor de uma variável do tipo String usando a mesma técnica usada com
numberCompleted.
Explore Code
Protot
ipar
Dimensionar áreas de toque

Observar
Conhecer
Inserir conteúdo
seus usuários Refinar
Considerar
Avaliar pesoaediversidade
equilíbrio Agora que você tem um protótipo em funcionamento, é hora de aplicar as
Resumir seu
Verificar alinhamento
público
importantes diretrizes de design de interface. Ao final desta etapa, seu
protótipo estará à vontade no iOS e nas mãos de seus usuários.
Um design de interface sólido é essencial para uma boa experiência no iOS.
Você aprenderá sobre as propriedades mais importantes de uma boa interface
e aplicará essas lições para que seu protótipo seja agradável de usar.
Observar
Dimensionar áreas de toque Há perguntas frequentes sobre as quais você ou outras pessoas pensam regularmente?
Os usuários
Lorem ipsumdevem
dolor ser
sit amet,
capazes
consectetuer
de tocar nos Insira sua resposta aqui
adipiscing
ícones ou botões
elit, sed
nodiam
seu app.
nonummy
Se a área
nibh
de toque
euismod
for muitotincidunt
pequena,utoslaoreet
usuários
dolore
terãomagna
problemas
aliquam
para acioná-la.
erat volutpat.
Se for muito
Ut grande, pode
interferir em outro botão próximo a ela.
Tente manter uma área tocável mínimade
44 pt x 44 pt para todos os controles.

apps ou atividades?
Prototipar |
Descobrir
Refinar
Observar
Inserir conteúdo Há perguntas frequentes sobre as quais você ou outras pessoas pensam regularmente?
Muitas ipsum
Lorem ações nodolor
iOSsitexigem
amet, consectetuer
que o usuário faça Insira sua resposta aqui
adipiscing
um gesto deelit,
deslizar
sed diam
paranonummy
que uma ação
nibh seja
acionada.
As pessoas usam gestos de deslizar na borda
inferior da tela para acessar recursos como a tela
de início e o seletor de apps. Esses gestos podem
cancelar os gestos personalizados que você
implementar nesta área. Os cantos mais distantes
da tela podem ser áreas difíceis de serem Quais são os desafios que você ou outras pessoas enfrentam diariamente?
acessadas confortavelmente pelas pessoas.
Em geral, o conteúdo deve ser centralizado
e inserido simetricamente para que tenha uma
boa aparência em qualquer orientação e não seja
cortado por cantos arredondados, escondido por
um sensor ou pelo indicador de acesso à tela de
início.
Margens Área segura

apps ou atividades?
Prototipar |
Descobrir
Refinar
Observar
Avaliar peso e equilíbrio Há perguntas frequentes sobre as quais você ou outras pessoas pensam regularmente?
Itens grandes
Lorem ipsum chamam
dolor sit amet,
a atenção
eadipiscing
parecem mais
elit, sed
importantes
diam nonummy
do que nibh
os
euismod tincidunt
menores. Eles também
ut laoreet
são mais
dolore
fáceis
magna
de
aliquam
tocar, o que
eratévolutpat.
especialmente
Ut importante
quando um app é usado em ambientes de
distração, como na cozinha ou na
academia. Em geral, coloque os itens
principais na metade superior e próximo
ao lado esquerdo da tela, em um contexto
de leitura da esquerda para a direita. Quais são os desafios que você ou outras pessoas enfrentam diariamente?
apps ou atividades?
Prototipar |
Descobrir
Refinar
Explo
re
Code
Olá, mundo!visualizações
Compondo
Todos os
Lorem ipsum
appsdolor
têm uma
sit amet,
hierarquia
consectetuer
de visualização.
adipiscingVisualizações
elit, sed diammaiores
nonummyno seu
nibhapp
euismod
(como tincidunt
uma tela)ut
laoreet dolore
contêm visualizações
magna aliquam
menoreserat
(como
volutpat.
listas),Ut
que contêm visualizações ainda menores (linhas individuais
de uma lista). Em quantas partes mais você poderia quebrar a hierarquia?
As visualizações são poderosas porque podem ser combinadas de inúmeras maneiras para criar interfaces
complexas e bonitas. Neste exercício, você terá uma amostra do poder da composição de visualizações.
Neste exercício, você vai: Esta é a única exploração de código que não explica cada linha de código que você escreve. A SwiftUI é
Escrever sua
Aprender como
primeira
mostrar
linha
cores.
de código uma estrutura complexa e poderosa. Para vê-la em funcionamento, você terá que desistir de tentar
Organizaruma
Imprimir as visualizações
mensagem noem console entender exatamente como o código funciona.
pilhas horizontais e verticais.
Aninhar pilhas. Para começar, lembre-se de que o "Meu Playground" deve estar aberto no app Swift Playgrounds. Depois,
Adicionar outros tipos de crie uma nova página com o nome "Compondo visualizações".
visualizações às pilhas.
Título
Compondo visualizações Lorem
Comeceipsum dolor sit amet,
importando suas consectetuer adipiscing
duas estruturas elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
favoritas:
Mostre ipsum
Lorem uma visualização
dolor sit amet,
colorida.
consectetuer
aliquam erat volutpat. Ut import SwiftUI
Agora insira o seguinte código. Você não entenderá tudo isso, mas deve notar que está criando uma nova
estrutura chamada ContentView e um novo tipo de propriedade chamado body. Confirme se está
aninhando as chaves corretamente e se há uma chave de fechamento para cada chave de abertura.
struct ContentView: View {

var body: some View {
Color.red
}
}
PlaygroundPage.current.setLiveView(ContentView())
A visualização dinâmica deve abrir para mostrar uma visualização em vermelho que preenche todo o
espaço disponível, conforme mostrado acima. Como você deve ter adivinhado, Color é um tipo de
visualização da SwiftUI que simplesmente exibe uma cor.
No restante deste exercício, concentre-se apenas no código mais interno, conforme indicado abaixo.

Color.red
}
} Este código define as visualizações dentro
de ContentView.
Explore Code
Título
Compondo visualizações Lorem ipsumoferece
O SwiftUI dolor sitvários
amet, consectetuer adipiscing elit,
tipos de visualizações que sedpermitem
diam nonummy nibh euismod
"empilhar" outras tincidunt ut laoreet
visualizações dolore
dentro delas. A
Organize
Lorem ipsum
as visualizações
dolor sit amet,
emconsectetuer
pilhas. visualização VStack pode organizar muitas visualizações verticalmente. Experimente substituindo Color.red
adipiscing elit, sed diam nonummy nibh em seu código por um VStack que organiza três visualizações com cores diferentes.
import SwiftUI
VStack {
Color.black
Color.green
Color.red
}
}
}
PlaygroundPage.current.setLiveView(ContentView())
A visualização HStack organiza suas visualizações horizontalmente. Substitua VStack por HStack e clique em
Executar Meu Código novamente.
HStack {
Color.black
Color.green
Color.red
Explore Code }
Título
Compondo visualizações Lorem
Pilhas ipsum dolore sit
verticais amet, consectetuer
horizontais podem seradipiscing elit, sed
colocadas umadiam nonummy
dentro nibhSubstitua
da outra. euismod tincidunt ut laoreet
o conteúdo dolore pelo
de HStack
Aninharipsum
Lorem pilhas.
dolor sit amet, consectetuer código abaixo e clique em Executar Meu Código.
euismod tincidunt ut laoreet dolore magna HStack
Você já conhece {
dois outros tipos de visualizações da SwiftUI. Experimente adicionar uma visualização Text:
VStack {
Color.black
Color.green
}
Color.red
}
HStack {
VStack {
Color.black
Text("Olá, cores!")
Color.green
}
Color.red
}
Explore Code
Título
Compondo visualizações Lorem ipsum dolor
Reveja ipsum
Lorem seu trabalho
dolor sit
e tente
amet,um
consectetuer
desafio.
Agora, você tem uma noção da ampla variedade de composição de visualizações na SwiftUI. As visualizações
podem ser aninhadas em um nível arbitrário e combinadas para criar as interfaces mais complexas.
Desafio: existem muitas maneiras de especificar instâncias Color, mas por enquanto tente mostrar outras
comuns usando a notação de pontos, por exemplo, .yellow, .purple ou .blue.
Quantos sinalizadores você pode replicar com esta técnica?
Experimente adicionar um botão (ou vários!) à sua hierarquia de visualização.
Que tipo de interface você pode simular usando apenas essas cinco visualizações da SwiftUI?
Explore Code
Observaralinhamento
Verificar Há perguntas frequentes sobre as quais você ou outras pessoas pensam regularmente?
O alinhamento
Lorem ipsum dolor
faz com
sit amet,
que um
consectetuer
app pareça Insira sua resposta aqui
adipiscing
limpo e organizado,
elit, sed diam
ajudanonummy
as pessoasnibh
a focar ao
euismod
rolar e torna
tincidunt
mais fácil
ut laoreet
encontrar
dolore
informações.
magna O
aliquam
recuo e oerat
alinhamento
volutpat. Uttambém podem indicar
como os grupos de conteúdo estão relacionados.

apps ou atividades?
z
Prototipar | 91
Descobrir
Refinar
Protot
ipar
Definir personalidade
Observar
Conhecer
Criar íconeseus usuários Estilo
Considerar a diversidade A última etapa de prototipagem é definir a personalidade do seu app para
diferenciá-lo de apps similares. Ao final deste estágio, você terá um
protótipo que é o mais próximo possível de um app real — um que você terá
orgulho de compartilhar com os testadores.
O estilo aborda uma série de elementos, desde cor e fonte até ícones. Agora
você pode usar sua imaginação para criar uma identidade coerente para seu
app.
Observar
Definir personalidade Corperguntas
Há primária frequentes sobre as quais você
Conjunto de ícones
ou outras pessoas pensam regularmente? Exemplos de imagens
Concluaipsum
Lorem o modelo
dolordo
sitguia
amet,
deconsectetuer
estilo para aplicar Insira sua resposta aqui
adipiscing
ao seu app.elit, sed diam nonummy nibh ic_name ic_name
Escolher cores, tipografia, imagens e ícones —
em outras palavras, criar uma marca para o app ic_name ic_name
— pode ser divertido. Mas é importante manter
a acessibilidade em mente ao escolher esses
elementos da UI. ic_name ic_name
Fonte San Francisco
Criadas para serem consistentes com a estética Quais são os desafios que você ou outras pessoas enfrentam diariamente?
Cor secundária ic_name ic_name
simples e limpa do iOS, as fontes do sistema são Insira sua resposta aqui
legíveis e neutras.
SF Symbols ic_name ic_name
A Apple criou um conjunto de ícones
que suporta o Tipo Dinâmico e o recurso
de acessibilidade de Texto em negrito. ic_name ic_name
Cor
O iOS oferece uma série de cores para o sistema
que se adaptam automaticamente à variação e às
mudanças nas configurações de acessibilidade. Você ou outras pessoas usaram soluções alternativas em apps que já existem? Você conhece algum app que resolve
parcialmente
Tipografia um desafio, mas que exige que você o use de forma não intencional ou aumente seus recursos com outros
apps ou atividades?
Prototipar |
Descobrir
Estilo
Lorem
1.
ipsumelementos
Atualize dolor sit amet, consectetuer
importantes noadipiscing
seu app, elit,
como sedpor
diam nonummy nibh euismod tincidunt ut laoreet dolore
exemplo, abas e botões destacados, de acordo com a
cor primária no seu guia de estilo.
2. Use a cor secundária com moderação para chamar a

atenção para detalhes importantes.
Prototipa 3. Atualize os ícones de acordo com o seu guia de estilo.
Atualize as fontes de acordo com o seu guia de estilo.

r
4.
Lorem ipsum dolor
Incorporando estilo sit
ao amet,
recurso
consectetuer
fornecido.
5. Padronize as imagens.
Prototipar |
Descobrir
Estilo
Observar
Criar ícone Há perguntas frequentes sobre as quais você ou outras pessoas pensam regularmente?
Use os ipsum
Lorem modelos dolor
parasitexperimentar
amet, consectetuer
alguns designs Insira sua resposta aqui
adipiscing
de ícones. Faça
elit, sed
mais
diam
cópias
nonummy
deste slide,
nibhse
necessário.
O ícone do seu app na tela será diferente de todos
os outros apps que o usuário possui no celular.
Simplifique
Encontre um único elemento que transmita
a essência do seu app e expresse esse elemento de
uma forma simples e única. Adicione detalhes com Quais são os desafios que você ou outras pessoas enfrentam diariamente?
cautela. Um ícone deve ter um único ponto de foco Insira sua resposta aqui
centralizado que capture imediatamente a atenção.
Se o conteúdo ou a forma de um ícone forem muito
complexos, sua essência não deve ser difícil de
distinguir, especialmente em tamanhos menores.
Torne-o reconhecível
Você não quer que seus usuários tenham
que examinar o ícone para descobrir
o que ele representa e o que seu app faz.
Eles devem entender a essência imediatamente. Você ou outras pessoas usaram soluções alternativas em apps que já existem? Você conhece algum app que resolve
Usar transparência ou um plano de fundo cheio parcialmente um desafio, mas que exige que você o use de forma não intencional ou aumente seus recursos com outros
pode impedir o reconhecimento. Teste o seu ícone apps ou atividades?
com vários planos de fundo — escuro e claro,
cores simples, padrões e fotos — para que você
possa ter certeza de que ele se destacará em todos
os contextos.
Prototipar |
Descobrir
Estilo
Lorem
1. Crieipsum dolordesitárea
um link amet,
deconsectetuer
toque do seuadipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
ícone.
2. Use a transição de Movimento

Mágico para abrir seu app na tela de
início.
Prototipa 3. Defina um timer para passar para a

próxima tela que será vista pelos
r os usuários
Lorem
Crie uma
ipsum
adipiscing
que
tela dolor
de início
elit, sed
sit amet,
possam
em seu
diamtocar
consectetuer
nonummy
protótipo para
no ícone
nibhdo seu
usuários.
app.
Teste seu ícone em fundos diferentes.
Prototipar |
Descobrir
Estilo
Testar
Testar seu protótipo ajudará você a entender se suas ideias e suposições estão
corretas. Na fase de teste, você vai arquitetar seus testes, criar um plano para
executá-los e se preparar reunindo usuários e criando uma lista de verificação.
Testar
Definir os testes
Criar jornadas do usuário Arquitetar
Definir um processo A primeira parte de testar seu app é entender o que será testado e como fazer isso.
Planejar uma introdução
Ao final desta etapa, você terá um plano que poderá usar para escrever seus scripts
de teste.
Você definiu os objetivos do seu app. Como vai determinar se eles
foram atingidos? Você implementou um protótipo. Como espera que ele seja
usado? Você definirá os testes que responderão a essas perguntas e também dará
um passo para trás para pensar sobre como definir as expectativas — as suas e de
seus usuários.
Exemplo
Observar
Definir os testes Os
Há usuários
perguntasquerem fazer sobre
frequentes isso com nosso você
as quais app: ou outras pessoas pensam regularmente?
Para cada
Lorem ipsum
objetivo
dolorque
sit amet,
os usuários
consectetuer
desejam Adicionar
Insira sua peso do lixo
resposta aquiou reciclagem para um dia
adipiscing
alcançar comelit,seu
sedapp,
diamdefina
nonummy
as etapas
nibhque eles
euismod tincidunt
realizarão para alcançá-lo
ut laoreet
e descreva
dolore magna
qualquer
aliquam
fluxo existente
erat volutpat.
em queUt o usuário possa estar.
Antes de elaborar seus testes, você precisa
decidir o que é importante testar. Seus testes
Os usuários precisarão ter concluído estas etapas primeiro:
ensinarão o que os usuários acham útil
e também se seu app foi bem projetado. Você Ter lixo ou reciclagem para descartar
também aprenderá sobre as suposições que fez Quais são os desafios que você ou outras pessoas enfrentam diariamente?
durante o caminho.
Se você selecionar o conjunto certo de testes
com seus objetivos gerais em mente, os
resultados vão ajudar você a tirar conclusões
Os usuários precisam concluir estas tarefas importantes:
claras quanto a estar no caminho certo e quanto
à necessidade de corrigir alguma coisa. Classificar se o item é lixo ou reciclagem
Estimar o peso do item
apps ou atividades?
Enviar a entrada
Testar |
Descobrir
Arquitetar
Observar
Definir os testes Os
Há usuários
perguntasquerem fazer sobre
frequentes isso com nosso você
as quais app: ou outras pessoas pensam regularmente?
Para cada
Lorem ipsum
objetivo
dolorque
sit amet,
os usuários
consectetuer
desejam Insira sua resposta aqui
adipiscing
alcançar comelit,seu
sedapp,
diamdefina
nonummy
as etapas
nibhque eles
euismod tincidunt
realizarão para alcançá-lo
ut laoreet
e descreva
dolore magna
qualquer
aliquam
fluxo existente
erat volutpat.
em queUt o usuário possa estar.
Antes de elaborar seus testes, você precisa
decidir o que é importante testar. Seus testes
Os usuários precisarão ter concluído estas etapas primeiro:
ensinarão o que os usuários acham útil
e também se seu app foi bem projetado. Você
também aprenderá sobre as suposições que fez Quais são os desafios que você ou outras pessoas enfrentam diariamente?
durante o caminho.
Se você selecionar o conjunto certo de testes
com seus objetivos gerais em mente, os
resultados vão ajudar você a tirar conclusões
Os usuários precisam concluir estas tarefas importantes:
claras quanto a estar no caminho certo e quanto
à necessidade de corrigir alguma coisa.
apps ou atividades?
Testar |
Descobrir
Arquitetar
Observar
Criar jornadas do usuário Há perguntas frequentes sobre as quais você ou outras pessoas pensam regularmente?
Para cada
Lorem ipsum
recurso
dolorque
sit você
amet,quer
consectetuer
testar, use uma InsiraVisualização
sua resposta aqui Resumo do dia Informações do item
adipiscing
cópia do seuelit,
mapa
sed de
diamesboços
nonummy
de tela
nibh
para criar de calendário
8
euismod
um mapatincidunt
de jornadaut do
laoreet
usuário.
dolore
Numere
magnae
aliquam eratcada
identifique volutpat.
etapa Utdos exercícios anteriores, Calendário com data atual Resumo da reciclagem de hoje Tipo de item
anexando cada um à tela em que o usuário

estará. Resumo dos itens do mês Lista detalhada da reciclagem Peso
de hoje
Um mapa de jornada representa visualmente o
que um usuário precisará fazer para concluir Ver o registro de reciclagem de Ver as informações de um item
7
Data
uma tarefa. Podem ser interações como tocar ou um dia 1 registrado
deslizar, mas também podem incluir tirar uma Adicionar novos itens ao lixo ou
foto, falar no microfone ou aproximar o Insira sua resposta aqui à reciclagem 2
aparelho de um objeto real, como por exemplo,
um leitor NFC. Adicionar item Reciclagem
Selecionar lixo ou reciclagem Números e descrições

3 de plásticos recicláveis
normalmente aceitos

4 Instruções de reciclagem
Adicionar
Você ou outrase pessoas
confirmarusaram soluções alternativas Informações
entrada: data,
parcialmente um desafio, mas que exige que você o use
um item reciclado de forma não
tipo, peso 5 intencional ou aumente seus recursos com outros
apps ou atividades?
Toque em uma data.
1.
2. Toque para adicionar um novo item.

Enviar itens
3. Selecione Reciclagem. 6
4. Inserir por item.
5. Inserir as informações. Cancelar entrada
6. Enviar.
7. Escolha o novo item da lista.
8. Veja as informações.
Testar |
Descobrir
Arquitetar
Exemplo
Observar
Definir um processo Planejamos testar
Há perguntas essas jornadas
frequentes doquais
sobre as usuário:
você ou outras pessoas pensam regularmente?
Faça um
Lorem ipsum
resumodolor
dossitrequisitos
amet, consectetuer Uma
Insiralista
sua das jornadas
resposta aquido usuário
eadipiscing
parâmetroselit,
dosed
seudiam
teste.nonummy nibh
Antes de construir os próprios testes, você
deve criar um processo padronizado para
testar os usuários individuais. Ter dados
consistentes é fundamental para fazer uma
Vamos registrar nossas descobertas usando:
boa análise dos resultados dos testes.
Papel, vídeo, apenas áudio, gravação de tela
Mostraremos nosso protótipo por: Realizaremos o teste em:
Compartilhamento de tela, presencial Hora, data, local
Precisaremos do seguinte equipamento:
apps ou atividades?
MacBook, iPhone, cadeiras,
Insira sua resposta aqui mesa, câmera, tripé
A pessoa fará anotações/registros: Esta pessoa realizará o teste de usuário:
John Appleseed Jane Macintosh
Testar |
Descobrir
Arquitetar
Observar
Definir um processo Planejamos testar
Há perguntas essas jornadas
frequentes doquais
sobre as usuário:
você ou outras pessoas pensam regularmente?
Faça um
Lorem ipsum
resumodolor
dossitrequisitos
amet, consectetuer Insira sua resposta aqui
eadipiscing
parâmetroselit,
dosed
seudiam
teste.nonummy nibh
Antes de construir os próprios testes, você
deve criar um processo padronizado para
testar os usuários individuais. Ter dados
consistentes é fundamental para fazer uma
Vamos registrar nossas descobertas usando:
boa análise dos resultados dos testes.

Mostraremos nosso protótipo por: Realizaremos o teste em:
Precisaremos do seguinte equipamento:
apps ou atividades?
A pessoa fará anotações/registros: Esta pessoa realizará o teste de usuário:
Testar |
Descobrir
Arquitetar
Observaruma introdução
Planejar Escreva uma breve
Há perguntas introdução
frequentes sobresobre vocêvocê
as quais e seuou
projeto
outrase pessoas
expliquepensam
os objetivos do seu teste.
regularmente?
Crie uma
Lorem ipsum
introdução
dolor sitque
amet,
vocêconsectetuer
usará com cada Insira sua resposta aqui
participante.
Você deve definir o tom antes de cada teste para
que todos os seus participantes tenham
expectativas consistentes. Ao antecipar os
problemas que podem surgir, você ajudará seus
participantes e a si próprio a ficar à vontade, e há Os participantes podem se sentir intimidados com a palavra "teste". Confirme para o usuário que não há respostas erradas e que
uma chance melhor de reunir informações úteis. qualquer comentário é útil. O que mais pode deixar seu participante desconfortável? Como você pode diminuir essa sensação?
Peça consentimento ao participante para gravá-lo por áudio e/ou vídeo. Informe ao participante por que a gravação é útil para o
seu teste. Pense em uma alternativa, caso ele se recuse a dar o consentimento.
apps ou atividades?
Os participantes geralmente querem saber a duração da sessão de teste. Quanto tempo você acha que levará para que os usuários
concluam as tarefas e respondam às suas perguntas de acompanhamento?
Testar |
Descobrir
Arquitetar
Testar
Esboçarosostestes
Definir scripts
Criar jornadas
Escrever os scripts
do usuário Script
Definir umerros
Antecipar processo Agora que você planejou seus testes, é hora de focar nos detalhes. Ao final
deste estágio, você terá um conjunto completo de scripts de teste.
Você definirá o fluxo dos seus testes para manter o usuário engajado e
orientado, se aprofundar nos tipos de perguntas que cada teste pode
responder e se preparar para o inesperado.
Exemplo
Observaros scripts
Esboçar Há perguntas
Esta frequentes
é a sequência sobre
de tarefas as quais
a serem você ou outras pessoas pensam
testadas: regularmente?
Contexto que devemos fornecer antes do teste:
Descreva
Lorem ipsum
cadadolor
teste sit
e aamet,
ordemconsectetuer
em que serão Insira sua reciclagem
Adicionar resposta aqui
ou lixo ao resumo diário. Dê ao participante um grupo de objetos que são lixo e
adipiscing elit,
realizados. Certifique-se
sed diam nonummy
de incluir todas
nibh as reciclagem.
euismod tincidunt
informações contextuais
ut laoreet
quedolore
o usuário
magna
precisará
aliquam
para concluir
erat volutpat.
a tarefa. Ut
Seu script de teste deve contar uma história com a
qual o usuário se identificará. A ordem das tarefas Descobrir informações sobre números de itens reciclados.
deve criar um fluxo natural que coloque o usuário
no lugar certo e o mantenha envolvido durante todo
o processo. Sempre que possível, coloque seus Quais são os desafios que você ou outras pessoas enfrentam diariamente?
testes na ordem em que o usuário os encontraria no
dia a dia. Verificar
Insira suasuas conquistas.
resposta aqui O usuário deve alcançar a conquista quando adicionar uma
reciclagem com sucesso.
Lembre-se de que algumas tarefas são mais
importantes para testar do que outras. Quais são os
recursos mais importantes para serem testados?
Você pode querer testá-los primeiro, caso fique sem Compreender os desafios sobre ser mais ecologicamente
tempo. consciente.
Para testes que não fluem naturalmente de um para
o outro, é especialmente importante fornecer
contexto para não interromper o fluxo do script. Você ou outras pessoas usaram soluções alternativas em apps que já existem? Você conhece algum app que resolve
Lembre-se de identificar essas situações e pense parcialmente um desafio, mas que exige que você o use de forma não intencional ou aumente seus recursos com outros
cuidadosamente sobre como você manterá o usuário apps ou atividades?
focado e orientado.
Testar | Script
Descobrir
Observaros scripts
Esboçar Há perguntas
Esta frequentes
é a sequência sobre
de tarefas as quais
a serem você ou outras pessoas pensam
testadas: regularmente?
Contexto que devemos fornecer antes do teste:
Descreva
Lorem ipsum
cadadolor
teste sit
e aamet,
ordemconsectetuer
em que serão Insira sua resposta aqui
adipiscing elit,
realizados. Certifique-se
sed diam nonummy
de incluir todas
nibh as
euismod tincidunt
informações contextuais
ut laoreet
quedolore
o usuário
magna
precisará
aliquam
para concluir
erat volutpat.
a tarefa. Ut
Seu script de teste deve contar uma história com a
qual o usuário se identificará. A ordem das tarefas
deve criar um fluxo natural que coloque o usuário
no lugar certo e o mantenha envolvido durante todo
o processo. Sempre que possível, coloque seus Quais são os desafios que você ou outras pessoas enfrentam diariamente?
testes na ordem em que o usuário os encontraria no
dia a dia. Insira sua resposta aqui
Lembre-se de que algumas tarefas são mais
importantes para testar do que outras. Quais são os
recursos mais importantes para serem testados?
Você pode querer testá-los primeiro, caso fique sem
tempo.
Para testes que não fluem naturalmente de um para
o outro, é especialmente importante fornecer
contexto para não interromper o fluxo do script. Você ou outras pessoas usaram soluções alternativas em apps que já existem? Você conhece algum app que resolve
Lembre-se de identificar essas situações e pense parcialmente um desafio, mas que exige que você o use de forma não intencional ou aumente seus recursos com outros
cuidadosamente sobre como você manterá o usuário apps ou atividades?
focado e orientado.
Testar | Script
Descobrir
Exemplo
Observaros scripts
Escrever Queremos entender
Há perguntas mais sobre:
frequentes sobre as quais você ou outras pessoas pensam regularmente?
Para cada
Lorem ipsum
teste,
dolor
determine
sit amet,
quais
consectetuer
perguntas e Os usuários
Insira conseguirão
sua resposta aqui classificar e inserir lixo e reciclagem no app corretamente?
adipiscing elit,
observações você
sedusará.
diam nonummy nibh
Você pode escolher entre diferentes tipos de
perguntas ao criar um script de teste. Você pode
usar uma ou mais delas para um determinado
teste e pode perguntar a eles (mais de uma vez!) Podemos responder a isso fazendo com que os usuários completem uma ordem de classificação da tela.
durante a jornada de um usuário específico.
Olhando para esta tela, classifique os itens que você vê do mais importante para o menos importante ao descartar lixo ou
Consulte as jornadas do usuário; elas ajudarão reciclagem.
você a decidir quando e como coletar seus Quais são os desafios que você ou outras pessoas enfrentam diariamente?
dados. Insira sua resposta aqui
Podemos receber insights sobre isso fazendo com que os usuários concluam uma observação da tarefa.
Seu participante deve começar por uma tela que provavelmente estará vendo ao iniciar a tarefa. Observe e anote os casos em
que ele tem sucesso ou não ao concluir partes da tarefa. Para conseguir mais informações, pergunte o que ele acha sobre a
conclusão da tarefa.
Se você fosse descartar esses itens, como poderia registrar isso no app?
apps ou atividades?
Podemos nos aprofundar para saber o motivo que um usuário toma decisões perguntando sobre suas expectativas.
Seu participante deve olhar para a tela e falar sobre o que está vendo e o que espera que cada elemento faça. Por exemplo, se
um participante menciona o "ícone de adição", você pode usá-lo como uma oportunidade para fazer mais perguntas sobre como
ele deveria funcionar.
Ao olhar para a tela (Hoje), o que você acha que pode concluir?
Testar | Script
Descobrir
Observaros scripts
Escrever Queremos entender
Há perguntas mais sobre:
frequentes sobre as quais você ou outras pessoas pensam regularmente?
Para cada
Lorem ipsum
teste,
dolor
determine
sit amet,
quais
consectetuer
perguntas e Insira sua resposta aqui
adipiscing elit,
observações você
sedusará.
diam nonummy nibh
Você pode escolher entre diferentes tipos de
perguntas ao criar um script de teste. Você pode
usar uma ou mais delas para um determinado
teste e pode perguntar a eles (mais de uma vez!) Podemos responder a isso fazendo com que os usuários completem uma ordem de classificação da tela.
durante a jornada de um usuário específico.
Consulte as jornadas do usuário; elas ajudarão
você a decidir quando e como coletar seus Quais são os desafios que você ou outras pessoas enfrentam diariamente?
dados. Insira sua resposta aqui
Podemos receber insights sobre isso fazendo com que os usuários concluam uma observação da tarefa.
Seu participante deve começar por uma tela que provavelmente estará vendo ao iniciar a tarefa. Observe e anote os casos em
que ele tem sucesso ou não ao concluir partes da tarefa. Para conseguir mais informações, pergunte o que ele acha sobre a
conclusão da tarefa.
apps ou atividades?
Podemos nos aprofundar para saber o motivo que um usuário toma decisões perguntando sobre suas expectativas.
Seu participante deve olhar para a tela e falar sobre o que está vendo e o que espera que cada elemento faça. Por exemplo, se
um participante menciona o "ícone de adição", você pode usá-lo como uma oportunidade para fazer mais perguntas sobre
como ele deveria funcionar.
Testar | Script
Descobrir
Observar erros
Antecipar Há participantes
Os perguntas frequentes sobre
que ficam as quais
travados paravocê ou outras
concluir uma pessoas pensam regularmente?
tarefa geralmente pedem sua ajuda. É importante descobrir o
motivo de estarem travados. Pergunte coisas como: "O que você espera que aconteça?" Como você pode colocar seu
Faça um
Lorem ipsum
planodolor
de ações
sit amet,
a serem
consectetuer
tomadas quando Insira sua resposta aqui
usuário de volta no caminho certo sem influenciá-lo? Que perguntas ajudarão você a entender melhor o motivo de o
oadipiscing
usuário ficar
elit, travado
sed diamounonummy
fizer umanibh
pergunta.
usuário ficar travado em uma tarefa?
É especialmente importante não influenciar o
usuário em um teste. Você ficará mais tentado a
intervir quando algo der errado. Suas interações
podem influenciar o usuário e privar você de
informações importantes, portanto, lembre-se de
planejar como fazer e responder perguntas para
minimizar sua influência no teste. Quais são os desafios que você ou outras pessoas enfrentam diariamente?
Quando os participantes estão concluindo uma tarefa, podem surgir elementos menores para testar. Coisas como
reconhecimento do ícone, clareza do texto e contraste de cor podem afetar a forma como o usuário conclui a tarefa.
Considere quais pequenos testes podem acontecer enquanto um participante conclui tarefas.
apps ou atividades?
Insira sua
Quando os resposta aqui ficam quietos, eles geralmente estão descobrindo como as coisas funcionam. Peça que eles falem
participantes
sobre o que estão experimentando. Como você poderia gentilmente lembrá-los de falar sobre o processo de pensamento
deles? Quando eles podem precisam de um momento para pensar durante o teste?
Testar | Script
Descobrir
Testar
Reunir usuários
Definir os testes
Criar jornadas
Realizar última doverificação
usuário Preparar
Definir um processo Você está quase lá! Ao final desta etapa, você estará pronto para testar seu
protótipo.
A qualidade dos seus dados depende dos usuários que fizeram o teste, por isso
é importante selecioná-los com cuidado. E você vai querer ter certeza de que
está tudo pronto desde o início para fornecer a cada participante uma
experiência agradável.
Observar
Reunir usuários Há perguntas
Nome frequentes sobre as quais você
do participante ou eoutras
Data hora pessoas pensam regularmente?Local
Faça uma
Lorem ipsum
listadolor
dos usuários
sit amet,que
consectetuer
você vai Insira sua resposta aqui
adipiscingnoelit,
cadastrar seused
teste
diam
e planeje
nonummya data
nibh
e o local
euismod
para cadatincidunt
um. ut laoreet dolore magna
As informações coletadas na fase Descobrir
serão úteis durante o teste. Selecione usuários
que são diretamente afetados pelos desafios que
você identificou e aqueles com maior
probabilidade de usar seu app.
São necessárias pelo menos três pessoas para Quais são os desafios que você ou outras pessoas enfrentam diariamente?
começar a ver os padrões em testes de usuário, Insira sua resposta aqui
portanto, certifique-se de inscrever participantes
suficientes caso houver um ou dois
cancelamentos.
apps ou atividades?
Testar | Preparar
Descobrir
Observarúltima verificação
Realizar Há perguntas frequentes sobre as quais você ou outras pessoas pensam regularmente?
Use a lista
Lorem ipsum
de dolor
verificação
sit amet,
paraconsectetuer
verificar se você Todas
Insira sua respostaas
aquisuas perguntas são não tendenciosas?
adipiscing
está prontoelit,
parased
iniciar
diamo nonummy
teste. nibh
Certifique-se de que o script de teste será
Você consegue fazer um script no seu rascunho ou protótipo sem
executado sem problemas ao conversar com os problemas?
usuários. Use esta lista de verificação para
concluir uma simulação do seu script de teste. Você tem um plano para reiniciar o processo de tarefa se o
usuário desistir?
O seu script de teste aborda os recursos que são mais
importantes para o objetivo?
Você tem um plano sobre onde realizará os testes? Remoto ou
pessoalmente?
apps ou atividades?
Testar | Preparar
Descobrir
Validar
Você terá muitas informações para analisar depois de testar seu protótipo. É
importante resumir e tirar as conclusões corretas dos seus dados de teste para
saber como melhorar seu app. Você começará formatando seus dados para
conseguir fazer uma análise. Depois, você fará um resumo das suas observações
descobrindo as relações entre eles. E por último, reduzirá as causas básicas e
identificará os principais problemas.
Exemplo
Observar
Reunir anotações Há perguntas frequentes sobre as quais você ou outras pessoas pensam regularmente?
Christina Ahmed
Crie anotações
Lorem ipsum dolor
resumidas
sit amet,
a partir
consectetuer
de suas Insira sua resposta aqui
Participante:
adipiscing elit,
observações parasedcada
diam participante.
nonummy nibh
Após o teste do usuário, você terá muitos dados
brutos. Antes de tirar qualquer conclusão, é Queria usar a balança Capaz de inserir lixo e Gostaria de Não está claro o que Não achou necessário
importante converter tudo em um formato porque tem uma em reciclagem. poder inserir lixo classifica algo como alterar a data. Ela não
consistente. Não se preocupe em como organizá- casa. e reciclagem na mesma reciclagem. teria inserido algo após
los ou categorizá-los. tela. o fato.
Quanto mais restritas forem suas observações

sobre pontos de dados únicos e focados, mais fácil Quais são os desafios que você ou outras pessoas enfrentam diariamente?
será organizá-las. Insira sua resposta aqui
Esta atividade pode envolver a transferência e Gostaria de ver Não está claro Não tem certeza de Gostaria de ver quais Gosta de ver os desafios
divisão de anotações escritas, o resumo das as possíveis conquistas, o significado de onde receberia um dos seus amigos estão ativos e anteriores.
respostas da pesquisa ou a análise de vídeo ou em vez de apenas o que Recompensas e Via código de convite. participando,
áudio. já foi conquistado. fluvial. e não apenas o número
de amigos.
Pode ser necessário ter muitas anotações para
cada participante. Em caso afirmativo,considere
organizar as anotações por tarefa a ser concluída
por participante.
apps ou atividades?
Validar | Reunir
xx
anotações
Observar
Reunir anotações Há perguntas frequentes sobre as quais você ou outras pessoas pensam regularmente?
Crie anotações
Lorem ipsum dolor
resumidas
sit amet,
a partir
consectetuer
de suas Insira sua resposta aqui
Participante:
adipiscing elit,
observações parasedcada
diam participante.
nonummy nibh
Após o teste do usuário, você terá muitos dados
brutos. Antes de tirar qualquer conclusão, é
importante converter tudo em um formato
consistente. Não se preocupe em como organizá-
los ou categorizá-los.
Quanto mais restritas forem suas observações
sobre pontos de dados únicos e focados, mais fácil Quais são os desafios que você ou outras pessoas enfrentam diariamente?
será organizá-las. Insira sua resposta aqui
Esta atividade pode envolver a transferência e
divisão de anotações escritas, o resumo das
respostas da pesquisa ou a análise de vídeo ou
áudio.
Pode ser necessário ter muitas anotações para
cada participante. Em caso afirmativo,considere
organizar as anotações por tarefa a ser concluída
por participante.
apps ou atividades?
Validar | Reunir
xx
anotações
Exemplo
Observar
Gerar os principais insights Há perguntas frequentes sobre as quais você ou outras pessoas pensam regularmente?
Veja as ipsum
Lorem suas anotações
dolor sit amet,
e agrupe
consectetuer
as semelhantes. InsiraGreen
sua resposta aqui
Jamil Não está Este é nosso principal
adipiscing
Resuma esses
elit,grupos
sed diam
como
nonummy
os principais
nibh insights claro sobre o que se insight:
euismod
sobre o comportamento
dos seus
dolore
usuários.
magna classifica como Os usuários estão confusos sobre se um item é
aliquam erat volutpat. Ut reciclagem.
Um diagrama de afinidade ajuda a visualizar as reciclável.
semelhanças entre os participantes e identificar
padrões.
À medida que reúne suas anotações, os padrões
vistos devem ajudar você a tirar algumas Karla Gonzalez"Para Karla Gonzalez
conclusões iniciais sobre os dados. Quais são os desafios que "Gostaria
que será que serve este
você ouqueoutras
essa
pessoas enfrentam diariamente?
ao lado de
Não analise ainda as razões do comportamento Insira sua resposta aqui informação ficasse em
reciclagem?" algum lugar
deles, concentre-se apenas em encontrar temas. mais visível."
Jody Akana "Eu não sei Jody AkanaDescartei a

se isto é reciclagem reciclagem. Não consegui
ou não… o que significa encontrar informações
o 5?" sobre os números
de reciclagem.
apps ou atividades?
Validar | Gerar
xx os
principais
insights
Observar
Gerar os principais insights Há perguntas frequentes sobre as quais você ou outras pessoas pensam regularmente?
Veja as ipsum
Lorem suas anotações
dolor sit amet,
e agrupe
consectetuer
as semelhantes. Insira sua resposta aqui
Este é nosso principal
adipiscing
Resuma esses
elit,grupos
sed diam
como
nonummy
os principais
nibh insights
insight:
euismod
sobre o comportamento
dos seus
dolore
usuários.
magna
Um diagrama de afinidade ajuda a visualizar as
semelhanças entre os participantes e identificar
padrões.
À medida que reúne suas anotações, os padrões
vistos devem ajudar você a tirar algumas
conclusões iniciais sobre os dados. Quais são os desafios que você ou outras pessoas enfrentam diariamente?
Não analise ainda as razões do comportamento Insira sua resposta aqui

deles, concentre-se apenas em encontrar temas.
apps ou atividades?
Validar | Gerar
xx os
principais
insights
Exemplo
Observar
Tirar conclusões Testamos esta tarefa:
Há perguntas frequentes sobre as quais você ou outras pessoas pensam regularmente?
Para cada
Lorem ipsum
tarefa,
dolor
faça
situm
amet,
resumo
consectetuer
dos principais Os usuários
Insira conseguem
sua resposta aquidescobrir as informações sobre o que é considerado reciclagem?
adipiscing
insights e analise-os
elit, sed diam
comnonummy
base em suas
nibhsuposições
euismod
para tirartincidunt
conclusões ut laoreet
gerais. dolore magna
A fase final da análise de seus resultados é a de
procurar grandes padrões. A identificação destes
padrões irá orientar você nas decisões sobre a
iteração do seu projeto. Esperávamos que os usuários concluíssem a tarefa:
Ao tirar conclusões a partir dos principais insights, Tocando
mantenha as informações generalizadas. Foque nas Quais sãono
osícone para
desafios que ver
vocêmais
ou informações.
outras pessoas enfrentam diariamente?
principais causas em vez de questões particulares. Insira sua resposta aqui
Em vez disso, observamos que:
Os usuários estão confusos sobre se um item é reciclável.
apps ou atividades?
Insira sua
Tiramos resposta
estas aqui
conclusões:
O ícone não é bem compreendido. Os usuários querem um lembrete mais visível do que
significam os números de reciclagem.
Os usuários têm dificuldade de lembrar os números de É importante também dizer aos usuários onde encontrar os
reciclagem. números de reciclagem nos produtos.
Validar | Tirar
xx
conclusões
Observar
Tirar conclusões Testamos esta tarefa:
Há perguntas frequentes sobre as quais você ou outras pessoas pensam regularmente?
Para cada
Lorem ipsum
tarefa,
dolor
faça
situm
amet,
resumo
consectetuer
dos principais Insira sua resposta aqui
adipiscing
insights e analise-os
elit, sed diam
comnonummy
base em suas
nibhsuposições
euismod
para tirartincidunt
conclusões ut laoreet
gerais. dolore magna
A fase final da análise de seus resultados é a de
procurar grandes padrões. A identificação destes
padrões irá orientar você nas decisões sobre a
iteração do seu projeto. Esperávamos que os usuários concluíssem a tarefa:
Ao tirar conclusões a partir dos principais insights,
mantenha as informações generalizadas. Foque nas Quais são os desafios que você ou outras pessoas enfrentam diariamente?
principais causas em vez de questões particulares. Insira sua resposta aqui
Em vez disso, observamos que:
apps ou atividades?
Insira sua
Tiramos resposta
estas aqui
conclusões:
Validar | Tirar
xx
conclusões
Iterar
Examine atentamente seu primeiro protótipo e você verá um app
revolucionário que começa a tomar forma. Agora começa a fase decisiva de
qualquer projeto — é preciso trabalhar com o objetivo de aplicar tudo o que
você aprendeu durante o processo de design. Você usará as conclusões da sua
análise como um guia para reavaliar as escolhas feitas durante a sua jornada de
design de apps. Depois, você irá revisitar diferentes elementos do seu projeto,
procurando oportunidades para fazer melhorias grandes e pequenas.
Exemplo
Título
Organizar suas conclusões Há perguntas frequentes sobre as quais você ou outras pessoas pensam regularmente?
Antes de
Lorem ipsum
usar dolor
suas conclusões
para revisitar as Insira sua resposta aqui
adipiscing
etapas do seu
elit,processo
sed diamdenonummy
design, agrupe
nibh as
euismod tincidunt
semelhantes. Ver temas
ut laoreet
importantes
dolore magna
pode ajudar Elementos da Navegação
aliquam
você a decidir
erat volutpat.
em que Utponto seus esforços devem
ser concentrados. interface
É muito difícil encontrar o
Suas conclusões podem variar desde descobrir botão para adicionar O fluxo para adicionar um
O ícone não é bem novo item de reciclagem
conteúdo importante até tornar mais fácil navegar compreendido. um novo item.
no aplicativo e reduzir a confusão visual. exige muitas ações.
Você também pode descobrir que entendeu mal Quais são os desafios que você ou outras pessoas enfrentam diariamente?
seus usuários, ou que omitiu um elemento Insira sua resposta aqui
importante do seu plano de teste.
Gráficos e diagramas não Adicionar vários itens

têm contraste suficiente. exige que o usuário repita
o mesmo fluxo para cada
um deles.
apps ou atividades?
Muitos usuários
não compreendem a frase
"Número de reciclagem".
Palavras
Iterar | Organizar
xx
suas conclusões
Título Definir
Voltar: Hávocê
Se perguntas
ouviu frequentes
comentáriossobre
como:as quais você ou outras pessoas pensam regularmente?
Revisite estas seções em Definir
Se seusipsum
Lorem gruposdolor
incluem
sit amet,
os seguintes
consectetuer
temas, Insira sua resposta aqui
Seu concorrente criou um recurso melhor Pesquisar concorrentes, encontrar diferenciadores
adipiscingrevisitar
considere elit, sed estes
diam elementos
nonummy danibhetapa
Definir.
É necessário usar as duas mãos Considerar a diversidade

Insira sua resposta
O problema não foi aqui
resolvido Observar, analisar causas, priorizar recursos
Gostaria de um recurso diferente Observar, analisar as causas, descrever as funções

principais
parcialmente umfoi
Um recurso não desafio, mas que exige que você o use de forma não
reconhecido intencional
Priorizar ou aumente seus recursos com outros
recursos
apps ou atividades?
Iterar | Voltar:
xx
Definir
Título Prototipar
Voltar: Hávocê
Se perguntas
ouviu frequentes
comentáriossobre
Revisite estas seções em Protótipo
Se seusipsum
Lorem gruposdolor
tiverem
sit amet,
os seguintes
consectetuer
tópicos, Insira sua resposta aqui
Não foi possível entender uma tarefa Esboçar as telas, agrupar as telas, vincular as telas
adipiscingrevisitar
considere elit, sed estas
diam partes
nonummy
da etapa
nibh
Protótipo.
Não foi possível ler o conteúdo Estilo, avaliar peso e equilíbrio

Insira
Não foisua resposta
possível aqui uma tarefa
concluir Adicionar navegação, criar modais, adicionar elementos
de interface
Um recurso não foi reconhecido Adicionar elementos de interface
parcialmente umsignifica
Não sabe o que desafio,omas que
ícone doexige que você o use de forma não
aplicativo intencional
Criar ícone ou aumente seus recursos com outros
apps ou atividades?
Não entende as categorias Esboçar as telas, agrupar as telas, vincular as telas
Iterar | Voltar:
xx
Prototipar
Título Testar
Voltar: Hávocê
Se perguntas
ouviu frequentes
comentáriossobre
Revisite estas seções em Testar
Se seusipsum
Lorem gruposdolor
tiverem
sit amet,
os seguintes
Em dúvida sobre o que você quer que eles façam Definir os testes, esboçar os scripts, escrever os scripts
adipiscing
tópicos, considere
elit, sedrevisitar
diam nonummy
estas partes
nibh
euismod
em Testar.tincidunt ut laoreet dolore magna
Sei disso porque você o chamou assim Antecipar erros

Insira sua
O script resposta
não aqui ao processo de pensamento
corresponde Definir os testes, esboçar os scripts, criar jornadas do
usuário
apps ou atividades?
Iterar | Voltar:
xx
Testar
Aprenda a Programar com a Apple.
Você não precisa de experiência anterior para mergulhar diretamente na criação de apps para as plataformas Apple. O curso de desenvolvimento de apps da Apple
permite que qualquerpessoa programe facilmente em Swift como os profissionais — seja por um semestre na escola, para passar em uma certificação profissional ou
para aprimorar suas habilidades. Saiba mais em developer.apple.com/learn/curriculum.
Guia de Demonstração de Apps Clube de Programação com Swift

Demonstre sua engenhosidade compartilhando suas conquistas em eventos da Os Clubes de Programação com Swift são uma maneira divertida de criar
comunidade, como eventos de demonstração de projetos ou de apps. O Guia de apps. As atividades foram desenvolvidas para a aprendizagem de conceitos de
Demonstração de Apps oferece apoio prático para você organizar um evento, programação em Swift nos playgrounds do Xcode no Mac. Colabore com os
virtual ou presencial, de demonstração de apps. Download: colegas para criar protótipos de aplicativos e pense em como códigos podem
apple.co/developinswiftappshowcaseguide_BR fazer a diferença no mundo ao seu redor. Download:
apple.co/swiftcodingclubxcode_BR
© 2021 Apple Inc. Todos os direitos reservados. Apple, o logotipo da Apple, iPad, iPhone, Keynote, Mac, Swift, o logotipo Swift, Swift Playgrounds e Xcode são marcas comerciais da Apple Inc., registradas nos EUA e em outros
países. iOS é uma marca comercial ou marca registrada da Cisco nos EUA e em outros países e é usada sob licença. Os nomes de outros produtos e empresas aqui mencionados podem ser marcas comerciais de suas respectivas
empresas. App Store é uma marca de serviço da Apple Inc., registrada nos EUA e em outros países. A marca Bluetooth® e seus logotipos são marcas comerciais registradas de propriedade da Bluetooth SIG, Inc. e seu uso pela
Apple é licenciado. Abril de 2021

Appworkbook

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Appworkbook

Enviado por

Direitos autorais:

Formatos disponíveis

Olá

O Livro de Exercícios de Design de apps orienta você durante o ciclo de design

Kit do Keynote para iOS

Adicione imagens a espaços reservados arrastando e soltando.

Descobrir Mapa Arquitetar Validar Iterar

Você ou outras pessoas usaram soluções alternativas em apps que já existem?

Insira sua resposta aqui

Prepare-se para escrever suas primeiras linhas em Swift!

Parabéns! Você acabou de concluir sua primeira exploração de código.

Histórias pessoais de pessoas reais podem

Histórias pessoais de pessoas reais podem

Insira sua resposta aqui

Insira sua resposta aqui

15 a 30. Coisas forem jogadas no lixo ou recicladas.

Lorem ipsum dolor sit amet, consectetuer adipiscing

Nosso app será usado neste ambiente:

Interno com conexão Wi-Fi ou rede de celular.

O usuário pode estar com as mãos ocupadas.

Ao projetar nosso app, precisamos considerar:

Os usuários podem não saber o que é reciclável.

Lorem ipsum dolor sit amet, consectetuer adipiscing

Nosso app será usado neste ambiente:

Insira sua resposta aqui

Ao projetar nosso app, precisamos considerar:

Podemos resolver esse problema em nosso app:

Insira sua resposta aqui

Podemos resolver esse problema em nosso app:

Insira sua resposta aqui

Neste exercício, você vai:

Altere o título da página para "Mapa".

No editor, digite o seguinte código Swift:

Você verá um ponto vermelho, indicando um

import MapKit O Swift usa diferentes estilos de fonte

Depois, adicione o código destacado no início da última linha:

Insira sua resposta aqui

Execute seu código e abra o console para ver a mensagem.

Agora execute o código para ver seu texto na visualização dinâmica.

var message = "Explore Code!"

Insira sua resposta aqui

Insira sua resposta aqui

Insira sua resposta aqui

var challengeString = "Desafio "

var name = "Fim do Azeite de Dendê"

var noPalmOilChallenge = name + challengeString

Execute seu código e abra o console para ver a mensagem.

var anotherNoPalmOilChallenge = "Challenge \(name)"

print("Conclua o \(noPalmOilChallenge) para marcar \(pointsForCompletion) pontos!")

Execute seu código e analise o resultado no console.

Insira sua resposta aqui

Escolher o dia em que a reciclagem foi feita

Navegar pelas datas anteriores

Compartilhar entrada de registro nas redes sociais

Insira sua resposta aqui

Manter registros de itens antigos Dia, semana, mês

Escolher o dia em que a reciclagem foi feita

Navegar pelas datas anteriores

Compartilhar entrada de registro nas redes sociais

Depois, você vai organizá-las de uma maneira

3. Em Tamanho do Slide, selecione Personalizar

Insira 375 para largura e 812 para altura. Clique em

Agora crie um slide para cada esboço de tela e copie

Para copiar um esboço de tela, clique e arraste para

var noStraws = Challenge()