Transcrições
1. Fundamentos da criação de Wireframe e protótipos para a experiência do usuário: Todos, bem-vindos aos
fundamentos
da construção de wireframe e protótipos para experiência
do usuário Meu nome é canceroso e sou designer
de UI UX com mais de
três anos de experiência. Sou fascinado pelo design da experiência
do usuário e
estou entusiasmado em compartilhar meu
conhecimento com você Nesta aula, começaremos
aprendendo o básico sobre
wireframes e protótipos Em seguida, projetaremos estruturas de
arame para aplicativos
populares para ter uma
ideia do processo. Em seguida, construiremos
a estrutura de arame do zero para
uma entrega de comida. Usaremos esse aplicativo
como um estudo de caso para aprender como aplicar os
princípios do design dos EUA. Finalmente, converteremos nossas estruturas de arame
em um protótipo Isso nos permitirá testar nossos designs com os usuários
e obter feedback. Vamos usar o Pigma para construir os wireframes Não se preocupe se você nunca construiu uma estrutura de arame antes
ou usa o Pigma Começaremos
do zero e
estou aqui para guiá-lo em
cada etapa do caminho. Ao final desta aula, você terá uma
sólida compreensão carrinhos
de bebê e protótipos de arame Você também
poderá projetar e construir armações de arame e
tipos de fotos para seus próprios projetos. Você está animado? Mal posso esperar para te ver
na primeira aula.
2. Introdução aos wireframes: armações de arame são esboços de baixa
fidelidade de um site ou aplicativo Eles não têm
cores ou design apenas a estrutura básica
da interface. Isso os torna rápidos
e fáceis de criar. Ele permite que os designers se concentrem
na experiência do usuário sem se atolarem nos detalhes As estruturas de arame são usadas para comunicar ideias a
outras pessoas da equipe, como desenvolvedores
e partes interessadas. Eles também podem ser usados para testar diferentes designs com
os usuários e obter feedback. Isso ajuda a garantir
que o design final seja fácil de usar e
atenda às necessidades do usuário. Aqui estão alguns exemplos de como estruturas de
arame podem ser usadas
para resolver problemas. Quatro pessoas, um site para um novo restaurante pode
usar fio. Loja Pm. Mostre como os homens
serão organizados, onde as
informações de contato serão exibidas e como os usuários podem
pedir a comida. Um aplicativo para uma mercearia
pode usar armações de arame para mostrar como os usuários podem navegar
no inventário da loja, adicionar itens aos cartões e conferir o site
de uma agência de viagens pode usar wireframes para mostrar como os usuários podem
pesquisar voos,
hotéis, alugar carros e reservar Em cada um desses exemplos, as estruturas de arame permitem que os
designers se concentrem
na experiência do usuário
e
garantam que a interface seja
fácil de usar e entender. Isso pode ajudar a melhorar a
experiência geral do cliente e aumentar a probabilidade de as
pessoas usarem o produto. Os wireframes são uma
ferramenta valiosa para designers. Eles podem ajudar a
economizar tempo e dinheiro, melhorar a comunicação e experimentar designs
diferentes com os usuários. No próximo vídeo, apresentaremos os
fototipos e aprenderemos a diferença entre os tipos de
fotos e os wireframes
3. Introdução ao protótipo e à diferença entre wireframe e protótipo: A principal diferença
entre um wireframe e um protótipo
de baixa fidelidade wireframes são estéticos, enquanto protótipos
de
baixa fidelidade Isso significa que os
usuários podem clicar em diferentes elementos do protótipo de
baixa fidelidade para ver como eles funcionam Isso é importante para testar
a usabilidade de um design, pois permite que os usuários
interajam com a interface e forneçam
feedback sobre como ela funciona Aqui está um exemplo de um protótipo de
baixa fidelidade. Um designer está criando um novo
site para um restaurante. Eles criaram o protótipo
de baixa
fidelidade do site usando formas e
texto
básicos para representar os diferentes elementos
da interface O protótipo inclui
a página inicial, a página do menu e
a página de contato O designer compartilha o protótipo de
baixa fidelidade com alguns usuários e pede que
eles o testem Os usuários fornecem feedback sobre a usabilidade do site O designer usa o feedback para melhorar o design
do site. Protótipos de baixa fidelidade, uma ferramenta
valiosa para designers. Eles podem ser usados para testar a usabilidade da ideia de
design
no início do processo de design e para obter feedback de usuários
e partes interessadas Isso pode ajudar a
melhorar o design
do produto final e garantir
que ele seja fácil de usar.
4. 04 Figma Introdução novo: Nesta lição,
vamos criar uma conta Figma e nos
familiarizar com a ferramenta Figma Se você já criou
uma conta no Figma, pode pular esta lição Vamos começar a fazer isso. Clique em Obter Figma gratuitamente. Vincule a descrição
e você será redirecionado
para esta página Nesta página, clique no
botão Começar. Clique neste botão azul
Comece gratuitamente. Em seguida, clique em Continuar com o Google e cadastre-se
com seu e-mail. Depois de se inscrever, você receberá um e-mail
de confirmação em sua caixa de e-mail. Conclua o processo de
confirmação e você estará pronto para começar. Eu já tenho uma conta Figma. Eu vou abri-lo. Ok, agora estou na
minha conta Figma. Então, vou clicar neste botão
de arquivo de design. Então eu estou na ferramenta Figma. Como primeira etapa, clicarei aqui e renomearei
esse arquivo de design do Fima Vou renomeá-lo como estrutura de arame. Então, no lado esquerdo, temos ferramentas como mover
molduras e formas,
caneta e lápis, texto
e ferramentas que
podemos usar para projetar
protótipos e armações de arame No seu sinal à direita, você verá o painel Properties
Fane Prototype Como primeira etapa, criarei uma moldura. Para fazer isso,
clicarei neste ícone Pm. Aqui eu posso ver
os tamanhos dos prem. Se você pretende
criar um site, você pode selecionar o tamanho
na mesa da versão. Ou, se você quiser
criar um laboratório móvel, poderá selecionar o tamanho do telefone. Nesse caso, vamos
selecionar o design do tamanho do telefone. Para fazer isso, clico
nesse tamanho de telefone e seleciono uma moldura
chamada Android Small. Então, aqui está nosso quadro, e podemos renomear o
quadro como quisermos Vou fazer com que seja como em casa, e aqui podemos
alterar a altura , adicionar cantos e fazer muito mais coisas. No processo de
design da estrutura de arame, examinarei
todas essas opções. Por enquanto, vou
criar apenas algumas formas. Eu clico no pequeno ícone de seta na ferramenta
Forma e
seleciono uma forma de retângulo E pressione Shift e
crie um retângulo. Vamos fazer 200 e é 200, depois vou colocá-lo no centro. Em seguida, clicarei aqui
e clicarei em Linha. Em seguida, pressionarei o controle e
aumentarei o zoom usando a roda do mouse. Em seguida, clicarei
aqui e pressionarei Shift. Em seguida, arraste a linha até aqui
e solte-a assim. Em seguida, também clicarei
na linha, clicarei em Shift
e, em seguida, clicarei aqui. Em seguida, arraste-o como eu fiz antes. E aqui está um
design simples que criamos. Agora vou selecionar
essas duas linhas no traçado. Eu vou fazer o traço
lançar dois, ok? Esta é uma forma simples
de estrutura de arame que representa a
imagem do nosso design.
5. Crie primeiro wireframe para o aplicativo Gmail: Olá a todos. É hora de
criar nossa primeira estrutura de arame. A maneira mais fácil de criar
e praticar estruturas de arame é imitar a interface
do aplicativo ou site Podemos obter uma captura de tela de aplicativos, sites e
estruturas de design para essa interface Eu já tenho quatro interfaces de
aplicativos. Vou apenas arrastá-los e
soltá-los no Sigma,
e esses são a interface do aplicativo do Gmail, a interface do
aplicativo do Youtube Studio
e a interface do aplicativo Instagram Então, aqui está o link
na interface do aplicativo. Vamos começar com essa interface de aplicativo de
e-mail. Vou apenas arrastá-lo até aqui e
vou abri-lo assim. Você pode encontrar esse design de
interface na
seção de recursos da classe. Agora vou criar uma moldura. Basta clicar aqui. Agora vou selecionar o Android
Large Size aqui. Vê isso? Então eu vou diminuir
o tamanho desse e-mail. Interp. Basta clicar no
canto e pressionar Shift. Depois, você pode reduzir o tamanho sem
afetar o design. Ok, e agora vou
renomear esse quadro para App Wire Frame Ok, agora temos que adicionar a grade de
layout a esse quadro porque será fácil
guiar o layout e
adicionar nosso componente. Para fazer isso, clicarei no
quadro e clicarei em Layout Grid. Basta clicar neste sinal de adição, depois clicar aqui e
ir para a coluna. E farei com que as colunas contem como quatro e a
sarjeta seja dez Além disso, adicionarei margem
a esse quadro como dez. Ok, agora podemos guiar essas
linhas e construir o design. Vou aumentar o
design assim. E vamos começar a
projetar a estrutura de arame. Como primeira etapa, clico no triângulo e
crio um triângulo como esse. Porque vamos criar
essa barra de pesquisa com
esse menu de hambúrguer Então já temos a cor como essa cor cinza
e eu vou mantê-la. Essa é uma estrutura de
arame de baixa fidelidade, então não precisamos alterar os cantos ou adicionar
gráficos a essa Só precisamos criar
a estrutura básica
do laboratório de correio. Esse é o campo de texto, e eu vou clicar aqui
e clicar em Elipse Então eu pressiono Shift e
faço uma elipse como essa. Vou fazer com que seja de 30 por 30, basta mudar de turno e
alterar o tamanho
clicando com o
botão esquerdo do mouse e alterando o tamanho. Então vou mudar a
cor para gostar dessa cor. E traga-o aqui assim. Esse é um ícone de usuário. Vou fazer com que seja como um usuário. Para fazer isso, eu clico na elipse e crio outra
elipse Essa é a cabeça do usuário. Vou aumentar pressionando comando e usando
a roda do mouse. Então essa é a cabeça
do avatar do usuário. Vou criar, vamos criar uma forma poligonal e criar
um retângulo Então vou reduzir os cantos. Eu vou aqui e vou reduzir os
cantos para a linha três. Ok, vamos torná-lo um
pouco maior assim. OK. Aqui estão as duas formas
do
avatar do usuário pacing, shift E vá para o centro da linha
horizontal. E clique nele. Já está centrado assim. OK. Esse é o ícone do usuário. Depois, temos o menu de hambúrguer. Então eu vou aqui
e clico na linha. Em seguida, clique no Shift e faça o
menu de hambúrguer assim Se eu não selecionei o turno, a linha não ficará na horizontal, então eu tenho que selecionar o turno. E tudo bem. Em seguida, vou aumentar o traçado, selecionar a linha e
adicionar um traçado para, ok, aumentar o
tamanho do desenho. Em seguida, pressione todos os dez, clique na linha e isso. Vamos
fazer assim e selecionar todas essas
linhas clicando em Shift
e clicando com o botão
esquerdo do mouse. E clique na opção Mais. E clique em Distribuir espaçamento
vertical. Ok, agora está centralizado
verticalmente. E agora temos o menu de
hambúrguer e o ícone do avatar Agora temos que adicionar esse texto. Podemos adicionar esse
texto apenas adicionando um retângulo como
esse e adicionando cores Vamos adicionar a mesma cor. Basta clicar neste ícone
e clicar aqui. Esse será aquele texto. Ou eu posso simplesmente digitar a
pesquisa no e-mail. Vou adicionar a pesquisa no correio aqui. Será mais detalhado. Clique neste texto, eu posso, e clique aqui. Em seguida, adicione a pesquisa no e-mail. OK. Agora vou
arrastá-lo e soltá-lo aqui. Clique no texto e
clique no texto Feel. Em seguida, faça uma linha, centro
vertical. Se eu quiser, posso alterar o
telefone e o tamanho do telefone, mas tudo bem para mim. E agora vou adicionar
esse segundo texto. Então eu clico aqui
e clico em Antigo. Em seguida, clico com o botão
esquerdo do mouse e dublo. Em seguida, vou colocá-lo
aqui e clicar
em Antigo e depois sobre
este campo de texto. E eu vou fazer o espaço como 15. Então eu vou fazer esses dois. E vamos fazer negrito, vamos torná-lo semibold Agora podemos adicionar esse item de e-mail. Para fazer isso, vou clicar em E e criar uma Elise como essa Em seguida, criarei um retângulo. Esse será o título
do e-mail que eu enviar. Basta clicar aqui e
clicar no Ava. Eu vou colorir essa cor. Então eu vou para o alto. Então, vou duplicar esse
triângulo e colocá-lo alto para torná-lo maior
assim e alterá-lo para dois E então podemos
adicionar outra linha. Vamos destacar os dois e torná-los dez. Agora vou selecionar todos esses textos e
reduzi-los assim. Então eu tenho que, na hora de fazer isso, basta copiar
um e colar. Então faça isso, esse retângulo
está fora da moldura. Então, vou clicar no retângulo
e trazê-lo de volta para
a moldura, colocando-o no centro Então temos essa Staletta 15, 15 Mude a cor para cor. Ok, agora vou destacar
ou selecionar todas
essas formas e pressionar Command e elas
se tornarão um grupo. Então eu vou pressionar todo o dragão
Dubliatedy assim. Eu vou espaçar 20. Vamos tornar o espaço 20. E eu destaco três
desses componentes e
faço com que seja assim, acho que podemos adicionar mais espaço. Vamos adicionar 30. Em seguida, destacarei esses três e
os duplicarei assim Ok, agora vou
remover este. Então temos um rodapé. Vamos fazer um rodapé. Clique em Retângulo e crie
um retângulo como este. Vou adicionar 40, vamos fazer 50. OK. E agora temos
esses dois ícones. Vamos apenas adicionar um suporte facial. Este estará aqui. E mude a cor
para azul escuro. E basta duplicá-lo. OK. Aqui temos a transferência de correio de
baixa fidelidade Ore. Agora, no próximo vídeo, criaremos um
pouco complexo. Vamos criá-lo
para o Youtube Studio.
6. 06 segundo Wireframe: Ok, agora vamos criar o
wireframe para o Youtube Studio. Vou pegar essa interface do Youtube
Studio aqui, clicar no quadro e
clicar em Android Small. Em seguida, reduza o tamanho
dessa interface. Ok, então renomeie o quadro
para quadro YT Studio Wire. Em seguida, adicionarei
o layout grete. Basta clicar aqui e
clicar nas colunas. Então, a calha de quatro colunas
será dez e a margem será Ok, agora vamos criar a
primeira parte como a primeira,
temos o logotipo do estúdio do Youtube, depois temos esse botão de upload e, em seguida, o logotipo do usuário. Vamos clicar aqui. Vamos criar um
retângulo como esse. Vou fazer com que tenha 60, depois adicionarei o Text Studio. Em seguida, mude o
telefone para parafuso e aumente o tamanho do telefone desta
forma, torne-o centralizado Em seguida, clique no
ícone do Elipse como este. Vamos fazer com que seja 20 por 20. Vamos mudar a cor para
escura, pois temos outro ícone. Em seguida, temos o ícone do perfil. Vou clicar em todos os que estão na prateleira e aqui assim. Eu vou fazer avatar. Para fazer isso, vou aumentar
o tamanho e clicar aqui. Em seguida, crie pequenos
lábios assim. Em seguida, uma forma retangular. E crie um retângulo
em alguns cantos como este. Ok, vamos
torná-lo um pouco maior. Não é o centro. Tente torná-lo o
mais central possível. OK. Então, temos o nome do canal conta do assinante
e o logotipo do canal Vamos criar primeiro o logotipo do
canal. Vamos criar assim, depois clicar em triângulo e
aqui está o título do canal. Em seguida, clique no texto e adicione
os cálculos do assinante 10.000. Vamos
torná-lo um pouco
maior Então, temos um pequeno total de assinantes de
texto. Vamos destacá-lo
e tornar o texto médio e diminuir
o tamanho do texto. Ok, vamos destacar
todos os três objetos. E clique em Comando. Clique aqui e, em seguida, clique
em uma linha vertical. Ok, agora a segunda
parte está concluída e agora temos a terceira parte. Para criá-lo,
clicarei no texto ou posso simplesmente copiar
o texto daqui. Vou passar por cima deste texto clicar no texto
e colar aqui. Vamos fazer o
teste High 20 e o tamanho para médio e
reduzir o tamanho da fonte. Vamos fazer com que seja semi placa. Ok, então o texto
será Channel Analytics. Então temos duas caixas, temos texto aqui. Vamos publicar esse texto
clicando e arrastando-o. Ao pressionar e segurar,
o texto será último 28 e o destacará. Diminua o tamanho
da mídia de texto. Ok, e coloque aqui. Em seguida, clique no texto e
torne-o verticalmente um centro de linha. Ok, agora temos duas caixas
para criar um triângulo como este. Vamos fazer o
tamanho de 125 por 60. O texto será. Vamos colocá-lo aqui. O texto será, vou
duplicar esse texto. Vamos fazer com que seja 635
e destacá-lo. Então temos que
aumentar o tamanho, 16. Ok, e pronto, sorria 50. Ok, duplique isso e coloque aqui assim OK. Em seguida, destaque
todas essas seções. E pressione o comando G para agrupá-lo. Em seguida, duplique
pressionando todos os dez, arrastando-os para o lado direito Em seguida, esse teste será
alterado para o tempo de exibição. Ok, se quisermos, podemos
simplesmente adicionar esses símbolos. Podemos clicar na seta
e aumentá-la, depois adicioná-la assim. E podemos ajustar a
seta como quisermos. Faça assim. Aposto que a Dublgatetre pode
fazer isso com fidelidade média, mas baixa fidelidade é suficiente para
ter uma ideia do design Esquecemos de adicionar o logotipo do
avatar aqui. Vou clicar aqui
e mudar a cor e
adicionar o logotipo do avatar. Além disso, podemos adicionar o logotipo do
avatar como este. Basta pressionar a elipse e
criar a parte da cabeça. Em seguida, clique na linha
na linha como essa e altere a cor para essa. Vamos aumentar o
traço, torná-lo central. Em seguida, clique na linha
novamente na mão. Duplique a mão assim Esse é outro tipo de Avada. Ok, agora temos essa última seção de conteúdo
publicado. Vamos clicar aqui e duplicar. Vamos fazer com que sejam 20 conteúdos
publicados. Tudo bem. Em seguida, crie uma caixa. Crie um retângulo como esse. E o tamanho será de 340 por 160. Agora, aqui temos a
miniatura e o URL do vídeo. Então, na hora de
criar o vídeo, mudarei
a cor para essa cor. Vamos mudar a
cor assim. Em seguida, clique aqui e as imagens de
duas linhas são sempre mostradas como a imagem em uma caixa e
a cruz como esta. Então temos o texto. Para criar texto, posso usar linhas. Clique aqui e
aqui está o título. Então eu vou aumentar
o tamanho para E T. Vamos diminuir a
cor para essa cor. Então temos o segundo, o segundo texto será, é menor e
ficará assim. Então temos uma linha como essa. Vou diminuir a
cor para uma cor clara. Ok, agora temos
os ícones pequenos. Vamos adicionar esses ícones. Basta criar a
elipse assim e alterar a cor dos lábios
para essa cor. Está bem? Então temos uma mensagem. Vou duplicar
o texto daqui. Então eu tenho que
movê-lo para a frente
da moldura e serão seis. Então um, vamos fazer dois, vamos fingir. 21, 61, 60. Ok, ótimo. E agora temos
esses outros textos. Então, vamos adicionar esses textos. Então, vou copiar o texto
e colar aqui. Vou adicionar rapidamente esses textos. Agora vou adicionar esses
textos como esses. Ok, vamos centralizá-lo
verticalmente e enfileirar todos esses ícones
e transformá-lo em uma linha, Ok, agora temos a caixa. Vamos criar essa
caixa para curtir isso. Então eu vou obrigar
esse conteúdo. Posso obrigar todo esse
conteúdo e adicioná-lo aqui. Você pode fazer o mesmo ou criá-lo do zero. Vou destacar todos
esses conteúdos e apenas colar aqui, depois fazer com que fique assim. Ok, vamos colocar assim e bom, saiba onde. Ok, bom. Agora temos que adicionar a parte do
botão para fazer isso, vou apenas aumentar um pouco
do design dessa forma. Quando eu o aumento,
basta clicar
no comando, clicar no canto e aumentar a tripulação. Temos alguns links ou
botões para fazer uma elipse. Este é o N. Vamos
mudar a cor para essa cor e duplicar esse texto aqui Em seguida, no painel de texto, vamos destacá-lo e
torná-lo um pouco menor. Faça com que seja do tamanho de nove. Ok, para duplicar o texto, temos que duplicá-lo quatro vezes 1234 temos que duplicá-lo
quatro vezes 1234, ok? E o próximo
será o conteúdo. E o próximo leva o último comentário, não o último. O quarto comentário e o quinto
destacam assim. E também pressiona Command by. Veja isso no componente. Assim, podemos agrupá-lo,
torná-lo central e pressionar Command,
pressionar Command center. Então eu vou fazer isso, sim, vou clicar em todos
esses conteúdos e clicar aqui. E clique em Distribuir, Espaçamento
Horizontal. Vai ficar assim. Aqui está a estrutura de arame final. No próximo vídeo, criaremos isso
para o Instagram.
7. 07 Terceiro wireframe: Ok, agora vamos projetar uma estrutura de arame de
baixa fidelidade para o Instagram Vou adicionar o
modelo do Instagram lá. Em seguida, criarei uma moldura. Vou selecionar a massa de presas, Android Small, e fazer isso Depois vou mudar o
nome para Instagram. Ok, agora vou adicionar
a grade de layout. A grade do layout será colunas e
adicionaremos quatro colunas e,
em seguida, serão dez. E adicionaremos a
margem como dez. Ok, agora vou criar
um triângulo como esse. Isso faz com que seja 50. Em seguida, vou contextualizar rapidamente, posso adicionar o texto. Este texto será, deixe em negrito. Ok, essa parte está pronta. Agora vamos criar
esses três ícones ou esses três botões. Então, podemos simplesmente adicionar folhas
para criar esses ícones. Mudará a cor
para cinza escuro claro. Lubrifique assim. Ok, uma lista desses três
, então traga aqui. Ok, agora temos que criar
esses quatro ícones de arte. Vamos criar o formato do lábio e, em
seguida, criar uma elipse como essa Vamos fazer com que seja 80,80, ok. Então faça isso aqui. Vamos fazer dez, vamos chegar até lá. OK. Em seguida, adicionarei um lábio que represente a cabeça do usuário e
criarei um polígono Vamos fazer assim e mudar a cor. Branco e canto assim. Vamos torná-lo um pouco maior. Eu posso criar outra elipse, um
pouco maior assim Vamos mudar a cor para branco. Há muitas maneiras de isso. Eu posso gostar disso. OK. Então, Dubois, antes de duplicá-lo, vou destacá-lo antes depois dublá-lo assim. OK. Algo errado. Isso é um pouco maior. Vamos torná-lo menor assim, tudo
isso e
alinhá-lo corretamente. Então, vou criar um triângulo e um
triângulo como este. Esses serão os
nomes do nome de usuário do Instagram por aqui. Vou adicionar texto como História,
História, destacá-lo e, em seguida, criá-lo. Normal e transmita o
tamanho do telefone para 14, 14 é melhor. Vamos colocá-lo aqui. Vou colocar esse texto alinhado
com o texto da história. Destaque todos esses textos. E basta clicar aqui
e alinhar corretamente. Ok, então temos que
criar essa parte. Para fazer isso, basta clicar
aqui e clicar em Linha. Em seguida, pressione Shift e
crie uma linha como essa. Essa é a linha que eu criei. Agora temos o
Low e o nome. Vamos clicar em um desses
usuários e pressionar todos os dez. Desenhe assim. Agora vou torná-lo menor. Vamos alinhá-lo aqui. OK. E agora basta duplicar
isso enfrentando todos os dez. Clique com o botão esquerdo do mouse e aqui está o nome
do seguidor do Instagram Então temos a imagem
para criar imagem, ângulo
direto e criar
uma imagem como essa. Vamos fazer com que seja 60. Agora clique na linha e
crie uma linha como esta. Isso é apenas uma baixa fidelidade, podemos fazer
testes de usabilidade com esses Us, só
precisamos converter essas estruturas de
arame Depois de
praticarmos isso, projetaremos
estruturas de arame para nosso próprio aplicativo. Em seguida, vamos
convertê-lo em protótipo. Ok, agora temos 123,44
botões ou ícones aqui. E aqui está um ícone. Clique nesses três
ícones e
duplique-os para este Está bem? OK. Agora está tudo bem. Em seguida, basta obrigar esta linha de
texto e essa será a contagem e essa
será a data Na verdade, se
quisermos, podemos simplesmente adicionar texto, mas por enquanto vou apenas adicionar
essas duas linhas assim. Então, temos isso
abaixo que eu posso definir.
Vamos criá-lo, apenas aumentará o tamanho
da interface. Em seguida, clique aqui, clique em Conectan. Crie um retângulo como esse. E essa parte é fácil. Vamos copiar esses quatro
itens e colocá-los aqui. Em seguida, vou enviá-lo para cima no Instagram
via frame. Agora temos cinco itens. Eu vou obrigar este, depois vou enviá-lo para E também enviarei isso para Corner, selecionarei
todos esses itens e clicarei aqui. Em seguida, clique em Distribuir espaçamento
horizontal. Vai ficar assim. E agora criamos com sucesso
a estrutura de arame do Instagram. Ok, criamos
três estruturas de arame. Agora é sua vez. Basta criá-lo. No próximo vídeo, mostrarei
como criá-lo.
8. 08 4º wireframe: Ok, agora vamos
criar uma estrutura de arame para conexão. Espero que você esteja pronto. Crie a estrutura de arame. Vamos seguir o passo. Vou colocar como aqui. Em seguida, clicarei no quadro e
criarei um quadro pequeno para Android. Ok, vamos torná-lo um pouco
maior para que possamos comparar essas duas
seções assim. Tudo bem, então
vou mudar o nome para link in wire frame. Tudo bem, vamos começar
o design primeiro. Vou clicar aqui
e clicar em Lives. Antes de fazermos isso, temos que
adicionar o layout. Para fazer isso, clico no quadro
e clico no ciclo positivo. Clique aqui e faça com que
a coluna conte até quatro será dez, a margem será dez. Na verdade, podemos
salvar o layout. Se você clicar
nos quatro pontos e
clicar neste ícone de adição, você obterá a grade que
criamos e eu a
nomearei para a grade e clicarei
em Criar estilo Se eu criar uma nova moldura, vamos criar uma nova
moldura para o iPhone 8. E se eu quiser adicionar
o layout da grade, basta clicar aqui e clicar
aqui para adicionar o layout de quatro grades. Figma tem recursos
para salvar grades, pois você pode salvar cores
e outras etapas Agora vamos começar o design. Como primeira etapa, clicarei na elipse
e criarei a elipse É para esse ícone de avatar. Vamos fazer com que seja 40. 40 por 40. E faça 22 por bem. Faça 12 por poço. Ok, vamos fazer com que seja dez por dez. Tudo bem, agora temos que
criar um retângulo. Esse retângulo é
para a barra de pesquisa, então vamos torná-lo do tamanho 30 Vou apenas adicionar o
texto chamado pesquisa. Então, temos esse bate-papo para criar pequenos lábios como
esse e adicioná-los aqui. Ok, a primeira
parte está concluída , então vou criar uma linha aqui. Em seguida, criamos os detalhes do
usuário. Deixa isso para nós
em vamos criá-lo, vamos fazer 50 por 50. Vamos fazer com que seja 70 por 70. Ok. Em seguida, clique em uma linha
e crie uma linha. Esse é o nome. Eu
vou fazer cinco. Vamos fazer com que seja oito. Esse é o nome do
usuário que compartilhou isso primeiro. E temos a ocupação ou cargo do
usuário, faça assim. E vamos fazer isso também, e temos o tempo em que essa
pessoa compartilha a primeira. Vamos fazer com que seja assim. Ok, basta pressionar o controle para agrupá-lo e
vamos fazer com que seja enviado. Ok, agora temos a
descrição desta postagem. Vou clicar aqui
e lubrificar isso. Esta é a descrição do. Vou adicionar mais
detalhes como esse. Então temos essa
grande gordura para criar, criar, criar tão rápido. Assim. Vamos fazer
340 por 340, ok Em seguida, crie uma linha como essa
e crie outra linha. Ok, então temos
a contagem de comandos. Crie lábios menores como esses. Em seguida, a contagem de comandos
aparecerá aqui, 125. Não conta, é conta. Ok. Então temos
uma linha horizontal. Agora temos um botão
e um botão de entrada. Vamos criar o
botão aqui, 30 por 30. Em seguida, o texto foi chamado curtido e dublado
selecionando e copiando Tipo, sim. Ok. Agora temos o fundo. Vamos criar.
Antes de criá-lo, eu apenas diminuo o tamanho. Para fazer isso, selecione a
estrutura de arame e clique em Comando e altere o tamanho
da estrutura de arame O barulho é assim
e crie o menu Então, temos 12345 itens. Vou apenas obrigar uma
delas e colocá-la no centro, mudar a cor para cinza escuro Em seguida, também copiarei o
texto e o enviarei para cima. Em seguida, faça com que o texto fique em casa. Ok, então para obter esse grupo , pressionando o comando, vamos manter o tamanho da
fonte. Está bem? Faça-os centralizar o espaçamento
horizontal distribuído Ok, então aqui está a
estrutura de fio de baixa utilidade para conexão. Na próxima lição, vamos criar
uma estrutura de arame para o aplicativo.
9. 09 introdução ao wireframe do deisng para um aplicativo: Ok, agora é hora de
projetar armações de arame
para nosso próprio aplicativo. Vamos criar um aplicativo de
entrega de comida para um café. Então, para fazer isso, temos que fazer pesquisas com
usuários e
criar personas Histórias de usuários, conduza
pesquisas de usuários e tenha empatia com usuários e concorrentes de auditoria para coletar informações
para criar nosso aplicativo É um processo que
temos que fazer no design de UX. Mas aqui estamos
focados apenas no design de estruturas de arame. Eu já faço a análise da
concorrência. E vamos começar a
construir os carrinhos de arame. Vou entrar na minha conta Ima. Agora vou clicar no botão azul do arquivo de design
e criar um novo projeto. Então vou chamar esse
projeto de aplicativo de entrega de comida. Vamos começar a projetar o fio Pm. Em seguida, converteremos esses carrinhos
de bebê de arame em tipos de fotos. No próximo vídeo, vamos começar o
design do zero.
10. 10 página inicial de design de aplicativo de compilação: Comece com a tela inicial, clicarei no ícone do spray e selecionarei o
Android Large Size. Agora vou mudar esse
texto para a página inicial. Em seguida, adicionarei o Layout Grid. Clique aqui e nossa
grade será uma coluna. Então, teremos quatro colunas, e a sarjeta será dez, margem será OK. Então eu clico aqui para
salvar essa grade, esse estilo. E clique aqui no nome. Vamos lá, ok. Agora vou começar com o menu. Vamos clicar em Triângulo e
teremos um menu de hambúrguer. Faz três, depois Dublicatese. Oi, eu falei deles. E mude a
cor para ficar mais escura. Então eu os agruparei. Agora vou criar um
ícone de usuário aqui para fazer isso. Crie uma elipse. Então vamos criar um avatar,
criar outra elipse. E mude, essa
será a cabeça. Vamos mudar para branco e duplicar isso
pressionando o velho dez, arrastando-o um pouco para baixo e aumentando-o Ok, agora
temos um pouco maior. Agora vou criar
uma barra de pressão aqui, porque precisamos de uma barra de pressão
para pesquisar alimentos no café. Dessa forma,
poderemos encontrar a melhor comida. Então eu vou Radio
Corners, faça cinco, ok? E clique aqui. Em seguida, clique em Elipslipsn. Mude a cor para essa cor. Na verdade, adicione Only Eat Rock, clique aqui e três como
o tamanho do traço leste. Acabei de criar um ícone de pesquisa. Serão os três. Tudo bem, agora
vou destacá-lo. E vamos agrupá-lo. Vou agrupar isso, a primeira parte está concluída. Na próxima parte, criarei
uma seção por categoria. Clique neste texto, clique aqui, e esse
teste será dividido em categorias. Espero que as palavras estejam corretas. E vamos fazer com que ele se solte. Se quiser, você pode
alterar o texto, mas eu vou usar o texto padrão. Isso é muito tarde. Vamos usar o texto padrão. OK. Agora vou criar a
caixa de quatro categorias, criar um retângulo como este Em seguida, clique na
linha Criar imagem. Isso é uma imagem. Vou obrigar este
texto e alterar o tamanho para 11, será médio OK. Faça com que seja o centro. Este texto será especial
diário. Especiais do dia, vou
destacar todo esse barulho. E se tornará um grupo. Então blibli novamente,
Ubd novamente Ubd Em seguida, destacarei
todos eles e farei com que seja uma linha centralizada
verticalmente Ok, é uma mensagem. Estas serão bebidas e
continuarão sendo refeições. Ok, nossas categorias
estão concluídas. Então eu vou ficar aqui
e mudar o espaçamento. Adicione o espaçamento como, em
seguida, adicionarei a seção de
pés sujos. Para fazer isso, obrigue a
parte da categoria e Ok, podemos cancelar esse texto. Na verdade, podemos
simplesmente inserir este texto. Para fazer isso, clique na linha e esse será
o título do T. Então podemos adicionar, pegue este. Agora podemos adicionar o preço. Vou apenas adicionar um dólar a. Então eu tenho que agrupar
esses itens corretamente. Grupo musical oito. OK. Como podemos adicionar avaliações com estrelas, vamos adicionar avaliações com estrelas. Basta criar um, talvez
possamos usar o polígono para
criar um grupo Reduz os sinais no núcleo
do campo para preto. Agora podemos duplicar isso. Agora temos que adicionar os alimentos
recomendados. Basta duplicar este. Ok, podemos duplicar a seção de comida
popular para adicionar. Aqui podemos adicionar mais itens,
mas, por enquanto, vamos
adicionar esses itens. Agora vou clicar
no botão de comando e alterar
o tamanho do quadro. Em seguida, adicionarei o retângulo
e criarei uma espuma aqui. Vou clicar em Retângulo
e criar o botão Início,
colocá-lo no centro da parte superior Vou adicionar o nome do texto do aplicativo. Vou colocar os pés no Smolt 20. Vou colocá-lo no centro. Cada moldura deve ter um nome, porque quando
fazemos esse tipo de foto, precisamos entender a
moldura em que estamos. Acho que isso é maior. Vamos mudar a altura para OK. Parece bom. Vou fazer isso um pouco
menor assim. Agora temos que adicionar aqui. Vou duplicar isso em. Essa é uma lacuna na entrega de alimentos. Precisamos ter um cartão. Vamos criar um carro. Crie um retângulo como esse. Mude para a
cor branca, torne-a central. Clique duas vezes aqui, depois
clique duas vezes aqui. OK. E agora vou clicar em Lives e
adicionar as rodas. Em seguida, podemos adicionar a alça volta dela. Agora, por quê? Bem, agrupe isso,
torne-o central, ok. Podemos mudar a cor
de fundo. Se mudarmos a
cor de fundo para escura dessa forma, podemos ver
claramente os ícones. Ok, agora vamos
para o segundo item. O segundo item
será página de pesquisa, página. Vamos fazer isso.
11. 11 página de pesquisa de design de aplicativo de build: Agora é hora de
criar a página de pesquisa. Então, vamos criar uma moldura. E será o
Android Large Size. Altere o nome do quadro
para Search Foods. Ok, agora vou clicar aqui na grade e colocar o
Slate na grade principal Agora podemos simplesmente copiar seção acima
da página inicial. Vou destacar todos
eles e pressionar todos e apenas duplicar
assim Agora vou mudar
o título para Alimentos. Ok. Então temos que
criar alimentos aqui. Antes de fazer isso,
duplicarei esse texto
e adicionarei o texto como um hambúrguer, tornando-o de tamanho médio E reduza o tamanho do texto para 14. E coloque aqui, ok. É o texto da pesquisa. E agora vou adicionar o resultado do pé. Então, vamos criar um
retângulo como esse. Vamos fazer 100. Ok. Em seguida, distribua o espaçamento
horizontal Agora vou clicar aqui
e clicar na linha. Em seguida, faça uma linha como essa e faça uma linha como essa. Está bem? Em seguida, vou
destacá-los e duplicá-los. Está bem? Agora vou adicionar o título aqui, as classificações e, em seguida, o preço. Vamos clicar nesse. Vamos adicionar o título. Vou mudar e criar
uma linha como essa. Está bem? Aumente o tamanho da linha. Em seguida, mude a
cor para assim e reduza o canto
ou arredonde os cantos. Em seguida, adicionarei a classificação por estrelas. Posso criar uma classificação por estrelas ou simplesmente
duplicá-la na página inicial Vou duplicá-lo
da página inicial e
colocá-lo aqui Em seguida, aumente o tamanho 310. Vamos colocar a taxa aqui. E o título vai ficar aqui. E aumente o tamanho
do título Aqui, podemos adicionar o preço. Basta clicar neste
e adicionar
11,5 dólar . Vamos reduzir o Ok. Coloque assim, torne-o no centro horizontal. Ok, vou apenas remover esses
dois itens e posso agrupar
esse item e , em seguida,
Dubligatedlet's
Agrupá-lo pressionando
Command Ok, então destaque
três desses grupos e clique em Distribuir espaçamento
horizontal Agora vou apenas dublar e
repetir os itens assim. Ok, parece bom que nossa página de
pesquisa esteja concluída. Tudo bem Ok, parece bom. No próximo vídeo,
criaremos a página única
do produto para mostrar o produto
ou mostrar o pé Antes de fazer isso,
vou destacar tudo isso e verificar o tamanho aqui. Aqui vou mudar
o tamanho para 20. Ok.
12. 12 página de alimento de design de aplicativo de criação: A fase de um único pé. Para fazer isso, criarei um quadro criado para
Android em tamanho grande e, em
seguida, adicionarei o
título do quadro como pé único. OK. Agora vou
copiar essa parte da cabeça. Apenas a parte da cabeça,
basta destacá-la. Dez faces, todos os dez
db, na verdade, antes de fazermos isso,
temos que adicionar a grade. Vamos adicionar essa grade. Ok, agora vou adicionar uma imagem de
comida aqui. Será uma galeria. E teremos o título da comida
e teremos classificações. Então teremos o preço. Depois disso,
teremos um botão para adicionar. Teremos um pequeno campo de
texto no qual
podemos selecionar contas de hambúrguer
que queremos adicionar ao carrinho Vamos fazer isso. Teremos
avaliações e descrições. Vamos começar a projetá-lo. Primeiro, vou criar um retângulo. Então, isso será uma imagem. Vamos fazer com que seja 200 como
altura e 340 como largura. Crie a linha. Ok, agora teremos dois botões para que
possamos alterar o slide. Teremos quatro círculos
para mudar a imagem. Vamos criar pequenos círculos. Vamos selecionar essa cor. E serão seis por seis. Está bem? Então obrigue.
Obrigue isso. OK. Agora selecione todos eles e, levantando-os, coloque-os no centro. Ok, agora teremos
dois botões aqui. Vamos criar esses dois botões, depois mudar a cor para
branco e colocá-la aqui. Talvez possamos aumentar o tamanho. Vamos duplicá-lo,
destacá-lo e duplicar a imagem. duplicar a imagem. Em seguida, vamos criar o texto. Adicionamos esse tipo de
texto porque o texto será alterado porque,
quando selecionada a mudança de pé, o título da comida
será alterado. É por isso que
não vamos criar um título
real, como adicionar um nome de
pé real a esse pé. Agora teremos as
prévias e o preço. Podemos pegar
esses dois daqui. Basta selecioná-lo e
obtê-lo aqui. Coloque o preço aqui. Vamos aumentá-lo para 60. Aumente o tamanho da avaliação, 15. Agora teremos um botão. Esse será o botão
Adicionar ao carrinho. Vamos criar um retângulo e
criar o botão assim. Serão 40, vamos medir 130. Ok, agora vou duplicar
esse texto como um carro. Vamos enviar esse texto aqui. E mude
o tamanho para médio e 60
, será 20. Selecione o texto e a moldura e,
em seguida, coloque-os no centro desta forma. Em seguida, clique aqui e
teremos que adicionar a contagem. Esse campo será usado para selecionar a contagem de pés que
queremos adicionar aos cartões. Vamos colocar assim
e duplicar a impressora em uma delas, clique aqui novamente. Temos que chegar à frente. OK. Agora clique aqui e reduza
os cantos em cinco. E faça o mesmo aqui. Ok, a primeira
parte está completa. Destaque isso
e aumente para 15. Ok, agora
teremos a descrição. Então, faremos com que as
avaliações dupliquem esta. Isso será uma descrição, vamos adicionar uma descrição como esta. Vamos duplicar isso. Temos os dois cantos arredondados. Nós só viramos uma esquina, então vamos fazer isso com todos esses textos e
torná-los assim. Ok, nossa descrição
está completa. Se quisermos, podemos simplesmente adicionar
mais itens desnecessários. Agora teremos que
adicionar as visualizações. Clique aqui e
duplique este. Serão avaliações. Ok, vamos adicionar a caixa de revisão. Duplique esta
caixa de avaliação e coloque-a aqui. Traga isso à tona. Agora
teremos que adicionar um título. Vou apenas duplicar esse título. Vamos falar assim
e mudar o tamanho do título. Vamos fazer dez. Essa é a
descrição da avaliação. Vamos diminuir o
tamanho assim. Ok, bom. Em seguida, no ícone em
da avaliação, altere a cor para
criar um usuário como este. Mude a cor para branco. Então esse será o
nome da avaliação. Para esse tipo de aplicativo, precisamos apenas do nome. Vou agrupar esse
centro de ava com o nome, Ok. Em seguida, destacarei isso e pressionarei o comando control
para duplicá-lo Aqui está a análise duplicada. Ok, agora vou clicar
na moldura de um pé e, em
seguida, alterar o tamanho ou alterar a altura
da moldura desta forma. E temos que adicionar
essa parte inferior. Vou apenas destacá-lo e
colocá-lo como se fosse dubrow, temos uma página de um pé No próximo vídeo, entraremos para
criar a página do carrinho.
13. 13 página de carrinho de design de aplicativo de compilação: A página do cartão. Vou clicar em uma moldura e selecionar
Android Large Size. Em seguida, altere o nome da
moldura para cartão. E copie a primeira parte. Ok, é um
layout de grade dois. Tudo bem Agora mude o texto para o meu cartão e, em
seguida, coloque-o no centro. Tudo bem, agora temos que adicionar
a lista de alimentos que selecionamos
ou que o usuário selecionou. Clique aqui, e esta
será a imagem da comida. Vamos fazer um 60 e depois criar uma linha. Agora teremos o
título e as batatas fritas, e teremos uma pilha de texto para alterar a
contagem de itens da comida Vamos criar o título. Agora teremos que adicionar
as batatas fritas. Teremos que adicionar a
pílula de texto à contagem de alimentos. Em seguida, duplique isso. Agora, selecione a contagem de alimentos que um
usuário precisa em mais itens, ele pode fazer isso usando isso na linha horizontal. Agora vou agrupar isso
e vamos ser obrigados. Agora vou adicionar o subtotal
e a contagem total de alimentos. Então, subtotal agora, sim, teremos a comida total Destacaremos todas
essas partes do subtotal e
as removeremos do grupo Agora, aqui teremos o total. Vamos torná-lo ousado. E então teremos
um botão para finalizar a compra. Vamos criar um retângulo
e criar um botão. Confira. Oh, vamos
adicionar, por favor, faça o pedido. Tudo bem, agora vou
adicionar o item do menu. Vamos adicioná-lo aqui. Ok, aqui está nossa página do carrinho.
14. 14 ordem de design de aplicativo de compilação confirma popup: Ok, no último vídeo, temos alguns problemas de alinhamento,
vamos corrigi-los Na página do cartão, essa deve
ser uma margem de cinco. E agora vou destacar todas essas seções e
isso deve ser uma margem. Acho que é dez, é 220. Vamos adicionar a margem
de dez que é dez. Tudo bem, e então, talvez possamos diminuir
o tamanho da moldura, mas é uma aparência, bom. Ok, agora é hora de
criar a página Order Success. Crie uma nova moldura e o nome da moldura
será Order Success. Vamos adicionar o layout da grade. Ok, agora nesta página não
precisamos do botão de cartão,
esse botão de avatar. Só precisamos do botão Voltar. Vamos criar o botão Voltar
como primeira etapa, ok? E mude a cor para isso, e isso será branco. Ok, aqui está o botão Voltar. E agora temos uma mensagem de
sucesso mais antiga. Vamos copiar esse título
e torná-lo um sucesso. Agora vamos criar um
texto, centralizá-lo. Vamos adicionar texto como se você tivesse
feito um pedido com sucesso. Ok, faça disso um centro de linha. Vamos colocar um em 80. Ok. Vou duplicar isso e o ID do pedido. Em seguida, adicione o ID do pedido e
torne-o de tamanho médio 14. Ok. Agora teremos um botão chamado
rastrear o pedido. Vamos verificar os tamanhos dos botões. É 40, vamos fazer 40 e tudo bem, coloque no centro. Tudo bem, vamos mandar
isso para o centro. E agora vou reduzir
o tamanho da moldura. Faça com que seja centralizado assim. Em seguida, podemos adicionar a moldura
ao redor desse conteúdo. Vamos reduzi-lo para 15. Está bem? E isso será
largo. Clique na moldura, na verdade, podemos fazer
essa moldura como um pop-up. Para fazer isso,
ficará melhor, vamos fazer isso. Para fazer isso, clico em Retângulo e crio
uma moldura como essa Em seguida, mude a cor para branco
e envie-a para trás. Em seguida, reduza os cantos. Vamos reduzi-lo, vamos
reduzi-lo para dez. Em seguida, clicarei
nesse quadro de sucesso do pedido e mudarei a cor para
essa cor mais escura E traga esse texto aqui. E selecione o botão Voltar. E o botão Voltar estará aqui, ou podemos adicioná-lo
como um botão de fechar. botão Voltar estará aqui e uma aparência melhor do que
a aparência anterior. No próximo vídeo, criaremos um pop-up para
esse botão Adicionar ao carrinho.
15. 15 design de aplicativo de compilação adicionar ao popup de carrinho: Ok, vamos criar um pop-up de comida
adicionado ao carrinho. Para fazer isso, clicarei
na moldura e ela aparecerá,
então temos que usar um tamanho personalizado. Vou clicar aqui
e aqui está a moldura. Vou renomear esse quadro para, vamos configurá-lo como
adicionado ao pop-up dela Ok, agora vamos mudar para
340 e também será 340. Então, vamos reduzir
os cantos para dez. Ok, então teremos um pé de
texto adicionado aos cartões. Então, vou criar esse
texto e colocá-lo aqui, centralizar corretamente e clicar aqui. Em seguida, vamos adicionar o layout. Ok, então isso
será um pé adicionado ao cartão, vamos fazer 120. Ok. Em seguida, teremos que
adicionar dois botões, um será visualizar o cartão e o próximo será
continuar comprando. Então, vamos criar o carrinho de botões de
visualização do cartão, que será de tamanho médio. Ok, aqui está o botão de
visualização do cartão. E também
teremos, na verdade, dois nos cantos. Em seguida, duplicarei
esse botão e agora teremos o botão
Continuar Compras Ok, então aumente o tamanho
do botão, torne-o central. Ok, aqui está o pop-up. E no protótipo,
adicionaremos isso como
pop-up quando alguém ou quando o usuário clicar no botão Adicionar
ao carrinho Ok, no próximo vídeo, vamos converter
essas
estruturas de arame de baixa fidelidade em protótipo Nos vemos na próxima aula.
16. 16 retoque final de design de aplicativo de compilação antes de converter em protótipo: Ok, vamos fazer o retoque
final antes de convertermos as
molduras de arame em tipos de fotos. Se eu verificar
no modo atual ou na visualização móvel
real
, ficará assim. Temos que aumentar o
tamanho do design. Para fazer isso, basta clicar na moldura e
aumentar o tamanho. Então vou aumentar
a altura para 800. Vamos adicionar esse
menu de rodapé assim. E vamos verificar o design. Ok, parece perfeito. Então eu vou fazer o mesmo,
dois outros desenhos No pé único, eu apenas o adiciono como um pé de busca. Deve ter um único
pé como este, e a janela pop-up está boa Agora temos que provar esses botões porque
vamos usar ou vamos
converter esses botões componentes e
criar o tipo de foto. Vou ver o texto e o comando do
triângulo e do riacho. Faremos isso aqui e faremos
isso com o resto do botão. Ok, também tenho que clicar aqui e clicar no
item desse grupo, e é apenas o item da imagem. Em seguida, crie um grupo
com esses itens, e faremos isso para
esses quatro itens. E vou mostrar por que
faço isso na aula de protótipos, vou repetir o processo Ok, agora estamos prontos. Vamos clicar nesse
item e clicar em Visualizar. Ele será pré-visualizado assim. No próximo vídeo,
criamos o fotótipo.
17. 17 conversão de design de aplicativo de compilação para protótipo parte um: Ok, vamos converter as molduras
de arame em tipo de foto. Para fazer isso, vou até, vou clicar neste menu de
protótipo Então eu vou ver a página inicial. Então, vamos começar do
topo da página inicial. Então, no final da nossa aula, eu lhe darei um
projeto para concluir. Portanto, incluirá a
criação de armações de arame para este menu de hambúrguer
e algumas outras molduras Então, não vou criar um
protótipo para esse menu de
hambúrguer E você fará isso no projeto
da classe. Então, vamos começar pelo ícone
do cartão. Então, esta é a nossa página do cartão. E quando clicarmos
neste cartão Ticon, iremos para a página do carrinho Então, vou selecionar o cartão.
Na verdade, temos que
agrupar esse cartão antes criá-lo em um
componente. Vamos fazer isso. Clique aqui e clique
no item de fundo. Em seguida, pressione o comando
G para agrupá-lo. E faremos isso com o
resto da embalagem. Vamos fazer isso. Ok. Agora clique nesta caixa e eu a
converterei em Componente É muito fácil, basta clicar
no item que você deseja converter e você verá
quatro triângulos aqui. Basta clicar nele. Ao passar o mouse sobre ele, você verá uma
chamada de texto Criar componentes Então, basta clicar nele. Ao clicar nele, você o verá se tornar
um componente e verá uma linha roxa
ao selecioná-lo. Agora vou clicar nele e
temos que apontá-lo para aqui. Para fazer isso, clicarei
no Phototypeow. Sobre o ícone, você
verá este sinal de mais. Basta clicar nele e arrastá-lo e
soltá-lo na moldura do coração. Em seguida, você verá um menu pop-up. No menu pop-up, você pode selecionar a ação
que você vai fazer. Nesse caso, está na torneira. Quando tocarmos no ícone, iremos para a página do cartão. Então, aqui está a seção em
que
podemos definir a ação que vamos fazer. Nesse caso, ele
navegará até a página do cartão. Aqui, podemos
selecionar outras páginas, mas só precisamos
selecioná-las como um cartão. E agora, se eu verificar
a ação, basta clicar na
página inicial e clicar aqui. Em seguida, basta visualizá-lo
e clicar em Página inicial. Agora, se eu clicar neste botão
de cartão, ele será direcionado para a página Meu carrinho. Esse é o básico para
criar protótipos. E a Fema tem o recurso fazer isso sem mexer em nenhum
design E podemos fazer isso com clareza. Agora temos esse avatar ativado. Quando clicarmos
nesse ícone de avatar, ele abrirá minha página de perfil. Essa é outra atividade que você precisa fazer
no projeto da classe. Agora, há
mais três botões de cartão. Agora, existem
algumas maneiras de fazer isso. Podemos simplesmente converter esse botão do cartão manual
e individualmente e vinculá-lo à página do cartão. Mas nós já criamos
esse componente. Se substituirmos o mesmo componente
por outros botões da placa, ficará claro e não teremos muitas
conexões como essa. Deixe-me mostrar o que quero dizer. Vamos converter esses botões
em componentes como este. E agora vamos
direcioná-los manualmente para o cartão. Em seguida, isso também será
direcionado para a página do cartão. Vamos fazer com que seja assim. Agora, se eu clicar na tela, verei três linhas. Essas são as três linhas para as quais
apontamos esses botões, esta página do cartão, mas podemos
duplicar esse único componente E se substituirmos esse primeiro componente do
botão por outro botão do cartão, ele não ficará bagunçado e economizará mais tempo Vamos fazer isso dessa maneira. Eu apenas pressiono control
para desfazer as alterações. Ok, agora eu clico
neste item do carro, certo? Em seguida, clique em Copiar. Então eu clico aqui
e clico com o botão direito. Clique em Pace para substituí-lo. Acabei de substituir nosso componente. Agora, se eu clicar aqui, vou ver essa conexão. E se eu clicar aqui, vou ver essa conexão. Vamos fazer isso com o
resto do botão Difícil. Agora, essa é a maneira de criar protótipos
com facilidade. Ok, na próxima etapa, vamos adicionar uma ação a
esse ícone de pesquisa. Se alguém digitar aqui
e pesquisar algo, ele irá para a página de pesquisa. Ele receberá o resultado da pesquisa. Para fazer isso, podemos
clicar aqui e
clicar em Componente e
convertê-lo em Componente. Em seguida, clique nesse ícone de adição e navegue até
a página de pesquisa. Não precisamos
fazer nenhuma ação
nessa barra de pesquisa porque ela
já está na página de pesquisa. Agora temos essas categorias. Nesse caso, não criamos um protótipo para categorias Vamos recriar essas categorias nesta página
de rodapé de pesquisa. Para fazer isso, vou clicar
duas vezes aqui. Você se lembra
que eu crio grupos para essas imagens da categoria? Agora selecione esse grupo e
clique em Criar componentes. E se quiser,
você pode simplesmente renomear o texto como imagem da categoria Mas eu não faço isso
porque este é um conjunto simples de estrutura de arame. Existem apenas algumas estruturas de arame, mas em um grande projeto, definitivamente
precisamos
renomear essas categorias E eu faço isso para economizar
tempo, mas se você quiser, você pode simplesmente renomear essas
camadas nesta seção Agora, quando clicarmos
nessas categorias, nos relacionaremos com
essa página de rodapé de pesquisa porque não
criamos uma página diferente, quatro categorias, categorias de
alimentos. Agora, como fiz antes, posso simplesmente copiar essa
imagem da categoria e clicar aqui. Em seguida, clique em Ritmo para substituir. E clique duas vezes aqui
para selecionar a categoria e clique em Pace para substituí-la. Faça o mesmo aqui, ok, bom. Agora, se verificarmos o processo, se clicarmos nele,
leremos a página de pesquisa. Se clicarmos na barra de pesquisa, leremos a pesquisa. Ok, agora é hora
de adicionar a ação. Quando alguém
clicar nesses alimentos, clique aqui e
converta-os em componentes como este. E clique no ícone de adição. Quando alguém toca nele, clique nesse alimento, essa pessoa o fará,
na página de um pé. Ok, agora vou clicar com
o botão direito do mouse e copiar. Em seguida, clique com o botão direito
em Ritmo para substituir. Porque todos esses alimentos
populares são iguais nesta estrutura de arame. Se adicionarmos ações individuais como vamos adicionar ações a isso, haverá
muitas conexões. Mas se substituirmos o componente, haverá
poucas conexões e
será muito fácil de gerenciar. Ok, agora vou fazer o mesmo, basta clicar em Copiar e
clicar em Colocar para substituir. Ok, agora nossa
página inicial está concluída. E agora vou fazer a mesma coisa com o pé
na página inicial de busca, porque todos são iguais. Basta clicar em um dos alimentos
e convertê-lo em componente. Em seguida, passe por cima e você verá
esse tipo de
botão de adição e o arrastará até
a estrutura de um único pé. Ok, agora copie e substitua
pelo resto dos alimentos. Tudo bem, na segunda lição adicionaremos ação a
isso no botão de duas cartas. Se verificarmos o processo atual, irei para a página inicial. E vamos ao protótipo. E vamos voltar
para a página inicial. E se eu pesquisar alguma comida, vou para a página
Pesquisar comida. E se eu clicar em A, ele
irá para o Single Foods. Se eu clicar no botão do cartão, ele será direcionado para o meu cartão. Continuaremos
construindo o protótipo.
18. 18 conversão de design de aplicativo de compilação para protótipo parte dois: Agora vou adicionar uma ação a
isso no botão de dois cartões, clicar no botão Para cartão e clicar em Criar componente. Então, quando
clicarmos no botão de duas cartas, ele abrirá isso
quando aparecerem duas cartas. Quando clicamos nele, ele dirá pé adicionado ao cartão. Vamos clicar aqui e enviá-lo
para a moldura pop-up do cartão A. Agora vou mudar
esses parâmetros. O primeiro será
navegar até o pop-up de um carro. Este é um pop-up, ele não navegará no quadro, apenas
abrirá a sobreposição Esse pop-up de cartão impresso será uma sobreposição da estrutura de um
único pé Clique em Abrir sobreposição e aqui selecionamos o quadro
que queremos sobrepor E faremos o
efeito o mais rápido possível. Agora, na configuração de sobreposição, clicarei aqui
e clicarei em Manual Em seguida, ajustarei a
posição dessa sobreposição. Vamos nos ajustar ao centro, assim, ok? Em seguida, clicarei
em um plano de fundo. Em seguida, clique aqui. E no fundo, quando essa janela pop-up for aberta, resto da página
será de cor preta clara. Agora dissemos que se eu verificasse, clique em Página única. Vamos clicar no modo de visualização. E se eu clicar em um cartão, ele aparecerá como uma
sobreposição. Vamos continuar. Se eu quiser editar isso, basta clicar aqui. Vamos fechar clicando lá fora. Se eu provar, clique
nele Rumo. Se eu clicar na parte externa
do pop-up, ele mostrará a página
de um pé ou mostrará a página atual. Mas, neste caso, não
vou adicioná-lo. Agora temos dois botões. Basta clicar no botão e
convertê-lo em Componente. E aparecerá
nesta página do meu cartão. Clique aqui e leia
na página
do meu cartão clique em Continuar comprando e converta em componente. Vamos enviar isso para
a página de rodapé de busca. Quando alguém clica em
Continuar comprando, ele lê a página de
rodapé de pesquisa. Ok, agora temos que
agir na página do meu cartão. Então, vamos adicionar uma ação a
esse botão Fazer pedido. Basta clicar nele e
clicar em Componente. Então, quando alguém clicar
neste botão Fazer pedido, ele lerá o Quadro de Sucesso do
Pedido. Ok, agora espero que você
entenda o processo. E esta é a maneira de converter a estrutura de
arame em protótipo. E agora vou converter esse
botão em um componente. Esse é o botão home. Em seguida, conecte-o
à página inicial. Quando alguém clicar nele, ele lerá a página inicial. Vou copiá-lo e substituí-lo pelo
resto do botão. Agora, vamos substituir esse também. Esqueci de adicionar o botão Voltar. Vamos adicioná-lo rapidamente. Vamos adicionar o botão Voltar aqui. Vamos criar uma elipse simples. E crie a
elipse assim, mude a cor para essa e clique em Retângulo E crie o pequeno retângulo. Ok, agora vamos agrupá-lo
e clicar em Componente, e ele se tornará um componente. Agora vou clicar em Tipo de foto e clicar no
ícone de adição no componente. Quando eu arrasto a conexão do
componente, você verá o botão
Voltar aberto. Isso significa que se alguém
clicar nesse botão Voltar, ele reagirá à página
anterior que você abrir. Vamos dar uma olhada na ação. Escolha na parte de trás,
duplicará esse design. Duplicado assim Ok. Agora vamos verificar
a ação real. Vamos abrir isso. Agora estou na página inicial. Eu clico na página de pesquisa. Agora, se eu clicar
nesse botão Voltar, irei para a página inicial porque estava na página inicial. Essa é a maneira de
usar o botão Voltar. O botão Voltar não está alinhado. Vamos alinhá-lo corretamente. Na verdade, vamos
colocá-lo no centro aqui. Tudo bem, agora
temos o protótipo.
19. 19 protótipo de teste de design de aplicativo de build: Agora temos um protótipo de
wireframe de baixa fidelidade. Então, vamos testá-lo. Antes de testá-lo, removerei uma
parte do fluxo porque não precisamos dela. Tudo bem,
vamos testá-lo. Eu vou para o modo atual e
agora estamos na página inicial. Imagine que eu sou um usuário que
usa isso para encontrar comida. Vou digitar comida aqui e
clicar no botão de pesquisa. E eu vou para a
página de pesquisa e eu sou hambúrguer. Então eu clico em
um dos hambúrgueres. Aqui eu posso ver
todos os detalhes do hambúrguer e temos
a descrição do slider de
imagens
e avaliações Depois, posso adicionar hambúrgueres
que quero comprar. Depois, posso clicar em Adicionar ao carrinho. Quando adiciono ao carrinho, posso ver o cartão
ou continuar comprando. Vou clicar em
Continuar comprando, e aqui posso pesquisar novamente alimentos que eu gosto e
adicioná-los ao carrinho. Vamos ver o cartão. Basta clicar no cartão. Aqui está meu cartão. Aqui posso verificar o subtotal e a comida que comprei Eu posso contar a comida
que eu quero comprar. Em seguida, posso clicar em Fazer o
pedido e obterei esse quadro de sucesso do
pedido. Aqui, posso clicar em Rastrear pedido e
rastrear o pedido. Eu não o concluí porque você o fará
na seção de projetos. Este é o processo do
nosso conjunto de estruturas de arame
e espero que você tenha uma ideia clara sobre o design estrutura de arame
elevada e a
converta em protótipo
20. Projeto de 20 cursos: Ok, aqui está o projeto. Portanto, você precisa continuar
esse conjunto
de estruturas de arame adicionar mais três estruturas e compartilhá-las com os
colegas designers. Para fazer isso, darei um link para esse protótipo para que você
possa duplicá-lo Então, como primeira etapa, você precisa criar
um menu de hambúrguer Para fazer isso, você pode pesquisar no
Google como menu de hambúrguer no aplicativo e verá diferentes
tipos de menu de hambúrguer Especialmente quando você cria
esse menu de hambúrguer, ele deve ser um
pop-up como este Então, por exemplo,
se eu criar um novo quadro Android, o tamanho do menu de hambúrguer deve ser metade desse quadro E quando você clicar no ícone
do hambúrguer, aparecerá e o
resto da página
ficará ele aparecerá e o
resto da página
ficará escuro, como fizemos
no botão Adicionar ao carrinho Pop up stride. Basta administrar o single food. E se eu clicar no cartão At To, esse é o pop-up e o
resto das páginas fica mais escuro Então, depois de fazer isso, você
criará um quadro para edição. Esse avatar, será um
quadro chamado Meu perfil. Então você criará uma
página para rastrear seus pedidos. Portanto, será rastreado o quadro de pedidos. Portanto, não fizemos nenhuma
pesquisa de UX para criar este aplicativo, então sugiro que você acesse o Google ou um lugar como o Ble para
encontrar inspiração de design. Por exemplo, se eu for para o rival, vamos pesquisar a página de rastreamento de pedidos, obteremos esse tipo
de página de rastreamento de pedidos. Então, se formos aqui, esta será uma ótima página de pedidos de
rastreamento, para que possamos usá-la também. Você pode fazer sua pesquisa e
encontrar esse tipo de moldura. Então você pode redesenhá-lo. Ou você pode criar a estrutura de arame dessa página para a página de perfil. Você pode fazer o mesmo assim, fazer a pesquisa e
criar essas três páginas. Depois de criá-lo, clique no botão azul
Compartilhar e
defina-o como qualquer pessoa com
o link pode ver. Em seguida, clique neste link de cópia e compartilhe-o com
outros designers dos EUA. Boa sorte e obrigado por
ficar comigo e espero que você obtenha detalhes valiosos sobre como criar
fototipos Se você tiver alguma dúvida, basta me perguntar e eu estou
disposto a ajudá-lo. Te vejo em
outro momento. Obrigada.
Akalanka Karunarathna, UI/UX Designer & Content Creator
