Design de UI/UX, padrões de design de interface de usuário — ministrado por um instrutor de UI/UI da Universidade

1. Curso adicional de design de introdução de design: Bem-vindo ao curso de padrões de design da interface do usuário. Meu nome é Erin Lawrence e sou designer principal de UX e fundador de uma agência UX chamada UX honey em San Francisco, Califórnia. Também sou instrutor de UX, onde ensino design avançado de UX na Academy of Art University, também aqui em São Francisco. Este curso é um guia muito prático para entender a experiência do usuário e padrões de design da interface do usuário. Os padrões de design são um conjunto de diretrizes e regras de interface do usuário que dizem respeito à forma como os usuários usam produtos e elementos da interface do usuário. Compreender esses padrões é uma obrigação para qualquer designer de UX ou UI. São coisas como campos de formulário e suspensos e barras de navegação e caixas de seleção e botões de opção e barras de tabulação e seletores de data, etc Se você está planejando fazer design da experiência do usuário ou design de interface de usuário. E você não tem um entendimento firme desses padrões de design. É como ser um padeiro de bolos e não saber nada sobre ingredientes de bolo. Porque essencialmente são os ingredientes que compõem um bolo. E o mesmo vale para o design da interface do usuário. design de experiência do usuário, ou design de UX, tem muito a ver com a compreensão das necessidades do usuário e de que conteúdo ele precisa para atingir seu objetivo. E esse conteúdo é o que faz a interface. Em outras palavras, uma interface de usuário é apenas imobiliária para conteúdo. E entender qual é o melhor imóvel a ser usado para conteúdo específico tem muito a ver com padrões de design e componentes da interface do usuário. É disso que se trata essa classe. Em cada vídeo dentro da aula, vamos dar um mergulho profundo e abordar um tópico a seguir ou componente de experiência do usuário. Vamos começar com coisas como campos de formulário, botões, suspensos, seletores de data, botões de opção, caixas de seleção, alternâncias, formulários de endereço, Fóruns de pesquisa, barras de tabulação, barras de título, acordeões, guias, dicas de ferramentas, sombras, miniaturas, carrosséis, modais, lightbox como menus e gavetas, assistentes, pão ralado, paginação, ícones, fotos e todos esses tópicos terão explicações, exemplos do mundo real, melhores práticas sobre como usá-las, por que você as usa? E meu favorito, teremos exemplos de fazer e não fazer também. Eu incluí todo o material de origem dentro da classe que você pode baixar e você pode manter para sempre. E também você pode baixar o arquivo Figma que usei para esta classe para que você possa tê-lo dentro do seu aplicativo Figma, também para sempre. E também como bônus, vamos pegar todos esses padrões de design. E adicionei uma área extra à classe. Bem, isso é mais baseado em projetos, onde vamos usar a ferramenta de design figma. E construiremos todos esses componentes para ver como eles se parecem e como usá-los em protótipos ao vivo. Coisas como botões de opção personalizados, onde o estado do mouse e o estado de seleção aqui. Faremos menus que deslizam para dentro, deslizam para fora. Faremos modais, acordeões que utilizam técnicas de animação inteligentes dentro da Figma. Faremos a validação em linha e aprenderemos tudo sobre validação em linha na classe. E então vamos aplicá-lo a um protótipo para permitir que alguém veja os requisitos de senha, valide à medida que insere uma senha que tenha os requisitos corretos e pressione Criar. Faremos spinners animados aqui para imitar o carregamento da criação da conta, faremos suspensos que imitam a rolagem de uma lista suspensa real e o estado de seleção. E, em seguida, aprenderemos como fazer isso em dispositivos móveis também. Mais. E o que é legal é que eu também construí um arquivo Figma inteiro, onde a linha superior de cada uma das seções aqui foi projetada pronta para usar um protótipo que você pode usar um exemplo separado. E então, durante os vídeos, passaremos por cada um desses e faremos isso juntos para todos esses diferentes tipos de padrões de design. E também faremos a mesma coisa para todos os padrões móveis também. Portanto, você não só está recebendo as melhores práticas e fazer e não fazer. Você também vai sujar as mãos e aprender a fazê-lo dentro da ferramenta de design figma. Esta aula é ótima para qualquer pessoa que estuda para se tornar um designer de UX ou um designer de interface do usuário. Ou se você já estiver em campo e quiser aperfeiçoar esses padrões. Tudo bem, essa é a introdução. Meu nome é Erin Lawrence e espero que você goste da aula. 2. Estrutura do curso: Antes de começarmos a aula, eu queria fazer um vídeo rápido sobre a estrutura de cada vídeo e o que vamos cobrir. Cada vídeo vai passar e mergulhar profundamente em um componente de interface do usuário e nos padrões de design existentes que se associam a esse componente. Cada um, eu vou, darei uma breve explicação do que é o componente, as origens do componente. Falaremos sobre prós e contras. Falaremos sobre casos de uso para esse componente. Vou mostrar como ele é construído, como são os diferentes estados do componente, ele se parece. Veremos exemplos da vida real. Vou mostrar a você como combinar componentes existentes juntos. Faremos o que fazer e não fazer pelo componente. Você pode dizer a mesma coisa aqui para guias. vez, as origens, o que é uma guia, exemplos de melhores práticas móveis e web. E novamente, terminaremos em fazer e não fazer para cada componente. Tudo bem, te vejo em breve. 3. Apresentação do curso: Tudo bem, bem-vindo à classe. Esta é apenas uma introdução rápida do que esperar para a classe. E também vou falar um pouco sobre design de UI e padrões de design e design UX também. Mas comece do topo. Sim, o design da interface do usuário é o processo que os designers usam para construir interfaces e sistemas operacionais de software ou dispositivo. Novamente, concentrando-se no conteúdo e usabilidade e também na hierarquia de conteúdo. E o design UX é o estudo de entender as necessidades de seus usuários e como eles usam um aplicativo ou uma experiência de usuário específica. Há muita sobreposição entre designers de UX e UI. O designer de interface do usuário está traduzindo essas necessidades do usuário provenientes do teste de observação ou pesquisa sobre a hierarquia de conteúdo e conteúdo. E esse conjunto de informações será usado são exibidos na experiência do usuário de um aplicativo. Ser um bom designer de interface significa que você tem uma sólida compreensão de qual conteúdo e hierarquia você precisa projetar. E o mais importante, que tipos de componentes e padrões imobiliários da interface do usuário se comunicarão melhor e servirão a essa hierarquia de conteúdo e conteúdo. É aqui que entender padrões de design é super útil e é disso que se trata essa classe. Os padrões de design são apenas um conjunto de diretrizes e regras de interface do usuário que dizem respeito à forma como os usuários usam produtos e elementos da interface do usuário e entendem esses padrões de design. É uma obrigação para qualquer pessoa fazer no design de UX ou UI. E são coisas como campos de formulário e suspensos e barras de navegação e barras de tabulação. E vou entrar tudo nisso aqui no próximo segundo. Os padrões de design são extremamente úteis, principalmente porque nos economizam tempo e dinheiro e nos obtêm melhores resultados de forma mais rápida e rápida. E essa é uma filosofia central para o desenvolvimento ágil de aplicativos. E ele pede aos designers que pudéssemos aproveitar esses padrões e usá-los em nossa tomada de decisão diária de design. Porque esses padrões e esses componentes são usados todos os dias em muitas experiências do usuário. E os usuários não se acostumaram com a forma como esses padrões eram. Então, essencialmente, sabemos que eles funcionam e podemos alavancá-los no dia a dia. Este curso lhe dará um guia muito prático para um guia muito prático para entender quais são esses padrões de design de interface de usuário e como os designers os usam, quais regras se aplicam a eles? Exemplos reais e da vida real. Cada um terá fazer e não fazer para cada componente. E, novamente, dominar esses padrões e componentes ajudará a torná-lo um designer melhor, mas também torná-lo um melhor tomador de decisões sobre o imobiliário da interface do usuário usar para o conteúdo e hierarquia de conteúdo na qual você está trabalhando. Então, novamente, vai torná-lo mais rápido, torná-lo melhor. E isso ajudará você a aplicar uma boa lógica de decisão sobre por que você usou um determinado layout ou padrão de design dentro do seu design. Vamos cobrir muitas coisas. Vamos cobrir campos estrangeiros, botões, suspensos, selecionadores de datas, botões de opção, caixas de seleção e alternâncias. Endereça fóruns e pesquise Formulários. Barras de abas intituladas barras, acordeões e abas , dicas de ferramentas e sombras, miniaturas e carrosséis, modais, caixas de luz, menus e gavetas , assistentes, pão ralado, paginação, ícones e fotos, e cada um dos esses exemplos, novamente, teremos as melhores práticas de onde eles vieram, quando usá-los, quando não usá-los. E nós vamos ter coisas e não fazer isso também. Então, no final, novamente, tudo isso é uma ótima informação. Se formos ir para o próximo nível, se você quiser, vamos aprender como fazer tudo isso dentro da Figma e da Figma como uma ferramenta de design. E vou fornecer um arquivo. E esse arquivo se parece com isso. Já está predefinido, pré-projetado. O que vamos fazer é passar e criar todos os diferentes componentes sobre os quais falamos e padrões de design sobre os quais falamos na classe, como coisas como botões de opção personalizados ou até mesmo o que são os botões de opção. Vamos criar modais, são menus como este e fechá-lo fará modais. E aprenda a, não apenas para aprender sobre esses padrões e como fazê-los e melhores práticas, mas também aprenderemos como fazê-los no final. Temos acordeões aqui. Você pode ver essa interação, validação em linha para criação de conta aqui, colocando spinners dentro de um botão aqui para mostrar estados de carregamento. E faremos suspensos e como fazer isso na Figma também. faremos tudo isso para aplicativos móveis. Saiba como fazer isso em protótipos móveis também. Então, abordaremos as melhores práticas da web. Faremos isso em dispositivos móveis também. E aplicaremos todos esses padrões sobre os quais vamos aprender dentro da ferramenta de design figma, ter todos os arquivos prontos para uso. Então, tudo o que você precisa fazer é baixar o arquivo. Eu tenho o exemplo pré-construído para que você possa separá-lo. Durante a aula, o que vamos fazer é olhar para ele e ver como funciona e depois vamos construí-lo juntos. Então, vai ser super divertido, é envolvente. E espero vê-lo lá e te vejo na próxima aula. Tchau. 4. Material do curso: Ok, eu só queria fazer um breve vídeo sobre o material da aula mostrando levar cerca de 30 segundos ou um minuto aqui, eu tenho dois tipos diferentes de formatos. Tenho todo o material em formato PDF, que abrirei aqui em um segundo e mostrarei a vocês. Também tenho todo o material construído dentro da Figma, a ferramenta de design. Eu incluí este arquivo, é um ponto, é o zip de ponto do arquivo Figma classe. Basta clicar duas vezes nesse arquivo. E ele vai abrir uma pasta. Nessa pasta, tenho um arquivo de configuração de ponto de arquivo Figma, e também tenho instruções de aula sobre como abrir esse arquivo, mas eu imaginei que vou fazer um vídeo para você também. A coisa a salientar, se você abrir o arquivo Figma é que você não pode clicar duas vezes no arquivo Figma e abri-lo. Você receberá esse erro aqui. E eu estou em um Mac aqui, apenas avança. O que você tem que fazer é que você precisa, você tem que arrastar esse arquivo as seções de rascunhos em seu aplicativo Figma aqui no canto superior esquerdo. Sua seção de rascunhos pode parecer um pouco diferente da minha, já que tenho todos esses arquivos aqui. Então, novamente, rascunha seções no canto superior esquerdo. Vamos pegar este arquivo Figma, arrastá-lo para dentro. Você verá esse contorno azul ao redor da ferramenta Figma. Isso é ótimo. Isso significa que a Figma vai abrir isso e vamos clicar e arrastá-lo. E este é um arquivo grande. Pode levar um segundo para a Figma abrir isso. Enquanto isso estiver abrindo, você pode pegar qualquer um desses formatos aqui, material em formato PDF, e isso segue junto com a classe. Então, na primeira classe, vamos fazer campos de formulário. Novamente, eles são um arquivo grande, então eu tenho que fazer é abrir em um aplicativo de visualização, ampliar. Então você pode simplesmente navegar daqui, ir desde o início e trabalhar o seu caminho pela direita da classe e ter todo esse material aqui. Mais uma vez, sou um grande fã. Você deve ter essas coisas para sempre, seja em formato PDF ou no formato Figma. Vamos verificar a Figma. Certo, legal. Portanto, ele ainda está carregando o arquivo. E, novamente, como eu disse, é um arquivo grande. Certo, ótimo. Ele tinha carregado. Então, vamos avançar e abri-lo rapidamente. O benefício do arquivo Figma aqui é que todos esses são componentes ativos, o que significa que você pode entrar e pegar esses elementos e usá-los para seus projetos. Como eu disse, vamos fazer uma aula no final onde vamos construir tudo isso. Mas estes são todos ao vivo. Você pode ampliar a Figma, digamos que você queira este seletor de datas aqui. Você pode entrar e pegar este seletor de encontros. Tenho todos os campos de formulário. Eu tenho um monte de botões aqui que você pode pegar e usar e formar campos aqui são estilos diferentes que você pode entrar e usar e eles todos componentes ativos que você pode pegar. Eu não tive um monte de ícones aqui que você pode pegar dois. Então, novamente, se você, em relação ao material da classe, quer você queira o arquivo Figma ou quer o formato PDF também, não importa. Você nem precisa disso. Os vídeos são ótimos, eles cobrem muito conteúdo bom, mas como eu disse, eu acredito, você deve ter esse material para sempre e se referir a ele sempre que precisar. Vejo você mais tarde. Adeus. 5. Campos de formulário: Tudo bem, bem-vindo aos campos de formulário. Os fatores de um bom campo de forma são apenas algumas coisas. E então entraremos em diferentes estilos e estados comuns e mergulharemos profundamente nos campos de formulário e nos casos de uso para eles, mas principalmente eles são fáceis de ler. Eles têm textos com rótulos claros e textos de forma. Eles são fáceis de clicar em um texto de entrada. Eles fazem bom uso dos textos fantasmas e falarei muito sobre textos fantasmas, que é um atributo importante de um campo de formulário e tem um estado definido, como o erro desativado ativo do mouse. Vou entrar em exemplos diferentes desses estados. Ele tem imóveis para mensagens de erro e tem uma mensagem de erro clara do que errou e qual campo de formulário não errou. E é fácil entender quais campos de formulário são necessários, bem como quais campos de formulário são opcionais. Vamos entrar em alguns estilos preenchidos com formulários. Há cinco estilos mais comuns de campos estrangeiros que você vê em toda a Web e aplicativos. Uma coisa a mencionar também é que os campos de formulário são super importantes lá. Na verdade, um dos elementos de interface do usuário mais importantes na experiência do usuário e dos aplicativos que temos. Somente porque ele extrai informações de nossos usuários. Conhecemos informações sobre eles. Isso ajuda a criar conteúdo. É essa barreira entre nossa aplicação, ou é o funil de comunicação entre nosso aplicativo e nosso usuário. Se o usuário quiser dizer algo ao aplicativo, isso acontecerá em um campo de formulário. Também é importante para nossos serviços comerciais, como se você é uma empresa que vende produtos do que precisa de pessoas para comprar produtos de você. E quando eles subprodutos estão se engajando em um campo de formulário. Então, como designer de UX, é importante que tenhamos um bom senso das regras, melhores práticas e padrões entre os campos de formulário. A primeira coisa que temos aqui é um formulário delineado preenchido. Isso é mais comum. Este é o estado padrão, significa que este é o estado, mas isso ainda não está focado ou inserido, apenas o primeiro estado em que o usuário veria um formulário de esboço. É apenas o retângulo aqui, e tem uma cor cinza delineada. E então temos os textos rotulados aqui. Isso seria como o nome. E então temos os textos fantasmas. Esses textos fantasmas são realmente um segredo. É, é uma oportunidade estratégica para usarmos isso. E há tantas funções e segredos diferentes na indústria de como criar estratégias de seus textos fantasmas para comunicar o formato que você deseja para seu usuário. Ou crie estratégias para mostrar à comunidade o objetivo de comunicação que queremos para o usuário ou para solicitar seu usuário a essas informações, certo? Então isso é chamado de textos fantasmas. Vou falar muito sobre isso. Novamente, um bom formulário preenchido tem no mínimo 50 pixels de altura e, em seguida, a largura depende apenas do conteúdo aqui. Este exemplo exemplo 350 pixels de largura, mas realmente depende da largura do formulário, do contexto e do conteúdo que será escrito nesse campo de formulário. Digamos que fosse um nome ou um e-mail. Você vai querer um campo de formulário mais longo. Se for um número de telefone, você pode querer apenas um curto como este. O segundo estado, é um formulário preenchido. E, essencialmente, são os mesmos contextos. Temos os textos fantasmas, temos o rótulo, ele é preenchido em vez do contorno, temos uma cor de campo aqui. Em seguida, temos um formulário de interface do usuário material. O mesmo tipo de princípio aqui. Ele tem um texto fantasma e um rótulo. É só em vez de um contorno, está usando um retângulo. Ele está usando apenas uma linha para indicar onde está o formulário. Esta é a interface de usuário material criada pelo Google e esse tipo de estilo, um campo de formulário é comum em produtos do Google e dispositivos Android. Você também tem uma interface de usuário material sem o título. Isso é chamado de flutuador rotulado onde o título é a substituição dos textos fantasmas. E o que acontece aqui é que isso é chamado de rótulo de fluxo porque quando o usuário clica nesse rótulo ou neste campo de formulário, você verá o título ou o texto do rótulo aqui flutuar. E os textos fantasmas aparecem assim. Mas, no estado padrão, não há textos fantasmas. É apenas o título aqui. Uma coisa que eu normalmente não os uso pessoalmente é porque eles não mostram esse texto fantasma no estado padrão. Os textos fantasmas só aparecem quando o usuário clica para digitar informações. E assim perdemos essa oportunidade de criar estratégias de nossos textos fantasmas no estado padrão do campo do fórum. E insira aqui informações que ajudam a atender nossos usuários ou fornecer avisos ou dicas sobre o formato que esperamos que eles insiram. Eu também usei isso antes no passado, onde tínhamos um layout preenchido com um formulário de uma coluna como este. Onde você puder, você tinha algo como nome aqui e poderia dizer um vestido ou algo assim aqui. Percebi que quando estávamos testando isso com idosos e um público mais velho, eles realmente não sabiam onde clicar. Em um, em um caso, o usuário estava realmente tentando clicar no nome aqui. Isso pode ter sido um pouco mais apertado aqui, e eles clicaram acidentalmente no endereço porque a linha não é uma indicação forte o suficiente da área de toque para clicar ou tocar na área de destino ou a área de torneira. Com base neles, eu normalmente fico longe deles. E você pode ver que quando você usa o mais comum, que é esse formulário de esboço aqui, isso tem um bom senso de área de toque. Você pode ver o retângulo, é aí que a entrada vai acontecer. Onde a interface do usuário material, é apenas essa linha aqui. Outra é que temos é um formulário de esboço que tem o rótulo flutuante. E novamente é sem o título. O título substitui o texto fantasma aqui. E então o que acontece? É o mesmo princípio quando você passa o mouse sobre o campo do fórum. O título então flutua em cima do texto fantasma aqui. Assim. O mesmo princípio que eu digito, normalmente fique longe deles só porque não utilizamos os textos fantasmas para estratégias de comunicação no início. Alguns desses eram todos os estados padrão. Para estados de foco, tem fóruns. Vou passar por isso rapidamente. Sua filosofia de pairar é que algo deve ganhar vida quando você paira, e geralmente deve ser uma cor mais brilhante. Então, se você tem uma, uma cor como essa forma preenchida aqui, então ela deve ser uma cor mais brilhante no estado de paira apenas para que pareça mais viva. Essa é uma espécie de filosofia e princípios em torno do pairar. E fizemos a mesma coisa aqui para o formulário de esboço. Acabamos de fazer o contorno azul. ditado muito comum da interface do usuário material que você obtém a mesma coisa a descrever fica azul, seja um rótulo flutuante aqui. E então o mesmo princípio para o preenchimento do formulário de contorno que tem o rótulo flutuante é que acabamos de mudar a cor do contorno para um azul. Tudo bem, o próximo estado é chamado de estado de entrada ou foco. E é quando o usuário clica no campo de formulário a partir de um AM do mouse ou toca no campo de formulário. E a tecnologia fantasma muda para o cursor de tipo. Então você verá o cursor de tipo aparecer e os textos fantasmas e a maioria dos casos ainda permanecerão aqui até que o usuário comece a digitar. Uma vez que eles digitem a primeira letra, você verá isso desaparecer. Os textos fantasmas desaparecerão assim que a primeira letra começar a digitar. Tudo bem, então este é o estado ativo, ou eu sinto muito, o estado de entrada ou o estado de foco. E tudo o que significa é que o usuário está inserindo informações nesse estado aqui, ou eles estão focados dentro do estado lá. cursor de tipo está aqui, focado neste campo de formulário. E é uma prática recomendada para passar o mouse para usar isso. Uma cor brilhante aqui, o blues. Mas quando você chega ao estado de entrada, é melhor ir com um cinza mais escuro ou até mesmo um preto, ou você pode adicionar um pouco de azul no cinza, como o que fizemos aqui também. Mas é melhor ir dessa cor clara para o estado padrão e depois uma cor mais escura para o estado de entrada. Aqui. Você pode ver os diferentes exemplos aqui, exatamente o mesmo para a interface do usuário material. Eles tinham. O azul para o pairar fica mais escuro para o estado de entrada. E, em seguida, a mesma coisa para os outros campos de formulário de rótulo flutuante. Tudo bem, então o estado ativo é praticamente uma vez que o usuário digitou qualquer informação e sai, sai do campo do formulário. Este campo de formulário voltará ao estado padrão. A única coisa que muda é o texto inserido muda para uma cor mais forte. Tudo bem, então usamos uma cor cinza claro para o texto fantasma para indicar que não há nada inserido aqui. E geralmente isso parece um call to action, como estagiário, nome de estagiário aqui, assim. E queremos ser capazes de escurecer o texto para os estados de entrada. Então, quando o usuário verifica tudo isso, ele pode ver que eles foram preenchidos. Mais uma vez, o mesmo para o estado preenchido. Se estamos usando um formulário preenchido, temos um branco mais brilhante. E o mesmo para o estado de entrada aqui para os formulários de rótulo de fluxo. Legal. Portanto, cada campo de formulário para o estágio de erro, cada formulário deve ter seu próprio imóvel para mensagem de erro, geralmente na parte inferior. E, novamente, isso pode acontecer quando o usuário estiver digitando dentro do campo de formulário. E temos o que é chamado de validação em linha, que é quando erramos o usuário no campo do formulário. Ou isso acontece quando eles pressionam o botão Salvar ou enviar ou Avançar. E não atendemos aos requisitos deste campo de formulário. O que quer que não tenha sido atendido para um campo de formulário específico, no que diz respeito aos requisitos, deve ser a mensagem de erro aqui. Novamente, essas mensagens de erro devem ser muito claras sobre o que foi errado. Você pode ver para os formulários de campo, podemos apenas deixar todo o formulário vermelho para o contorno. São apenas as melhores práticas apenas para, apenas para fazer o contorno vermelho no campo do fórum, você não precisa fazer vermelho com o texto ou qualquer coisa assim. Você nem fica muito louco. Tudo o que você precisa fazer é apenas uma pequena indicação sutil de vermelho para ajudar a apontar o usuário para onde olhar em sua mensagem. E vermelho. mesmo para os formulários de interface do usuário de materiais aqui e para o outro rótulo flutuante aqui. No último estado que temos, isso é comum em campos de formulário como o estado desativado. Portanto, esse é o estado em que um usuário não pode interagir, inserir ou editar nenhuma dessas informações. E eu gosto de usar apenas 30% de transparência ou cinza claro, ou você pode até usar ambos. Tudo bem, então todos esses são 30% de opacidade aqui. Ok, então vamos entrar no mergulho profundo dos campos de formulário agora. Veja diferentes funções. Vejamos como podemos usar o texto fantasma para criar estratégias para diferentes necessidades, um formato e entradas com base no campo de formulário que temos. Vamos examinar alguns campos de formulário comuns. Um deles é números de telefone. Você pode ver o exemplo dos textos fantasmas aqui é que ele está dando ao usuário o formato que queremos que ele insira no número de telefone. Não estamos pedindo um 11. Nós só queremos 1112223333 aqui, assim. E então o que acontece aqui é que temos esses traços que você pode ver aqui também. E assim, quando o usuário entra nesse campo de formulário, preenchemos automaticamente os traços para ele. O auto, eles verão os traços ainda aqui como parte do texto fantasma. Quando chegarem ao primeiro número dois, e digamos que eles digitaram os próximos dois. Vamos colocar isso arrojado para eles. Eles não precisam fazer traços automaticamente, preencherão automaticamente isso para eles. Em seguida, você verá a conclusão do campo do formulário assim que ele for concluído. A outra coisa também a saber é que, se você tiver um campo de formulário de telefone celular ou um campo de formulário diretamente vinculado a apenas números. Quando você estiver em um dispositivo móvel, abra o teclado numérico. Não abra o teclado de letras e faça com que o usuário volte para o teclado numérico. Isso também está de acordo com o motivo pelo qual preenchemos automaticamente o traço, é que se o usuário digitar como digitando isso em um teclado, tudo o que eles precisam fazer é digitar os números no teclado. Eles podem ter um teclado que é uma seção numérica à direita. E então, em um dispositivo móvel, há um número ruim de teclas, o teclado é assim. Eles não precisam entrar em nenhum dos traços. Eles apenas colocam os números e faremos isso por eles. Mais uma vez. Isso vai muito, muito de volta a isso, aquela primeira coisa que falei aqui, que é oferecer, a menor quantidade de tempo e energia para completar uma tarefa. Então, esses são grandes. Affordance, falarei muito também. E o transporte também são super importantes. Data de nascimento. É o mesmo princípio que usamos os textos fantasmas para inserir, para transmitir ao usuário o formato no qual queremos que eles insiram informações. Queremos mês, mês, dia, dia, ano, ano, ano. E o truque com a data de nascimento é como a digitação do usuário, ainda mostramos os textos fantasmas. Não desaparece quando o usuário começa digitar e as barras, Oh, você aposta. As barras também são preenchidas automaticamente, certo? Então, tudo o que você precisa fazer é no teclado apenas digitando os números. E aqui está meu aniversário, 09131983. As barras são todas preenchidas automaticamente para o usuário. Tudo o que eles precisam fazer é digitar no teclado. Ruim, Boom, affordance, fácil, sem problema. Quando esta data chegar este ano, vocês podem ir em frente e entrar em contato e me enviar um desejo de aniversário ou presente, o que quiserem, eu aceitarei com prazer. formulário de e-mail é bem simples. Em vez de digitar e-mail, basta mostrar um e-mail falso. Você pode colocar louco ou você pode colocar o nome semelhante. Email.com apenas mostra o formato em uma diferença aqui é que quando o usuário digita os textos fantasmas desaparecem, como ele aparece logo quando eles clicam. Então você teria esse cursor do teclado aparecer. Então essa coisa apareceria logo quando eles, ficaria um pouco mais escuro, mas apareceria quando eles começassem a digitar. E então, uma vez que eles coloquem essa primeira palavra , ela desaparecerá. Mas não aparece como usamos aqui na data de nascimento enquanto eles estão digitando, só aparece uma vez. Eles clicam e, uma vez que eles digitam, ele desaparece completamente. Por dinheiro preenchido. Mesmo princípio, usamos os textos fantasmas para mostrar a entrada e o formato que gostaríamos. Quando o usuário começar a digitar, removemos os zeros. Não mostramos mais os textos fantasmas, mas mantemos o cifrão. cifrão não desaparece. Em seguida, adicionamos vírgulas. Não precisamos que nossos usuários adicionem vírgulas para nós. Bem, vamos colocar as vírgulas, mas o usuário deve digitar o decimal. Não preenchemos automaticamente o decimal, então eles precisam fazer um decimal. Deixe isso com eles. Números de cartão de crédito. Mais uma vez, veja como estamos usando os textos fantasmas. Você pode ver por que eu gosto de campos de formulário fantasmas textos porque é um elemento aditivo que nos ajuda a criar estratégias para as necessidades de comunicação. E assim temos 111 espaço, 2222, espaço 333. Tínhamos as indicações de espaço aqui. O que acontece aqui é que quando o usuário digita, ele verá o número que está digitando. Mas tudo o resto se tornará balas. Eles só vêem o número digitando para que eles possam saber em que estão digitando o número certo. Mas não estamos expondo todos os demais números do cartão de crédito apenas por motivos de segurança e segurança. E adivinha o quê? Nós preenchemos automaticamente os espaços para nossos usuários. Eles não precisam fazer isso de novo, tudo o que preciso fazer é apenas acertar os números no teclado ou no teclado. E faremos o resto da formatação para eles. E então sempre mostramos os últimos quatro caso o usuário tenha vários cartões de crédito. Eu não sei. Digamos que você tenha dez cartões de crédito e tenha entrado em uma farra de compras na Amazon quando está bêbado e pediu um monte de coisas que não precisava e você estourou quatro ou cinco ou seus cartões de crédito e você realmente não percebe isso. E então, três dias depois, sua namorada é como, por que há 50 caixas de coisas da Amazon em nossa casa? E então você é como, Bem, eu não sei. E então você olha para sua história na Amazon e você está tipo, Oh meu Deus, eu acho que eu pedi uma carteira Gucci na outra noite quando eu estava bêbado como, oh, isso não é bom. Então, quando eu for comprar meu próximo Gucci Wally, não usarei as cartas que estão no máximo e saberei porque verei os últimos quatro dígitos aqui. Acabei de inventar isso. Eu não comprei um casaco de cutia. Então, a próxima coisa são campos de mensagem de forma livre. Eles são de forma livre porque realmente não temos um requisito do que o usuário irá inserir. É por isso que é uma forma livre. Eles podem inserir o que quiserem. Usamos isso muito na UX como campos de feedback. Se quisermos. Nós os temos em alguns de nossos aplicativos onde um cliente entra e eles podem examinar o aplicativo do usuário. E temos uma pequena área que diz nos dar feedback ou aplicação de radar. E eles abrem isso e usamos os textos fantasmas novamente para criar estratégias a dica ou o prompt que gostaríamos de obter de nossos usuários. Portanto, neste caso, sempre gostamos de ouvir sobre problemas que as pessoas enfrentam quando usam nosso software. Mas adoramos ouvir sobre solicitações de recursos, como você gostaria de ver algo que está no aplicativo que não lemos necessariamente no momento. Usamos esses textos fantasmas aqui para nos ajudar a criar estratégias de que podemos obter esse tipo de informação de nossos clientes e usuários. Às vezes, também eles terão uma contagem máxima de caracteres. Você só vai colocar isso aqui no canto superior direito. Quando o usuário chegar a uma contagem máxima de caracteres como esta, será a leitura da Coco. Eles não poderão mais digitar também. Então você terá dois níveis de reivindicação. Esse tipo de requisito é que isso ficará vermelho e eles realmente deixarão de bater. Uma vez que eu digito o teclado, nada acontecerá. Também temos esse pequeno ícone expansor aqui. Então, para campos de formulário aberto, como eu não sei se talvez alguém que queira escrever um parágrafo bastante longo, 500 caracteres é uma quantia bastante longa. Então eles podem pegar isso e eles podem esticar o formulário preenchido e para cima. Isso ajuda muito nesses campos de formulário abertos. Tudo bem, então vamos dar uma olhada em alguns requisitos de senha aqui. Como chamamos isso quando dizemos textos padrão para meninas, isso significa que não estamos realmente usando isso para criar estratégias de qualquer um dos nossos objetivos de comunicação. Tudo bem, então este é apenas digitar a senha, bem simples. Acho que isso acontece com senhas, porém, é que nunca mostramos o personagem que o usuário está digitando. Se eu digitar cinco, não mostraremos os cinco. Ele vem como uma bala. Por motivos de segurança e privacidade. Podemos adicionar o pequeno ícone aqui, o ícone do olho. E quando o usuário clicar nisso, revelaremos a senha, certo? Então, o ícone III é como se as pessoas estivessem assistindo, não mostram nada. E quando você clica nele e as roupas como as pessoas não estão assistindo, mostre-me, mostre-me minha senha. A diferença entre campos de formulário opcional e obrigatório. É melhor mostrar apenas texto que diz opcional e versus outro. Quando você tem um campo obrigatório, o que você verá são esses pequenos asteriscos aqui. Na maioria das vezes ou não, a maioria dos campos de formulário será obrigatória. Então, em vez de ter todos os campos de formulário com esses pequenos asteriscos e nem todo mundo sabe que o asterisco é um campo de formulário obrigatório, como o sênior. Usuários mais velhos não pegam isso. Eles podem nem vê-lo. É melhor deixar todos os seus campos de formulário necessários conforme necessário e, em seguida, digitar onde é o filtro de formulário opcional porque é melhor transporte. E se voltarmos ao nosso guia aqui, transporte, é fácil entender as informações no que diz respeito a uma tarefa específica? Então, opcional. Escrever o texto opcional significa algo porque é texto, é opcional versus um asterisco é uma coisa muito abstrata. Como o PDD. Nem todo mundo sabe o que isso significa. Então, quando pensamos em informações fáceis de entender relacionadas à tarefa, o opcional faz melhor. E então você poderia fazer, eu tenho um vídeo inteiro sobre dicas de ferramentas que você pode fazer um ícone de informações e isso lhe dará uma dica de ferramenta sobre o mouse ou se você estiver na web, ou clique se você estiver na web e depois toque se você estão em dispositivos móveis e tablets, olhe, estamos usando os textos fantasmas para criar estratégias ainda mais sobre o que o secundário aborda. Exemplo, apartamento 111. Você pode usar texto fantasma aqui para avisos como sorvete favorito em vez de como sorvete favorito, você pode fazer exemplos como chocolate de baunilha, estrada rochosa, todas essas coisas boas. Lembre-se de que as pessoas abordarão seus formulários. Mais usuários experientes em tecnologia, eles pressionam tab no teclado e se moverão por cada campo de formulário. E isso permite que o usuário evite usar o mouse e ter que clicar fora de um campo de formulário e clicar de volta nele. Mais uma vez. Isso remonta a essa palavra-chave, proporcionando, Pelo menos tempo e energia para completar uma tarefa. Se você vir aqui, é assim que funciona. O usuário estará no segundo campo. Eles acabaram de completar este texto aqui. Eles pressionarão tab no teclado. A segunda fórmula, a que estavam apenas ligadas, voltaremos ao estado padrão. E, em seguida, o terceiro campo estrangeiro quando a guia agora estará no estado de foco de entrada e pronto para que eles comecem a digitar. Assim, eles podem passar por todos os campos do formulário e nunca precisar clicar nesse mouse. Vamos entrar em algumas coisas e não fazer. Uma das coisas que é comum aqui é a diferença entre um layout de campo estrangeiro de uma coluna e uma coluna de duas, que é mais em ziguezague. O da direita. Estudos têm sido feitos com teste de rastreamento ocular, teste de tempo também. Eles descobriram que os usuários passam mais tempo pulando de uma coluna para a outra quando há uma coluna de ferramenta aqui, seus olhos digitalizam em Z's aqui versus movendo para baixo os campos de formulário. E quando você tem um campo de formulário de uma coluna é psicológico psicológico, mas teve um desempenho melhor porque você sente que está completando mais. Você está se movendo mais para baixo na lista, o que parecia mais conclusão versus ir da esquerda para a direita. Na verdade, verificou-se que o formulário de uma coluna preenchido com a mesma quantidade de campos de formulário testados em uma coluna de duas colunas, um realmente executado era mais rápido, a única coluna era mais rápida do que as duas colunas. Tudo bem, então, voltando a essa affordance novamente, então colunas individuais também fazem um trabalho melhor em transmitir quais campos de formulário. Se alguém tocar na tecla, pressiona a aba no teclado, qual será a próxima? Onde duas colunas vão cair ou vai para o modelo certo? Na maioria das vezes, ele funciona em um padrão Z, certo? Vai para a direita aqui e depois para baixo aqui. Mas os estudos funcionam e um campo de forma de coluna, eles podem ter mais espaço em branco. Eles podem não preencher sua interface do usuário se você tiver uma área de trabalho grande, mas eles são muito mais fáceis de digitalizar rapidamente e dão ao usuário uma sensação de conclusão à medida que eles se movem rapidamente para baixo. Outro pequeno truque aqui é que você pode espaçar dois grupos diferentes, certo? Então, se isso tivesse a ver com nome semelhante e isso tivesse a ver com, eu não sei, informações do empregador. Só usamos um pouco mais de espaço daqui para agrupar essas informações. E isso ajuda mais com a digitalização, colocando informações de maneiras sistemáticas. Você pode ver por que isso é importante, por que esses campos de formulário e aprender essas coisas são importantes é que essa empresa fez um estudo sobre as razões pelas quais as pessoas abandonaram seu site durante o checkout. Mais uma vez, 50% deles era porque suas coisas eram muito caras. Eles tinham taxas de compras e impostos demais e taxas de envio, impostos e outras coisas. 28% disseram que o site queria criar uma conta. Eles tinham um mural de conta. Eles não deixaram um usuário gostar do checkout do convidado. Se alguém vai te dar seu dinheiro, como tornar o mais fácil possível para eles comprar seu produto e me dar seu dinheiro. Não os faça na criação de uma conta. Mas olhe aqui, 21% disseram que o processo de checkout, os campos de formulário por muito tempo, um processo muito longo. Checkout complicado. Então este é um número, isso é o que é chamado de métrica quantitativa. É quantitativo porque é um número com o qualitativo é por quê? Bem, por que era muito complicado? Então? Teríamos que ir procurar e tomaríamos alguns desses princípios aqui que estávamos aprendendo atrás. Lã, é um campo de forma de coluna dupla? caso afirmativo, então o que vai experimentar em uma coluna. Você pode ter isso fora. Eu vou pular para este se for mini campos de formulário como este aqui. Você vê todos esses campos de formulário à direita, como evitar isso , são muitos campos de formulário. Se você tiver tanta informação, é melhor colocar isso em um assistente. O feiticeiro é ótimo para formas longas e eu tenho um vídeo inteiro no final da aula aqui, onde acabei de falar apenas sobre magos. Nos assistentes são ótimos porque dá, ele divide todas as informações de forma longa em pequenas categorias de tamanho pequeno. Isso dá uma noção do usuário, uma sensação de localização como você está aqui. Você concluiu essas duas tarefas, então há progresso e tempo. E também progride e tempo que você só tem mais um. Ele separou todos esses campos longos que teríamos aqui à direita. E isso o colocou em um processo passo a passo. Novamente, a razão é que isso não parece assustador versus um Zoom Outlook à direita. Essa é uma tarefa assustadora aqui para tentar concluir onde isso da vanguarda não parece tão assustador. E outro pequeno truque psicológico é se você fizer uma árvore muito fácil e realmente fácil para o primeiro passo, é super fácil. E se é realmente fácil, na maioria das vezes, estudos mostraram que as pessoas são mais propensas a concluir essas etapas no primeiro é realmente fácil, então o último deve ser super fácil de escrever. Você não quer que as pessoas caiam. Eles já colocaram no trabalho e fazem com que o último seja super fácil. E então eles acabaram. Use outras coisas e não use erros úteis. Nesse caso, podemos ver as senhas não corresponderem. Evite coisas assim onde elas estão pressionando o botão Criar e apenas diz que algo deu errado, por favor conserte e você não sabe o que deu errado, certo? Portanto, cada um desses campos de formulário deve ter seu próprio erro que se aplica a si mesmo. Explore entradas de log, certo? Você não controla quanto tempo são os nomes das pessoas. Neste ponto, precisamos saber se essa pessoa tinha um nome longo. Temos duas opções. Nós elipsemos isso? Que é o que eu gosto de fazer. Dê esses pequenos três pontos aqui para indicar ao usuário que há mais nome. E se o usuário quiser ver mais nome, ele pode clicar nisso e pode avançar com a seta e verá mais do nome lá. Ou podemos dividir isso em duas linhas. Assim, aqui. O que, mas a única coisa com isso é, isso, causa mais, ele move o campo do fórum e cria mais largura ou altura aqui. E isso meio que joga fora a assimetria da consistência visual da altura de todos os campos do formulário. É por isso que sou mais fã de elipse aqui. Mas esteja ciente disso. Vocês não têm pessoas, algumas pessoas têm nomes muito longos, sobrenomes muito longos. Não use um campo de formulário curto como este. Se você sabe que será uma entrada longa. Se for um e-mail, dê a eles um espaço bom o suficiente e bom o suficiente. Lembre-se disso já falou sobre isso, mas agrupe seções relevantes juntas. Então, se você tiver o grupo um, o grupo dois e o grupo três, versus como manter o mesmo espaço para tudo. Basta usar o espaço. É tudo o que você precisa fazer. Espaço, espaços. Espaço em branco é seu amigo. Validação em linha. Isso é ótimo. Portanto, use a validação em linha, se puder. Então, se eu estiver digitando um e-mail e eu acidentalmente colocar uma vírgula, me erro no ponto em que eu coloquei uma vírgula, como quando chegamos aqui, apenas endereços inválidos. Ou se eu colocar um espaço extra aqui, me erro neste momento, isso está me errando no significado da linha dentro do campo do fórum enquanto eu estou digitando, para que assim eu possa corrigi-lo antes de deixar este campo de formulário. Isso depende do banco de dados. Isso não é como não fazer isso ou que as pessoas não usarão seu aplicativo, mas é melhor tê-las validação de mentiras. O que acontece se você não fizer é que o usuário preencha todas as informações, pressiona enviar e, em seguida, quando ele tiver que caçar como o quê? Oh, por que eles não passaram por algo errado? Então, temos que olhar para o destaque, o campo do fórum aqui, e ao redigitar o campo do formulário, clicar novamente nele, corrigir o erro onde ele retorna a essa affordance. Como já sabíamos que o usuário estava aqui, sabíamos que era um erro. Por que deixá-los sair? Como vamos fazer com que eles consertem aqui. Por que vamos fazer isso com nosso usuário? Eu falei sobre assistentes. Ele pode ter um vídeo inteiro sobre assistentes aqui. Vamos terminar com esses dois últimos fazer e não fazer. Lembre-se do tamanho apropriado. Temos que CEP aqui. Faça com que ele tenha o tamanho de um CEP, mesmo que ele descarte sua assimetria visual. Porque, novamente, a usabilidade deve sempre superar a visibilidade ou o visual. Embora isso possa parecer melhor. Espiar a maneira como as pessoas usam a usabilidade do seu produto é sempre melhor do que a aparência de algo. Há algo que pode parecer ótimo, mas não se acostuma muito bem. Algo pode nem parecer tão bom, mas as pessoas o usam e tiveram um desempenho muito bom. Versus o da direita aqui. E então nunca, nunca para três campos de formulário de coluna como este, por favor, por favor, não faça isso. Novamente, você poderia fazer as duas colunas que acabei de colocar estar ciente, isso é ruim, isso não é uma cúpula. Há momentos em que isso é, nós fizemos isso, mas simplesmente não faça, na verdade não faça três colunas aqui. Vou terminar de novo com apenas algumas peças de alto nível. Falei muito sobre o layout de coluna única. uma vez, uma das coisas para falar também é o preenchimento automático. Preenchimento automático. Ótimo. Então, o preenchimento automático é que mostro isso no vídeo em que falamos sobre fóruns de endereços e formulários de pesquisa. Mas, essencialmente, o que isso faz é mostrar informações relevantes com base nas entradas que o usuário já fez. E ele ignora o usuário de escrever a palavra inteira. Então, se você estiver digitando meu nome AIR, a conclusão automática mostrará uma lista suspensa abaixo, e falaremos sobre suspensos no próximo vídeo. Mas isso mostrará um pouco rápido do que ele acha que são correspondências com a AAR. Ele diz que pode ter árido e algumas outras coisas que correspondem a esse nome. O que acontece aqui, o que é ótimo é, digamos que eu digitei meu nome e estava preenchendo um endereço e uma Erin preenchida automaticamente também pode preencher automaticamente meu sobrenome, meu e-mail, meu endereço, minha cidade, meu estado e muitos casos o aplicativo não fornecerá isso. Chrome, como seu navegador da Internet, fará isso por você. Mas esteja ciente da terminologia. É isso que é o preenchimento automático. Lembre-se daquele feiticeiro que mostramos , eu vou falar muito sobre isso. Mas, independentemente dos assistentes, é sempre ótimo pensar em tipos de experiências do usuário, ter esses três aspectos principais, como definir a expectativa, a localização, como deixar suas notícias ou o usuário sabe onde estão em sua experiência de usuário, tempo e progresso, eles terão uma tarefa para concluir, como, o que eles já fizeram? Onde eles estão e quanto tempo resta? Que passos daqui em frente, o que eles precisam. Falamos sobre apenas queremos ter certeza de que falamos sobre a validação em linha opcional versus necessária que dê erros úteis. Lembro-me de apenas treinar. Seja explícito sobre como você quer que as pessoas tratem esses nomes longos em seus campos de formulário e adivinhe o que os engenheiros vão querer notar. Eles vão perguntar como, ok, então como tratamos um nome longo? Vamos para duas linhas? Nós elipse? E eu preferivelmente gosto de elipse como mostrei antes. Certo, legal, são campos de formulário. Vejo você no próximo vídeo. Falaremos sobre botões. 6. Botões: Tudo bem, bem-vindo à próxima aula. Vamos falar sobre botões. Vou pular a Teoria dos Botões e farei isso no final porque acho que vai ser mais relativo e fácil de conseguir assim que passarmos por essa coisa toda. Tudo bem, então vamos começar com alguns tipos de botões, então vou entrar em combinações de botões em diferentes estados e melhores práticas e fazer algumas coisas. Mas normalmente temos nosso botão quadrado. Você pode ver aqui, eu sou um bom botão, tem pelo menos 50 pixels de altura. Áreas Good Tap, 50 por 50 pixels. A largura é realmente dependente do contexto do botão. E então você quer um pouco de espaço para respirar seus textos. Vou, vou mostrar algumas coisas e não darei exemplos disso. Mas este, tem 140 pixels de largura. Provavelmente pode ser um pouco mais curto se você quiser também. Mas bom espaço para respirar a topografia dentro do botão. E pelo menos 50 pixels por altura. Temos um botão quadrado que não tem bordas arredondadas. E você pode ver que o da direita tem algumas bordas arredondadas. Isso é chamado de botão de pílula. É bastante autoexplicativo, parece uma pílula que você tomaria. É totalmente arredondado, totalmente arredondado nas bordas. Este é chamado de botão fantasma. E é apenas um botão fantasma porque tem um contorno para que a cor principal aqui seja o contorno do botão. E o preenchimento é na maioria das vezes branco ou qualquer cor do fundo desse botão. Se fosse tudo como uma IU escura, seria uma cor mais escura ou se estivesse em um fundo branco, seria branco como está aqui. Mas, essencialmente, deve parecer que é apenas um esboço com o texto. E estes são realmente ótimos para botões secundários. Vou falar um pouco sobre isso onde você pode ver essas cores são ótimas para botões primários. E esse estilo fantasma é uma ótima combinação com o botão primário. E isso é para ações secundárias. E falarei um pouco sobre ações secundárias aqui em um segundo. Temos botões de texto ou links. Essas são apenas palavras sem elementos gráficos ao lado dela. E se você tocar neles ou clicar neles, eles vão, eles serão, eles levarão o usuário a um lugar. Muito simples. Todos sabemos quais são os links. Ou tem a textura da cor, você tem uma linha por baixo. Isto tem, a linha abaixo é, na verdade, em alguns casos, melhor apenas por causa da acessibilidade. Se alguém é daltônico, talvez não veja isso como um link. Mas se eles virem a linha por baixo, isso indica a eles que esse é o elemento vinculável. Os botões também podem ter estados de carregamento nele. Então você verá que este é bastante comum onde o usuário estará pagando por algo em um site e eles clicarão no botão de reprodução e, em vez de pulá-los para outra tela ou em outro estado, que é como carregar. E se algo não aconteceu, certo, nós o erramos. Podemos mantê-los no mesmo contexto e o botão se transforma em um estado de carregador. Mantém isso. Ele dá esse nível de controle e feedback e você pressiona pagar, você vê o feedback que recebemos o pagamento. Espere um segundo, estamos processando e depois daremos um sucesso. No final disso. Temos botões de ícone novamente, são apenas textos e combos de ícones. Você verá os mais populares, como adicionar em seguida, baixar. E então você tem botões de ícone. Eles são apenas botões sem os textos, e eles apenas servem como elementos de ação. Sem tecnologia, geralmente esses são ícones mais comuns, como cartões de compras e encaminhar ou lanches e baixar e fechar e um anúncio. Na maioria das vezes, eles não precisam de texto ao lado deles porque são ícones comumente reconhecidos. E eles podem entrar no botão como você viu aqui, ou eles podem ser apenas ícones. Tenho uma conversa inteira no final, uma das últimas aulas que vou falar sobre um mergulho profundo em ícones, iconografia, melhores práticas lá. Vamos dar uma olhada em algumas combinações de botões. Eu realmente gosto desse combo aqui, que é o botão secundário à esquerda, que é a cor mais clara. Ou eu gosto da combinação do botão fantasma para essas ações secundárias e ações secundárias ou coisas como cancelarão ou roupas ou, em alguns casos, talvez excluam. Em seguida, botões primários mais escuros na cor. E eu gosto do preenchido aqui. Então fantasmas no campo esquerdo, à direita. E essa é sua ação principal. Portanto, essas são as coisas mais importantes que você deseja que seu usuário faça em um determinado fluxo de trabalho ou uma tela que deve estar em uma tela que deve estar combinada ou acompanhada com o botão primário. Essas são coisas como Salvar e Enviar ou em seguida. Você pode ver que também pode usar cores para ajudar a indicar esses botões secundário e primário. Você tem. Cor um pouco menos forte à esquerda e uma cor muito visual mais forte à direita. Então você tem a pílula do botão fantasma cancelar à esquerda e a pílula à direita. Coisas bem simples aqui. Normalmente, gosto de usar a mesma largura desses botões lado a lado. Então, se você puxar esse botão de cancelamento aqui, ele tem a mesma largura do botão Salvar, então eles se empilham com muita facilidade. Você pode ver isso aqui. Eles empilham, empilham bem versus algo assim. Não há problema em ter o botão Cancelar, talvez um pouco menor do que o botão primário apenas visualmente, dá um pouco mais importante para ver ou tom mais forte para a ação principal. Isso é ótimo quando você faz esse tipo de alinhamento horizontal, mas quando eles se empilham verticalmente assim, ele joga fora o alinhamento vertical. E não é uma má ideia apenas torná-lo na mesma largura assim. Volte um pouco aqui. Certo? ênfase do botão, tipo de descrever isso já, mas alta ênfase para ações primárias do Kotlin, cor mais escura, ênfase média, ações secundárias, cores mais claras. E a ênfase baixa do EF, o que significa que nenhuma ação desativada botões que não têm nenhuma ação para ele, no entanto, deve ser muito baixa. A ênfase visual ou a aparência visual de um botão. Vamos dar uma olhada nos estados dos botões. Então, novamente, temos esse estado padrão. Você tem um estado de paira aqui. E, como falei no vídeo do fórum, as melhores práticas para passar o mouse é usar uma cor mais brilhante. Isso ajuda o botão a ficar mais vivo. É como, Ei, eu estou vivo, clique em mim tipo de coisa. Mas lembre-se de passar apenas uma ação que usamos na web, não dispositivos móveis e tablets desativados, costumo usar 30% de opacidade para o plano de fundo e , em seguida, 70% para o texto. Você ainda quer que as pessoas possam ler os textos se estiverem desativados, você só quer fazer com que ele pareça muito desativado. Eles ainda devem saber que este é um botão de envio, mas eles devem vê-lo como algo que não parece engajado ou acionável. Tudo bem, então você pode usar sombras nos botões. Vou te mostrar muito rápido alguns botões aqui ou algumas sombras aqui. Então, se nós adicionássemos um e eu tenho uma palestra inteira sobre sombras, mas deixe-me passar rapidamente por uma pequena demonstração rápida nas sombras aqui. Se nós adicionássemos uma sombra a este botão, uma das primeiras coisas a não fazer ou evitar como padrão, a sombra padrão que você obtém nunca é a melhor, nunca comece com o padrão. Você pode ver aqui que ele tem quatro no y, ou seja, na linha vertical abaixo do botão. Para pixels abaixo e há 0 no x. isso significa que não há sombra aparecendo no lado vertical dos botões. Então, novamente, y na linha horizontal e x na linha vertical. Pelo menos queremos fazer cinco de cada lado e cinco. Agora, a próxima parte é que esse botão é as sombras muito duras. Como se você apertar os olhos, você ainda pode ver esse botão. Não queremos isso. Queremos um botão muito sutil aqui ou uma sombra aqui. Então, vamos em frente e adicionar um pouco de desfoque a ele. Isso já é melhor. 20 borrão será bom. Eu tipicamente gostei mesmo independentemente da cor dos botões, gosto de colocar um pouco de azul, apenas um pouco apertado de azul na sombra de cor desse botão, certo? Portanto, independentemente da cor é rosa ou roxo ou o que quer que seja, um pouco azulado de azul e a área preta ou cinza para a sombra é sempre melhor do que apenas preto puro. Lá vai você. É isso. Dê-nos um pouco de profundidade. Parece que um botão parece algo em que você pode tocar. Você pode até adicionar uma cor. Você também pode adicionar a mesma cor ou cor semelhante à sombra para outro efeito. Então, vamos em frente. Vamos realmente mudar isso. Vamos fazer, vamos fazer uma cor azul aqui. Legal. Agora vamos para a cor da sombra. Vamos mudar a sombra para um pouco mais azul. Isso lhe dá um pouco mais de um olhar. Vou derrubar a parte do borrão. Provavelmente vou subir um pouco mais sobre a opacidade. Lá vai você. Muito sutil. Sutil é eficaz. Não queremos que a sombra seja muito perceptível, devemos dar um pouco de profundidade. Você pode ver esses três aqui com a sombra. Não há profundidade neste botão. E essas sombras ajudam com um pouco da profundidade aqui. Só uma coisa a lembrar é se você fizer esse sistema de emparelhamento onde você tem o botão fantasma à esquerda e um botão primário à direita. E um usuário passa o mouse no botão Cancelar. E você sente o cancelamento com a laranja aqui, a mesma laranja que ser usada para o botão primário. Quando você olha para esse mouse de dados, ambos têm hierarquia visual igual. Eles estão competindo uns contra os outros apenas no estado de paira. É melhor evitar algo assim e usar um pairar que ainda esteja dentro da área laranja, mas um pouco mais claro de um tom de cor laranja como este é melhor, certo? Portanto, o primário ainda se parece com o botão primário, mesmo no estado de focalização. Tudo bem, o próximo estado do botão é chamado de estado focado. E é quando um usuário Ms destacando esse elemento de botão usando métodos de entrada, como uma guia de teclado. Você pode usar campos de formulário e também pode usar a guia para o botão. Este não é o mouse passando por cima do botão, mas eu gosto de usar o mesmo estado do mouse onde é uma cor mais brilhante quando você ensina a guia do teclado até o botão. Portanto, se você tiver três campos de formulário e um botão de envio, o usuário poderá usar a guia em cada um desses campos de formulário, colocar informações e, em seguida, guia no botão também e pressionar Enter no teclado como envio. Só está mostrando que o tipo de estado de foco também é importante. Novamente, contanto que você tenha o pairar definido, ele será, será o mesmo estado para isso. Há um estado pressionado. É quando o usuário pressionou o botão. Novamente, você pode usar uma cor mais clara do que o que estava no estado focado ou focado. Você também pode fazer uma animação em que você tem esse padrão, você tem esse mouse, eles pressionam e você obtém essa pequena animação que acontece muito rápido, mas vai do pressionado 123. E é muito sutil, mas dá esse feedback ao usuário que ele clica no botão ou toque no botão. Vamos entrar em algumas coisas e não fazer. Os botões devem ter uma ou duas palavras, três palavras Max. Mais de três palavras, não é fácil escanear e ver o que a ação principal ou o que o botão faz, certo? Deve ser muito fácil olhar para o botão. O botão informará ao usuário o que ele faz. E aqui você tem que ler dentro desse botão, isso é muito longo, muito texto. Se você estiver usando ícones de botão, use o alinhamento horizontal e evite alinhamento vertical com os textos e os ícones aqui apenas criam uma forma desequilibrada e não é um botão comum aqui. Então, evite isso. Não há motivo para não fazer algo assim à esquerda. Dê um bom espaçamento. Então você pode ver aqui que demos espaçamento igual do topo e espaçamento igual à direita. E você tem um bom botão como este versus o do lado direito aqui. Temos um bom espaçamento no topo. Bem, não temos nem espaçamento para a esquerda e para a direita, então precisamos deixar isso um pouco mais espaçado. Também dê um bom espaço para respirar do texto. Você pode fazer espaçamento igual ou adicionar mais espaço da esquerda e da direita. Isso é útil porque você tem um alvo de toque, o imóvel que esse botão leva, quão grande é, que informará como é fácil tocar ou clicar, certo? Portanto, não há problema. Não deve haver um problema aumentar o botão, especialmente se for o botão primário. Para facilitar, tocar e retornar, tocar e retornar, você obtém melhor espaço para respirar a partir do texto em seu botão versus os do lado direito aqui. Como todos esses botões se sentem apertados. Como os campos de texto muito espremidos aqui como eu não posso, eu tenho que mantê-lo assim para poder mostrar o exemplo, mas eu realmente teria me aproximado e, isso é muito melhor. Ontem Deve bom botão agora, você pode ver que é muito difícil para mim, nazi mesmo deixar esses botões assim. Então, novamente, ele volta para tocar e clicar em espaço como este deve ser fácil de clicar e tocar. Então, este precisa de mais vertical assim parece bom. Se você estiver usando um ícone de botão, use um ícone de cada vez. Não use mais de um. Ele mistura o estilo de comunicação. Você pode ver que este é como isso é um download ou NADH. Não sei. Use uma cor mais brilhante para passar o mouse. Então também vi isso uma vez. Não torne o texto maior em um pairar. Use a cor como indicador de focalização, não, não texto e tamanho. Se você tiver um link secundário como este em que ele é cancelado, ele se encaixa muito bem embaixo do botão Salvar. Não coloque isso no topo porque as pessoas na maioria das vezes deixaremos a leitura deles para baixo assim. Queremos que o botão primário seja a primeira coisa que alguém escaneia e não necessariamente o botão de cancelamento porque ele cancela o secundário. O mesmo negócio aqui à esquerda. Você também pode empilhá-los. Na maioria das vezes, estamos fazendo botões primários à direita e nos botões secundários à esquerda. Você pode alternar esse pedido quando tiver algo que possa ser acidental. Se você tiver, vou apertar. Então, vou atirar para outra classe. Falarei sobre aqui. Este aqui. Se você tem algo em que alguém exclua algo e uma exclusão, sempre podemos fazer um modal móvel seguro de RU aqui e temos uma exclusão e um cancelamento. Às vezes, esses modais aparecerão e o usuário acidentalmente clicará na posição principal aqui e excluirá isso acidentalmente. E isso é uma exclusão impactante porque eles estão excluindo uma conta e nós estamos tipo, Ei, você tem certeza de que deseja excluir essa conta? Como se você tivesse feito muito trabalho nesta conta, você vai perder tudo, certo, então, na primeira exclusão que eles fizeram, acionamos esse modal e nós apenas damos a eles mais uma chance de dizer: tem certeza de que quer fazer isso? Você pode alternar a ordem desses botões, para que isso não aconteça. Você pode colocar este aqui e você pode colocar o cancelamento à direita, assim e alternar esse pedido caso eles acidentalmente pressionem o cancelamento novamente. Não é a ação primária impactante. Esta é uma estratégia para usar essa combinação aqui para ajudar apenas aquele caso acidental que acidentalmente pressione Cancelar novamente, mas você gostaria de agradecer. Eles fizeram isso. Eu não queria pressionar Excluir onde este você realmente tem que ir. Oh, eu realmente quero excluir esse relacionamento. Isso é praticamente tudo o que eu estava descrevendo aqui. Sobre este. Aqui estava você pode mudar isso um pouco. Só para aquelas exclusões muito impactantes que acontecem nelas. Qualquer coisa que possa ser acidental que você queira apenas garantir que seu usuário não faça isso. Quando você usa um botão no fundo de uma foto como esta, use o botão de cor do campo como o principal. E na maioria das vezes não use o botão fantasma aqui porque isso vai impactar a legibilidade do texto onde o da esquerda aqui se destaca muito mais. Quando se trata de links. Use a quantidade certa de palavras para mostrar seus links. Então você vê o da esquerda. Se acabarmos de colocar clique aqui para ver suas diretrizes de usuário do CR, clique aqui, os textos azuis. E então tudo o resto é fácil de ler. Tem boa legibilidade para isso. E também estamos transmitindo ao usuário que estamos intencionalmente usando azul aqui porque queremos que você se envolva com este link. Você pode até dar um passo adiante e adicionar uma linha aqui, se quiser também. Assim mesmo. Versus o certo, como tornar tudo azul, eu realmente quero que meus usuários usem isso. Eles podem não, primeiro, afetar a legibilidade e a legibilidade. E eles podem não saber que tudo isso é clicável. Eles podem pensar que faz parte da sua marca e você está usando apenas textos azuis para tudo. Seja inteligente com seus links, especialmente se eles amarrar duas frases como esta. Use uma linha de texto para seus botões. Nunca faça isso, onde ele vai para duas linhas. Ele só joga a simetria do botão e parece super estranho. Novamente, se não tiver duas linhas, você tem muitas palavras. Temos que algo tem que dar suas palavras como botão com algo bom para dar lá, mas nunca deveria estar em duas linhas. Mais uma vez, mantenha os botões na mesma largura quando você os empilha e, em seguida, não faça a largura da mistura assim quando você empilhar. Tudo bem, acho que é isso. Vamos passar rapidamente pela cor da teoria dos botões e vamos encerrar. Uma das coisas que eu só quero chamá-lo, você ouvirá esse acrônimo ser jogado por aí. É chamado de call-to-action. O call to action pode se referir a duas coisas que podem se referir ao texto em uma tela específica, que é como a coisa mais importante que você quer um usuário veja na tela, ou se refere ao botão, o botão call to action, que é esse botão primário. Então, novamente, você tem a ação secundária, que é esse botão secundário. Coisas como voltar e fechar, cancelar, coisas assim. Lembre-se de que o botão de tamanho deve ser fácil de clicar, fácil de tocar nas diretrizes da interface do usuário da Apple. Dizem, qualquer coisa lá dentro, dispositivos da Apple ou aplicativos da Apple Store, qualquer coisa tocável ou deve ter 40 pixels por 40 pixels. Eu pessoalmente acho que isso é muito pequeno. Eu costumo fazer pelo menos 50 pixels por 50 pixels como o menor. Novamente, lembre-se de que a cor de fundo deve ter um bom contraste e deve se destacar de outros componentes da interface do usuário se for o botão primário, certo? Portanto, o botão primário deve ser uma das coisas mais parecidas e sombrias do aplicativo. Portanto, é muito fácil de saber. Pode mostrar um exemplo disso, do que a coisa que você precisa fazer, certo? Então, se você olhar para esta página aqui, aperte os olhos e olhe para ela, esta laranja aparece, certo? Portanto, é a principal coisa que queremos que o usuário faça. Então, estamos usando a hierarquia visual para transmitir isso também. Além disso, você pode usar essa cor novamente para fazer um diferencial de teclas entre o botão primário e o botão secundário. Já falei sobre formas. Então, apenas formas de pílulas horizontais. O posicionamento também é crucial, certo? Portanto, não importa qual seja a cor do botão ou o tamanho do botão. Se não estiver em um local onde as pessoas em seus usuários não possam vê-lo ou digitalizá-lo facilmente, isso não será tão eficaz. Portanto, o posicionamento novamente desses botões, eles dependem do seu contexto, mas geralmente na parte superior ou inferior das telas funcionam melhor. Então, novamente, a cópia deve ser curta e doce, fácil de ler, fácil de digitalizar. E se você não souber o que o botão da copiadora é membro, ele deve informar o que o botão vai fazer. Certo, legal. Isso era botões. Vejo vocês no próximo. Vejo todos vocês no próximo vídeo. Vamos cobrir suspensos. 7. Dropdowns: Tudo bem, vamos falar um pouco sobre dropdowns. Dropdowns são elementos praticamente formados. A única diferença é que eles são usados para seleção. Então eles têm algo que, quando você clica no campo do formulário aqui, esse menu aparece um pouco o que chamamos de menu suspenso aqui. Isso tem variáveis de seleção para o usuário. Eles são ótimos para qualquer coisa que tenha três ou mais itens ou variáveis para um usuário selecionar. Porque você pode colocar um monte desses itens. Você pode colocar, digamos, 15 dessas seleções dentro da pequena janela. E economiza uma tonelada de imóveis de tela, imóveis em vez de apenas mostrar todas as 20 seleções. Mas se você tiver apenas, digamos como duas a três variáveis ou itens de seleção para um usuário, então é melhor usar um botão de opção ou uma caixa de seleção. E eu vou, vou mostrar-lhe aqueles em vídeo aqui. Acho que não o próximo vídeo, mas o vídeo depois vamos mergulhar nos botões de opção e caixas de seleção. O critério para uma lista suspensa é, novamente, usaremos os mesmos estilos para nossos campos de formulário. Você verá o campo do formulário de esboço aqui. Em seguida, o formulário de interface do usuário material que só tem a linha. As únicas distinções de um campo de formulário e um menu suspenso são a pequena cenoura, esta pequena seta azul aqui. Quando isso é clicado, isso abre o menu suspenso. E o que é um requisito para o menu suspenso é que o usuário só pode selecionar um item e, em seguida, essa seleção se torna a entrada aqui onde o texto fantasma está. Se você tiver mais de, digamos, 20 itens em um menu suspenso, também é melhor fazer um tipo de cabeça ou preenchimento automático, o que mostrarei um exemplo aqui em um segundo. suspensas são ótimas não apenas para formulários, mas você também pode usá-los como menus. E então você os verá muito em sites de comércio eletrônico. Você os verá no sistema operacional do seu computador, como o Mac. A área da janela superior tem menu suspenso aqui. Você verá muitos suspensos para menus que se parecem com isso. Aqui está nosso site Bobo t em nossos produtos domésticos. E então a arquitetura de nível aparente são os bens domésticos. E as informações de nível infantil baseadas em produtos domésticos são travesseiros e impressões de arte e relógios e o que você tem. Então. Você também verá suspensos na forma de menus chamados mega menus, onde esses são grandes sites de comércio eletrônico e eles têm várias arquiteturas de informações, onde eles têm um nível pai, como artigos domésticos e eles têm um nível de criança como travesseiros, e então eles têm um monte de opções de almofadas de nível neto um travesseiro aqui. Vou receber todas essas informações e menus e um vídeo que acho que no final da aula falei sobre menus e gavetas, e vamos mergulhar profundamente neste tópico. Vamos dar uma olhada em alguns estilos suspensos típicos aqui. Portanto, temos o estilo padrão. Mais uma vez, temos aquele pairar onde o contorno fica azul. Temos a janela de diálogo ou a lista suspensa real que contém os menus. E também note que, dentro deste menu suspenso, você também tem o mouse aqui. Isso seguirá o mouse. Novamente, passe o mouse para desktop, mas não para dispositivos móveis ou tablets, então você tem o estado ativo. Portanto, esse seria o valor selecionado aqui. Portanto, se um usuário selecionou algo, você terá o estado de erro. Assim, semelhante aos nossos campos de formulário e mensagem de erro e um contorno para vermelho para indicar o erro. E, novamente, você tem esse estado desativado, então 30% superam a transparência ou, ou um cinza muito claro. Ou você pode até fazer as duas coisas para transmitir que esse menu suspenso é para stabled. Vamos dar uma olhada em alguns tipos suspensos e casos de uso. Eles são ótimos para qualquer coisa que tenha valor de alcance. Em vez disso, você está dizendo como, quanta metragem quadrada é sua casa ou quanto dinheiro você ganha por mês? E você pode usar os textos fantasmas novamente para ajudar a dar um pouco da meta de comunicação ou o prompt como o exemplo 500 a 100. Quando o usuário clica nisso, ele vê todos os intervalos que podem selecionar aqui. Isso é melhor do que apenas uma entrada direta de como eu misturei 2300 por mês. Você poderia realmente custar US $335 por mês. Às vezes, é melhor nesses valores apenas dar um intervalo. E isso torna mais fácil para o usuário selecionar apenas um intervalo e não é tão intrusivo. Especialmente quando você pensa em quanto você ganha um mês versus um número exato versus um intervalo. E o mesmo para a metragem quadrada aqui. Como se você não soubesse exatamente sua metragem quadrada, mas você saberá uma estimativa aproximada da metragem quadrada da sua casa. Portanto, o alcance e as suspensas são bons para ir juntos. Assim, você pode combinar os menus suspensos com campos de formulário. Então aqui você pode ver que temos nosso valor de número de telefone. Digamos que isso como um produto internacional, você pode usar o menu suspenso aqui para selecionar o tipo de número de telefone que você vai inserir. E então o formato de quatro números aqui e os textos fantasmas mudarão com base na seleção do país que você selecionou. Outra grande é que, novamente, se você tiver mais de 20 itens, quando o usuário clicar no formulário aqui, ele verá o menu suspenso, mas também verão o estado de digitação de entrada. E à medida que o usuário digita, ele filtra a lista abaixo. Então você verá isso muito comum para seleções de estados. E assim, ao digitar, MA, você verá a lista suspensa filtro de itens com base nesse tipo. E, novamente, você pode ir aqui e clicar em Maryland, ou você pode seta do teclado para baixo no teclado e ir e fazer e selecionar esse elemento. Portanto, o estado de focalização não só funciona para passar o mouse, mas também funciona se você fosse um teclado de seta para baixo no teclado aqui também. Um atributo importante para esse tipo de é negligenciado. Às vezes, é o estado do mouse para este menu suspenso aqui, quando você está projetando isso, você pode combinar esses suspensos com caixas de seleção. Então, digamos que você queria algo que tivesse mais de um tipo de seleção. O menu suspenso padrão é apenas um critério de seleção selecionado. Mas neste caso, você pode combiná-lo com as suspensas para informar uma seleção múltipla. Então, neste caso, estamos olhando para todos os sabores de sorvete. Tenha as caixas de seleção aqui. E se um usuário clicar nas caixas de seleção e fechar a lista suspensa clicando fora da janela suspensa. Então, sempre que esse menu suspenso aparecer, você clica fora dele e ele será fechado. E você pode ver aqui as seleções com base na lista suspensa de seleção múltipla entrando. E se você clicar no X aqui, ele desmarcaria a baunilha dentro do menu suspenso, e também excluiria esse valor aqui. Isso apareceria e biscoitos e creme, que deslizam aqui assim. Incrível nisso. Outra maneira de usar o mesmo menu suspenso é fazendo um ícone de filtro. Assim, você pode ver onde o menu suspenso tem a portadora ou a seta para indicar o menu suspenso. E então, para a filtragem, usamos um ícone de filtro. E se você abrir esse ícone de filtro, você pode ver que está selecionando tipos de alimentos. Isso seria bom para um serviço de entrega on-line de pedidos. E neste caso, temos comida chinesa, italiana e indiana sendo filtrada. E geralmente você terá o ícone de filtro e em azul ou uma cor para indicar que esse campo de formulário está sendo filtrado. Se não estivesse sendo filtrado, o que significa que você tinha todo o tipo de alimento selecionado. Pode parecer algo assim, que é o select destes. Apenas a cor cinza aqui, o mesmo que a cor do traçado. Esse seria o estado padrão. E se estiver filtrando a lista, ela fica azul para indicar ao usuário que as informações abaixo estão sendo filtradas pelos tipos de alimentos. Novamente, você pode usar a rolagem dentro do menu suspenso e rolar com o mouse para ver as outras seleções que estão abaixo da dobra. Abaixo da dobra significa que essas são as seleções que não consigo ver embaixo da janela de diálogo ou da janela suspensa. Uma grande coisa que você verá aqui com bastante frequência. E você pode não ter notado é que um menu suspenso móvel, um menu suspenso no seu dispositivo móvel é um pouco diferente de um menu suspenso no que acabamos de ver para a web. menu suspenso móvel utiliza todo o imóvel, a largura total do telefone, e facilita o toque para selecionar os elementos aqui e também rolar os elementos que estão dentro do itens que estão dentro desta lista suspensa, certo? Então, o que você quer evitar é usar um menu suspenso móvel de formato web como este porque ele utiliza menos espaço e pode dificultar o toque e deslizamento nessa área para ver o resto do itens suspensos. E também não utiliza o espaço completo para o mercado imobiliário. Em um dispositivo móvel, seu ponto de toque amigável e amigável. E o mais fácil de chegar é onde essas caixas cinza, essa é a ideia por trás de um menu suspenso móvel é utilizar todo o imóvel do telefone, toda a largura. Além disso, seja fácil para o usuário deslizar para cima e para baixo dentro desta seleção suspensa. Parece algo assim. Tenho um aberto aqui. Tudo o que você precisa fazer é clicar no doce normal eu ou tocar no gelo doce regular aqui. Você é um nível de doçura aparecerá e, se houvesse mais campos, você simplesmente clicaria e arrastaria nosso dedo. E isso mostraria diferentes valores de nível de doçura aqui. E se você selecionar doce regular ou semi-doce aqui, ele fechará o menu suspenso. Você grande tapioca se quiser. Eu não quero te deixar com fome de Ababa t. Mas sim, isso é essencialmente o menu móvel lá embaixo. Então, novamente, para evitar estilo web dropdowns em dispositivos móveis, você pode fazer isso para tablet. Mas como nossos imóveis são tão pequenos em nossos dispositivos móveis, é um deslizamento para cima de baixo. E então, quando você toca em sua seleção, ela desliza para baixo. Vamos nos aprofundar mais em algumas coisas e não fazer. Novamente, um menu suspenso é ótimo para três ou mais valores. Outra coisa é para o formulário de data preenchido, é melhor que o usuário insira a data aqui. Mês, mês, dia, dia, ano, ano, ano. Em seguida, versus fazer as suspensas por meses, dias e anos separados novamente, porque isso é uma affordance, o usuário levará três guias ou três cliques para entrar aqui e insira essas informações e, em seguida, encontre a data. Digamos que você esteja olhando para o seu aniversário ou algo assim, para rolar para baixo e encontrar a data em que você está em vez de apenas envolver uma vez, números de teclado com um clique, entrada e ser capaz de inserir os números com base nesse teclado. Eles são ótimos para formulários combinados preenchidos com um seletor de datas. Então, o que é isso é que eu tenho uma conversa apenas sobre catadores de encontros no próximo, acredito que no próximo vídeo falaremos sobre catadores de encontros aqui. Mas, essencialmente, você pode entrar , digitar a data aqui, ou você pode clicar no ícone do calendário, que mostrará o seletor de datas. E você pode ir ao dia de hoje como padrão ou avançar no tempo ou voltar no tempo com base no contexto disso, se for como agendar um compromisso, então você está apenas vai avançar no tempo. Se for mais uma referência de data de hora passada, como se você quiser que ele veja as análises ou algo que aconteceu ontem em seu site, então você pode clicar de volta nos dias e não irá. Você também não poderá ir para o futuro estado aqui. Mas eu entro em tudo isso no vídeo do seletor de encontros aqui em um segundo. Ok, então, se você tiver menos de três valores, é melhor expor esses como botões de opção ou caixa de seleção porque novamente, ele volta a affordance é menos cliques e expõe as informações em o nível do rosto e não dentro do menu suspenso. Então evite se a pergunta for que você tem mais de 21 anos, use os botões de opção sim ou não versus Você tem mais de 21 anos? Clique e, em seguida, agora você precisa fazer outro clique. Não. Portanto, é mais um clique. Melhor fazer uma versão como essa com os botões de opção. Drop-down. A largura precisa ser mínima no mínimo. Então a janela aqui, essa coisa, essa largura precisa ser pelo menos o comprimento do formulário suspenso preenchido. Não torne o campo de formulário aqui menos largura do que a caixa de diálogo real ou suspensa. Não faça isso menos largura no campo de formulário aqui. Tudo bem se eles passarem por cima como se pudessem ser um pouco mais largos do que o suspenso real em si. Só não faça menos largura aqui à direita. Você pode fazer qualquer um como este campo de formulário pode viver acima desta lista suspensa aqui. Como quando você clica nele, ele não pode ir acima do valor. Ou pode ver que pode fazer o que está fazendo aqui, que é deslizar por baixo do campo do formulário, seja um ou totalmente bem. Então você pode ver o exemplo aqui, como você clica aqui e a caixa de diálogo do campo de formulário aqui. Ele vai em cima deste favorito para o menu de cores. Enquanto aqui ele vai logo abaixo. Não há certo ou errado aqui. Disse que ambos são aceitáveis. Lembre-se de dar um bom espaçamento entre a seta aqui e o texto. E sempre use a largura que determina a largura do seu menu suspenso com base na palavra mais longa que você tem dentro da área suspensa. Isso será que determinará a largura quando ela for selecionada. Então, se você tem uma palavra longa aqui, certifique-se de que isso cobre a palavra longa aqui. E se for mais longo do que isso, deixe-me digitar isso rapidamente. Legal. Então, se for mais longo do que o menu suspenso, o que você pode fazer é ter uma escolha. Você pode ir para duas linhas, o que eu normalmente não gosto de fazer. Ou novamente, você poderia fazer o que fizemos no passado, que é elipse fora. Ótimo, basta ir mais três assim. Mas digamos que sua palavra seja exatamente onde está. Digamos que você tenha apenas a palavra mais longa nesse menu suspenso é aqui onde você só tem uma palavra na segunda linha. É melhor adicionar um pouco mais de largura ao seu menu suspenso. Puxe isso que está muito apertado aqui. Adicione isso um pouco mais. Lá vai você. Essa deve ser uma boa largura para a palavra mais longa dentro do seu menu suspenso. Então, esse seria o sabor de sorvete mais longo do mundo aqui. Vou desfazer isso. Então, novamente, dê um espaçamento bom e adequado aqui para essas suspensas. Não aperte a flecha ou os textos dão espaço para que essas coisas respirem. Novamente, elipse as palavras longas aqui, e não vá para duas linhas. Eu acho que parece estranho para jogar fora do alinhamento assimétrico também. Mais uma vez, dê um bom espaçamento entre os textos e os campos de formulário. Não esmague isso assim, certo? Isso deve ir, dar espaço para respirar. Bem muito apertado aqui eles sufocando essa coisa devem ser capazes de respirar um pouco. Como sempre, use a quantidade certa de comprimento para a caixa de listagem de diálogo para rolar, certo? Portanto, todo esse conteúdo aqui deve ser capaz de rolar. Não torne a caixa de listagem tão grande assim que ela mostra todos os itens porque isso não cabe no seu dispositivo ou na área de trabalho. E você vai rolar a coisa toda para descer. De qualquer forma, se você tiver uma lista tão longa, é melhor fazer um tipo de cabeça. De qualquer forma, basta mostrar a lista aqui se o usuário quiser rolar para baixo e achá-la ótima. Mas eles também podem digitar no teclado e filtrar rapidamente essa lista e, em seguida, encontrar o valor da variável ou a seleção de entrada que eles estão procurando. Tudo bem, isso foi suspensos. E no próximo vídeo aqui vamos cobrir catadores de datas. Vejo você lá. Adeus. 8. Destacamos os catadores de datas: Tudo bem, vamos falar sobre catadores de encontros. Um seletor de datas é praticamente um menu suspenso para datas. E permite que um usuário selecione datas interagindo com uma sobreposição de calendário. E há principalmente dois tipos comuns funções de seletor de data. O primeiro aqui é usado para selecionar uma data específica. O outro mais comum é selecionar o intervalo de datas. Vamos começar com o primeiro aqui. Se for usado para selecionar um dia específico, ele é comumente usado para agendamento. Se você fosse marcar uma consulta, digamos no Genius Bar, Apple Genius Bar ou em um voo só de ida. Ou não criei uma consulta para seu Diego ver seu dentista para limpar os dentes. E o que acontece aqui é ele funciona como um menu suspenso e você clica no próprio campo do formulário. O menu suspenso de sobreposição de calendário mostra que você tem uma pequena caixa cinza que indica o dia em que você está e, em seguida, você toca em qualquer lugar e verá a estadia ativa aparecer não apenas onde os textos fantasmas estavam, você verá o texto ativo concluído. E você também verá uma representação dessa seleção na sobreposição do calendário também. Em seguida, fica um pouco mais complicado quando usar para selecionar um intervalo de datas e, novamente, comumente usado para voos de ida e volta ou estadias em hotéis. Exemplos que você pode encontrar isso como no Google Flights ou Travelocity. E o que acontece aqui é se ambas as datas de check-in e datas de check-out ou partida e chegada. Datas de chegada ou partida. Elas aparecem como uma sobreposição de calendário igual, mas dois tipos diferentes de campos de data. E o que acontece aqui é quando você clica e diz data de check-in, sua primeira seleção faz a primeira data. E então, na mesma sobreposição de calendário, você pode avançar meses ou meses atrás. E a segunda seleção faz o intervalo de datas. E você pressiona pronto ou você pode clicar fora da janela suspensa e fechá-la. E a primeira seleção inserirá o valor para o primeiro seletor de datas. E na segunda seleção aqui, inseriremos o valor para o segundo seletor de datas. Então, vamos dar uma olhada nos estados para um seletor de encontros aqui. Novamente, você tem os dois tipos de estilos mais comuns. Você tem essa interface de usuário material para isso só tem a linha. E então você tem o formulário de contorno aqui nós somos turnos e retângulo de contorno. Mais uma vez, o estado de paira, voltando ao princípio em que algo acende ou parece estar vivo. Vamos usar o azul para o contorno ou para a interface do usuário do material solta, seletor de data, regra suspensa, use a linha para, a linha ficará azul. E então temos o estado ativo novamente, isso é apenas o estado de entrada. O erro fica aqui. E um estado desativado como a transparência de 20% dentro do seletor de diálogo de calendário. Isso é bastante complicado, apenas a caixa aqui porque tem muita coisa acontecendo. Você pode voltar um mês, você pode avançar um mês. Como eu disse antes, você tem a caixa retangular cinza ao redor dos dados. É hoje. Você tem a indicação azul, que é a data selecionada ou atuada. E então você também tem um estado de paira que iria dar a volta e seguir o mouse aqui. Portanto, há muito o que entrar na caixa de diálogo. Você também pode usá-los e, novamente, você pode combiná-los com um campo de data. Se você tiver uma seleção de data, o usuário pode entrar e digitar exatamente como faremos o campo de data nos campos de formulário que vimos antes, eles apenas abrem um tipo de teclado nos números, farão as barras eles e então eles completarão isso. Ou eles podem clicar no ícone Menu, que abriria o menu suspenso do seletor de datas ou a janela de diálogo onde eles poderiam selecionar, fazer a seleção para a data. Você também pode ficar muito astuto com sua caixa de diálogo de data ou seleção suspensa. E você pode facilitar um pouco a seleção de anos no passado e você pode adicionar meses. E, novamente, isso ajudaria com a affordance dá um pouco mais fácil para o usuário voltar anos, entrar em meses diferentes aqui e, em seguida, fazer as seleções aqui também. Quando chegamos a selecionadores de encontros móveis, eu recomendo que você, e é uma prática recomendada levar os imóveis em tela cheia. E vou mostrar alguns exemplos que criamos para um aplicativo no qual estou trabalhando. Isso é ótimo para. Mais uma vez, toque em imóveis em utiliza o imóvel em tela cheia que temos, o precioso. Ecrine imóveis que temos em dispositivos móveis. E isso facilita muito o deslizamento dois anos diferentes também. Vou mostrar um exemplo aqui em um segundo. Novamente, deixa muito claro o uso do, se isso levar o imóvel em tela cheia, você pode usar essas barras aqui é para indicar que o intervalo de datas em que você selecionou para um indivíduo data também. E, novamente, são imóveis mais tocáveis, fácil deslizar para cima e para baixo e ver os meses futuros. Você pode vê-lo ou nos últimos meses você pode vê-lo nos exemplos do Google Flight. Se você for olhar para o Google Flights no seu telefone. E aqui está o seletor de datas que usamos para um aplicativo no qual estou trabalhando. Isso é para uma aplicação solar e, essencialmente, você tem o seletor de datas aqui. Você pode voltar no tempo e analisar seu sistema. E se você clicar nesta terça ou tocar nesta terça, você verá o slide de data novamente. Você pode voltar. Neste ponto, veja como é fácil deslizar nos últimos meses diferentes. Tudo bem, então eu posso ir facilmente para o passado. Digamos que eu queria dar uma olhada em 23 de setembro aqui, eu posso clicar no dia 23, pressionar Concluído. E isso mudaria minha seleção aqui. Muito mais fácil do que ir e voltar nessas setas, como uma maneira rápida de entrar lá e selecionar uma data. E então mostrarei aqui o campo de data personalizado. Então, o mesmo princípio aqui. Pressionamos o costume, os slides e você tem as datas de início e término. vez, muito fácil para o uma vez, muito fácil para o dispositivo móvel deslizar esses meses diferentes. Digamos que eu queria fazer o 29 de setembro aqui, até o dia 13. E você pode ver a indicação das barras laranja para transmitir ao usuário o intervalo de datas. E se você pressionar Done, teremos o alcance aqui. E o usuário pode voltar, adicionar datas diferentes que precisam. Isso é melhor praticar para selecionadores de encontros na web, você pode usar coisas assim como isso parece ótimo. E então você também pode usar esse tipo de interação para selecionadores de datas móveis. Vamos entrar em algumas coisas e não usar um campo de formulário de data para aniversários. Então, novamente, se você estiver fazendo uma data de nascimento, use o formato como este, onde mostramos MM, DD, YY. Nunca use um seletor de datas para um campo de formulário de data de nascimento. Isso será exibido quando você clicar nisso, quando o usuário clicar no campo do formulário seletor de data, o menu suspenso será padrão para a data de hoje. Então, se você pode imaginar, nascido em 1979, eu tenho que voltar e tocar até 1979 nesses meses. Como ninguém vai querer fazer isso onde em um campo de formulário aqui eu posso digitar facilmente o formato ba, ba, ba, ba, ba, ba, feito. Lembre-se de dispositivos móveis, dê espaço suficiente para seu calendário e lembre-se também de dar um bom espaço de toque. Se você se lembra no vídeo anterior, falei sobre as diretrizes da interface de usuário da Apple pelo menos 40 pixels por 40 pixels para qualquer tipo de toque real no seu dispositivo móvel. Você pode ver aqui se fizemos o calendário muito pequeno, será muito difícil tocar em um valor específico, especialmente se você tiver grandes polegares ou dedos. Então aqui estão 50 por 50 pixels. Você pode ver que isso não é, isso não é bom o suficiente. Vai tornar alguém realmente difícil selecionar apenas um desses valores onde aqui, cada uma dessas letras são esses números aqui são precisamente espaçados em 50 por 50 pixels. Para que sigamos esse princípio. Tudo bem, então era adequado para data, catadores de data. E verei você no próximo vídeo, onde abordaremos botões de opção, caixas de seleção e alternaremos padrões e componentes da interface do usuário. Vejo você lá. 9. Botões de rádio, cheques, alternantes: Tudo bem, neste vídeo vamos falar sobre botões de opção, caixas de seleção e alternâncias. Para botões de opção. Eles são usados quando há uma lista de duas ou mais opções. Sua função permite que o usuário selecione exatamente uma escolha. Isso é tudo que você ganha. Uma opção com os botões de opção. E se você estiver clicando em um botão de opção não selecionado, ele desmarcará o outro botão de opção selecionado. Portanto, é apenas uma função de uma escolha. As origens aqui é que um botão de opção foi realmente modelado após esses botões de opção físicos que estavam em carros antigos. E o que acontece é que você teria essas estações favoritas predefinidas que você teria, o usuário selecionaria. Se você clicar nesta seleção am aqui, o carro voltaria para reproduzir aquela estação de rádio definida pré-selecionada que você tinha. E se você clicar na outra estação AM, a que estava lá voltaria a aparecer, e esta voltaria a tocar a outra estação favorita que você teria. Portanto, era uma funcionalidade semelhante de botões de opção, o que significa que é apenas uma seleção por vez. E em vez de surgir e aparecer, mundo de hoje, eles se parecem mais com isso. Há círculos para um estado padrão e, em seguida, há para o estado ativo, você receberá os dois círculos aqui e os círculos internos preenchem, sempre preenchidos assim. Você pode personalizá-los. Vou mostrar-lhe como personalizá-los aqui em um segundo. Mas na maioria dos casos, geralmente já existe um botão de opção predefinido ainda no estado ativo selecionado. Mesmo se você chegar a uma pergunta de botão de opção como esta, eu disse: Você tem mais de 21 anos e você pressiona sim. Agora não há como desmarcar isso. Você não pode simplesmente desmarcar esse estado, ou seja, voltar a esse estado. Uma vez selecionado, ele permanece selecionado e agora você tem que escolher que é um ou outro, sim ou não. Essas são as principais funções do vento e por que você deve usar um botão de opção, especialmente em uma caixa de seleção. caixa de seleção fornece várias seleções. Se um botão de opção é apenas um critério ou função de seleção. Você pode ver aqui alguns casos de uso aqui é se você escolher a hora que você quer, que horas é a hora do seu jantar? E você seleciona cinco horas, seis horas ou sete horas, só será uma vez. Você só tem uma vez, diga neste dia que você vai jantar. Se houve outras vezes que você não está vendo, veja como você pode combiná-lo com um campo de formulário aberto se você pressionar Outro que o formulário aberto preenchido vai do estado desativado, que novamente está em 20% de opacidade e agora se torna o estado padrão. E um usuário pode inserir um slot que ele não está vendo com base na hora do jantar aqui. Legal. Você pode fazer botões de opção personalizados aqui onde, neste caso, temos um selecione seu gênero. E então, ou você é masculino ou feminino. E se você é uma mulher, você, quando você passar o mouse aqui, você verá o contorno rosa como um pairar. E então você terá esse estado selecionado, que é o estado de cor completa aqui. Mas, novamente, estamos usando botões de opção para a quantidade certa de conteúdo ou função, que é apenas uma seleção. Você pode ver que este é um estilo personalizado para um rádio, mas não se parece com um botão de opção, mas funciona exatamente da mesma maneira que um botão de opção onde, se você clicar em Mel, ele desmarcaria o e selecionaria o macho. Aqui. Você pode ver a mesma seleção aqui é que eu tenho Mel selecionado e feminino não. E se você passasse o mouse sobre o estado feminino aqui, ele clicaria e clicaria. Você selecionaria o cartão feminino aqui também. A diferença é que nós realmente incluímos o botão de opção aqui no próprio cartão, certo? Então, adicionamos o cartão. Sem o cartão, ficaria algo assim. Adicionamos o cartão aqui para dar um pouco mais de polimento. Se você tiver mais de três seleções de botões de opção como essa, coloque-as verticalmente. Não há problema em fazê-los lado a lado aqui. Se você tiver dois ou três, provavelmente poderá empurrar para quatro. Mas, mais do que isso, você quer colocar verticalmente, é mais fácil de ler e mais fácil de digitalizar. Tudo bem, então aqui está uma seleção onde você tem um monte desses botões dispostos aqui. E o que acontece quando eles são dispostos verticalmente assim é que você pode não ter imóveis suficientes para que todos eles se encaixem e você definitivamente não quer dividi-los em duas linhas, basta ver o quão estranho isso parece. E o que acontece é que o usuário tem dificuldade em escanear a associação entre o botão de opção que ele selecionou e a hora. Então você pode ver que as sete horas estão inseridas, mas às vezes pode ser confuso se ponderado é o botão aqui mais seis horas, ou é sete horas? Onde, se você colocá-lo verticalmente assim, pode ocupar mais imóveis na tela. Mas, no que diz respeito à função, fica muito mais claro na relação entre o botão de opção e o campo de tempo. Se você tiver mais de, digamos, dez opções, então é melhor usar uma lista suspensa novamente. O menu suspenso serve a mesma função. É uma seleção de cada vez. A que horas você vai para a cama? E você vai fazer nosso texto fantasma aqui. Então, por exemplo 1030, eles podem entrar, clicar no menu suspenso, selecionar 1030 ou qualquer outra coisa, qualquer hora que você tenha para a cama, talvez quatro da manhã. Estamos aqui. Ele ocupa um pouco demais de imóveis na tela. E é muito procurar um usuário imediatamente para ver todas essas opções onde um menu suspenso melhor porque ele irá ocultá-lo dentro da janela. Você economizará imóveis na tela e o usuário poderá rolar ou deslizar para encontrar a janela de tempo preferida. Tudo bem, então a próxima coisa aqui é lembrar de uma opção de cada vez. Somente. Escolha um a cinco, você só escolhe um número, número um. Aqui você pode ver que estamos quebrando as regras fundamentais dos botões de opção. Você não pode ter mais de um selecionado. Isso está se referindo mais a um tipo de interação de caixa de seleção e não a um tipo de interação de botão de opção. Tudo bem, tão bom segue. falar sobre caixas de seleção. Então, novamente, as caixas de seleção são usadas quando há uma lista de duas ou mais opções. E sua função permite que um usuário selecione mais de uma opção dentro dos valores de seleção. Portanto, não há, não há caixa de seleção selecionada como padrão e o usuário pode entrar e desmarcar mais de uma opção por vez. Ou você pode ter alguns casos em que você está filtrando uma lista. Você pode ter todos esses pré-selecionados e o usuário pode entrar e cancelar a seleção com base nisso. Mas neste caso, queremos que você entre e selecione seus sabores de sorvete favoritos. Você pode ver aqui onde o usuário clica ou toca em qualquer um desses. E então você verá a seleção múltipla aqui com a caixa de seleção. Novamente, você pode combinar as caixas de seleção com as suspensas como falamos no vídeo suspenso onde temos o campo de formulário aqui você clica, você tem as caixas de seleção aqui em que você clica Biscoitos e cremes de rua rochosa de baunilha. E então você verá as seleções do formulário de pílula aqui aparecerão. E, novamente, o usuário pode clicar em um deles para excluir o que também desmarcaria na caixa de seleção também. Os estilos são bem simples, ele só tem um esboço por padrão. Mais uma vez, você pode fazer duas coisas para o pairar. Você pode fazer o contorno ficar azul ou preenchê-lo com azul e , em seguida, o estado ativo quando ele for selecionado, você tem a pequena marca de seleção. E então você pode ter o estado desativado quando algo estiver selecionado no estado ativo. Então, novamente, 30% de opacidade. Ou você pode tê-lo no estado padrão onde não há nada selecionado. E, novamente, isso é 30% de opacidade. Você pode personalizar caixas de seleção. Então, novamente, apenas usá-los para o tipo certo de contexto antes de usá-los como Você tem 21 anos ou mais? Sim ou não, ou masculino ou feminino? Uma seleção por critério onde, para os botões de opção, onde as caixas de seleção podemos fazer múltiplos. Nesse contexto, vamos perguntar a alguém qual é o favorito deles, selecionar sua atividade favorita. Quando o usuário passa o mouse sobre qualquer um deles, podemos usar o traçado do contorno para indicar que eles estão vivos , clicáveis e tocáveis. E quando eles clicam e tocam em um desses, preenchemos a forma do cartão aqui. E agora você pode ver que são caixas de seleção personalizadas. Eles permitem que um usuário selecione mais de um e, em seguida, um pouco mais extravagante do que apenas a caixa de seleção aqui com texto ao lado dele, podemos adicionar pequenas ilustrações e ícones legais. Também tenho um vídeo inteiro sobre apenas ícones e iconografia e as melhores práticas em torno de usá-los no final da aula. Certo, vamos passar para alternâncias. Alternações são praticamente um switch que representa que permite que um usuário ative e desligue as coisas. E representa muito do que vemos em nossas casas, que são interruptores de luz. Portanto, há mais elementos acionáveis usados nas configurações. A coisa é como Wi-Fi e Bluetooth. Você verá isso muito ou desativará as notificações. Mas a função principal para ativar e desativar. Você está colocando algo ou está desligando algo. Onde uma caixa de seleção é mais um critério de seleção e um botão de opção também é um critério de seleção. Uma alternância tem um pouco mais de singularidade nesse sentido porque é mais comum no tipo de switch. Você meio que o vê aqui como notificações recebidas. Você verá que o estado padrão é cinza. E então, quando o usuário o ligar, ele dirá ativar as notificações. Quando estiver ligado, ele dirá desativar as notificações. Uma maneira você pode alterar os textos rotulados para ajudar a indicar o estado em que isso está ativado. Você também pode fazer isso aqui. Notificações recebidas que você adiou para a esquerda, para o escritório direito uma cor mais escura agora é da mesma cor que o botão de opção ou a alternância. E então, quando você ligá-lo, liga, se transforma no estado de cor usado para o estado de alternância e desliga volta a esse estado cinza. O mesmo negócio aqui. Aqui está outro exemplo em que é um pouco menor e mais comum na web é esse tipo. E você clica no círculo, desliza. Mais uma vez, adicionamos alguma cor para indicar que isso está ativado. E então você pode desativá-lo novamente como call to action ou ativá-lo quando estiver no estado padrão aqui. Vamos entrar em algumas coisas e não fazer aqui. Novamente, como mencionei antes, use cores não apenas no interior da caixa, mas também no texto para indicar o estado atual. E evite fazê-lo onde o texto está dentro da alternância porque não está claro se você está olhando para isso, se eu estiver desligando deslizando ou se o estado estiver desligado, ou neste caso aqui, está ligado ou vou ativá-lo, envolvendo-o com essa alternância? Em seguida, altere novamente os textos para o usuário saiba o que está acontecendo. Então, em vez de um texto de chamada à ação, você também pode fornecer os textos de estado onde apenas dizer qual é o estado dessa alternância no momento atual, qual Wi-Fi está desligado. E quando você toca e desliza ou toca nele e clica, você verá a mudança de texto que o Wi-Fi está ativado. Novamente, evite algo assim com a caixa de seleção onde ele apenas diz Wi-Fi ligado e está verificado e Wi-Fi ligado. A caixa de seleção novamente, é mais um critério de seleção em que, se você tiver um Wi-Fi no tipo de critério como esse, é melhor usar uma alternância. Lembre-se de que a esquerda está sempre fora do estado e a direita é sempre o estado no estado. Mais uma vez, corresponda às convenções atuais das alternâncias existentes. Não alterne isso onde ele está desligado e a esquerda está ligada. Certo, legal. Isso era botões caixas de seleção e alternâncias. E o próximo que vou abordar no vídeo são formulários endereçados e formulários de pesquisa . E te vejo lá. 10. Os Formulários de endereço e pesquisa: Tudo bem, então vamos falar sobre formulários de endereço e formulários de pesquisa. Esses dois são tão comuns e soam fáceis, mas na verdade são bem complicados, especialmente em fóruns de pesquisa que eu só queria separá-los e apenas fazer isso, falar e exemplos e fazer e não é só nesses dois tipos de campos de formulário. uma vez, um formulário de endereço como parece, são formulários para o seu endereço. Eles são muito comuns. Nós os usamos o tempo todo. Meu favorito para usar é o único campo de formulário, preenchimento automático do formulário de endereço. Em vez de ter o endereço residencial com o, você sabe, seu endereço, sua cidade, seu estado, seu CEP, seu país. O que você pode fazer é fazer algo assim onde você tem seu endereço residencial, você tem os textos fantasmas, basta digitar seu endereço por padrão. E enquanto você está digitando o endereço residencial aqui, você usará a pesquisa automática ou o preenchimento automático aqui suspenso, e isso pesquisará o banco de dados de endereços com base na contagem de caracteres que você colocou em seu auto, em seu formulário preenchido aqui. Normalmente, eles não começam até que você tenha pelo menos três ou quatro caracteres nos campos do formulário. E então isso começará a estreitar, diminuindo essa lista suspensa de resultados. E dentro da lista aqui, podemos ter 30 ou 40 resultados com base em sua entrada aqui, mas mostramos apenas cinco traço sete de cada vez. É mais fácil para um usuário escanear cinco ou sete deles para ver se eles são correspondências lá. Se houver, não veja a correspondência, eles podem facilmente manter a digitação apertada. À medida que eles continuam digitando, essa lista de endereços de preenchimento automático será filtrada com base nas contagens de caracteres. E esse resultado da pesquisa se tornará menor, menor e menor e mais exato para o endereço que você está inserindo como usuário até encontrar seu endereço. Então, neste momento, o usuário pode parar de digitar. Aqui, veja o endereço que eles querem colocar, que é cinco por cinco Gary Street, São Francisco. Eles podem setar para baixo no teclado. Novamente, você precisa ter o estado do mouse aqui, ou o estado do mouse também apareceria quando o erro, quando o usuário estava pressionando o teclado para cima e para baixo no teclado. Então, quando eles pressionam Enter, você pode ver agora que o formulário de um endereço tem o nome da rua, a cidade, o estado e também o país. E você pode até adicionar código postal a isso também. Você pode pressionar facilmente X ou tocar em X no campo do fórum, o que o levará de volta ao estado padrão aqui. Uma maneira muito fácil de fazer que o endereço de alguém volte para essa palavra-chave, danças, como o usuário affordance, economizando tempo, economizando energia. Aqui está mais uma maneira manual tradicional. Mais uma vez, não é um make ou break. Você verá isso o tempo todo. Mas mostrarei uma maneira de ainda utilizar o banco de dados de pesquisa automática de preenchimento dos campos de endereço para preencher todas as informações necessárias para um endereço aqui, mesmo que você tenha que quebrá-lo assim, onde você tem o endereço, a cidade e o estado, e o código postal. Então, tradicionalmente, o que isso seria algo assim e você teria que digitar seu endereço. Você teria seu segundo endereço, digita sua cidade. Você teria um menu suspenso para o seu estado. Você teria um CEP e um menu suspenso para o seu país. Mais uma vez, nunca use o menu suspenso para uma cidade. Você sempre pode usar o menu suspenso para uma seleção de estado. Raramente você digita o estado aqui. Portanto, sempre use um texto de formato livre aqui para a cidade e um menu suspenso para o estado e para o país. Ok, então novamente, se você pode evitar isso, faça isso. E aqui está uma maneira de combinar a que acabei de mostrar acima com esse tipo de interações de campo de formulário. Então, digamos que você tenha o endereço 12, você tem a cidade, o estado, o CEP. E já sabemos que a maioria das pessoas será para o nosso serviço que prestamos está nos EUA. Podemos deixar esses EUA. Então, o que acontece aqui é que um usuário entra no campo de endereço número um, ele digita seu endereço, ele vê a correspondência. Sim. Esta é a 515 Geary Street, São Francisco. Eles clicam nisso. E o que ele faz é preencher o endereço, a cidade, o estado, o CEP e o país dentro desses campos de formulário para que eles não precisem entrar em cada um deles. Essa é uma maneira inteligente de fazer os formulários de endereço. Vamos dar uma olhada no formulário de pesquisa. Portanto, a caixa de pesquisa é essencialmente uma combinação de um campo de entrada e um botão de envio. E eles parecem super fáceis. Mas, na verdade, há muito para eles. E para sites complexos, a caixa de pesquisa pode ser a principal maneira pela qual um usuário encontra qualquer coisa ou a primeira coisa que encontra qualquer coisa ou a primeira coisa ele faz quando chega ao seu site, pense como a Amazon. A primeira coisa que você faz uma Amazon é procurar. Você procura a coisa que está procurando. Nesses casos, o formulário de pesquisa é um grande negócio. E a página de resultados que a caixa de pesquisa oferece também um grande negócio. Lembre-se de que a pesquisa só é necessária quando você tem muito conteúdo. Se você não tem muito conteúdo em seu site, não precisa de pesquisa de tamanho estranho onde estamos priorizando produtos que estamos criando. pesquisa vem mais tarde depois de termos mais coisas, como se um usuário inserir várias informações que ele precisa pesquisar. Normalmente, não começamos com a pesquisa porque ainda nem temos um produto. Lançamos sem pesquisa, permitimos que os usuários insiram informações que eles esperaram tecnicamente que você deseja pesquisar em algum momento em nosso aplicativo. E então, nesse ponto, adicionaríamos a pesquisa mais tarde. Portanto, esse é apenas um tipo de mecanismo de escopo ou um conjunto de prioridades para o lançamento de novos produtos. Mas se você tem um site de comércio eletrônico onde você vai ter uma tonelada de coisas que alguém que precisa encontrar, então procura super importante e deve ser quase a primeira coisa que você faria, você começaria a construir além do conteúdo e dos produtos nos fluxos de checkout que você teria. Novamente, faça com que a pesquisa seja acessível em todas as telas de um site complexo e não torne difícil para os usuários encontrarem a pesquisa. Então você geralmente está no canto superior direito ou no meio da barra de navegação em seu site de pesquisa. Aqui estão alguns exemplos. O primeiro exemplo aqui é um campo de pesquisa comum, mas não há botão de envio. E o botão enviar é ativado fazendo teclado Enter no teclado. E isso enviará o campo de pesquisa aqui e levará o usuário para a página de resultados. Então, nesse caso, novamente, preenchimento automático é muito importante. E você pode usar textos fantasmas para sugerir algumas das possíveis pesquisas que queremos que um usuário pesquise. O segundo exemplo aqui é um botão físico. Novamente, o usuário ainda pode pressionar Enter no teclado para enviar a pesquisa e ir para a página de resultados da pesquisa. Ou eles podem clicar no botão Pesquisar, que os levará para a página de resultados da pesquisa. E em ambos os casos, o preenchimento automático ainda é super importante. Mas lembre-se que o botão de pesquisa física visual transmite ao usuário que, se não houver correspondência no preenchimento automático, eles ainda podem apertar o botão enviar e encontrar qualquer correspondência que tivemos que nós não foi possível encontrar o preenchimento automático. Sei que parece meio complexo, mas deixe-me, deixe-me mostrar o exemplo aqui. Portanto, o Google é um ótimo exemplo de um campo de pesquisa sem o botão enviar. Mas eu quero mostrar como qualquer maneira você está enviando no teclado ou você tem um botão físico no qual você pode clicar ou ainda ser capaz de pressionar Enter no teclado como um envio. Mas eu quero mostrar como o preenchimento automático assume, assume um papel nisso. Digamos que aqui estou no Google e estou digitando tipografia. Você pode ver que está me dando o neste caso, está me dando, acho que dez resultados de pesquisa aqui são mais comuns. Neste ponto, o que eu poderia fazer é poder setar no meu teclado, estou diminuindo. Vou setar para cima. Posso sair X ou posso clicar em uma dessas edições, levar-me à minha página de resultados. Mas, à medida que continuo digitando, os resultados da pesquisa começam a ficar cada vez menos. E vou começar a digitar alguns números estranhos aqui. Tudo bem, então agora não há mais resultados de pesquisa. Mas ainda posso pressionar Enter no meu teclado. Seja qual for o sistema que estamos fazendo fará o melhor trabalho para corresponder às opções que estivessem lá. E me dê a página de resultados aqui. É aí que o preenchimento automático vem a calhar. E também o botão Pesquisar, porque o botão de pesquisa sempre transmitirá ao usuário que, independentemente da entrada, você ainda pode pesquisá-lo. Pode haver esses casos raros em que sua página de resultados não resultou em nada. Você pode voltar para a página resultados sem resultados neste caso, você pode ver que o Google tem cerca de oito resultados. Com base nisso. Isso está pesquisando em toda a web por um nome realmente estranho como este, e ainda há oito resultados. Vamos ver se conseguimos fazê-lo como nenhum resultado aqui. Sim, ainda assim, ainda são resultados. Então você pode ver o que quero dizer aqui é que, se você está projetando algo para pesquisa, não apenas o campo do formulário de pesquisa, você tem que pensar sobre a maneira como o usuário preenche automaticamente seus pesquisas. A maneira como eles selecionam a conclusão automática. A página de resultados da pesquisa que corresponde aos resultados. E se não houver resultados, eles ainda poderão pressionar Enter no teclado e ir para uma página de resultados. E se não houver resultados, temos que pensar sobre essa experiência do usuário. Só temos claro que o texas lamentou, não houve resultados para essa pesquisa. E, no entanto, abordamos esse tipo de caso de borda é importante. Novamente, quando você pensa em apenas pesquisar, parece fácil, mas é muito mais complexo. E mostrarei um pouco mais de complexidade quando entrar em uma interface móvel sobre como a pesquisa funciona. Rapidamente, vamos passar pelo preenchimento automático. Então, novamente, combinamos cinco a sete no caso do Google, parece que eles fizeram dez. As correspondências mais comuns com base na seleção que o usuário fez. Neste caso, estamos apenas olhando para a OPAS. Estamos tentando combinar o telefone aqui é o que estamos assumindo que o usuário deseja pesquisar com base nas funções de pesquisa mais comuns que tivemos em nosso sistema que começam com a OPAS. Novamente, o x aqui, o usuário pode cancelar isso. E então, quando acabei de falar sobre o SOS de preenchimento automático, esse menu suspenso só aparece após as três primeiras pesquisas. Ele dá ao usuário uma lista definida muito mais clara do que ele está pesquisando. Novamente, não sobrecarregue seus usuários com sugestões em cinco traço sete a dez opções aqui no preenchimento automático funcionarão muito bem. E não se esqueça de definir qual o do mouse ou o estado de seta para cima e para baixo do teclado pode ser. Novamente, você pode usar a mesma interação para pesquisar na barra de navegação na Web. E você pode fazer um estado padrão como este, onde realmente mostramos a pesquisa de palavras e mostramos o ícone de pesquisa pairar, ele acende e um estado ativo. Podemos tomar mais imóveis como este, pode empurrar o texto ou ocultar todo o texto. Aqui. Você pode torná-lo muito longo. E o usuário começa a digitar. Adicionamos o preenchimento automático suspenso. Eles podem pressionar X aqui para excluir a lista. Ou eles podem pressionar a OPAS e na verdade, pressionar o teclado enter. E teríamos que definir uma página de resultados de pesquisa para o que achamos as melhores opções para OPAS ou se não houvesse resultados. Ou eles podem dizer tudo o que eu estava realmente procurando por capas de telefone. Clique em capas de telefone e as levamos para uma página de resultados mostrando as capas do telefone. E nessa página de resultados, eles ainda devem ser capazes de pesquisar, devem estar em todos os lugares. Aqui está a mesma interação de pesquisa para dispositivos móveis. E tudo o que fizemos aqui é que tenho um vídeo em que falo sobre menus e gavetas aqui no final da aula, vou falar muito sobre como essas funções de navegação no nível pai na sua barra de navegação entrará em colapso em ícones de menu ou, neste caso, como um menu suspenso. Ainda temos a barra de pesquisa aqui. E para o celular pegue a barra de navegação completa aqui o bloqueio do usuário e os manterá focado nesse estado de pesquisa. Outra coisa, alguns fazem e não fazem por dívidas pela web é apenas mostrar se você tem o imóvel, mostrar a busca de palavras. Ele economiza, levará um pouco mais de espaço. Você também pode expandir o estado ativo da pesquisa para dar um pouco mais de imóveis para o usuário digitando. Mas se você tiver o quarto, mostrou a barra de pesquisa para dar ou o texto de pesquisa aqui e o campo do formulário de pesquisa aqui como melhor transporte. E mostra ao usuário, também dá a ele um pouco mais de toque alvo, onde tocar na barra de pesquisa em vez de fazer algo assim, embora pareça liso, é apenas este pequeno ícone de pesquisa. Se você tem o imóvel, mostre o shell preenchido do formulário, o texto fantasma de pesquisa aqui, É mais imóveis clicáveis novamente, affordance. Ele tem um transporte mais forte, sempre lembrando ao usuário que há uma pesquisa aqui versus o ícone. Mas se você tiver apenas o, quando essa resposta for essa barra de navegação aparece em uma interface móvel. Então é bom mostrar apenas o ícone real em si porque você não tem espaço para toda a barra de pesquisa. É somente quando você tem a sala você quer mostrar os textos de pesquisa e o campo estrangeiro? E evite fazer algo assim para a web quando você obviamente tiver espaço para mostrar o campo do fórum e a barra de pesquisa. E mesmo no celular se você tiver espaço para fazer isso aqui, mas é aceitável se você tivesse algo assim também onde era apenas o ícone de pesquisa real aqui quando estiver no celular. A coisa que eu queria chamar para celular também é que é uma interação complicada que você não necessariamente escolheria imediatamente, a menos que você se envolva muito com a pesquisa nesse tipo de mentalidade. Então, quando você estiver, quando estiver fazendo design de interação ou uma perspectiva de UX, sempre que estiver usando dispositivos, pense em como essas coisas se comportam. Essa é uma interação muito comum na Apple. Interfaces é a caixa de pesquisa de mensagens. Se você olhar para a mensagem Turks box agora nas minhas mensagens, posso criar uma nova mensagem aqui com a pequena caixa azul aqui. Também tenho as configurações com os três ícones aqui, e tenho essa barra de pesquisa aqui. O que acontece quando clico na Pesquisa ou toque na barra de pesquisa aqui é que esta barra de pesquisa realmente flutua. E isso me coloca em um modo de pesquisa onde tudo o que posso fazer neste momento é que ele está me concentrando na busca. Ou eu pesquiso, posso pressionar Cancelar e voltar ao modo que eu estava antes. Posso digitar minha pesquisa, começo a ver a conclusão automática e as correspondências à minha pesquisa abaixo. Posso pressionar X para X para fora do texto facilmente e continuar digitando outros textos. Essa é uma interação muito boa porque concentra o usuário em um objetivo e tarefa específicos, que neste caso é a pesquisa. A coisa que você gostaria de evitar. Este tipo em que digamos que você apenas pressione Pesquisar. Agora estou no modo de pesquisa e não estou focado no mesmo ponto de pesquisa. Posso entrar e pressionar Criar nova mensagem. Ou eu poderia entrar nas configurações aqui, posso selecionar novas mensagens, posso editar os nomes, posso fazer as fotos. Também posso ver os textos da minha mãe aqui dentro do estado de pesquisa também. Portanto, não está mantendo o usuário focado nesse tipo de estado. Há muitas ações acontecendo além disso, a única coisa que estamos tentando alcançar para esse usuário é a pesquisa. Eles tocam na pesquisa. Eles estão informando à interface do usuário que eles querem uma pesquisa. Então, torná-los focados nessa interação é importante versus algo assim. É uma interação complicada e complicada, mas você, você vê por que eles fazem. Tem muito a ver com transporte e manter o usuário focado. Versus aqui, há muitas coisas acontecendo de uma só vez. Incrível. Assim, isso encerra formulários de endereço e formulários de pesquisa o verá no próximo vídeo. Falaremos sobre barras de tabulação e barras de título. 11. Bares de tabuleiros e bares de títulos: Tudo bem, bem-vindo ao próximo vídeo. Vamos cobrir barras de tabulação e barras de título. Vamos começar com a barra de abas. Portanto, palavras tabu também são conhecidas como barras de navegação inferiores. E eles aparecem na parte inferior das telas de nível pai de um aplicativo. E permite que os usuários alternem rapidamente entre diferentes seções do aplicativo ou destinos dentro do aplicativo. E eles são usados para aplicativos móveis e tablets ou ao visualizar um site em um dispositivo móvel ou tablet. Mas evite usá-los para qualquer coisa relacionada à área de trabalho do site. Todos nós os vimos. Eles se parecem com esses aqui no aplicativo de beleza do bot, esta pequena seção aqui, essa é a sua barra de abas. Portanto, é um elemento de interface de usuário de navegação. E antes de entrarmos em algumas das melhores práticas e algumas dicas sobre como usá-las, quero falar um pouco sobre arquitetura da informação porque, à medida que vamos começar a entrar em mais vídeos, falaremos não apenas sobre os níveis de arquitetura da informação, mas também se aplica à navegação. Então, se você pensar em navegar pelo conteúdo dentro do seu site ou barras de navegação ou como um aplicativo de experiência de usuário candidato a usuário navega ou como o usuário navega pela experiência do usuário? Muito disso tem a ver com arquitetura da informação ou IA. A base central apenas em um nível básico é que temos um sistema como este, onde você tem um nível pai e, em seguida, você tem um nível de filho. Então, a criança tem um relacionamento com os pais e, em seguida, você tem um nível de neto. Então o neto tem um relacionamento com o nível da criança. No mundo do, neste exemplo vou dar é como sorvete. O nível dos pais é como tamanhos de sorvete , tamanhos pequeno, médio, grande ou cone. E o nível da criança, da informação que se relaciona com o nível dos pais dos tamanhos de sorvete é sabores de sorvete. Porque se você escolher um tamanho grande, poderá obter três colheres de sabores diferentes. Bem, se você escolher um pequeno tamanho de sorvete e obter um ou um sabor se você escolher um tamanho pequeno. Assim, você pode ver como há uma relação entre esse nível filho e esse nível pai. E então, do nível do neto na analogia do sorvete, aqui estão coberturas de sorvete. E tem uma relação com os sabores porque os sabores ditarão ou indicam que tipo de cobertura você gostaria no seu sorvete. Quando pensamos em níveis importantes de informação, o pai é o mais importante. Segundo o pai é a criança, e o terceiro para a criança é esse neto. E, no que diz respeito à hierarquia e importante, uma das coisas que é interessante aqui é que isso se aplica à maneira como as pessoas pensam sobre a informação também. Isso é chamado de modelo mental. E falarei sobre isso quando chegarmos aos vídeos do menu. Mas se você for a qualquer sorveteria em qualquer lugar do mundo, a primeira coisa que eles pediram que são os tamanhos de sorvete. Eles não entram e perguntam um legal Tudo bem, bem, que coberturas você gostaria? Isso é meio estranho. Então, geralmente começa com esse nível definido de arquitetura de informação que se aplica à convenção comum de sorvete, hierarquia e modelos mentais de sorvete que existe no mundo. Então começa com tamanhos que vão para sabores e que vão para coberturas. Esse nível de compreensão de como as informações se relacionam entre si em um ponto de vista hierárquico é importante à medida que passamos por essas classes. Certo, legal. Então, vamos falar sobre as melhores práticas para barras de abas. Então, como eu disse antes, categorize o conteúdo de nível superior na barra de abas. Portanto, esses destinos são que essas categorias devem ser de nível pai, como casa , perfil, loja, navegação, esse tipo de coisa. Use a barra de guias estritamente para navegação e destinos, não na verdade elementos não relacionados. Portanto, não deve ser como coisas que um botão de ação ou você faria alguma coisa. Estes são focados no destino e focados na navegação. Para seu celular e tablet. Guias. Só no mínimo, você tem que ter duas categorias. E no máximo, você pode ter cinco, mas não mais do que cinco e nada menos que dois, e eu vou entrar em um pouco mais do que isso no que fazer e não fazer. Novamente, não os use para desktop da Web. Eles são os melhores para dispositivos móveis e tablets. E não oculte a barra de guias quando o usuário tocar em outra opção dentro da barra de guias. O tamanho do toque por guia é cerca de 40 pixels por 40 pixels no mínimo. Mas você pode obtê-lo até 75. Por 75. Eles são melhores do que o que chamamos de menu de hambúrguer. Se você se lembrar, eu tenho, terei um vídeo inteiro em apenas menus, mas o menu de hambúrguer é uma espécie de elemento de interface do usuário que abriga opções de menu é onde o usuário clica nele. Ele revela essas opções para o usuário, o que nos economiza imóveis. E pode abrigar muito mais opções do que poderíamos mostrar na tela. Mas se pudermos categorizar nosso sistema de guias ou nosso perfil ou nosso sistema de navegação de nível pai precisa de pelo menos dois a cinco, então não precisamos de um hambúrguer. Podemos usar a barra de guias e ela funciona melhor porque expõe essas opções no nível principal de uma tela. Então, novamente, ele remonta a essa affordance. O usuário não tem o brilho. Clique no toque no menu. Veja o menu toque novamente no elemento de menu e , em seguida, vá e para trás. Eles podem facilmente com uma guia, percorrer as seções de nível pai do seu site ou experiência do usuário. A barra de abas, lembre-se, permanece sempre fixa na parte inferior do seu telefone ou tablet. Ele nunca deve rolar. E verifique se há uma clara permanência ativa e padrão, atendendo ao estado em que o usuário está. E um estado padrão, os estados que o usuário ou os destinos ou toca no usuário não foi e não está ativado, então nunca tem uma opção de guia de estado desativada. Todas essas opções de guias devem ser tocáveis e não desabilitadas que você não possa ir aqui. Você pode fazer essas seções aqui cerca de 90 pixels de altura a 100 pixels de altura. E, novamente, você pode ver este retângulo de ponto rosa é de 50 pixels por 50 pixels. Portanto, a área de destino, ou seja, a área de toque para o usuário. Não é o ícone. A área superior é um espaço invisível. Queremos tornar esse espaço maior do que esse ícone aqui, certo? Então, todos eles teriam uma área de toque que ficaria assim. E certifique-se de tocar em áreas no mínimo 40 pixels por 40 pixels. Mas, novamente, costumo ir com 50 por 50 só para tornar um pouco mais fácil para os usuários tocarem nele. Mais algumas opções aqui você pode ver a tela de perfil aqui. usuário toca no ícone de ilustração Bubba. Eles chegam a um site de compras bobo aqui e podem acessar a qualquer momento para o checkout e, em seguida, começar a entrar no fluxo de trabalho de checkout. Alguns outros exemplos aqui para um dos aplicativos e atualmente trabalhando. E você pode ver o telefone. Vamos apertar as quatro opções de abas. E quando chegamos a um tablet, podemos espaçar isso para se adequar aos imóveis que temos para tablet. A razão pela qual eles funcionam tão bem é que eles são colocados no imóvel mais tocável em dispositivos móveis. Se você estiver usando uma mão, se você é canhoto, toda a área verde do seu dispositivo móvel é facilmente tocável e você não precisa esticar ou não é difícil de conseguir. Se você estiver na mão direita. Como a maioria dos usuários , isso é tudo. O verde é ótimo, natural, fácil de usar, fácil de passar. Então eles são colocados com cerca de 80% dentro de um espaço natural, 80 a 90% para um usuário tocar dependendo da mão esquerda ou da mão direita. E então esta área aqui em cima é difícil se você estiver onde essas caixas cinza aqui, isso é uma área difícil, mas alguns dos telefones maiores que usamos nossa mão esquerda. Então, se eu for destro, estou segurando este telefone aqui. Usaremos nossa mão esquerda para fechar as coisas aqui. Então, se você tivesse um botão X aqui, é melhor colocar seu botão x aqui. Faça um pouco x. ok, legal. Portanto, é melhor ter seu botão x aqui em dispositivos móveis. Então aqui. A razão é que, na verdade, é bastante confortável tirar este x com a outra mão. Então você está segurando o telefone com mão direita e pressiona com o dedo ou o polegar com a mão esquerda no topo aqui. Vamos entrar em algumas coisas e não fazer o bom uso da Barra de Tabulação, mas praticamente siga esse padrão aqui e você estará pronto para ir. Vamos entrar mais no que fazer e não fazer. Então, novamente, use sua barra de abas 45 destinos ou cinco ícones são guias, no máximo. E mantenha os desenhos muito simples como este exemplo que estou mostrando aqui com esta casa detalhada assim. Isso é tão complexo quanto você quer obter algo mais do que isso. É muito complicado. Então, a coisa a evitar é não usar mais de cinco destinos. Há seis guias e destinos aqui. São todos muito apertados. E quando você cria um aplicativo da Apple, você precisa enviá-lo para a App Store e a Apple analisará seu aplicativo. E se não se adequar às diretrizes da interface do usuário, eles realmente negarão que você inicie seu aplicativo na App Store. E quais são suas políticas diretrizes rígidas é que essas barras de tabulação têm apenas cinco destinos e não seis ou sete. Então, deixe claro qual é o passo ativo, o passo que o usuário está nas coisas que você vê em casa aqui temos esse pequeno ponto laranja, e também tornamos a casa muito mais escura na cor. E os estados padrão aqui desses ícones, o perfil e a análise. Você pode ver como esses são um pouco mais cinza. E a cor mais escura, fonte mais ousada e o pequeno ponto laranja ajudam. Você pode ver este aqui. O, o, Embora a casa seja ousada aqui e temos um contorno mais preto mais espesso para o ícone da casa. Ainda não está claro o suficiente em que passo os usuários em qual seção do aplicativo o usuário está? Estamos no da esquerda. Se você apertar os olhos e olhar, você pode ver a casa realmente aparecer aqui. Também. Lembre-se de usar ícones consistentes, não misturar ícones preenchidos ou traçados. Você pode ver o do lado direito aqui. Temos uma linguagem visual inconsistente aqui mostrando um ícone preenchido para o perfil em um ícone de traçado aqui para casa. Mais uma vez, queremos ser consistentes e ser uniformizados com nossa linguagem visual. Portanto, as práticas recomendadas, use ícones preenchidos e somente ícones preenchidos são usados. Ícones acariciados e usam apenas ícones traçados, mas não misture os dois. Mas aqui está o kicker. Você pode usar um ícone preenchido para o estado ativo. Novamente, eles são todos traçados quando seu estado padrão. Você pode ver o padrão aqui para perfil e um padrão para análise aqui. Mas quando o usuário toca neles, preenchemos esta seção da página analisada. Também preenchemos esta seção do perfil com nossa marca. Temos uma marca de cor laranja. Você pode ver como você pode usá-lo para ajudar ainda mais e formar o estado ativo do seu aplicativo. E ajuda a trazer um pouco de marca e um pouco de sabor para os ícones também. Nunca adicione um botão na barra de navegação. Eles são para fins de destino, não para ações. E, em seguida, nunca use uma opção de guia como a casa aqui. Como se você tivesse apenas uma opção, não precisa de uma barra de guias. Não há necessidade de navegar. Use textos pequenos, mas use um bom espaçamento entre letras no texto pequeno. Portanto, os pequenos textos que você pode usar são de cerca de dez pixels. Você pode ir todos os bonés. Use espaçamento entre letras de 1,5 pixels. Ou você pode fazer 12 pixels. O que eu tenho aqui tout pixels altos, altura, todos em letras minúsculas, mas ambos têm espaçamento entre letras de 1,5 pixels. O espaço do espaçamento entre letras é o espaço entre as letras aqui. Esses tipos de espaçamento. Você quer um pouco de MIP, espaçamento extra entre letras para o texto pequeno só porque facilita a leitura. E você não vai acabar com suas letras sendo muito apertadas juntas. Vou mostrar-lhe aqui assim. Como se isso fosse muito apertado. Isso provavelmente é muito espaçamento entre letras. E assim como tínhamos, estava bem. Certo, legal. E então nunca use duas palavras. Você pode ver compras, casa aqui diminuiu para duas palavras, abarcou duas linhas ou texto grande. Então você pode ver que esse texto é muito grande. Só parece cavalinho. Não parece liso, não parece moderno. E estes são, principalmente, destinados a ser peças de navegação e não devem ser muito pesadas como no peso visual. Porque você quer que o usuário veja o conteúdo que essas guias abrigam e quatro e um informe versus algo que se destaca realmente forte assim. Tudo bem, vamos passar para a barra de abas, nossas barras de título. Portanto, uma barra de título fornece uma maneira confiável de orientar os usuários por meio de um aplicativo. E uma barra de título exibe informações e ações relacionadas à tela atual. E também permanece fixo, o que significa que nem sempre fica no topo, mesmo quando o usuário passa ou percorre. Eles geralmente são emparelhados com uma barra de guias em aplicativos móveis ou tablets. Então, o mais comum, você verá um sistema assim, onde você tem o título aqui. Você tem uma área para ação à esquerda, uma área para ação à direita. E então temos a barra de abas que acabamos de falar aqui na parte inferior. Você verá em um dos aplicativos mais populares é o instagram. E eles usam uma combinação de uma barra de título e uma barra de guias. Então eles têm a barra de abas aqui. Eles também usam a técnica de um ícone preenchido para o estado ativo e o pequeno ponto aqui para o estado ativo, o estado em que o usuário está ligado. E então eles usam a barra de título para o logotipo e alguns na página inicial de nível muito aparente. E eles usaram o lado direito para elementos de ação. Mas você pode ver aqui quando o usuário tocar em um nível pai, essa seria uma tela de nível pai. uma tela de nível infantil, ainda mantemos a barra de abas, mas usamos mais uma barra de título tradicional aqui onde você tem os Bulldogs franceses aqui no meio como o título e a parte de trás botão para voltar para esta página inicial. E então temos o menu de três pontos aqui mais para configurações relacionadas a esta página. E olhe para aqueles cachorrinhos fofos. Olhe para este pequeno aqui. Certo, legal. Adoro esse tipo. Eu tenho um desses cães. O nome dela é mastigável. Sou um grande fã. Aqui está o colapso. Esta área aqui onde você vê a bateria, seu tempo e sua conectividade Wi-Fi, que é chamada de barra de status. E este é um, um iOS ou Apple, android tem uma versão dele. Eles também são chamados de barra de status. Eles parecem um pouco diferentes para Android versus iOS. Você pode ver os dois aqui. Este é o Android, aqui é a Apple. O detalhamento é principalmente a seção superior esquerda aqui. Isso é usado principalmente para o botão Voltar ou para um ícone de menu. A seção do meio aqui é para o título para dispositivos Android, o título pode estar alinhado à esquerda. Eu prefiro que eles estejam no meio, mas depende do, se você estiver projetando um aplicativo para Android versus Apple, eles têm dois tipos diferentes de experiência do usuário e usuário diretrizes de interface, e falarei com as duas em toda a aula. Você pode fazer esta seção aqui com a barra de status na parte superior da barra de título na mesma cor. Tenho cerca de 50 a 80 pixels de altura. E, novamente, essa área certa é um ótimo lugar para ações. Então você meio que tem esse título. Ele fornece contextos e localização para o usuário. Você tem o botão Voltar que permite que o usuário navegue de volta para onde eles eram. E então você tem itens de ação no canto superior direito que se baseiam nos contextos que o usuário está vendo. Você também pode ter botões aqui em cima. Você pode ter cancelamentos, salvo a beleza deste é que os botões são muito parecidos sempre em seu rosto. Se você estiver percorrendo um site, os botões estão sempre lá, eles permanecem fixos onde conversamos com as barras de abas. Não queremos nenhum botão em nossos sistemas de toque, mas podemos tê-los na barra de título. Estas são quatro ações muito importantes aqui, como salvar ou cancelar visualizadores, colocar algumas informações e com base em suas configurações. Ou queríamos que esses botões não se perdessem. Para um preenchimento muito moderno. Eu pessoalmente gosto de pequenos textos, todos em letras maiúsculas com muito espaçamento entre letras. Você pode ver o exemplo aqui. À esquerda, você tem o título, novamente, todos os maiúsculas. E você pode ver o da direita. Estou usando 12.1212 pixels de altura, todas as maiúsculas com espaçamento entre letras de 2,5 pixels. E isso só faz com que o aplicativo pareça muito mais moderno como, Bem, vamos fazer isso agora com este texto aqui. Se eu selecioná-lo, dei muito espaçamento entre letras aqui. Faz com que o aplicativo pareça um pouco mais elegante, faz com que pareça um pouco mais moderno. E o que queremos fazer é evitar algo muito apertado como estamos acontecendo aqui. Muito apertado como este é apenas 0. Isso é padrão. Para mim, isso é muito apertado. Precisamos fazer isso respirar um pouco mais. Uma pequena dica profissional para você lá. Ok, então barras de maré na Apple, eles têm dois tipos diferentes. Eles têm um título padrão aqui que tem o, o que acabamos de falar, uma ação à direita, botão Voltar à esquerda e o título da página que você está olhando no meio. E eles têm um título de texto grande, que é o título na parte superior se move abaixo do botão Voltar. E, novamente, nada muda com o item de ação. E isso ocupa mais imóveis de tela em comparação com o da esquerda. Depende apenas do aplicativo e, às vezes, do dispositivo Apple permitirá que você defina títulos grandes dentro do sistema operacional. Digamos que, para um pouco mais velhos, seus olhos não são tão bons. É o que chamamos de recurso de acessibilidade. E ajuda as pessoas que não conseguem ver pequenos textos a conseguirem ler esses pouco mais facilmente para eles. A diferença aqui entre o Android à esquerda e a maçã, também conhecida como iOS à direita, é praticamente a mesma coisa. É só que o título geralmente será centralizado para produtos Apple. E então, no Android, eles deixarão alinhá-lo aqui. O mesmo tipo de negócio quando se trata item de ação é principalmente eles seguem o mesmo paradigma em que você tem itens de ação no canto superior direito da barra de abas. É, os títulos vão para a esquerda versus meio aqui. Gosto do meio porque nos permite utilizar esse espaço aqui para qualquer botão traseiro ou esse tipo de navegação. Normalmente, gosto de estilizar onde você tem os itens de ação do botão Voltar aqui e um título no início ou no meio. E não importa, você ainda pode projetar um aplicativo para Android. E ainda pode ter o título aqui no centro do botão Voltar, os elementos de ação à direita, e está totalmente bem. Tudo bem, outra coisa que você pode fazer aqui que é bem arrumada como novamente, a casca do título sempre permanece fixa. que significa que, à medida que o usuário desliza para baixo em um aplicativo para celular ou tablet, a barra de título não vai a lugar nenhum. Mas você pode fazer esse truque onde, como usuário, estou deslizando para baixo, nosso deslizamento para cima. E então estou empurrando o conteúdo para cima, o que significa que estou interessado. Quero dar uma olhada em mais desta seção, o que esta seção tem a oferecer. Quando isso acontecer, você pode realmente mover a barra de título em uma posição, você verá ela desaparecer. E então, quando eu voltar para baixo, ou seja, talvez eu queira navegar para fora desta seção, você verá a barra de título reaparecer com base nessa interação. Você verá que o airbnb usa isso em seu aplicativo móvel ou em seu site na Web, seu site na Web bem como quando você acessa dispositivos móveis ou tablets. E vou te mostrar uma pequena prévia aqui. Você pode vê-lo. Aqui está a barra de título deles no topo. Isso é que eles adicionaram alguns filtros no título também. E eles têm a barra de abas aqui na parte inferior. Você pode tocar entre como risco, login, desejos, suas estadias. Quando eu deslizo para cima ou role para baixo, você vê como a barra de título foi embora e eles removerão a barra de abas também. Então, quando você desliza de volta para baixo, você verá que ele aparece quando você deslizar para cima. Tudo bem, então estou deslizando para baixo. Mais uma vez. A ideia aqui é que você está interessado, você sabe que sua ação está informando ao site que você está mais interessado no conteúdo agora, quando eu deslizo para cima, sua ação pode ser relevante para, Oh, você precisa fazer algo com esse conteúdo ou navegar para fora desta tela? Você pode ver como essas respostas, então eles estão dizendo, ok, aqui está, aqui está o seu tablet. Vamos dar-lhe essa barra de abas. Aqui está o seu celular. Vamos dar-lhe essa barra de abas. Mas você vê quando vamos para a Web, eles não usam a barra de guias. A barra de abas não é um padrão de webbed. É um padrão de celular e tablet. Tudo bem, legal. Então, a última coisa a ser analisada antes de entrarmos em algumas coisas e não fazer é que a barra de título pode realmente mudar e mostrar ações com base na entrada do usuário. Portanto, temos uma barra de título de navegação padrão aqui. E o que acontece é que quando o usuário toca em uma dessas fotos, a barra de navegação muda e daremos ações com base nessa interação do usuário. Eles grampearam uma foto. Agora, a barra de abas mudando de contextos, desculpe, a barra de título mudando de contextos para uma barra de título orientada a ação. Então, ele está avisando que você tem um selecionado e está dando opções que você poderia fazer. Você pode excluir este, você pode enviá-lo. E então você tem o menu de transbordamento, que também é chamado de menu kebab sheesh ou menu kebab aqui, que apenas abriga mais ações relacionadas a isso também. É assim que você pode usá-lo do ponto de vista da interação e não apenas tê-lo estritamente para comunicação , contextos e localização, mas você pode tê-lo orientado para a ação. Lembre-se de resumir, a maioria dos aplicativos que utilizam a barra de abas na parte inferior, barra de título na parte superior, é um padrão de design comum. Agora vamos pegar alguns fazer e não fazer. Seu título para uma barra de abas deve ser curto o suficiente para caber no espaço. Ele é como FAQs. E então não faça o título muito longo que ele tenha duas elipses dos três pequenos pontos aqui. título deve ser curto o suficiente para caber no espaço novamente. E então, novamente. Não deixe o título II longo que ele tenha que entrar em duas linhas eclipsando, ou duas linhas aqui. Coloque as ações ajustadas o suficiente aqui na barra de título como três a quatro no máximo, cinco é meio que empurrá-la. Você vê seis aqui é demais. E se você tem um título longo, ele simplesmente não fluirá com as ações aqui. Três é o seu número mágico. Tenha cuidado com a altura, especialmente quando isso for consertado. Isso vai levar imóveis à medida que um usuário passa pelo seu aplicativo, você também pode ter uma barra de abas aqui no canto inferior direito. Então você está, você está, você está limitando seu conteúdo visível aqui apenas por esta seção aqui. Portanto, tenha cuidado com a altura desta barra e você não quer ou para sua barra de título e não quer que ela seja muito apertada, muito alta que novamente, restringe o conteúdo abaixo e não lhe dá espaço suficiente para esse conteúdo. Lá vamos nós. Há barras de tabulação e barras de maré. Vejo você no próximo vídeo onde cobriremos acordeões e abas. Vejo você lá. 12. Acorde e guias: Tudo bem, vamos falar sobre acordeões e guias. O menu Acordeão é uma lista verticalmente empilhada de cabeçalhos que podem ser clicados, tocados, para revelar ou ocultar detalhes importantes de uma seção. O termo acordeão vem do instrumento musical no qual a função primária é expandir e contrair. Então foi daí que conseguimos isso. É um menu que se expande para mostrar informações e, em seguida, contrai para ocultar informações. Você o verá usar para perguntas frequentes semelhantes, onde a pergunta é o cabeçalho ou o título e, em seguida, você a abre e verá as respostas para essas perguntas. Você o verá para listagens de eventos em que o evento é o cabeçalho. E então você tocará e ele se expandirá e mostrará os detalhes desse evento. Usamos recentemente em um aplicativo de carro onde você pode abrir o acordeão para ver complementos e selecionar o tipo de complementos que você queria dizer para estéreo ou rems ou o interior de um carro. Eles se pareciam com isso. Este é o estado padrão em que contém as informações do nível pai. Você tem. Os cabeçalhos aqui. À medida que um usuário toca nele, nós nos certificamos de destacar o cabeçalho para que o usuário saiba a que o nível de informação filho pertence ou se relaciona. E também a seta aqui, ele vai 180 graus para transmitir ainda mais que esse cabeçalho está aberto. Novamente, temos o estado padrão, temos o estado ativo. E a função realmente importante de um acordeão é que quando o usuário toca no Wi-Fi é lento, o que acontece é que fecha o título que está atualmente aberto, aberto e, em seguida, revela a criança informações de nível no título em que o usuário tinha acabado de tocar ou clicar. Ele fecha, paga minha conta, paga minha conta vai para o estado padrão e no Wi-Fi é lento, vai para o estado ativo e revela as informações de nível infantil. Com base nesse nível pai. Os prós e contras para eles são o processo que ajuda os usuários a encontrar conteúdo que eles estão procurando apenas categorizando cabeçalhos. Eles podem simplesmente passar por todos os cabeçalhos, encontrar o que procuram e abri-lo. Isso facilita a varredura dessas informações de nível pai e, novamente, mergulhar mais fundo nas informações de nível filho. E é uma ferramenta útil quando você tem muito conteúdo. E você quer ocultar determinado conteúdo, tornando o conjunto de conteúdo mais digerível de relance. E então o usuário pode decidir em qual deles eles querem mergulhar mais fundo. O golpe é tentar não usá-los para mais de dez opções porque eles pulam muito e tentam não ter muita informação de nível filho que faça com que o próximo cabeçalho fique abaixo da reunião de dobra, abaixo da área de visualização que o usuário está analisando, então ele não pode ver a opção de nível pai. Se você tem muitas opções de nível infantil que empurram tudo, todos os outros pais para baixo. E o usuário tem que ir muito para baixo para encontrar outro nível pai, ou ele tem que tocar de volta no cabeçalho do nível pai aqui. Portanto, se o usuário tocar novamente, pague minha conta novamente, ela fechará. Então pague minha conta aqui, abra, toque em pagar minha conta aqui fecha também. Mas se você tiver muitas informações de nível pai ou desculpa, informações de nível filho, ela empurra todos esses cabeçalhos para baixo da dobra assim. Ao abrir e fechar cabeçalhos diferentes, eles tendem a saltar e não permanecer consistentes no local. E essa é a vantagem falar com você sobre guias. À medida que as guias não pulam, elas permanecem em posição quando o usuário toca nelas. Mas acordeões, você sabe, como você, enquanto você está olhando para pagar minha conta e você toca em Wi-Fi é lento, fecha, paga minha conta e Wi-Fi salta aqui para que eles saltem nesse sentido. Você também pode usar botões mais em vez das setas. E, em seguida, no estado ativo, os botões do botão mais vão para menos. Você também pode usá-los em combinação com caixas de seleção. Você pode ver aqui que temos recursos técnicos que você toca. Na verdade, estamos mostrando um número, então você selecionou 0, temos quatro opções. O usuário pode tocar facilmente em C, as quatro opções que ele deseja. Temos as caixas de seleção aqui à direita primeiro com o preço baseado em cada recurso. E eles podem selecionar qualquer um desses recursos que temos que também aumenta o número aqui de duas de quatro opções. Basta ter esse nível paralelo que o usuário possa ver. Eles podem precisar. Não faríamos disso uma cor diferente. Nós faríamos isso algo como azul, assim. Mas, no nível dos pais, eles podem ver quantas atualizações já selecionaram com base em recursos técnicos ou upgrades de áudio ou alto-falante. vamos conseguir 20 gêmeos, estou dizendo. Tudo bem, legal. Portanto, lembre-se de manter o conteúdo do nível infantil. Esse é o conteúdo interno relacionado ao nível pai. Mantenha esse conteúdo curto e doce. Então lembre-se, não use, evite usar muito conteúdo de nível infantil. Você pode ver como se eu disse pagar minha conta e eu abrir isso, eu sou tipo, whoa, isso é muito. É aí que, se você tiver isso de acordo, não é o melhor mecanismo. Você pode querer apenas levar o usuário para uma página separada. Ou eu tenho um vídeo aqui sobre modais e gavetas. E esta seria uma opção perfeita para mostrar uma fila de tarefas, apenas pega todo o imóvel e o usuário pode fechar de volta e acabar aqui. Se você tiver esse problema, esse não é o melhor padrão para isso. Se você tiver muitas informações sobre filhos, esse não é o melhor padrão para isso. Eu vi isso uma vez e isso é super estranho. Não coloque um acordeão dentro de acordeões. Como os acordeões não deveriam ter um nível de pai, filho e neto. É só pai e filho. Então eu vi isso uma vez e foi super estranho e ele saltou por aí. Eu fiquei realmente perdido em qual deles estava aberto, qual deles estava fechado? Então, novamente, não note acordeões dentro do próprio acordeão. Então lembre-se, se um usuário tocar em outra opção, feche a que já estava aberta. Não deixe o usuário abrir mais de uma opção por vez. Então também certifique-se de ter distinções claras entre os cabeçalhos. Você pode ver aqui nós usamos as linhas desta aqui e ver essas pequenas linhas aqui, essas linhas cinzentas, elas ajudam a dar as seções. Então, quando você não tem essas seções e abre o acordeão, é difícil ver onde as informações de nível filho terminam e onde o próximo título pai entra. Isso é acordeão. Então, vamos falar sobre guias. As guias são uma das formas mais comuns apresentar seções de categorias. E eles permitem que um usuário clique e toque em cada categoria, veja a alteração de conteúdo com base em sua seleção. Novamente, eles são muito semelhantes à barra de abas sobre a qual falamos. Eles apenas aparecem na parte superior dos sites e geralmente não aparecem na parte inferior se eles se calarem em um botão na parte inferior ou você precisar de navegação inferior, então vá usar as regras que pertencem a a Barra de guias. São chamadas de guias porque a origem dele se relaciona de volta ao gabinete de arquivos do escritório. E você pode notar que as guias se destacam como essas informações do nível pai. E então você pode mergulhar neles, abri-los e ver que eles são informações relevantes de nível filho aqui para que você possa ver como isso remonta a essa arquitetura de informações Falei sobre o último vídeo. Eles são comumente usados para menus de pedidos de alimentos. Você usa guias para café da manhã, almoço, deserto ou diferentes tipos de categorias de alimentos, como comida ou pizza chinesa, hambúrgueres italianos. Eles são ótimos para painéis, são ótimos para ferramentas analíticas. Barras de navegação em dispositivos Android as usam muito. Resultados de pesquisa do Google, posso pensar em todas as imagens, etc. Muitos, muitos, muitos casos de uso para guias. Eles são muito mais comuns que acordeões. Pode ver abas para dispositivos móveis, novamente, barra de abas deve ser sempre corrigida e, na parte superior, nunca colocá-las na parte inferior. Porque se você for usá-los na parte inferior, vá pegar uma barra de guias e use esse conjunto de regras. Há um conjunto diferente de regras aplicadas a barras de tabulação e, em seguida, apenas guias. Você pode usar até cinco opções no máximo, sem deslizar horizontalmente, o que significa que o usuário em um tablet ou dispositivo de telefone pode deslizar horizontalmente diferentes guias. Essas são realmente as distinções claras entre uma barra de abas e guias é que as barras de abas estão na parte inferior e as barras de abas nunca têm deslizamento horizontal. Existem apenas cinco opções, máximo e guias. Eles podem viver sempre no topo de um site, e eles podem ter deslizamento horizontal, o que significa que eles podem ter mais de uma opção. Mas eles geralmente ficam no topo porque são configurações globais lá novamente, semelhante aos destinos. E você pode ter muito mais cinco com deslizamento horizontal. Você pode ver aqui que temos a barra de título na parte superior com o logotipo e nosso menu de perfil aqui. Em seguida, temos um menu secundário da barra de abas na parte superior, tem 90 pixels de altura. Temos os textos que todos são maiúsculas aqui, 11 pixels de altura com espaçamento de letras de dois pixels novamente, então tudo limita um pouco de espaçamento entre letras. Você pode ver como isso funciona como um usuário em que acabei de tocar. E eu pude ver que o item não é conteúdo relacionado ao item dois aqui. E se eu tocar de volta para um, degustar de volta para um, se eu tocar em três, me leva de volta para três. Aqui estão alguns exemplos de guias para a web. Temos mais de cinco opções aqui, desde que nos encaixemos na web de acordo. E, novamente, o usuário pode acessar essas guias diferentes. Esse tipo de imita essa estrutura de arquivos do gabinete. Quando você pensa sobre esse tipo de informação, isso é semelhante ao em que você está clicando em guias diferentes para revelar as informações do nível pai. E, aparentemente, as informações podem ter botões, texto e fotos, ilustrações e ícones. Aqui está uma navegação no estilo de guia superior. Você pode usar isso para a web. Em seguida, você tem uma navegação de guia de nível lateral que pode ser usada para a Web, mas você pode usá-la apenas para tablet. Mas não temos o suficiente com imóveis para dispositivos móveis. Para isso. Se este fosse um dispositivo móvel, você só está olhando para algo como tanto imobiliário, certo? Então, eles estão melhor para dispositivos web e tablet. E se você clicar no item dois aqui, ele abre o item dois e você pode ver a ideia clicada no item um vai para o item um. Ok, vamos dar uma olhada no deslizamento horizontal. Então você pode ver aqui que temos um sistema de guias na parte superior que tem mais de três opções aqui, na verdade, não sabemos quantas opções elas são. Mas fazemos uma técnica pouco explícita é que queremos uma das opções, diga esta opção para aqui ser cortada para a direita. O que isso faz é que isso é transporte. Ele transmite ao usuário que há mais opções ocultas para ele ir e deslizar. Onde se você tivesse, onde eram apenas as três opções e elas estavam perfeitamente espaçadas aqui, assim. Isso não transmite deslizamento horizontal. Então nós sempre queremos cortar um desses fora apenas para dar aquela dica visual que ei, usuário na opção número quatro e eu estou aqui, Venha, venha me buscar. Tipo de coisa. Lembre-se, esse deslizamento horizontal só deve ser usado para tablets e dispositivos móveis. Nunca use rolagem horizontal para web. Ninguém quer rolar horizontalmente com a barra de navegação na web como essa é demais. A menos que você esteja fazendo uma planilha, se você estiver projetando um sistema em um dispositivo desktop que seja uma planilha, então sim, você pode usar a rolagem horizontal, mas não aqui. Exemplo do aplicativo que estou trabalhando atualmente aqui. Você pode ver, você pode ver as guias aqui, dia, mês e ano. Você pode deslizar horizontalmente para obter mais opções. E novamente, nós intencionalmente fizemos este ciclo de fatura um para a direita apenas para informar ao usuário que há mais aqui que você pode deslizar. Novamente, eles permanecem em posição. Você pode ir para o mês, você pode ir para o ano e ver o quão fácil e suave você pode fazer a transição deles. Doordash tem o mesmo exemplo aqui, então tem as guias aqui. Se você tocar, puxar e empurrar, à direita, você verá mais da guia. Exemplos entram e estão cortando um pouco dos presentes. E vou mostrar a vocês que isso é o que parece no site móvel deles. Um pouco de corte acontecendo aqui. Você pode ver o mesmo sistema aqui usado para web, mas eles não fazem rolagem horizontal. Eles te dão essas pequenas flechas e permitirão que você vá e volte. Ainda está cortando alguns desses tópicos aqui nessas guias. Mas é assim que funciona. E se você entrar em Presentes, ele informará todo o conteúdo relacionado ao presente. Você pode ver como isso funciona. E depois, voltando agora, isso está em um dispositivo móvel, você seria capaz de fazê-lo na web. Mas se disser no meu dispositivo móvel, eu seria capaz de deslizar essas categorias, olhando como keith, isso é esse pequeno pairar. Veja que todos eles têm pequenas ilustrações. Super fofo. Vamos entrar em algumas práticas recomendadas para guias. Sempre pegue toda a largura. Mesmo se você tiver dois itens, pegue toda a largura. Não faça exatamente como uma largura proporcional para dispositivos móveis, como este espaço vazio aqui. Nunca faça uma guia. Se você tiver uma guia, você não precisa. Como se tivesse apenas um nível de informação, você não precisa de uma guia, assim como se livrar dela. Você usa o deslizamento horizontal em guias móveis. Se você mantê-lo na parte superior e nunca colocar o deslizamento horizontal na parte inferior aqui. E a razão pela qual é muito estranho o polegar passar e deslizar esses itens diferentes aqui. E se você quiser, apenas dê uma chance, vá ao seu telefone e apenas com os polegares comece a deslizar para a esquerda e dói como ele se tornasse estranho depois de algum tempo. Como nossos dedos estão mais adaptados para deslizar para cima e para baixo e não para a esquerda e para a direita. Certo, legal. Isso foi acordeões e guias em poucas palavras, e espero que você tenha gostado disso, o veja nas dicas de ferramentas e sombras no próximo vídeo. 13. Dicas de ferramentas e sombras: Tudo bem, Bem-vindo ao próximo tópico em que vamos falar sobre dicas de ferramentas e sombras. Dicas de ferramentas. É uma mensagem aditiva afirmativa e útil que aparece quando um usuário interage com um elemento ou um conteúdo. E as dicas de ferramentas geralmente são iniciadas com um clique do mouse ou toque em um dispositivo móvel. E novamente, eles são informativos. Eles não deveriam ser instruções. Eles devem ser apenas um pouco de informações adicionais se um usuário quiser descobrir um pouco mais sobre um conteúdo específico que ele está vendo. Eles se pareciam com isso. Digamos que você tenha, aqui está um exemplo de um exemplo de ícone de ponto de interrogação em que você tem o número CVE e se os usuários não sabem qual número CVE está em seu cartão de crédito, eles podem passar o mouse ou tocar este ícone. E então isso lhe daria um pouco de informação sobre qual é o número CVE. E novamente, se você fizer isso passar o mouse, lembre-se de que você pode clicar fora disso quando r, Se você clicar nisso, você pode clicar fora dele para fechá-lo. Se estiver no mouse, isso fechará automaticamente com o mouse se afastando. E, em seguida, para dispositivos móveis, você pode passar o mouse para a web. E então, para dispositivos móveis, faça com que um usuário toque nele para abri-lo e ele toque nele, depois ele fecha. Você também pode usar o outro comum, que é um ícone de informações. Em vez de uma pergunta que ícone de informações, mesmo tipo de princípio aqui esta pequena dica de ferramenta aparece e novamente, esta é a dica de ferramenta. É essa pequena caixinha aqui que é a dica de ferramenta geralmente tem uma pequena seta apontando para alguma coisa, mas você não precisa ter isso. Mas é novamente, uma pequena informação aditiva. Você pode usá-lo para esclarecer um exemplo de ação aqui. Portanto, se você tiver opções de envio ou botão que pode não ser tão claro para o usuário quando ele passa o mouse lá, ele lhe dá um texto um pouco mais descritivo do que esse botão faz. Você pode fazer o mesmo para ícones. Você tem esse ícone aqui, isso aparece. Mas lembre-se se essa é sua principal maneira de educar um usuário sobre o que essas ações fazem, e essa experiência do usuário vai viver em tablets e produtos móveis do que isso não é, isso não é bom o suficiente porque não há como passar o mouse em produtos móveis e tablets também. Então, é melhor adicionar algum texto aqui para dizer duplicado versus apenas um ícone. Se for esse o caso. Se for apenas um aplicativo da Web, então sim, você pode fazer algo assim e utilizar o mouse para dar isso. Vou abrir meu e-mail rapidamente e você pode escrever alguns dos e-mails para mim. Só estou brincando. Você pode ver como no Google eles fazem isso. Como o que é essa pequena pergunta? Oh, é suporte. O que é esse pequeno ícone? Oh, são configurações. O que é isso? Oh, é o Google Apps. Eles fizeram a mesma coisa aqui por isso também. Novamente, quando você, quando você usa uma dica de ferramenta e não tem certeza com base nas informações com as quais está trabalhando. Se você precisar de uma dica de ferramenta, basta perguntar a si mesmo, como olhar para essas informações e ir, é essa informação que você deseja colocar em uma dica de ferramenta necessária ou importante para o usuário conclua sua tarefa. Se for sim, mostre as informações. Não o esconda em uma dica de ferramenta. Se não for, não é necessário, é apenas texto útil ou conteúdo útil, então sim, você pode colocá-lo em uma dica de ferramenta. Eu usei este em um produto para editar, desempenho muito bom, é que você tem esse conjunto de campos de formulário aqui. Do estado padrão. São apenas essas caixas cinzentas. Mas assim que um usuário passa o mouse em um desses campos de formulário, essas informações mudam e baseadas no formulário que você está preenchendo. Se você não tiver certeza do número de um medidor elétrico em sua casa. Depois de chegar a isso e passar o mouse o mouse ou você está clicando neste campo de formulário. Esta dica de ferramenta mudará para fornecer informações explícitas sobre o que é esse medidor elétrico. Uma pequena foto aqui, foi junto com ela para mostrar como encontrá-la. Isso é chamado de dica de ferramenta em linha, o que significa que ela aparece quando o usuário está em linha ou focado ou pairando sobre um desses elementos aqui. Tínhamos a mesma caixa aqui relacionada aos estados de serviço elétrico. Então, quando o usuário estava na data do serviço ou passou o mouse sobre esta seção, essa ferramenta apareceu ou essa dica de ferramenta apareceu para dar uma explicação do que era isso e o que isso o tipo de conteúdo foi. Eu adoro isso. Acho que essas são maneiras super inteligentes de fazer isso. E se você se lembrar do primeiro vídeo, falei sobre fazer apenas layouts de forma de uma coluna como este combina bem com o espaço vazio para um layout de uma coluna, um pouco mais complicado se estiver no celular. Plataformas móveis, mas para a web que somos realmente ótimos. Vamos entrar em algumas coisas e não se lembre, não coloque muito conteúdo. Demasiado. Deve ser apenas um pouco útil, como três ou quatro linhas de mensagens de texto, simplesmente não deveria ser como apenas uma frase. Lembre-se, não use hovers, sua principal ferramenta para comunicações. Especialmente se isso for viver em um desktop ou tablet ou produto móvel, adicione contextos se for para usuários móveis, como colocar a palavra duplicada aqui. E você também pode fazer a mesma coisa e se comunicar demais para a Web quando o usuário passar o mouse sobre isso. Não coloque informações importantes em uma dica de ferramenta. Se você está fazendo alguém colocar uma senha e houver requisitos de senha, não os tenha na dica de ferramenta melhor para fazê-lo aqui. Você também pode falhar o que chamamos de validação em linha, sobre o qual falei anteriormente. Você pode dar indicações em verde e vermelho se houver redigitando sua senha ou definindo uma senha aqui que esteja passando esses critérios. Estamos vendo que a senha não pode ser a senha antiga. Eles estavam dizendo: Oh, você parece que não colocou uma letra maiúscula, pelo menos uma letra minúscula. Você ficou bom. Você tem mais oito personagens. Você tem pelo menos duas letras e outra falha, precisamos de pelo menos um número para criar uma senha adequada, certo? Então você não quer isso escondido em uma dica de ferramenta. Essas são informações importantes para que o usuário conclua sua tarefa. Devemos expô-lo. Vamos passar por cima das sombras. A regra número um é não usar apenas uma sombra padrão, nunca. Seja qual for o estado padrão de sombra, não o use. Você tem que adicionar a ele. Então, aqui estão os passos. Você tem a sombra padrão aqui eu tenho este pequeno cartão com um pequeno ícone de sorvete fofo. Quero adicionar uma sombra padrão a isso. Bem aqui. Ele nos dará quatro pixels no eixo y. Então, para baixo e 0 no x, realmente nada sobre o x aqui, Blair vai ser quatro. Chegamos aqui com vinte e cinco por cento de opacidade. Então, o próximo passo aqui na etapa dois é adicionar mais ao eixo x e y. Então, demos 55 neste momento. Agora posso ver um pouco mais de sombra na linha vertical aqui no eixo x. O próximo passo, o mais importante é adicionar um pouco de desfoque. Passamos de quatro para 35 pixels de desfoque nele. E você pode ver as sombras muito afiadas lá, é muito duro. Como eu me lembro no vídeo dos botões, estávamos dizendo olhando para sombras de botões e não seja muito duro com as sombras como se houvesse suave e sutil. Então você pode ir a milha extra aqui. Você pode adicionar um pouco de cor à sombra. Eu geralmente gosto de usar um cinza azulado, não muito azul, não muito cinza, apenas bem no meio ali. Faremos com que isso pareça muito moderno. Muito limpo. Dá a você essa sombra bonita versus esse padrão de borda dura. Padrão aqui, começando a ficar um pouco melhor com o desfoque. E então é apenas o cinza sutil e agradável que só torna isso muito bom. Você também pode usar sombras internas. Isso ajuda a criar profundidade aqui para que você não possa ver nenhuma sombra interna aqui. E agora que temos a sombra interior para isso, esse círculo de progresso ou círculo de torta aqui. E cria um conjunto de profundidade que isso está sendo preenchido. Essa sombra interna ajuda muito e são os mesmos princípios com a sombra interna. Não é muito duro. Novamente, deve ser, dar um pouco, dar um pouco de borrão, alguma cor agradável. Alguns fazem e não fazem. E então eu vou, na verdade, vou fazer algumas sombras rápidas para você, para que você possa ver, não coloque sombra no texto. Se você tem uma foto aqui e você está tipo, Oh cara, meu texto não lê, bem, não resolva isso colocando uma sombra. O que você precisa fazer é ajustar a foto para que você possa ver aqui, adicionamos uma sobreposição mais escura sobre a parte superior da foto e, em seguida, colocamos o texto em cima para que ela se destaque. Quando eu estava na escola de design por todos os anos em que estive lá, havia em São Francisco na Academy of Art University. Havia uma mulher chamada Mary Scott durante os quatro anos inteiros e todo o programa, mesmo que você fosse em um mestrado, ela disse mastigou e foi inflexível. Nunca gostaria de ver sombra em um texto nunca. E então foi engraçado porque nunca colocamos sombra em textos. E um dia eu tive meu primeiro emprego. Um dos diretores criativos vem porque eu faço esse texto aparecer, coloco uma bela sombra nele. Eu sou tipo, ok, legal. Então, novamente, trata-se de conhecer as regras, mas também se trata de saber quando quebrar essas regras. Mas uma regra muito difícil aqui que você poderia seguir é simplesmente não colocar, que você poderia seguir é simplesmente não colocar, não resolver textos sendo legíveis sobre uma foto com uma sombra como você tem que manipular a foto. Não torne suas sombras muito fortes. Como se isso fosse muito forte. Você pode ver o da direita. Este tem um sabor agradável e pouco sutil de uma sombra. O que é divertido é que você pode deixar a sombra mais escura nessa cor e opacidade no pairar. Lembre-se que a filosofia de um bom pairar é que ele ganha vida. É como se envolver comigo. Aqui você pode ver que esta é uma ótima técnica para uma bela sombra e depois ficaremos um pouco mais escuros. A cor, a opacidade para o passar o mouse. Ele realmente cria a sensação de profundidade em que essa coisa é um pouco mais alta do que a abaixo dela é a que está aqui. Então, novamente, bom, bom, sutil uso de um pairar lá. E, em seguida, normal. Não coloque muita cor na sombra. Como se isso fosse demais Como isso está tudo bem. Isso é demais. Não use essas arestas rígidas. Mantenha as bordas macias. Vamos seguir em frente e fazer uma sombra rápida. Vou copiar esse círculo aqui. Novamente, estamos tentando chegar a esse tipo de função aqui, mas vamos nos divertir um pouco. Temos o cartão branco que vou ferramenta chamada Figma. Terei alguns projetos no final dos vídeos que serão realizados e nós realmente construiremos alguns desses padrões de design que você também está vendo aqui. Mas antes de chegarmos lá, você pode ver como uma sombra funciona dentro da ferramenta figma. Vamos puxar isso um pouco. Ok, então vou adicionar um efeito aqui. E temos nossas gotas, sombra aqui. Aqui estão as variáveis. Então aqui está meu x, aqui está meu y novamente para querer fazer 55. Tudo bem, então temos nossos eixos x e y. Qual é a próxima coisa que você faz? O que fazemos de novo? Air e nós devemos fazer borrão. Ah, sim, isso mesmo, borrão. Vamos explodir essa coisa. 35. Só isso já parece muito bom. E, novamente, vamos adicionar um pouco de cinza azulado à sombra. Boom, lá vai você, isso é ótimo. O ótimo visual. Ashanti esgotou essas bordas um pouco. Isso parece bom. Vamos dar uma olhada na sombra interna. mesmo tipo de princípio aqui nós apenas adicionamos uma sombra, Omeka, sombra interior. A única diferença com as sombras internas que você quer um pouco, não tanto borrão. No entanto, o mesmo princípio. 55 aqui, as bordas duras ainda estão aparecendo. Nós só queremos suavizar essas bordas. Então, geralmente, como 15 será bom. Você não precisa ir para o tipo 35 porque o que acontece é que apenas preenche toda a forma. Apenas 15 é bom. vez, queremos fazer um pouco do azul. Você pode adicionar um pouco de cor aqui, se quiser também. Lá vai você. É uma bela sombra. Legal. Então, há dicas de ferramentas e sombras, e eu te vejo na próxima aula. Falaremos sobre miniaturas e carrosséis. Vejo você lá. 14. Miniaturas e Carousels: Tudo bem, bem-vindo à próxima aula. Vamos falar sobre miniaturas e carrosséis. miniaturas são bem simples lá, há pequenas imagens que dão ao usuário uma visão geral de várias imagens. É uma espécie de espreitadela do que vem a seguir. Eles também são geralmente emparelhados com uma imagem maior mestre. E quando o usuário clica e toca ou toca em uma miniatura, a imagem mestre será revelada aparecerá como a mesma imagem, o que estava na miniatura nesse ponto. Normalmente, você pode marcá-los como cerca de 100 pixels de altura por 100 pixels de largura. Eles são ótimos para mostrar fotos diferentes de produtos. Também ajuda a carregar imagens mais rapidamente, já que o navegador não precisa carregar todas as imagens em tamanho real, posso simplesmente carregar as pequenas miniaturas e carregar apenas uma imagem renderizada em tamanho real. Também é ótimo se os usuários quiserem. Ele permite que os usuários naveguem rapidamente por coleções de imagens. E isso é muito semelhante à biblioteca de fotos em seu dispositivo móvel. Estas são todas pequenas miniaturas aqui. Alguns fazem e não fazem. Novamente, a miniatura deve preencher o espaço do mesmo tamanho. E você pode ver aqueles aqui onde essas miniaturas não estão preenchendo o espaço. Eles são apenas eles podem ser imagens diferentes tamanhos de alguns podem ser horizontais. Formato de imagem, alguns podem ser como versões retrato ou paisagem. Você pode ver a paisagem desta aqui, o retrato deste. Mas, novamente, tudo isso deve preencher esse espaço. Então, dessa forma, você tem essa bela imagem de campo, você não tem esses estranhos espaçamentos brancos e inconsistentes. Você pode ver isso muito. Eu realmente gosto das miniaturas da Nike aqui. Lá. Você pode ter um pequeno vídeo desse cara mostrando seus sapatos aqui. E, novamente, você pode clicar nessas pequenas miniaturas à direita aqui, e elas aparecerão aqui. Muito legal. Acho muito bom trabalho de imagens mestres e miniaturas acontecendo aqui. Sou como se ele fosse o site. Vamos passar para carrosséis. Então, os carrosséis são, eles praticamente permitem que várias partes de conteúdo ocupem um único espaço. O usuário se envolve com uma apresentação, como eu gosto, como uma apresentação de slides. E às vezes um carrossel pode reproduzir automaticamente, o que realmente parece uma reprodução automática de uma apresentação em que cada parte do conteúdo se mostrará por um breve período de tempo. E, em seguida, outro conteúdo entrará pelo mesmo período de tempo e ele será carrossel por todo esse tipo de conteúdo. É por isso que é chamado de carrossel. É como se você fosse como se eu estivesse movendo carrossel com cavalos. Como um. Cada coisa joga de cada vez. Se você quisesse fazer um site como este onde você tem imagem aqui, imagem um, um texto de call to action. E então isso permanece por um período de tempo. E então outra imagem entra e você tem uma imagem para, outra imagem se torna uma imagem de você planeja fazer isso. Pare. Especialmente se esta for a imagem do herói de um site. Definitivamente não faça isso. Isso é uma espécie de anti-padrão para células de cuidados. Então, o que queremos é assim que um visitante chegar ao seu site, ele deve ser capaz de dizer o que é sua empresa. Isso significa ter uma única mensagem clara e um conteúdo fácil de entender. Se você estiver substituindo essa única mensagem ou conteúdo claro por várias ideias e mensagens, isso aumenta o risco de as pessoas realmente entenderem o que sua empresa faz. E pior, isso diminuirá suas taxas de conversão. Alguns fazem de. Você pode usá-lo quando as informações são simples e não exigem muito foco. Mais uma vez, nunca use-o para seções de heróis. Mas você pode ver como o usamos para um site aqui. Isso é o que temos agora para a seção de heróis. Nós temos isso aqui para você. É fácil e rápido personalizar seu livro, carregar seu livro e você pode clicar neles. Ele permanecerá assim que o usuário começar a clicar. Clique no modo agora. E eu acho que ele vai ficar por um tempo e depois voltará ao jogo automático. Sim, lá vai você. Então, novamente aqui, nós o usamos para serviços criativos. Você pode ver isso mostra ilustrações e edição de cópias e design de capa de livro e serviços como esse. Só para elogiar nossa comunicação aqui. Você pode usá-lo muito para um carrossel sem a reprodução automática, que é mais comum. E você dá ao usuário controle sobre ele. Isso é o que vai olhar. A Apple tem um bom lugar onde eles mostram seus AirPods aqui. E eles têm essa pequena paginação. Tenho uma conversa inteira sobre paginação. No final da aula, você pode conferir e falaremos sobre isso. Mas você vê que eu tenho uma seta para a direita. Posso dizer que há três seções diferentes neste carrossel. Cada três tem um deles tem três produtos. Então, suponho que haverá nove produtos totais com esta paginação. E eu posso voltar, posso ir em frente. Ei, olhe, só há um aqui. Mas, essencialmente, este é o carrossel. É sem que a reprodução automática dê controle ao usuário. Colas, isso é o que temos aqui. Dar que você pode combiná-lo com miniaturas é como você deseja acertar as miniaturas. E então você também tem o controle do usuário aqui, essas setas para ajudar a percorrer cada uma dessas miniaturas. É aqui que a reprodução automática é ótima. Se você entrar em serviços de televisão inteligente, eles têm carrosséis. Você verá essa imagem de herói aqui, a paginação. Haverá cinco desses. E isso será reproduzido automaticamente. Você meio que assiste à medida que essas novas séries entram. Tenha cuidado com sua reprodução automática, não deveria, não deve ser muito rápido. Apenas um tempo suficiente para o usuário conseguir o ponto. E então o próximo entra. Sim, esse padrão de design, embora não funcione, não funciona para sites, como o objetivo da comunicação, torna-se inconsistente porque continua ligando o usuário. Mas quando você está no Modo de navegação chegando à sua televisão e você quer brotar alguma coisa. É aqui que ajuda. É um bom padrão aqui. Certo, legal. Isso era miniaturas e carrosséis. Vejo você no próximo, falaremos sobre modais e caixas de luz. Vejo você lá. 15. Modais e caixas de luz: Tudo bem, vamos falar sobre modais e pop-ups. Um modal ou um pop-up é um elemento de janela que fica em cima de uma tela de aplicativo. E cria um modo que desativa a tela principal, como a tela dos pais, mas mantém o mainstream visível em segundo plano. Ao visualizar fora da janela modal, os usuários devem interagir com esse modal antes que possam retornar à tela principal ou à tela dos pais, clicando ou tocando fora do modal e fechando o modal. E, novamente, ele remonta à arquitetura básica da informação, certo? Onde você tem esse nível pai, que é a tela principal, e então você tem esse nível filho, que é o modal ou o pop-up. Seu principal valor é que ele permite um usuário visualize facilmente o contexto adicional, nosso conteúdo, sem perder o contexto da tela principal. Isso tem a ver muito com a localização. Como eles conseguem ver informações adicionais, mas não perdem o contexto de sua localização atual. O golpe dos modais é que eles podem ser muito intrusivos. E é garantido principalmente que seu usuário verá o modal, mas se certifica de usar para algo que é valioso e não publicitário. pop-ups de adição intrusivos que surgem do nada podem interromper o foco dos usuários e criar desconfiança em seu produto ou experiência do usuário. Deixe-me mostrar-lhe um aqui. Aqui está o tipo do que estamos falando. Eu estava neste site aqui apenas olhando ao redor, lendo artigos de notícias o dia todo e essa coisa aparece do nada para tutoriais em vídeo de histograma. Como não, sou bom em tutoriais do Instagram. É intrusivo, definitivamente fica lá. Tenho que interagir com isso. E vou ir em frente e fechá-lo e voltar ao meu material de leitura aqui. Vejo você mais tarde. Estou brincando. Ok, então isso é o que você quer evitar, esse tipo de modal de anúncio como aparecer. Achei isso engraçado também. Isso foi como, Aqui está o Sol e aqui está mercúrio. E então aqui está meu dedo. E aqui está o botão Adicionar roupas, como todos vimos nesses modelos, o anúncio, mas o botão fechar é assim, tão pequeno que você mal consegue encaixar meu dedo nele. Mas isso foi meio engraçado. Tudo bem, então vamos falar sobre quando usar um modal aqui. Por isso, é ótimo quando chama a atenção do usuário. Então use-o quando quiser interromper a tarefa atual do usuário e chamar a atenção total do usuário por algo super importante. Digamos que você precise de entrada do usuário. Esta é a maneira de obter informações de seu usuário, como neste exemplo onde você está pronto para comprar um item, você clica no botão Checkout e, em seguida, em um celular, aparece um modal pedindo que você registre com seus campos de e-mail, senha e formulário. Ele não perde a localização do usuário. Eles não entraram em outra navegação ou destino no site. Você provavelmente também vai querer adicionar como, não tem uma inscrição na conta ou solicitação de convidados contínuos também. É ótimo se você quiser mostrar informações adicionais sem perder o contexto da página principal. Então, um exemplo aqui é mostrar imagens maiores, clicar em uma imagem e vê-la maior ou clicar em um vídeo, dizendo que o vídeo está mostrando informações adicionais, como Saiba mais ou FAQs Perguntas frequentes. Você pode mostrar informações que não estão essencialmente diretamente relacionadas à página principal. Coisas como notificação ou oportunidades de marketing, como convidar cinco pessoas e ganhar US $500 ou conteúdo de boas-vindas ou até mesmo compartilhar funcionalidades. Em seguida, você pode mostrar, use o modelo para mostrar informações diretamente relacionadas à página pai. Coisas como uma mensagem de sucesso ou erros de carregamento. Ou se você clicar em algo que é impactante do usuário, podemos lançar um Ru com certeza. E eles podem escolher sim ou não, ou você tem algo que acabou de acontecer em nosso banco de dados enquanto você estava tentando editar algo ou fazer algo, podemos lançar um modal para apenas dizer, você sabe, algo deu errado. Talvez seja necessário atualizar ou fechar o modal e começar, começar de novo porque nosso centro de banco recebeu as informações, coisas assim. Alguns exemplos aqui, vou mostrar a vocês o exemplo ao vivo para este modal aqui. Isso é para um site em que trabalhamos, e isso é muito legal. Como usuário, você pode clicar em, estas são para baterias domésticas. Essas baterias carregarão sua casa e fornecerão energia para suas casas. Como usuário, você pode passar e clicar em que tipo de aparelho você gostaria que essa bateria ligasse se estivesse em uma falta de energia. E então você pode ver isso mostra quantas horas uma bateria seria capaz carregar sua casa se você tivesse todos esses aparelhos ligados. Como estamos educando um usuário sobre o uso de energia, uso doméstico e eletrodomésticos e quanta energia eles usam. Adicionamos este pequeno gráfico de energia aqui que abre um modal. Esse modal é uma informação de nível filho relacionada ao pai. E isso mostra informações sobre que tipo de aparelhos causou mais energia usada, e o que isso equivale a também como uma conta de eletricidade mais alta. Então, se você estiver executando um C durante todo o dia ou carros elétricos e luzes, eles contribuem muito para um maior consumo de energia. Novamente, o usuário pode simplesmente fechar isso. Volte para a página principal. Então esse é um bom caso de uso para um modal. Outro no aplicativo em que trabalhamos está neste laboratório móvel. Se este for um aplicativo que monitora seu sistema solar em sua casa. E se algo der errado no sistema solar, sinalizamos um pequeno aviso aqui que você pode ver como um ponto de exclamação e uma pequena bolha de alto-falante. E se o usuário tocar nesse modal, nós apenas avisamos que algo aconteceu e eles devem entrar em contato conosco para que possamos analisar o problema. Saiba também que é bom colocar o x para dispositivos móveis no canto superior esquerdo, especialmente para pessoas destras porque você estará segurando seu telefone aqui com a mão direita e você pode use sua mão esquerda para controlar isso facilmente, para fechar esse x. Esse é um posicionamento bastante comum para o x. Se você estiver em um dispositivo móvel e você pode ver este em ação aqui. Bem aqui. O usuário clica neste ponto de exclamação aqui. Você verá o modal entrar em jogo e então você pode fechá-lo aqui também. Um exemplo tão simples disso, como boop, algo deu errado. Tente novamente. E você também pode usar para dispositivos móveis e em tablet e web, você pode fazer o que é chamado de modal de tela cheia onde ele leva toda a tela. E assim o usuário não vê a página pai em segundo plano, ele só vê o X. E se você notou, veja se você tem algum dispositivo, as telas de notificação nativas, esses são modais como este é um modal também. Aqui está um exemplo de algo que não está necessariamente vinculado à página principal. Temos um sistema de referência e um dos aplicativos para os quais gerenciamos e projetamos. E se você puder encaminhar as pessoas para o serviço, e se alguém realmente se inscrever e concluir o projeto, você ganhará US $500. E, portanto, esse modal aparecerá a qualquer momento durante a experiência do usuário. Ele também aciona um e-mail para um usuário, mas se ele puder entrar do e-mail, mas também aparecerá se você estiver apenas no aplicativo fazendo alguma coisa, isso simplesmente disparará e será intrusivo. Mas veja como isso é um ótimo intrusivo. É como se você tivesse acabado de ganhar $500, como ir em frente e reivindicar que seus ganhos iriam enviar-lhe um cheque de 500 dólares. Este é um exemplo aqui de uma RU. Claro. Se você excluir uma conta aqui, removerá muitas informações vinculadas a essa conta. E nós disparamos isso para remover acidentes em algo impactante. Se você é um usuário e você foi clicar em algo e excluí-lo. Vamos dar mais um passo à frente em algo relacionado à conta e apenas informá-los, como você tem certeza de que realmente deseja excluir essa conta? Há muito trabalho, muitos relatórios vinculados a isso. E novamente, se foi um acidente, eles podem cancelar. Se for uma exclusão, eles podem excluir. Aqui está uma vinculada à página de nível pai. Aqui está editando as informações no nível da sua conta. Você pressiona o botão de edição mostra um modal, insira as informações da conta. E isso é ótimo porque sua bifurcação em seu usuário, você está dizendo que atualizará essas informações ou cancelará ou fechará. Não há outra maneira de sair disso. Você não pode estar no meio do caminho e depois ir para outro lugar. Como se você tivesse que terminar ou completar. E essa é a coisa boa desses modelos para, como realmente faz, bifurcar seu usuário para visualizar esse modal e, em seguida, concluir a tarefa ou fechar a tarefa. Eu pessoalmente adoro modais de pesquisa em tela cheia. Se você clicar no ícone Pesquisar aqui neste site, ele abrirá um modal de pesquisa em tela cheia. O fundo é um pouco mais escuro. É cerca de 90% de opacidade. Você ainda mal consegue ver a tela dos pais por trás disso. Mas é super liso porque parece que você está, você está engajando dentro da interface, como se estivesse, você está na interface e não parece pequeno ou fraco, na verdade parece super moderno e liso. E, à medida que você está digitando no campo de pesquisa aqui, você verá os resultados da pesquisa. Novamente, você pode fechar isso com o x ou encontrar seus resultados de pesquisa como Erin Anderson aqui e ir até o site Aaron Anderson. Eu pessoalmente amo isso. Acho que são ótimos e ótimos casos de uso para modais de tela cheia. Vamos entrar em algumas coisas e não fazer. Então, novamente, um modal de cada vez. E esta é uma regra muito difícil para aplicativos não fazem modais em cima de modais como este aqui. Como se você tivesse um modal aqui e você tem um modal aqui, isso não é bom, isso não é Bueno. Está tudo bem. Se você tem um sistema operacional como eu estou no meu computador, eu poderia entrar no meu localizador. Isso é tecnicamente um modal. Eu tenho outro como isso está bem quando você está fazendo um sistema operacional como um computador como este. Mas, para experiências de software e usuário, evite isso. Outro que eu vi aqui está no meu pedido de crédito. E eu vou olhar para o meu relatório de crédito e recebo notificações como sua pontuação de crédito caiu sem motivo aparente, que eu sou como, O que eu fiz? Eu até faço qualquer coisa e isso cai. Mas você pode ver o que acontece aqui. Diz ver sua nova pontuação e ela abre um modal. Este é um modal. E eu clico no X e ele me fecha e volta. E se eu adicionar toque nessa pequena coisa de três pontos, veja o que acontece. Ele abre outro modal em cima de um modal. Agora estou olhando para dois Xs e tipo, bem, qual deles é o x? Então é isso que você quer evitar esse modal na interação modal. Lembre-se de que os modais são ótimos, eles só fazem o nível dos pais e do filho. Você não pode jogar outro modal em cima disso para fazer um nível neto de arquitetura de informação. Mas eles estão muito bem para esse relacionamento de nível pai e filho. Como 70 ou 90% de opacidade para a cor de fundo aqui, você pode ver e evitar fazer como uma opacidade de fundo muito baixa, como você quer que o usuário esteja focado na tarefa em questão. Nesse caso, estou dando, nos dando feedback no aplicativo. Dessa forma Não há foco, há, não há capacidade suficiente. Há muita capacidade na cor e no fundo aqui, e há muita coisa acontecendo. Não está criando o foco que precisamos para um modal. Também modal deve caber na tela, principalmente para desktop. E você pode rolar dentro desse modal. Como se eu pudesse colocar meu mouse e percorrer essas informações. Eu não faço o modal muito tempo para que ele saia da janela aqui, certo? Como se você quiser se encaixar diretamente na janela do seu aplicativo de desktop. Certo, vamos dar uma olhada nas caixas de luz. Caixas de luz são praticamente a mesma interação que um modal, as diferenças que a mesa de luz se refere a uma galeria de fotos. É tudo que você precisa saber. Os mesmos princípios se aplicam aos modais, bem como às miniaturas que se aplicam à mesa de luz, certo? Então deixe-me mostrar um exemplo disso. Então, se você se lembra, temos esse lado em que trabalhei e construí. Temos essas miniaturas, certo? Então, as mesmas regras que se aplicam a essas miniaturas falam que aplicamos a essas miniaturas. E quando você vê a mesa de luz entrar, você pode ver que é praticamente um modal. E a diferença é que ele tem mais algumas funcionalidades criadas dentro dele. Ainda consigo fechar essa imagem. É uma imagem bonita aqui. Mas eu posso navegar para frente e para trás através desses modais. E o lightbox é praticamente isso, Esse é o termo usado apenas para o modal. É como criar uma caixa para ver sua imagem. E o fundo ainda é visível da galeria aqui, mas é essencialmente a caixa saindo da luz. Você está vendo sua imagem e depois a coloca volta na galeria de fotos aqui fechando-a. Quando você usa isso? Use se você tiver muitas fotos para caber em uma página, novamente, elas são ótimas para mostrar fotos de produtos diferentes, como um site de comércio eletrônico ou uma biblioteca de fotos e aplicativos que se integram com a biblioteca de fotos da câmera. Este site aqui era mais para um fotógrafo. E você pode ir conferir aqui. Aqui está o URL também se você precisar. Sim. Então lembre-se dentro do modal lightbox, pode haver descrições como acabamos de ver. Você pode contar o arremessador aqui, oito de 25. Você não pode ter uma descrição também. Não é obrigatório. Você pode se mover para frente e para trás nos botões. Você pode fechá-lo. Lembre-se de que os botões também têm um estado de focalização. Você pode ver aqui. Você pode passar por essas fotos. Certo, legal. Se isso fosse modais e pop-ups, e eu te vejo no próximo vídeo. Falaremos sobre menus e gavetas. 16. Parte 1 Menu e gavetas: Tudo bem, vamos falar sobre menus e gavetas. Menus são uma lista de conteúdo, categorias ou recursos normalmente apresentados como um conjunto de links dentro da barra de navegação, entraram na web ou podem ser agrupados em um ícone como um hambúrguer ou um kebab quando ligado dispositivos móveis e tablets, mostrarei vários exemplos desses. Os menus são padrão UX de alta prioridade porque ajudam os usuários a navegar por toda a experiência do usuário do serviço ou aplicativo. E, novamente, você pode ter os recursos mais valiosos, conteúdo mais atraente, é incrível, mas é inútil se as pessoas não conseguirem encontrá-lo. Menus ou fonte lá. Tão importante que você os encontre em todos os sites, cada software que você irá contrariar. É muito importante entender como esses menus funcionam. Não apenas para software e aplicativos, mas para sites responsivos. É aí que eles realmente são úteis, e é aí que essa combinação de menu e gavetas realmente são úteis é para sites responsivos que eles têm um certo olhar para eles na web, e, em seguida, eles respondem de acordo conteúdo e suas necessidades de navegação para aplicativos úmidos, móveis e tablets. Deixe-me mostrar um exemplo rápido disso. Então aqui está o site da Nike, aqui está o menu deles para dispositivos de desktop da Web. E você pode ver que isso tudo vai mudar quando eu for para o tablet. E você pode ver que eles usam o menu de hambúrguer aqui. E então, quando vou até aqui para um dispositivo móvel, eles usam o menu de hambúrguer para abrigar esse tipo de informação. Esse é um site responsivo. E, novamente, a gaveta é a mais comumente usada para como os diferentes elementos, como links de menu. Mas também pode ser usado para ajudar outros, como estão outros tipos de informações e UI e conteúdo relacionados ao aplicativo. Novamente, a gaveta é essa armazena todos os links. Você tem o ícone Menu aqui, e então você tem essa gaveta que desliza assim. E para essa gaveta, é ótimo abrigar navegação, menus e links, mas também pode ser usado como uma interação separada para mostrar informações de nível filho com base qualquer conteúdo ou ação que um usuário tenha feito em seu site. Vou mostrar exemplos de como usar a gaveta. Mas você verá isso muito como um combo. O menu e o combo de gaveta. Novamente, essa gaveta se refere de volta às gavetas da cômoda. A gaveta da cômoda aqui abriga informações que você pode abrir e fechá-la. É assim que vêm as origens da gaveta. Aqui está nosso menu de navegação aqui para web, temos nossas quatro opções para nosso usuário. Temos nossa barra de pesquisa. Então você pode ver o mesmo estilo de navegação aqui. Para aplicativos móveis onde colocamos o menu ou o menu de hambúrguer. E abrigamos todos os links e necessidades de navegação dentro desse menu de hambúrguer. Aqui está o exemplo em que os menus no canto superior direito. E vou mostrar alguns exemplos aqui, aqui em um segundo como isso funciona. Aqui está um exemplo do menu de hambúrguer à esquerda. Então aqui está o exemplo da gaveta de tela cheia que entra no lugar que o usuário pode X sair a qualquer momento. Vamos dar uma olhada nesses muito rápido. Aqui está o que está à esquerda. Você pode ver esse slide de perto. Você toca fora disso fecha. Aqui está o que está à direita. E toque em. Este vem da direita. Se seus menus estiverem à direita, certifique-se de que ele venha da direita. Isso está à esquerda. Garante que a gaveta venha da esquerda. Também temos a tela cheia aqui. Então você pode ver como ele leva a tela cheia. Então teremos que ter um x aqui porque temos que ter uma maneira de nosso usuário sair. Eles também podem tocar na tela inicial. Isso também faria isso. Ok, então vamos dar uma olhada em muito desse menu, navegação e gavetas. Eles têm muito a ver com arquitetura da informação e entender quais níveis de informação você está projetando e quais níveis de navegação seus usuários precisarão passar em todo o seu site, seu aplicativo web ou em seu aplicativo para celular e tablet também. Você pode ver aqui com o site da Nike aqui é que eles têm esse nível de pai. Novos lançamentos, homens, mulheres, crianças e venda. Essas são as informações de nível pai. Então você pode ver o menu suspenso aparecer e isso tem o nível da criança e o nível do neto. Isso também se refere, como chamamos de mega menu. É como um enorme menu repleto de muitas coisas. Você pode ver que o nível pai era as novas versões, o nível filho era novo e apresentado. E então você tem o nível de neto, todas as coisas que se relacionam com o novo, recurso e destaque. Você pode ver como isso funciona para um dispositivo móvel. Eles têm o ícone de hambúrguer, abre as informações do nível dos pais. E então, se você tocar em novos lançamentos que vão para as informações de nível filho e, em seguida, elas entrarão nas informações do nível do neto. Eles estão usando uma gaveta, mas você pode ver quão flexível essa gaveta é. Ele pode ter vários níveis de conteúdo dentro dessa gaveta. Você também pode clicar ou tocar no logotipo. Em muitos casos, será usado para permitir que seu usuário volte para a tela inicial ou para a tela principal. Vamos dar uma olhada nisso ao vivo. Então, antes de entrarmos no próximo exemplo, aqui está seu nível de pai, netos, nível de filho, e você pode ver como isso muda com base na capacidade responsiva ou adaptativa deste site. Então agora estamos em um modo tablet, e agora vamos entrar no não-modal. Você clica aqui em novos lançamentos. Agora estou no nível da criança e agora conheci esse nível de neto e posso voltar, voltar e fechar. Tudo bem, tão eficaz, simples, mas eficaz. Você pode ver outro exemplo aqui de um menu que é comumente usado, que é o menu da gaveta correta. Você pode ver na Web que não escondemos todas essas informações dentro de um menu de hambúrguer. Nós o expomos. E o mesmo no tablet. Está exposto aqui à esquerda. E então, quando chegamos à visualização móvel, usamos o menu, o hambúrguer, ícone do menu e a combinação de gaveta, certo? Então, se tivermos os imóveis na web, não mostre o menu de hambúrguer, como mostrar todas as informações porque ele retorna a essa declaração novamente, o usuário affordance. Quanto menos cliques e toques forem necessários para alguém fazer algo e concluir sua tarefa em seu site, melhor. Vamos dar uma olhada na Shopify como exemplo. Então você pode ver o menu deles aqui à esquerda, vou expor para a web, você chega ao tablet. Nada muda. Então entramos na visualização móvel e aqui está a combinação de gavetas do menu de hambúrguer, certo? Legal. Obrigado. Pegue a foto. Vamos dar uma olhada em diferentes tipos de menus. Você pode ver que aqui está no Android tem dois menus muito comuns. Tem o menu de hambúrguer. E, novamente, essas casas de hambúrgueres dominavam navegação como links de navegação no nível dos pais. Então você tem o que é chamado kebab ou menu de estouro. E esse menu geralmente é destinado a abrigar as ações que não se encaixam nesta barra de título aqui. Assim, como ações, como essa barra de título fica cada vez menor e menor, o estouro, e é exatamente por isso que eles chamam de estouro. Quaisquer que sejam os menus que transbordam ficam escondidos nisso. Novamente, essa interação com kebab aqui é comum no Android, mas não é muito comum em interfaces Apple ou produtos Apple. Alguns outros comuns apenas recebem o menu de hambúrguer porque parece um hambúrguer. Temos o menu do Bento aqui. Esta parece uma caixa bento, e isso geralmente é o show diferentes aplicativos que você, como empresa, tem. Como se você tivesse o Google, você tem muitos aplicativos diferentes como o Drive, o Google e o calendário. Então, isso mostra aplicativos diferentes dentro de um serviço. Você tem o menu kebab porque isso parece um navio Khabbab. E então você tem o menu de bola de carne aqui porque parece bolas de carne. E eles geralmente são mais para configurações e no menu kebab é mais para estouro. Seções também podem ser usadas para configurações. Já vi o menu de estouro ser usado para configurações também. 17. Parte 2 Menu e gavetas: Você pode ver como esse tipo de menu bento box é usado em diferentes tipos de produtos para mostrar seus aplicativos, certo? Então você verá isso um Microsoft Outlook. Se você clicar no menu do Bento aqui, ele mostra todos os seus produtos que eles oferecem, Outlook e PowerPoint, velho PowerPoint e Word e Excel e algumas das outras coisas lá. E, em seguida, o mesmo com o Google que tem a caixa do Bento aqui no topo. E se você clicar no menu da caixa do Bento tipo de coisa, ele mostrará todos os outros aplicativos. Eles têm o YouTube e o calendário e algumas outras coisas. Quero mostrar-lhe uma dica muito valiosa que você pode. Você pode usar gavetas para isso. Você pode abrigar mais do que apenas opções de menu e gavetas quando estiver pensando em um site responsivo. Gavetas ou seu melhor amigo. Eles são super, super ótimos. Eles são realmente úteis. E vou apontar por que aqui uma vez que eu lhe der este exemplo. Então, aqui está um exemplo em que temos uma interface de mapa e o usuário toca neste marco específico aqui. E abrimos uma gaveta. Mais detalhes relacionados ao que o usuário está apenas vendo. Eles pressionam o X e os leva de volta ao mapa. Agora vamos dar uma olhada nessa interação de um iPad. Mesmo negócio aqui que o usuário toca no mapa aqui, vê essa informação relativa aparece. É a mesma interação que a web. É preciso talvez um pouco mais imobiliário do que seria na web. Esta gaveta aqui, e você pode fechar, ainda funciona. É uma ótima interação e mantém o usuário focado. E então você pode ver como a mesma interação funciona para o case móvel. Você toca neste item aqui no mapa e ele pega o imóvel em tela cheia, você pode fechar com o X e voltar. O benefício desse sistema usando gavetas é que esse modelo de interação funciona da mesma forma e é a mesma funcionalidade, seja desktop, tablet ou dispositivos móveis. Então, o que isso significa é que você pode projetar isso uma vez e funciona para todos os três tipos diferentes de plataformas. Esse modelo de interação funciona muito bem para tudo. Vamos dar uma olhada em ação aqui em um produto real. Aqui está um produto solar em que estamos trabalhando. Estes são seus clientes, estes são seus painéis solares aqui em azul. E se você quiser aprender um pouco mais sobre seu painel, ouvir ou ver a produção desse painel solar, toque nele. Nós o destacamos e vomitamos uma gaveta. E a gaveta aqui tem o x, você pode fechá-lo. E então você vê informações relacionadas a essa área específica de um painel específico aqui e painel solar que eles aproveitaram. Agora vamos dar uma olhada nisso no iPad. Mesma funcionalidade. Toque no painel solar, pegue a gaveta. Você pode deslizar nesta gaveta, você pode ver mais informações relacionadas a ela. Então você pode ver a mesma coisa aqui. Sendo usado para o aplicativo móvel. Toque na gaveta, dá a gaveta de tela cheia modal de tela cheia aqui e fecha-a. Tudo bem, então esse é um ótimo relacionamento de nível pai-filho. E o benefício também é que as gavetas, ao contrário dos modais, você não pode ter um modal. Em um modal. As gavetas podem ter mais informações dentro dela. Você pode ver este aqui, estamos usando acordeões nesta gaveta aqui para nossas perguntas frequentes são perguntas frequentes. Então esses são toques, isso que abre a resposta para essa pergunta, certo? Então, temos três níveis de arquitetura da informação. Temos a tela de nível pai, temos a tela de nível de criança para esta gaveta e temos a tela do nível do neto para o acordeão dentro desta gaveta aqui. Você pode ver que é um modelo de interação e interação muito útil e imóveis de interface do usuário para diferentes tipos de necessidades de arquitetura como essa. Vamos entrar nas melhores práticas aqui. Portanto, lembre-se de colocar os menus no topo porque eles se encaixam em um nível global ou mestre de arquitetura de informações. Estes, esse menu navega por todo o site para que eles exigem o espaço que geralmente devem estar no topo. Além disso, os usuários estão acostumados a vê-los à esquerda ou à direita das barras de navegação. E, em seguida, diga aos usuários onde eles estão quando eles entram em diferentes partes da sua experiência do usuário. Você pode usar a seção de título na barra de título aqui para mostrar e destacar que as seções do menu estão ativadas. Na área de trabalho. Temos um estado ativo para o menu. Estes são os bens domésticos. E então, para dispositivos móveis, você verá que o usuário entra no menu, pode tocar em produtos domésticos e usaremos o título aqui para lembrá-lo de onde eles estão. Lembre-se de manter o menu fixo como se ficassem em um só lugar quando o usuário rola. Facilita para o usuário ir e sair de qualquer situação ou destino em que esteja e não precisa ir até a página. Então não se esqueça de como seu usuário voltará para a tela inicial. Se você não tem casa na gaveta e o usuário entrar em jóias semelhantes aqui. Como eles voltaram para a tela inicial? Você não tem mais o logotipo porque substituímos o logotipo pelo título. Lembre-se desse tipo de interação aqui. E se você precisar adicionar a tela inicial, adicione a tela inicial e leve o usuário volta. Você poderia usar isso. Lembre-se daquela combinação de gaveta de menu, combinação suspensa de menu aqui para atender às necessidades de navegação pai-filho e neto. Você poderia usar a mesma coisa para dispositivos móveis que vimos. Mais uma vez, pense nesses mega menus aqui, como bens domésticos como pais, você tem travesseiros, arte, estampas, relógios, relógios de parede, cobertores como estes se relacionam os bens domésticos como o nível da criança. E então estamos em travesseiros aqui vemos um monte de travesseiros. Aquele nível de neto. Vimos o mesmo para a Nike. Para sites responsivos, se você tiver apenas três ou quatro links de menu para seu dispositivo móvel. Aqui temos como roupas, jóias e artigos para casa. Podemos alternar para uma barra de guias secundária em vez do ícone do menu de hambúrguer. E novamente, isso tem a ver com pagar polegadas. Como esses menus estão agora expostos e o usuário pode com um toque, navegar facilmente por todos esses três itens de menu ou de destino em vez de ter que voltar a um menu, selecionar o item e o menu para fora. Se você tiver apenas 234 tops destes, você pode usar a barra de abas, desde que ela se encaixe. Ok, então se você tem para a web e você tem o imobiliário expõe todas as suas necessidades de navegação. Não há necessidade de um menu, um ícone de hambúrguer na web aqui. Você pode ver se você tem o imóvel. Se você tem o imóvel, vá tirar todos esses itens do menu de hambúrguer e colocá-los aqui para que o usuário não precisa clicar várias vezes nessas necessidades de navegação. Quando esses menus de hambúrguer saíram pela primeira vez. Isso acontece quando o iPhone acabou de ser lançado. Houve muito empurrão com a comunidade da comunidade UX sobre o uso desses menus de hambúrguer. E o que era é que não era que eles não são super valiosos. Você verá, você pode vê-los obviamente em todos os serviços mais comuns e grandes aplicativos que usamos, era que eles estavam sendo usados de forma errada assim. As pessoas estavam apenas usando-as quando obviamente tinham o imóvel para todas as informações aqui. Então é assim que tudo o que veio e a reação. Mas ainda há um papel essencial para navegar e destinar pessoas em todo o seu site. Por último, mas não menos importante, lembre-se se você tem um item de menu à esquerda, abra a gaveta da direita ou da esquerda também, onde as portas estão abertas, onde quer que o menu esteja. Não faça isso. Onde os menus à esquerda e a gaveta entram da direita. Certo, legal. Isso é cardápios e gavetas. Vejo você todo o próximo vídeo. Vamos cobrir magos, pão ralado e paginação. 18. Wizards: Bem-vindo a magos, pão ralado e paginação. Vou dividir este em três vídeos diferentes. Faremos um vídeo para cada um desses tópicos. Então, vamos começar com a Wizards. Um Assistente de formulários é um padrão de design da interface do usuário que permite que usuários não treinados ou novos atinjam uma meta por meio de uma série de etapas. E o usuário insere informações em cada etapa e, em seguida, passa para a próxima etapa até as conclusões. E os assistentes ajudam a separar o que poderia parecer uma tarefa longa e assustadora para concluir em pequenas etapas digeríveis. E estudos mostraram que, se você tornar a primeira etapa do assistente fácil de concluir, é mais provável que o usuário conclua todas as etapas em sua tarefa. Você pode ver aqui que temos o aplicativo de verificação de crédito aqui. Mais uma vez, facilitamos muito a etapa de revisão. Nós o adicionamos bem simples para a etapa de divulgação. E então fizemos a verdadeira carne aqui está na sua informação. Temos que colocar algumas informações para executar essa verificação de crédito. E também é bom tornar os últimos passos super fáceis também. Você não quer que as pessoas caiam quando chegam, elas já passaram por três etapas quando chegam ao último passo, se forem ainda mais informações do que poderiam, você pode arriscar o risco deles caindo naquele momento porque eles são como, eu só não quero continuar fazendo isso. O primeiro passo super fácil de tornar o último passo super fácil como a melhor abordagem aqui. Esta é uma interação muito boa, não só para romper longo processo assustador até as pequenas etapas do tamanho de uma mordida. Mas os assistentes também transmitem três coisas muito importantes que são fundamentais para a experiência do usuário. A primeira coisa é expectativa. Ele dá um alto nível de como todo o processo se parece, bem como quantas etapas existem. E dá à segunda parte a localização correta, enquanto o usuário, nessas etapas e a qualquer momento durante esse processo, também permite que eles vejam o tempo. Então, quantas etapas ou menos, ou progresso, quantas etapas você concluiu e quantas restam? Quando usá-los, use-os quando o usuário precisar executar uma tarefa ou uma meta que tenha muitas informações, ação ou entrada de dados. Novamente, essas tarefas são mais fáceis de alcançar dividindo esse processo em etapas menores e pequenas e simples. E um exemplo é como preencher informações fiscais que exigem muita informação. E essas informações devem ser agrupadas em diferentes categorias, seções como informações pessoais, informações empregador, informações financeiras. Nas etapas de confirmação lá. Use isso quando o usuário precisar de orientação, o usuário deseja atingir uma meta geral, mas pode não estar familiarizado com as etapas necessárias para alcançar cada uma dessas metas são informações. O exemplo fiscal é ótimo porque o imposto, há pessoas que todo o seu trabalho é fazer impostos das pessoas porque é complicado, certo? Portanto, essas são ótimas maneiras de dividir essa complexidade em etapas e guiar seu usuário em cada etapa sem sentir que você precisa saber tudo de uma só vez. Quando certas informações ou categorias de informações dependem umas das outras. Portanto, no caso, se as informações precisarem ser revisadas ou verificadas em cada etapa para receber um resultado final. Então isso é ótimo quando tivemos uma corrida para este modelo aqui à esquerda , onde tivemos que usar isso para uma verificação de crédito aqui. A razão pela qual dividimos isso em um assistente é que os usuários, antes mesmo de obtermos informações deles, eles precisam concordar com nossos termos e condições que usaremos suas informações para executar um cheque de crédito , acesse a agência de crédito e obtenha uma verificação de crédito de crédito para eles. Antes mesmo de obtermos as informações deles. Por lei, precisamos que eles concordem com estes termos. E, em segundo lugar, obtivemos as informações e , em seguida, a terceira é o resultado da verificação de crédito. Como eles na maioria das vezes são aprovados, mas às vezes eles são rejeitados. Você pode ver que a segunda parte aqui é quando a tivemos, enviar essas informações rapidamente para o nosso banco de dados, executar a verificação de crédito e devolver o resultado. Portanto, o terceiro passo depende da segunda etapa. Também há ótimos para fluxos de embarque a bordo, onde os usuários precisam inserir um conjunto de informações para começar a usar seu aplicativo, como nome de usuário ou escolha de perfil ou selecionar categorias de interesses, que tipo de coisa. Vamos dar uma olhada em etapas na criação de um bom assistente aqui. Então, a primeira coisa que você vai querer fazer é dividir todas as informações que você precisa para ter a entrada do usuário. E nosso seleto, vamos usar este exemplo de sorvete, como definitivamente sabemos que as pessoas querem, precisamos que as pessoas selecionem seu tamanho de sorvete uma colher para colher, três colheres de gelo sabores de creme. Aqui obtemos as páginas de chocolate, chocolate, pinup, estrada rochosa, depois informações de pagamento de reabilitação , endereço de entrega de nome, telefone ou número de cartão de crédito, datas de validade, número CVE e endereço de cobrança, certo, então isso praticamente concluirá alguns dos nossos fluxos de trabalho aqui. Ok, então você vai querer que ele encontre a ordem da hierarquia de informações que corresponde ao modelo mental atual do cliente. Isso é muito interessado. Portanto, o modelo mental é uma compreensão de como um usuário solicita ou organiza informações ou sistema. Na maioria das vezes, esse modelo vem como um artefato ou um resultado de fazer pesquisas com usuários. E assim, quando você pensa sorvete no sistema ou convenção atual e forma como as pessoas modelam mentais ou organizam informações de sorvete. Os usuários tendem a entrar e pedem tamanhos de sorvete primeiro. Qual é o tamanho? Eles não começam com coberturas. Então você pode ver essa ordem acontecendo agora. Você começa com o tamanho e depois faz dele os sabores. E então você pode obter o tamanho determina quantas colheres você obtém. E então o número de colheres determina quantos sabores você obterá. E então, com base nesses sabores, você pode querer certas coberturas. Você pode ver que esse é um modelo mental. É assim que seu cliente pensa ou organiza essas informações. E eu realmente bom livro aqui é, se você for para o design de Everyday Things de Don Norman aqui, ele fala muito sobre modelos mentais neste livro. E é super bom. Se você quiser realmente, se você estiver de qualquer maneira, fazer UX ou UI como esta é uma leitura fundamental aqui. Então, se você não leu, basta pegá-lo como um ótimo livro. Ele fala muito sobre portas, um dos meus capítulos favoritos e ele só vai, ele apenas enlouquece no design da porta e como você projeta alças para informar as pessoas como onde você abre uma porta que empurra ou puxa, isso depende do design da alça versus um sinal. Muito, muito interessante. Bom livro aqui, confira. Depois de ter seu modelo mental organizado. O próximo passo aqui é modelar a hierarquia de informações em categorias e combiná-las com as ordens e as etapas do modelo mental. Você pode ver este fluxograma de informações aqui temos os tamanhos de sorvete, temos nossos sabores, temos nossas coberturas e temos que pagar informações aqui. Assim, você pode ver esse tipo de Assistente saindo como etapa um, passo dois, etapa três, etapa quatro. Agora que você tem isso, você pode criar um protótipo de baixa fidelidade. Você pode começar a mergulhar um pouco mais fundo no conteúdo que você não precisaria, como imagens descrições e campos de formulário. E então você gostaria de testar isso com seus clientes para garantir que o conteúdo, o modelo mental, o fluxo de trabalho, tudo faça sentido e seja fácil de usar. Nós apenas colocamos um wireframe aqui. Você tem seu, seu assistente aqui, Tamanho, escolha seu tamanho. Colheres médias, pop over para sabores, acertar seus sabores, e então ele iria para coberturas. E, em seguida, pressione Next pressione o botão Voltar e, eventualmente, passe a poder encomendar vários dos seus tamanhos de sorvete ou produtos de sorvete aqui e depois finalizar a compra. Então, vamos detalhar o que faz um bom assistente aqui. Você pode ver a etapa concluída aqui permite que o usuário saiba o que está feito. A etapa laranja aqui permite que o usuário saiba em que passo ele está. O passo à frente aqui, é apenas cinza, que permite ao usuário saber quais etapas estão por vir. É realmente bom ter um título sob cada um desses, novamente, que defina a expectativa do que o usuário vai esperar e que tipo de informação virá a seguir. E, em seguida, cada um deve ter uma descrição ou um call to action para dizer ao usuário o que fazer durante esta etapa. Em seguida, um bom assistente também tem o botão Avançar permite que o usuário prossiga em frente. Ele permite que o usuário volte como um botão secundário. Se eles perderem algo ou precisam mudar algo que eles simplesmente não fizeram. Etapa um ou passo dois, eles podem voltar. E, em seguida, eles deixam o usuário cancelar. Então, câncer, tudo isso, tudo, se eles precisarem. Alguns fazem e não se lembram, mostram o progresso das etapas. Isso é bom. O transporte mostra o tempo e o progresso realizados, não mostrando as etapas de progresso aqui. Como se você estivesse em suas informações e você não sabe se acabou de concluí-las. Mostre bons estados visuais para etapas concluídas. E o passo ativo aqui, o passo por vir. Isso, até fizemos essa cor maior e mais brilhante. Você pode ver que estamos usando as caixas de seleção aqui para etapas concluídas e não há nada acontecendo para esta etapa e para o futuro. Apenas um pequeno ponto cinza. Evite isso. Como se não estivesse claro que passo em nenhum lugar em negrito isso e melhorando um pouco, mas seja mais impactante, mais intencional sobre isso. E então você não pode realmente ver esse tipo de progresso ou os fundamentos do que faz um bom assistente entre as coisas que haviam sido feitas. Obrigado pela etapa concluída em que você está, Etapas a serem concluídas. Basta lembrar que cada etapa deve ter a categoria de informações relacionadas a ela. Então, se você está dizendo seu nome ou suas informações aqui, tenha o nome, LastName. Não use cada etapa para obter informações específicas. Eu vi isso uma vez em que era como nome, e-mail, telefone, eu sou tipo, Bem, isso é tão fácil. Por que eu tenho que fazer isso em um assistente? Como se eu pudesse fazer tudo isso de uma só vez. Então esse é o objetivo disso é romper a longa tarefa assustadora e colocá-la em etapas em que , se for apenas nome, e-mail, número de telefone, aniversário, você não precisa de um assistente, como se fosse cumprido. Então deixe-me entrar nisso. Lembre-se de ter um botão Voltar que permite que você volte facilmente ao passado. Mas aqui está o kicker. Salve essas informações. Como se o usuário inserir informações e ele voltar um passo e avançar um passo para essa etapa em que estavam apenas. Não faça com que eles preencham essas informações novamente, salve isso e o que chamamos de front-end. Quando eles voltam para trás, fazem uma mudança, avançam novamente, essa informação ainda deve estar lá. O botão Voltar é um pouco importante porque se você deixar o usuário voltar ao navegador e , em seguida, ele avançar no aplicativo. Talvez não consigamos salvar essas informações que eles acabaram de armazenar. Certo, legal. Vamos. Vamos falar sobre migalhas de pão, mas vou fazer isso em outro vídeo, então te vejo no outro vídeo. 19. Breadcrumbs: Vamos falar sobre migalhas de pão. Breadcrumbs são uma pequena lista de links de navegação que ajudam o usuário a ver a estrutura hierárquica de um site a partir da página inicial. Essa maneira de navegar na estrutura do site é normalmente chamada de wayfinding. Eles são simplesmente se parecem com isso. Você tem o computador eletrônico doméstico e alto-falantes, e eu estaria olhando para alto-falantes no site. Eles são chamados de pão ralado porque imitam pequenos pedaços de pão que haviam sido deixados em sua mesa. E eles são realmente destinados a ser pequenos e nunca substituir a navegação de nível superior por eles, existem apenas níveis adicionais de navegação usados para ajudar o usuário a navegar em sites complexos muito grandes e aplicativos. Eles são super simples de projetar, pois não variam desse exemplo aqui que estou mostrando a você. Você o verá muito em grandes aplicativos de comércio eletrônico. Você o verá aqui na Amazon. Você verá aqui na Best Buy. E, novamente, eles mostram a estrutura de hierarquia da arquitetura de informações de um site. Você pode ver aqui que estou na Amazon agora e estou olhando para binóculos. E está me informando que os binóculos e olhar começam a partir de eletrônicos para casa e depois binóculos de câmera, binóculos. Mas se eu voltar para fotos da câmera aqui, deixe-me rolar para baixo e pegar outra delas aqui. Vamos dar uma olhada nos computadores aqui. Veja como isso muda, digamos, um monitor olhará para esse monitor. Vou encontrar um aqui e ele será atualizado. Apenas me dê um segundo. Deixe-me clicar em um desses. Ok, então você vê como está me avisando que estou olhando para monitores, mas veio de acessórios de computador e eletrônicos aqui. Não é que não está me mostrando minha história de onde eu aposto que está apenas me mostrando a arquitetura do site. Essa é a peça-chave para estes. Vamos falar um pouco sobre o uso e as melhores dicas para eles. Portanto, use apenas breadcrumbs para aplicativos de grandes sites com muitas informações e contato. Contato. Melhor para grandes sites de comércio eletrônico como acabamos de ver com a Amazon. Eles não são realmente destinados arquitetura de informações de nível pai, como um site de portfólio ou como um site básico da Mom and Pops star. As migalhas de pão, novamente nunca substituem essa navegação global. E as migalhas de pão devem exibir a localização atual e os sites. Mais uma vez, estrutura de hierarquia, não o histórico da sessão. É aí que acho que algumas pessoas entendem isso errado. Isso não mostra onde eu estive. Está apenas mostrando a estrutura do site. Se você mostrou o histórico de onde nosso compartimento de usuário e ele rapidamente vai ficar longo e confundir com muita repetição. Além disso, sempre inclua a página atual como o último item na trilha do breadcrumb. E isso não deve ser um link. Deve ficar assim. A trilha breadcrumb, que é a trilha que leva até a página atual em que você está. Todas essas páginas devem ser páginas de nível pai da estrutura da hierarquia, não páginas de nível neto. Estas são páginas de nível pai e a página que estou nos alto-falantes aqui, não há problema em mostrar ao neto ou conversar sobre a arquitetura de informações no nível do filho no breadcrumb. Assim, isso pode ficar muito granular, mas estes são feitos para ser o nível dos pais porque estão me mostrando onde esse filho mora ou neto mora em relação às informações do nível dos pais arquitetura. Novamente, a trilha do breadcrumb sempre deve começar com um link de volta para a página inicial ou para o nível mais alto, como se você estivesse em casa. Agora a Amazon aqui você pode ver que ela tem eletrônicos aqui. Você está procurando e procurando por eletrônicos. Então, ele está começando a partir da eletrônica aqui, não necessariamente a página inicial onde você pode ver Best Buy aqui tem a Best Buy como a página inicial. E está entrando nesse tipo, este é melhor. Na minha opinião, você sempre deve ter a página inicial no início. Mais uma vez. Então mostre uma boa transmissão de link , transporte, como mostrar ao usuário que você pode clicar nestes diferentes e não no que você está. Aqui não há transporte de links aqui. O transporte claro da etapa, a zona do usuário, você pode ver os alto-falantes aqui é um pouco mais escuro, ou o da direita, ainda não é um transporte de link claro, e não está claro qual deles eles usam é sobre isso. Deve estar sempre em uma linha. Não quebre a trilha do pão em duas linhas. Se você ficar sem espaço aqui, basta remover uma arquitetura de site de nível pai. Portanto, não precisamos de computadores aqui. Basta voltar para eletrônicos domésticos e alto-falantes. Muito simples, isso é pão ralado. Encontro você no próximo vídeo, vamos falar sobre paginação. Vejo você lá. 20. Paginação: Tudo bem, vamos falar sobre paginação. Portanto, a paginação é um componente de interface de usuário de navegação de página que ajuda os usuários a navegar por muitas informações e conteúdo que não podem ser exibidos em uma tela. E, portanto, esse método divide todo o conteúdo em várias páginas e apresenta conteúdo suficiente de maneira digerível limitada por tela. Há mais comumente usado para páginas de página de resultados de pesquisa para grandes sites de comércio eletrônico que têm muito conteúdo ou produto para oferecer. Usuário que deseja navegar e examinar esse tipo desses produtos e se envolver com esses produtos. E se você planeja usar um componente de paginação, então você deve ter uma função de pesquisa e também boas opções de filtragem para ajudar o usuário a reduzir o que está procurando. Eles se parecem com isso. Eles têm a lista de páginas que têm cada nível de conteúdo. Vou quebrar isso em um minuto. Alguns deles permitem que você pule à frente para uma página. Mas a questão é que ninguém quer passar por 22 páginas tentando encontrar o que precisam. Se você tiver uma boa pesquisa e boa filtragem, eles podem restringir essa lista e encontrar o que é necessário. Às vezes, as pessoas estão apenas comprando. Eu vou te mostrar No mesmo, neste mesmo vídeo, o que é chamado de rolagem infinita, que é praticamente o assassino de paginação. É como, não, você sabe, praticamente mata isso se você estiver comprando algo. Você verá isso também no Google. Se você pesquisar um site do Google e pode entrar em páginas diferentes aqui. E também você vai vê-lo bem simples assim, onde eles só têm flechas e os números. Aqui está um exemplo disso. Vou olhar para sapatos DC aqui. Vou dar uma olhada lá. Vamos dar uma olhada em seus homens escolhem aqui. Você pode ver lá paginação no topo aqui. Eles também o têm na parte inferior. Então eu posso ir para a segunda página aqui. Eu também posso fazer isso no topo. Aqui está essencialmente o colapso. Você sempre pode ver a página atual em que você está representada em azul aqui. Se você tiver um número para essa página futura ou um número um, aqui está a página de trás. As pequenas elipses, os três pontos aqui, não estão engajados. Ele não pode clicar nisso, mas só mostra que há pintar as páginas entre 522. Isso ajuda a dar ao usuário uma indicação de, uau, eu tenho muito o que cheirar para encontrar o que eu estou procurando. Novamente, você tem essas setas para frente para trás página, teclas, botões aqui. E então você tem esse formulário goto, que se você estiver tentando chegar à página 17, essa é uma maneira mais rápida de chegar lá. Basta entrar e colocar o número da página em que está, pressione Enter e, em seguida, ele passará para 17 aqui. Você verá que isso também é bastante comum, é a caixa de seleção ou a lista suspensa aqui. Isso lhe dará uma série da lista de conteúdo ou tipos de produto que estão sendo exibidos por página. Então você pode expandir isso de 15 para dizer 50. Isso mostrará os resultados. Quantos estão sendo exibidos no momento, temos de um a 15 e adicionamos seus resultados de pesquisa. Existem 324 produtos exibidos em 22 páginas com 15 produtos por página. É assim que isso funciona. Você verá muito a paginação que é comumente usada na integração. A integração é uma maneira visual de educar seu usuário, ou desculpe, seus novos usuários sobre como o aplicativo funciona ou o que esperar em seu aplicativo. E usamos isso em um aplicativo em que estou trabalhando onde você obtém um novo usuário, eles fazem login. E esses três pequenos pontos aqui que são chamados de paginação. E o usuário pressionará o próximo botão aqui, tocará nele e você verá que o próximo ponto ficará escuro. Então, novamente, isso dá ao usuário a mesma coisa sobre a qual falamos, que assistentes, isso lhes dá uma sensação de expectativa. Quantas telas vão passar por tempo, localização e progresso? E eles podem passar por cada um desses. Vamos detalhar isso para integração muito rápido. Eu sempre incluo um botão Ignorar. Quando você faz a integração, é melhor manter isso em três a cinco etapas. Não torne isso muito assustador para novos usuários que entram em seu produto que só quer usar o produto. Como apenas três a cinco etapas. Mantenha-o simples, mas sempre mantenha um botão Ignorar e geralmente no canto superior esquerdo ou superior direito. E isso permitirá que o usuário pule todas essas telas. Então você verá o detalhamento da paginação aqui. Então, temos cinco telas. Cada círculo representa uma tela. Um círculo preenchido representa as etapas em que o usuário está, nos dá uma sensação de localização. E as notas representam as telas que o usuário já viu e concluiu. E, novamente, isso pode enfrentar o progresso. Então, vamos dar uma olhada na rolagem infinita. Rolagem infinita é a substituição da paginação. Ele permite que o novo conteúdo carregado quando o usuário rola pela página. E isso torna muito mais fácil navegar por conteúdo em vez de clicar como página por página. Mais uma vez, como melhor dardance. rolagem infinita pode ser viciante. Você é como continuar rolando e percorrendo novos produtos e novos produtos. Rolagem infinita sempre melhor que o período de paginação. Ninguém quer clicar em centenas de páginas para encontrar o que precisam. Então você pode ver os sapatos DC aqui que tinha aquela paginação. Vamos dar uma olhada na Nike, que usa rolagem infinita para baixo, rolando pelos sapatos DC. E ao contrário de nós, legal, eu chego ao fundo e tenho que clicar e olhar. Está carregando. Tem que voltar a rolar novamente, voltar para o fundo. Você pode fazer você sentir que essa sensação é um pouco assustadora. É só ir e voltar, para frente e para trás. Assista na Nike faz isso. Vamos dar uma olhada nos sapatos Nike. Vamos dar uma olhada em alguns Jordans, alguns rolando para baixo e assistindo quando eu chegar ao fim. Na verdade, vou me deixar, deixe-me ir. Basta ir para homens que era, eu preciso de produtos infinitos aqui. Desculpe. Vamos dar uma olhada na escolha. Certo. Agora veja-os rolando os sapatos aqui, boom, boom, boom, boom. Veja esse pequeno giro. Rolagem infinita. Relógios tão rápidos. Mas veja, posso ver meu cursor no navegador aqui se movendo para baixo. Não é muito boa Internet, mas você viu aquele pequeno girador lá. E eu vou continuar, posso continuar sempre e sempre e vai continuar carregando produtos e carregando produtos. E eu posso ver aqui, apenas navegar até que meu pequeno coração deseje e na verdade não compre nada, mas só posso olhar para essas coisas. Ok, então isso é rolagem infinita em poucas palavras. E depois há um site aqui chamado Gymshark, e eles usam uma mistura de ambos. Se você estiver rolando para baixo shorts aqui. Chego ao fim de todos os shorts aqui. Eu posso carregar, carregar mais, arte, ver todos eles e carregar mais. Meio que esse pergaminho infinito aqui eu carrego mais produtos. É uma combinação de ambos lá que você pode ver. Excelente resumo. Sempre use paginação para telas de integração. Eles são ótimos. Eles são usados ao exibir muitos conteúdos e produtos. Se você puder evitar a paginação, use sempre rolagem infinita e sempre tenha uma função de pesquisa e boas opções de filtragem também. Tudo bem, legal. Então nós terminamos paginação e te vejo no próximo vídeo, o último que falaremos sobre ícones e fotos. Vejo você lá. Adeus. 21. Ícones: Tudo bem, vamos falar sobre ícones e fotos. Vou dividir essa seção em dois vídeos. Vou falar sobre ícones primeiro e depois vou falar sobre fotos. Basta começar. Ícones de alto nível são ilustrações muito simples de assuntos ou ações. Eles são usados em todos os lugares. Eles ajudam os seres humanos a entender pontos comuns de ações de navegação e contextos usados pelo software do site, sinais do sistema operacional. Eles são ótimos porque são universais. E novamente, entendido pela maioria por qualquer pessoa e eles também Bridge barreiras linguísticas para treinar um ícone de um trem é entendido em qualquer lugar do mundo. Alguns ícones como Home Share, Imprimir, pausar, reproduzir a mensagem em seguida, como adicionar perfis de exclusão fechada, pesquisar. Eles são todos tão comuns que não exigem explicações como as pessoas sabem exatamente o que fazem quando e onde quer que as vejam. Em geral, você pode pensar em dois tipos diferentes de iconografia. Você pode pensar em mais ações orientadas, que é que as pessoas vão usá-las. Você pode pensar em mais ilustrações orientadas, o que serve aos objetivos de comunicação. Quando nos referimos à experiência do usuário, os ícones estavam se referindo principalmente aos ícones que as pessoas usam. Os ícones que são mais orientados para a ação tendem a ser menos ilustrativos e os que servem objetivos de comunicação são mais ilustrativos e esses vivem mais do lado gráfico das coisas. Embora muitos designers de UX criem os dois tipos de ícones para melhor servir a comunicação de uma tela específica OU e a usabilidade de um aplicativo ou de um site. Novamente, em geral, é uma boa prática não tornar os ícones de ação muito ilustrativos. Esses ícones devem ser muito simples, fáceis de digitalizar, fáceis de entender. Mais uma vez, os benefícios dos ícones. Há muito mais fácil de digitalizar e ler rapidamente e textos reais remontam a essa palavra mágica. Há tipo de volta a imagens como dizem 1000 palavras, o mesmo com ícones. Eles podem se comunicar muito mais do que palavras. Como eu disse antes, o universal entendido por todos os idiomas. Eles servem como alvos de ação cinza para interfaces de usuário. Coisas que as pessoas podem tocar. Você pensa em quando fizemos a guia, barras de abas. Tivemos o fico aqui para o Instagram. Você pode ver como se eles têm cinco ícones na parte inferior para a barra de abas e três para cima para a barra de título. Eu disse que eles tinham ícones que servem como alvos de ação ao longo de sua aplicação. Isso é ótimo. Você não seria capaz de encaixar tudo isso com texto. O ícone, é meio que fala mais do que muitos casos do que no texto. Eles nos ajudam a economizar espaço e espaço na tela. E eles são visualmente atraentes e ajudam a transmitir tipos de marca específicos. Você pode influenciar sua marca através do estilo de seus ícones. Coloquei um monte de ícones comuns aqui. Eu não vou passar por todos eles, mas apenas passar por alguns mais comuns. Mas você sabe, coisas como casa e editar e pesquisar, perfil e menu e pausar e favoritar e jogar e excluir e adicionar uma mensagem e erros e microfones e carrinhos de compras, favoritos, calendários, expandir, excluir, cortar notificações. Com base em todos esses ícones que você pode perguntar a si mesmo, o que todos eles têm em comum? E eles são comumente usados em várias experiências e aplicativos do usuário. Então, se você planeja usar um desses, não, não reinvente a roda. Use a forma mais popular desse ícone porque é mais provável que os usuários já o tenham visto e usado em outros aplicativos. Então, você pode esperar que eles saibam exatamente como ele é, ou qual é o ícone, como usá-lo e o que ele faz na sua experiência do usuário. Em relação aos rótulos. Se você não tiver certeza se um usuário vai entender o que seu ícone faz ou sabe exatamente o que é de relance, adicione um rótulo a ele. Você pode ver que isso é uma carteira. Nós adicionamos minha carteira. Este só o texto por si só já indica que é meu, é um lugar para mim e são carteiras onde vou colocar meu dinheiro, onde essa carteira pode não ser tão específica sem o texto. Você também pode adicionar uma dica de ferramenta como fizemos aqui com o ícone que mais ajuda a indicar o que o ícone faz quando você passa o mouse sobre ele. Mas, novamente, ele só funciona para dispositivos desktop e não funciona para dispositivos móveis e tablets. Portanto, não deve ser a principal maneira de você comunicar um ícone abstrato. As melhores práticas, como eu disse antes, não reinventam a roda. Ícones familiares funcionam melhor. Use ícones reconhecidos e vistos antes. Não os use demais, são excessivamente decorados com eles porque isso pode diluir seu propósito. Se eles se tornarem mais ilustrativos ou de uso excessivo, talvez não servam mais como alvos de ação e o usuário pode achar que é mais decorativo. Use a regra de 5 segundos. Isso se você estiver testando seus ícones e alguém leva mais de cinco segundos para pensar o que um ícone faz ou para escanear o ícone, então provavelmente não funcionará ou não é eficaz o suficiente. Mantenha seus ícones simples. Mais uma vez, não ilustre-os demais. E, em seguida, teste seus ícones com os usuários, veja se você precisa de um rótulo ou não. Você acabou de mostrar seu ícone, pediu para você usar, em que você acha que esse ícone está? Na segunda parte dessa pergunta, o que você acha que ela faz? Em seguida, para dispositivos móveis, decide ter pelo menos 40 pixels por 40 pixels para um alvo de toque adequado. E deixe-me mostrar a melhor prática para sua área-alvo usando um pequeno ícone. Então, novamente, usamos pequenos ícones o tempo todo porque eles são eficazes, fáceis de digitalizar, eles não atrapalham sua interface de usuário. Na maioria dos casos, certifique-se de que seu clipe ou toque no alvo seja maior que o próprio ícone. Isso ajuda geralmente facilita engajamento com o ícone e o usuário não precisa gostar de dobrar, dobrar, clicar ou tocar nele. Se você tiver um ícone aqui, não faça apenas o ícone, o alvo de toque, ou seja, a área clicável e tocável. Então, apenas o pequeno x aqui. Portanto, o retângulo ou quadrado transparente rosa aqui representa nosso alvo técnico. Se colocarmos um ícone aqui que é muito pequeno, uma vez que faça o toque atingir pelo menos 50 pixels por 50 pixels, o ícone, ele pode ser menor do que isso, mas a área de toque é maior. Vejo isso muito com os alunos que ensino. Eu sou os ícones através suas aplicações têm diferentes espessuras de traçado e isso cria uma linguagem visual inconsistente pode até fazer a interface parecer um pouco desleixada, minha opinião. Portanto, mantenha a mesma espessura em seus traços. Você pode ver que há um traçado diferente aqui para a mensagem. Até eu posso dizer que há um golpe diferente para a cabeça do perfil. Ou se você olhar aqui à direita, estes são exatamente a mesma largura do traçado. Vimos isso nas melhores práticas para as barras de tabulação. A lembrança só não mistura seu traço, não faça traço. Ícones de contorno são ícones de contorno traçados e ícones preenchidos. Use um dos outros, mas geralmente não misture isso porque dá a eles mais peso visual para aquele que está preenchido em comparação com o que está delineado. Normalmente costumo usar mais contornos traçados como este aqui. Só por causa desse motivo, esses são alvos de toque. Eles geralmente são acionáveis ou podem servir como destinos. E queremos destacar e elogiar nosso contato. Essas são apenas maneiras de navegar e fazer coisas que nosso aplicativo. E se eles são muito pesados, eles podem distrair do conteúdo que está na página. Normalmente, gosto de fazer o esboço. E eles também são mais comuns em todos os aplicativos de experiência do usuário. Vamos pegar algumas coisas e não fazer. Mais uma vez, mantenha seus ícones consistentes e você pode ver aqui estes pareciam traços consistentes em família. Todos eles estão usando o descrito aqui à direita. Não parece uma família. Você tem bordas duras. Você tem alguns ícones que têm bordas arredondadas. Eles estão cheios, acariciados, estão meio por todo o lado. Mais uma vez, mantenha-os simples e modernos. Eles parecerão utilizáveis, mas também durarão o teste do tempo. Quando você fica mais ilustrativo assim e coloca mais cores em um ícone, eles podem parecer mais decorativos e menos utilizáveis, e também não resistirão ao teste do tempo. Simples sempre funciona, sempre eficaz. Quanto mais você adiciona coisas e adiciona ilustrações e adiciona elementos gráficos. Muitas vezes nossas tendências de interface do usuário se desenvolvem ao longo do tempo ou nossas linguagens visuais se desenvolvem e essas coisas podem durar o teste do tempo em que essa flecha aqui, será uma flecha para sempre. Como uma flecha bonita, limpa , simples e fina durará para sempre. Certifique-se de que seus ícones tenham o mesmo tamanho. E aqui está o verdadeiro kicker visualmente. Você pode ver aqui nós, eu tenho esta linha rosa aqui. Principalmente todos os ícones , exceto a nota musical. Eles se encaixam nesse espaço vertical. Quando você olha para o segundo aqui, eles parecem exatos. Eles literalmente parecem uniformemente dimensionados visualmente. Embora não seja, você pode ver as linhas cor-de-rosa. E se você olhar para o que está à direita aqui, reduzimos o ícone da música para caber na altura vertical desta linha rosa. E quando você olha para a parte inferior aqui, esse ícone de música parece um pouco pequeno e um pouco mais alto do que os outros ícones. E é muito, muito sutil, mas essas coisas são importantes. Estes são como você deveria suar os detalhes aqui. Visualmente sempre é melhor do que exato perdido. Assim, você pode olhar para precisão aqui, mas obrigado, deve ser ajustado mais visualmente do que com precisão. Seu melhor, vamos a lugares para encontrar ícones. Seu melhor conjunto livre do maior conjunto de ícones gratuitos do mundo é chamado Noun Project. Eu o tenho aberto aqui. Noun Project é ótimo. Vamos dar uma olhada nos ícones de sorvete. Ok, então olhe quantos. Eu meio que vou diminuir um pouco para que você possa ver que há apenas toneladas de ícones de sorvete e você pode mostrar mais. Acho que foi mais 200 aqui. Tudo gratuito, super fácil. Digamos que gostaríamos desse pequeno caminhão de sorvete aqui. É meio fofo. Quero esse ícone. Download básico. Vá para SVG. Este site é tão bom e é gratuito. Eu sou como de todos os sites que uso que são gratuitos, na verdade, estou feliz em pagar o Noun Project um custo mensal. Eu não sei, US$20 ou mais apenas para usar todo esse site, esses, esses ícones significam que é ótimo. Vou levá-lo de graça. Não me entenda mal. Hum, mas sim, feliz em pagar isso. Eu uso isso com tanta frequência. Você vê que acabei de baixar o ícone de sorvete. Eu o arrastei para a ferramenta de design que estou usando chamada Figma. Vou selecionar esse ícone e verificá-lo. Posso usá-lo no meu layout rapidamente. Vou ir em frente e vestir isso um pouco. Diminua isso. Esta é uma forma vetorial, então eu posso entrar aqui e posso adicionar alguma cor a esse ícone aqui. Não sei, vamos torná-lo rosa. Como coisas de downsizes aqui. Super legal. Dê um pouco, pequeno escape. Um pequeno movimento aqui. Faça isso azul. Vire isso. Tudo bem, eu não vou ficar muito louco aqui, mas você vê a ideia. Você pode obter um monte de ícones grátis aqui e olhar para aquele dono de caminhão de sorvete fofo. Vou em frente e tatuar aquela pequena tatuagem no meu braço. Tudo bem. Alguns outros sites que você pode conferir são a ICANN eight.com. Eles têm um grande conjunto de ícones gratuitos para que eles fiquem mais ilustrativos aqui. Mas eles são muito bonitos e legais. Você pode ver aqueles aqui. Eles também têm coleções com eles, para que você possa clicar em uma e baixá-la. Eles também têm HTML incorporado a ele também. E então você pode ir conferir a outra coleção aqui por essa pessoa. Então o outro que é muito legal aqui é chamado, você desenha ou arrepende, OnDraw. Este é incrível. Então, todas essas são ilustrações vetoriais. E o que é realmente legal sobre este é que você pode pesquisar onde quiser. Então eu já procurei por comida. Espero que eu te deixe com fome. Você pode alterá-los para qualquer cor ao vivo. Estou mudando as cores na roda de cores aqui e todas elas estão atualizando. Então, vamos colocar um pouco de rosa alto nisso. Vou olhar para este fofo , o que o cachorro. Certo, e vou baixar o SVG, boom, baixado, arrastá-lo para Figma. Olha, eu dei uma olhadinha fofa para esse cachorrinho fofo aqui. Sim, eu tenho esse cachorro fofo. É comido. Tenho um pequeno caminhão de sorvete bonito aqui. Deixe-me lá você ir. Reposicione isso. Muito rápido. Tenho entrega para o meu sorvete. Vai dar sorvete ao meu cachorro e depois vai assar para guloseimas. Provavelmente quero dar um passeio depois. Mas sim, você pode ver muito legal em desenhado é muito, muito legal nesse sentido que você pode mudar essas cores ao vivo e colocar as cores da sua marca e depois ir pegar esses ícones. Certo, legal. Vou terminar com ícones e vou fazer outro vídeo em que vamos mergulhar profundamente nas melhores práticas em fotos e imagens e como criar estratégias lá. E te vejo no outro vídeo. Vejo você em breve. 22. Fotos: Vamos falar sobre fotos e imagens, e é clichê, mas as imagens falam mais alto do que palavras e imagens são mais do que decoração. É uma ferramenta super poderosa para ajudar você a comunicar seu conteúdo, metas, seu produto e sua marca. As imagens são usadas para configurar a voz de uma marca e construir o tom da marca. E uma boa foto pode transmitir mais informações do que parágrafos de texto. mais importante é que uma boa imagem possa ajudar a educar ou transmitir o objetivo de comunicação muito mais rápido do que ter um usuário lido. E na maioria das vezes na UX, não assuma ou pense no fato de que as pessoas vão ler qualquer coisa. Mas as pessoas nem gostam de ler. Talvez eles gostem de ler livros, mas quando se trata de aplicação, eles só querem entrar, fazer o que querem e sair. E muitas vezes ou não, terei palavras no aplicativo descrevendo o que fazer e nós o testamos. E as pessoas gostam ser uma brisa, é uma coisa boa. Não queremos que eles sintam que querem parar e ter que ler tudo e seguir as instruções. Eles só queriam entrar e fazer o que o aplicativo fizer e sair, continuar e continuar com sua vida. As imagens ajudam muito nesse sentido de configurar o objetivo de comunicação ou comunicar algo mais com uma foto, então um monte de textos, novamente, sempre remonta a essa palavra mágica, affordance, tempo e energia gastos. Então, vamos dar uma olhada em algumas imagens e a maneira de pensar sobre imagens ou categorizá-las ou medi-las, é que as imagens evocam emoções e pensamentos. E essas emoções devem estar ligadas a algum nível de adjetivos. E esses adjetivos devem ser usados para descrever sua marca. Se você é um banco, você pode querer adjetivos semelhantes, você sabe, confiáveis e calmantes. E se seus filhos brincarem com a marca da casa, você vai querer algo divertido e enérgico. E há todas as maneiras diferentes pelas quais podemos comunicar esses estilos diferentes onde, se fosse calmo, você quer que as cores azuis entrem em alguma teoria das cores. Cores azuis e se for enérgico e divertido, você quer cores realmente brilhantes e rosas de verão e coisas assim. Mas vamos ver algumas fotos e falar sobre que tipo de emoções estão saindo dessas fotos. A segunda parte é que as fotos também podem desencadear pensamentos. Se você olhar para esta foto aqui, ela tem uma sensação de calma para ela apenas estar no aeroporto onde as pessoas estão se esforçando. Isso tem essa sensação de calma e é devido à cor laranja que ajuda a acalmar a foto. A linguagem corporal dessa pessoa parece super relaxada, apenas relaxando em uma cadeira, levantou os pés na bagagem. Parece um pouco de tédio que ele parece estar esperando. E também evoca algum pensamento ao redor, essa pessoa perdeu seu voo como é que seu avião saindo e você apenas como, oh cara, eu tenho que descobrir o próximo voo ou é que ele simplesmente chegou ao em um bom momento e está apenas esperando. Eu deveria ter essa foto. Olhe para essas duas crianças e olhe para esse rosto de crianças pequenas assim, isso é pura alegria saindo da cara desse garoto. Ele só adorava. Ele provavelmente nunca conseguiu fazer isso. E então eles fizeram essa sessão de fotos. Você é como, sim, vá em frente e pegue os travesseiros e os nazistas de cabra, ele e seu amigo, ou talvez seja seu irmão, talvez sua irmã ou algo assim. Eles estão se divertindo. Então você pode pensar que essa foto é que seus rostos emitem emoções. E é emocionante com base na linguagem corporal e no movimento. Há muita ação nessa foto, a hora do dia, talvez seja manhã ou tarde. Parece super divertido com base no conteúdo. Acabaram de se juntar a si mesmos. Você também pode pensar sobre isso. É assim que as crianças brincam em todos os lugares, ou é apenas certas culturas? E então ele traz outro ponto em que algumas fotos e fotos que escolhemos, elas podem colmatar as normas culturais, o que significa algo claro que funciona em qualquer cultura. Ou eles não. Eles só trabalham em algumas culturas. Quando você tem um produto internacional, você precisa estar ciente das normas culturais e coisas assim também. Este aqui é interessante porque você meio que tem a sensação de trabalhar em casa. É aborrecido porque o uso de cores acinzentadas fortes, é quase como tom mono. Não é muito brilhante. É uma espécie de tom mais puxado para trás cores, muito relaxado aqui com base no movimento do corpo. Mas há esse sentimento de mundano ou falta de incitação devido ao trabalho em casa. E evoca esse tipo de pensamento é essa pessoa, eles são, eles querem sair ou eles ficaram presos em casa? Os cães provavelmente gostam assim que você se levantar e sair da sala, eu vou rasgar este lugar. Mas sim, esses são apenas alguns exemplos de como você pode testar suas fotos assim. Como se você está realmente interessado no desenvolvimento da marca, você pode obter fotos como essa e perguntar às pessoas que tipo de emoções e pensamentos elas recebem dessas fotos? E veja se eles estão vinculados aos adjetivos da sua marca nas metas de comunicação da sua marca. Vamos dar uma olhada em algumas práticas recomendadas de fazer e não fazer. Então, se você tiver uma foto e novamente, estamos pensando estratégico aqui, como fotos estão aqui para nos ajudar a comunicar nossos objetivos. Eles não são apenas algo que acabamos de tirar do nada e Deus, basta jogar uma foto na coisa. Você sabe, eles são bem meticulosos. Eles estão aqui para nos ajudar a comunicar isso. E neste contexto aqui queremos comunicar uma reunião online. O que você quer fazer é tornar muito fácil mostrar o conceito da sua imagem. Se você olhar para a esquerda, você pode dizer que é uma reunião online. Eles estão fazendo FaceTime. Há um temporizador em jogo aqui. O da direita. Você tem que procurar esse conceito. Eles estão tendo uma reunião online ou ela realmente gostou? Conheci a pasta de dente e ela está olhando para um monte de pasta de dente é como aquela para 299 é fantástica. Quando encomendá-lo amanhã ou algo assim. Mas você meio que entendeu o ponto aqui. cuidado ao usar fotos stock de pessoas porque você está se reunindo se você vai se comunicar neste caso, o exemplo é que a reunião do escritório como Tenha cuidado ao usar fotos stock de pessoas porque você está se reunindo se você vai se comunicar neste caso, o exemplo é que a reunião do escritório como se fosse uma reunião de escritório real, reunião. As fotos de stock tendem a ter o que pode parecer, não um contexto real. Ou mesmo pessoas que pareciam atores e atrizes. Então, o da esquerda, parece uma reunião e há uma reunião que aconteceria todos os dias. Bem ali. Eles têm alguns insights escritos em notas adesivas. Eles estão compartilhando conhecimento é como uma boa reunião de experiência do usuário aqui. Talvez essa pessoa seja desenhada como um cachorro ou uma casquinha de sorvete ou algo assim. Eu não sei. Eu não sei. Estive em muitas reuniões minha carreira e nunca entrei em uma reunião e vi todos fazerem isso comigo. Sorrindo este halo, senhor, quer uma boa e agradável xícara de café comigo? Esse cara está sorrindo. Você poderia dizer apenas, parece estoque. Não acontece, eles são pessoas reais, obviamente, mas simplesmente não parece, não parece uma reunião real. Parece configurado. Então, definitivamente use contextos reais e isso ajuda a tornar seu produto mais próximo do ser humano e mais natural. Tudo bem, então meu favorito é pensar em diferentes maneiras de fotografar seus produtos. Se você tiver um produto que está vendendo. Expresse personalidade relacionada ao seu objetivo do seu produto. E mostrar personalidade sempre ajuda a invocar essa emoção. E a emoção ajuda a criar impacto e significado. E isso é mais genuíno. Você vai se lembrar de uma foto que evoca emoção. E os estudos mostraram esse negócio. Você vai se lembrar de coisas que são mais únicas e evocaram algum tipo de emoção, seja nostalgia ou qualquer coisa. Mais do que apenas um tiro simples. Tire fotos de pessoas fazendo coisas interessantes com seus produtos versus assim, chato, como, aqui está minha maquiagem. Em uma bancada de granito. Como se isso fosse incrível aqui. Isso mostra FADH, mostra personalidade humana. Eles estão fazendo algo único. É só que há muita coisa boa nesta foto aqui para o exemplo de uma linha de maquiagem. Certo, Cool. Menos é mais. Então aqui está um evento de balão de ar quente que estamos fazendo às vezes muito conteúdo significa mais tempo. Alguém tem que escanear e ver todas as informações que estão acontecendo aqui. E, novamente, isso tem a ver com uma afordance. Embora esta foto seja legal, como olhe, há um porquinho aqui em cima. Ele tem elementos interessantes nele. Mas, novamente, leva mais tempo olhando e vendo essa coisa no coelho energizador aqui versus apenas um balão de ar quente muito simples. Como a simplicidade funciona melhor. Falamos um pouco sobre isso com botões e também quando falamos sobre sombras. Quando você coloca texto sobre uma imagem, certifique-se de que ela seja legível e fácil de ler. Não adicione sombras ao texto, em vez disso, manipule a foto para tornar os textos realmente fáceis, certo? Então você pode ver sem isso, temos um preto. Começa preto na parte inferior e é 100% transparente na parte superior. Podemos posicionar isso da maneira que quisermos. Pode ir no meio do caminho, eu posso cobrir a foto, mas você pode ver o que parece sem ela. Você não pode ler esse texto. Se você olhar para a direita ou simplesmente ir e nós apenas adicionaremos uma sombra aos textos. Isso não funciona. Isso faz com que pareça ultrapassado. Não é uma visão moderna tipografia e vou digitar colegas. Adoro tipografia. E sim, apenas a regra geral, nunca adicione uma sombra em textos como manipular outros elementos ao seu redor para fazer o texto parecer bom. Use boa qualidade, mas, novamente, cuidado com o tempo que leva para a foto carregar. Portanto, tente manter o tamanho da foto abaixo de um megabyte para a web. Mais uma vez, qualquer coisa mais do que isso atrasará o tempo de carregamento. E também certifique-se de que a foto tenha uma boa resolução. Portanto, é um equilíbrio entre a qualidade da foto e o tempo de carregamento também. E você pode ver aqui esta é uma ótima foto aqui. Tem boa qualidade para isso. E então você pode ver aqui, aqui está o Sr. Warhol comendo um cheeseburger, e essa é uma foto super pixelada aqui. Então, queremos fotos, imagens sob um megabyte para web. Sim. Então, uma coisa que você pode fazer para ajudar com a qualidade e o tempo de carregamento é que você pode usar um site de compressor. Eu uso este é chamado compressor I0. E o que ele fará é que eles tirarão uma foto que tenha uma quantidade decente de megabytes e reduzirá isso significativamente. Então, vamos dar uma olhada neste. Tem 1,1 megabytes. Tudo bem, parece esta foto aqui. Vamos arrastar isso para dentro e vamos ver quanta compressão isso pode fazer. Como eu o levei de um megabyte para 130 kilobytes. Você provavelmente está pensando, Bem, Aaron, provavelmente parece uma porcaria. Vamos comparar os dois. Vou abrir outra janela aqui, vá para meus Downloads. Aqui está o que acabamos de reduzir. Agora está em 140 gigabytes. Isso é ótimo. Aqui está o que está em 1,1 megabyte. Você não pode nem dizer a diferença. Tudo bem, então você sempre pode usar esse compressor para eu usá-lo muito para ativos antes de entregá-lo a qualquer engenharia ou colocá-lo em qualquer site em que eu esteja trabalhando. Vou jogá-los na ferramenta do compressor e apenas comprimi-los para baixo. Outra coisa é que isso é bastante óbvio, mas nunca estique suas fotos, como preencher a foto em vez disso, ampliamos essa foto em vez de cortar essa foto em vez de o grego cortar essa foto e preenchê-lo. Em vez de fazer algo assim, tudo o que precisamos para preencher as formas. Então deixe-me apenas, deixe-me esticá-lo assim e esticá-lo para que você possa ver o que está à direita parece muito obviamente esticado, então apenas evite isso. Outra coisa que você pode fazer que é muito legal é adicionar sobreposições de cores de capa a uma foto para torná-la mais marcada ou dar à foto um pouco mais de tratamento visual também. Você pode usar uma das fotos dos elementos da sua marca aqui. Digamos que nossa marca seja um azul-petróleo e laranja, como o exemplo aqui. E eu vou fazer isso muito rápido. É bem simples. Simon Figma aqui. Só vou pegar um retângulo. E vamos pegar um rosa. Há algo que você poderia fazer aqui. Há um filtro de transparência que você pode usar. Uma coisa que eu poderia fazer é simplesmente tornar o rosa transparente. Isso é o que estou fazendo agora. Ele recebe o que eu chamo de amido, onde você não recebe o, você começa a perder o rosa e a foto fica amilácea ou sem brilho. E muito rosa, você não pode ver a foto. Então, se você entrar em suas configurações de opacidade e fizer uma multiplicação aqui. Multiply trará a foto. Isso é uma opacidade 100% agora. A multiplicação trará todas as cores da foto, aquela escuridão da cor nesta cor rosa aqui. Por isso, faz com que seja melhor sobreposição. Você pode fazer todas as suas fotos assim. Vamos apenas dizer, eu não sei, você tinha uma marca que é apenas preto e branco e você pode fazer alguém que é rosa aqui. Você pode até se divertir um pouco mais. Você poderia fazer como metade dele é rosa. Você pode até fazer efeitos fotográficos onde fazemos algo assim. Apenas criando interesses visuais com suas fotos. Falar em interesses visuais vai para a próxima dica. Então você pode, você pode mascarar o conteúdo da sua foto e os elementos gráficos do anúncio para que ele pareça mais branding ou mais animado do que novamente, isso é mais artístico, mas olha, eles pegaram esse cara é foto, eles o convidaram para sair. Eles fizeram um pouco de cor, alguns em preto e branco. Eles tinham alguns rabiscos. Eles colocam em papel texturizado, algumas formas aqui. Ele era alguns textos e algumas lágrimas. Eles têm esse cara aqui à direita. Eu não sei. Eles acabaram de cortar os olhos dele. Então isso foi meio estranho, mas eles adicionaram texto e elementos gráficos da natureza e algumas ilustrações de livros, impressões de livros na parte de trás aqui e rabiscos e outras coisas. É muito bom. Isso é como um muito bom. Quase embalagens de chocolate acontecendo aqui. Mas essa é outra forma de tratar fotos. Não precisa que você seja apenas uma foto quadrada. Você pode colocar fotos e diferentes formas de contêiner. Eles podem estar em qualquer forma. Você pode criar formas diferentes da mesma foto. Eu fiz isso antes em um site parecer bem legal onde tínhamos uma foto aqui e simplesmente copiamos a foto, cortamos para onde ficaria à direita. E fizemos outra forma, na verdade adicionamos outra também. Nós tínhamos dois retângulos aqui. Você pode adicionar cores diferentes. Você pode adicionar a laranja e tivemos um pouco de verde. E então tivemos a foto ao vivo da foto e tivemos alguns clipes. As fotos ainda estão aparecendo em outras formas. E tínhamos cores nessas formas e isso o tornou um pouco mais emocionante. O mesmo com isso. Você pode mascarar sua foto e colocá-la em cima das formas. Você pode ver o quadrado aqui no painel sentado em cima da praça. Ou você pode usar um retângulo ou uma forma de triângulo. E novamente, tudo o que estamos fazendo é que estamos tirando um mundano, acabamos de ver uma foto normal de algo. E estamos fazendo um empolgante adicionando esses toques visuais a ele. Tudo bem, legal. Então, vamos dar uma olhada nos recursos de imagem gratuitos. Então, meu favorito é Unsplash. Você pode obter qualquer coisa aqui. Vamos voltar ao nosso sorvete. Você pode ir a todas essas imagens aqui e fazer isso parecer bom. Você pode pegá-lo e baixá-lo gratuitamente. Faça o download e vamos colocá-lo na Figma provavelmente virá bem grande aqui. Então, deixe-me diminuir um pouco. E aí está sua foto. Foto boa e de alta qualidade. E a melhor parte, gratuita, gratuita. Certo, legal. Outro que você pode acessar é chamado de pixels aqui, PEX, ELS. E novamente, você pode procurar sorvete, filme inteiro deixando você com fome, todas fotos gratuitas. Você pode baixar para a mesma coisa que acabei de fazer com o Unsplash. O outro é Pixabay. A mesma coisa. Vá em frente e coloque algumas fotos de sorvete e bada bing, bada, boom. Depois, quando eu uso com bastante frequência, é chamado ice stock.com. São cerca de 12 dólares por foto. Mas eles têm fotos, ilustrações, animações, todos os diferentes tipos de fotografia e elementos gráficos. Novamente, eles são feitos profissionalmente, então você pode encontrar isso o que você está procurando no Unsplash. Mas às vezes você precisa de uma foto muito direcionada. E eu estoque é um dos maiores provedores de fotos filmadas profissionalmente. Fotógrafos reais vêm aqui e usam essas crianças comidas sorvete aqui. Que fofo. Sim, 12 dólares não é ruim para uma boa foto e você está apoiando alguém. Há uma pessoa por trás aqui que carrega a foto e ela receberá uma parte disso. Então, é uma espécie de ganha-ganha. Tudo bem. Isso é um envoltório. Apenas lembre-se, eu quero deixar uma nota de apenas linguagem e você escreveu um lembrete de que tipo de linguagem usamos para descrever nossas interfaces de usuário e alguns dos fundamentos do junior enter a good interface de usuário. Acho que comecei os vídeos dessa forma. Eu terminarei dessa maneira antes de entrarmos em qualquer trabalho de projeto que faremos aqui em um segundo. Mas uma boa interface é como uma boa piada e não precisa de explicação, precisa saber a direção sobre como usar apenas as pessoas a usam. A maneira como falamos sobre nossas interfaces. Tem personalidade, que é o valor da marca. Mas você me ouviu falar muito sobre transporte. Muito boa palavra para descrever seu trabalho e as decisões sobre por que sua interface é do jeito que ela é. Lembre-se disso porque é fácil entender informações ou relaciona com um local de tarefa específico. Você me ouviu descrever muito isso. Como se esses fossem todos mecanismos que ajudam você a descrever sua decisão, qualquer escolha que você tenha ajudado a informar o usuário sobre a localização deles ou não o levou muito longe de sua localização se fossem todos como nível aparente e entrassem em um modal de nível infantil. Eles ainda podem ver o nível pai nesse modelo. Mais uma vez, fluxo de trabalho e progresso e controles como cancelar, salvar de volta, editar, excluir, confirmação e feedback. Erro de sucesso ao carregar meu favorito , dardance, quantidade fácil, menor quantidade de tempo e energia para concluir uma tarefa. Hierarquia de informações, ordem de conteúdo que atende às necessidades do usuário. E novamente, quando todos eles são combinados e levados em consideração, e levados em consideração, a interface parece muito fácil de usar. Tom Olsen, visível para o usuário. E eu meio que vou envolver, usar isso como sua linguagem visual. Certo, legal. Espero que você tenha gostado do nível de conteúdo mais deste curso. Vamos lançar alguns projetos em que vou mostrar a vocês como pegar um pouco desse conteúdo que fizemos e projetá-lo dentro da Figma. Então você pode ver como construir, como construir um celular, um modal e algumas outras coisas. Então eu vou te ver lá e obrigado novamente. Tchau. 23. Introdução à seção do projeto: Tudo bem, bem-vindo à seção de projetos da classe, onde vamos construir alguns desses padrões de design sobre os quais aprendemos na última série de vídeos. Eu criei um arquivo Figma para você baixar, carregar na Figma e podemos fazer isso juntos. E se você não tem Figma ou não conhece Figma, tudo bem. Você pode, é gratuito, é uma ferramenta gratuita. Você pode baixá-lo e , em seguida, você pode fazer o upload deste arquivo e você pode acompanhar comigo. Vamos dar uma olhada em tudo o que vamos aprender aqui. Então, vamos começar com alguma prototipagem na web. E vamos aprender a fazer os botões de opção Personalizados aqui. Muito simples. Começaremos muito simples aqui. Aprenderemos como fazer o menu e a gaveta. Você vê aqui. Vamos fazer alguns modais. Vamos fazer alguns acordeões. Vamos fazer validação em linha e criar uma conta e, em seguida, alterar o botão Criar aqui para um spinner. E aprendemos isso durante o vídeo do botão. Vamos aprender a fazer uma lista suspensa e depois passar o chute para o lado móvel. Aprenderemos como fazer algumas delas em dispositivos móveis. Diga aqui que você tem um modal de tela cheia fará uma versão modal de um menu suspenso. Portanto, suspensos ou diferentes da web do que estão no celular, aprenderão como fazer um modal. Um dispositivo móvel, fará menus para dispositivos móveis. Faremos a barra de abas. Vou clicar nessas barras de abas aqui e como elas permanecem corrigidas. E terminaremos com pouco, algo um pouco mais complicado, tudo bem como deslizamento horizontal. E cada vídeo ou cada seção aqui, criei um arquivo Figma que tem o exemplo já construído. Você pode ver aqui com o botão de opção que o protótipo já está lá. Então você pode abrir isso, você pode escolher, você pode ver como isso funciona. Em seguida, temos a seção que diz que você faz. E vamos fazer isso juntos. Vamos passar por cada um desses build-out e menu em uma gaveta e um modal, e sempre há o exemplo lá. Então, no caso de você ficar preso ou algo assim, ou você quiser simplesmente escolher isso, você pode usá-lo e então você pode acompanhar o vídeo e nós vamos analisar cada um deles e construí-lo. Incrível. E também podemos ver que fiz o mesmo para os dispositivos móveis também. Super divertido. Certo, legal. Então, vou fazer outro vídeo para obter instruções sobre como baixar esse arquivo e abri-lo na Figma. E te vejo lá. Tchau. 24. Upload de arquivos do projeto: Tudo bem, então vamos em frente e baixe o arquivo Figma. E neste vídeo mostrará como abrir o arquivo. Depois de baixar o arquivo, ele deve ficar assim. É um projeto de trabalho da classe Figma. ZIP de ponto. Tudo o que você precisa fazer é clicar duas vezes ou clicar três vezes nesse arquivo. E isso vai descompactá-lo. E agora você terá uma pasta chamada arquivo de projeto de trabalho da classe Figma aqui. Bem, você tem que fazer é entrar nessa pasta. Deixei as instruções do arquivo por precaução, mas vou passar por isso no vídeo aqui. Mas se você quiser passar pelas instruções, é a mesma coisa que vou mostrar no vídeo aqui. Mas realmente tudo o que é que você não pode clicar três vezes neste arquivo para abri-lo na Figma. Se eu clicar três vezes aqui, você verá que recebo esse erro. Mais uma vez, estou em um Mac. O que você tem que fazer é que você tem que ir para Figma. Você tem que ir dentro de seus rascunhos. E seus rascunhos podem parecer um pouco diferentes dos meus porque eu só tenho muitos arquivos aqui. Sim. Você vai querer ir para as seções de rascunhos aqui no canto superior esquerdo. E o que você vai querer fazer é arrastar esse arquivo para o aplicativo Figma. Dentro da pasta rascunho. Você verá que eu vou arrastar e você verá que estou recebendo um contorno azul. Depois de obter o contorno azul, isso é bom. Basta arrastá-lo e você verá que isso pode demorar um segundo, mas você verá o novo arquivo aberto aqui, vá em frente e pressione Concluído. E seu arquivo deve se parecer com isso à esquerda. Muito fácil. Agora, tudo o que você precisa fazer para entrar nesse arquivo é apenas clicar duas vezes. E agora você está no arquivo, você está pronto para ir. Tudo bem, vou no próximo vídeo e vamos dar o pontapé inicial. Vejo você lá. 25. Crie - Web - botões de rádio: Tudo bem, vamos começar e nos divertir e construir alguns desses componentes e aprender a construir os padrões de design dentro deles. Se você não usou Figma antes, é bom fazer um mergulho profundo em Figma. Mas se não, está tudo bem também. Você provavelmente será capaz de estar bem andando pelo vídeo e fazendo isso comigo aqui. E eu vou vou muito devagar. Eu meio que vou falar sobre o que está acontecendo aqui, mas eu configurei tudo, então deve ser bem simples. Neste vídeo, vamos ficar no protótipo da web aqui. Faremos tudo na web e depois passaremos para o protótipo móvel aqui. Então, essas são suas camadas de página aqui. E se você clicar em qualquer um desses, essas são apenas placas de arte diferentes para as quais você pode fazer trabalhos de design e protótipo. Mas neste caso, temos um protótipo web e temos um protótipo móvel modal. Não se preocupe com a capa que cobre apenas a capa do arquivo Figma aqui. Então, estaremos apenas no protótipo da web e no protótipo móvel também. Neste vídeo, vamos fazer os botões de opção, o menu na gaveta, e faremos o modal. Então, faremos esses três e, em seguida, vamos dar um pontapé para o próximo vídeo. Mas vamos dar uma olhada no botão de opção aqui. Então, o que vou fazer é selecionar este quadro de arte no canto superior esquerdo, onde diz Mac 13. Vou ir em frente e selecionar isso. E você pode ver na parte superior, aqui estou na guia Design. Então, alguma coisa relacionada ao design aqui? Se eu estiver selecionando uma forma ou um ícone, é aí que posso alterar qualquer coisa aqui com base na minha seleção. Eu selecionei o quadro de arte. E o que é realmente importante aqui é que você vá para a guia Protótipo aqui, veja onde ela diz Design. Vamos entrar no protótipo aqui. Você verá isso começar aqui. Uma coisa que estou fazendo é pressionar a barra de espaço no meu teclado e estou segurando e estou clicando e arrastando. E isso me permite mover o espaço da placa de arte ao redor. Muito fácil. Outra coisa que estou fazendo é que o Command Plus amplie e comande menos para diminuir o zoom. E se você estiver em um PC, isso é Control Plus e Control menos. E então a última coisa é se você segurar z e clicar e arrastar z vai lhe dar a ferramenta Zoom. Se você clicar e arrastar para isso, ele ampliará. Então eu faço muito zoom e, em seguida, barra de espaço com meu clique e arraste para movê-lo. Vou diminuir o zoom. O que é realmente importante aqui é que eu tenho este pequeno retângulo azul Start com o botão de reprodução nele. Isso vai iniciar o protótipo para qualquer tela em que isso esteja será a primeira tela desse protótipo. Vamos mover essa pequena estrela através de cada uma dessas seções para que possamos iniciar o protótipo em cada um desses componentes que vamos projetar. Antes de fazermos isso, certifique-se de que você é parecido comigo aqui, onde eu selecionei o Mac 13. Estou na guia Protótipo aqui. E eu pude ver que o início aqui está no botão de opção Personalizado. E agora no canto superior direito aqui, você verá o pequeno botão de reprodução. Dê-lhe um segundo para ir até lá. É aí que diz presente. Esse é o seu protótipo. Vamos seguir em frente e clicar nisso. Isso vai carregar o protótipo. E novamente, a primeira tela que vamos ver aqui é a tela que precisa iniciar o retângulo na outra guia. Você também pode ver que foi feito duas abas, certo? Então agora estou em uma nova guia na parte superior chamada protótipo da web. E se eu quiser voltar ao meu arquivo de design, volto para o arquivo de design e estou aqui. Se você já é um profissional na Figma ou usou antes, então tudo isso é pregar para o coro no ERD provavelmente são profissionais aqui, mas isso é essencialmente muito fundamental de usar Figma e ele fica mais avançado aqui, mas vamos mantê-lo bem simples para o bem do projeto. O que temos aqui é o botão de opção e vamos começar muito fácil. E vamos ficar um pouco mais complexos à medida que avançarmos. O que estamos fazendo aqui é que temos nosso botão de opção personalizado aqui. E se você for para o sexo feminino, você vai ver o estado de pairar. E se eu clicar nele, você obtém o estado ativo. E se eu clicar fora dele, volto ao estado padrão. Se eu passar o mouse sobre ele novamente, obtenho o estado de paira. Clique nele novamente. Muito simples. Vamos prosseguir e construir isso. O que precisamos fazer aqui é estar na guia Protótipo, onde você pode ver esse pequeno retângulo azul aqui. Você não quer estar na guia Design. Você quer estar na guia Protótipo aqui. E o que você quer fazer é clicar nesse pequeno retângulo azul Iniciar aqui e clicar e arrastá-lo para o arquivo aqui que diz Max 16, o quadro de arte aqui você verá um destaque, veja como destaca azul assim. Isso é o que você quer. Então agora estamos passando do exemplo para o que diz que você faz aqui. Esta linha aqui é o que vamos construir isso. Ok, então a primeira coisa que vamos fazer aqui é pegar o máximo 16 prancha de arte aqui. Você pode ver se eu clico dentro do quadro de arte, seleciono elementos desse quadro de arte. Mas se eu clicar na parte superior ou o nome dessa placa de arte for no máximo 16. Eu selecionei esse quadro de arte em si. E se eu quiser renomear isso, posso ir para minhas camadas aqui à esquerda. Veja onde diz Matt 16. E vou citar isso, vamos dizer teste. Clique em voltar. E agora você vai ver isso dizer teste aqui. Agora que temos o quadro de arte selecionado, vamos copiá-lo de algumas maneiras que você pode copiar. Você pode fazer o Comando C ou Controle Z, C, C como em cat. Se você estiver em um PC, é Control. Se você estiver em um Mac, é comando. E então você pode fazer um Control ou Command V. Se você estiver em um PC, é Control V, como em Victor. E se você estiver em um Mac, é o Comando V aqui. E você pode ver substituí-lo aqui. Essa é uma maneira de copiar e colar. Um que eu gosto de fazer é segurar a opção, e verei como meu mouse entra em um mouse duplo aqui. Gosto de segurar Option e clicar e arrastá-lo e copiá-lo dessa forma também. Ok, então neste momento queremos construir estado do projeto para o pairar. O que vou fazer é ampliar este quadro de arte. Vou selecionar apenas, sou uma mistura. Estou no modo design. Você pode ver que estou no modo protótipo aqui. Então, faremos o modo protótipo aqui em um segundo. Vamos voltar ao modo de design. Este cartão está agrupado. Então, o que eu quero fazer é clicar três vezes neste cartão. Outra coisa que eu poderia fazer é clicar com o botão direito do mouse. Vamos fazer este. O que o desagrupa por enquanto? Só sou desagrupar. Agora posso selecionar os textos, posso selecionar o ícone e posso selecionar este pequeno cartão traseiro aqui. Então, o que queremos fazer é selecionar o cartão traseiro. Estou na guia de design aqui. Vou até a seção de AVC. Adicione uma vantagem, isso adicionará um traçado ao redor desse cartão. Gosto de manter os traços grossos. Eu não gosto de fazer apenas um traçado de pixel neste caso, vamos fazê-lo como 77 é um bom número. Vamos seguir em frente e mudar essa cor aqui. Quando você for para a seleção de cores aqui no traçado, você verá que você tem todas as cores prontas para você aqui. Toda a biblioteca de cores, todas as cores do mundo estão aqui. Você verá nas cores do documento abaixo aqui, essas são algumas cores que já existem neste documento. Você poderia pegar o rosa aqui soltando o rosa. Você também pode ir aqui e dar o seu melhor palpite sobre o que é esse rosa ou onde diz traço aqui. Também tenho o conjunto de estilos. Então, há um pouco como o Foursquare, quatro pontos aqui em um quadrado. Se você clicar nisso, isso lhe dará estilos associados a este projeto. Na verdade eu menti, não tenho os estilos aqui, então vamos realmente fazer um. Agora que temos uma cor rosa aqui, vou selecionar o ícone rapidamente. Agora que temos essa cor rosa, vá em frente e clique de volta nesses estilos e veja onde diz, além disso, vamos fazer deste nosso colóide rosa, mindinho, fofo mindinho. Agora, quando vamos e selecionamos nosso traço novamente, o que podemos fazer é clicar de volta nesse pequeno estilo e conferir. Temos nossa cor rosa aqui. Um pouco mindinho. Vou seguir em frente e clicar em mindinho. Certo, legal. Nós praticamente fizemos o estado de pairar. Vamos passar agora e vamos fazer o próximo estado, que se parece com isso, onde está preenchido. Mais uma vez, farei a mesma coisa que vou cobrir. Vou selecionar este quadro de teste aqui. Você pode fazer um Control C, como no cat se você estiver em um PC ou se você estiver em um Mac, é o Comando C. Eu vou passar para a direita aqui. E então eu vou fazer o Controle V como em Victor, ou Comando V como em Victor. Se você estiver em um Mac e eu tiver minha nova placa de arte, alguém diminua o zoom, seu quadro deve estar assim. Temos o estado padrão aqui. Fizemos esse estado de paira. Agora vamos fazer o estado ativo onde se o usuário selecionou o cartão Ícone Feminino aqui ele será preenchido com a cor rosa que acabamos de fazer chamada mindinho. Você pode ver que eu selecionei o plano de fundo agora. Está cheio de branco. Novamente, posso abrir o preenchimento aqui e posso usar qualquer cor que quisermos. Ou posso voltar ao estilo que acabamos de criar. E posso preenchê-lo com rosa. E lá vai você. Preencheu o interior. Mas como Aaron, para onde foi o ícone? Isso está aqui. É da mesma cor que o mindinho. Ok, vamos deixar esse ícone branco. O que precisamos fazer é se você clicar em Pinky, ele apenas abre os estilos aqui. Você pode não ver aqueles aqui que dizem cor de girassol. Você pode ver os estilos normais aqui. O que precisamos fazer é separar o Pinky. Você vê quando vamos para Pinky e você vê este pequeno ícone de ligação de corrente de quebra e diz estilo de desanexar, basta ir em frente e separá-lo. Isso significa que não será mais mindinho e será uma cor de forma livre que podemos escolher. Vamos fazer isso branco. Vamos em frente e enquanto estamos aqui, vamos adicionar isso ao nosso estilo de cor. Agora que selecionamos branco, você pode pressionar a pequena vantagem, ou desculpe, não o mais P0. Na verdade, vamos vê-lo. Quando você pressiona a vantagem, isso é algo que acontece muito. Você quer ir para seus estilos de cores, mas você pressiona Plus e vê como acabei de adicionar outra cor preta com 20% de opacidade aqui. E acabamos com duas cores. Você pode simplesmente adicionar mais cores. Se isso acontecer, basta pressionar o menos. Assim mesmo. Então você voltará ao seu branco. Se você excluiu acidentalmente seu branco para, não haverá preenchimento. Esta forma não tem preenchimento, sem traço, nada. Então, novamente, queremos adicionar outra cor. Acabamos de adicionar um padrão a cinza, clicando na cor próxima. Vá fazer isso branco. Tudo bem, estamos cozinhando com fogo. Agora queremos apenas adicionar isso de volta ao nosso estilo de cor apenas para facilitar para qualquer coisa branca, podemos selecionar o estilo de cor e não precisamos encontrar branco. Mais uma vez, os quatro pontos aqui onde diz estilo, clique nisso. Agora que estamos em nossos estilos de cores, o pequeno ícone de mais para criar um novo estilo. Aqui está você. E vamos chamar isso de branco. E boom, ficamos brancos como um estilo de cor. Vamos também fazer o texto aqui. Vamos fazer esse branco também. Tudo bem, legal. Temos nosso estado ativo, o estado em que o usuário clica nisso. Temos nosso estado de foco e temos nosso estado padrão. Vamos protótipo isso juntos. Então, agora estamos na guia Design. Vamos para o protótipo. Certifique-se de ter o início. Aqui no que diz teste que acabamos de fazer. Vou selecionar feminino. C assim. Quando eu estiver no modo protótipo, você verá essa pequena vantagem sempre no centro do objeto à direita. Se você não vir , você pode estar no modo de guia Design, certo? Então, se você não está vendo o que estou vendo, vá para a guia Protótipo no canto superior direito. Agora basta clicar e arrastar isso. Você verá a princípio que vai se encaixar na minha imagem, ia dizer, você quer essa imagem e apenas diga não, apenas continue movendo-a. Sem imagem. E vá para o próximo à direita. Depois de fazer isso, você verá o azul no próximo destaque do quadro de arte. Isso significa que temos uma boa seleção. E agora temos os detalhes da interação. Você geralmente terá alguns, você terá arrastar desclique enquanto paira, enquanto pressiona. E o resto deles, teclado, mouse, enter, mouse. Nem se preocupe com nenhum desses. Eu nunca os uso. Eu só uso onclick ou enquanto pairo. Vamos fazer isso enquanto paira. Boom, você tem seu primeiro protótipo. O que queremos fazer aqui é que você deseja preservar a posição de rolagem. Isso é se você tiver um site longo e tiver vinculado esses quadros de arte juntos, o padrão é se você tiver um botão na parte inferior da sua prancha de arte aqui, digamos que você tenha uma longa prancha de arte e você tem um botão na parte inferior. E você quer que o botão mouse e costure no próximo quadro de arte e você não tem a posição de rolagem preservada, o que significa salvar. Mantenha o usuário na mesma posição que a rolagem. Ele voltará para o topo da próxima tela disso, nossa placa. E o usuário na rolagem de volta para baixo para ver o botão lá. Se você tocar neste botão, preservará a posição de rolagem. Isso significa que você pode clicar em elementos em toda a sua prancha de arte. E exatamente isso preservará onde quer que o usuário esteja em cada uma dessas placas de arte para que eles não pulem para o topo de cada quadro de arte. Vamos seguir em frente e fazer isso só por nossa causa. Não temos pranchas de arte longas para este exemplo, mas vamos ligar isso agora. Basta deixá-lo imediatamente. Legal. Então, parabéns, você fez seu primeiro protótipo. E o que queremos fazer aqui é apenas garantir que o retângulo inicial esteja aqui no quadro de arte. Vá em frente e pressione play no topo. Você verá algo assim para mim que estou vendo. Novamente, olhe quando você passar o mouse sobre o ícone feminino, você verá que a forma aconteceu. Não há transição. É como muitas vezes, vamos adicionar uma transição a isso. Vou clicar onde ele diz enquanto a mistura do mouse, estou no modo protótipo. E isso abrirá os detalhes da interação onde diz animação. Vamos apenas dissolver. Isso significa que vai facilitar. Vamos fazê-lo em vez de facilitar, facilitar. Vamos fazer 800 milissegundos. Então vá em frente e feche isso e agora volte para, você pode pressionar play para voltar ao seu protótipo, ou você pode voltar para as guias superiores aqui na parte superior. E você pode ver como agora isso tem uma boa transição suave. Sim, isso é bom, isso é bom ali. Tudo bem, então agora vamos fazer o estado dos cliques, como voltar para o mouse. Certifique-se de que você está no modo protótipo. E, novamente, basta arrastar seu protótipo pequeno braço GUI para o quadro de arte de clique. Mais uma vez, eu poderia ter feito isso muito rápido, como segui-me. Veja como eu costurei o pairar para o estado ativo. Temos onclick. E vamos fazer um pouco mais rápido. Dissolvido 300 milissegundos. Deve estar tudo bem. Ou você pode fazer instantâneo realmente não importa na resolução padrão. Cabe a você. Feche isso. Agora temos nosso pairar. Temos nosso clique. Isso parece bom. Agora vamos pegar o estado. Vou diminuir um pouco, me certificar de que estou no modo protótipo. E vou costurá-lo de volta ao que acabamos de começar, o protótipo muito padrão. Placa de arte. E dissolver cliques deve estar bem. E voltarei ao nosso protótipo. Clique em feminino e mova o mouse para baixo nas costas. Esse padrão, obtivemos o mouse, você obteve o clique. Você tem que clicar se o mouse estiver para baixo ou você estiver no estado de focalização novamente. E você pode ver esse trabalho lá dentro. Incrível. Espero que isso tenha sido muito fácil para você. E vamos seguir em frente e passar para o menu e a gaveta. Vou fazer um novo vídeo que demorou um pouco mais do que eu esperava. Mas sim, vou fazer um novo vídeo e vamos pular e ver no menu e na gaveta. Vejo você lá. Adeus. 26. Crie - Web - gaveta de menu: Tudo bem, bem-vindo de volta. Antes de passarmos para os designs de menu e gaveta, lembre-se de pegar o voltar para sua guia Protótipo, não na guia Design, mas na guia Protótipo no canto superior direito. E pegue o início, que iniciará o protótipo para qualquer tela em que esteja. Esta será a primeira tela e o protótipo. Diminua um pouco, clique e arraste este início, e arraste-o para o quadro de arte do Mac nove, onde diz Menu e gaveta para o exemplo, não o que você fará, apenas o exemplo porque o que vai dar uma olhada nisso muito rápido. Ok, então basta selecionar a placa de arte Mac nove aqui. Pressione Play. E isso é o que vamos construir. O menu e a gaveta. Muito liso. É muito fácil. Vamos voltar ao arquivo do nosso projeto novamente, estou na janela da guia Protótipo na parte superior. O que eu quero fazer é voltar para onde diz o arquivo de projeto de padrões de massa de design no canto superior esquerdo. Pegue o início, o retângulo, mova-o para baixo até a seção Do. Ok, então temos o quadro de arte já criado para esse design aqui. Agora só precisamos fazer a prancha de arte para o menu. Na Figma tem uma ferramenta de placa de arte e parece a pequena ferramenta de corte no canto superior esquerdo. Vá em frente e clique nisso. Por padrão, ele oferece um monte de quadros de arte e tamanhos de quadros para diferentes telas de iPhone, telas tablet, desktop, apresentações, relógios, mídias sociais, todos os tipos de coisas. Você também pode clicar e arrastar e criar um personalizado também. Vamos clicar e arrastar e fazer um personalizado e fazer a forma que estou fazendo aqui como um retângulo vertical muito longo. Podemos torná-lo um pouco maior do que o quadro de arte à esquerda aqui. Se você ver que estou segurando. Não arraste isso para o outro quadro de arte como este. Você pode fazer pranchas de arte dentro de pranchas de arte, o que fica um pouco complicado. Por enquanto. Basta mantê-lo para a direita. Muito simples. Vamos em frente e volte para nossa guia Design. E vamos dar a isso uma cor de fundo. Então, quando eu seleciono o quadro de arte onde ele diz 596, vamos renomear isso na nomeação de camadas de nome. Vamos chamar isso de menu. Vamos chamar essa gaveta. Torne um pouco mais fácil falar sobre isso. Então você pode ver quando eu seleciono a gaveta, não há nada, não há padrões de design neste ou em qualquer elemento de design na guia de design aqui. Uma vez que selecionei, selecionei o quadro de arte porque não há nada além de prancha de arte aqui. O quadro de arte terá uma cor de preenchimento padrão como branca. Vamos para a cor de preenchimento. Funciona sólido. Vamos fazer um gradiente. Você verá onde diz linear. Isso é um gradiente linear ou a mesma coisa significa apenas uma transição de duas cores. Vamos fazer linear. Geralmente começa com branco e branco. O branco à esquerda, porém, é 100% de opacidade. O branco à direita é 0% de opacidade. E você pode ver que há um pequeno controle deslizante de opacidade aqui e uma porcentagem de opacidade aqui. Então você verá um 100% quando for selecionado a cor à esquerda e verá 0% à direita. O que queremos fazer é fazer a cor lá, certo, uma opacidade de 100% também. Vamos pegar a cor à esquerda. Agora. Vamos torná-lo rosa de um lado. E vamos torná-lo um pouco mais roxo na parte inferior. Sim, deve ser que deve ser bem legal lá. Mais uma vez, você pode controlá-los. Posso clicar sobre e fazer os gradientes. Agora isso é tudo vertical, mas posso fazê-los na horizontal. Eu posso fazer um ângulo mais inclinado assim. Você pode empurrar uma cor para baixo ou para cima. Você pode jogar com isso sozinho, mas vamos mantê-lo bem direto, cima e para baixo por enquanto. Vá em frente e feche isso. Eu adicionei os elementos aqui ao lado dessa gaveta já que estamos aqui no exemplo acima. Vá em frente e basta selecionar todos e arrastá-los para sua gaveta aqui. Muito fácil. Se você não fizer isso. Uma maneira de testar isso, às vezes você arrasta elementos para uma prancha de arte. Você vai ao seu protótipo e não os verá. E uma maneira de se certificar de que ele entrou no quadro de arte é selecionar onde diz gaveta. Então, selecione o quadro de arte real e mova-o. Às vezes você verá isso onde isso ficará. Está no topo da prancha de arte. E então você vai movê-lo. O conteúdo permanece, certo? Então, o que você quer fazer é garantir que isso esteja na prancha de arte em si. Outra maneira de fazer isso é selecionar todos os elementos aqui. Pressione Command C, vá até o quadro de arte e pressione Command V, e ele colará dentro desta placa de arte. Agora posso me certificar de que está lá. Agora que temos nosso quadro de arte, vamos movê-lo um pouco mais perto da tela à esquerda. O que queremos fazer é selecionar o menu. Já o tenho agrupado para você. Basta ir em frente e selecionar o menu. Vá para o nosso modo protótipo aqui. Clique e arraste o braço da GUI para a gaveta. É aqui que ele fica um pouco amado um nível profundo é que nós o temos em onclick. Vamos movê-lo para de Navegar para, para abrir sobreposição. Vou fazer isso mais uma vez. Então, tivemos um onclick como a ação e a função em vez de navegar para outra gaveta, queremos que isso abra e use essa gaveta e a abra como uma sobreposição. Sobreposição aberta. E você receberá um novo conjunto de detalhes de interação com base na sobreposição. Geralmente, o padrão é centrado. E vamos fazer isso aqui em um segundo. O próximo vídeo para o modal. O que queremos aqui não está centrado. Queremos que no canto superior esquerdo lhe dê os ícones mais comuns aqui também para que você possa selecionar centralizado superior, esquerdo, inferior. Vá em frente e clique no botão Fechar ao clicar fora. E adicione fundo por trás da sobreposição. E vamos fazer como 70% de opacidade aqui. Agora, o que isso vai fazer é lhe dar um pano de fundo. Então você verá o que dorme a animação por enquanto vamos mudar isso em um segundo. Você provavelmente se dissolveu ou talvez até mesmo no estado aqui. Mas vamos apenas ir, vamos colocá-lo como incidente por enquanto. E então vamos nos divertir um pouco mais. Mais uma vez. Temos onClick, sobreposição aberta, canto superior esquerdo ao clicar fora, adicionar fundo atrás sobreposto, temos uma cor preta aqui. Você pode alterar a cor do plano de fundo, mas apenas faça animação de opacidade preta e 70% instantânea. Vá em frente e feche isso. Vamos pressionar play no canto superior direito estão presentes. Isso nos levará ao protótipo e observará o que acontece. Você pode ver que ele abriu a sobreposição. Este é o 70% preto. Temos o menu aqui, mas você não pode sair disso agora. Não há como sair. Então, vamos fechar o botão X e levá-lo de volta a esta página. Então, entre a gaveta ainda no modo protótipo, vá em frente e selecione o x e apenas arraste-o de volta para o quadro de arte Baba t e faça onClick navegar para está bem. instantâneo deve ser perfeito. Vá em frente e feche isso. Agora vamos voltar e podemos pressionar play novamente. Volte ao menu. E agora, quando clicarmos em X, você o verá por perto aqui. Você verá quando eu, quando eu selecionei o quadro de arte e pressiono Play, ele apenas carregou o quadro de arte aqui. Tudo bem, então ele também carregará o protótipo com base em qualquer placa de arte que você selecionou. Então o que eu fiz foi eu voltei ou você pode voltar aqui, voltar para o Imax 17, pressionar play no canto superior direito. Lá está seu menu Fechar e isso parece bom, mas não tem nenhuma transição e tem frescura. Vamos adicionar algumas coisas legais a ele. Então, neste momento, o que queremos fazer é garantir que estamos no modo protótipo. Vá pegar nosso protótipo de menu aqui, abra os detalhes da interação. O que queremos mudar à medida que a animação a partir do instante, queremos que ela se mova. Quando ele se mover, você poderá definir qual direção ele se moverá . E isso é meio divertido. Você pode se mover de cima, movendo-se de baixo, movendo-se da esquerda ou mover-se da direita. Você pode mexer com isso. Teremos mais opções quando chegarmos aos protótipos móveis para mostrar como essas diferentes direções de mudança e formar a gaveta sobre o menu. Mas no nosso caso, queremos que ele se mova da esquerda e se mova para a direita, então queremos, e isso lhe dá uma pequena prévia aqui. Queremos que ele se mova para a direita. Vai entrar pela esquerda e avançar pela direita. E não se preocupe com a facilidade ou qualquer coisa que esteja bem lá. Então, vamos seguir em frente e fechar isso. E agora vamos voltar ao nosso protótipo aqui. Pressione o menu e veja esse slide. Você vê como essa fenda. Ainda não aplicamos nada do x. Mas ele se mudou. E funcionou como um bom menu de transição. Mas boom, eles esfriam Thich Nhat de efeitos sonoros, mas raramente. Vamos fechar isso. Agora vamos pegar o x aqui, pegar esse protótipo. E no Adicionar animação, o que queremos não é entrar. Queremos que ele se mova. Queremos a direção oposta, certo? Então, definimos o menu para entrar da esquerda e passar para a direita. E queremos que ele se mova da direita para a esquerda. E você pode ver que ele já está padronizado para a esquerda. Esse é o que queremos. Vamos fechá-lo. Volte ao nosso protótipo aqui. Mova-se da esquerda, saia, veja como isso funcionou. Às vezes, o que vai acontecer é que você acabará com o x. Você vai acabar com não um movimento para fora, mas um movimento para dentro. E veja a diferença aqui. Feche o x. foi um pouco instável. Veja como isso meio que não é ruim. Mas você notará que não se move em um lugar como se move e desaparece. Apenas note que se você estiver olhando para ele, parece um pouco instável. Estamos falando do protótipo da gaveta aqui. Se algo se moveu e mostrasse a gaveta e você e seu fechamento da gaveta devem estar sempre em Adam, mova-se para fora e selecione-a de volta para sair. E agora você verá a linha do fluxo se mover para fora. É sutil, mas é importante. Certo, Cool. Isso envolve o menu e a gaveta. Vou fazer outro vídeo só para manter isso curto, doce. E vamos para os modais. Vejo você no outro vídeo. Tchau. 27. Crie - Web - Modais e acordeões: Tudo bem, bem-vindo de volta. Espero que você esteja ficando muito bom e familiarizado com Figma. Vamos verificar os modais. Vou diminuir um pouco, apenas comandar menos ou Controlar menos se você estiver em um PC. Lembre-se, volte. Se você não vir esse pequeno retângulo que diz começar, você pode começar a projetar a guia. Então clique na guia Protótipo no canto superior direito. Vá em frente e pegue este retângulo e arraste-o para a seção modal onde obtivemos o Mac dez, pois o iMac dez é a camada. Vamos em frente e vou segurar z. Então estou segurando z e estou clicando e arrastando com minha lupa. E vou deixar ir e ele vai aumentar o zoom. E você fica muito bom nisso onde você está, eu estou em um Mac, lembro que estou fazendo Command, Command Minus Command Plus Command Menos Command Plus, e então eu estou segurando z, não me movendo. E então eu estou segurando a barra com a mão para me mover, então demora um pouco, mas isso se tornará muito intuitivo para você se ainda não for. Então, novamente, temos o retângulo do protótipo inicial à direita, no que diz exemplo. Isso carregará novamente o protótipo nesta seção. Então, esta será a tela que começa primeiro. Então vá em frente e volte para sua guia Protótipo ou na parte superior aqui, você pressiona o botão Presente e agora estará no protótipo modal. E se você clicar em modal, ele abre um modal. Se você pressionar o X, isso fechará. Super fácil. Isso será divertido, será rápido. Você provavelmente já está ficando muito bom nisso. Entendo a ideia. Espero. Vamos pegar o começo. Vamos levá-lo para esta seção que diz que você faz. Você pode ver que eu já tive os elementos para você aqui. Eu tenho o alto e o x aqui. O que queremos fazer primeiro é que queremos voltar à nossa ferramenta de quadro aqui. E queremos clicar e arrastar, então basta fazer um quadrado ou um retângulo. Isso realmente importa o tamanho, desde que o tamanho não seja tão grande quanto o quadro de arte aqui à esquerda, à direita, então queremos apenas um tamanho decente aqui. Nem é o modo de guia Protótipo. O que eu quero fazer é passar para o modo de guia design. Vou arrastar a alta para este quadro aqui. E também vou arrastar o x para isso aqui. Meu nome frame 936 aqui, vou nomear este um modal, só para que seja fácil conversar e falar sobre isso. Agora vou selecionar o modal e vou movê-lo. Se você está movendo e o alto não se moveu, era como se você não tivesse o alto aqui no quadro de arte. Então clique e arraste. Espere até que ele se destaque azul. Então você vai tê-lo dentro. Temos todas as peças que precisamos. Vai ser bem simples. Vá em frente e vou ampliar um pouco. Selecione o botão modal. Vá para o nosso modo protótipo. Arraste, não vá, não vá para essa foto. Queremos ir para o modal. Vai azul DUE armar para o modal. Temos padrões aqui da última animação que acabamos de fazer. Portanto, queremos onclick, mas em vez de navegar para, queremos sobreposição aberta. Mais uma vez. Onclick é bom. E em vez de navegar para, queremos sobreposição aberta. Olhe para o padrão para o centro. Isso é exatamente o que queremos. Queremos fechar ao clicar do lado de fora. E queremos adicionar a sobreposição de fundo e ainda fazer 70 per se aqui. Não precisamos de uma transição aqui, vamos mantê-la em vez disso. Certo, agora vamos descer. Ele deve abrir o modal. Vamos selecionar o X e vamos fechá-lo. Se você arrastar o X aqui, você pode fazer onClique, navegue até, e não faça nenhum movimento ou qualquer coisa, basta fazê-lo em vez disso. Na animação de estado, preservar a posição de rolagem é ótimo. Feche isso. Vamos selecionar a camada iMac 18. Pressione presente. Lembre-se de que seu início esteja ao seu lado. Pressione o modal e há sua sobreposição, seu pequeno modal. Pressione o X e você o fechou. Vamos adicionar uma pequena transição a isso. Vamos seguir em frente e selecionar o protótipo do botão modal que conecta o botão ao modal. E onde temos animação, vamos nos dissolver. E 300 milissegundos é ótimo. Feche isso. Vamos fazer a mesma coisa com o x aqui. Vá em frente e clique no x. se você estiver clicando no X e não conseguir ver os detalhes da transição. Como se você saísse e clicou e assim, Ei, eu não consigo obter esses detalhes de interação. Você pode clicar na parte superior onde diz interação, e basta clicar lá e ele abrirá também. Ou você pode clicar no pequeno braço GUI. E isso abrirá também. Vá em frente e faça com que ele se dissolva. 300 milissegundos é perfeito. Agora você verá a transição se dissolver um pouco. Fechar dissolver. Certo, legal. Vamos embalar dois em um vídeo aqui. Vamos para acordeões. Vou arrastar o get entre, voltar e não na guia Design, mas no modo de guia Protótipo. Vou pegar o começo, colocá-lo no exemplo do acordeão. Selecione iMac 11. Pressione Play. Você deve se parecer com este acordeão. Só queria que você soubesse que você é incrível. Nós amamos você, eu e minha namorada ou meu cachorro e meus amigos. E design feliz. Vamos clicar no seu incrível. E você vê como esse acordeão olha para aquela transição que foi linda. Ele não preencheu. Não me senti como um salto muito grande. Foi uma boa transição. Vimos a pequena cenoura ou a flecha se mover para 180 graus. Ele capotou. Vimos que o estado ativo agora para o seu incrível, vá para rosa. E isso revelou essa informação de nível infantil. E vimos o alto. Certo, ótimo, vamos voltar. Vamos voltar ao modo protótipo. Vamos pegar esse começo aqui. Arraste isso para onde diz iMac 19. E aquele que diz que você faz. Eu construí uma das manchetes de acordeão aqui, então vou entrar no modo de tabulação. A primeira coisa que vou fazer se você prestar atenção é que escrevi acordeão errado? Não sei se você pegou isso. Então, o que vamos fazer é aprender a ferramenta de texto. Então eu posso entrar na ferramenta de texto aqui. E posso selecionar isso de acordo com a ferramenta de texto. E posso fazer o a. Eu posso pressionar Escape no meu teclado para me tirar da ferramenta de texto. Ou eu posso apenas clicar três vezes neste campo de acordeão assim, e alterá-lo e segurar o turno porque é capital. E posso mudar isso para acordeão. Você pode ver que eu tenho, você pode selecionar o seu incrível. Você pode selecionar o, a cenoura ou a seta e o fundo. O que queremos fazer é selecionar todos eles e queremos agrupá-los. Então você tem o seu incrível. Vou segurar o turno. Vou selecionar a cenoura aqui. E vou segurar o turno, selecionar o plano de fundo. E eu posso Command G em um Mac ou Control G, como em Greg. Ou eu poderia clicar com o botão direito. E posso agrupar esta seção C onde ela diz grupo. Agora, este será um agrupamento. Se eu clicar nele uma vez e eu movê-lo, isso é o que significa. Está agrupado. E se eu quiser entrar e selecionar áreas diferentes, posso clicar três vezes. E agora posso entrar no agrupamento e clicar em desligar ou pressionar Escape. E isso vai tirar você desse agrupamento. Ok, então vou copiar isso, vou segurar a Option novamente, estou no Mac. Se você estiver em uma opção de PC, meu clique e arrasto, vou segurar o shift enquanto faço. Se eu não segurar Shift, entendo isso. Eu sou capaz de mover isso. Se eu segurar o turno, posso. Está me mantendo alinhado ao objeto que estou copiando. Vou deixar ir aqui. Meu zoom em apenas um pouco. E vou para o teclado de seta. O segundo cabeçalho sobe um pouco, só para que haja um pouco de distinção entre o superior e o inferior. nome do meu cachorro é mastigável. Diga que chewy te ama. Você pode escrever o que quiser. Mais uma vez, este é o seu mundo. Você não pode fazer, é verdade. Você pode fazer o nome do seu cão. Vou fazer a mesma coisa. Vou segurar a Opção. Vou clicar e arrastar para baixo. Vou segurar o turno, certo? Então estou segurando Shift. Então, sem turno, turno. Eu realmente não consigo me mover. Volte para baixo novamente. Mais uma vez. Vou setar no teclado. Perfeito. Digamos que vamos adicionar este. Adora comida. Oh, ela adora comida. Ok, então agora temos nossas três categorias do nosso acordeão. O que vou fazer é pegar os amores mastigáveis. Vou segurar Shift, pegar a comida mastigável adora. Esses dois, vou agrupá-los. Vou fazer um Comando G ou Controle G. se você estiver no PC. Vou fazer, mostrarei a outra maneira que você pode clicar com o botão direito do mouse na seção Grupos. Agora o que vamos fazer, vou mover o alto para cá. Vamos copiar este quadro de arte, colocá-los segurando a opção, e ver quando eu segurar Shift, posso fazer a mesma coisa com o quadro de arte agora mesmo. Sem turno, o shift o mantém em linha. Vou movê-lo para cá. Com o meu topo. Volte para o novo que acabamos de selecionar. Aqueles que agrupamos. Chewy te ama, mastigar adora comida. Vou mover isso para baixo. Vou levar o seu incrível. Vou pegar isso e agrupá-lo também. Agora vou desagrupá-lo. Vou clicar com o botão direito do mouse. E desagrupe. Agora eu deveria poder selecionar o texto e a seta. Exclua a seta, exclua o texto. E vou esticar, selecionar o elemento de fundo, esticá-lo até onde diz, chewy te ama. Vou subir um pouco só para ter um pouco de espaço entre os dois. Agora parece bom. Vou para o Command Minus. Agora vou selecionar meu clique triplo. Sim, sim, sim, sim. Sim. Eu triplo-clique drivel Glick, Drew legging livro. Eu sou um clique triplo para pegar apenas o retângulo onde ele diz que você é incrível. E eu vou aos nossos estilos, farei esse mindinho, mindinho aqui. Perfeito. Vou pegar o texto. Você é incrível. Se você não está recebendo, você está no nível do grupo. triplo, clique duas vezes em sala de gostar, ok, agora estão no seu incrível. Vamos aos meus estilos aqui. Vamos selecionar a cor branca. Mais uma vez, vou passar por clique triplo, clique triplo, clique triplo. Você também pode selecioná-los na paleta de camadas à esquerda aqui. Mas vou selecionar a seta. E também vamos deixar isso branco. Então o que vamos fazer com essa flecha é que vamos girá-la. Então, se eu passar o mouse para o canto da seta, você terá que ampliar para isso. Se você estiver muito distante, você não verá o mouse mudar. Você tem que ir como realmente ampliado. E se você passar o mouse em qualquer canto de um item ou objeto, poderá girá-lo clicando e arrastando. E então queremos girá-lo 180 graus. Parece bom. Vamos chocar a palavra High School, colocá-la aqui. E agora temos o acordeão aberto. Mais uma vez. Vá pegar iMac, camada de 22 anos aqui. Basta movê-lo para garantir que o alto chegue lá. Às vezes você verá que o alto parece estar no topo da sua prancha de arte. Vai ficar assim. Parece que está lá. Você vai olhar para o protótipo e você ficaria tipo, Por que não é o alto lá? Eu posso vê-lo no meu design, mas não consigo vê-lo no protótipo que te deixa louco. Mas apenas mova o quadro de arte apenas para garantir que ele esteja lá. E se eles não se moverem na prancheta e você não vai vê-lo no protótipo. Vou seguir em frente e Comando C. Selecione minha placa de arte Command V ou Control V. Se você estiver em um PC, estamos parecendo bem. Vamos voltar. Vamos entrar em nosso modo de protótipo. Clique no canto superior direito aqui, certifique-se de que temos o retângulo inicial ao lado do que diz que você tem. Clique, você é incrível. E arraste isso para o quadro de arte iMac 22. Onclick. O que se deve para a animação? Basta fazer instantâneo. Temos onclick, navegue para um instante. Vamos pegar o que está ativo à direita. Vamos arrastá-lo para este quadro de arte. A mesma coisa, onclick, navegue para o instante. Isso deve abrir e fechar. Ele adicionará alguns efeitos legais a isso aqui em um segundo. Vamos dar uma olhada no protótipo. Vou para o canto superior direito. Tenho que apresentar o seu incrível, abrir isso. E, em seguida, clique nele novamente, restrinja, feche-o. Mas não há erro de transição e não há coisas legais acontecendo nisso. Vou querer meus produtos, eu seria legal. Vamos adicioná-lo. Espere, apenas segure seus cavalos. Vamos fazer isso legal. 1 segundo. Vamos voltar ao nosso design aqui, e vamos torná-lo legal. Vamos fazer é ir para o seu incrível. Vou selecionar o protótipo aqui em animação. Vamos fazer uma animação inteligente. Isso vai deixar legal. Não se preocupe com a facilidade ou a duração do tempo. Faça a mesma coisa com o seu incrível. Vá em frente e selecione a linha do protótipo aqui. Vá para o smart animate. Vamos ver se tudo funcionou aqui. Clique nele. Parece um acordeão real. Isso é tão incrível. design não é legal? Uau, isso é como Bob Ross no futuro. Este é o próximo nível, Bob Ross tipo de coisa aqui. Eu posso ver aqui e clicar nisso por dias. Quer saber, eu só vou clicar nisso por um tempo. Espero que o seu esteja assim. O animado inteligente fica muito louco quando você faz esse recurso. Há uma razão pela qual eu fiz você agrupar. O chewy te ama. E o chewy adora comida. E também certifique-se de que ele esteja agrupado aqui. É que às vezes vou ver se consigo reproduzir isso. Não me siga. Só vou te mostrar, vou desagrupar tudo isso. Eu tenho essas seções aqui onde diz Shu, Ele te ama, mastiga, ama comida e tudo isso. Eu o desagrupo naquela prancha de arte e eu o agrupo aqui. Às vezes, isso não o tornará tão liso. Ainda estava bem. Você pode ver que há um pouco de atraso, embora não tenha o encaixe é como aconteceu quando agrupamos. Vou voltar e desfazer isso rapidamente. Ok, então estamos de volta onde agrupado tudo estava bem. Volte aqui mais uma vez. Certifique-se de que isso esteja agrupado. Veja isso, veja como você obtém essa transição suave e agradável. Isso porque esses dois são elementos agrupados que os mesmos elementos na placa de arte. Ao usar o recurso Smart Animate, certifique-se de que o que você não quiser animar está agrupado e certifique-se de que o agrupamento seja o mesmo em cada uma dessas páginas. Então, cada uma dessas páginas de protótipo, certifique-se de que esses agrupamentos sejam os mesmos. É, é, é uma coisa invisível que está dentro da Figma. Mas isso pode deixar você louco às vezes por que sua transição não parece tão suave e elegante. E geralmente é por causa dos agrupamentos. Então, se você está tendo esse problema, basta agrupar elementos e depois trabalhar entre essas duas páginas aqui e certifique-se de que os mesmos elementos estejam agrupados e, eventualmente, ele deve chegar a isso ponto. Olhe só mais uma vez, veja como isso é suave. Agora vamos desagrupar todas essas coisas aqui. Agora assista. Você não tinha esse gênero rápido que bondade com ele. Isso porque está desagrupado. Tudo bem, isso envolve acordeões. Vejo você na próxima aula, vamos falar sobre nosso próximo vídeo. Vamos falar sobre criação de contas e validação em linha, que aprendemos em um dos últimos. Aprendemos sobre validação em linha na conversa do formulário que fizemos. Vejo você lá em breve. Adeus. 28. Crie a -Web - Criação de conta + validação inline: Certo, legal. Então, vamos seguir em frente e passar dos acordeões e vamos para a criação de contas e validação em linha. Mais uma vez, vou me certificar de que estou na guia Protótipo para poder ver este pequeno retângulo azul. Se você não estiver, provavelmente você está na guia Design na parte superior aqui. Vá para o protótipo. Comece, vá em frente e mova isso para o iMac um. Agora estamos no exemplo. E vamos prosseguir e pressionar play no canto superior direito para mostrar o protótipo. Vamos entrar no protótipo aqui. O que vamos fazer é mostrar uma tela de criação de conta onde temos nosso e-mail e senha. E se você clicar na senha, uma vez, temos validação em linha mostrando os requisitos de senha estão sendo atendidos, exceto por um. E quando você clica novamente, digamos que você tenha adicionado o último número dois, sua senha. Todos os requisitos de senha são atendidos. Você pressiona Criar. E temos um pequeno spinner no botão para criar sua conta. E, eventualmente, isso o levaria para a página inicial do site Bobo me. E você poderia pedir um delicioso bom Bobo T na entrega dentro de dez minutos. Certo, Cool. Então aprendemos sobre esse botão se tornar um spinner. Quando fizemos a classe de botão, eu queria mostrar a vocês como construir isso dentro de um protótipo ao vivo. Vou para o canto superior esquerdo aqui para a guia diferente na parte superior, onde diz arquivo de projeto de padrões de design. Clique nisso. Vou passar um pouco para baixo do exemplo para o que diz que você faz. Vou clicar e arrastar, colocá-los no modo de guia Protótipo, não no modo de design, modo de guia Protótipo. Clique e arraste o início de novo para iMac 20. Isso iniciará o protótipo nesta página. E a melhor parte é que nem precisamos fazer nada nesta página. Queremos fazer é apenas copiá-lo. Alguém que detém a Opção. Clique e arraste. Posso segurar Shift para mantê-lo alinhado e copiar essa página. Queremos imitar esta página aqui onde temos a senha Criar Conta focada e no estado de entrada do formulário. E queremos fazer a validação em linha mostrando que os requisitos de senha estão sendo atendidos. Vamos pegar isso. Isso já está agrupado. O que podemos fazer, podemos desagrupá-lo, não vamos fazer quando ele for coisas animadas inteligentes. Então, vamos apenas desagrupá-lo. Você pode clicar com o botão direito Você pode fazer um Command Shift G ou Control Shift G se estiver em um PC ou pode clicar com o botão direito do mouse e simplesmente desagrupar. Vou selecionar o retângulo e uma mistura que eu quero projetar guia aqui, certo, não guia de design de protótipo. Veja a cor do traçado. Vou clicar nessa cor. E vou deixá-lo preto. Basta torná-lo preto. Agora vou selecionar os textos fantasmas. Vou clicar nisso. E vou fazer um Shift oito ou desculpa. Comando ou comando Z. Comando Shift, Sim. Certo, legal. Opção, desculpe, opção a para as balas. E então eu vou fazer um hífen de mudança no topo e seguir em frente e fazer essa cor aqui. Você pode ver que está definido como cinza para Vamos quebrar isso. Vamos desanexá-lo, quebrá-lo. Vamos torná-lo preto. Fácil de peasy. Espero que tenha sido Easy-peasy. Vamos seguir em frente e selecionar o texto aqui onde ele diz requisitos de senha. Vou ter a ferramenta de seleção. Só vou clicar três vezes nele. Fui pego, pego, pego, pego, clique triplo. Selecione pelo menos duas letras, pelo menos até uma letra maiúscula. Estou apenas clicando e arrastando para Juju. Vou para minhas cores aqui. Vou selecionar uma boa cor verde. E vou deixar estes verdes. Isso deve ser bom. Venha ampliar um pouco. Você vê que eu tenho esses pequenos círculos aqui. Selecione os círculos que vou segurar o turno. Vamos remover o traço. O traço agora é aquele cinza cinco, basta remover o traçado. Vamos para o preenchimento. E vamos também fazer disso um verde. Pode ser o verde correspondente ou pode ser de uma cor diferente, verde. Está tudo bem com o texto. Como verde maçã doce. Sim, isso é meio legal lá. Perfeito. Agora estamos mostrando validação em linha. Estamos mostrando ao usuário que você tem uma senha, está com boa aparência, mas você precisa adicionar um número. Então, vamos diminuir um pouco. Vou copiar este quadro de arte, iMac 23. Segure a opção no meu teclado, pegue a seta dupla, clique e arraste o arco. Comprei um novo quadro de arte. Isso mesmo. Ok, agora estamos de volta ao terceiro quadro de arte. Se eu diminuir o zoom, vá para o terceiro. Vamos adicionar mais algumas opções oito. Lá vai você. E veja onde isso diz pelo menos um número. Vamos seguir em frente e pegar isso. Agora vamos para a cor de preenchimento, mas você é como área. Como conseguimos esse verde que acabamos de fazer. Ao passo que algumas maneiras podemos fazer isso. Podemos pegar o conta-gotas e você pode passar o mouse sobre uma das cores verdes. Selecione e você pode ver o conta-gotas e o canto superior direito, selecione essa cor verde. Isso é um jeito. Mas você pode ver que está desligado porque não lhe dá a cor exata. É por isso que fazemos estilos. A melhor maneira é selecionar este verde. Vá em frente e veja onde diz 008937. Vamos transformar isso em um estilo. Vá em frente e clique nos quatro pequenos pontos aqui estilo. Agora faça o sinal de mais. Vamos deixar este verde. Ok, então agora para selecionar o texto aqui, pelo menos um, vá para nossos quatro pequenos pontos aqui. Você pode ver que a cor verde que acabamos de agora é uma Biblioteca de estilos. Pressione greenie, bang. Mas agora vamos fazer o mesmo conta-gotas aqui com, vou aumentar o zoom. Estou usando, sei que fiz isso rápido. Estou usando Z no meu teclado para ampliar essa área. Selecione o último círculo, veja a palavra raspar cinco traçados, exclua-o. Vou entrar no branco. E é aqui que o conta-gotas. Perfeito. Vá em frente e clique no conta-gotas dentro da janela de diálogo de cores, arraste-o e agora pegue esse verde. Isso funcionará. Temos o estado aqui onde você tem o padrão e você clica em seu tipo em sua senha, você precisa adicionar um número. Você atendeu a todos os requisitos deles. Vamos copiar mais uma tela aqui. Estou segurando a opção no meu teclado e turno, sou uma cópia que comprou na tela. Vamos em frente e selecione a cor cinza na parte superior. Então, vou clicar neste. Aqui está nossa faixa cinza de contorno C D. À medida que você aprende a melhor maneira de reutilizar suas cores, vamos criar um estilo para o cinza. Crie um novo estilo. Chame isso de cinza. Cinza. Bem, ótimo. Bem, existe Cool. Certo, legal. Vamos em frente e entrar nas balas aqui. Exclua o hífen, a barra. Vamos selecionar apenas o retângulo. Vamos voltar aos nossos estilos. Lembre-se dos quatro pequenos pontos ao lado do traço aqui. Vamos torná-lo tão cinza. Vou recuperá-lo nesse estado padrão. Vou selecionar este botão, ele está agrupado. Então, eu tenho que clicar duas vezes, clicar em true. Tudo bem. Ok, agora tenho que criar, excluí-lo. Exclua no teclado. Boom. Se você foi assim, você excluiu o botão. Isso significa que você não clicou triplo, clique triplo, clique triplo, clique triplo. Alguém para diminuir o zoom. Vou para o que está no topo aqui. Vou selecionar este spinner. Vou para o Comando C, como no gato, ou Controle C. Se você estiver em um PC, no Mac, vou me certificar de selecionar esta placa de arte aqui. 25, estou em um Mac, então vou Command V, como em Victor, e ele vai colar no lugar. Se você estiver em um PC, você faz o Control V e ele será colado no lugar. Se não acontecer, tudo bem. Basta movê-lo em cima desse botão. Pegue este quadro de arte. Estou aos 25 anos. Mova isso. Certifique-se de que tudo se mova com o quadro de arte. Se não acontecer, não está no quadro de arte, não aparecerá no protótipo. Tudo bem, vamos costurar essa coisa juntos. Costura bem simples. Pegue a senha criativa, vá para seu protótipo, o topo. Arraste o braço da GUI para esse. Queremos onclick, não queremos animar inteligente. Basta fazer instantâneo. Feche-o. Vá para o próximo. Tudo o que precisamos fazer é o formulário aqui. Arraste para cá. Instantâneo. Tudo o que precisamos onclick navegue para instantâneo. O mesmo aqui. guia protótipo pegou um pequeno braço GUI conectado à próxima tela, clique em navegar para instantâneo. E isso deve ser uma validação completa em linha com o spinner bônus no botão. Certifique-se de ter a urina, a guia Protótipo. Certifique-se de estar ao lado do u du. Pressione a camada iMac 20 aqui, pressione play, clique em criar uma senha, Validação de linha. Mais uma vez. Adicionamos esse número. E ainda temos que fazer o Create. Vamos voltar para a guia superior esquerda e voltar para o nosso arquivo de design. Você pode ver essa tela apenas selecionando-as. Quando você clicar na guia Protótipo, você verá os braços GUI do protótipo conectados. Temos essa conexão. Fizemos o errado. É por isso que você pode ver que eu fiz o formulário aqui. Você pode fazer o Período de Comando para mover as ferramentas também, como ocultar tudo na Figma, comando Barra de Espaço de Período. Você pode ver como eu coloquei esse braço para aquele, o campo de formulário aqui. E este não deve ser o campo do formulário, deve ser o botão. Vou fazer outro período de comando, ou se você estiver em um controle de PC, período de controle. Vou excluir este braço. Então, como você o exclui como algumas coisas que você pode ir para interações aqui na parte superior, estou apenas pressionando menos e isso irá excluí-lo. Ou você pode simplesmente clicar no braço da GUI desligado. Não conecte isso a nada. Basta soltar o mouse, clicar e arrastar, solte. E agora vamos pegar o botão Criar e arrastá-lo para lá emclique em navegar até. Volte ao nosso protótipo aqui podemos pressionar play. O guia automaticamente para a guia Protótipo. Pressione Criar. Olhe. Muito incrível. Vejo você no próximo vídeo. Vamos cobrir suspensos. Vejo você lá. Tchau. 29. Crie - Web - Dropdown: Tudo bem, bem-vindo ao próximo vídeo onde vamos cobrir suspensos. Mais uma vez, lembre-se que o modo de guia Prototype pegou um pequeno retângulo inicial. Arraste este todo o caminho até o exemplo do menu suspenso que isso vai iniciar o protótipo desta seção aqui para que possamos ver como é o menu suspenso. Vá em frente e pressione play no topo. Tudo bem, então aqui está nosso menu suspenso. Queremos selecionar um estado. Clique no menu suspenso, a seta vai para 100, 80 graus à medida que o flip gira. E então aqui está o que vamos descobrir na Figma é que eu posso rolar apenas no menu suspenso. Como um passeio por todas essas opções aqui. E se eu clicar em, digamos Califórnia, você verá a Califórnia. Eu clico de volta nele. Vejo o menu suspenso. Posso clicar de volta. Muito simples, mas também tem alguma complexidade, mas deve ser bem fácil. Vamos voltar e garantir que estamos no modo protótipo aqui. Pegue o braço inicial, traga-o para você. Faça. E vou ampliar um pouco. Eu adicionei todo o texto aqui para todos os estados ao lado da direita. Vamos mover isso um pouco. Apenas mova isso. Vou pegar o quadro de arte iMac 21 aqui. não estou pegando os elementos dentro, agarrando o quadro de arte. Estou segurando a opção. Vou copiá-lo para a direita. Vamos obter o estado aberto para o menu suspenso. Então, a primeira coisa que você pode ver como está agrupado, basta desagrupar tudo, direito G, clique com o botão direito do mouse em desagrupar. Vamos selecionar a Esperança pode ter que desagrupar isso novamente. Vamos selecionar apenas a cenoura ou a seta e girá-la novamente. Você tem que aumentar o zoom. Estou segurando z, ampliando. Vá em frente e vire esse 180 graus. Assim mesmo. Queremos fazer é que queremos fazer esta pequena caixa branca aqui. Vou entrar na ferramenta retângulo. No canto superior esquerdo, você verá que você tem as ferramentas de forma. Você tem retângulos, linhas e setas e elipses, polígonos e estrelas e muitas outras coisas. Mas vamos entrar na ferramenta retângulo, basta clicar nela. Ele será padrão como ótimo cinza. Só vou clicar e arrastar meu quadro de arte. Mais uma vez. Mova a prancheta, certifique-se de que as caixas cinzentas lá. Parece bom. Agora vamos dar uma sombra a essa caixa cinza. Mas antes de fazermos isso, vamos torná-lo branco. Então volte aos nossos estilos aqui. Vamos pegar nosso branco. Não conseguimos vê-lo. Vamos em frente e vá para nossos Efeitos. Se você estiver na guia Design, basta me seguir aqui. Vou para efeitos. Vou adicionar um efeito. Vai ser padrão soltar sombra. Lembre-se do que eu disse na minha classe Shadow, não quero usar sombras padrão. Você pode ver o que eu fiz aqui. Há um pouco como, parece uma lâmpada ou um ícone de luz solar. São suas configurações de efeitos. Queremos editar os estados padrão dessa sombra. Então você tem quatro no y, que é a parte inferior, a linha horizontal. O que é ir em frente e fazer cinco no x, que é a seção vertical, cinco no y. Então, o que sempre fazemos? Não sei o que fazemos neste momento erro? Nós adicionamos desfoque, muito desfoque. Tipo 30, estou segurando o turno. Você pode simplesmente digitar 30. Vamos apenas ir 30. Vamos um pouco menos do que isso. Vamos fazer 20. Certo, legal. Agora vamos adicionar um pouco de cinza azulado às sombras muito fortes. Parece bom como lá. Isso é 909. Você pode apenas um pouco em qualquer lugar lá em cima. Está tudo bem. Como se esta área estivesse boa. Certo. Feche isso feche a caixa de diálogo de sombra solta. Perfeito. Temos nossa sombra. Vamos empurrar isso um pouco para cima nas setas do teclado. Lá vai você. Eu também vou pegar a ferramenta retângulo, clicar e arrastar e apenas fazer o pequeno braço de rolagem. Novamente, não podemos usar Figma para fazer esse pergaminho como faria quando foi construído. Mas ajuda a informar o usuário e o protótipo. Se fôssemos testar isso, essa informação, todos os estados à direita aqui são roláveis. Ou você não pode fazer esse movimento, certo? Como quando estou nisso, não posso estar rolando. Isso é outro É um pouco mais. Você pode, mas é uma outra aula com antecedência. Classe e provavelmente nem vale a pena o esforço para fazer essa coisa rolar. Pequena forma cinzenta lá. Vou pegar todas as mensagens aqui à direita. Vou arrastá-lo para o meu arquivo. Você pode ver quando ele entra no arquivo porque não deve sair do quadro de arte. Vou arrastar para o meu quadro de arte. Ele deve se destacar assim. Deve ser cortado, certo? Então, quando eu entrar aqui e arrastá-lo para dentro, quero que ele vá lá e corte lá você vai, assim. Vamos movê-lo um pouco aqui, certifique-se de que está cortado. Vou ampliar um pouco. Aqui está o kicker aqui. É isso que vamos fazer é direito do mouse sobre isso. Não importa onde você o posiciona. Você pode colocá-lo em qualquer lugar na foto. Isso realmente não importa por enquanto. Vamos clicar com o botão direito do mouse sobre ele e ir para a seleção de quadros mais uma vez, certo? É super importante. Super, super importante. Clique com o botão E então fazemos a Seleção de quadros. Certo, ótimo. Então agora isso criou um quadro. Se você olhar na paleta de camadas à esquerda, temos um quadro. E se você clicar e abrir isso, temos todos os estados aqui, você não precisa fazer isso. Vou Command Z voltar. Então você pode ver isso. Veja como nas camadas eu tenho todos os textos aqui para todos os praticamente uma caixa de diálogo para o texto e todos os estados aqui. Se eu clicar com o botão direito do mouse sobre isso, vou enquadrá-lo. E quase tem como um agrupamento. Mas o agrupamento de quadros é um pouco diferente de um grupo. Agora, o que queremos fazer é que eu quero diminuir o zoom e pegar a parte inferior deste quadro. Então, vou selecioná-lo. Vou pegar o fundo. E estou em um Mac, vou segurar o Comando. Enquanto estou segurando o comando, estou empurrando esse quadro para cima. Deveria ficar assim. Se se parece com isso. Sim, você é bom. Ok, então sim, apenas certifique-se de que você tem o comando. Certifique-se de ter a camada de quadro. Clique e arraste isso para cima. Então, à direita aqui, temos nossa seção de quadros. Estou na guia Design. Seção de moldura. Isso pode ser um pouco complicado, mas ele é bom. Ele é bom. Bem, queremos fazer o conteúdo do clipe. O que vai fazer? Vai recortar o conteúdo. Este quadro. Veja como isso fez isso. O que estava passando por isso mais uma vez. Vou fazer isso rápido desta vez. Acabei de ter minha ferramenta de texto. Eu escrevo ou apenas minha caixa de diálogo de texto. Clique com o botão direito na seleção de quadros Eu mantenho o comando. Se você estiver em um PC, você controla clique e arraste. Traga esta caixa para cima. Fui para a área de design certa, conteúdo do clipe, boom. Agora arraste isso sobre o menu suspenso. E o que queremos fazer agora é manter o Comando ou Controle. Novamente, se você estiver em um PC e cortar essas informações para caber apenas na caixa de diálogo suspensa. Assim mesmo. E então pegue o topo segurando, novamente segurando o Comando. Se você estiver fazendo isso, você não está segurando o comando. Mantenha o Comando ou Controle. Se você estiver em um PC e mova isso para o canto superior direito. Se você não estiver, se você não estiver segurando isso, você saberá porque está movendo a caixa de texto. Queremos o comando de camada de quadro. Também vou trazer a esquerda um pouco para fora. Lá vai você. Ok, então vamos pegar o próximo estado que vou arrastar. Vou copiar a primeira página aqui para a direita, apenas a página padrão. E vamos digitar na Califórnia, você pode colocar em qualquer estado que quiser. E vou fazer isso preto. Vou voltar para quebrar a cor para aqui à direita ou no preenchimento e apenas torná-la preta. Certo, perfeito. Temos essa noção do menu suspenso. Agora vamos costurar isso junto o select e certifique-se de que seu início esteja na seção que você faz. Vá pegar o estado, arrastá-lo para o próximo quadro de arte emclique, navegue para perfeito instantâneo. Agora, selecione a camada de texto aqui e arraste essa para o próximo quadro de arte. Onclick navegue para perfeito instantâneo. Vamos dar uma olhada nisso, então vamos adicionar mais uma coisa. Vá em frente e vá para o topo bem aqui. Pressione Play. Clique em seu menu suspenso e você pode ver que ele não está rolando. Não há rolagem acontecendo agora. Pressione Califórnia. Boom. Certo, isso funciona bem. O que precisamos fazer é fazer esse pergaminho. Agora, vamos pegar esse texto aqui. Onde vamos produzir? Se você o tiver no design, verá que ele se parece com isso. No modo protótipo aqui, veja onde ele diz rolagem de estouro. Então eu tenho essa caixa selecionada, faça rolagem vertical. Agora vamos voltar aos nossos protótipos. Então, ele começa com a página inicial. Então, selecione iMac 21 layer. Tudo bem, então vamos voltar para a página padrão deles. Pressione Play. Presente. Não vá para o protótipo, precisamos recarregá-lo. Basta pressionar Jogar aqui e, em seguida, clicar neste menu suspenso. Você deve ser capaz de rolar dentro disso, você também pode clicar e arrastar e olhar, há todos os estados. Easy-peasy clicará na Califórnia. Boom. Isso não é legal? Muito, muito legal. Vamos pegar a entrada do Estado da Califórnia. Copie esse também. Agora vamos selecionar nosso menu suspenso. Vou sair do modo protótipo. Vou voltar ao modo de design. Basta selecionar todas as áreas suspensas. Pressione C ou Command C ou Control C se você estiver em um PC. E vamos selecionar a camada que acabamos de copiar. Este é o iMac 25, e eu vou, estou em um Mac, então Command V, se você estiver em um PC, Controle V, cole isso no lugar. Agora vamos selecionar o estado ativo, certo, então acabamos de ter o que estava aberto. Você pressiona Califórnia. Temos o estado ativo dessa lista suspensa. Vamos conectá-lo a este ao clicar e navegar. E então isso já deve estar ligado aqui. Ótimo. Então, agora você pode ver o que parece se clicar novamente na lista suspensa e selecionar Califórnia novamente. Certo, legal. Essa foi uma conclusão completa de tudo para a web. Vejo você no próximo vídeo que iremos para os protótipos móveis e vamos criar protótipos de algumas interações móveis. Vejo você lá. Tchau. 30. Crie - Iphone - modal de tela cheia: Agora você provavelmente é um Figma Pro. Você está ficando bom na Figma. Vamos fazer é mudar do protótipo da web deles aqui. Então, no canto superior esquerdo, você deve ter páginas aqui no topo. Vamos mudar para o protótipo móvel, e são as mesmas funções aqui que vamos entrar. Eu já tenho tudo isso pré-construído. Deve ser divertido. Vamos fazer isso juntos. Já fiz isso. Se você estiver na guia Design, ela ficará assim. Se você estiver na guia Protótipo novamente, temos esse retângulo inicial aqui. Já tenho o primeiro protótipo pronto para ir aqui, e faremos este no segundo. Então, vamos verificar isso muito rápido. Basta pressionar Selecionar iPhone, a camada aqui. Pressione Play. Isso vai abrir um novo protótipo. Você pode ver e ver como isso se cortou. E então o x desliza de volta para baixo modal de tela cheia com um movimento que sobe e depois se move para fora se isso cair. Muito liso. E também é fácil. Então, novamente, a primeira coisa que vou fazer é ter certeza de que estamos na guia Protótipo no canto superior direito, arraste o início. Vá em frente e empurre isso aqui. Vamos pegar uma nova ferramenta de quadro aqui na parte superior. Fizemos isso no último protótipo da web. Vá pegar o quadro. Estou usando o iPhone 11 Pro X aqui. Com a Ferramenta Frame selecionada. Cliquei no acordeão do iPhone aqui, e fiz o Pro X. E se você clicar nisso, ele deixará cair uma placa de arte para você. Vamos até nossas camadas aqui e apenas nomeie esta. Vamos chamar isso de modal. Certo, legal. Então, vamos pegar desta prancha de arte aqui. Vamos pegar o alto. Basta ir em frente e colocá-lo Comando C, comando V. E vamos pegar o comando x C ou Control C. Se você estiver em um PC. Vá em frente e coloque isso aqui. Então, temos todas as peças aqui. Super fácil. Vamos garantir que este x não vá para esta tela aqui. Então, basta remover a interação. Você pode pegar o braço da GUI e simplesmente puxá-lo para fora. Vamos selecionar uma visualização. Vamos começar a guia Protótipo. Clique nele para onde diz: oi, temos no toque, então ele será padrão. Essas telas estão vindo, se você se lembra de quando fizemos a seleção de quadros, fomos para as telas do iPhone. Quando você entra nesse modo de protótipo, agora, ele sabe que você está ligado, você está usando dispositivos móveis. Em vez de onClick. Agora está na parte superior ou em arrastar e oferece as mesmas funções, mas apenas muda de um onclick para um não toque. Muito fácil aqui. Já fizemos isso antes. Em vez de navegar para, vamos abrir. Na verdade, mantenha isso o mesmo. Navegar dois é o mesmo. Ao toque. O que queremos é na animação, animação aqui queremos que ela se mova e não da esquerda ou da direita ou de baixo. Queremos o up. Vamos fazer isso e vamos voltar e brincar com isso um pouco. Vamos nos certificar de que isso esteja se movendo, não se mova. E então vá em frente e pegue o x, arraste isso de volta para a tela em que estávamos apenas e não mova. Queremos sair. Não queremos que desça novamente, então mova-se para fora e para baixo. Ok, vamos selecionar a tela inicial que temos aqui, a prancheta pressione Reproduzir no canto superior direito. Vai nos levar ao protótipo. Devemos ter a mesma coisa que você está vendo aqui. E o x se moverá para baixo, mover-se para cima, mover-se para baixo. Então, o que acontece aqui é o que é interessante. Você será capaz de saber se eu selecionar o x e voltar para o protótipo e eu não me mudar, eu me mudo. Veja o que acontece. Vou voltar ao nosso protótipo aqui. Você pode apenas pressionar play se quiser. Isso parece bom. Agora assista ao x. veja como a outra tela ficou em cima dela. Veja a tela se mover por cima. Isso é estranho, você nunca teria um, você nunca verá isso em qualquer aplicativo, aplicativo móvel que você usa. Isso porque sentimos ou você não falhou, mas esquecemos de colocar o x não em um movimento no estado, mas um estado de saída. Agora vamos voltar. Lá vai você. Isso deve seguir de qualquer maneira que a tela entrar. Ele também deve se mover para fora da mesma ordem oposta. Move-se para dentro e se move para fora. Vamos tentar outro. Vamos clicar no botão de visualização aqui apenas por diversão z's, digamos que esta tela virá da esquerda. Agora vamos dar uma olhada nessa visualização pressionada, ver como essa tela entrou pela esquerda. X desce. Isso foi estranho porque a tela veio da esquerda. Por que está indo para baixo quando se move? A mesma coisa que podemos fazer o X clique na interação aqui no canto superior direito ou no braço GUI aqui. E em vez de misturado, não, não entrar, sair. E então o que está acontecendo em vez de vir da esquerda, queremos que ele entre e se mova da esquerda para a direita. E isso lhe dá um pequeno exemplo. Figma gnose é meio confusa. Então eles disseram: Ok, isso é o que você vai, alguém vai se parecer. Então, novamente, vá para a direita. Agora, você vai fazer isso deslizar para dentro e o x deslizará para fora. E, geralmente, para essa interação, você não gostaria de realmente, você gostaria de uma flecha, como a flecha voltasse e então ela voltará. Então, para o outro onde ele se moveu quando foi movido para baixo e isso foi um movimento para cima. É aí que você quer o x, certo? Então você quer que o SlideUp X seja fechado. Xs é o padrão de design adequado para esse. Ok, legal, isso era modais de tela cheia. Vamos fazer um celular suspenso, que é diferente de um menu suspenso da web no próximo vídeo, e eu te vejo lá. 31. Crie - Iphone - Dropdown: Certo, legal. Bem-vindo de volta. Mais uma vez. Tipo de como ele começou o vídeo e certifique-se que você está na guia Protótipo aqui no topo. Mova esse pequeno retângulo inicial até aquele em que diz seleção suspensa móvel , sobreposição inferior. Temos o exemplo aqui. Vamos em frente e selecione este quadro de arte. Pressione play no protótipo. E você verá que temos uma interface mais escura e um menu suspenso de IU escura. E isso é diferente do menu suspenso que fizemos na web. Se você se lembra, o menu suspenso aqui em coelho só tem um pequeno menu suspenso pelos campos do formulário. E você pode rolar aqui. Para dispositivos móveis, é diferente. Ele pega todo o espaço imobiliário do dispositivo e ele vem de baixo. Isso é um menu suspenso modal. É diferente de um menu suspenso da web. E digamos que eu selecione só porque é mais fácil rolar aqui. Digamos que eu selecione vermelho. Agora temos o menu suspenso selecionado. Podemos fazer outra versão de um menu suspenso onde você tem um x aqui para excluí-lo. E aí você tem isso. Vamos construir isso. É bem simples. Novamente, como de costume, verifique se você está na guia Protótipo. Pegue o retângulo inicial, mova-o para baixo para onde ele diz que você faz. E eu praticamente tenho a tela antes e depois aqui. Você pode ver onde ele diz Selecionar cor e vermelho. O que queremos fazer aqui é que queremos fazer esta seção suspensa. O que vamos fazer é pegar a Ferramenta Frame, ir para o iPhone Pro X, basta clicar nela. Vai cair o mesmo tamanho de prancha de arte. Vou colocá-lo entre o menu suspenso anterior ao padrão e entre o padrão ativo aqui. O que vou fazer é deixar isso menor. Vou clicar na parte superior e apenas clicar e arrastar. Basta torná-lo menor. Certo, legal. Então, vamos apenas copiar algumas dessas coisas aqui. Temos um sabor selecionado. Vou comandar C ou controlar C. Vamos seguir em frente e colar isso no comando V, como em Victor ou Control V. Se você estiver em um Mac. Vamos usar a ferramenta de linha para o resto dessas coisas. Mais uma vez, vamos para as ferramentas de forma no topo. Pegue a linha em vez disso. Basta clicar e arrastar. Você não precisa ir a placa de arte completa com aqui ainda. Apenas certifique-se de que esteja no quadro de arte clicando no quadro de arte e movendo-o. Certo, legal. Agora vamos torná-lo cheio. Você deve ver que deveria, não deve ser capaz de vê-lo se for mais longo do que o quadro de arte. Se for assim, você pode ver as linhas saindo do quadro de arte. Não está na prancheta e mova a prancheta. Veja. Queremos ter certeza de que está no quadro de arte. Vamos fazer essa linha preta como 10% de opacidade. Então você pode ver como eu fiz isso. Não vou me deixar colar isso rapidamente. Pegamos essa linha preta, fomos para as camadas onde ela diz passar, há um, um 100%, basta fazer 10% e depois pressionar Enter no seu teclado. Vou pegar esse texto e eu vou clicar três vezes nele do lado direito, pegar este texto. Eu segurei a opção, cliquei e arrastei para baixo. Clique triplo. Vamos chamá-lo de vermelho. E agora vamos. Agora que estamos dentro e lemos selecionados, vamos para nossa camada de fonte aqui. Vamos fazer como 30. Lá vai você. Agora vou fazer disso uma cor, qualquer vermelho que você quiser. Vamos fazer o próximo novamente. Agora você vê como eu fiz isso. Apenas Opção, segure, clique e mude. Clique triplo. Tenha todas as minhas camadas de texto aqui. Posso alinhar à esquerda, centralizar alinhamento, alinhado à direita. Você pode torná-lo regular, ousado, o que quiser. Eu vou mantê-los todos consistentes no entanto. Vamos fazer este azul. Vou fazer qualquer cor azul aqui. Opa, eu não o selecionei, então clique triplo, certifique-se de ter esse texto selecionado. Vá azul. Agora vamos fazer verde. Mesmo negócio. Muito fácil. Só vou usar o verde que já usamos. Eu não sei. Vamos fazer roxo. Vou quebrar a cor que acabamos de ter. Vá pegar roxo em qualquer lugar. Você pode fazer qualquer cor que quiser aqui. Ok, então vamos pegar as setas são as linhas e isso é bem legal. Assista isso. Vou fazer isso. Vou segurar a seta dupla opção no meu teclado. Clique e arraste a tecla Shift pressionada, certo? Então isso é sem mudança, turno, eu não posso me movimentar e apenas dar uma boa horizontal. Estou olhando para 70 pixels lá. Você pode ver como meus pixels lá. Estou olhando para 70 pixels. Você pode fazer qualquer coisa, está tudo bem. E depois solte. E então faça, estou em um Mac, faço o Command D, ou se você estiver em um PC Control D e ele copiará esse mesmo espaçamento. Lá vai você. Agora vamos encaixar isso. Centrado nesses espaços. Eles são roxos. Certo, Cool. Tudo bem, então agora precisamos fazer é voltar ao nosso protótipo, selecionar a cor favorita, clicar e arrastá-la aqui. E fizemos isso antes de entrarmos na torneira. E aqui está o verdadeiro que queremos em vez de navegar aqui no canto superior direito. E os detalhes da interação, se você não o vir, basta clicar onde diz Tap. Queremos sobreposição aberta. E veja como o padrão é centrado. Queremos o centro inferior aqui. Feche, saí, adicione plano de fundo. Você pode fazer 70. Pressione Enter. Nós não queremos, queremos mudar do topo em já sabia o que queríamos. Ótimo. Perfeito. Adicionando agarrar vermelho, clique nele para o próximo. E não queremos nada além de apenas um instante. Ao toque. instantâneo deve estar bem. Vamos pressionar play no canto superior direito. Aqui está seu menu suspenso modal. Isso é legal. E selecione vermelho e ele desaparece. Ok, vamos para o x só que possamos fechá-lo e brincar com ele. Então pegue o x novamente, isso é agrupado. Então clique triplo. Arraste aqui. Em vez disso, no topo. Sim, parece bom. Clique no X porque volta ao menu suspenso Selecionar cor, modal , móvel, pão, X, doce, fácil. Ok, te vejo no próximo vídeo. Vamos rever um pop-up modal também deve ser fácil. Vejo você lá. Tchau. 32. Crie - Iphone - Modal, Barra de título e menu: Tudo bem, bem-vindo ao próximo vídeo. Vamos fazer um pop-up ou um modal em um dispositivo móvel. Super fácil. Já fizemos isso. Vamos seguir em frente e pegar isso, começar aqui e arrastá-lo para baixo. Fizemos isso pela web. Só quero fazer isso rapidamente para o dispositivo móvel. Selecione o quadro de arte aqui, pressione play. Mais uma vez. Agora estamos de volta a um fundo branco. Aqui está seu botão e confira. Aí está o seu modal. Pressione Fechar. Certo, legal. Vamos conferir aqui. Agarrado certifique-se de que você está na guia Protótipo. Mesmo negócio. Pressione o botão Iniciar aqui também. Você já tem todas as seções aqui. O botão alto e fechar. O que queremos fazer aqui é pegar a ferramenta Prancheta aqui. Vá para o quadro. Faça a mesma coisa. Iphone 11 Pro X à direita. Ferramenta de moldura, iPhone Pro X. Agora vamos torná-lo um pouco menos alto, um pouco menos largo. Algo assim. Você saberá porque você pode movê-lo aqui e ver. Sim. Certo. Sempre podemos ajustar isso mais tarde. Isso é apenas colocar o High aqui, mas o x, e vamos colocar o x no canto superior esquerdo, basta facilitar para o usuário. Se eles tiverem a mão direita segurando o dispositivo, eles podem usar a mão esquerda e fechá-la na parte superior. Já fizemos isso muitas vezes, acho que já. Vá em frente e pegue o botão de texto, arraste-o para este quadro onde ele diz ao toque, lembre-se que queremos fazer, o que é isso? Sobreposição aberta, aberta à direita. Ele pode ser centrado uma vez, fechar ao clicar fora. Vamos fazer 70. Podemos fazer menos, podemos fazer 50% de opacidade neste momento. Vamos fazer uma transição de dissolução aqui. Agora vamos pegar o x que o fecha, arraste-o para esta prancheta ao toque. Navegue para dissolver. Deve ser perfeito. Vamos selecionar esta prancheta pressione play. Aperte o texto. Aí está o seu modal. Você pode pressionar X para fechá-lo. Parece um pouco largo demais. Vamos diluí-lo um pouco. Então eu vou pegar o quadro de arte, apenas meio que empurrá-lo um pouco, colocar esta rua de alta tecnologia. Na verdade, vou encolher um pouco o espaço vertical também. Também podemos fazer é selecionar o quadro de arte aqui e ir para sua guia de design e onde você tem. Então, novamente, fui selecionado o quadro de arte modal movido do protótipo para o design. Na área do quadro, há esse pequeno ícone de um canto chamado raio de canto. Você pode arredondar isso. Vamos fazer como 15. Lá vai você. Ele arredondará as bordas dessa placa de arte. Vou voltar. Vamos fazer nossa guia protótipo aqui na parte superior. Pressione Play. Lá vai você. Isso é melhor. Você pode clicar fora desse modal e fechá-lo. Clique no X para fechá-lo. Bing, bada, boom, você é um profissional. Você já fez isso antes. Vamos seguir em frente. Ok, então vou pegar o começo aqui. Em vez de iniciar um novo vídeo, vamos continuar porque é assim que nós rolamos. Pressione o botão Iniciar, arraste-o para o próximo. Este é o menu e a barra de título mais a sobreposição fixa e esquerda do movimento no menu se moverá da esquerda e nós o fecharemos. Volte pela direita. Vamos prosseguir e pressionar play no protótipo, e vamos fazer isso. Já construímos o menu, mas aprenderemos como consertar as coisas. E você pode ver, eu posso rolar, posso clicar e arrastar, ver como o menu está corrigido lá. E se você clicar no ícone, deslizar, fechar osso, seu profissional nisso. Ok, então vamos pegar o começo. Empurre-o para baixo até o u du. Acho que já tenho essa barra de título selecionada para nós. Então confira. Tudo o que você precisa fazer é selecioná-lo, ir para a guia Design e onde você vê restrições aqui. Então, novamente, selecionei o quadro de arte. Tenho restrições. Veja onde ele diz posição fixa ao rolar. Vamos em frente e, na verdade, antes de fazermos isso, vá para o seu protótipo. Basta pressionar play. Certifique-se de ter aquele que diz que você tem. Não. O exemplo, aquele que diz que você pressiona Reproduzir e ver como a barra de guias e a barra de status , elas não são corrigidas. Isso é o que parece agora. Agora vamos selecionar esta barra de título. Volte para nossa guia Design na seção de restrições. Faça a posição fixa ao rolar. Centro que você pode colocá-lo no topo e no centro, no centro, no centro superior. Volte para o seu protótipo aqui. Pressione Play. Agora role e veja como ele permanece em posição. Super fácil. Vamos apenas bater rapidamente um menu aqui. Então, vamos em frente e vá para nossas ferramentas de quadro. Pegue o quadro à direita aqui. Vamos fazer o iPhone Pro X. Vamos torná-lo um pouco menos largo. E desde que a prancha de arte ao lado dela, certo? Então, deve ser tão longo. Vamos mantê-lo. Vá rosa. Podemos fazer nosso mindinho. Vamos torná-lo mindinho. Pegue nosso texto aqui, coloque-o aqui neste novo quadro. Vou apenas nomeá-lo apenas por causa de nomeá-lo chamado gaveta do menu. Só vou movê-lo só para garantir que meu texto esteja nele. E já fizemos isso. Vá em frente e clique triplo no problema Glick, vá para o quadro que tem a barra de título, clique triplo, clique triplo. Protótipo, arraste-o para o menu. Você já abordou isso no toque, não navegue até a sobreposição aberta. E vamos seguir em frente e fazê-lo do canto superior esquerdo. Fechado e clicando do lado de fora. Podemos fazer 50% neste momento, se quisermos. Lembre-se da animação aqui, queremos entrar, não da esquerda, mas da direita. Vamos brincar com isso aqui em um segundo, só para que você possa vê-lo. Então é bom que estejamos fazendo isso de novo porque agora vamos ficar um pouco mais loucos com isso. Pressione Play. Temos que consertar a barra de título na parte superior. Clique no menu. Boom, roupas lá fora. Parece bom. Vamos mexer com o menu aqui. Quando selecionamos os detalhes de animação ou interação do menu. Vamos fazer para a esquerda, avançar da esquerda. Agora vamos voltar. Pressione a parte superior direita aqui. Você vê como isso foi meio estranho. Veio todo o caminho da direita. Então, o mesmo negócio. Você pode ir pegar o menu, detalhes de interação e jogar com essas coisas para você no seu próprio tempo também. Você pode fazer para a esquerda ou você pode entrar de cima. Eu nunca recomendaria isso, mas ei, seja lá o que for. Isso é meio estranho. Ainda é divertido. Vamos colocar isso de volta para vir da direita. E é isso que parece. Mas é divertido brincar com esses pequenos detalhes do protótipo e experimentar coisas diferentes. Vou começar outro vídeo e vamos fazer as barras de navegação inferiores. Vejo você lá. 33. Crie - Iphone - Barra de Tab: Tudo bem, bem-vindo de volta. Você conhece a guia Protótipo de broca no canto superior direito aqui. Pegue esse começo. Mova-o para baixo para o próximo, que é a barra de navegação inferior ou a barra de abas inferior. E vamos mostrar como consertamos isso e costurá-los juntos. Podemos construir esse sistema de barra de abas que aprendemos sobre Deus e pressionar play no protótipo, muito superior direito pequeno botão Present e confira. Então, enquanto eu percorro, temos a barra de título em um membro fixo, e agora temos a barra de abas permanecendo fixa na parte inferior. Deixe-me dizer 123. Se você clicar em pro ou tocar no perfil 456, volte para a casa 123, perfil para V6, tab e volte entre os dois. Certo, legal. Então, vamos arrastar nosso início de volta do exemplo para aquele que diz que você pressiona o design ou, na verdade, vou mantê-lo no Protótipo. Vamos selecionar a prancheta aqui. Pressione play. E olhe as navbars na parte inferior ou na barra de abas, certo? Então, está rolando. Nunca deve ser rolando, deve sempre ser corrigido. Na parte inferior, temos a barra de título permanecendo fixa ou não, a barra de abas. Vamos rever e corrigir isso. Então vá em frente e volte para sua guia de design. Acho que já tenho isso agrupado. Sim, ok, já está agrupado. Lembre-se de quando podemos treinar a barra de título para a guia Design superior segurando, selecionando a barra de abas, guia Design. Faça a posição fixa ao rolar. Mas neste momento faça o fundo, o centro. Agora vamos examinar nosso protótipo, ver como agora ele está fixado na parte inferior. Mais uma vez. Então, mais uma vez. Posição fixa, centrada na parte inferior. O que isso faz é que é ótimo porque você pode, você pode ter um muito longo, não me siga neste, mas você pode ter uma prancha de arte muito longa. Então eu estou segurando o comando e estou esticando meu quadro de arte todo o caminho para baixo. Vou mover a barra abas até o fundo aqui. E vou adicionar mais números para 456 porque defini essa barra de guias como uma restrição para fixar na parte inferior da tela ao rolar. E eu defini isso para um iPhone, ele sabe que a Figma sabe que você não quer que isso esteja na parte inferior. Você quer que ele seja sempre corrigido no nível do iframe. Seu dispositivo, sua janela de exibição do dispositivo. Então, rolagem CASI 456. Então veja como isso parece. Parece estranho no meu arquivo de design porque isso está na parte inferior. Mas eu defini essa restrição aqui à direita. E quando vou ao protótipo, vejo a restrição por não a vejo no modo de design. Parece com isso e o modo de design, mas vejo isso no modo protótipo. Certo, então vou voltar um pouco aqui. Eu amo essa fonte a propósito, para a bela fonte chamada Bodoni. Mas não coma cartaz itálico fonte. Uma fonte tão bonita. Você toca isso tatuado em você, se quiser. Certo, legal. Então, vamos copiar este quadro de arte. Vou manter a opção clique e arraste. Agora vou selecionar o menu. Mais uma vez. Sou um drivel triple-click Glick, Glick triple-click dirigido. Basta manter um clique triplo e até que você receba o menu aqui para a casa, faça essa opacidade de 50%. Eu tenho clique triplo, clique triplo, clique triplo. Se ele clicar três vezes demais, você pode pegar a casa. Tudo bem. Você pode fazer isso para obter o ícone da casa. Veja onde ela diz camada, faça 30% de opacidade, pressionando, Enter no teclado. Pegue o texto aqui. Clique triplo, clique triplo, clique triplo. Se você precisar obter esse texto, faça regularmente. E o que definimos esse texto isso? Vamos seguir em frente e pegar os textos do perfil. Clique três vezes no comando Preencher C. E vamos pegar a casa aqui, comando V, cole-a. Agora vamos pegar os textos do perfil quando as coisas estiverem agrupadas, você também pode manter o comando. Só estou pressionando Comando ou Controle. Se você estiver em um PC, estou em um Mac, ele automaticamente fornecerá seleções mais profundas dentro de um grupo. Você pode segurar o Comando e, em seguida, clicar e não precisar clicar três vezes, clicar três vezes, viajar rapidamente. Você pode apenas Command, Command clicar para fora. Vamos clicar três vezes, pegar esses textos de perfil. Vamos torná-lo ousado. Faça-o preto. Faça isso 100% aqui. E, em seguida, pegue o ícone aqui. Pegue o traço, torne-o preto também. Então agora temos esse estado padrão aqui à direita. Estado ativo para casa. Temos o estado ativo para o perfil e o estado padrão para casa também. Vamos clicar três vezes no perfil até obtermos essa seleção. Se você foi muito fundo, você pegou o ícone. Não queremos que apenas clique triplo. Já agrupei isso em uma boa seção para você. Além disso, protótipo. Arraste para cá. Apenas ao tocar, navegue. Nada extravagante. Instância, perfeita. Pegue a casa. Faça a mesma coisa. Nada extravagante. Vamos alterar esse texto. Vamos fazer 45. Estou apenas triple-click em seis. Agora vamos voltar ao nosso protótipo e ver a guia. Boom, boom, boom. Tão bom. É como um aplicativo real. Incrível. Certo, Cool. Tudo bem, era uma barra de abas. Terminaremos com o deslizamento horizontal. No próximo vídeo. Vejo você lá. Tchau. 34. Crie - Iphone - Swiping horizontal.: Olá e bem-vindo ao último. Vamos fazer deslizamento horizontal em uma memória de dispositivo móvel. Mais uma vez, vá para a aba Protótipo no topo aqui, tenha o pequeno começo. Arraste-o para baixo. Vou ampliar, segurar Z, clicar e arrastar. Segure a barra de espaço. Mova isso um pouco para cima. Selecione esta prancheta pressione Reproduzir. E aqui está o que estou falando. Vamos construir essa interação onde você clica, arrasta, clica e arrasta, olha para a comida. Um clique e arraste. 35. Crie - Picador de datas móveis Iphone: Tudo bem. Eu sei que disse que esse era o último vídeo, mas eu jogo mais um para obter bônus. Ok, então vamos construir o seletor de datas móvel e vê-lo. Mais uma vez, certifique-se de que estamos no modo de guia Protótipo no canto superior direito. Se não, você vai, você não verá esse pequeno retângulo azul que começou. Então, guia Protótipo, pegue essa coisa. Vamos movê-lo para onde diz seletor de data móvel. E vamos em frente e selecione o quadro de arte aqui. Pressione play. Isso é o que vamos construir. Então, temos o seletor de datas, você clica nele, ele vai tela cheia até o topo, desliza para cima. Se você pressionar Sair, a parte superior, ela desliza de volta para baixo. O que é legal aqui é se você deslizar, você obtém todos os dias do mês alinhados até os dias do mês ou todos os dias da semana na barra de título. Isso permanecerá corrigido e também obtemos o botão Concluído na parte inferior. Quando você pressiona o botão concluído ou se você pressionou 1º de outubro, depois o botão Concluído, ele o levará de volta ao preenchimento dos seletores de data. Interação bastante elegante. Vamos construir isso. Então, novamente, a primeira coisa que precisamos fazer é garantir que estamos no protótipo, na guia superior direita, não na guia Design para a guia Protótipo. Então podemos ver esse pequeno retângulo inicial. Empurre isso até onde diz que você faz. Volte para a guia Design aqui. Certo, legal. E então praticamente o que vamos fazer é copiar este quadro de arte aqui. Estou segurando a barra de espaço para chegar à ferramenta manual, apenas mova isso facilmente. Vou selecionar o quadro de arte, não o seletor de datas, mas o quadro de arte. Pressione Command C. Se você estiver em um PC, é Control C. E depois Command V, como em Victor. Ou se você estiver em um PC, Control V, Vamos selecionar o quadro de datas, o teclado do seletor de datas, excluir componentes aqui, basta selecionar a seção da barra de título, colocá-la em sua placa de arte, e depois pegue o botão Concluído. E mesmo negócio, coloque isso no quadro de arte. Vamos colocar isso na parte inferior. Mais uma vez, apenas para garantir que esses elementos estejam em sua prancha de arte. Pegue seu quadro de arte e mova-o, certo? Então, se eles não se moverem com sua prancha de arte, esses elementos não estão dentro do quadro de arte. Então, basta verificar isso. Ok, então agora o que eu preciso fazer é que precisamos consertar esses elementos primeiro. Então, vamos em frente e selecione apenas a barra de título no canto superior direito aqui, onde estamos na guia Design. Vá até as restrições e veja onde ela diz posição fixa ao rolar, basta tocar nisso, basta corrigi-la. E, em seguida, o mesmo para a parte inferior em que diz Concluído, selecione o botão Concluído aqui e faça a posição fixa ao rolar. Comprei um estrondo, boom inferior. Ok, então vamos criar um protótipo rápido disso e começar a funcionar. Queremos selecionar o seletor de datas no primeiro quadro de arte aqui, vá para a guia Protótipo. Veja a pequena interface do protótipo. Vamos em frente e arrastá-lo para o quadro de arte para a direita. No toque tão bom, o que queremos é que não queremos incidir e pode animação, queremos mudar. Queremos isso não da esquerda, da bunda de cima ou de baixo para cima. Na extrema direita aqui. Fizemos o protótipo na torneira. Selecionamos não dissolução instantânea ou movimento animado inteligente . Do topo. Você vê a pequena prévia aqui, então queremos. E então vou soltar triplo-clique, clique triplo, clique triplo para obter esse x aqui, 123. E vá em frente e, no modo de protótipo, arraste isso de volta para este protótipo de data de seleção. Aqui está a coisa que não queremos nos mudar. Queremos sair e não para cima, mas para baixo, queremos exatamente o oposto. Vamos dar uma olhada muito rápido. Deslize para cima. Pressione o botão X. Deslize para baixo. Perfeito. Agora que temos a função, vamos colocar as seleções de data. Eu tenho esse elemento aqui à direita que tem todos os meses nele. Novamente, aqui está a chave, a peça-chave disso. Já agrupei todas essas seções, mas gostaríamos que tudo seja agrupado como um elemento. E então o que vamos fazer é mouse, clicar com o botão direito do mouse e selecionar quadros mais uma vez. Apenas certifique-se de que todos esses elementos estejam agrupados. Selecione-o clique com o botão direito em seleção Agora isso está emoldurado. Vou voltar para me certificar de que estou na guia Design aqui, não na guia Protótipo, então nada de funky acontece. Agora, selecionando este quadro, vamos até a paleta Layers à esquerda. Vamos chamar essa data, nomeie-a aqui. Então eu só cliquei duas vezes no quadro. E digitado em datas. Vou clicar fora dele novamente. Agora vamos selecionar datas, o quadro e segurar Command no teclado. Ou se você estiver em um PC que é Controle. Pegue a parte superior e deslize todo o caminho para baixo. Você ainda verá os elementos. Você ainda vê essas datas como maio, junho, julho. Mas vamos acabar com isso para vamos fazer setembro aqui. Deveríamos ter apenas outubro e dezembro selecionados com o quadro. Novamente mais uma vez. Vou fazer isso rapidamente. Portanto, mantendo o comando ou o controle, se você estiver em um PC na parte superior, selecione datas, certifique-se de estar nas datas do quadro e não nos elementos agrupados. O quadro à esquerda você pode dizer porque tem aquele pequeno ícone de hashtag de mira aqui nas camadas. Mantenha o Command M em um PC. Arraste isso para baixo. Acabamos de selecionar outubro e setembro na guia Design, à direita, onde temos nossas Opções de quadro aqui. Veja onde ele diz Conteúdo do clipe, recorte o conteúdo, clique nele. E agora você verá apenas a área em que você tem, você arrastou o quadro para baixo. E agora está apenas clicando em todo o conteúdo nesse quadro individual. Se você desclicar nele, ele mostrará mais conteúdo de contato. Vou pegar a data aqui. Vou arrastá-lo para o meu quadro de arte aqui. E sei que foi para o quadro de arte porque ficou azul. Se você não tiver certeza, basta pegar o quadro de arte novamente e movê-lo. Certifique-se de que isso esteja aqui. Certifique-se de que a prancha de arte esteja boa. Vamos dar uma olhada no protótipo rapidamente. Vou para a imprensa superior direita, jogar que eles são um presente de topo. Pressione Selecionar data. Você pode ver que ainda não há rolagem, certo? Temos a função, você pode fechá-la. Mas não há rolagem nas datas ainda. Está parecendo bom. Vamos selecionar o quadro de data aqui. Então você pode se lembrar que estou no quadro de arte. Posso ver que selecionei datas porque posso ver a seleção no comando de espera da camada esquerda. Vamos arrastá-lo até o topo aqui. Assim mesmo. E então, na parte inferior, vamos nos certificar de que ele vai até o topo do botão aqui. Aqui está o truque. Assim que tivermos essa seleção de quadros, vá em frente e selecione apenas as datas. Vá para o protótipo. E veja onde diz estouro, rolagem de fluxo o que queremos. É rolagem vertical aqui. Vá em frente e clique nele. E agora vamos voltar ao nosso protótipo. Vou selecionar o primeiro quadro de arte. Pressione Play. Temos o seletor de datas desliza para cima. E agora, quando clico e arrasto, você pode ver como todas as outras datas aparecem bem lisas. Vamos realçar uma das seleções de datas para concluir a ação do usuário. Vou diminuir um pouco, comandar menos ou Controlar menos. Se você estiver em um PC, vou ir em frente e copiar essa chave, esta placa de arte aqui, comando C, e fazer um Comando V e coloque-a. Eu já tenho esse 13 aqui como um elemento. Então, vamos pegar esse elemento. Vou clicar três vezes nele. Triplo, gotejamento triplo, gotejamento, gotejamento, gotejamento clicará, segure Shift C. Você pode ver que eu selecionei apenas o círculo mas não os textos 13. Então eu vou segurar o turno também e segurar pegar os dois. Arraste para o primeiro de outubro. Exclua os três, deve centralizar por conta própria. Perfeito. Vamos voltar e mudar a data aqui no topo. Então, novamente, vou apenas triplicar tripla tripla tripla para provar uma viagem tripla, tripla, tripla, tripla, clique triplo, clique triplo aqui no texto aqui. Na quinta-feira, abreviado. E apenas 11012022. Neste quadro de arte aqui, vou seguir em frente e pegar um quadrado e apenas fazer um quadrado aqui, apenas o cinza. Assim mesmo. Mais uma vez, vamos fazer isso pelo menos 45 por 45. Basta dar uma área de torneira maior. Vamos seguir em frente e selecionar este quadrado. Certifique-se de que os quadrados nesta prancha de arte. Mova a prancheta apenas para garantir que o quadrado seja, se não for, vá em frente e coloque-o, coloque-o sobre o e clique duas vezes. Se você não conseguir selecioná-lo, basta clicar três vezes. E agora vá para o protótipo e arraste isso para o quadro de arte. Para a direita. Não queremos nenhuma animação, só queremos, em vez disso. Deve ser apenas instantâneo. Queremos que preserve a posição de rolagem. Na verdade, vou deixá-lo fora por enquanto só para que você possa ver como isso funciona. Vamos voltar ao modo protótipo. Legal. Aí está o meu ali. Agora. Assista sem posição de rolagem preservada, veja o que acontece quando você toca neste? Ele saltou. Não preservou onde eu estava no pergaminho. Só me levou ao próximo quadro de arte e mostrou ao quadro de arte que não preservou esse pergaminho. Vamos voltar. Vamos pegar nosso quadrado novamente. Vá para os detalhes da interação. E agora vamos preservar a posição de rolagem. Vou selecionar o quadro de arte inicial. Pressione Play. Agora assista. Vou rolar um pouco para baixo apenas, exatamente onde esse quadrado está acima do botão Concluído. Toque nele e veja como ele não me saltou. Preservado onde eu estava no pergaminho. Isso é o que essa caixa de seleção faz. Super-importante. Praticamente. Estamos quase acabando. Vamos voltar ao nosso arquivo de design. Vamos selecionar esse quadrado. Vamos seguir em frente e fazer a camada de passagem aqui 0% de opacidade. Tudo bem, lá vai você. Peça desculpas pelas sirenes. Deve haver alguém fazendo algo fora da minha casa. Eu acho que eles estão bons agora. Certo, legal. Então, vamos seguir em frente e garantir que você possa ver o que aconteceu, o que acabamos de fazer. Selecionamos esse quadrado e acabamos de fazer o que é chamado de hotspot. Você não pode vê-lo no protótipo. Mas nós fizemos isso onde é um ponto de acesso transparente. Hotspot, o que significa que é interação, é interactável. E se o usuário tocar nele, vai levá-lo para o estado selecionado. Vamos em frente e selecione o primeiro quadro de arte com a data. Vá em frente e Comando C isso, e cole-o para a direita. Agora vamos preencher as datas aqui. Então, temos dez. Conseguimos que temos 12022. E como esse é um estado ativo, vamos deixar os textos em preto. Lá vai você. Certo, legal. Então, tudo o que temos a fazer é dizer nisso, selecione o botão Concluído aqui. Na mistura de protótipos, você está na guia Protótipo. Selecione o botão Concluído, arraste o protótipo para a próxima placa de arte aqui. O que queremos é sair e para baixo. E então o mesmo para este botão Concluído. O que queremos é colocá-lo de volta ao estado padrão aqui. E vá em frente e faça este. Mova-se para fora e para baixo. Então agora vamos mudar esse texto para o texto selecionado, que seria 10132022. E vamos também fazer isso preto. Isso é praticamente um seletor de datas completo aqui, vamos testá-lo. Suprima o jogo no canto superior direito. Aqui está sua data, 1013. Eu poderia vê-lo aqui se eu pressionar pronto e dissesse ir para baixo, deslizar para fora. Pressiono X como um slide para fora. E então assista se rolamos todas as datas estão aqui. Vou selecionar 1º de outubro. Verei o atualizado no topo quinta-feira, 101. Pressione Done. E agora estou de volta ao seletor de datas e ele atualizou a data que eu selecionei. Incrível. Espero que o seu funcione assim. Caso contrário, eu sempre o tenho como exemplo no topo. Então você sempre pode escolher o que eu já fiz e ver se o seu é diferente e depois fazer essas alterações. Então isso está de acordo com o que você está fazendo. E essa deve ser a última aula. Vejo você agradecendo. Vídeo. Tchau. 36. Obrigaoa: Tudo bem, se você está assistindo esta aula, você é incrível. Isso significa que você fez isso. Você foi até o fim. Mais uma vez, só quero agradecer por ter feito a aula. Espero que você tenha muito valor com isso. Espero que tenha ajudado a dar a você uma compreensão dos padrões de design e se você está apenas começando a projetar ou é veterano qualificado da temporada. Espero que isso lhe tenha dado algum valor e ajude a aumentar e projetar padrões. E também qualquer coisa que você construiu dentro da Figma, espero que você tenha algumas dicas e truques lá. E novamente, em relação a qualquer coisa que você constrói, você está feito? Você pode compartilhar seu trabalho com a classe. Adoraríamos vê-lo. Basta postá-lo. Sim, postado no Skillshare aqui e escreva um comentário e gostaríamos de ver o que você inventou. Mais uma vez. Só quero agradecer e agradeço muito por ter feito minha aula. Significa muito para mim e desejo-lhe um ótimo momento projetando muitas, muitas coisas legais e valiosas por