Introdução ao design de aplicativos: crie um protótipo móvel em uma tarde usando Marvel | Jaclyn Lenee | Skillshare

Velocidade de reprodução


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Introdução ao design de aplicativos: crie um protótipo móvel em uma tarde usando Marvel

teacher avatar Jaclyn Lenee, UI/UX | App Design | Productivity

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

    • 1.

      Introdução

      1:48

    • 2.

      Por que protótipo

      1:44

    • 3.

      Identificar os problemas para resolver

      2:06

    • 4.

      Pesquisa de padrões

      5:26

    • 5.

      Esboço

      2:14

    • 6.

      Configure seu projeto na Marvel

      2:41

    • 7.

      Design de telas com Marvel

      13:02

    • 8.

      Como criar seu protótipo

      5:12

    • 9.

      Testando seu protótipo

      3:43

    • 10.

      Finale

      1:09

  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

271

Estudantes

--

Projeto

Sobre este curso

Este curso é para qualquer pessoa curial em campo do design UI/UX e para empreendedores que querem criar seus próprios aplicativos.

Vamos pesquisar padrões de design de esboços, ideias de esboço e criar um protótipo de aplicativos interativo para testar nossos conceitos.

Não é necessário experiência em seguir . Vamos usar ferramentas gratuitos que significa que você não vai precisar se investir em nenhum software especial.

Ao final do curso, você vai criar um protótipo de celular de tomada que você pode testar com um amigo ou cliente. Você vai estar equipado com um processo repetível e as ferramentas que você precisa para começar a criar aplicativos.

Conheça seu professor

Teacher Profile Image

Jaclyn Lenee

UI/UX | App Design | Productivity

Professor

Hello, I'm Jaclyn. I help early-stage startups build strong brands and delightful digital products.

 

Visualizar o perfil completo

Habilidades relacionadas

Design Design de UI/UX Prototipagem
Level: Beginner

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui aulas curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Introdução: Olá, amigos. Meu nome é Jacqueline, e trabalho como designer freelance, mesmo na indústria. Cerca de 10 anos eu comecei com design gráfico criando baixo aqueles e sites para pequenas empresas. E agora eu trabalho principalmente com starups iniciais, ajudando-os a criar sites responsivos e aplicativos móveis. Nesta aula, você aprenderá como criar seu primeiro protótipo de aplicativo móvel. Esta classe é para quem está curioso sobre trabalhar no campo da experiência do usuário ou interface de usuário design artistas visuais que estão olhando para expandir seu conjunto de habilidades comercializáveis ou empreendedores que desejam criar um aplicativo próprio. Esta vai ser uma prática prática de mãos na aula. Vamos fazer alguns esboços. Vamos fazer um pouco de design e uma ferramenta web, e eles iriam colocar tudo em um protótipo de ervas que contestamos com nossos amigos ou potenciais clientes. Você não precisa ter nenhuma experiência de design anterior para acompanhar, e estaremos usando uma ferramenta gratuita de tanto para o projeto quanto para prototipagem, que significa que você não precisará investir em nenhum equipamento especial ou software de design pago para esta aula e eu realmente espero equipá-lo com um processo repetível e a ferramenta que você precisa para desenvolver ainda mais o seu conceito de APP móvel. 2. Por que protótipo: como designer de aplicativos profissional, considero a prototipagem uma parte necessária do meu processo. A prototipagem permite que eu e meus colegas de equipe experimentemos ideias e testemos com clientes reais antes de passar qualquer tempo codificando. Isso é importante porque economiza muito tempo e dinheiro. A pior coisa que pode acontecer ao criar um APP é passar meses construindo-o no Lee para descobrir que ele não resolve as necessidades dos seus clientes. Depois de iniciar como proprietário de uma empresa, você pode usar protótipos clicáveis ou derrubáveis para testar ideias com seus clientes. Você pode até mostrar um protótipo a um investidor enquanto está tentando arrecadar uma rodada de financiamento. Os protótipos também podem ser usados como uma ferramenta de recrutamento para vender a visão do seu produto antes de partir. Até construiu uma equipe de protótipos clicáveis. Ajude-me a refinar meus projetos. Ajude-me a testar conceitos para garantir que estou resolvendo um problema real. E eventualmente, uma vez que estamos prontos para começar a construir, eu uso protótipos como uma ferramenta para me ajudar a me comunicar com os engenheiros de software que estarão construindo o aplicativo. É por isso que acredito que aprender a protótipo é uma habilidade essencial para quem quer trabalhar no design de APP. 3. Identificar os problemas para resolver: Primeiro, precisamos entender para quem estamos projetando e quais são suas necessidades. Quando estou trabalhando em um projeto com um cliente, eu costumo fazer uma equipe de tags com um gerente de produto. Vamos executar entrevistas de usuários e fazer perguntas abertas para entender melhor os problemas que eles estão enfrentando. Isso nos dá uma idéia clara dos pontos problemáticos que precisamos resolver com nossa aplicação para um projeto de classe. Vou manter isso simples. Vamos concentrar-nos nas necessidades de um amante do café. Você pode realmente especificamente estará projetando este aplicativo para um café popular Problema de negócios é, eles muitas vezes têm uma linha para fora da porta, que está afastando os clientes e limitando as vendas. Claro, o objetivo dos amantes do café é entrar, pegar seu café e sair o mais rápido possível. Então eles esperam construir um aplicativo que permita que seus amantes de café ocupados peçam sua bebida antes do tempo e paguem para que eles possam pular a linha e ir direto para a contagem de pick-up. Então, tome alguns minutos para refletir sobre os problemas que precisarão ser resolvidos com seu aplicativo. Anotá-los em um post-lo e mantê-lo visível ao longo de cada etapa deste processo. Isso nos ajudará a manter o foco na resolução dos problemas dos usuários que nos ajudarão a alcançar o ouro do nosso negócio. 4. Pesquisa de padrões: Então, agora é hora de reunir inspiração para nossas telas de aplicativos móveis. Alguns dos meus recursos favoritos é para fazer isso são padrões ponto com padrões sem nenhuma maneira, um, este site é a coleção curada de screenshots de muitos tipos diferentes de APS. O que eu amo sobre padrões é que eu posso procurar por uma categoria específica de um padrão de interação ou um tipo de recurso e ver o que outro ar APS fazendo, Veja quais são as semelhanças entre eles e reunir idéias para como podemos realizar coisas semelhantes e são, uh, o segundo recurso que eu virei Teoh como eu estou reunindo inspiração para um novo aplicativo móvel. Design são as diretrizes da interface IOS. Assim, a Apple reuniu uma biblioteca inteira de recursos é para pessoas que estão projetando e desenvolvendo APS. Eles projetaram especificamente essas diretrizes para a abside que aparecerá na APP Store bem como o APS que a Apple cria por conta própria. Então, se você está projetando para IOS, se você sabe que está projetando para IOS, eu recomendo que você se familiarize com essas diretrizes de interface humana e realmente usá-las como uma referência à medida que você sai. Então alguns exemplos disso seriam, você sabe, eles têm muitos grandes princípios para como trabalhar com cores. Há recomendações para a resolução das imagens que você usa em seu aplicativo . Há sugestões de como projetar seu ícone APP, Então eu certamente não recomendo ler cada uma dessas diretrizes tudo em uma sessão. Há muito para digerir, mas saiba que este é um recurso incrível para você enquanto você está projetando seus protótipos . Então, o terceiro recurso que eu recomendo quatro novos designers são as diretrizes de design de materiais do Google . Isso é essencialmente o mesmo que as diretrizes de interface humana da Apple, exceto que é para Android. Pessoalmente, Quando eu estou projetando para Android, Eu estou constantemente referindo as diretrizes. Há muitas recomendações específicas para, digamos, dimensionamento de ícones, espaçamento de elementos no layout, mesmo trabalhando com cores. Um recurso muito rico para um designer que está descobrindo as melhores práticas para projetar para uma plataforma específica. Um recurso muito rico para um designer que está descobrindo as melhores práticas para O quarto recurso que eu recomendo para novos designers de interface é você x ponto bolsa de valores ponto com. Isso é como um fórum quatro Experiência do usuário Designers Teoh fazer perguntas e obter feedback de outros designers da indústria. Então, a maneira que eu uso isso é quando eu estou trabalhando em um tipo específico de interação ou recurso , e eu não tenho exatamente certeza qual é a melhor maneira de fazer o projeto. Um exemplo é projetar para telas de ar, como recentemente com um de meus clientes que estavam projetando tela de ar quando a Internet sai como Como isso parece? Quando é que ele aparece? Tínhamos todas essas perguntas, então o primeiro lugar que eu fui foi aqui você ex-bolsa de valores apenas digitou, você sabe, ar rastreado. Isso são práticas. Há um monte de recursos aqui relacionados com a tela de ar. Alguns deles ficam realmente granulares e detalhados para nossos propósitos. Nós estávamos realmente procurando quais são algumas das melhores práticas aqui, como você pode ver a pergunta original, você sabe, onde o ar aparece no contexto de um formulário? E há um monte de pessoas que meio que se intrometeram sobre o que eles viram funcionar bem nos aplicativos que eles projetaram. Às vezes, você verá pessoas com experiência profissional de usuário. Pesquisadores compartilham resultados de um estudo de pesquisa sobre esse tema específico. Então, se você é alguém que é novo para design de interação, eu recomendo livro marcando este ux dot bolsa de valores ponto com e usá-lo como uma referência antes de você tipo de mergulhar em qualquer design específico. 5. Esboço: Então, agora que fizemos um pouco de pesquisa, você pode ter algumas ideias sobre como estruturar seu aplicativo. Mas antes de mergulhar na ferramenta de design, vamos fazer uma rodada de esboços para colocar essas ideias no papel. Às vezes imaginamos que estão prontos para ser bem simples. Sabe, na nossa imaginação, pensamos, Oh, Oh, eu só preciso de algumas telas para ajudar meu usuário a atingir seu objetivo. Mas uma vez que entramos na fase de esboço, começamos a perceber que pode haver certas áreas ou elementos que são cruciais. Mas precisamos do endereço do Teoh. Quero que pensem no cenário dos usuários. Onde está essa pessoa que está usando seu aplicativo? Estão no carro ou no trabalho? Estão no parque? Eles estão em um celular? Estão num iPad? Tente colocar-se na pele da pessoa que está usando seu aplicativo, e é uma idéia muito boa. Teoh, observe as perguntas que eles podem ter ao interagir com cada tela do seu aplicativo. Isso pode ajudá-lo a se concentrar na solução para o objetivo do usuário, vez de se concentrar nas especificidades de como no elemento ou um botão vai olhar. Então, nesta fase, estamos apenas tentando colocar no papel os elementos necessários para o seu protótipo inicial. Não se preocupe com isso ser perfeito. Esta não é uma competição de desenho, e a solução acabará inevitavelmente diferente em algumas gerações . Então pegue um pedaço de papel e uma caneta, coloque alguma música que você gosta e gastou cerca de 5 a 10 minutos apenas desenhando através das telas que você acha que são necessárias para a primeira versão do seu protótipo. 6. Configure seu projeto na Marvel: Então agora vamos apresentar o Marvel App, que é uma ferramenta de design tudo em um que permite projetar telas e protótipos tudo sem ter que pagar por nenhum software. Eu recomendo essa ferramenta para qualquer um que seja novo no design do APP porque literalmente não há nenhum investimento além de se inscrever para uma conta. Então, a maneira que eu cheguei aqui é que eu fui para o meu navegador da Web e eu digitei em Marvel app dot com. Agora que estamos no painel da Marvel, vejo que posso criar espaço para o projeto dos EUA. Então vou fazer isso agora. E eu vou selecionar o iPhone 8 porque eu sei que é um dispositivo muito comum. Dependendo da sua base de usuários, o dispositivo para o qual você deseja criar pode mudar. Não, podemos ver que tenho duas opções que posso projetar do zero ou carregar do meu computador. Marvel é comumente usado como uma ferramenta de prototipagem apenas, pelo menos na comunidade profissional de design. Isso ocorre porque existem outras ferramentas de design que são construídas especificamente para tornar design de telas realmente rápido e ineficiente. Sketch é uma ferramenta muito popular. É um dos meus favoritos, um que eu uso no meu dia a dia de trabalho, mas custa dinheiro, e leva algum tempo para aprender. Então, para esta aula, vamos apenas usar as ferramentas de design Big 10 na Marvel. Então nós vamos criar que você projetou do zero para que você possa ver minha tela. Aqui está a tela imobiliária que temos que trabalhar para o nosso iPhone oito. E eles mencionarão que pessoalmente, eu não acredito que seja necessário ter designs separados para cada resolução de tela ou cada dispositivo. Eu tento escolher uma resolução de tela que está no meio, como se não fosse o maior telefone. Não é o menor telefone, mas é meio que o meio da estrada. E isso nos ajudará a projetar no layout que pode ser como esmagado um pouco se necessário, e também esticado um pouco, se necessário. Começamos a implementá-lo em código. É aí que podemos começar a ajustar os tamanhos de texto ou o layout de cada dispositivo individual apenas eles de lado. Mas algo Teoh não 7. Design de telas com Marvel: Então agora eu vou dar-lhe uma introdução às ferramentas de design que estão disponíveis para nós em Marvel up. Então, no lado esquerdo, vejo este retângulo verde. Posso redimensioná-lo. Mude a forma que você pode mudar a cor, dê um plug em um código de cor hexadecimal personalizado. Digamos que se você estiver trabalhando dentro de uma marca existente que tem uma diretriz de marca com cores nele, você pode simplesmente pegar o código hexadecimal de seu pop. Aqui é que o seu protótipo combina com a sua marca desde o início também pode alterar o raio da borda deste retângulo. Então, se eu quiser criar um botão arredondado, é realmente fácil para mim modificá-lo com a barra aqui para torná-lo em uma forma de pílula. Se eu for o maior raio possível, posso girá-lo. Eu posso alterar o tamanho manualmente se eu souber os pixels exatos que eu quero este objeto. Mas nesta fase, estamos realmente apenas tentando obter o layout básico na tela para que possamos testá-lo. Então, eu não estou muito preocupado com as coisas serem perfeitas ou sendo as proporções exatas, porque essas eram coisas que inevitavelmente vão evoluir à medida que aprendemos mais em nossos testes. A próxima ferramenta que está disponível para nós é o Ellipse. Seu círculo círculo pode ser usado como um espaço reservado para um avatar dizer em seu aplicativo. Você tem usuários que estão escrevendo comentários para o seu latte. Você poderia usar um círculo como um pequeno espaço de avatar lá. Circle também pode ser usado no lugar de uma Nikon se você eu não tenho tempo para ligar ícones realistas. Mas eu dio recomendo que você pelo menos coloque um ícone de espaço reservado porque em nossa rodada de testes, estamos tentando testar o conceito. E se estiver cheio de conteúdo de espaço reservado, isso realmente não significa nada para o usuário. Você não vai obter dados de boa qualidade do teste. Quanto mais real você puder torná-lo, melhores serão seus resultados. Vai fazer um pequeno item de menu para o meu aplicativo de café. Usando a ferramenta de retângulo eu estou usando tons de cinza realmente comum em protótipos iniciais fora é para você tons de cinza apenas para que você não vai obter feedback sobre as cores nesta fase . Não é a coisa mais importante agora. O que é mais importante é a hierarquia visual e o layout dos elementos na tela . Então eu vou continuar. A cor é bastante moderada e simples. Um atalho para saber é a opção, arrastar ou tudo para arrastar. Se você estiver no PC, clique e arraste para copiar os itens que você selecionou, o que é um atalho útil. Se você diz, criar uma grade como eu sou agora poderia até pegar quatro desses e opção clicar e arrastar para completar a grade na minha home page que eu venci todos esses caras agora apenas seis deles. Então, se isso vai ser um botão vai precisar de algum texto. Precisará de um apelo à ação. Eu só estou usando a ferramenta de texto, e eu posso levar o que eu quiser adicionar ao meu pedido. Perto o suficiente por enquanto. Como você pode ver, eu posso mudar a cor do texto. Posso mudar a luta. Há um monte de fontes que estão aqui para você alternar entre. Você pode até adicionar um pensamento personalizado se estiver trabalhando com uma marca existente que usa a mesma fonte em todos os lugares. Você pode enviar isso aqui. Você também pode ir para fontes do Google, Fahnestock, google dot com para escolher algo que é extra especial. Se você não gosta dos que já estão aqui, eu estou bem com Lata, que são os padrões. Então, vou ficar com isso. Posso mudar o estilo ou a espessura ou esperar. Uh, isso é conhecido como peso lutado quando você está projetando para a Web e quando você está olhando ele no código CSS, geralmente há várias esperas em um único lutado regular é a fonte padrão base em 99% dos casos e a maioria dos fundos também tem um estilo negrito, modo que, se você quiser enfatizar um pouco de textual, use negrito e algumas fontes têm muitos pesos diferentes para escolher. Aqui podemos ver que eu tenho fino, leve, regular, ousado e preto. A Alemanha é ousada para o meu apelo à ação porque eu realmente queria me destacar. Falah. Há um botão. Então, o que vem a seguir? O que mais posso desenhar nesta ferramenta? Bem, esta linha rosa é exatamente o que parece. É uma linha que eu posso deixar secar de qualquer maneira, mas você provavelmente vai querer cair na rua vertical ou horizontal direção. Portanto, uma dica útil para saber é manter pressionada a tecla shift. Se você segurar a tecla shift enquanto arrasta esta linha, ela desenhará em uma direção perfeitamente horizontal ou vertical. Vamos manter nossas linhas bem necessitadas. Enquanto estamos criando este protótipo, vou usar a ferramenta de texto novamente para adicionar rótulos para cada um dos meus produtos no menu. E então eu vou usar a opção clique e arraste para copiar o rótulo para o nome do produto. E se eu mudar e clicar nesses itens, posso adicioná-los todos à minha seleção. Então agora todos os quatro itens, ambos os meus bits de texto e minhas linhas estão selecionados, e eu posso clicar opção clique arrastar para copiá-los. E esses atalhos funcionam em todas as principais ferramentas de design, incluindo o Adobe Tools e o Sketch. Por isso, a mudança de aprendizagem uma opção irá ajudá-lo sempre que você estiver projetando telas no futuro. Claro, nem todos os meus itens são nomeados muito, então eu vou apenas ir em frente, clique duas vezes e alterar outras ferramentas que estão disponíveis para nós no aplicativo mármore. Existe uma ferramenta útil para inserir fotos de estoque através de cinzas unspool e outra ferramenta para inserir ícones. Ambas as ferramentas são ótimas para exibir conteúdo de espaço reservado e realmente acelerar o processo de prototipagem para este estágio inicial. Você também pode fazer upload de imagens do seu computador se você tiver imagens de produtos ou se encontrar algo que você gosta em outro lugar. Uma barra é um dos meus recursos favoritos é para imagens para meus projetos de aplicativos. O que é especial sobre as cinzas unspool é que todas as imagens são totalmente gratuitas para uso tanto para projetos pessoais quanto comerciais, que você possa construir seu design APP usando imagens Onley de cinzas unspool, e você não teria que pagar um centavo por um Fotografia de estoque. Eu recomendo que se você está criando um aplicativo que vai acabar na loja APP, vale a pena investir o tempo e o dinheiro em qualquer fotografia personalizada para o seu aplicativo ou fotos stock realmente agradáveis que eu vou tipo de trabalhar juntos coesamente, mas uma vez flashes de é um recurso realmente doce. Adoro percorrer as imagens por aqui. Eles são lindamente curados, lindamente editados, e eles realmente não se parecem com fotografia de estoque, e você pode procurar por praticamente qualquer coisa e encontrar uma bela foto para usar em seu protótipo. Outro recurso que eu amo é o substantivo projeto dot com. Você pode procurar por praticamente qualquer coisa e encontrar um ícone. O que é legal sobre o projeto substantivo é que todos esses ícones são gratuitos para usar com atribuição, que significa que se você adicionar uma pequena linha dizendo que esta foto é de John Smith, então você pode usar esse Icahn gratuitamente em sua aplicação. Mas é um pouco estranho se você está lançando na loja APP para ter todas essas pequenas marcas de atribuição em todo o seu aplicativo. Então você pode ir em frente e comprar o ícone apenas um dólar 99 para cada um. Então o que eu costumo fazer é encontrar um ícone que eu amo em um não-projeto. Vou usá-lo no meu protótipo, mas não vou comprá-lo até ter certeza de que vamos usá-lo ao vivo. Então isso faz uma pequena nota para mim que uma vez que entrarmos ao vivo, eu vou entrar aqui. Eu gasto o $2 para que eu tenha a licença para usá-lo Marvel Up também fornece alguns modelos úteis . Quatro elementos comuns que você pode usar no protótipo da Europa. Aqui você pode ver que eles têm um botão pré feito para você. Os cantos arredondados têm o texto no meio. Você pode modificar a cor e o tipo. Eu raramente usei esses elementos, embora alguns pudessem ser úteis. Como esse medo do teclado, marcando como é interagir com o formulário. Você teria isso na parte inferior para simular o teclado está funcionando. Foi literalmente uma mensagem de diálogo no IOS. Essa caixa de diálogo geralmente aparece para pedir permissões ou para confirmar que você deseja excluir um item, coisas assim. Então, navegue por esses itens de ID de modelo que podem economizar algum tempo projetando nesta ferramenta, especialmente nesta fase inicial, onde a aparência exata da coisa não é tão importante. Então, agora que você sabe o básico da ferramenta de design, vá em frente e simule as telas do curso do seu aplicativo. Assim que tivermos as telas básicas feitas, então vamos voltar e conectá-las para criar seu primeiro problema. Não se preocupe com essas telas parecendo perfeitas ou com aparência polida. O objetivo aqui é obter o layout e as principais interações simuladas para que possamos fazer nossa primeira rodada de testes. 8. Como criar seu protótipo: Então agora vamos ligar nossas telas para criar um protótipo tributável. Esta é a minha parte favorita do processo, porque uma vez que tenhamos feito isso será capaz de interagir com o nosso design em um telefone e começar a ter uma noção de se ou designers trabalhando ou não. Então aqui estou eu e maravilhe-me e posso ver todas as telas que eu desenhei. Até agora, eu me concentrei nas telas principais que são necessárias para ajudar a ordem amante do café e pagar por seu café. Eu não estava preocupado em projetar a tela da conta ou telas de erro para qualquer tela que não está no caminho Pappy da experiência. Bem, eu clico no meu primeiro design, que é o meu menu, e eu vou criar um ponto quente. Este ponto de acesso, quando é tocado, acionará a tela para alternar para a próxima tela no fluxo. Então, basta clicar e arrastar para desenhar o ponto de acesso, e vou vinculá-lo à minha página de detalhes do item. Tenho a opção de adicionar uma animação de transição. Eu acho que você quer tentar adicionar a animação pop para esta interação porque Nós queremos criar a ilusão deste tipo de cartão de lote de expansão e assumir a tela, ampliando para ver mais detalhes sobre este lote para a ação. Quero que isto seja acionado por cima. Então agora eu posso jogar o protótipo e testado para cima em matey e eu vejo a tela com mais informações sobre o Lotto. Gosto da animação. Acho que parece bom. Parece certo. Então, vou passar para a próxima tela. Vamos trabalhar no ponto quente para os detalhes do meu produto. Então, novamente eu vou clicar e arrastar para criar um ponto de acesso neste botão aqui na borda, e eu vou chegar à página do carro para a transição da tela. Vou tentar, disse “ Push Left”. Parece que eu estou indo para o próximo passo do check-out prosseguindo mais e mais para a direita até finalmente todos check-out. Vamos tentar, ver como se sente. Eu vou apertar esta tecla de seta e ir direto para a próxima tela, e eu vou continuar adicionando meu ponto de acesso da minha chamada. O botão de ação aqui no carrinho para a primeira tela de pagamento aqui para pagar com apple pay . Eu poderia zombar do que parece quando você paga com Apple Pay. Então, a coisinha, vocês robôs de baixo. Eu só vou zombar este pago com opção de cartão de crédito porque eu já tenho que primavera é acabar novamente aqui. Uh, quando eu tiver tempo, eu posso adicionar um ponto quente aqui no formulário do cartão de crédito e ter uma tela que simula o teclado aparecendo. Nesta fase, eu estou realmente apenas tentando obter o fluxo do núcleo para baixo e o conteúdo para baixo. Então eu não estou realmente preocupado com esse nível de detalhe agora, então eu vou em frente e apenas zombar do último CT um pedido de lugar. Fui à minha confirmação, e depois a minha confirmação é uma altura excitante. Você está tudo pronto. Muito estará pronto para pegar em breve. Porque não tenho outra navegação central. Acabei de adicionar isso de volta ao botão de menu para que eu possa voltar para onde eu comecei. Na próxima iteração do meu projeto. Eu vou querer abordar a navegação, mas para esta primeira fase, eu estou apenas olhando para obter o fluxo de compras principal para que eu possa obter feedback sobre o conteúdo antes de eu seguir em frente. Então, agora que montei todos os meus pontos quentes, vou tentar. Grandes obras como esperado. Então agora vou enviar este protótipo para o meu telefone. Agora é a sua vez de ligar as suas telas usando pontos de acesso. Uma vez que você tenha feito isso, vai passar para a fase de teste. 9. Testando seu protótipo: Agora que criámos o nosso protótipo, vamos enviá-lo para o nosso telemóvel. Ele tem que compartilhar, e eu tenho várias opções aqui para compartilhar e-mail ou um link direto, mas eu prefiro compartilhar um texto para o meu próprio telefone. Então agora eu tenho uma mensagem de texto com um link para este protótipo, e eu posso clicar nele e visualizá-lo, e ele está realmente começando a parecer cada vez mais como um aplicativo móvel real. Agora estou muito animado para testar com meu primeiro usuário. Vou pegar meu colega de quarto, que usa fora o tempo todo, e ele adora pedir café do Starbucks. Então, se quiser, ele será a pessoa certa para me dar feedback sobre esta primeira versão. Minha maneira preferida de testar um protótipo móvel é sentar com um amigo e pedir-lhes para completar a tarefa. Então, neste caso, eu vou pedir ao meu amigo para usar este aplicativo para encomendar e pagar por um café. É crucial que, ao observá-los, não lhes dê pistas sobre o que fazer . Você só quer observar, ver onde seus olhos estão indo para ver quais perguntas eles têm ver onde eles tributam e observar quaisquer pontos problemáticos para quaisquer problemas que aparecem enquanto eles estão tentando completar a tarefa. Você vai querer testar com 3 a 5 amigos Perversão do aplicativo. Mas uma vez que esta é a primeira versão, e eu já tenho idéias de como melhorá-la, eu vou apenas pegar o feedback de um amigo e fazer outra iteração no design antes de testar com outro. No decorrer de um projeto de design APP, estou testando dezenas de vezes, se não centenas de vezes com uma grande variedade de pessoas que correspondem ao meu perfil de cliente. Meu objetivo é notar tendências, semelhanças entre experiências de usuários. Por exemplo, se alguém tem um problema em pagar por um problema com a reforma do cartão de crédito, se eu ver mais e mais pessoas tendo um problema com isso, isso me ajuda a priorizar o trabalho de design nessa peça específica do aplicativo. E como sabemos quando um projeto é feito? Bem, se seus clientes podem concluir com sucesso toda a tarefa que você pediu e não há grandes problemas, então talvez você possa falar com o proprietário do produto sobre o início do desenvolvimento no aplicativo Mesmo quando você desenvolveu sua primeira versão de trabalho do APP, você ainda precisa testá-lo, e o teste nunca é feito. É um hábito e uma prática que você precisa levar com você durante todo o seu tempo, projetando e construindo. Então, qual é o seu termo? Encontre um amigo ou colega de quarto e pede-lhe para completar uma tarefa com o protótipo que criou. 10. Finale: nesta classe, aprendemos que até o design é um processo iterativo. Também aprendemos a importância de testar um protótipo para aprender a melhorar o conceito antes de começarmos a construí-lo. Então, para o seu projeto final, siga este processo iterativo para criar seu primeiro protótipo móvel. Bem definido, o problema. Você vai pesquisar padrões de design com alguns esboços. Você vai projetar essas telas na Marvel, e então você vai conectá-las todas em um protótipo de ervas topo, que então será testado com amigos. Eu realmente espero ter despertado sua curiosidade e aprender Maura sobre design de APP porque o campo na indústria é vasto e há uma tonelada para aprender sobre cada uma dessas etapas no processo. Espero que tenha se divertido tanto quanto eu, e espero vê-lo na próxima aula.