Processo de design UX/UI – Criando wireframes e um design final

1. Pré-visualização do curso: percorre todo o processo U X você I projetar usando o Adobe X'd aprender interface de usuário e design de experiência de usuário seguindo um projeto de design de APP móvel do início ao fim. Way vai primeiro percorrer o processo U X, aprendendo os fundamentos básicos do design UX e desenvolvendo uma grande variedade de entregas de UX, incluindo uma persona de usuário, arquivo pobre, um mapa de jornada do usuário e, finalmente, um diagrama de fluxo do usuário. seguir acontecerá com Adobe X'd para criar um quadro de fio de baixa fidelidade e, finalmente, criar um design polonês adicionando ícones finais, cores, botões e estilo na forma de um layout de alta fidelidade. Por último, irá ligar tudo isso junto à criação de protótipo de trabalho que podemos usar para testes de usuários. Apresentação de vôo são apenas um fantástico começando Paz para o seu novo estão crescendo portfólio U X Y. Adobe X'd é uma escolha fantástica para aspirante ou profissional ux You. Eu designers tão fácil de aprender. O software Adobe será ensinado em detalhes. Todos precisam entender os fundamentos do grande design de UX e o processo por trás dele. Depois de fazer esta aula, você será capaz de incorporar idéias UX e New I e para seus projetos de trabalho cotidiano e até mesmo ter um vislumbre da vida U X você I designers, estes óculos para todos que incluem designers gráficos, Desenvolvedores Web, qualquer pessoa interessada em saber mais sobre o processo U X Y fazendo um projeto prático e real. Então junte-se a mim para esta jornada extensa e divertida através de todo o processo U X ey para que você possa começar a ficar animado com esta fantástica e gratificante arena de design digital ver na classe. 2. Guia do curso e grupo no Facebook: Primeiro de tudo, bem-vindo ao curso, e espero que esta aula fique muito animada com o processo U X você I design e obtenha dois mais confortáveis usando o Adobe X T para enquadramento de fio. Eu queria que você soubesse que eu tenho um grupo de estudantes no Facebook, trabalho em projetos postais como perguntas e tenho alguém em uma vez com a gente para obter feedback. Também temos desafios de design neste grupo e para mantê-lo atualizado sobre as coisas que estão acontecendo no mundo U X Y e coisas relacionadas ao Adobe X. Tudo que eu tenho que fazer é pesquisar seu grupo de estudantes XY y e a barra de pesquisa do Facebook e clicar sobre os grupos para nos encontrar, e estamos ansiosos para encontrá-lo lá. Eu queria ter um momento para falar sobre o fluxo do curso. Este curso está dividido em algumas seções diferentes. primeira parte é sua teoria X e mergulha em nossa personalidade de usuário, jornada do cliente, mapa e fluxogramas. Esta é uma seção baseada em teoria, então ela vai se concentrar mais no processo e menos no software. A seção teórica do curso pode ser encontrada na classe de processo de design U X ey sobre compartilhamento de habilidades . O link será mostrado aqui na seção de notas desta lição. Você também pode encontrá-lo visualizando meu perfil no compartilhamento de habilidades. A segunda fase do nosso curso passa para a criação são Low Fidelity Wire Frame e Adobe X'd. A próxima seção do curso se move para a fase de design, onde começamos a adicionar layout de cores e estilizou seu design. Criamos um layout de alta fidelidade e um protótipo de trabalho. Esta aula se concentra mais no processo de design, a menos que eu esteja aprendendo Adobe X'd, embora você aprenda muito apenas caminhando pelo processo comigo. Se você quiser ter um software detalhado, passo a passo classe focada, eu ensino em Adobe X'd masterclass aqui sobre compartilhamento de habilidades. Mais uma vez, você pode encontrá-lo no link na seção de notas desta classe ou encontrá-lo no meu perfil de compartilhamento de habilidades . Agora vamos mergulhar em alguma teoria UX, e eu vou te ver na próxima lição. Não se esqueça de se juntar ao grupo do Facebook depois de conferir o curso de teoria de design U X Y. Nossas lições que vamos mergulhar na criação são fio de baixa fidelidade para ele aqui na próxima lição . Definitivamente não é necessário fazer a aula de teoria para obter muito fora desta seção do curso, mas é útil conhecer o processo UX. Nós só passamos para chegar ao ponto em que estamos agora estamos prontos para começar a nossa armação de arame funcionando . 3. Wireframe de baixo respeitante - começando de configuração: Bem-vindo ao Adobe X'd. Vamos em frente e criar o nosso arame de baixa fidelidade primeiro. Então vamos passar para uma armação de arame de alta fidelidade. Vamos juntar os gráficos das fotos e dos ícones. E finalmente, vamos ligar tudo em protótipo em um protótipo que podemos eventualmente testar com os usuários para que possamos ir em frente e voltar para a prancheta. Se precisarmos ajustar qualquer coisa antes que ele passe para o estágio final após a aprovação do cliente , que será o estágio de desenvolvimento onde ele será revestido e o desenvolvedor assumirá e espero torná-lo um aplicativo de trabalho baixável em um telefone. Não vamos fazer essa última peça, mas vamos levá-lo até a fase de testes e passar por esse processo com você. Então, aqui estamos nós. Vamos em frente e começar. Vamos pular direto para isso. Presumo que já tenha um pouco de conhecimento da Adobe X'd. Sinta-se à vontade para ter essas lições se precisar de algum treinamento do Adobe X'd. Então eu vou me adequar, ter um pouco de conhecimento de trabalho do Adobe X'd, mas eu ainda vou ir devagar durante certas áreas. Então, uma coisa que realmente me ajuda a começar é que há algo chamado você. Eu crianças. Ah, então você sabe, kits de interface de usuário e pode baixá-los. E eles poderiam fornecer um mundo de ajuda em termos de obter alguns desses bloqueios básicos e layout feitos. Então este é um que é da própria Adobe, e eu vou mostrar-lhe como ir em frente e agarrá-lo. Mas olhe para todos esses maravilhosos pequenos tipos de arame de layout básico que podemos pegar e usar e adaptar aos nossos próprios projetos que não têm que começar do zero. É sempre muito bom. Claro, você sempre pode começar do zero, se quiser. Isto dá-te um pouco de vantagem com alguns pequenos ícones e coisas diferentes que podem poupar muito tempo. Isto dá-te um pouco de vantagem com alguns pequenos ícones e coisas diferentes que Então, para poder acessar esse arquivo em particular, você tem que ir arquivar. E quando você tem X d arquivo aberto e você tem que ir para baixo os quadros de arame vai abrir uma nova janela em seu navegador e você vai ser capaz de baixar este kit particular que eu estou usando. Então vá fazer o download de crianças e você terá um. Vou usá-la só um pouquinho. Eu não vou depender muito disso, porque eu meio que quero mostrar a vocês como eu faço layout projetado do zero também. Então isso só vai ajudar com alguns pontos específicos onde podemos precisar pegar um Nikon ou dois e economizar um pouco de tempo. Você vai notar que este você em particular que eu kit é tem uma cor azul para ele. E o que eu gostaria de fazer quando estou na fase assustadora do fio de baixa fidelidade, onde tudo está, às vezes você foi esboçado no papel. É muito cru. É muito básico. Estamos apenas tendo uma idéia geral de bloquear o layout dela e onde as coisas estão em posição . Eu gostava de manter as coisas em preto, branco e cinza. Então vamos eliminar esta cor. E como fazemos isso? Temos todo este documento cheio desta cor azul. Como podemos mudar tudo isso muito rapidamente? Bem, como você sabe, esses estilos globais de ar aqui, então se eu mudar as cores aqui vai mudá-lo globalmente. Então eu vou selecionar um par dessas cores azuis. Eu vou editar, e eu vou apenas deslizar isso todo o caminho para Grey, deslizá-lo para cinza, e ele vai em frente e mudar todo o azul. Você tem que editar isso todo o caminho para cinza, fazer esse tipo de sombra semelhante de graça meio escuro. E este é um azul claro. Ou para fazer isso um cinza claro. Então você notou como todo o azul foi mudado aqui para que pudéssemos voltar. Restam algumas pequenas áreas azuis. Talvez, porque isso não é totalmente cinza vai deslizar que só lá vamos nós. Agora temos um estilo de baixa fidelidade, e você pode pensar, bem, aquele azul não vai incomodar ninguém. Mas se as cores da nossa marca são mais para a cor verde, você sabe que faz sentido tipo de eliminar a cor como você sabe, porque os clientes vão olhar para as cores e essa não é a minha cor final. Então, se você fizer preto e branco, tudo fica um pouco mais como um quadro de arame de baixa fidelidade esboçado. Então, em seguida, vamos começar com uma primeira tela. Nós vamos pegar estes. Tela de inscrição. Acabou. Este primeiro verde, nós vamos ter uma pequena ajuda de você eu não posso que nós baixamos e nós temos várias opções diferentes de inscrição. E então, quando voltamos para o tipo de processo U X que acabamos de passar, descobrimos algumas áreas que precisamos de duas coisas que precisamos pensar ao passar pelo nosso processo de login. E uma dessas coisas era garantir que tínhamos uma opção de inscrição rápida. Então vamos precisar dele para projetar uma tela que vai ser capaz de inscrevê-lo, obter informações básicas. Haverá também um botão para que o enviem com a sua conta do Facebook. Então precisamos manter todos em jogo enquanto projetamos o layout para isso. Então, que tipo de tela de inscrições você acha que funcionaria? Provavelmente melhor para este aplicativo. Queríamos ser limpos e simples. Nós não queremos ter um monte de elementos de design para que eles tipo de trabalho através. Eu queria ser muito simples, e então eu vou realmente pegar este aqui. Na verdade, este é o número cinco. Cadastre-se em. E vou copiar isto. Vou abrir um novo documento e vamos fazer isso no iPhone X. Claro que as coisas podem mudar. Você poderia estar lavando essa aula daqui a cinco anos. Seja como o iPhone X. São notícias antigas. Mas este é o mais novo agora, então vamos em frente e fazer isso. Você vai notar uma tela muito mais alta, muito mais imóveis porque você não tem mais o botão. Então vamos ser capazes de ter mais espaço nesta versão em particular. Claro, você sempre pode protótipo e mostrar tamanhos diferentes, assim como chegamos ao fim. Você pode redimensionar algumas dessas duas telas de telefone diferentes que você poderia fazer um android é mostrar ao cliente se você fosse desenvolver uma versão android deste aplicativo, você pode mostrar-lhe como ele pode se adaptar como o design poderia se adaptar a talvez uma tela mais curta . Então, forense, agora, vamos ficar com o iPhone em seguida. Então aqui está o nosso lado e o nosso ecrã. Vamos mudar isso significativamente para torná-lo nosso. Então, quando se trata de quadros de arame de baixa fidelidade Ah, muitas dessas vezes seu esboçado para fora. Portanto, não queremos adicionar mais detalhes fora disso e às vezes até mesmo adicionar essas bolhas arredondadas pode até ser demais. E às vezes, uh, desaterrado aqueles que me deixam ir e clicar com o botão direito e eu despreparo a grade. Só estamos usando isso como um atalho rápido. Nós vamos fazer um monte de outras telas do zero, mas apenas tipo de mostrar a você como você pode fazer um atalho para você alguns desses modelos para economizar toneladas de tempo. Então tudo o que fiz foi eu, certo? Clique. Era um elemento de grupo. Então eu só despreparei e eu vou ver se eu não posso arredondar esses cantos para trás. Então, aqui vamos nós. Aqui estão os nossos cantos arredondados que definem isso para zero. E a razão pela qual estou fazendo isso é que eu não quero adicionar um monte de estilo. Neste momento, estamos na fase de baixa fidelidade. Estilo não é o objetivo. É sobre o utilitário básico e e como o usuário vai trabalhar através do quadro de arame e menos sobre a marca ou estilo ou qualquer coisa. Só estou mantendo isso é básico o mais possível. Então aqui em cima nós vamos ter uma chance de talvez colocar o logotipo ou o nome da empresa vai dizer no nome era bom deste tipo em nomes de aplicativos. Estamos assumindo uma oportunidade de foto com o logotipo. Haveria bom para que eles saibam o aplicativo Eles abriram um monte de tempo para ter uma tela de login , ea carga era muito pequena. Eles não sabem que aplicativo há aberturas. Você tem que fazer isso incrivelmente óbvio e também pode ser codificado por cores. O que é ótimo no design de layout é que, às vezes, as pessoas projetam um grande fundo, então elas têm tudo branco. Então vamos em frente e deslize isso para fora. Teremos tudo branco, talvez o logotipo aqui. Mas o que é ótimo, especialmente sobre uma tela mais alta, é adicionar um tipo de boxier de contraste muito alto ajuda a quebrar o layout e ajuda o usuário tipo de detalhar as informações um pouco melhor. Ao usar essas caixas de alto contraste, você não tem muitas caixas, você não tem uma caixa concorrente, então vamos dizer que talvez tenhamos alguma informação aqui embaixo. Começa a ser demais e começa a pisar. Faça o design e o layout um pouco ocupados. Mas às vezes usando aqueles escuros, você vai notar um monte de menus de hambúrguer e tipo de menus acima menus de cabeçalho pegajoso superior quando você rolar para baixo o geralmente um alto contraste significando que há preto se o fundo branco é branco no resto do a tela e ao contrário. E isso é por uma boa razão, porque o contraste é seu amigo quando se trata de você X design amigável e você eu desenho então apenas tipo de eu vou te dar tipo de dicas úteis ao longo do caminho. Isto é um pouco menos sobre o uso deste software um pouco mais sobre os fundamentos da criação de um bom layout e design. 4. Wireframe de baixo respeitante - tela de login: Então vamos pensar sobre o que precisamos ter aqui. Então precisamos ter tipo de, ah, ah, nome de usuário, fazer login em uma senha, fazer login, e adoramos ser capazes de, uh, verificar a senha. Mas vamos seguir em frente e manter isso simples e apenas ter um login básico. E também precisamos pensar É óbvio que você precisa colocar seu e-mail? Às vezes nem sempre é óbvio o que você precisa colocar lá, então vamos em frente e adicionar. Eu só vou segurar a opção mantendo pressionada a opção e arrastando, e eu sou capaz de tipo de duplicar isso muito rapidamente. Eu apenas tipo de nome de usuário. Eu vou colocar isso aqui embaixo, e então eu vou apenas segurar Option. Eu vou colocar em senha que realmente querem fazer isso é óbvio quanto possível para o nosso usuário toe login, e esses podem ser menores se precisarmos ser apenas o suficiente onde eles podem lê-lo. Então, fazendo 12 não estamos fazendo estilos globais ainda. Estamos apenas fazendo alguns esboços básicos feitos. Certifique-se de que há espaçamento suficiente entre esses elementos, mas também queremos ter certeza de que eles não estão muito distantes. Então, se eu tenho isso aqui em baixo, parece desconectado. E esta é uma unidade que a pessoa precisa prestar atenção. Então mantê-los juntos, mas obviamente não tão perto que pareça lotado. Então apenas um pouco de cuidado com o seu espaçamento. Então, o que mais precisamos? Eu amo usar barras divisórias e tipo de ver esta pequena barra divisória tipo de ajuda mais uma vez . Outra maneira de quebrar seu layout sem fazê-lo parecer ocupado. Porque às vezes você vai usar uma caixa de alto contraste aqui, e você ainda precisa de algum tipo de linha divisória ou algo para quebrar continuamente as informações, porque este é um conjunto totalmente separado de opções. Então eu, pessoalmente, temos muito mais imóveis de tela do que quando isso foi meio que montado. Então nós podemos, você sabe, talvez deixar o design respirar um pouco. Ele poderia nos dar uma oportunidade de ter um pouco de uma imagem maior aqui, então vamos tipo de mudar esta linha de guitarra downs embarcou tudo para baixo, realmente tomar uso do imobiliário tela que você tem, especialmente em um novo ou telefone. Ok, para que possamos ir e arrastar isso para baixo. Vou tornar este pouco maior um pouco mais proeminente. Está bem? Talvez não tão grande. Talvez o dobro do quê? Originalmente waas. E agora temos algumas opções aqui. Então, o que eu gostaria de fazer é obviamente que eles precisam pressionar enter para poder enviar o código de acesso da senha. Então eu vou manter isso é uma unidade conectada, e eu vou ir em frente e fazer este log in Agora, fazer isso maior. Não vamos nos preocupar com o tipo de luta ainda. Vamos fazer uma tipografia básica, apenas escolhendo um padrão. Ah, tipo de letra, que vai ser aéreo por agora. Podemos sempre mudar isso com estilos globais. Mais tarde, vá em frente. E um grupo de agrupamento deste elemento , obteve qualquer um deste rosto. E agora temos este botão de login mais uma vez, queremos fazer botões de alto contraste, Então queremos torná-lo a cor oposta de seu fundo ou o oposto em termos de contrastes. Se temos um fundo branco, adoramos ter um botão mais escuro e o inverso também é verdade, e isso é algo que ainda podemos explorar. Isto, neste caso, é ser capaz de saber, Fazemos tudo em um fundo escuro e, em seguida, ter tudo em caixas brancas ou ter tudo em um fundo branco? E ainda não chegamos lá. Isto é baixa fidelidade. Então vamos continuar a trabalhar em botões básicos. caso de você ter a linha divisória aqui é um tipo de opção diferente aqui em baixo . Faça login com o Facebook. Podemos sempre colorir isso mais tarde com para torná-lo mais óbvio do que seu Facebook, tornando-o o Facebook cor azul eso Há sempre oportunidades aqui em baixo para colocar o logotipo, e, uh, nós podemos descobrir isso mais tarde. Então, em termos de botões básicos, precisamos de mais alguma coisa? Queremos dar a opção de fazer login com o Google? Hum, isso vai ser uma opção. Podemos sempre trabalhar com o que quer que seja que esteja a desenvolver isto, a pergunta que se pode fazer durante este processo é saber como é fácil. É para obter o registro do Facebook? E como é fácil obter o Google também, e vale a pena obter o login do Google? Há usuários suficientes e nosso alvo demográfico? Eles vão ter o Google para ser capaz de fazer isso uma opção ou passar por todo o incômodo para fazer disso uma opção. Nós vamos ficar com o Facebook por agora, e nós vamos apenas tipo de tomar estes dentro Então você provavelmente está se perguntando, por que você não está fazendo isso? Por que você não coloca o botão ao lado dele? Bem, o que acontece aqui é que eles ficam um pouco confusos. Estes botões estão um pouco próximos demais. Ah, faça o login. Você não quer que os usuários nunca confundam. É o login do Facebook é um caminho de usuário totalmente diferente que eles vão fazer o login com o Facebook. E então queremos manter esses elementos um pouco separados, não é necessário, mas apenas algo que estou pensando durante o processo de layout. Ok, então nós podemos até ter vamos em frente no grupo isso, e isso é provavelmente um pouco demais tenho que parar eu como um você eu tipo de designer no designer gráfico de fazer muito trabalho de design. Eu tenho que parar e dizer OK, eu estou começando a entrar muito no enquadramento de fio de alta fidelidade. Vamos manter isto simples. Mantenha-o simples. Então, em vez de mexer com isso quente e mantê-lo assim Ok, então eu vou em frente e colocar uma foto ou logotipo aqui. Vai ser muito, muito básico. Então essa é a nossa tela de login. Você pode imaginar uma foto lá e oportunidades de registro. Então é aqui que começamos a tipo de desenvolver tipo de trabalho com nosso fluxo de usuários. Então, como já desenvolvemos ou diagrama de fluxo de usuário em um lições anteriores, pode haver o login no Facebook e este cadastro. Então vamos ter que passar por esses processos. Vamos fazer o Facebook. Isso vai ser mais fácil. E então eu vou entrar no modo protótipo e eu vou criar um par de quadros de arte aqui. Vamos criar um aqui e outro aqui. Então é aqui que eles vão se separar. Então o usuário ou vai subir em direção ao login com o Facebook ou eles vão fazer login agora. E assim que começamos a fazer isso, voltamos e vamos. Oh, sim. Temos um passo crítico aqui que deixamos de fora. E se eles ainda não tiverem uma conta? Precisamos ter uma chance para eles se inscreverem em uma conta. Então isso é definitivamente algo que precisamos tipo de incorporar. Nós definitivamente temos a tela imobiliária para incorporar que para ir e excluir este extra . Vou voltar para o modo de design. Então vamos em frente e adicionar mais um botão e vamos tirar a pílula redonda deste. Mais uma vez, queremos muito estilizar as coisas dos olhos e o fio básico em um estágio de baixa fidelidade . Vamos continuar e duplicar este botão aqui. Então este é o login agora. Hum, então nós vamos tipo de mudanças um pouco, fazer login com sua conta, e então isso vai ser inscrição é uma conta estrangeira de inscrição, ok? Ou o que você poderia criar? Criar um login? Pode soar um pouco melhor. Ótima. Um tronco de animais ir e cagar. Facebook todo o caminho até aqui. E agora temos que pensar em Ok, como vamos apresentar esses botões? Então nós temos tipo de seu login básico. Agora nós podemos tipo de ter alguns imóveis tela, foram deslizar que um pouco para cima. Log manteria tudo isso juntos como uma unidade porque eles vão entrar, entrar, e nós vamos ter o Facebook como a próxima opção aqui. Está bem? Tudo bem. E assim, crie um login. Então, onde ter isso na parte inferior. E eu vou dar-lhes a chance de criar um login, e nós vamos fazer algumas opções de cores diferentes. Então ainda estamos em um ambiente preto e branco e cinza, mas isso não significa que eu não possa ir em frente e levar isso. Ir para o meu na cor ativos e tipo de mostrar que isso seria uma cor diferente. Diferente contraste, Enfraquecer, Iluminar um pouco. Ou podemos escurecê-lo e tornar o login na sua conta um pouco mais leve. Nós temos um monte de botões aqui, e nós temos que pensar em uma maneira de simplificar isso ainda mais então eu vou tipo de passar alguns momentos tipo de trabalhar com os botões aqui para ver se eu não consigo encontrar um tipo de apresentação e layout mais simples . E eu vou falar sobre o tipo de por que eu acabei onde eu acabei 5. Wireframe de baixo respeitante - processo de login - parte 2: Certo. Então eu passei alguns minutos trabalhando nessa peça para tentar encontrar o que eu acho que seria tudo o que precisamos aqui e talvez de uma maneira geral certa, nós não temos que nos preocupar com ícones ou qualquer coisa específica, mas eu Acho que isso é bom que eu meio que tenho esse login com sua contagem bem embaixo aqui. Mas também, eu mudei o registro do criador para baixo porque queremos tornar isso um pouco mais óbvio porque eles ainda não têm um login. A primeira coisa que eles vão fazer é olhar bem abaixo do registro com suas contas. Só estou pensando na experiência do usuário aqui, pensando no que eles estão pensando quando eu faço login pessoalmente. Na verdade, fui ao meu telefone e entrei em um dos mapas. E se eu não tivesse uma conta? Para onde meus olhos olharam? E eles vão direto abaixo do login para a conta. Mas ao fazer um pouco de pesquisa, estudar e analisar exemplos é realmente útil neste tipo de situações. Decidi colocar o Facebook lá embaixo. Vamos ser capazes de ter um azul muito bom e alto contraste. Então eles vão definitivamente Não, isso é um login no Facebook e tipo de manter isso abaixo. Poderia ter sido deslocado um pouco mais alto. Mas eu não queria ter três botões um ao lado do outro porque quando você está tentando entrar nesse ato muito rapidamente, você vai ficar tipo, Ah, você só por um segundo. Você vai fazer uma pausa atrás. Qual botão devo pressionar? E pode ser temporariamente confuso. E nós não queremos isso. Vai colocar espaçamento suficiente para separar esses dois diferentes longos e opções. Tão bom, vamos em frente e seguir em frente. Temos muitas telas para fazer. Vamos fazer o login com sua conta do Facebook. Então esta será uma tela muito simples vai registrar, e nós vamos dar autorização. Só vai ser muito, muito simples. Vai ser autorizado. Ponha a autorização ali. O botão. Você tem que se preocupar com estilo ou tamanho ainda, então isso é muito simples. Autoriza o Facebook para criar uma conta. Provavelmente haverá uma foto ou logotipo em algum lugar aqui. Mas, mais uma vez está ficando muito nos lados do design para meio que me parar lá. Então essa é uma mola muito simples. Acho que não precisavam das outras opções, mas autorizaram. E então é bom Deus de realmente registrá-lo e ir para a tela inicial. Então, a próxima opção é se inscrever para uma conta, que pode ser um pouco mais tedioso, mas tentamos tornar isso o mais fácil possível de um processo. Vamos em frente e pegar esses botões. Só vou segurar a opção e ir buscá-lo aqui. Ok, então isso é se inscrever para uma conta. Precisamos de algum tipo de cabeçalho. Vá em frente e pegue isso aqui e faça uma cor diferente. E isso será inscrito. Cadastre-se para uma conta e, eventualmente, precisará alterar esse login na nova conta . Está bem. E isto aqui em baixo está a mudar os meus cabeçalhos. Aqui. Esta será a autorização do Facebook e, em seguida, faça login na tela em casa. Ok, ótimo. Então agora comece a ver um quadro de arame muito, muito básico se juntando. Faz com que você sempre salve seu trabalho. Está bem. No meu computador para salvar esse cara que não estraga tudo. Então o que podemos fazer é eu ir em frente e voltar, obter um pouco de ajuda aqui. Nós ainda vamos personalizá-lo. E aqui está o lado acima com Ver se temos alguma informação detalhada. Aqui estão algumas opções de inscrição diferentes e queremos manter-se consistentes a partir de uma perspectiva U I. Você quer ter o mesmo estilo de bolhas por toda parte, e nós vamos chegar a isso mais tarde em simulações de alta fidelidade para então por agora, é tipo de agarrar esta área que é semelhante ao que usamos antes. E então eu estou apenas usando este é um tipo de guia áspero, e é realmente para mim apenas pegar algumas dessas caixas de texto e nós não vamos precisar de tudo , isso,então eu estou apenas agrupando. Ok, então aqui está o que vamos precisar. E eu meio que gosto deste formato que tenho aqui, ok? E então também podemos ver como é lá embaixo. Tipo de manter essa consistência lá. Então o que vamos precisar vamos ter um nome de usuário. Chegaremos lá na necessidade de configurar a senha. Provavelmente precisarão confirmar a senha. Que outras coisas serão necessárias? O que neste Algo onde poderíamos conversar com a empresa e ir, quais são as informações necessárias? Você precisará ser capaz de ter um usuário cadastrado. E isso às vezes não vai ser. Você está sob seu controle. Isso pode estar sob o que a empresa vai querer dos usuários quando eles se inscreverem em uma conta. Então eles vão querer ter um disco masculino Aiken garantir que eles vão querer ter um e-mail para você algum jeito de entrar em contato com você e enviar promoções e mensagens de vendas. Eles definitivamente querem ter e-mail. Então e-mail, e assim que vai ser neste formato. Então eu estou apenas copiando e colando. Traiu um pouco. Eu tenho uma ajudinha aqui com isso. Você eu modelo, você é eu criança? Isso não é problema. Tudo que você só montou um fio desgastado. Poderíamos sentar aqui com um bloco de desenho e fazer a mesma coisa. Onde está trapaceando um pouco, tornando-o mais rápido em um formato digital. Assim, nome de usuário senha confirmar senha e-mail. Não vamos precisar de dados, nascimento ou país. Queremos fazer o mínimo possível, mas posso garantir que esse é o básico, que eles precisarão da segurança para ter um e-mail. Eles podem até precisar de um e-mail de confirmação. E isso é algo que você poderia trabalhar com desenvolvedor na camada em sua uma coisa muito menor. Mas contanto que tenhamos a estrutura básica em layouts foi assinada para uma conta ,é isso. Mas contanto que tenhamos a estrutura básica em layouts foi assinada para uma conta , Nós não queremos ter muita coisa acontecendo aqui, e eu gosto de mantê-lo no meio da tela bem ali. Ok, então isso é básico. Não precisamos ter mais nada. Precisaria de um botão? Você não tem um botão aqui. Vamos em frente e puxar para baixo opção e agarrar o botão aqui em baixo e isso vai ser inscrição , terminar de se inscrever. Podemos trabalhar na cópia escrita ou escrita de texto mais tarde foi fazer botões básicos aqui, então terminar. O processo de inscrição terá uma pequena seta lá eventualmente quando chegarmos ao lado do design , e isso é praticamente isso e então não poderia ser automaticamente logado. Portanto, termine o processo e faça login, deixe os usuários saberem que eles não precisam voltar e digitar isso. Então agora temos duas divisões diferentes, e ambas as opções de registro serão carregadas na mesma tela de login. Então, quando eles se conectarem, eles virão para a tela inicial. Vamos para o modo protótipo. Vamos adicionar outro quadro de arte aqui. Certo, então vamos ligar tudo isso quando fizermos a armação de fio de alta fidelidade, obter o espaçamento. Corrigir se você quiser, mas terá caminhos que vão por aqui e passam que vão por ali semelhante ao nosso fluxo de usuários que montamos juntos. Então isso vai vir a calhar. Vamos nos referir ao fluxo de usuários que desenvolvemos no processo U X. Para ser capaz de saber o fluxo exato. Vamos encontrar um telegrama aqui. Então esta vai ser a tela inicial. Vamos passar muito tempo neste caso. É uma tela muito importante. Todos voltarão à tela inicial várias vezes no processo ou quando entrarem . Então nós realmente queremos ter certeza que esta é uma tela inicial muito convidativa, que eles têm acesso op às suas opções para sua conta. Mas eles também podem ser enviados na direção certa. Então, aqui estamos nós. Vamos fazer isto. Então, a tela de login é crítica. Portanto, queremos tornar isso um simples é possível. Mas aqui vai ser uma espécie de desafio é que temos um monte de coisas que precisamos para apresentar um monte de opções diferentes que precisamos apresentar para o usuário. Eles precisam ser capazes de acessar suas informações de contagem, e eles precisam ser enviados para o estágio Discovery do aplicativo, onde eles poderiam descobrir o que restaurante ou mercearia ah, eles querem usar. Então, quando a primeira coisa que eu quero fazer é tipo de configurar um pouco de um menu aqui onde eles podem acessar suas contas, vai ser um cabeçalho pegajoso, vai estar em todas as telas. Eles sempre serão capazes de ter acesso a esta pequena tela. Vai escurecer. E vamos fazer como um pequeno círculo para o nosso usuário e ter esse tipo de sobreposição um pouco mais uma vez não entrar muito no design. Tenho que chover constantemente minha tentação de colocar elementos de design e apenas mantê-lo muito básico. Os soldados assumem fotos lá. Vamos pegar esse tipo de texto aqui, e vamos ter nome de usuário. Não vou entrar no nome de usuário específico, e vamos precisar de algum tipo de informação da conta. Aqui é onde nós vamos descobrir, OK, OK, vamos colocar o nome de usuário à esquerda. E nós poderíamos ter um menu de hambúrguer simples para que pudéssemos ter tantas opções quanto possível escondidas que eles sempre têm acesso. E isso não ocupa um monte de imóveis de tela. Vou em frente e pegar um ícone de menu de hambúrguer rápido. Eu desenvolvi um pouco de um design de aplicativo móvel e minha masterclass UX. Outra classe separada que eu tenho e tipo de ter este desenvolvido. E eu vou pegar esse tipo de menu de hambúrguer porque eu fui em frente e eu simplesmente não queria. Se você quer saber como criar isso, volte para aquelas lições anteriores sobre o Dhobi X'd e você será capaz de descobrir como criar qualquer ícone imaginável. Vou só clicar com o botão direito. Preciso ligar isto à ONU no Lincoln. Não quero isso ligado a documentos anteriores . Aqui está o nosso cardápio de hambúrguer. Lembre-se, precisamos fazer isso preto e branco e cinza tão cinza, e eventualmente teremos que explorar. Quando eles clicam sobre isso, ele desliza para fora, ele cai para baixo. Descobriremos isso mais tarde no processo. Mas precisamos saber que eles pelo menos têm acesso às suas contas. Você tem nome de usuário, temos configurações que precisaremos. Este é um tipo de check-out de aplicativo. Eles vão pedir comida. E assim sempre vai haver um ícone de carrinho de compras que vai precisar estar disponível para que eles possam tocar nisso. Ou confira, veja o que tem no carrinho. Eles podem ter 20 itens no carrinho que precisam revisar sua parte. Então sempre temos que dar a ele acesso às configurações da conta através deste menu de hambúrguer . Mas também temos de lhes dar acesso ao carrinho de compras. Então é por isso que a tela vai ser um desafio, porque eu acho que todas essas opções estavam dando aos usuários. Precisamos torná-lo o mais fácil possível para digerir todas essas opções diferentes e não sobrecarregar usuário. 6. Wireframe de baixo respeitante - acabamento de tela caseira: Neste caso, eu vou para o nosso pequeno kit bem aqui, e eu estou nos elementos U I e tenho alguns ícones realmente doces dandy que nós poderíamos pegar apenas para arame rápido. Poderíamos fazer um ícone final do carrinho de compras mais tarde, então vou pegar esse ícone de saco. Estou apenas copiando para trazê-lo de volta para o nosso projeto e vamos em frente e trazê-lo para dentro Já é branco, então é muito conveniente. Acredita que está ligado. Vamos ver se não podemos. Ao contrário do simples, está no Link it. Lá vamos nós. Agora temos acesso a ele. Mantenha pressionado, mude e escale-o um pouco maior que o amor de ser capaz de ter algum tipo de indicação de como itens de compras maney ou no saco. Por enquanto, vou fazer um círculo simples para que saibas como os ícones do Maney estão lá dentro. Não vou fazê-lo ler. Não vou acrescentar muito a isso. Ensopado estranho número três. Só para ter um exemplo que é sempre bom saber quantos itens você tem, especialmente quando se trata de compras de supermercado. É bom saber quantos itens ar em seu carrinho. Vamos fazer isso um pouco menor e torná-lo bom tamanho. Podemos finesse isso mais tarde. Apenas muito, muito básico. Há um pequeno três. ícone do nosso carrinho de compras. Algumas coisas que podemos fazer. Pode começar a mudar isso, ver se podemos dividir o menu de hambúrgueres no carrinho de compras para que eles não o façam. Você quer dar muitas opções muito próximas. Eu também não tenho alguma separação natural das opções vai ajudar o usuário a quebrar essas opções para baixo. Ok, então você tem carrinho de compras no menu de hambúrgueres direito à esquerda, e isso faz sentido. Carrinho de compras eu sempre colocar à direita porque as pessoas estão tão acostumados com o carrinho de compras estar à direita. Não há dúvida de que é aí que vai ser tão baseado no comportamento do usuário . No passado, eu estou tendo aquele carrinho de compras sobre os direitos muito útil, e muitos sistemas à esquerda. Acho que as pessoas estão acostumadas a ser capazes de acessar no lado esquerdo. Ah, então nós vamos tipo de delicadeza que nem sempre temos que ter uma foto de perfil. Eu acho que, neste caso, poderia torná-lo um pouco muitos elementos aqui em cima é tudo o que eles precisam para ter o seu nome de usuário e tela pequena. Então vamos avaliar isso um pouco mais tarde para ver se temos espaço para a foto ou não. E aqui é onde temos muitas oportunidades e flexibilidade com seu layout. Então temos todos os itens essenciais aos quais eles precisam ter acesso. O cabeçalho pegajoso vai estar em todas as telas que você vê daqui em diante quando eles se conectarem e chegarem à tela inicial que os cabeçalhos pegajosos estarão lá, então isso vai ser consistente. Então agora é aqui que temos a opção. Aqui fomos nós e fizemos Você está pesquisando X? E determinamos que queremos ser capazes de enviar as pessoas para a direção certa imediatamente. Então, poderia haver duas opções principais, uma opção de entrega de supermercado e uma opção de entrega de restaurante , e queremos enviar as pessoas para esse caminho o mais rápido possível. Então, a maneira como eu pensei é ter um visual agradável, apenas uma foto. Nada muito louco de cada um e ter mercearia. E então temos a outra opção restaurantes disponíveis. Quem quer que tenha duas opções simples configurar aqui. Temos restaurante no topo do supermercado em baixo, e quando eu faço uma espécie de fraude de baixa fidelidade, eu não estou usando nenhuma foto. Muitas vezes, quando faço fotos, gostaria de ficar com o mesmo tom de cinza para que você possa entender. Isso é uma foto. Algumas pessoas, quando eles esboçaram, tipo de fazer o tipo X de linhas através da caixa. Você pode indicar uma foto, o que você quiser fazer, o que quer que você se sinta confortável. Eu só vou fazer este tipo de sombra mais escura para indicar uma foto. Então é isso. Nós podemos tipo de fechar a lacuna aqui um pouco com isso. Certifique-se de que o tamanho certo, mas mais uma vez não gastar muito tempo nele. Você só está fazendo um layout áspero. Você continua dizendo isso, mas eu sempre tenho que me parar porque isso não vai ser um projeto aprovado. Vamos voltar e ajustar isso à medida que conversamos com o cliente à medida que fazemos mais pesquisas à medida que voltamos e testamos, pode haver algumas mudanças significativas nisso. Então você não quer gastar muito tempo em algo que pode acabar sendo mudado significativamente avançando. É por isso que você não faz um monte de arame de baixa fidelidade vai deixar esse excesso. Então é isso. Tudo o que precisamos voltaria ao nosso fluxo de usuários. Podemos rever os documentos da UX como a nossa persona. Nós poderíamos fazer o nosso mapeamento de jornada do cliente tipo de pensamento. Ok. Há mais alguma coisa que precisamos incluir olhar para esse fluxo de usuários se é por isso que desenvolvemos o fluxo de usuários antes de entrarmos em um enquadramento de fio? Porque agora temos uma ótima idéia de onde o usuário vai, onde ele pode ir e quais opções precisamos ter. Então vamos em frente e enviá-los para duas direções diferentes. Podemos mandá-los para um restaurante. Eles podem obter uma lista de restaurantes ou eles podem obter uma lista de compras. Então vamos em frente e criar o próximo verde. Começamos a ir um pouco mais rápido, está bem? E eles também vão ter uma opção aparecer e o que vamos fazer. Não vamos duplicar isso ainda. Eu vou criar um tipo de layout para um desses e duplicado, então eu não tenho que fazer o mesmo layout duas vezes. Então vamos começar com o restaurante primeiro e eu vou mudar isso por causa do meu fluxo de usuários . Tenho mercearia lá em cima e restaurante em baixo, por isso vai manter o mesmo formato, por isso esta vai ser a lista do restaurante. Então eles vão clicar no restaurante, e isso é o que eles vão ver. Há um monte de coisas que precisamos incluir aqui. Podemos incluir algum tipo de foto espalhada. Amplie aqui a escola muda de volta para o modo de design. Poderíamos ter uma foto aqui que tem tipo de restaurantes. Ou melhor ainda, poderíamos ter um mapa, assim como no nosso fluxo de usuários. Estamos falando sobre a idéia de ter um mapa onde eles podem tipo de ver como o restaurante está mais perto deles, então ele poderia ter um mapa de restaurante. Isso terá 10 pontos com o tipo de topo e você está dentro de um raio de 8 milhas . Vou querer uma lista. Não queremos que esse mapa seja muito grande porque não queremos ocupar imóveis valiosos . Mas sempre podemos ter uma seta aqui para indicar que eles podem expandir o menu ou o mapa para fora. Nós vamos ter algum tipo de ícone para que ele saiba que eles podem expandir o mapa para assumir a tela inteira. Ok. E temos uma pequena seta aqui que podemos usar copiar e colar e ter que ser o ícone perfeito . Não importa, porque vamos acabar mudando isso em algum momento. Isso será algum tipo de indicador. Posso sempre desvincular isto. E eu poderia até editar este ícone se eu quisesse, apenas para torná-lo um pouco mais de uma seta virada para baixo. Ok, para que eles saibam que eles poderiam puxar o clique sobre isso, e isso vai tipo de expandir através da tela. Este será um mapa de restaurante ou apenas colocá-lo bem ali no meio. Agora precisamos de uma lista de restaurantes. Eu vou descobrir como eles vão encomendá-lo e como eles podem descobrir a ordem para que eles possam ordená-lo por relevância são os mais relevantes que podem ordená-lo pelas principais críticas. Então nós vamos precisar de algum tipo de busca tipo de cais de área onde eles poderiam filtrar tudo e então nós precisamos ter a lista em si. Queremos ir em frente e fazer essa área de restaurante de filtro. Eu não quero ocupar uma enorme quantidade de espaço porque precisamos ser capazes de pelo menos listar restaurantes na metade superior da tela. Então tivemos que ter restaurantes de filtro aqui, apenas uma etiqueta simples. E eu vou fazer um par de caixas aqui para indicar maneiras que eles podem filtrar. Então temos que pensar sobre qual, qual, como queremos que eles sejam capazes de filtrar. Ah, bem, o 1º 1 é por comentários. Vamos em frente e fazer sua pequena bolha de revisão. Traga esse trabalho para revisar nossas classificações, apenas tornando este botão perfeito porque nós sempre podemos ir em frente e fazer a ferramenta de grade de repetição e criar os outros E nós também queremos ter algumas indicações de que tipo de maneira eles podem vá em frente e tenha uma opção de menu suspenso aqui, bem ali para que eles possam clicar. Então vamos em frente e pegar nosso pequeno agarro. Nossa flecha aqui não precisa ser ótima. Esta é uma indicação de que eles sabem que esta pode ser uma opção de menu suspenso. Queremos sempre dar às pessoas essa indicação do que é. Ok, então esse é o seu botão de audiência. Realmente? Aproximadamente feito. O que mais queremos fazer? Vamos em frente e clique na repetição. Vou em frente, realçar todos esses elementos, e depois fazer a ferramenta de repetição da grade. E vamos em frente e fazer três por agora. Não quero dar muitas opções às pessoas, e vou clicar com o botão direito e agrupar a grelha. Então, quais são outras coisas que podemos Então fazer aqui para as pessoas filtrarem? Então você tem uma classificação que você tem E t a. Você estimou o tempo de por que temos este mapa que vai listar quanto tempo ele vai saber, uh, corte de sua localização e assim como nós começamos a desenvolver esse tipo de idéia de R. Quando você se inscreve em uma conta, o que você ganha? Uma necessidade de saber? O que é este aplicativo vai precisar ser capaz de ter que desenvolver essa capacidade de mostrar quanto tempo levaria um determinado restaurante para entregar a você. Eles vão precisar do seu vestido. Então é aqui que você volta para esta placa original e vai para lá. Você precisa digitar a localização deles ou eles vão ter que dar permissão para Geo localizá-lo. Então essa é uma espécie de opção que precisamos começar a desenvolver e algo que talvez possa ter sido desenvolvido no fluxo de usuários. Mas não é algo que eu pensei durante esse processo. E está tudo bem. Você tem que ter algum para não pensar em cada pequeno truque para colocar em seu fluxo de usuários. Então vamos pensar nisso. Temos duas opções. Podemos fazê-los colocar em suas informações de endereço de conta, mas eu acho que é melhor para geolocalizar Ah, essa pessoa, porque ela pode estar no trabalho e um pedido de comida ou levar para fora entregue em seu trabalho. Então, em vez de ter uma ligação a um endereço de casa, então vamos em frente e fazer algumas pesquisas, descobrir qual é a melhor maneira de apresentar isso no processo, e eu já volto. 7. Wireframe de baixo respeitante - a tela de listagem: fazendo um pouco de pesquisa sobre esta questão. Eu pensei que seria melhor ter uma tela pop-up ao fazer login com o Facebook, fazer login ou se inscrever para uma conta. Então, logo antes de você chegar ao tipo de sua tela inicial você vai ter um pequeno módulo pop-up são móveis que vai aparecer e ter você, Ah, Ah, permitir acesso a Geo, localizá-lo para encontrar sua localização e sempre ter um clique . Sempre permitir. Portanto, eles não precisam ter isso toda vez que fazem login, o que seria muito conveniente para usuários repetidos. Então o que eu estou fazendo não é tipo de colocar a tela bem aqui neste local exatamente onde ele precisa estar, onde ele vai aparecer. Agora eu tenho É uma tela separada. Mas quando eu começar a ligar isso e o modo protótipo um pouco mais tarde na aula, eu vou mostrar como você pode, hum, meio que indicar um pop-up. Mas esta não vai ser uma tela separada. Ele vai ser colocado em cima de qualquer um do screener, esta tela, o que quer que eles registrem ainda vai ser um pouco mais de bater para ser outra tela, mas vai ser um pop-up em cima de você através da tela da tela, e você pode indicar isso e você está prototipando e modo de visualização, e eu vou lhe mostrar como fazer isso um pouco mais tarde. Então temos esse tipo de passo crítico. E foi ótimo que fizemos isso porque agora o APP tem acesso à sua localização, então agora podemos listá-lo por quão perto? Como é a rapidez com que esse restaurante pode entregar a você, que seria et A, que é um tipo realmente único de qualidade. E nós temos que tipo de contato com o desenvolvedor é se isso for aprovado para tipo de ver como isso é possível, é realista ser capaz de pesquisar tudo isso por ET A. Nós realmente adoraríamos isso. Se é muito caro para programar, temos que deixar de lado essa ideia. Então é meio legal pensar sobre isso no início do processo. Então, se precisarmos entrar em contato com o tipo de quem estaria assumindo isso, quem estaria desenvolvendo essa codificação, poderíamos começar, envolvê-los nesse processo de planejamento para que não joguemos surpresas e vamos embora. Não podemos fazer isso. Isso é muito caro. Assim, ser capaz de cortar o trabalho através dessas questões e trazer outros membros da equipe no início do processo vai ajudar todos. Então eu não quero dar um monte de opções porque, como nós fizemos, como nós fizemos, você é o X Discovery tipo de estágio onde nós falamos sobre a personalidade de usuário dela? Eles não têm muito tempo. Temos uma volta no Marler de dois anos. Eles querem pedir o jantar. Os realmente cansados. Trabalharam o dia todo. Então não vamos jogar termos de opções para nós não queremos que isso seja muito complicado de um aplicativo . Então vamos manter isso para as audiências e T.A. T.A. e vamos também ter um botão de busca porque você sabe que eles vão querer procurar que restaurante eles querem porque eles podem ter uma idéia. Oh, eu amo você sabe, Texas Roadhouse, ou eu amo McDonald's, e eles querem ser capazes de procurar o nome. Então vamos ter um tipo de botão de pesquisa simples, e isso não vai ser um menu suspenso. Vai ter um pequeno copo aqui, então vamos em frente e encontrar um ícone rápido para que possa indicar que não vai ser um menu suspenso. Vamos para a nossa folha de batota aqui, fazer da seção de ícones. de batota aqui, Veja se eu não consigo encontrar um pequeno espelho rápido, lupa, lupa, o que quer que você queira se referir, há um que funciona perfeitamente para o que precisamos para uma armação de arame de baixa fidelidade. Temos que nos preocupar com o estilo da marca. Então, temos uma pequena busca. Liguei para cá e podemos descobrir a localização disso mais tarde. Só queremos indicar ao cliente ou quem vai rever estes documentos e aprová-los que isso vai ser uma opção de busca. Vá em frente e desvinculado isso para que eu pudesse apenas torná-lo um link preto e branco e então eu vou ser capaz de ter acesso à cor. Só vou torná-lo dessa cor. Então é isso. Isso é tudo o que precisamos para opções de filtro. E agora estamos prontos para começar a fazer a nossa lista de restaurantes. Então agora estamos pensando sobre as entradas do restaurante, e queremos ser capazes de encaixar uma boa quantidade aqui para que eles não tenham que sentar lá, fazer dedo e virar o tempo todo para rolar para baixo. Portanto, queremos ser capazes de caber pelo menos cinco ou seis restaurantes. Mas também não queremos que pareça lotado. Então temos que pensar sobre qual é a informação mais essencial para colocar em uma lista de restaurantes , e exploramos isso um pouco durante nosso processo. Mas é aqui que nós realmente começamos a descobrir e colocá-lo em um pouco mais de detalhes. Então é Gwen Zoom in e o que eu amo sobre, hum, Adobe X T. Se eu quisesse ir em frente e ter este terminado e duplicado repetidamente, eu poderia emitir a ferramenta de repetição de grade clique na grade de repetição, e eu poderia ir em frente e facilmente ver quantos destes eu poderia caber na tela para que a grade de repetição para vai economizar uma tonelada de tempo. Então vamos pensar sobre isso. Temos uma classificação de pesquisa, por isso queremos ser capazes de pesquisar por classificações. Então deixe-me ver se eu não posso pegar um ícone de estrela ou mesmo apenas projetar um aqui muito rápido com uma ferramenta de pino. Tenho aqui a minha pequena estrela. Ver se consigo replicar isto no lado direito. Deixe-me fazer isso um pouco mais alto de contraste aqui. E poderíamos pensar um pouco sobre a sombra da cor. Não necessariamente a cor, mas talvez o contraste da cor. Então podemos pensar em talvez fazer um preenchimento para listar um cinza muito claro , ou neste caso, poderíamos até fazer um fundo cinza mais escuro. Então eu vou apenas segurar, opção e duplicar isso e trazê-lo aqui e fazer um tipo de muito, muito cinza claro e então fazer esta caixa branca para que realmente tipo de aparece um pouco sobre o fundo. Apenas ajuda o usuário a ver a listagem sobre o plano de fundo. Antecedentes não tem que lutar contra a listagem. Vamos fazer essas estrelas suficientemente grandes onde possamos ver a classificação, e o que poderíamos fazer é fazer classificações como em ter que mostrar cinco estrelas. Se é um cinco estrelas, temos que pensar sobre o tipo de sistema de classificação que queremos ter para este aplicativo. Então vamos ficar com o Sistema Estelar porque acho que vamos pegar um pouco disso de outro site de avaliação. Além disso, vamos pegar informações, então tem que ser algo que possamos trabalhar com ela. O desenvolvedor poderia puxar essa informação de Então, mais uma vez, outra oportunidade de falar com os desenvolvedores. Descubra qual é a melhor maneira de mostrar nosso qual é a melhor maneira de fazer o sistema de classificação possamos fazer isso. Mas veja quanta propriedade imobiliária que ocupa essas cinco estrelas é um restaurante com classificação de cinco estrelas que está ocupando muito imóveis. Então, uma coisa que podemos fazer é ter a estrela indicar uma revisão, mas tê-lo em um sistema americano. Vamos fazer a estrela um pouco maior, torná-la mais óbvia. Torná-lo um pouco mais alto. Contraste. Vamos adicionar um tipo de cor escura a ele, ter uma classificação sindical, e então poderíamos ter um sistema numérico. Então vamos duplicar isso e digamos, 4.4 de cinco. Isso nos impedirá de ter que fazer todas essas estrelas diferentes, e podemos ter nosso sistema de classificação aqui. Vamos ter o sistema de classificação estar à direita é a informação mais importante vai ser o nome do restaurante e o tipo de restaurante que é. E agora que eu acabei de mencionar que você está pensando, Oh, é aqui que nós constantemente vamos e vamos, isso é parte do processo de arame de baixa fidelidade . Você está constantemente voltando e adicionando coisas que esqueceu ou recebendo idéias e tentando incorporá-las. Porque agora que eu estou fazendo a classificação eu estou percebendo e eu acabei de mencionar o tipo de restaurante , não seria bom ir em frente e ter um filtro tipo de restaurante onde você vai? Quero comida brasileira. Eu quero comida mexicana que vai ser realmente essencial quando se trata de restaurantes para que seja uma opção que vamos precisar incorporar em nossa área de busca. Vamos em frente. Eu sei que queremos manter isso simples, mas eu acho que só adicionar mais um, talvez não fazer esta caixa é grande. Poderíamos ir em frente e apertar isso sem ter que fazer uma segunda fila. Vamos ver se podemos fazer isso sem fazer parecer muito apertado, e vamos ter que descobrir outro nome para o tipo, porque isso não está muito claro. Hum, você quer fazer Ah, restaurante, hum, restaurante temático tipo restaurante, estilo de comida. Então deixe-me pesquisar qual seria o melhor nome para essa categoria, e eu já volto. 8. Listagem de tela: Você vai notar. Eu estou constantemente indo em fazer pesquisa. E isso é quando você faz amigos de baixa fidelidade. Você não está apenas juntando as coisas constantemente interrompendo o processo, fazendo pesquisas, talvez conversando com seu cliente e indo e voltando para tentar fazer isso funcionar. Não vai ser desenhado num só dia. Então o que eu fiz foi ir ao meu mais próximo são meus maiores concorrentes, que é grubhub, que não tem entrega local, mas não tem mais em cidades maiores. Então eu meio que vi o que eles tinham e eles chamavam de cozinha. que faz sentido que tipo de cozinha você tem. Sanduíches americanos mexicanos, esse tipo de coisa. Então eu tenho a idéia de cozinha deles e ser capaz de tipo de entrar neste aplicativo e estudá-lo e tipo de obter algumas idéias. Eu também notei que eles têm o mesmo futuro que eu queria incorporar com o meu, que é tempo de entrega. Então, ser capaz de ver como eles lidaram com isso, não necessariamente copiando-os, mas apenas recebendo um tipo de ah, algumas idéias novas e e e eles já implementaram isso. Então é bom ver uma espécie de final, expor exatamente o que estou tentando fazer. Realmente ajuda a gerar essas ideias. Então, vamos voltar à nossa lista. Então temos a nossa classificação. Talvez queiramos encontrar uma maneira de dividir isso um pouco. Então vamos apenas obter um pouco de barra divisória, porque quando você tem um grande layout projetado quando você tem um monte de elementos diferentes juntos, é sempre bom ter barras divisórias. Caixas de alto contraste maneiras de dividi-lo para que o usuário possa tipo de ver como tudo está bem categorizado em um espaço apertado. Então vamos fazer esse baixo contraste. Isso é muito leve, Gracie. O baixo contraste aqui e eu vou me referir ao contraste muito nesta classe você quer ser capaz de ter certeza de que você poderia ter um nome longo ou nome curto, e ele funciona bem nesse espaço. Muitas vezes, quando faço nomes, finjo nomes. Eu faço nomes muito longos só para que eu possa ter o pior cenário em termos de quanto espaço eu vou precisar para caber nesse nome longo porque você tem um belo design. Mas se você não deixar espaço suficiente para o nome do restaurante ou os dados que serão conectados lá. Os desenvolvedores podem ter dificuldade em trabalhar com seu design. Quer ter certeza de que seu design é flexível? Pode funcionar com vários comprimentos diferentes. É um nome de restaurante que não gostamos. Precisamos ser tão grande, mas eu gosto de mantê-lo ousado. Vamos ter que ter o estilo da cozinha. Então você tem que fazer o mexicano fazer um alinhamento à esquerda e apenas colocar isso aqui embaixo para ter um nome de restaurante. Nós temos o tipo de cozinha, nós temos a classificação, e nós também queremos talvez colocar o E T bem, se quisermos ter quanto tempo vai demorar para chegar lá. O que é um tipo de característica legal do nosso aplicativo que temos que pensar é isso vai ser possível do ponto de vista do desenvolvimento de codificação, porque eles ainda vão precisar de alguma informação para desenvolver um destro. Ta. Se pedir 50 enchiladas, levará mais de 10 minutos para fazer 50 enchiladas. Então temos que começar a pensar que isso é possível? Posso obter um t a neste ponto ou dois após o peso até eu ir para check-out para ser capaz de obter o meu TA lá. Então temos que pensar nisso como uma possibilidade. Volte para o desenvolvedor e faça um brainstorm. Então é capaz de fazer um pouco de pesquisa. E eu percebi que, hum, não vamos fazer ET neste momento. Acho que não teremos informação suficiente para ter um ET A realista, especialmente de restaurantes locais que podem não ter tempo para dar feedback de como eles são ocupados . que não vai funcionar Achoque não vai funcionar na área local, a ser que seja uma grande cadeia de restaurantes que tenha a logística para lidar com essa parte da informação. Então eu estou apenas colocando a localização longe da localização geográfica de onde você está atualmente, e também quando eu estou pensando em finalizar este pequeno bloco para ser capaz de replicá-lo, certificando-se que eu tenho espaço suficiente para um nome de restaurante muito longo e eu não tenho certeza Isso é suficiente porque há alguns nomes de restaurantes bem longos lá fora, então precisamos ser capazes de saber que ele pode entrar em colapso para duas linhas de tipo e ter espaço suficiente aqui, que não mude o tamanho da caixa. Então isso pode significar que precisamos abaixar isso mais baixo para que tudo isso possa ser enviado para baixo por uma linha. Só precisamos ter certeza que nossa caixa será grande o suficiente. Desenvolvedores muito, muito bom de conseguir. Aprecio que, hum, ter espaço suficiente para eles terem vidas em colapso do tipo. Tipo de manter o desenvolvedor em mente. Vai ajudar toda a gente no processo. Você tem certeza que temos o suficiente para se encaixar no curso. Podemos sempre fazer as coisas um pouco menores. Tudo bem, então agora você pode ter duas linhas. escola deles acreditava nisso. E vamos em frente e levamos isso de volta. Sabemos que entrará em colapso automaticamente. Temos espaço suficiente, ótimo. Então, se nos sentirmos felizes com isso, eu queria ter uma espécie de indicação aqui à direita, talvez uma cor de alto contraste, cor de marca ou vermelho, ou algo onde eles possam indicar que eles poderiam ir para o desembarque página do site ou deste restaurante e começar a adicionar itens de menu. Então acho que estamos prontos para replicar, então vou em frente e agrupar essa caixa grande. Acho que não precisamos desse cara aqui, então vou agrupar essa bolha e vamos em frente. Repetir a ferramenta de grade. Eu adoraria me encaixar. Meu objetivo era cinco. Adoraria caber seis, mas não quero que seja apertado. Então vamos ver como o seis parece. Podemos ir em frente, entrar nas colunas e entrar em colapso. É assim que o seis se pareceria. Não acho que esteja muito lotado. Podemos sempre voltar e adicionar um pouco mais de espaço. Então vamos adicionar 10 pixels entre ou 12. Veja como 10 pixels entre cada escuta parece E eu amo tipo de como o fundo tem aquele cinza claro porque ele realmente ajuda tipo de que o branco sair melhor se nós não temos o cinza, tudo começa a se misturar. É difícil diferenciar onde a lista de restaurantes está em segundo plano. Mas ter essa cor diferente ajuda tremendamente em ser capaz de encontrar e quebrar essa informação. Então vamos encontrar um pouco para isso. Lembre-se, não queremos nos esforçar para o lado do design das coisas. Vamos mudar isso. Só quero ter certeza de que tudo está alinhado. Então temos a busca alinhada com o fim disso. Então, tudo tem uma aparência consistente. A mesma coisa com aqui. Talvez pudéssemos ir em frente. Tomei isso juntos para que este lado esquerdo esteja alinhado com as listas de restaurantes. Então eu queria tipo de obter um fundo branco lá para as bolhas que querem ampliado em um momento difícil encontrá-los. Eles estavam se misturando com o fundo pela mesma razão que estes estavam tendo um momento difícil aparecendo em um fundo branco. Então, apenas dando um pouco de contraste entre esse fundo na cor de fundo diminuindo o zoom. Vamos ter uma boa ideia do layout. É tudo fácil de encontrar? Eu poderia ler o nome do restaurante claramente fazendo todos os elementos digeríveis, fáceis de ler, entender. Dwight tem os ícones certos para ser capaz de indicar que eu preciso para o que eu preciso fazer para obter que para expandir como este mapa eu queria expandir para fora e assumir a tela é que indicação suficiente é tudo tipo de fácil de ler. Então isso é o que precisamos tipo de pregar para baixo antes de seguirmos em frente. Porque quanto mais entrarmos no processo, mais vamos realmente começar a ter uma idéia de como esse aplicativo vai fluir. E quando começamos a fazer o layout de alta Fidelity, o que é ótimo em fazer em um Adobe X'd, pois você verá como é rápido torná-lo um design de marca polido depois, porque vamos literalmente cair em . fotos iam mudar de cor, e vai começar a ganhar vida. E isso é o que é tão preciso fazer alta fidelidade de quadros de arame da minha coisa favorita a fazer. Então estamos chegando lá. Temos o sinal na tela. O que é maravilhoso sobre isso é este lado e tela para restaurante para mercearia. Vai ser a mesma coisa, por isso posso copiar e colar isto na nossa prancha e ir até aqui. Então este será um ramo de decisão e a jornada do usuário, e eles vão clicar em um restaurante e ir para o restaurante e continuar para o processo de check-out. Ah, eles também poderiam ir ao supermercado se quisessem. Então, é bom mostrar essa opção de arame. E nós trocávamos tudo isso para uma mercearia para fins de marcação. Lembre-se, Sticky Header vai estar em todas as telas. Então, aqui estamos nós. Aqui está o que temos até agora. Olha o que já fizemos. Temos um slog e opções de registro de tela. Temos uma caixa pop-up para nos ajudar a obter as informações que precisamos do usuário para fazer nossa pesquisa mais tarde, temos nossas opções de restaurantes de supermercado. Nós os levamos para o supermercado ou restaurante. E agora estamos prontos para fazer a página de destino do restaurante. Então eles recebem um seleto uma dessas opções. Talvez aquele que é o mais bem avaliado. Talvez eles vão clicar nas classificações e clicar no mais alto e clicar no topo. Depois vão para a página de destino dos EUA. Seremos os próximos. Vamos copiar e colar isto. Então vamos cortar para manter a, uh, esta caixinha aqui. E em vez de fazer disto um mapa, vamos ter um mapa. Mais tarde. Vamos fazer disto uma foto do restaurante. Não precisamos mais desses filtros. Ele deixou cair o filtro desde que apagou isso. Não vamos precisar de todas essas opções e o que queremos ir em frente e começar a ter o menu tipo de no mesmo estilo. Então acho que é exatamente isso que vamos fazer. Um no grupo nesta grelha. E nós só precisamos da melhor opção para que possamos ir em frente e personalizar isso. Agora temos que pensar no que queremos na página de destino do restaurante. O que é importante ver depois que você tem tipo de querer explorar o restaurante Ah, foto de alimentos que você pode percorrer foi provavelmente a coisa que eu quero saber. Eu quero saber como são as entradas se parecem? Como eles pareciam? Apetitizante. E então há essas fotos podem ser como uma coisa deslizante onde você pode pegar seu dedo e apenas ter um carrossel deslizante. Vamos fazer isso. Vamos meio que indicar, Ah, carrossel. De uma forma que poderíamos fazer isso. Está tendo um par de repetições. Ele está indo. Tire borda fora de círculos repetitivos que indicam quantas fotos estão disponíveis para rolar . Ok, isso vai ser um pouco educativo. E talvez pudéssemos ter uma indicação. Onde você, Steve? Uma foto. Ponha isso no fundo. Deixe-me tornar isso um pouco mais escuro. Não a fronteira, mas o Phil. E isso pode indicar a foto. E isso pode indicar que talvez você veja um pouco da outra foto ao lado dela. E o que eu amo sobre isso que tipo de te dá uma pequena prévia. Então, você sabe, tipo de quê? que lado você deseja deslizar um dos deslizes para a esquerda ou para a direita? Qual foto parece mais apetitosa em um pequeno teaser nos lados esquerdo e direito. Isso é meio legal. Nicotrol. Aqueles ar alinhados corretamente, poderíamos ter um ser enquadrado como este. Mais espaçamento entre nossas fotos. É um pouco mais óbvio há pouco. Então, há tipo de nós que teria o nome do restaurante. Então vamos em frente. Duplicar o nome do restaurante. Preciso ter isso em algum lugar. Então poderíamos ter um restaurante chamado aqui em baixo tipo de cabeçalho e fazer isso mais escuro, e então nosso sistema de menu. Então aqui está o nosso cardápio. Eu não quero ter talvez tipos de menu. E depois, em vez de ter de continuar a enviá-los. Estamos mandando ele para muitas telas diferentes, então poderíamos usar menus pop-up. Poderíamos fazer deslizamentos. Poderíamos fazer Ah, menus que se expandem, mas não necessariamente trazem para outra tela. Basta tentar reduzir a quantidade de telas totalmente diferentes que o usuário vai ter que saltar através da ordem. 9. Lista de menu: Agora precisamos pensar sobre quando você está na página de destino. Qual é a melhor maneira de apresentar todos os diferentes tipos de menu que você tem porque você tem aperitivos, entradas sobremesas, pratos pequenos, top nós temos lotes de diferentes categorias, e Nós não queremos sobrecarregá-los. Eu me sinto como um formato de lista se fizermos um formato de lista e pode ser um pouco difícil, porque talvez o que eles estão procurando está no final da lista. E eles têm que se esforçar para obter entradas do dedo do pé ou escola para obter sobremesas. Então eu estou pensando que talvez um layout baseado em coluna lado a lado poderia funcionar um pouco melhor, e assim eles seriam capazes de ver mais um pouco mais acima neste na tela. Então vamos tipo de justiça parece fazer um pequeno Warner. Eu não vou gastar muito tempo nisso e fronteira com iluminá-lo e vamos ver se podemos usar a ferramenta repetir grande. Então vamos pegar nosso pequeno título aqui, e isso será sobremesa. Não há tudo isso. Seremos sobremesas, mas seremos capazes de ter uma ideia. Vamos fazer um alinhamento central de como isso vai parecer. O que eu vou fazer é talvez ter a oportunidade de ter um símbolo ou foto lá que indique uma sobremesa. Então, para indicar um ícone, vou fazer um círculo de avião. Não vamos projetar. O ícone fará isso na próxima fase, mas precisamos ter certeza de que temos espaço suficiente para nomes muito longos. Nem tudo vai ser um nome curto e conciso. Vamos mantê-lo largo. Arranja um grupo. Vamos ver o que isto parece. Com a repetição, Great Tool é devido a colunas e vamos fazer seis profundidade. Vamos fazer oito. Só para realmente ter certeza de que mostramos um nome de restaurante que nossas categorias de restaurantes podem ter um monte de categorias de restaurantes. Vamos fazer a mesma largura e a coluna aqui. Então vamos ver quantos pixels que IHS é Ah, é 14 e vamos fazer 14. O que você acha? Você acha que isso funciona? Porque agora temos que pensar em qual é o próximo passo se eles querem pedir uma sobremesa. E então eu estou pensando, você sabe, eu não tenho certeza se isso está funcionando, porque se você fizer um pequeno menu pop-up. Digamos que há um pequeno estouro. Então você pode sair assim e você será capaz de adicioná-lo. Mas eu acho que a partir de um ponto de vista de desenvolvimento do ponto de vista de codificação que talvez possa ter alguns problemas com o menu pop out. Então eu vou realmente acabar com toda essa idéia, e eu vou voltar para essa idéia de fazer as colunas. Você notou como eu tive que testar isso? Tive que testar isso no mar, mas ia funcionar ou não. E eu não sabia que ia funcionar até eu começar a pensar que eu poderia ter dois mandá-lo para uma tela inteira separada. E eu quero evitar isso. Então isso não vai dar certo por essa razão eu vou manter isso por perto, caso eu precise mais tarde. Deslize isso para fora. Então retrabalhando isso um pouco para ter um menu melhor pop out tipo de ação quando isso acontece , apenas tipo de fazer algo muito simples. Isso é meio que atravessando. Mas eu fiz muito mais magro ou então eu posso fazer a ferramenta de grade de repetição e caber pelo menos seis desses caras, tudo em um lugar muito agradável, conciso foi fechado. O colapso, o padrão aqui um pouco. Então, talvez por aqui. Quero dizer , vantagens, entradas, sobremesas. Continua a descer a lista. E então precisamos descobrir o que vai acontecer quando clicarmos no tipo de opção expandir . E isso será meio que na próxima tela, onde vamos desenvolver isso. Livre-se de tudo isso. Todos esses itens, pessoal, nós vamos tipo de duplicar o que temos aqui, e isso será o que acontece na expansão do menu. Então, o que vai acontecer? Apatiless sob o grupo da rede, poderíamos ter acesso a todos esses e enviá-los para baixo, então vai ser uma espécie de estilo acordeão drop down down. Isso poderia ter caído com todas as opções diferentes aqui. E lembre-se, assim como fizemos antes. Temos de ter a certeza de que temos espaço para nomes muito longos porque há alguns nomes einem laterais muito longos em restaurantes. Então, vamos talvez reduzir o tamanho do texto, e talvez nós só precisamos tê-lo como uma espera normal. Então, isso vai deixar muito espaço para opções de tamanho muito grande. Temos um carrinho de compras precisa ser capaz de adicionar esses itens ao carrinho de compras. Precisamos de um sinal de mais ou menos para indicar que querem quatro batatas fritas. Eles querem apenas uma batata frita e algum tipo de botão que indique adicionar ao carrinho. Então temos muito espaço aqui para ser capaz de fazer isso. Então vamos fazer isso a seguir. Ok, então eu fui capaz de trabalhar nisso um pouco e tenho um par de muito arcade tipo de botões para indicar o tipo de ações que o usuário precisa tomar para ser capaz de adicioná-lo ao saco. Neste caso, chamei um carrinho, mas acho que precisamos chamar de saco. Vai fazer compras. É bom poder adicionar coisas a um saco. Quando você vai buscá-lo no restaurante, você está adicionando a um saco. Este tipo de nós estamos encontrando algum desse idioma um pouco enquanto eu trabalho através deste processo, e então nós vamos precisar de um botão que indique, adicionar o saco. Então vamos em frente e fazer um pouco de um botão de contraste mais alto e vamos em frente e mudar a conta. Então esse tipo de ajuda esse elemento a sair e não competir tanto com a adição aos itens. Então você pode dizer como este tipo de você volumoso que eu projetei agora vamos refinar isso um pouco mais tarde. Mas eu acho que em termos de espaço, eu deveria ter espaço suficiente para poder preencher as opções aqui. Eu sempre poderia fazer o tipo um pouco menor, movê-lo para a esquerda um pouco. E quando fizermos o que eu desenhei, podemos sempre desmoronar-nos. Faça isso um pouco mais refinado para nos dar um pouco mais de espaço para nomes de opções laterais mais longos . Então o que vou fazer aqui é pensar que ainda tenho isso como a ferramenta de repetição da grade. Vai colapsar de novo e tirá-lo da grelha de repetição para que eu pudesse pegar esta opção , juntá-la e repeti-la com o tipo dentro. Então eu acho que fizemos cinco opções e vamos desmoronar isso aqui embaixo, poderíamos colocar um pouco de espaçamento entre ele. Não sei se isso ajuda ou não. Talvez ele faça. Uma coisa eu quero fazer antes de fazer tudo isso. Deixe-me aliviar o golpe na fronteira. Não queremos pensar numa fronteira, por isso deixa-me descer e fazer com que seja uma. Vamos fazer um 0,6 Só gosto de levantar um pouco. Agora eu estou pronto taxas. E agora que tipo de exibição? O que acontece quando entra em colapso? Eles clicam neste botão. Esta não é uma tela totalmente diferente, mas é algo que nós seremos capazes de não ter mostrado animação. Quando fazemos um modo de protótipo quando ligamos tudo juntos, vamos mostrar o menu de deslize para que ele o tenha em uma tela separada no X d. Hum, para ser capaz de realizar essa animação, mesmo que não seja uma tela separada para o usuário. Ótima. Então vamos diminuir o zoom, ver o que temos até agora, então lá, capaz de adicionar diferentes itens laterais. Então agora vamos em frente e clique nos usuários que vão clicar no carrinho de compras, eles vão estar prontos para check-out. Então, agora que estou pensando em OK, você está adicionando opções à sua bolsa. Agora o que? Então, digamos ter adicionado a opção um e opção a uma opção três. Como faço para sair? Eu só vou ao carrinho de compras? Não é óbvio o que você faz em seguida, então eu preciso ser capaz de descobrir uma maneira de voltar para a página de destino do restaurante, para ser capaz de tipo de ter uma tela de check-out ou ter a opção de sempre check-out imediatamente. Então, só adicionando alguns outros itens detalhados que o trabalhador quer ter uma página de destino? Nós não poderíamos sequer ter uma opção para colocar em alguma cópia, talvez algumas frases sobre o nome do restaurante e também precisamos ter um lugar para encontrá-lo no mapa. Então vamos precisar ser capazes de ter isso como uma opção. Então eu vou mudar isso e ter talvez um pequeno ícone de mapa, ver se eu não consigo encontrar um ícone de mapa aqui em nossos pequenos elementos você uma vez que ele não vai ser um bom ou na verdade você sabe o que uma maneira melhor eu sei exatamente o que podemos fazer. Eu poderia entrar no Adobe Illustrator. Vou pegar meu pacote de marca que tenho juntos. E eu tenho o ícone de vontade perfeito para indicar um mapa. Então vamos usar isso. Isto faz parte da nossa marca para a nossa aplicação. Por que não incorporar elemento operacional de seu aplicativo no design do ícone? Então deixe-me ir e pegar um par destes e exportar estes para que eu possa tê-los como ícones no W x d. 10. Carrinho de compras: Estou ajustando nosso layout, adicionando todos os tipos de detalhes que são necessários para que o usuário tenha todas as informações necessárias para verificar corretamente e adicionar ao carrinho. Então queríamos ter a opção BAP. Eu queria mostrar o quão longe o restaurante estava de sua localização, e eles também podem clicar sobre isso e uma pequena caixa pop-up irá em frente e carregar um mapa que irá mostrar um tipo de e t. A. Com base na ordem que eles colocaram em sua corte. E eu queria ter certeza de que tínhamos classificações aqui e alguns desses detalhes que estavam na página anterior para que eles pudessem ter consistência com a página de destino. Então eu também queria ter ou de você ordem botão na parte inferior se eles foram para tipo de ficar confuso e não saber que eles estavam prontos para check-out quando eles têm um pedido de revisão, tipo de lembrá-los que eles poderiam ir em frente e check-out. E eu também queria ter uma indicação aqui de que quando você adiciona algo aos carrinhos, algo acontece e nós poderíamos fazer uma animação quando vamos para o layout de alta fidelidade que pode indicar que talvez isso amplie um pouco de aparece. Ela não mudaria sua cor para saber que você poderia clicar aqui para fazer o processo de check-out a qualquer momento. Quer adicionar algo ao carrinho? Então vamos fazer isso. Vamos adicionar outra tela aqui, e isso vai ser apenas para a animação para mais tarde. Nós vamos apenas ir em frente e mostrar o que é e o quadro de fio de baixa fidelidade para que possamos mostrar ao cliente tipo de como planejamos fazer em termos de animação e exibição. Ah, indicação clara de que o processo de check-out está pronto para prosseguir. Então, o que podemos fazer aqui? Podemos fazer isso um pouco maior. Podemos ter isso um pouco maior e vamos fazer uma animação mais tarde, então vamos fazer isso acontecer quando eu puder fazer isso ainda. Vamos mostrar o que mudaria quando algo é adicionado aos carros. Digamos que dois itens foram adicionados ao cartão. Digamos que isso inverte vai dizer que fica mais escuro e o número fica mais claro é mostrar indicação de uma mudança. Talvez seja vermelho. Talvez seja uma cor diferente, e podemos indicar isso para que o usuário queira clicar nisso. Então vamos mudar a sombra aqui. Eu sei que estamos apenas fazendo preto e branco por enquanto, mas vamos indicar muitas mudanças acontecendo. Então, o adicionar ao carrinho isso irá adicionar automaticamente o cartão e ter um pouco de animação pop. Talvez ele tipo de zoom dentro e zoom fora apenas uma quantidade muito pequena. Tão fantásticos foram muito próximos. Veja como chegamos tão longe no processo. Todas as telas que estamos zombando e estamos indo um pouco mais longe do que muitas pessoas fazem são armações de arame de baixa fidelidade. Muitas pessoas estão desenhando isso no papel, então eles não estão pensando sobre esses pequenos detalhes que nós somos. Mas quando se trata de desenvolver o quadro de arame de alta fidelidade, nós realmente temos muito feito. Fizemos um monte de bases em termos de onde as coisas estavam indo que nós só temos que refinar o lado gráfico Então agora que fizemos isso, qual é o próximo passo? Vamos para o nosso diagrama de fluxo de usuário há coisas adicionadas no carrinho. Agora eles vão querer ser capaz de verificar e rever o carro para ver o quanto tudo é. Então precisamos de um tipo de uma página de check-out CART ou, neste caso, uma tela de saco de compras que vai viver impostos no total e quanto este aplicativo custa como uma taxa de serviço. Então, aqui está a tela do nosso saco de compras, então vamos em frente e título Algo vai em frente, faça isso. Ah, saco de compras e queremos ser capazes de começar a mostrar o E.T. Agora que sabemos que temos o valor que está sendo encomendado. Conhecemos o restaurante. Sabemos a localização. Nós temos todos os dados que precisamos para ser capazes de mostrar sobre E.T.A. E.T.A. E.T.A. tempo estimado de chegada para a nossa entrega de alimentos. Então, ao invés de ter essas fotos lá em cima, poderíamos ter a chance de fazer disso um mapa. Então este será um mapa visível com um e. T. T. A. Havia duas pessoas que têm este ícone ir para usar o nosso pequeno símbolo de marca que temos em nosso logotipo é o ícone deles. Eu poderia ser capaz de ungroomed isso e mudar as cores e mais uma vez apenas mantê-lo simples orgulho. Só a sombra lá. Então isso será uma espécie de indicação de onde ele está. Nós vamos ter um pequeno botão, e eu tenho, eu acho, o perfeito. Vou abrir por um pequeno traidor ela aqui e ver se consigo encontrar algo indique o E.T.A. E.T.A. tem um pouco de bolha para colocar o número, ver como é fácil uma vez que você meio que tem alguns desses projetado. Às vezes eu vou voltar para projetos anteriores e pegar você I elementos de lá. Aí está o que é perfeito aqui. É o que eu quero. Ok, então isso vai indicar et a. Digamos que E. A. vai ser. Digamos que é uma hora de chegada de 12 minutos e 12 minutos. Há uma localização no mapa do saco de compras. Não precisamos mais dessa informação. No nosso fluxograma, fomos capazes de ver concorrentes, restaurantes próximos que talvez tivessem um tempo de entrega mais rápido, então nós queremos ser capazes de ter isso em nosso quadro de arame também, porque eu acho que isso é um tipo de recurso para ter. Então vamos ter aqui. E isso vai ser um pouco ótimo porque não queremos que as pessoas olhem para isso . Vê isso? É a hora de chegada deles. Vamos deixar isso um pouco mais escuro, Bray e fazer isso. Vamos falar com o Eero, e este será um restaurante alternativo aqui. Nós vamos ter que descobrir algumas maneiras gráficas para ter certeza que isso é óbvio. Faremos o layout de alta fidelidade? Que esse não é o restaurante é o restaurante que eles estão checando? Este é o restaurante do qual eles terão uma opção. Talvez seja umtempo de entrega mais rápido, tempo de entrega mais rápido, certo, e é de um tipo semelhante. Talvez seja comida mexicana, e carregue outro restaurante mexicano que tem um tempo de entrega mais rápido. Então, em vez de oferecer algum restaurante aleatório tinha e quer chinês, eu queria mexicano que ele está dentro da mesma categoria de tipo de comida. Ok, então aqui está uma sacola de compras. Nós não precisamos mais de todos esses elementos para que possamos excluí-lo Estamos para manter nosso pedido de revisão ou vamos dizer compra agora terminar ordem para terminar ordem será muito menor, mas no final. E não queremos a tela. Fizemos uma espécie de pesquisa em U X e decidimos que queremos ter uma tela de check-out muito, muito, muito simples. Só queremos uma tela. Nós não queremos que o usuário tenha que rolar, então vamos em frente e recolher isso para que o usuário não precise rolar. Faremos o nosso melhor para garantir que você vá e faça isso. Clique em cima para o nome do meu quadro de arte superior e obtenha que seja do tamanho da tela. Ótima. Você não quer que eles rolem. Queremos tentar ficar concisos. Se não pudermos retirar os menus, vai fazer isso. Ok, então este será, uh, uh, ser o item de comida um. Nós vamos ter uma espécie de remoção. Precisamos ser capazes de remover do carrinho. Então o que eu vou fazer é ir em frente, pegar emprestado da tela do outro lado do caminho. Sempre tem que dar às pessoas a opção de remover e voltar no tempo. O aqui é tipo do nosso item de remoção. Nós também queremos dar-lhes opção para não apenas remover o item, mas para remover talvez um. Talvez haja cinco e ali, mas eles só queriam quatro batatas fritas, mas há cinco batatas fritas que precisamos pegar. Dê também a eles a opção de adicionar subtrair. Vou pegar esses elementos emprestados, já que já assinei. 11. Checkout para final: Passei cerca de 10 minutos trabalhando nas próximas duas telas, e eu quero tipo de andar através do tipo de por que eu tomei algumas decisões de layout que eu tomei. Então nós temos um tipo de um processo de check-out muito simples. Queremos ter uma tela única. Nós não queremos ter que rolar o processo de check-out, e eu pensei em listar todos os seus itens e tê-los desdobráveis, mas também ter os impostos listados. Há uma taxa de serviço e entrega, mas também ter uma área onde eles podem digitar e adicionar uma dica porque é bom ser capaz entregar algo e não ter que se preocupar em dar gorjeta a ninguém. Ele já é uma parte do processo e o finalmente de muito fácil de ler Total e um botão de ordem agora e de modo que quando eles clicarem no botão de ordem agora, eles vão vir para esta tela. Eu era capaz de obter isso a partir da folha de truques um pouco você, eu kit que nós baixamos do Adobe o kit de arame Will, e isso me economizou uma tonelada de tempo tendo que digitar todas essas coisas e descobrir o que é necessário para um cartão de crédito. Foi muito bom copiar e colar isto. Podemos adaptá-lo ao nosso próprio estilo mais tarde. Mas eu adicionei essa carteira de cartão de crédito porque queremos é a primeira vez que eles estão fazendo check-out. Eles não têm um cartão de crédito registrado, então vamos ter que dar a eles a opção de adicionar um cartão de crédito para que todos eles tenham que ir fazer este passo na próxima vez. Vai ser só querer usar o seu cartão no arquivo pop-up caixa e eles clicam, Sim, e então nós começamos a realmente realçar isso. Faça todas as opções disponíveis para o usuário para o design. Teremos que ter aquela pequena caixa pop-up desenhada isso também. Então, há, você sabe, agora nós estamos apenas recebendo o básico, então vamos fazer isso um pouco mais tarde, assim que entrarmos no processo. Então, há realmente um tipo de tela três telas que o usuário vai passar pelo processo de check-out , e nós poderíamos pensar que eram muitos? Existe uma maneira de consolidar? Acho que não há. Estou tentando trabalhar para simplificar ainda mais esse processo. Isto é quando eu poderia falar com algumas outras pessoas que têm propriedade neste projeto e descobrir quais são seus pensamentos e idéias, especialmente falando com os desenvolvedores que podem ter ah, solução são certos pop up uma opção slide out que poderia tornar este processo ainda mais rápido. Então, por agora, para quadro de fio básico e obter algumas idéias do processo geral, eu acho que isso funciona bem. Eles revisam a ordem que revisam, eles clicam em ordem agora, e eles têm que adicionar adoção. E depois vai sobrar mais uma tela depois disso. E vai ser o que acontece quando eles têm um processo de check-out bem sucedido e vai mostrar que o E.T.A . E.T.A é uma tela de mapa muito grande. Então o que eu poderia fazer é duplicar uh, algo aqui em cima. Talvez aqui já tenhamos um mapa e expandamos um pouco mais. Vai mostrar quanto tempo vai demorar. Nós não precisamos mais dos concorrentes, já que eles foram em frente e fazer seu pedido. Coloque isso na frente e no centro, e eu acredito que se voltarmos para o diagrama de fluxo de reserva, nós tivemos a opção de entrar em contato com o restaurante se eles quisessem mudar o pedido. Então vamos copiar este botão para que possa ser, Ah, mudança de ordem, ordem de anúncio. E esse botão terá uma tela pop-up que terá acesso ao número e talvez um recurso de mensagem de texto para entrar em contato com o restaurante. Então vamos fazer outra opção que eu acho que iria voltar para o diagrama de fluxo de usuário que criamos. Há também a capacidade de talvez rever, mas isso não vai chegar até um pouco mais tarde no processo. Então temos. Estamos dando a eles a opção de alterar ou adicionar ordem. Vamos fazer o NAPA realmente grande, e isso será atualizado, mas um pouco maior. À medida que a pessoa se aproxima, será como uber onde o curso onde eles recebem o vai mudar e, em seguida, teremos a tela após a entrega bem-sucedida que irá pedir-lhes para rever a experiência. Então entrega bem-sucedida e eles terão a capacidade de ser capaz de avaliá-lo Então, entrega bem-sucedida. Teremos, talvez, um belo gráfico. É uma chance de fazer algum trabalho de design mais tarde, vai ser capaz de cruzar as vendas. Queremos enviá-los de volta, interessados e encomendando mantimentos, deixando-os meio entusiasmados com o próximo passo. Claro, os carrinhos deles vão ser reduzidos a zero porque acabaram de sair. Certo? Então ainda há muito para projetar. Temos que desenhar os menus pop out. Temos que projetar o que acontece quando eles clicam no cartão. Se vai haver um “The New Yorker “, vai direto para o carrinho. Há muitas coisas que precisamos desenvolver. Este é apenas um ângulo. É esta uma viagem através, check-out de um restaurante, ainda precisamos que eles chequem uma nova mercearia não fazer isso nesta classe, porque levaria de 20 a 30 horas para realmente projetar cada tela na baixa fidelidade maneira. Então vamos nos concentrar no processo que fizemos e trabalhar em seguida. Vá para a Alta Fidelidade. Esta é a minha parte favorita. Esta é a parte divertida que poderíamos incorporar os braços de marca. O logotipo vai começar a fazer alguns ícones personalizados. Podemos adicionar nossa paleta de cores lá, e será um processo muito rápido. Este é o dever de casa duro Nós fizemos todo o realmente difícil para o trabalho, e agora é hora de chocar sobre este designer, realmente mergulhar em novo eu desejo. 12. Wireframe de alta fidelidade - introdução de bud: É aqui que a diversão realmente acontece. Estamos prontos para enfrentar finalmente, aquele quadro de arame de alta fidelidade quando chegamos a realmente trazer a parte de design das coisas e nos divertir e correr um pouco selvagem. É aqui que meu fundo de design gráfico realmente brilha e vem a calhar. E se você tem um fundo de design, isso é fantástico. Este é o lugar onde você realmente começa a jogar e usar suas habilidades. Então aqui temos nossa armação de fio de baixa fidelidade chicoteada. Aqui. Nós temos um tipo maravilhoso de começo, e agora nós podemos polir tudo para cima ou apenas ir tela por tela. Podemos não ser capazes de fazer todos eles, mas estamos fazer é muitas telas quanto possível e e uma quantidade decente de tempo. Então, uma das primeiras coisas que queremos fazer é definir nossas cores, nossas fontes para uma marca e trazer alguns de nossos arquivos de logotipo. Então eu tenho um guia de marca que desenvolvi no Adobe Illustrator e tenho isso disponível para você baixar. Se você quiser ir em frente e usar isso como uma marca simulada para você e eu tenho todos esses tipos diferentes de ativos de estilo configurado. Tenho códigos hexadecimais coloridos. Eu tenho alguns logotipos em um fundo escuro e em um fundo branco, e eu tenho um par de ícones coloridos diferentes. Então eu vou trazer tudo isso como P e G. Vou mostrar-te isso rapidamente. Por que não? Por que não mostrar todos os pequenos passos que passo? Vou criar vários quadros de arte em volta dos meus logotipos. Sente-se e eu sou um grupo aqui. Então tudo o que eu fiz foi criar quadros de arte em torno de cada um desses elementos que eu vou precisar como um PNG transparente vai apagar a exportação de fundo que e todo o tipo de exportação bem. Você está em seu guia de recursos para download. Tenho ativos de marcas locais. Eu tenho todos os ícones como S. P G, e eu também tenho alguns dos arquivos locais como transparentes. P e G estarão arrastando isso e mexendo com isso em nossa simulação de alta fidelidade . Agora que temos alguns arquivos para trabalhar com algumas imagens, vamos voltar à ordem do Adobe X para configurar as opções de tipo, bem como configurar nossos códigos hexadecimais em nossos ativos de cores. São os três códigos hexadecimais que desenvolvi para esta marca em particular. Eu só vou trazê-los um por um para Adobe X T, e ele vai desenhar apenas uma caixa indo clicar sobre para preencher. E eu só vou acelerar esse código hexadecimal e então eu vou desmarcar borda, e então eu posso adicioná-lo como ativos iria clicar com o botão direito em adicionar cor aos ativos. Vou duplicar esta caixa e fazer a mesma coisa. Vá em frente e carregue minhas outras cores. O que eu amo sobre o Adobe X'd é este painel de estilo global onde podemos editar alguns desses estilos e não globalmente em todo o documento, porque você pode ver que já fizemos tanto quando se trata de nosso tipo e tipo de obtê-lo definido para ser um Que pena se tivéssemos que entrar e mudar cada uma das escolhas de tipo para a que gostaríamos. Então o que você poderia fazer é aqui estão os quatro que são usados atualmente no documento. Poderíamos começar a ter um pouco de hierarquia de tipo acontecendo? Determine qual será o nosso H um ou cabeçalhos grandes. Qual vai ser o nosso H dois? Um pouco de um cabeçalho de tamanho menor. Qual será o nosso parágrafo? Nosso tipo de cópia corporal. Podemos ir em frente e definir a fonte. Espere e vá em frente e arrume tudo isso. Então, se alguma vez precisarmos mudá-lo em uma escala global e mudar 50 telas diferentes, basta clicar com o botão direito do mouse, ir para editar. E você pode ir em frente e trocá-lo assim que eles estiverem prontos e nós mudaremos todos os tipos de letra que estão definidos para esse estilo global. Então isso é muito útil quando você está fazendo você. Eu desenho. Então o que eu vou fazer se eu quiser tipo de descobrir o que é selecionado agora como fizemos nossa armação de fio de baixa fidelidade foi um pouco louco. Nós meio que batemos juntos. Então agora precisamos ser um pouco mais precisos quando se trata desse tipo de problemas, porque vamos começar a projetar muito mais telas e terminar tudo isso. Então vamos dizer que eu quero saber O que é este Aerial 16 Eu tenho quatro diferentes que precisávamos Title estes e certifique-se de configurar um bom tipo R G antes de continuar. Então eu vou clicar com o botão direito, e ele poderia fazer destaque na tela, e isso vai destacar todo o tipo que é usado aqui. Então, parece que isso vai ser cortado de um cabeçalho superior aqui. Então, obtê-lo. Uh, vá em frente e nomeie este tipo de cabeçalho superior. Isso é apenas o tipo de me ajudar a saber quando usar esse estilo em particular ou qual é esse estilo . Vou para o próximo. Vamos em frente e destacar isso na tela. Ok, então este é o nosso texto de botão para que eu pudesse ver todos os botões. Tem este tipo para ele. Vamos em frente e dio-fazer botão, mas em texto. E vamos em frente e fazer isso. Continue indo por toda parte. Ok, essa vai ser a nossa cópia corporal. Um pouco menor. Nós vamos passar por isso e meio que configurar tudo para que possamos ter não só um tipo legal, Harkey. Sabemos qual será o tamanho do cabeçalho. O que vai ser para que tudo seja consistente em toda a peça, então eu sei que todos os cabeçalhos ou tamanho de 14 pontos ou tamanho de 16 pontos, todas as cópias do corpo, tamanho de 10 pontos e uma espera normal. Então está tudo pronto. Você poderia ajustar as cores. Você configura seu tipo e nós confinamos a este tipo como nós trabalhamos em seu tipo de design porque nós podemos acabar mudando o tipo de letra, nós podemos acabar mudando o tamanho e sempre podemos adicionar mais estilos de personagem como nós realmente incorporar este projetar fora. Então isso sempre vai ser uma espécie de área de trabalho para nós. Vamos continuar a adicionar e editar como continuamos a fazer isso, vamos fazer alguns símbolos. Então poderíamos ter feito isso um pouco na baixa fidelidade. Mas quando estamos fazendo a baixa fidelidade, não estamos pensando em tudo isso ainda porque os projetos ainda não foram aprovados. Então agora que temos um tipo de aprovação para seguir em frente e realmente fazer isso um layout de acabamento liso , vamos tentar vincular todos os nossos símbolos. Então, quando vinculamos símbolos, podemos alterá-lo globalmente. Então, agora, isto. Fiz o que fiz. Eu estou certo? Cliquei e criei o Assemble com isso. Então agora aqui está o meu símbolo. Então agora eu posso ir em frente e mudar isso para ler se eu quiser. O que eu preciso fazer é substituir este símbolo. Basta manter pressionada a opção e apenas substituir o símbolo com o símbolo de link. Então, agora, quando eu voltar e mudar o símbolo, ele vai fazê-lo em ambos. E eu não tenho que sentar lá e mudar a cor em ambos. Isso será muito útil se você vincular todos os seus símbolos para que tudo o que você tem que fazer é tipo de pressionar um botão e todos eles mudam em todos os cabeçalhos diferentes. Vamos montar isso e fazer que a montagem também foram queridos para nossos sacos de compras montar. Então, quando um clique direito e fazer montar para que também possamos mudar o saco de compras navio da mesma maneira, eu provavelmente faria o cabeçalho como um símbolo para que eu possa mudar este cabeçalho em todos os cabeçalhos diferentes ao mesmo tempo porque Eu posso querer alterá-los todos no final do processo de design pode ser, o cliente diz que eu gostaria que o cabeçalho para ser branco. Isso não vai ser um grande problema para nós mudá-lo em 100 telas se eles estão todos ligados como um símbolo. Então eu vou fazer isso bem rápido. Vou em frente e obter todos esses links para que nos tornemos mudados todos estes muito rapidamente. 13. Wireframe de alta fidelidade - a tela de login: Então o que eu fiz aqui foi agrupar este elemento. Eu vou em frente e um grupo e mostrar o que eu fiz todos estes ar individuais, diferentes símbolos ligados. Se você for até aqui, você pode ver todos esses links símbolos com, claro, claro, nomeá-los para que você possa vir a saber quais deles o menu de hambúrguer. Quais não, mas eles são todos um individual, então eu posso alterá-los como símbolos individuais, bem como este gráfico de fundo ou barra. Então tudo o que fiz foi agrupar todos estes juntos, e estou apenas a colocar estes no lugar. Ele fica encaixando bem no topo da página, foi capaz de substituí-los todos muito rapidamente. E agora que os tenho em símbolos e você mostra como isso é divertido, então vamos ao menu de hambúrgueres bem aqui. Este é o nosso símbolo de ligação. Vamos seguir em frente e apenas nomear tudo isso. E agora eu vou ser capaz de editar para que eu possa ir em frente, selecionar este símbolo de link que no grupo e eu quero alterá-los todos. Então, agora eu o fiz todo vermelho assim. Então, se quisermos experimentar a cor. Poderíamos começar a afinar esse cabeçalho. Então, se eu quiser usar nossa cor de marca aqui, eu quero tipo de mudar para esse tipo de cor azul verde. Assim mesmo, está feito. Eu também quero talvez mudar essa cor para como um cinza claro feito. Fiz isso globalmente em todos eles. Nós não nos sentamos lá e fazemos isso repetidamente em cada tela. Quero dizer, é incrível. Eu realmente amo essa parte de X'd principalmente queria mudar um saco de compras para uma determinada cor. Talvez queiramos adicionar uma nova cor ao nosso paladar porque esta marca foi desenvolvida aderindo ao logotipo. Mas não estava pensando em você. Eu, hum, e preciso ter um botão muito alto contraste, um botão muito brilhante que é muito diferente do verde. Então, ele realmente aparece. Vamos adicionar um novo recurso de cor aqui. Só vou adicionar uma nova cor. E vamos fazer isso de ouro para Phil vai torná-lo um vermelho porque é muito diferente do verde. Mas talvez adicionar apenas um pouquinho dele é um pouco de talvez rosa para ele tipo de dar uma vibração brilhante. Você só meio que brincando para encontrar o curso de cor certo. Poderíamos brincar no Illustrator e papagaio juntos para encontrar a paleta de cores certa. Eu quero algo muito brilhante e vívido para que você definitivamente possa vê-lo. Quem sabe como mudo isso? Olhe para essa mudança em todos os cabeçalhos. Adorava que agora pudéssemos mudar esta caixinha. Poderíamos mesmo agora que não temos que fazer isso em todos eles. Podemos apenas fazer este. Talvez fazer esta bolha vermelha. O que há na edição? Que talvez não tenham uma fronteira e façam uma ville rosa. Acho que preciso agrupar esse símbolo da ONU porque eu tenho ah, digite aqui. Vamos fazer o tipo branco. Lá vamos nós. Acho que está começando a ficar bonito. E nós queremos talvez arrastar algo para que montar talvez uma foto apenas como uma pequena foto preenchimento para que eu pudesse baixar todas as minhas fotos de Pecs ALS então ter um realmente bom headshots. Vou arrastá-la para dentro. É arrastador bem por cima da foto. Ele deve ser preenchido automaticamente. Podemos dobrar, clicar e ajustar o corte. Bonito ampliado na foto. Ali. Agora mudou tudo para que você pudesse começar a ver o cabeçalho se juntando. Poderíamos mudar essa de barrade fundo para nossa marca cinza escuro. E aí está. Temos tipo de cabeça superior ou feito em todas as telas. Então, apenas um tipo de mostrar como esse estilo global pode realmente vir a calhar à medida que começamos a desenvolver todos esses itens diferentes. Então agora vamos começar do início. Estamos apenas começando nossa primeira página. Nós vamos começar a mudar para o agora que ele meio que tem o estilo global configurado. Só há mais uma coisa que vou fazer. E vou precisar disso para o meu ecrã de início de sessão. Eu vou precisar de um logotipo, então eu vou trazer isso como um símbolo é Bem, então se nós alguma vez tuitar o logotipo e o logotipo está em todas as telas, ele não vai globalmente. Então eu localizei os arquivos PNG, e o recurso para download é, mas se você está fazendo uma empresa diferente, você poderia tentar encontrar um PNG de sua empresa de logotipos. Por isso, agora vou arrastar os dois. Então eu tenho um par de versões diferentes. Eu tenho um que funciona bem e espaços apertados, então tipo de apresentação horizontal. E então eu tenho um tipo de versão empilhada também, e eu tenho um em um fundo preto em um sob fundo escuro. Então vamos trazer todos os quatro e vamos adicionar isso como um símbolo. Esse é o processo de configuração de você. Eu há um monte de configuração inicial, mas fui para arrumar tudo. Vai super rápido, e prometo que vai ficar divertido. E eles ainda estavam fazendo uma espécie de configurar algumas das coisas chatas que fazem parte do designer U I é que poderia haver algumas partes tediosas que poderiam ser algumas partes divertidas. Então vamos pegar um desses que vai funcionar muito bem neste fundo cinza diferente . E vamos em frente, faça com que isso seja de cor cinza de marca. Você tem um tom um pouco mais escuro para enfraquecer o uso. Temos que descobrir o que funcionaria melhor. Ou podemos até mudar para o nosso Kareen. Ilumine um pouco e traga o que vai trabalhar em fundos escuros para que ele possa trazer este aqui ou trazer este aqui. Então parece que eu o desenvolvi com aquela cor mais escura do dedo do pé funciona muito bem em cinza. Então, quando você faz Gray Dragon e ele funciona muito bem, mas eu quero experimentá-lo com esta cor mais clara. Acho que isso é legal. Eu só vou voltar para a prancheta bem rápido e desenvolver uma versão que funcione muito bem nessa versão, que seria, eu acredito, uma versão totalmente cinza como essa. E eu vou exportar isso como um PNG e te vejo de volta. Portanto, tenha todas as versões do logotipo que funcionarão em todos os fundos carregados. Então agora podemos trocar e ver o que parece ótimo. Acho que isto pode ser um pouco longo. Você tem um pouco de espaço demais. Então vamos fazer a versão empilhada do logotipo bem aqui no meio. É aqui que fazemos o trabalho de design. Nós não temos que nos preocupar tanto com o cliente extremamente estavam sempre preocupados a experiência do cliente. Mas é aqui que nos concentramos no que parece bom, que parece certo para mim como designer, , que possamos fazer algumas coisas. Isto é o que nós Este é o momento em que decidimos, você quer um fundo sólido? Mande isso para trás. Queremos um fundo sólido. Queremos ter esse tipo de dois tonificados? Poderíamos fazê-lo descer até aqui e podemos usar elementos de fundo para ajudar a trazer certos botões. Então nós queremos tipo de o botão de login é realmente se juntar. Você poderia realmente ter essa parada no meio do caminho, e nós podemos adicionar outra caixa aqui para ter um contraste escuro. Vamos cortar a nossa cor escura. Mande isso para trás para ver que temos que trocar tudo. Mas você meio que tem esse visual de dois tons. Poderia realmente trazer destaque para aquele botão onde estes dois estão divididos. Então, é usar esses elementos de design para realmente chamar a atenção para onde você quer que o usuário vá, que neste caso seria o seu login em sua conta. E então precisamos ter esse botão de alto contraste. Então eu realmente quero ter um tipo de um tipo escuro de cor rosa claro. Acho que já colocamos isso em nosso painel de ativos, mas por alguma razão, meio que se perdeu. Mas tudo bem, então vamos desenhar uma nova caixa. Eu realmente quero esse botão. Os “pop outs”. Vamos encontrar um bom botão de alto contraste. Tire essa fronteira. Vamos fazer disso um recurso de cor que sempre mudaria mais tarde. Aqui está a nossa cor vermelha. Então vamos fazê-la, mas em um bom pop, aparecer em você tipo de cor. Então não vai ser desta cor, pois não? Porque isso se mistura bem. Vamos fazer uma espécie de cor oposta. Vai mesmo atrair-te os olhos. Queremos fazer criar um log em um diferente ele vai ser um caminho de registro diferente para que você possa fazer login com sua lata. Se você já tiver um. O registro criado será um pouco diferente, mas não dramaticamente diferente, para que possamos ver com que cores ficaria bem. esse botão em particular. E então com nosso login com nossa conta do Facebook, poderíamos fazer isso azul. Então eu vou aparecer no Facebook e pegar o que a cor azul oficial do Facebook é negativa. Carregue essa cor hexadecimal. 14. Wireframe de alta fidelidade - Tela de login - part2: maneira. Eu tirei uma captura de tela da cor do Facebook aqui, e eu só vou pegar a ferramenta conta-gotas e amostra que eu realmente quero ser preciso. Quando se trata de Facebook, isso realmente aparece. Bem, eu estou fazendo o botão certo aqui. Vai descer aqui, tirar uma fronteira e deixar-nos fazer um Phil azul, e estamos prontos para bater com o White. Você tem alguns elementos extras aqui que não precisamos. Vamos fazer isso um pouco mais leve de uma sombra para que o botão divisor apareça. Nós não precisamos mais disso e mudar isso para Branco em nossa cor branca. Então, o que você acha? Então essa é a versão que temos até agora. Provavelmente. É algum tipo de outro visual para te agarrar aqui. Bem, talvez menos slogan. Encontre sua melhor refeição agora, ou algum tipo de slogan ou tipo para tipo de seduzir as pessoas a entrar e ficar animado sobre o uso deste aplicativo. Este é também um momento em que eu duplicar placas de arte e eu posso colocá-lo lado a lado foi, uma vez que determinar este log na tela, ele realmente vai começar a determinar como tudo o resto está olhando. Estas primeiras telas de ar tão crítico no processo de design é uma vez que configuramos todo o tipo de se vamos usar um Bracker escuro em um fundo claro que tipo de logotipo estamos usando ? Vamos preparar isto, preparar o palco para tudo o que se segue em frente. Então temos que passar muito tempo certificando-se que está certo para que possamos voltar ao que tínhamos antes. Faça este tipo de registro Esses botões realmente aparecem lá fora. Isso é legal. Você poderia duplicar isso tanto quanto você quer fazer a mesma coisa com desenhos de logotipo, eu vou fazer um design local. Vou colocá-lo ao lado de uma cópia. Mudá-lo, ajustá-lo, ver se eu gostei da cópia antiga em vez da nova, e continuar em frente. Nós vamos tentar este, mas esperou com um cinza claro ou talvez ficar com branco, apenas tipo de reverter tudo isso para fora. Ok, então essa é uma opção para continuar aqui até encontrarmos o que achamos que seria certo . E queremos que tudo seja óbvio para o usuário que foi o usuário para ser capaz de encontrar os botões o mais fácil possível. E, às vezes, usar esses fundos mais escuros ajuda muito. Porque com o branco, tudo está se misturando. Então, usar esse tipo de caixas coloridas é útil. Podíamos fazer uma caixa sólida. Podemos sempre ver a foto de volta. Podemos fazer isso um pouco mais tarde. É meio que soco isso. Faça isso branco. Veja, agora que definimos nossos Siles globais, é muito mais fácil, escolher o seu paladar e escolher o seu tipo. Então, o que vocês acham até agora? Eu gostaria de poder obter feedback ao vivo nesta aula, mas qual fundo para você aparece mais? É quando você pode colocar na frente de outra pessoa e ir. O que parece melhor? O que funciona melhor? Há sempre a opção de ter um fundo branco inteiramente e, em seguida, fazer o nosso logotipo que temos aqui em cima. Então há um tipo de seu log básico no qual eu não sou um grande Vanna sempre poderia experimentar e fazer . Talvez uma caixa diagonal que atravessa que teve a ferramenta pino e ver o que parece para tipo de quebrar o molde um pouco para experimentar para que você possa ver aqui a grande variedade de opções de layout que eu tenho e você pode ver onde isso é poderia ser um dos Os maiores desafios não são a falta de ideias, mas a falta de orientação e se perguntando o que funcionará melhor. Então eu vou ir em frente e experimentar com mais uma opção, e isso vai ser incorporar uma foto para ver se a foto não pode meio que quebrar esse tipo de áreas vazias grandes, mas sem fazê-lo parecer muito ocupado. Então nós estamos indo apenas para desenhar caixa de contêiner para colocar nossa foto e nós estamos indo para apenas um clique borda. Vamos em frente e trazer uma espécie de foto genérica para agora comida e ia encontrar o corte certo. Vou só dar um duplo clique de muito bom. E eu assumi e filmei aquela comida porque é isso que queremos com o que as pessoas têm fome quando abrem este aplicativo. Vamos seduzir com pouca comida, sair das sombras. Você pode ter um pouco de sombra, então parece um pouco em camadas. Você pode até segurar a opção e tipo de fazer isso um pouco de uma foto arredondada que poderia me olhar. Eu acho que o logotipo precisa realmente sobressair sobre isso um pouco mais a menos que decidamos trazê-lo para baixo. Mas nos dê uma chance de mudar nossos botões um pouco mais juntos, mas não muito perto, certo? E poderíamos colocar nosso pequeno logotipo aqui, desde que seja óbvio que é isso. Para que isso possa ser ótimo será mudado para azul. Poderíamos até fazer uma caixa de dois tons. Você só tem o fundo e o azul é verde. Seja lá como for, acho que é mais verde, não é? Azul verde e eles poderiam arredondar, talvez puxar para baixo opção. E em torno disso você meio que tem, ah, uma espécie de borda arredondada aqui, mas também uma borda arredondada contrária aqui no lado oposto. No topo, estamos começando a ficar ocupados. Eu realmente quero limpar layout simples para a nossa tela de login. Eu poderia até pegar os logotipos se eu não conseguir olhar todo o caminho até aqui. Isso tem tipo de verde e o logotipo para cooperar que parece um pouco melhor, modo que é uma opção de registro. Gosto da ideia de usar uma foto. A foto pode trocar. E já que não temos que nos preocupar com a foto ter texto no topo ou quaisquer outros problemas com uma foto aleatória, porque não há nada além disso que possa ser difícil de ler. Poderíamos ser muito flexíveis com isso. E eu gosto dessa ideia para que possa ser trocada. E eu gostaria que o Adobe X tivesse recursos de edição de fotos onde eu pudesse mudar isso, uh, fazer um olhar de tom ou fazer algum tipo de edição de fotos, mas eu não tenho essa capacidade. Depois vou à loja de fotos e trago essa foto de volta. Se eu quisesse ter um tipo de tom duo ou único em cores, olhe para ele. Eu vou até o ponto com do Peck Sal e achar algumas fotos que eu acho que podem funcionar. Eu acho que ter uma foto e o log em realmente meio que ajuda a saber que você está em um aplicativo de pedidos de alimentos . Acho que faz muito sentido, deixa-te com um pouco de fome antes de entrares. Então eu acho que é uma boa decisão de design para ir assim porque esta tela pode ser qualquer aplicativo. Gritar. É apenas um pequeno logotipo, e é realmente limpo e simples, mas não tem muita personalidade para ele. E é aqui que você pode começar a pensar sobre a experiência do usuário e adicionar um soco de personalidade. Bem, você nunca consegue ficar ocupado, mas você quer ter Você quer ser divertido, você quer jogar. Depende do que seu público-alvo está procurando. Uh, vamos nos divertir um pouco com a gente e ter visuais por toda parte. 15. Wireframe de alta fidelidade - tela de login - Parte 3: Eu baixei algumas fotos para verificar. O tempo vai arrastá-los, ver se encontro a combinação certa de corte da foto. Não quero cortar o topo da tigela. Gosto de ter um garfo ali. Isso parece realmente maravilhoso. Isso parece limpo. Vamos ver se encontramos uma foto melhor. Sempre encontrar uma foto melhor porque você ficaria surpreso com o que funciona? Gosto desta foto. Talvez se eu fizer um tipo de um zoom em corte são cortes apertados como eles dizem. Isso parece muito bom. É complicado. Há um monte de detalhes lá, e eu não quero complicar já esta tela de login. Então talvez precisemos encontrar uma coisa muito simples. Isso é bom. Se eu fizer zoom e não parecer caseiro, parece o Deus em um restaurante. Eu gosto deste. Oh é sobre encontrar esse corte certo. Quer colocar o garfo lá dentro? Então não é o jeito que essa curva é. Não sei se as taças Brown lutam contra essa curva, então vamos voltar ao que tínhamos antes, que é uma tigela muito agradável e simples. Não é complicado, não tem muitas coisas acontecendo com sua foto muito simples. E eu acho que isso funciona muito bem com este log e telas é encontrar o corte que eu acho que iria funcionar, e há a nossa tela de login. Então o que podemos fazer é começar a apagar aqueles que achamos que não funcionam. Eu não quero ter todas essas telas aqui e vamos manter um em volta do slide ele caminho aqui só para que ele nunca saiba o que podemos querer voltar para aquele layout. Aqui estamos nós. Temos a tela de login feita com o primeiro verde feito, e poderíamos fazer alguns ajustes com botões. O que eu fiz foi que eu decidi manter este a cor azul verde marca este log em sua conta causa que vai ser o botão mais amplamente utilizado, e eu decidi fazer criar junto em vermelho porque eu quero anos de Ano Novo para ser capaz de ver esse botão muito facilmente. Então eu pensei que poderia ser o alto contraste, cor diferente. Quero ter certeza que é aqui que ficamos muito exigentes com margens e estofamento. Vamos garantir que as margens e o preenchimento ou o mesmo ouçam que eles estão aqui e você pode usar a opção de encaixe para grade, que é tipo do que estamos usando aqui é tipo de guias inteligentes. Acho que se pode dizer que está em todos os programas da Adobe. Este poderia ter mais espaçamento porque há, ah tipo ritmo lá e faça login com o Facebook. Podíamos colocar uma pequena fronteira aqui. Talvez uma luz como a cor. Um pouco de pop para fora melhor. Quem sabe? Faça a fronteira um. Você meio que tem essa opção onde você tem esse derrame. Isso realmente ajuda o botão a sair se nos sentirmos assim. O Azul Escuro é muito escuro contra o cinza para que possamos mexer. Mas gosto de manter a consistência com os meus botões. E então aqui está outra coisa com botões. Podemos mexer com os cantos para fazer dele uma pílula. Poderíamos fazer dele uma leve forma de pílula porque fomos meio que tiramos isso na marcação de baixa fidelidade. Mas agora temos que fazer isso. Vamos ver pré selecionar todos estes. Vamos fazer essa borda um pouco menor para fazer isso 1.5 e vamos ver o que podemos fazer com as formas das pílulas. Então aqui é onde podemos mudá-lo bem aqui. Aqui está uma espécie de seleção no painel de aparência. Bem diz, experimente um. Continua a aumentar a sua tentativa. 11. Vamos tentar quatro. Gosto da ligeira. Este tipo de adiciona um polonês muito bom. Olhe para ele, não é? Eu não gosto disso para este caso em particular. Só um pouquinho, só um pouquinho. Então isso meio que suaviza tudo. Ter essas belas bordas arredondadas. Certo, então ainda estou me sentindo assim. Azul também é . Isso é muito do mesmo tom, e isso não está saindo tanto. Eu sempre adiciono uma pequena sombra a essas coisas, que pudéssemos ir até a aparência dela. Faça uma pequena sombra. Veja como isso realmente ajuda esse botão a sair. Faz com que pareça que é só apertar um botão. Vamos fazer a mesma coisa com todos eles, para que possa ser consistente, então está adicionando um pouco de sombra. Então agora quase parece que está em camadas. É muito bom. Ok, agora eu posso ajustar o tamanho do logotipo. Certifique-se de que está no meio. Se eu arrastar isso por aí, meio que vejo esses pequenos guias inteligentes nos ajudando pelo verdadeiro meio bem ali. E lembre-se, você sempre tem a opção de alternar as grades. Vamos em frente e selecionar meu quadro de arte superior, e podemos alternar uma grade para ver se podemos usar essa grade para nos ajudar a encontrar a localização exata de certos elementos. Gosto de usar grades. Não gosto de ficar preso. Sinto-me como uma rede de ar a tomar as decisões por mim. Então eu gosto de fazer um tipo de design áspero de como eu gosto. Eu só faço pequenos movimentos e coloco na grade. Eu sei que muitas pessoas gostam de começar com a grade, mas muitas vezes eu gosto de tipo de projetado por eu faço o meu layout e, em seguida, fazer qualquer tipo de ajuste fino como você vê a pequena diferença aqui entre onde esta grade de quatro colunas é que podemos facilmente encaixar isso na borda, sentir que usamos a grade para nos ajudar com seu layout, mas a grade não encaixou. Sabe, isso não restringiu nosso design de fluxo livre, pois então se você é o tipo de pessoa que gosta de começar com grades, você pode ir em frente e carregar suas grades. Há também grades quadradas. Quem tem você tipo de brid tradicional ou ele faz a coluna, uh, rids nós fazemos sites. Você poderia fazer isso com base no grau de 12 colunas, que é muito popular para fazer. Podemos colocar sua sarjeta dentro do problema com e todo aquele jazz s. Então eu vou usar isso para tipo de talvez encaixar tudo isso na borda do ponto da grade . Então eu vou parar tudo isso até o limite. Meio que me dá um pouco de base e saber que as calhas são da mesma largura aqui, e nós também queremos seu botão no Facebook, certo? Assim como desligar minhas grades. E eu sinto que estamos chegando muito perto disso certificando-se que isso vai ser o mesmo com o topo do fundo. Certifique-se de que a Aliança Central veja como ela apareceu naquele pequeno azul. Mas nossa linha azul meio que sobe para baixo. Agora eu sei que isso está perfeitamente no centro, fora da paz. Ei, vamos salvar isso. Sinto-me muito bem com isto. Então vamos passar para a próxima tela. Então o que fizemos é que temos o fundo mais escuro. Estamos meio que indo em direção a essa direção. Então isso poderia definir o tom para o aplicativo que talvez tenhamos fundos mais escuros das caixas mais claras em cima, vez de ter um fundo branco com talvez, como botões cinza no topo, que é o quê? Como nós meio que projetamos para ter aquele fundo claro. Então vamos ver o que acontece quando chegarmos a este ponto se um fundo escuro vai funcionar aqui. Temos de voltar a este tipo de método. Então nós estamos apenas tentando obter nosso estilo aqui, tentando ter uma idéia de consistência que podemos usar durante todo o tempo. Então, em seguida, vamos em frente, saltar para isso vai ser muito fácil, porque você é basicamente a mesma tela. Nós só vamos virar algumas das cores aqui. Vamos fazer isso bem rápido, e eu já volto. 16. Wireframe de alta fidelidade - Popup Screen: direitos anunciados tempo para a inscrição para uma página de conta foi em frente e fez este fundo o símbolo, este grande tipo de fundo Em nossa primeira tela. Eu fiz isso montar sobre isso. Eu ainda sou uma cópia e colado, assim como o resto da tela. Então eles são todos como símbolos. Então, se eu quisesse mudar a cor, seria fácil mudá-la em ambos. Então, se eu quiser mudar tudo de volta para esta cor, que realmente parece muito bonito, hum, nós poderíamos fazer isso para todas as telas e, em seguida, trocar tudo muito mais fácil, então apenas certifique-se de usar esses símbolos vinculados como tanto quanto possível. Então vamos fazer esse tipo de cor. E nós também podemos fazer isso montar. Isto vai ser um botão padrão que vamos ter. Podemos sempre clicar com o botão direito e montar, e depois desmontar isso aqui. Nós já temos nossas pequenas bordas arredondadas, bordas muito ligeiramente arredondadas, e podemos simplesmente mudar isso sempre que precisarmos. Então inscreva-se para uma conta. Provavelmente precisa ser um pouco maior tipo, tamanho como tudo muito óbvio e fácil para o usuário mesmo tentar isso como um branco. Sim, podíamos trazer o nosso logótipo. Mantenha-o em baixo. Está no fundo aqui. Vamos mantê-lo no fundo e podemos mantê-lo na mesma posição também. Tenho de ir em frente e fazer o logótipo enquanto estamos aqui. Está indo. Faça-o montar. Indo para a direita. Clique. Faça disso um símbolo. Vou fazer logo. Fundo preto. Então, agora, quando eu copiar e colar Aiken, mude isso. Isso poderia fazer mudanças muito facilmente. Podemos continuar a ter uma foto aqui em cima na opção de espera do Tambor. Suavize esse canto arredondado aqui. Aí está o ponto. Vai amolecer. Traga isso para baixo. Tenho que fazer uma foto diferente. Faça o outro que queríamos usar no outro. Lá vamos nós. Faça um bom corte apertado para que não pareça muito ocupado. Você quer colocar aquele garfo lá dentro e ter certeza de que não é arredondado para cima e certeza que não temos uma fronteira, certo? Eu gostaria de incorporar esse azul verde em cada tela do possível, porque eu quero ser capaz de conectá-lo Então este é um ponto que podemos decidir. Gostamos dos cinzentos no trabalho não está funcionando. Então, o que há de bom em ter isso ligado? Então eu só vou para os meus símbolos. Eu sou apenas um título, este fundo da tela de fundo e podemos brincar com as cores aqui. Então eu vou em frente e deixá-lo todo azul. Você se sente como um azul funciona? Sinto-me como um negro funciona. Então, como podemos incorporar azul aqui? Podemos sempre terminar o processo de inscrição. Poderíamos fazer esse botão e colocar mais perto do final. Vai mudar para a nossa rede e ver se conseguimos fazer com que estes reboques se alinhem. Tudo é consistente. Quando teria a mesma borda arredondada aqui, que possamos sempre voltar para ver o que usamos. E usamos um quatro. Então eu vou voltar e aplicar a mesma opção arredondada. Ótimo. Agora estamos apenas ajustando o layout que você deveria. Temos espaço suficiente para respirar entre todos os elementos de design. Observe como isso ajuda muito ter um pouco de espaço para respirar. Apenas certifique-se que o espaçamento aqui é consistente e isso nos dá a chance de ter um pouco de uma foto maior perfeita como essa, recortando como? É cortado ao meio. Seu tipo de cria uma cultura dinâmica. Fiquei feliz e salvo. Temos duas telas para baixo. Ah, mais 100 para ir. Bem, nós não vamos fazer todos os 100 mas vamos fazer pelo menos mais 10 telas. A autorização do Facebook vai levar este símbolo aqui. Mas esta é a parte de trás. As coisas vão começar a correr bem rápido agora que estamos começando a estabelecer um tipo de padrões de marca aqui para você, padrões I. Então este será exatamente o mesmo botão. Então, por que não pegamos esse botão e vamos em frente e colocamos nossa autorização lá? E então temos nosso texto de botão. Não gostamos desse branco. Então o que isso vai ser é provavelmente em vez de ser uma tela separada, vai ser uma caixa pop-up. Então vai aparecer aqui para autorizar que não vai te mandar para uma tela. Então o que eu queria fazer é ter um efeito desfocado em algum lugar do que você vê aqui, onde você tem uma espécie de caixa pop-up, mas meio que desfoca no fundo. Eu sei que o IOS fez isso há alguns anos, quando eles fizeram um tipo de atualização pegajosa, e isso é meio que uma coisa muito popular de se fazer. Então esse é o tipo de efeito que eu estava tentando imitar. Mas parece que não sou capaz de pegar isso e borrá-lo como um todo porque não me dá essa opção aqui. Então eu vou fazer um pouco de trapaça aqui. Eu só vou tirar uma captura de tela da minha tela e trazê-la como uma foto, e eu vou ser capaz de tipo de ter o mesmo efeito para que eu possa emular esse efeito. Vou trazer essa foto com o desktop. Você ouviu isso? ISS vai deixar que não precisamos mais disso. Vamos ver se podemos imitar esse efeito usando uma foto, então tipo de dar o tipo de sensação que vai aparecer e meio escuro lá dentro e apenas me dar o botão rápido para pressionar eso eu estou agora. Está no fundo desfocando. Tente Desfoque do objeto. Ver se consigo obter um efeito mais desfocado. Perfeito. Bem ali. Então agora o que podemos fazer e vamos para o protótipo gemido. Começamos a vincular isso, será capaz de pressionar esse botão e ele vai aparecer e ainda permanecer em que olhar como ele ainda está permanecendo na tela. E então pressionamos esse botão, podemos lambê-lo para onde ele vai ficar bem aqui. Então agora temos nosso segundo pop-up. Não importa o jeito que você entrar, você vai ter que dar ah, comida local acesso à sua localização, e nós podemos ter este evento de uma só vez. Isso não tem que acontecer toda vez que eles fazem login, o que é bom. Então vai estilizar esta pequena área móvel para combinar com a nossa marca para que possamos torná-la, uh, mais escura. Faça isso. Esta cor pode continuar a usar branco, e poderíamos tornar este um bom botão de alto contraste. Poderíamos fazer com que fossem de cor verde. Podemos usar a mesma borda arredondada que usamos aqui. Então estamos usando um quatro aqui nestas pequenas caixas para que possamos fazer quatro aqui para que possa ser consistente com todas as nossas bordas arredondadas em tudo o que fazemos. Sinto que estamos muito felizes com isso. Podemos rolar com ele. Podemos fazer isso ainda mais alto, mais alto contraste, mas que quase precisamos ler. Às vezes significa aviso. Você sabe, quando um associado vermelho quando ele tem uma decisão de compartilhar, uh, informações importantes, como localização. Você não quer usar vermelho porque é quase um aviso como este não é o que você deve fazer. Então, do ponto de vista psicológico, às vezes ficar com o assassino de marca mais suave pode funcionar e ter a caixa de seleção sempre permitir . Ótimo. E nós poderíamos até fazer um pouco de sombra aqui, ter um pouco mais significativo sombra lá. Então agora nós começamos a fazer a tela inicial, a tela inicial do usuário. Então esta pode ser uma página muito importante vai enviá-los para o supermercado um restaurante quando você deixá-lo muito limpo. Simples e fácil de usar. Você vai passar alguns momentos trabalhando nisso, e nós vamos continuar trabalhando em todo esse projeto. Então, só por uma questão de tempo, eu fui em frente e passei cerca de 20 minutos tipo de trabalhar fora o que eu acho que seria bom para explicar. Já fizemos muito disso de antemão. Eu não queria gastar muito tempo em cada verde passando pelo processo. Mas eu quero falar sobre por que eu acabei nesta fase final. Então agora eu pensei em usar as duas caixas e meio que ter um fundo mostrando através. Mas depois de um tempo, eu pensei que parecia um pouco ocupado tendo que, em seguida, borda de fundo todo o caminho ao redor dessas duas caixas. Então fazer um tipo de direito até a borda deu um olhar realmente moderno, limpo e liso que eu acho que funcionou muito bem. E eu também tive um problema em colocar o supermercado em cima da foto. Então eu tive que ter muito cuidado com a foto que eu escolhi, porque se ela estava muito ocupada, não estava aparecendo. Então tentei colocá-lo em caixas. Eu tentei tipo de um monte de maneiras diferentes para fazê-lo funcionar, e também outra coisa é que eu precisava ter algum tipo de texto aqui, então precisamos dar algum tipo de direção para o usuário, porque quando acabamos de ter mercearia e restaurante meio óbvio o que você pressiona. Mas é bom ter algum tipo de verbal chamado de ação, bem como para guiá-lo através do processo para convidá-lo para entrar. Então eu tenho tipo de fazer a sua escolha, tenho um tipo estreito de apontar para cima e para baixo para meio que realmente fazê-lo. Obviamente, você seleciona uma das outras e que você tem duas opções. Nós já temos nossa cabeça superior ou feito que fizemos mais cedo na lição, modo que já estava concluída. Portanto, esta página está essencialmente feita. Acabei de encontrar as fotos certas, tentei encontrar o layout certo. E talvez essas fotos possam mudar de vez em quando, dependendo talvez do seu restaurante favorito. Isso é algo que podemos explorar mais tarde. Então essa é uma espécie de tela principal do usuário da casa. Terminamos com essa. Vamos em frente e passar para o próximo, que vai ser um pouco mais complicado porque temos que descobrir cores e tamanhos de texto , tudo para esta próxima tela 17. Tela de Listagem: Vamos fazer a lista de restaurantes deles. Tínhamos um mapa do restaurante que deveria estar aqui, e vai carregar mapas do Google. Então ele só pegou uma espécie de imagem genérica do Google Maps que pode simplesmente pegar este quadro e arrastar em nossa foto dessa maneira. Então vá em frente e seja cortado automaticamente e vamos fazer uma sombra aqui. Então, ele realmente aparece por aqui. Vamos levar isso adiante. E também temos uma espécie de localização. Este é realmente o logotipo antigo, então nós estamos incorporando algo de nossos ativos de marca para tipo de ter o marcador de localização aqui. Então vamos colocar isso sobre o atual e torná-lo uma cor que vai realmente se destacar tão vermelho. E aqui diz mapa do restaurante. Mas nós realmente não precisamos dizer mapa do restaurante, porque eu acho que é bastante óbvio que essa é a localização do restaurante que a localização atual. Mas também queremos mostrar todos os outros no mapa para os problemas reais, colocar alguns deles apenas para mostrar um exemplo. Então lá está o nosso mapa, e então agora nós podemos meio que mexer com essas bolhas, e agora que sabemos tipo de ângulo ou o número de curvatura aqui, ele disse no cinco, eu acredito que fizemos quatro em todos os outros botões. Então, apenas mudando as curvas para quatro para combinar com tudo o que fizemos aqui quando acabamos de confirmar e a Ford quer consistência lá. Então agora podemos determinar. Precisamos de um fundo escuro ou de um fundo claro para a nossa página de listagem? Então isso é o que seria se fosse um fundo escuro. Eu acho que ele realmente sai bem, mas ele também pode tentar tipo de nossa cor mais clara, bem, porque nós realmente não temos. Temos um pouco mais escuro para entrar. Mas se trocarmos aqui quando você fizer login, tudo bem. Ainda é bastante concursos consistentes com cores da marca. Sim. E o que é ótimo sobre a ferramenta de repetição de grade? Em vez de ter que mudar todas essas pequenas coisas, eu posso ir em frente, excluir tudo menos o de cima, fazer isso perfeito, e então eu poderia apenas fazer grade de repetição. Vamos fazer isso vermelho. Não queremos ter uma fronteira. Você faz essa classificação de estrelas que poderíamos fazer que são nome de restaurante de cor azul. Vamos ver o que parece azul e esta cor. Vamos mudar para uma de nossas cores cinza de marca, bem como toda a cópia corporal. É essa bagunça com o espaçamento. Isto é quando nós realmente encontrar Tune nosso olhar tipo e quanta margem sobra. Você faz todos os pequenos ajustes que precisamos fazer para que pudéssemos mudar a cor da borda, torná-la mais escura, pegar sua ferramenta conta-gotas e obter talvez aquela cor clara ou não, ter uma borda em tudo, ou cair sombra, o que seria consistente com seus botões. E então eu estou realmente pensando que ficar com essa cor de fundo mais escura pode funcionar melhor para realmente ajudar esse verde azul a sair, você percebe como eu estou usando essa boca muito pequena. Só estou fazendo isso pelo The Star, que é importante. Estou fazendo isso pelo nome do restaurante, que é importante, e eu tenho esse botão vermelho para indicar passar para o próximo estágio, então vamos ter certeza que temos o mesmo mercado de Horner arredondado é um quatro Oh, que parece adorável. Nós também precisamos colocar cantos arredondados aqui, mas apenas em duas bordas, eu ficaria estilizado. Isto é um pouco. Não tem que ser ver a opção “hold down”. Só quero mudar. Não, nós podemos estilizar isso e torná-lo realmente arredondado em uma borda, muito que nós não poderíamos ter uma espécie de borda arredondada lá. Vamos criar e zero o que é bom em torno das bordas aqui. Eu só estou indo sobre a aparência, arredondando as bordas e, em seguida, arredondar os cantos e, em seguida, mudar a borda tamanho pode ser cortado essa metade. Talvez fazer 1.5 bem ali no meio e, em seguida, torná-lo a cor. Precisamos da quantia. Veja que tem estas pequenas bordas suaves. Acho que fica muito melhor assim. Vamos nos certificar de que está tudo alinhado. Está recebendo sua ferramenta de pino, certificando-se de que é bom e alinhado ótimo. E vamos fazê-lo montar enquanto estamos nisso, porque nós vamos estar duplicando isso bastante. Faça com que seja do tamanho certo. O que eu amo sobre isso é tipo de combinar com tudo o resto que fizemos até agora com esta borda macia realmente pequena, certo? Então, vamos clicar com o botão direito. Torná-lo um símbolo fazer Maio pode estreitar. Então, quando duplicamos que todos sejam objetos vinculados para que pudéssemos jogar bem com itens de ID de contraste aqui, poderíamos fazer esse tipo de cinza claro decolar da borda. É de trás para frente em nossas pequenas bordas suaves, e assim não precisamos mais dessa pequena linha divisória. Temos um pouco de área de contraste suficiente aqui para realmente se destacar. Certo, estamos chegando lá. Vamos fazer que os restaurantes de filtro Boulder porque eu quero que isso realmente se destaque como uma opção. Vamos torná-lo maior. Faça talvez 12 pontos. Podemos sempre ir para nossos estilos de personagem e clicar em um desses tipos de cabeçalho superior. Talvez isso nos ajude a obter os mesmos tamanhos de cabeçalho. Eles usam o seu nome. Vamos trazer isso para baixo. Então há apenas o suficiente um pouco mais de preenchimento e espaçamento lá e vamos fazer o trabalho livre. Não vamos esquecer nossa grade que vai nos ajudar também, e eu preciso de um pouco mais de espaço imobiliário horizontal, então eu não vou levá-lo todo o caminho até esta borda, então eu estou apenas usando isso para ter certeza que eles estão meio alinhados, mas eu preciso de mais espaço horizontal. Tem muito o que caber aqui. Mas veja, eu ainda tenho margens muito generosas, muito espaço para respirar. Então vamos fazer essas bolhas iguais a esta bolha aqui. Então não temos um derrame para tirar a fronteira. Nós temos o andar em torno deste perfeito, e nós queremos mudar nosso pouco aerodinâmico também. Correspondência. Por isso, agora precisamos de um símbolo despreparado do euro escuro porque queremos criar um novo símbolo. Vai ser de uma cor diferente. Por isso, tirei alguns momentos para trocar as setas para ter as nossas bordas mais suaves. E nós também queremos tipo de ajustar nossos ícones aqui. Então, neste momento, este é um ícone muito áspero. Queremos continuar a usar que você eu meio que macio, bordas redondas. Então vamos recriar este pequeno símbolo. Nós poderíamos fazer isso muito rapidamente e apenas obter a ferramenta círculo. Eu só vou fazer uma borda, e nós vamos pegar a mesma cor que estávamos fazendo antes, encontrar a espessura certa e então apenas vamos desenhar uma pequena extensão da barra de pesquisa e contornar os cantos aqui. O seu painel de aparência obtém sua ferramenta conta-gotas na amostra são ótimos e têm uma espessura semelhante ? E lá estamos nós. Acabamos de recriá-lo no nosso estilo. Agrupe-o, apague o antigo e traga-o, fique menor, diminua zoom. Você sabe, nós temos alguns ícones personalizados. Temos avaliações de pesquisa UTA na culinária. Então, se sentirmos que estamos em um ponto de parada, sentimos que é perfeito. Podemos usar o dedo da ferramenta de repetição da grade. Replique isso, mas temos que nos sentir confiantes. E esta é uma decisão. Quando brincamos com este botão, Eu acho que pode parecer um pouco melhor do que o vermelho porque eu acho que o vermelho repetido seis vezes pode ser muita atenção. Você realmente tem que usar as formas vermelhas e ainda mais sutis do que nós usamos nosso azul de marca. Bem, vamos replicar isso foi juntar um grupo e fazer repetição grade e ir em frente, fazer muitos que vão sentar aqui. Então 1234 Agora temos que encontrar o espaçamento certo de novo aqui. Perfeito. Então nós também podemos estender isso um pouco, algo para clicar no quadro de arte principal. Você poderia apagar tudo isso. Não preciso mais disso. Estenda nossa prancha para que pudéssemos mostrar como ela rola. Então nós fazemos. O modo protótipo que o usuário poderá rolar para baixo deve ser um pouco mais realista. Ótima. Portanto, há nossas opções aqui. Então o que vamos fazer é o usuário vai clicar em um desses restaurantes e vamos chamá-lo de Restaurante Select. Vamos selecionar esta segunda opção, e eles vão para a próxima tela. Então esta será a tela do menu. Vamos fazer algo muito, muito parecido com o quê? Temos dois segundos para nos mantermos consistentes com o nosso tema. 18. Tela de menu: Aqui está a página de destino do nosso restaurante, por isso temos a ideia de poder analisar todas as fotos mais recentes que são carregadas para os itens do menu. Então vamos em frente e arraste e solte algumas dessas fotos. Já me sinto muito feliz com o layout. Como é ISS. Então vamos trazer um desses itens alimentares e trazer alguns outros eliminando-os para que você possa tipo de dizer que há uma foto para percorrer. Acho que esses pontos são ótimos. Isso indica que eu posso polegar através e vamos em frente e colocar este stott como brancos e jogou a segunda foto direita. Há uma foto ali à esquerda, que está rolando. Maravilhoso. Então vamos em frente e adaptar tipo do mesmo estilo. Vamos em frente e trazer isso. O que é copiar e colar aqui porque este é um símbolo quando tem que ligado? Se quisermos mudar o plano de fundo em todos os lugares, não temos essa opção. Faça isso rapidamente. Então, agora que estamos a arranjar uma cilada, vamos trazer isto para cá. Eu acredito que isso é definido em um estilo de personagem, o cabeçalho então tudo vai tipo de ter o mesmo tamanho. Vamos trazer isso à tona. Então vamos fazer o mesmo que fizemos lá em cima. Vamos em frente e eu agrupo a grade e vamos apagar tudo menos o topo . E então nós vamos ser capazes de jogar com essa profundidade, mesmo estilo. Então eu vou te dar o verde e nós vamos fazer as bordas muito suaves, tirar a fronteira das rendas e repetir. Basicamente, vamos pegar nosso ícone que usamos nosso símbolo. Clique no meu símbolo Dragão lá dentro. Eu quero virá-lo de cabeça para baixo para indicar que ele colapsa estilo acordeão, e esta será a seta apontando para baixo. Certifique-se de que está mais escuro e terminamos. Então temos que ver o quão rápido poderia ficar mais rápido e mais rápido. Enquanto estabelecemos tudo, senhorita faz isso de muitos lados. Ótimo. Já terminamos com essa. Então agora temos que fazer essa parte em que desmorona um pouco, então será basicamente essa tela. Mas o que isso adicionou menu de acordeão. Então, quando à frente, o colapso do menu desmontável só meio que economizou algum tempo? Então fez a mesma coisa onde eu apaguei todos estes e fiz o um e então fiz a ferramenta de grade de repetição para fazer todos eles. Então agora a próxima tela deveria indicar quando ele adicionou a bolsa. Há algum tipo de animação que acontece no topo quando vamos ser capazes de trabalhar a animação fazendo a tela. E o que é ótimo nisso é que podemos ir em frente. Acredite nisso porque agora temos tudo isso projetado porque a única diferença com a tela vai haver um pouco de animação que acontece. Vamos usar auto um inato para poder animar este ícone lá em cima. Nós vamos fazer isso um pouco maior na tela poetisa, sem cortar, e nós não fizemos mais montar. Vamos fazer isso um pouco maior. E aqui vai uma pequena animação que acontece. Vou precisar pegar mais dois aqui. Então eles adicionaram dois itens ao carrinho. Neste exemplo, você deveria fazer um dois. Vamos mostrar-lhe como fazer a animação automática para torná-la animada. Uma vez que começamos a ligar tudo para economizar um pouco de tempo. Passei um pouco de tempo desenvolvendo os próximos conjuntos de telas. E só quero saber por que fiz o que fiz. Então, da última vez que saímos, fomos em frente e fizemos esse pequeno tipo de tela onde poderemos animá-lo mais tarde e eles poderiam ser capazes de adicionar ao carrinho, e então eles serão capazes de revisar seu pedido. Eles estão indo para o carrinho de compras. E o que eu fiz é que você vai notar que eu conheço um ou tenho o fundo escuro, e eu fiz isso intencionalmente. Então, quando eles estão indo para o processo de check-out, eles realmente vêem um fundo mais leve diferente. E definitivamente eles notarão que esta é uma direção diferente. Eles estão se preparando para sair. É um pouco diferente, e eu acho que quando você está fazendo uma lista longa e você está fazendo números, é muito mais fácil ler em um fundo branco que está no fundo mais escuro. Então eu decidi manter o processo de check-out com um fundo branco para mantê-lo limpo e simples para o processo de check-out, e apenas meio que quebrou estes tipo de usando uma combinação dos botões verdes e para aqueles realmente, itens realmente importantes que eu realmente quero destacar, ainda mais do que os botões verdes é, uh, este tipo de cor vermelha, que seria a ordem agora eo cartão de cobrança. Então há uma espécie de o que eu fiz lá. Há telas muito parecidas indo para esta tela do mapa. Eu só tenho o mapa que vai mostrar o seu E T A e uma simples mudança na ordem do anúncio , e você tem a divisão fora onde você pode alterá-lo fora do seu pedido. E isso é muito parecido com a caixa pop-up que fizemos antes. Então é uma espécie de cópia e colado que aqui ele está no mesmo estilo. Tenho alguns ícones para a minha folha de batota. Você gosta e cortar um desfocado o fundo usando borrão de fundo semelhante ao que eu fiz antes. Então esta não é uma tela separada, mas vai aparecer sobre esta e será capaz de mostrar que quando fizermos a animação no modo protótipo e gostarmos de tudo juntos, então é uma última primavera para fazer, e isso é bem sucedido entrega. Eu pensei em talvez incorporar algumas fotos aqui e meio que percorrer o processo de poder pensando sobre isso. Então nós temos, ah, entrega bem sucedida e temos este bom botão de revisão restaurante que eles comprimem e revisam o restaurante. Isso seria mais telas que poderíamos dialogar em outro dia, mas vamos nos concentrar nesta tela, então eu tenho um pequeno ícone de caixa de cheques e ir e baixar um desses e ter isso lá. Mas eu gosto de incorporar algumas fotos, então eu gostaria de ter uma chamada à ação para que você possa rever o restaurante. Mas, ei, vamos voltar para a tela inicial e pedir alguns mantimentos. Vamos mantê-lo na APP. Vamos mantê-lo interessado em usar isso em mais porque quanto mais você usar este aplicativo, mais o dinheiro a empresa ganha dinheiro. Vamos trazer uma foto de supermercado, ver se tenho uma aqui, copiar e colar. Tão interessado em encomendar mantimentos? Não. Nós poderíamos apenas cortar esta foto como tal disse que para trás no sistema de camadas apenas fazendo suporte de comando os suportes tão interessados em ordem e mercearia. Então nós poderíamos ter talvez um pequeno ícone de caixa de seleção aqui e nós precisamos ter isso em algum tipo de fundo de contraste mais alto. Então podemos ver essa pequena chamada ação a menos que façamos isso um pouco menor. Tão interessado em ordem e mantimentos nível seta para baixo Arrow. Eu acho que temos um downy ou bem aqui que podemos localizar, economizar um pouco de tempo. Nós já fizemos esse ícone, e às vezes você pode ter ícones do lado, então assim como você gosta, você pode tipo de coletar ícones e ter todos agrupados juntos para que você possa ser capaz de localizá-los e arrastá-lo para sem ter que voltar para telas anteriores. Ali. Só uma pequena gorjeta. Eu não tive tempo para configurar isso com esta classe, mas se você tivesse um pouco de tempo extra realmente ajuda quando você está fazendo 50 ou mais telas diferentes . Então, o que? A seta para indicar lá Então ele poderia ter ah revisão restaurante tipo de grupo estes juntos entrega bem sucedida e revisão restaurante. Vou localizar uma garota rápida, bloquear Icahn e colocar isso aqui. Mas acho que já terminamos aqui. Eu acho que há tantas telas mais, podemos desenvolvê-lo por uma questão de tempo, para um tipo de ensino desse tipo de processo. Acho que estamos num bom ponto de paragem. Vamos ter mais um processo. Então, temos um aplicativo maravilhosamente projetado que foi gasto muito tempo fazendo pesquisa de fundo . Fizemos todo o processo U X, desenvolvemos uma persona sem fluxo de usuário, e incorporamos que fazer nossa baixa fidelidade agora é alta para o projeto Final da Líbia 2% . Mais uma coisa quando o apresentamos, você quer ser capaz de ter um quadro de fio de trabalho para que eu possa clicar e ter os links ir para lugares para que pudéssemos fazer alguns testes de usuário e também mostrá-lo para o cliente e ter em nosso portfólio mostrar o poço dele, se não for por um cliente, vamos fazer isso. Agora vamos entrar no modo protótipo. Eu vou em frente e neste vídeo vai ser uma nova lição. Estou animado porque esta é uma parte muito divertida onde as coisas realmente começam a ganhar vida para que pudéssemos entrar em nota protótipo e ligá-lo em Próximo. Verei na próxima lição 19. Protótipo - linkando tudo para baixo: Então vamos ligá-lo em minutos protótipo no protótipo gemido Adobe X'd. Vamos ligar tudo. Você tem que estar no modo protótipo. Para poder fazer isso, estou apagando todas as telas desnecessárias. Nós só temos os principais itens que precisamos e vamos andando. Eu vou em frente e salvar. Este é um novo documento apenas para ter um backup extra à mão. Vamos fazer isso. Ok, então, quando o modo protótipo, você já meio que revisou como as coisas de link para cima e como tipo de fazer animação automática. Então este vai ser um processo muito rápido. Eu não vou entrar em como você faz animações. Nós vamos ligar isso, que você já teve algumas lições sobre como fazer isso antes. Então é um grande clique em nossa coisa aqui. Então agora temos que lembrar nosso fluxo de usuários. Então, quando eles entrarem na sua conta, você vai direto para a caixa pop-up porque você vai direto para fazer login. Você está passando direto. Você nem precisa subir aqui, descer aqui. Então isso vai ligar para esta página e vamos ter que ser uma torneira. Então isso é apenas um simples clique de botão. Não vamos fazer animações automáticas. Fazemos uma transição simples e dissolvemos. Ok, então agora nós vamos vincular nossa criação de um login, que vai ser bem aqui em cima, vai para essa página. Ele vai salvar nossas configurações anteriores, então nós não temos que sentar lá e fazer isso repetidamente, e Facebook vai ter uma tela pop-up. Então agora temos que descobrir, como fazer isso aparecer acima do topo, já que nós meio que fizemos o trabalho de como fazer isso aparecer acima do topo, já que nós meio que fizemos o trabalho de fundo sobre isso, tudo o quetemos que fazer é conectado aqui. fundo sobre isso, tudo o que Nós já meio que fizemos o trabalho para fazer parecer que é um pop up. E isso pode ser Talvez possamos fazer algo um pouco diferente aqui. Poderíamos fazer uma animação automática de outono ou uma sobreposição. Bem, vamos tentar sobrepor. Ele irá sobrepô-lo em cima da imagem anterior. Vamos ver como funciona. Tudo bem, então temos tudo isso ligado. Então, agora vamos apenas supor que eles clicam em permitir e nós também queremos poderia ser realmente quer obter detalhes. Poderíamos ter uma tela separada que é exatamente como esta que tem a caixa de seleção. Então, quando você verifica a transição para o estado da tela marcada. Mas vamos apenas clicar em permitir que não vamos permitir sempre. Nós vamos direto para as opções aqui e não vamos fazer sobreposição de transição atrasada . E podemos sempre fazer Slide deixou deslizar. Certo. Uh, vamos apenas fazer um simples dissolvido por agora. Podemos sempre fazer a animação extravagante um pouco mais tarde, uma vez que liguemos tudo. Então agora não estamos. Não fizemos compras. Ainda não trabalhamos nisso, mas fizemos o restaurante. Então, se eles clicarem em qualquer lugar nesta grande imagem, eles vão pousar tarde na página do restaurante. Então vamos supor que eles escolhem o restaurante número dois ou qualquer lugar aqui é para o exemplo. Eles vão poder ir diretamente para a página de aterrissagem. Então, agora, quando eles clicam em qualquer um dos lados, vamos supor que clique no 2º 1 Vai ser um menu suspenso. Bom clique nisso. Então vai ser um dissolver e nós poderíamos tentar uma animação e ver como isso parece. Então vamos explorar isso um pouco mais tarde. Era poderia fazer alguma ligação básica. Então, uma vez que eles clicam aqui, eles adicionam ao saco para clicar em qualquer um desses nos botões da parte de trás, eles vão em frente, chegar a isso. Isto vai ser uma espécie de tela de animação. Então essa coisinha vai aparecer e aparecer de volta. Clique aqui e vamos fazer uma animação automática. E nós vamos tocar em torno de auto animate para ver como isso parece bem. E então nós vamos. Isto é apenas uma espécie de tela de transição. Vamos para a transição de volta para aqui. Apenas transição simples. Sabe, vamos continuar a descer. O processo é muito fácil. O que eles vão fazer aqui é ir para o pedido agora e clicar aqui, e então eles vão cobrar o cartão. Isso poderia ser outras telas que poderíamos desenvolver laters no cartão de crédito para carteira e, em seguida ir em frente e clicar no mapa e, em seguida, mudar anúncio ou eles vão mudar nessa ordem vai ter uma caixa pop-up e vamos ter que ser transição. Ótimo. E então esta também outra opção para rever restaurante que vai aparecer automaticamente após o processo. Então o que vamos fazer é ligar isto aqui para que tudo esteja ligado. Foi muito rápido, muito rápido. Vamos falar mais detalhadamente sobre isso em um momento. Então não se preocupe se você se sentir um pouco perdido, Aqui está todas as nossas conexões é destacado. Tudo o que pude ver todas as conexões fluxo muito simples que não desenvolvemos que são onde eles vão ao supermercado, mas vários arcos diferentes que não desenvolvemos. Mas para apenas um teste simples, isso vai funcionar muito bem. Vamos em frente e salvá-lo e vamos fazer um teste e ver se precisamos ajustar alguma de nossas transições à medida que avançamos. Então eu vou clicar para trás e então você começa minha prévia aqui. Se clipares neste pequeno botão de pré-visualização, ele vai abrir a nossa pré-visualização. Então aqui está a pré-visualização do nosso site. Poderíamos mesmo testá-lo. Podemos abrir isso no telefone dela também para testar. Mas eu só aqui no meu navegador há tanto tempo com a minha conta. Então eu sei que isso é clicável. Eu poderia criar um log em Arkan, logar no Facebook. Vamos jogar com o meu ou vamos, hum, hum, o que é mais com as minhas velas? Eles já têm meu registro na conta. Ok, então agora aqui está o meu acesso autorizado a comida local. Então eu fui para, hum, permitir. Então aqui estou eu, volta para a tela. Então eu quero ir buscar restaurantes. Isso e o que desenvolvemos. Balançar uma picareta no restaurante. Então agora aqui está o meu restaurante para que eu possa clicar em qualquer um desses apenas para testes de usuários para que eles possam testá-lo. Clique aqui e OK, então aqui estão alguns itens laterais. Vamos explorar o que eles têm. Nós sempre podemos voltar e mudar todos esses nomes, Então eu acredito que o 2º 1 é aquele que é clicável Click open. Isso é ótimo. Então agora aqui é tipo de onde nós precisamos tipo de trabalhar em transições. Por isso, neste momento, cliquei nisto, mas não posso desmoronar. Seria bom ser capaz de adicionar isso, então precisamos adicionar outra tela quando clicarmos de volta nele e ele vai voltar para essa página. Hum, para que possamos cozinhar isso agora mesmo. Sempre que vejo um problema, vamos resolvê-lo imediatamente. Vamos entrar aqui. Então eles estão aqui, e eu adoraria esse link de volta para esta página. Então, apenas olhando para trás dentro de um ciclo, é bom para uma transição agradável. Então, agora, se formos para a pré-visualização, podemos começar o estado em qualquer lugar. Inicie a visualização em qualquer lugar. Basta destacar onde você quer começar e clicar no jogo. Qualquer um iria direto a ele. Então vamos clicar na segunda opção, certo? Então, se eu clicar nisso de novo, ele vai voltar para a tela anterior. Vamos parecer que desmorona naquele Nice. E eu só preciso consertar essa foto. Aquela foto deve ter sido apagada. De alguma forma. Essa é uma boa opção. E agora eu quero adicionar o saco. Então deixe-me adicionar um saco. Lá vamos nós. Há adicionar o saco e, uh OK, então eu acho que bem aqui, vamos em frente e encomendar. Agora estou muito feliz com isso. Poderíamos desenvolver tudo isso mais tarde. Adicione gorjeta. Isso vai ser uma pequena transição diferente, nossa animação ou mudar o total. Você poderia fazer isso com as animações e telas diferentes. Então peça agora. Então aqui vamos nós o cartão de cobrança e ele iria. Então lá vai me dar 12 minutos et A. Que seria mapa vivo sempre que for desenvolvido. Para que uma carga, o que quer que seja E.T.A. E.T.A. E.T.A. seja desenvolvido pelo algoritmo e possamos mudar uma ordem de sombreamento. Ouça, uma mudança fora de ordem aqui com aqueles vai aparecer aqui. Isso aconteceu. Para que eu possa mudar. E a meu pedido, posso ligar ou mandar mensagem. Digamos que eu liguei e então é uma entrega bem sucedida. Eu posso rever restaurante e ir para uma tela diferente trabalhando, revisá-lo, ou ir interessado em ordem e mantimentos e vamos ligar isso de volta. Agora que estamos aqui, queremos ligar isto de volta à página de aterrissagem do supermercado, que vai ser lá em cima, que ainda não desenvolvemos. E, em seguida, rever Restaurante poderia ir para a nova tela onde eles podem rever o restaurante . Você pode ver que eu posso continuar com isso um pouco. Não vai alterar algumas coisas. Reparei em algumas fotos. Esta foto estava faltando para consertar isso. Então, quando você faz a opção de menu suspenso, você não vê essa imagem desaparecer. Então faça alguns ajustes e conserte. E eu vou mostrar a vocês como fazer a animação aqui que vai fazer este pequeno saco tipo de aparecer para cima e para baixo e dar um pequeno sacudido para mostrar um pouco de animação que algo foi adicionado ao saco. 20. Protótipo - criando animações: Então eu passei cerca de 20 a 30 minutos realmente pensando sobre como tudo isso vai se animar na pré-visualização e tipo de adicionar um pouco de emoção e animação para que não seja apenas estática indo de uma página para outra. Há algum tipo de movimento para mostrar ao cliente, mas também para mostrar ao desenvolvedor como gostaria que as coisas se movessem, deslocassem de tela para tela. Eu só vou passar por algumas das coisas Ah, ir e mostrar-lhe na tela. Onde eu vou te mostrar agora é como fazer esse pouco animado. Mas há algum tipo de ação onde você adicionou à carpa que muda a cor para vermelho. Fica um pouco maior na tela, e depois volta ao estado normal. Então, se você queria ter ah comentários de lições sobre como usar as ferramentas de animação e transição e e Adobe X'd Jeremy Deegan tem algumas lições incríveis sobre isso na seção Adobe X'd no final da classe de definitivamente verificar isso. Pule nessa seção. Se você realmente quer descobrir tipo de voltar ao básico em termos de aprender a fazer algumas dessas animações e transições, mas meio que mostrando como eu fiz isso com este projeto prático. Aqui está a animação que levou três telas diferentes. Tipo de fazer a animação. Eu poderia adicionar ainda mais se eu quiser ter uma animação mais suave com aquele pouco, hum, adicionando ao carrinho. Mas aqui está a imagem central. Então temos a nossa página de destino clique em Adicionar o saco. Eles vão clicar sobre a tela. Então a diferença aqui é o modo protótipo de tendência Arman. Agora vou clicar no quadro de arte, e vou dizer que é uma transição típica. Transição muito simples. Não há tempo para isso, então ele entra diretamente na transição. Não há desbotamento acontecendo, então basicamente, você clica sobre para adicionar ao saco. Vai para a mesma cópia, mas você notou a diferença. Aqui. Você tem um tipo de estado cinza, e então você tem tipo de adicionar os dois itens diferentes ao carrinho, e então quando você sobe, eu tenho três telas diferentes para fazer a animação acontecer. Então o próximo que eu fiz a transição eu não animei automaticamente. E então o quê? Isso vai fazer isso auto animar a partir desse estado até este estado, e você vai notar que eu fiz um pouco maior para tipo de indicar tipo de um zoom no ícone, um pouco de um movimento para que seus olhos atraídos para o topo do tela para que eles saibam. Ok, eu adicionei ao CARRINHO. Ele também sugere ao usuário que clique no saco de compras para continuar o processo de check-out se ele não viu o botão de revisão do pedido abaixo. Então é tudo planejado. Há uma razão por trás de todas as animações. Eles não parecem bonitos. Há um tipo de maneiras que estamos atraindo o usuário para seus objetivos o mais rápido possível , tornando-o fácil e intuitivo. Então aqui está a transição em que ele entra, e isso é o que é diferente, já que o gatilho é um tempo. Então o que acontece é que ele entra nessa transição e, em seguida, faz automaticamente uma transição de tempo , então ele vai passar para a próxima tela acima sem ter que clicar ou interagir. Vai acontecer com o tempo, então a duração é de um segundo. Então, depois de um segundo você está na tela, ele vai aparecer nesta tela e fazer a animação, e então você vai ter outra hora. Transição automática, animar até o topo é o último é o estado final. Então você já teve a pequena animação acontecer, e agora você tem os dois adicionados no carrinho, e então tudo iria agir como normal nesta fase. Esta é esta a tela que você iria então conectar de volta. Se eles clicarem de um carrinho de compras lá em cima, eles vão clicar aqui em baixo. Então eu sei que isso é um pouco complicado, mas volte e estude o básico das lições de Jeremy Demons onde ele realmente passa, tipo de volta ao básico com algumas dessas transições. Eles meio que têm uma idéia de como emular alguns desses em seus projetos. Então eu não vou entrar em muitos detalhes, mas é um tipo de show. Você meio que o que eu fiz lá para fazer isso acontecer e por que eu até fiz esse tipo de “por trás”. Por que eu faria isso animado para que eu pudesse deixar o usuário saber que isso agora é um saco de compras clicável. Iconic tipo de realmente chama seus olhos lá em cima. Então foi assim que aconteceu de passar por cima de alguns outros que eu fiz aqui. Você pode ver como você tem que criar um tipo de várias telas e estados para tipo de obter algumas transições para ir. Algumas transições acontecem, que é uma tela. Não vou passar por isso. Isto é o que acontece. Vou clicar em prévias e tenho que ver algumas das animações que construí aqui. Então vamos fazer o login na sua conta. Vamos direto para lá , então vamos permitir. Então isso vai haver uma animação que vai aparecer e mostrar a vocês como fazer essa animação acontecer. Então você clica em permitir que ele vai para a tela inicial. Isso vai fazer um pouco de zoom nas fotos. Então adiciona uma boa animação. Mas você também percebe como as setas tipo gastam dois. Há algum tipo de ação que está acontecendo, e é suave. Então como eu fiz isso foi eu fui até aqui e eu tive que fazer em telas diferentes. Então, temos este estado, que vai ser o teu que vai ser o teuestado anterior. Então ele vai entrar aqui, deixe-me ir e clicar na transição para que eu possa mostrar-lhe. Então esta é apenas a sua transição padrão. Ah, e tem um 0.4 2ª duração. Então isso vai para a tela. Ele tem mais uma transição? O que eu quero fazer é fazer isso se transformar nisso. E eu queria ser uma animação agradável e suave. Então, para fazer isso, você deve fazer auto um companheiro de equipe. Então eu vou clicar no topo, e eu vou mostrar a vocês o tipo de coisa que eu usei aqui. Então isso é auto animate. Eu fiz um segundo, o que é um pouco mais longo. Então você pode realmente ver a animação aparecer no lugar. Você pode realmente ver a quantidade de fotos. Não é tão rápido que você perca, e eu também mudo as posições dos botões. Então eu tenho essa, uh, essas flechas. Eu sinto muito. As setas, as setas para a esquerda e para a direita estão apontando para a esquerda e para a direita. E aqui eles apareceram para cima e para baixo, para que você possa ver quando o fizer. A animação automática que vai levar de uma transição todo o caminho para outra é como usar quadros-chave. Se alguém já trabalhou em flash ou é algum outro tipo de programa como esse, você pode ter seu quadro chave vai fazer a transição deste dedo do pé no próximo. Isso é um tipo de auto. Como auto animar funciona Mais uma vez assistiu aulas de Jeremy Diggins. Eu não posso enfatizar o suficiente o quão incrível é realmente voltar ao básico quando se trata ar realmente aprendendo o que você poderia fazer com transições e auto animar e modo protótipo . Então eu fiz um par de animações muito pequenas, não nada que assume toda a tela apenas pequenas coisas. Esse tipo de faz ajuda o aplicativo se sentir um pouco mais vivo e tem um pouco de ação, mas não tanta ação que é distração. Então, tome, por exemplo, o mapa tipo de ver esta pequena mudança no mapa, e o que temos aqui é que temos um membro aqui em cima que temos. Este é o nosso último estado no palco. Isso se conecta todo o caminho até o saco de compras, então este é um tipo de estado anterior. Então você tem o mapa meio que arrastado para baixo aqui na parte inferior, e eu acabei de fazer uma animação automática automática automática simples. Então, você sabe, já que no tempo para que eles não precisam clicar em nada, eles simplesmente aparecem na tela e eles esperam 0,6 segundos, e então o próximo verde muda automaticamente e é uma animação automática. Então vai ser umaanimação agradável e suave, animação agradável e suave, e o mapa aparece de volta ao lugar onde deveria estar. Então é apenas uma coisinha muito pequena que você pode adicionar para realmente adicionar. Respire um pouco de vida em seu aplicativo no mesmo fantasma deste estado s para que você vai notar. É meio que tudo aqui embaixo no fundo. Você tem um pouco de espaço branco aqui se você subir até o topo. Eu puxei para cima para que você possa tipo de ver que muito pequeno snap up animação faz com que pareça que é mais interativo nas peças. Eu fiz a mesma coisa. Tentei fazer um pouco em cada página só para ser consistente. E aqui está o mapa. Meio que se encaixa no lugar. Tipo de ter isso antes do estado é o estado anterior bem aqui e então ele tipo de encaixar no lugar, e meio que se aproximam deles. aplicativo disse que estava aparecendo no local final. Tipo de ver o mapa se movendo em direção ao destino final Então você pode ver apenas algumas pequenas coisas que vão em frente e mostrar-lhe o projeto final que temos até agora, estamos prontos para apresentar isso aos usuários para fazer testes de usuários. E haverá uma nova seção adicionada no curso. Então, se não estiver lá, deve estar aqui muito em breve. E se ele estiver lá, vá em frente e continue em Teoh, o teste de usuário Nós vamos apenas fazer alguns muito pouco passar brevemente tipo do que eu faço com testes de usuários e tipo de algumas das melhores maneiras de testar seu aplicativo. E então, uma vez que você usa seus testes, você volta e você revê e você faz algumas revisões. Além disso, os clientes envolvidos nesse processo de revisão até que possamos ter essa coisa final pronta, então você está pronto para enviá-lo para desenvolvimento para código, e é aí que você pode ser um recurso para o desenvolvedor. Onda deixou-os fazer a sua magia para tornar isto realidade.