Introdução à prototipagem no Axure 9

1. Introdução: Ei aí. O meu nome é Fred Beecher, e quero dar-vos as boas-vindas à minha aula de introdução à prototipagem e à noite do actor, um pouco sobre mim para começar. Na verdade, tenho treinado pessoas como usar o real desde 2007, mas esta é a minha primeira oportunidade de fazer um curso de vídeo e fazer um curso on-line também, então eu realmente não poderia estar mais animado. Agora. Este curso destina-se principalmente a pessoas que são novas, na verdade. Mas se você é um usuário experiente e gostaria de ver alguns dos recursos e funcionalidades da versão nove em ação, este é o lugar para fazê-lo. Não vamos rever tudo, mas muitas coisas importantes vão cobrir aqui. Então, a maneira como isso começará é trabalhando juntos para construir o protótipo mais simples do mundo. Isso ajudará você a ter uma noção do fluxo de trabalho básico dos atores e, em seguida, vamos rapidamente passar por cima das ações. Você, eu e essas duas coisas juntos daremos a base que você precisa para o resto do curso. O resto do curso é dividido em cinco seções diferentes. A primeira seção aprenderá sobre como armar o quadro e fraturar a segunda seção, que é o meu favorito. Aprenderemos como fazer interações, que é minha parte favorita da prototipagem. A terceira seção aprenderá sobre mestres que nos ajudam a reutilizar componentes de design e funcionalidade em todo o protótipo. E então vamos nos concentrar em como protótipos de forma responsável. E então vamos terminar falando sobre documentação e colaboração em atores. Novo serviço, nuvem real. Então, estou muito animada para começar. Espero que você também esteja. Vamos em frente e de novo. 2. Protótipo simples de mundo: Certo, vamos começar aprendendo sobre atores. Fluxo de trabalho básico Felizmente, é bem simples. Tudo o que você faz é adicionar objetos a uma página. Você os torna interativos. Em seguida, você visualiza seu protótipo no navegador. E se você fizer alguma alteração, basta atualizar a janela do navegador com seu protótipo nele, e essas alterações aparecerão ali mesmo. Agora, a maneira que vamos aprender sobre isso é construindo o que é literalmente o protótipo mais simples do mundo. Para tirar o máximo proveito disso, encorajo-te a acompanhar-me. Então vá em frente e esmague minha janela para cima e, em seguida, traga real para cima em outra janela ao lado dela e siga junto enquanto eu vou. Isso ajudará você a obter a sensação de atores fluxo de trabalho básico. Tudo bem, vamos em frente e começar. Olá, todos. Vamos começar esta aula construindo o protótipo mais rápido e simples do mundo . Então vamos começar abrindo ator. Quando abrirmos ator, ele vai nos apresentar com esse diálogo de introdução. Vamos apenas ir em frente e clique em novo arquivo e, em seguida, real irá nos mostrar seu padrão. Você, por que nós só vamos nos concentrar nas partes do U. I nesta lição que nós precisamos para criar este protótipo simples. Bem, olhe para o U. I e detalhe em uma lição subsequente. Então o que queremos fazer com este protótipo rápido e simples é ter uma página com um botão nele, onde você clica nesse botão e ele leva você para outra página. Então vamos primeiro nos concentrar em ter certeza de que temos páginas que precisamos. Então, a maneira que fazemos que uma atriz vá para aqui nesta página dor, e podemos ver que o ator já criou a primeira página para nós. Então vamos em frente e criar essa segunda página clicando no botão da página do anúncio. Lá vamos nós. Agora você pode optar por renomeá-lo, se quiser. Vou deixá-la chamada Página 2. Agora o que precisamos fazer é colocar um botão na página um. Você pode ver que ainda estamos na página um por aqui e aqui. Agora, a maneira mais comum de adicionar objetos a uma página. Um ator está através da biblioteca. Uma biblioteca é uma coleção do que realmente chama widgets que você pode colocar em uma página. Eu vou escolher este simples aqui e simplesmente arrastá-lo para a página. Então, arrastando widgets da biblioteca Muito, muito simples maneira de adicionar coisas para a página para, na verdade, eu vou realmente DoubleClick punhos que mudam o texto para ir para a página. Certo, agora temos uma página com um botão e outra página para onde podemos ir, mas ainda não podemos fazer nada com isso. Então o que precisamos fazer é selecionar o botão e adicionar o que realmente chama de interação. Agora, na versão nove, eles simplificaram muito a forma como você cria interações e atores. Assim, por exemplo, nos apresenta interações comuns para esse tipo de objeto. Então, quando eu clicar neste botão, eu quero abrir um link para outra página. Então eu vou seguir em frente e escolher essa interação comum. Agora ele está me dizendo para selecionar a página, então obviamente eu quero ir para a página dois, então eu vou apenas clicar sobre isso, e então isso é tudo que eu preciso fazer. Então eu vou bater. Ok. Certo, agora temos as duas páginas. Temos o botão. O botão é interativo. Agora o que precisamos fazer é colocar isso em um navegador e a maneira que fazemos que um ator é simplesmente apertando este botão de visualização aqui para que ele vai abrir em uma nova guia do navegador e nós temos o nosso botão. E se clicarmos neste botão, ele parece desaparecer. Mas o que realmente está acontecendo? Se clicarmos aqui, podemos ver a hierarquia de páginas estavam na página dois. E se clicarmos de volta para a página um, clicar neste botão novamente, vamos para a página dois. É isso. Você criou seu primeiro protótipo Parabéns. 3. Tour de Axure: a interface de usuário real é composta por um monte de diferentes áreas, barras de ferramentas e dores. Agora, este é apenas um passeio rápido, então eu vou apenas orientá-lo para o que você confinou em cada uma dessas áreas. À medida que continuamos, o exercício entrará em algumas das funcionalidades detalhadas que estão presentes em cada uma dessas pequenas áreas. Então vamos começar com a área do arame. Esta é a área principal que você vai estar trabalhando em um ator, como você está arrastando widgets até aqui para fazer seu quadro de arame. Agora, aqui e a dor de páginas. Aqui é onde você tem uma lista de todas as suas páginas e você pode realmente clicar duas vezes sobre elas. E isso abre todas as suas páginas que você clica em abas, o que é muito conveniente. Agora. Já vimos como podemos adicionar uma página aqui. Também podemos adicionar pastas, que ajuda você a manter as coisas limpas. Vou chamar esta pasta de protótipo mais rápido e depois arrastei estas duas páginas para lá só para manter tudo limpo e arrumado. Agora, a outra coisa que temos acontecendo aqui é a dor delineada. Nesta dor, você tem uma lista de cada objeto na sua página atual, que é muito, muito, uh, útil. E se você é um usuário de esboços, isso é algo que vai fazer você se sentir muito, muito confortável. Então eu vou voltar aqui para as páginas. E então vamos dar uma olhada na dor das bibliotecas também. A dor da biblioteca permite que você escolha entre três bibliotecas diferentes. Fluxo são o fluxo de biblioteca padrão e, em seguida, um conjunto de ícones extensivo, que é novo. Eu acredito por nove. Há muito mais aqui do que isso no passado. Ah, eu Austin, mantenha-o em todas as bibliotecas e, em seguida, basta usar a funcionalidade de pesquisa, que veremos mais tarde. Mas vamos apenas colocá-lo no padrão. Então vamos mudar aqui para o lado direito. Aqui você tem o estilo, dor, as interações, dor e as notas dor. Então, com a dor de estilo, isso controla todos os diferentes aspectos da formatação para o que você selecionou. Agora é altamente contextual. Então agora esta é a formatação que você pode fazer para um objeto de botão. Mas eu também posso clicar no que parece ser espaço vazio, mas na verdade é a página, e isso me dá opções de formatação para a própria página, que é muito interessante para interações. Essa dor é onde podemos especificar como o protótipo interage com nossos comportamentos. Agora, se você é novo para nove, você está com sorte porque isso é muito mais simplificado do que como era antes. Mas se você tem usado ator por um tempo, isso vai levar algum tempo para se acostumar. No entanto, é realmente mais eficiente a longo prazo. Finalmente, isso observa dor permite que você comunique informações específicas sobre cada objeto em sua tela, bem como a própria página. Então, esta é uma ferramenta de comunicação muito útil para torná-lo de modo que você não tem que protótipo cada interação que você pode documentar Ah, um monte inteiro deles também. Então, olhando para essas dores, há algo que é muito novo na Ação 9, que é essa habilidade de retirar as dores, que é bem interessante. Então, se você tiver um monitor múltiplo configurado, uma boa maneira de usar isso seria colocar todas as dores em seu monitor menor, então você tem todos eles visíveis em todos os momentos, e então você pode dedicar seu monitor maior à área de arame. Agora, para obter isso de volta, eu só ir para ver e apertar reset view. Agora, finalmente, o que temos aqui é ah, barra de ferramentas aqui em cima. Não há muito aqui que você não faria normalmente com Ah, certo, Click ou, hum, um atalho de teclado. Mas você tem controle sobre como selecionar as coisas e, se estiver criando um fluxo, poderá conectar seus objetos juntos. Agora, você também vê isso aqui em baixo, que parece duplicar a dor de estilo. E você está absolutamente certo. Ele faz. No entanto, isso aparece o tempo todo. Então, não importa se você está nas interações dor, as notas dor. Você sempre tem a capacidade de formatar seus objetos. E esse é o passeio rápido do seu verdadeiro “você”. Estou ansioso para entrar em todos os detalhes dessas áreas à medida que avançamos com o exercício 4. Introdução do projeto do curso: Quando ensino ator, geralmente gosto que as pessoas tentem recriar algo que já existe. A razão de eu fazer isso é porque realmente ajuda se você entender como seu protótipo deve ser no final. Agora, para este curso, o site que vai recriar é o site de atletismo Sunita. Por favor, vá em frente e veja a descrição do curso para um link para o site. A razão pela qual eu escolhi este site é porque ele tem um equilíbrio de interações simples e complexas e é responsivo. layouts são bastante simples agora. Nas aulas subsequentes, continuaremos recriando o site Sunita apenas com níveis mais altos de fidelidade. Agora, não te preocupes se não conseguires acertar o teu protótipo. Para ser honesto, às vezes também pode ser difícil para mim. Então o que eu fiz para ajudá-lo nessa situação está nos materiais do seu curso. Incluí um arquivo real que tem o estado final de todos os diferentes exercícios extras que estou pedindo para fazer agora. Encorajo-o a dar o seu melhor antes de abrir o arquivo. Mas se você está perplexo e você simplesmente não pode seguir em frente, esse arquivo terá as respostas que você precisa. O site será recriar para esta classe ator é tese Anita Athletics site Sunita Athletics é uma empresa que faz roupas de fitness para mulheres. E a razão pela qual eu amo usar este site particular ensinar ator é porque é uma grande mistura de layout simples e interações intrincadas para que possamos começar aqui no topo. Você vê que temos esta barra de funcionalidade superior aqui em cima e, em seguida, temos ah barra de navegação bastante padrão aqui em baixo com alguma funcionalidade de pesquisa, bem como, ah mega menu que é outro tipo comum de interação. E nós estaremos prototipando este tipo de interação nesta classe em. Então você pode ver esta grande imagem aqui um monte de conteúdo visual realmente rico que nós também podemos fazer um ator. E como nós rolamos para baixo aqui, há ah ah seção aqui que tem as categorias de produtos e vemos alguns mouse interessante sobre interações. Nós estaremos prototipando versões simplificadas dessas interações nesta classe. À medida que continuamos a rolar para baixo, você verá mais conteúdo visual de blocos grandes. À medida que chegamos aqui, você verá uma grade de produtos ah, que é uma coisa comum em qualquer site de comércio e. E nós estaremos prototipando este tipo de interação como parte desta classe, mas na verdade também tem um objeto especial especificamente para este tipo de caso de uso. Agora, usar este objeto é bastante complicado, então vamos estar salvando isso para outra classe como continuamos a rolar nós Seymour conteúdo grande imagem . E esse é o site. Mais ou menos. Agora, a outra coisa boa sobre este site é que ele é responsivo para que possamos usar este site para nos ajudar a filmar por alguma coisa. Quando estamos trabalhando com uso adaptativo, um ator e esse é o site será recriar para esta classe real. Estou muito animado para começar com isso e cavar isso com você. 5. Introdução à gravação: Tudo bem. Nesta primeira seção, vamos aprender a construir uma armação de arame em ação. Vamos começar definindo dimensões de página. Continue colocando formas, imagens de texto e ícones na página. E então vamos terminar aprendendo a navegar em camadas após nove, que na verdade foi atualizado de versões anteriores. Agora, já que o site Sunita é tão pesado, eu incluí um monte de imagens pré-recortadas em seus materiais de curso. Incluir incentivá-lo a usar aqueles em seu arame enquadramento apenas causa. Isso vai acelerar as coisas muito rapidamente. E não se preocupe em usar essas imagens. Eu arranjei-os a partir de um número de sites de fotos diferentes, então você está pronto para usá-los. Tudo bem, vamos em frente e começar. 6. Trabalhando com páginas: Nesta curta lição, vamos aprender o básico de como você começa a construir um protótipo em ação. Esses conceitos básicos estão criando páginas e especificando seu tamanho para que possamos ver aqui que já temos as telas de protótipo mais rápidas todas escondidas em sua pasta. Então vou criar outra pasta para o protótipo Sinead A, certo? E então eu preciso clicar em adicionar página para criar outra página, que eu vou chamar de casa. E agora você pode ver que isso não está na pasta. Então eu tenho que pegá-lo e depois arrastá-lo para aquela pasta, e lá vamos nós. Agora, esta página é completamente crua. Eu não especifiquei nenhuma informação sobre isso em tudo. Então, quando eu abro, é que ele continua indo e indo e indo. Agora, o que eu quero fazer é que eu quero fazer isso um tamanho muito específico. Então, a maneira que você pode fazer isso é você pode ir para o menu suspenso de dimensões de página, e você pode realmente escolher entre qualquer um dos vários modelos diferentes, dependendo do que você está fazendo. Agora eu estou em um Mac Book Pro, o que eu realmente não vejo aqui. um Então eu vou criarumdispositivo personalizado, e acontece que eu sei que a largura da minha tela é de 1440 pixels. Então eu vou especificar que aqui e então eu vou escolher não especificar um com. Então, agora, se percorrermos aqui e, em seguida, diminuirmos um pouco, podemos ver que temos um limite definido para o nosso design. E aí está. Esta é a página que usará para começar a construir nosso protótipo do site da Sunita na próxima lição. 7. Criando formas e texto: nesta lição estará aprendendo os conceitos básicos de colocar formas e texto em um quadro de arame real . Agora, há três maneiras de fazer isso. Vou começar com o mais comum, que é arrastar algo da biblioteca antes de nos aprofundarmos demais. Vamos dar uma olhada no site These Anita e tomar algumas decisões sobre o que vai se concentrar. Então vamos nos concentrar nesta barra de cima aqui em cima e então notar que há um ah ah, fundo para este carrinho aqui que é um pouco diferente. E então nós também vamos nos concentrar nesta barra de valete, e nós temos esta grande imagem aqui com algum texto de chapeleiro. Então vamos voltar para agora, aqui está Thebe Boi que eu arrastei da biblioteca . Como você pode ver, uma vez que eu me deparar com as bordas da página lá, essas linhas vermelhas que aparecem isso é novo em nove. Aqueles de vocês que são grandes fãs de sketch vão apreciar isso, tenho certeza. E lá vamos nós. Este é o nosso top são OK a segunda maneira que você pode adicionar algo na verdade é através deste menu de inserção. Este, também, é novo na versão nove e também deve ser algo bastante familiar para um usuários esboço . Então eu vou clicar no retângulo aqui, e eu vou apenas desenhar um retângulo. Isso vai corresponder à forma do fundo da coisa do carro. Então você pode ver aqui quando eu me movo contra algo que eu posso realmente encaixar naquela coisa, o que é muito conveniente. Então, uh, isso provavelmente não é cunhado na forma certa, mas perto o suficiente. Eu não quero uma fronteira, então eu vou para aqui e mudar a borda para zero e tornar o preenchimento um pouco mais escuro , então isso parece bom. Ok, agora, eu sei que eu preciso mover isso para cá, e eu estou realmente indo para ir e especificamente para fazer este 40 pixels porque eu sei que isso é a altura da, uh, barra e também fazer 70 pixels de largura. Isso é muito conveniente ser capaz de fazer isso no estilo, uh, pagar por aqui. Mas você também pode fazê-lo aqui em cima no bar de estilo rápido para um bar. Tudo bem, agora temos essas duas coisas na terceira maneira é novamente algo que será muito familiar para os usuários de esboços. Está relacionado com isso. Inserir homens. Sabe, se você vir algo parecido com isso, hum, você não tem essa propriedade que eu estou prestes a falar ligada. Mas se você apenas vê algo aqui que diz P ou R ou O ou L, você tem algo ativado que é novo na versão nove atalhos de tecla única código. Não, eu desliguei-o especificamente porque não é assim que gosto de trabalhar. Mas se você quiser ter certeza de ativá-lo, você pode ir para preferências ou o equivalente nas janelas e ir em frente e ir para a seção de tela e escolher ativar atalhos de tecla única. Então o que eu posso fazer agora é se eu quiser desenhar um retângulo, eu apenas pressionar a tecla R e então eu posso encaixar essas bordas e nós vamos ah, lá está meu nab nosso novamente eu estou indo da borda para zero e o preenchimento para algo não tão Escuro. Tudo bem. E então isso, eu sei que precisa ser, uh, 70 pixels. Então acerte isso. E lá vamos nós. Há agora bar. Agora, uma coisa que eu quero fazer rápido é mudar aqui para o esboço. Agora temos três retângulos na página e tudo o que diz aqui é retângulo, retângulo retângulo. Uma das coisas que é absolutamente crítico em ação é certificar-se de que você está nomeando todos os widgets que você coloca. Porque se você falhar em fazer isso uma vez que você começa a trabalhar com interações, você vai perder o controle dos objetos que você está tentando forçar a fazer algum tipo de ação. Então é um hábito que eu recomendo que você entre em que quando você toca algo, você diz o nome. Vou chamar este carrinho de BG. Vou ligar para este bar superior, BG. E você também pode fazer isso diretamente do esboço em si fazendo toques muito lentos no nome. Então este eu vou chamar nunca bar BG. Tudo bem, agora eu tenho aquelas barras. A próxima coisa que quero fazer é o Teoh colocar essa grande imagem agora. Na maior parte do tempo, quando estou fazendo um protótipo. Eu não tenho nenhum tipo de fotografia, então eu uso um objeto chamado espaço reservado. Agora, uma das coisas divertidas que você pode fazer aqui nesta biblioteca é que você pode realmente procurar por coisas digitando seus nomes. Então eu sei que isso é chamado de música placeholder em um ace tipo de jogo. Lá vamos nós. E ali está o meu espaço reservado. A razão pela qual eu gosto disso é porque ele me permite, em vez disso, me impede de, hum, tentar Teoh percorrer uma lista de coisas visualmente e coisas que faltam. Tudo bem. Isso, eu sei, precisa ser tão largo quanto a página, e também precisa ter 14 20 pixels de altura. Tudo bem, então este é um espaço reservado que está no lugar para a imagem, mas ele vai estar atrás de algum texto. Então, uma das coisas que quero fazer é trancá-la. Então eu vou para a direita, clique e escolha bloqueio, localização e tamanho. Isso significa que se eu arrastar nesta área, nada vai acontecer. Não vai se mover, o que vai ser muito útil assim que eu começar a mover texto sobre ele. Tudo bem, então vamos até aqui e encontrar alguma mensagem. Um dos principais elementos de texto que você estará usando é chamado label, então eu vou procurar por um rótulo. Lá vamos nós. E eu só vou arrastá-lo até aqui porque eu quero colocar pelo menos um item de valete lá em cima, então eu vou ampliar. Isso não é grande o suficiente. Lutou. Então é chamado de 20 pontos. Aqui vamos nós. E, uh, movê-lo para que ele se encaixe para o centro lá, e eu vou chamar esta lista de desejos, ok? E então uma das outras coisas que também vem de Ah, a inspiração por trás do esboço é quando você tem um objeto selecionado e mantenha pressionada a tecla de opção , hum, para Mac, então você pode realmente ver a distância que o objeto selecionado está de outros objetos na tela. Então isso eu realmente quero estar, Ah, 40 pixels de distância. Então eu vou segurar o dedo do pé. Mudança movendo-se em linha reta por aqui. Segure em. Opção C 34. Ok, agora eu vou usar minhas teclas de seta e apenas mover mais de seis pixels. Então 123456 E se eu pressionar a opção de novo? Sim, 40 pixels. Isso é o que eu quero. Certo, diminua o zoom. E o rótulo é muito pequeno para algo que precisamos colocar aqui. Então vamos trabalhar com o outro tipo de objeto de texto em real, que é o cabeçalho. Há também um tipo de parágrafo. Mas falaremos sobre isso um pouco mais tarde. Tudo bem, então vou deixar isso aí. Isso não é grande o suficiente. Chamo isso de 80 pontos e digo que não precisamos de ousadia para isso. Ok, então eu vou centralizar isso, e este é o nome da empresa. Tudo bem, agora eu tenho isso trancado para que eu possa mover isso impunemente. Vamos centralizar isso com esses caras. Lá vamos nós. Nós não temos tempo para armar tudo isso, mas se você abrir o arquivo de classe interagir exercícios concluídos e ir para esta página L. Owen ser formas de casa. Você pode ver o que parece se você usasse moldura para fora esta página inteira. E isso é o que eu tenho para você. A próxima lição mostrará como trabalhar com imagens em seu protótipo real. 8. Trabalhando com ícones e imagens: nesta lição, nós vamos aprender sobre como trabalhar com imagens e ícones. Um ator. Primeiro, vamos para a visão Sunita para ver como eles estão trabalhando com esses tipos de objetos. Então parece que há um de íconede lupa aqui. Há imagens enormes e bonitas por todo o site. Ah, e há também estas estrelas aqui como parte da funcionalidade de classificações e avaliações. Então vamos voltar ao real aqui e nos concentrar no primeiro Icahn Vamos rolar para baixo até nossos produtos. Ah, e eu vou ampliar aqui para tornar isso mais fácil de fazer algum layout. E eu vou vasculhar isso, segurando a tecla Shift para abrir espaço para as estrelas. Ok, agora, onde você consegue essas estrelas? Bem, ator na verdade vem com uma biblioteca inteira de ícones cheia de coisas boas. Agora, há tanta coisa aqui que é meio difícil de navegar, então eu quase sempre, uh, digite aqui o que estou procurando. Então eu vou fazer estrela, e lá vamos nós. Isso é exatamente o que eu estou procurando. Então eu vou arrastar isso aqui, e eu vou querer que isso seja cerca de 20 pixels então eu vou manter pressionado shift e redimensioná-lo para ser cerca de 20 pixels. Lá vamos nós. Então eu vou ter certeza de que ele está alinhado horizontalmente com o texto de revisão e, em seguida, mantenha pressionada a tecla de opção Ault. Teoh Uh, faça várias cópias e eles estão cerca de quatro pixels separados agora, o que é bom. Há mais um que eu preciso adicionar aqui, e eu posso escolher estrela metade vazia ou estrela metade cheia para começar metade cheia, desde que eu sou tendem a ser mais de um otimista e eu vou mudar isso para baixo Teoh do mesmo tamanho. Lá vamos nós, bem, downshift para mover em linhas retas. E isso parece bom o suficiente por enquanto. Então, essas são as noções básicas de lidar com ícones. E depois de agora, vamos dar uma olhada nas imagens, vai rolar para fora e mover aparecer para esta imagem principal em um site. Normalmente, isso é chamado de imagem de herói. Então eu vou Teoh, excluir este espaço reservado que tínhamos antes e voltar para a biblioteca. Mas desta vez procuro uma imagem, não um ícone. Então eu vou voltar para a biblioteca padrão e eu vou arrastar neste widget de imagem em uma linha que para a barra e a borda da página aqui. Agora esta é uma das muitas maneiras diferentes de obter imagens no reboque. Ator. Então eu vou apenas clicar duas vezes sobre isso, e isso vai trazer um diálogo de navegador de arquivos, e eu vou clicar em Hero aqui agora na sua pasta Materiais de Classe. Você tem as duas pastas Sunita Color e Cindy em uma escala de cinza. Todas as imagens foram cortadas dentinhas apropriadas, ah especificações para você facilmente ser capaz de trazê-los para o seu exercício. Então eu vou apenas clicar duas vezes sobre isso, e lá ele aparece no tamanho perfeito, então você vai notar que o texto que estava lá parece ter desaparecido. Tudo o que precisamos fazer é voltar, e então o texto volta. Agora vamos descer aqui para essas categorias. Amplie um pouco e eu vou te mostrar outra maneira de obter uma nova imagem no reboque. Ator. Você pode simplesmente arrastá-lo e soltá-lo do seu navegador de arquivos. Então lá vamos nós, e eu vou online isso aqui e apenas me livrar deste suporte lugar e movê-lo para que seja bom e alinhado que parece muito bom e apenas enviá-lo para trás. Não está alinhado como precisa ser. Isso provavelmente é melhor. Tudo bem agora, outra maneira de obter imagens no ator de reboque é simplesmente clicar duas vezes em qualquer imagem existente porque você pode realmente substituí-la por qualquer outra imagem. Então, se eu tivesse aberto lá, nós vamos agora. Advertência. Aqui está que, se a imagem que você está substituindo não tiver a mesma altura e largura que a imagem que está sendo substituída, a imagem que está sendo substituída vai se esmagar nessas dimensões originais. Tudo bem, então agora você sabe como trabalhar com ícones, imagens e ator. Então vá em frente e complete tudo isso para que ele acabe parecendo esta página em particular. As imagens da casa em seu arquivo de exercícios concluídos e veremos você na próxima lição. 9. Agrupamento e camadas: nesta lição, nós vamos aprender sobre como agrupar objetos. Um ator agora. Isso pode não parecer que é tão importante de uma coisa para saber sobre, mas é especialmente importante no ator, e isso é por causa do que realmente é conhecido, que é a capacidade de criar interações realmente ricas. Agora, a coisa incrível sobre grupos e na verdade é que você pode atribuir interações a um grupo de objetos. Então, com essa emoção em mente, vamos em frente e olhar para o que devemos ter no final do nosso último exercício. Então esta é a versão completa do último exercício. Então todas essas imagens estão no ar aqui. Todos os ícones e coisas assim estão lá. Mas se pudéssemos tocar aqui e chegar ao nosso esboço, enfraquecer, ver cada objeto nas páginas desta lista para que seja em primeiro lugar bastante difícil de navegar. Então vamos nos concentrar em ah, essa área bem aqui. Então este é, uh, bloco de conteúdo óbvio. Normalmente, isso é chamado de herói na linguagem do Web design, então vamos selecionar a imagem de fundo, o título, o subtítulo e este pequeno botão que você pode realmente ver aqui no contorno. Essas coisas que eles são selecionados, uh, a seleção é refletida aqui. Você também pode selecionar coisas diretamente a partir do contorno, se quiser, e basta clicar com o botão direito Clique para PC ou controle. Clique para Mac em você, Congar à frente e grupo que ou apenas pressione Command ou controle G e lá está o nosso grupo. Agora tudo o que temos que fazer é nomear o grupo. Vou chamar este herói. Lá vamos nós, e podemos ver por aqui este grupo é pensado como um objeto. Então, se eu clicar em interações, eu tenho a capacidade de criar uma nova interação baseada neste grupo, o que é bastante fantástico. Agora, mudando para o arquivo completo, quero mostrar como é quando você tem, uh, uh, tudo organizado em grupos. Então, se olharmos para isso, podemos ver que todos os posts blawg, todos os produtos individuais, todas as seções diferentes da página. Todas essas coisas diferentes são representadas como grupos individuais aqui em. Se os expandirmos lá, podemos ver tudo isso lá. E cada um desses grupos reflete essencialmente um bloco de conteúdo no site principal. Então aqui está o herói, as categorias. Aqui está o bloco funcional, etc, etc. Então isso é agrupar objetos e ator. A próxima lição que eu estou realmente animado porque nós finalmente começamos a criar interações, veja, então. 10. Introdução a ação: Tudo bem, interações, interações ao ar minha parte favorita de prototipagem. Isso é porque é o que você usou para fazer seu protótipo fazer coisas. E a ação tem funcionalidade abrangente em torno da criação de interações. Essa é uma das razões pelas quais eu amo tanto. Agora, se você é um usuário experiente, eu o encorajo a lavar essa lição porque as interações são onde eles fizeram algumas das maiores mudanças. A má notícia é que, se você for experiente, isso vai levar algum tempo para se acostumar. Mas a boa notícia é que, se você é novo na verdade, é muito mais fácil de aprender do que costumava ser. Então, na ação nove e Interação é composta de três coisas. Um evento, ações e alvos. Um evento é algo que pode acontecer a um protótipo ou algo dentro de um protótipo. Então você clica em uma página, você clica em um link? O Eso. O clique é o evento. A ação é o que acontece quando o evento ocorre. Então, clique em ir para uma nova página, indo para as novas páginas de teatro em agora você precisa especificar qual página você deseja ir para, e esse é o alvo. Então clique é o evento abrir nova página é a ação, ea página categoria é o destino. Agora, nesta lição, você vai estar aprendendo a fazer interações simples como essa, incluindo links e mouse overs básicos. Mas você também aprenderá a construir mouse overs ricos, bem como mega menus. Então isso vai ser muito divertido. Vamos em frente e começar. 11. Linking para uma outra página: nesta aula, nós vamos aprender os conceitos básicos de criação de interações em interações reais são o que torna o seu protótipo interativo. Então, antes de começarmos, devemos garantir que seu protótipo seja parecido com isso. Até agora, você puxou todo o conteúdo e, ah, você fez os layouts como este. Hum, e então, ah, uma vez que você tem tudo pronto, então nós podemos continuar com isso. Então, nesta lição, o que vamos fazer é pegar este link de loja aqui e fazer com que nos leve para outra página. Então primeiro temos que criar a segunda página, então eu vou adicionar página aqui em cima. Vou chamá-lo de loja. Lá vamos nós. E agora vou clicar duas vezes nisso. Teoh, abra com o desgaste da área aqui, dimensões da página. Eu vou bater dispositivo personalizado novamente e fazer 14. 40 e não. Aqui vamos nós. Tudo bem. Então agora tudo o que preciso fazer aqui é colocar algo que você possa colocar qualquer coisa aqui. Vou colocar uma caixa cinza. Ah, isso me comunica que esta é, de fato, a página da loja. Então eu vou clicar duas vezes sobre isso e apenas muito claramente articular o que é isso. Muito bem, temos esta página. Vou clicar neste X para fechar isso. Agora, há uma série de maneiras que podemos realmente chegar a este objeto. O que eu quero fazer é criar este link direito na própria loja de palavras para que eu possa clicar aqui, que é o grupo de bar valete. Então eu posso clicar nele novamente, que é o grupo de links da loja. E então eu posso clicar em e novamente. E agora eu tenho a coisa que está no fundo deste grupo, que é o link da loja. Mas o que eu realmente vou fazer é ir até aqui para o esboço para mostrar como você navega, navega até ele de lá. Então eu sei que este é o nab nosso mesmo se eu não fiz quando eu clicar em seu selecionado aqui. Então eu vou expandir isso e o mar. Ali está a ligação do valete da loja. Então esse é o grupo todo. E há o texto da loja em si. Então o que eu vou fazer é ir até aqui e clicar em interações. Então, uma das coisas que é novo e ator nove é ah, maneira simplificada de criar interações. Oh, a maneira que ele está agilizando isso é coletando algumas das interações comuns aqui . Então o que eu quero fazer é quando eu clicar sobre isso, então em clique, eu quero ir para outra página. Então isso significa que quero abrir um link. Então tudo o que tenho que fazer é clicar nisso. E agora a página que eu quero ir. Eu só seleciono isso aqui, acerto, ok, e eu estou pronto. Vamos ver como isso funciona. Vá em frente e pressione a visualização para gerar o protótipo. E se eu puder dizer que a loja agora é interativa. Então, se eu clicar nisso lá vamos nós. Estou na página da loja. Agora, uma coisa que eu quero mostrar a vocês é que você pode realmente criar links no Mawr do que apenas objetos individuais. Então o que eu vou fazer é eu realmente vou selecionar esta interação aqui clicando sobre ela e eu vou apertar excluir, e isso se livra da interação para que você possa excluir interações também. Agora eu vou, uh, para uh, selecionar o link do valete da loja. Então este é um grupo inteiro, e eu vou criar uma nova interação. Agora. Não está me dando interações comuns porque este é um grupo inteiro. Então, se eu atingir uma nova interação, eu preciso escolher qual interação usar. Agora há muitos dos chamados eventos, então eventos são coisas que podem ser feitas com um protótipo. Geralmente são coisas que uma pessoa pode fazer, como clicar em DoubleClick. Oh, nossa pressão sobre o mouse para baixo. Mas há uma série de outras coisas, também. Nós não seremos capazes de olhar para todos eles agora, então eu vou apenas escolher no Click. Então no clique é o meu evento. E agora eu quero em um dedo do pé de ação acontecer durante esse evento, e o que eu quero é link aberto. Portanto, essas ações são as mais comuns para no clique. Então eu vou apertar o link aberto, e então ele deve começar a parecer familiar a partir de agora. Então lá vamos nós. E se eu voltar ao meu protótipo e atualizar, na verdade, vamos passar por aqui e navegar até esta página inicial. Tudo bem. Se eu for à loja, lá vamos nós. Ainda funciona. E o engraçado é que, se eu voltar, isso funciona. Se eu estiver aqui em cima dessa coisa de cenoura, lá vamos nós. E essas são as regras básicas para criar em uma interação um ator. 12. Como criar um mega: nesta aula, nós vamos aprender como gerenciar a visibilidade de objetos, um ator e como controlar essa visibilidade dentro do protótipo usando a interação de entrada no mouse . Então, antes de começarmos, vamos dar uma olhada no site Sunita e o que vamos tentar fazer protótipos aqui. Então neste site, um, um, neste bar de cima, quando você passa o mouse sobre a loja ou fax, você recebe este grande submenu aqui. Normalmente, isso é chamado de mega menu e você pode ver como, quando você está aqui em cima, isso não desaparece. Mas se você subir aqui, ele vai embora. Ah, e também, se você rolar assim, então ele vai embora. Nós vamos fazer algo bastante semelhante em ator e o que vai parecer é isso. Será mais simples do que é realmente no site Sunita. Então você passaria o mouse sobre a loja assim e então se você subir, ela irá embora. E então, se você for até lá, ele irá embora também. Tudo bem, vamos em frente e começar. Então, mudando de volta que realmente aqui, a primeira coisa que precisamos fazer é realmente criar um espaço maior para que possamos fazer isso apenas arrastando uma caixa para a página. Vou arrastar uma grande caixa cinza aqui. E desde que o sol Ito um é um pouco transparente, eu vou realmente fazer este um pouco transparente para vamos chamar isso de 60. Ei, isso parece razoável. Tudo bem, agora. Ah, nós também queremos ter certeza de que são rótulos. Vou chamar-lhe Mega Menu aqui e também aqui. Não. Vamos também adicionar um botão para que possamos ir para a página da loja, clique duas vezes sobre isso e pressione Ir para comprar. Certo, agora precisamos tornar tudo isso invisível ao mesmo tempo. E a maneira mais fácil de fazer isso é como aprendemos antes de agrupar as coisas. Então eu vou selecionar ambos os objetos. Aperte o comando G no PC. Seria controlado, G. E agora temos um grupo. Podemos vê-lo aqui em cima, e eu vou tocar nele e nomeá-lo imediatamente. Ok, então agora temos isso como seu próprio objeto. Agora podemos pensar em sua visibilidade. Então, por padrão, queremos que isso seja invisível. Assim, a forma como faríamos isso é enfraquecer. Faça disso um ator. Há várias maneiras diferentes. Onde quer que você veja este ícone de olho, você vai vê-lo aqui na dor estilo e aqui em cima na barra de estilo. Você pode usar isso para definir o que você selecionou como oculto. Eu normalmente fazer são direita, clique e fazer definir oculto. E uma vez que você esconde algo, você pode ver que ele vai parecer amarelo. E isso está te dizendo que há algo lá. Só está escondido por padrão. Então, quando formos para o nosso protótipo e atualizá-lo, vamos ver o que isso parece para que você possa ver que não podemos ver nada aqui. Então sabemos que está funcionando como pretendido. Voltando ao ator, para manter as coisas simples, vou selecionar o link da loja aqui e me livrar da interação existente. para manter as coisas simples, Então eu vou selecionar a interação aqui clicando sobre ela e, em seguida, pressione delete para me livrar dela. Tudo bem? E então agora eu quero torná-lo para que isso se torne visível quando eu passar o mouse sobre este grupo aqui . Então eu vou bater nova interação e a ação que eu quero. Er, desculpe, o evento que eu quero usar o seu no mouse entrar porque quando um mouse entra nesta área, é quando isso precisa acontecer. Então a ação que eu quero que aconteça é em torno da visibilidade. E o que é isso, é mostrar e esconder. Então, se eu clicar, mostrar e me esconder aqui, ele vai me perguntar o que eu quero mostrar e esconder. Vou selecionar o grupo de mega menus aqui, e não, posso escolher mostrar a visibilidade oculta ou alternar. Agora mesmo. Mostrar é selecionado por padrão, e isso vai ficar bem. Então eu vou bater. Está bem, está bem. Agora, vamos voltar ao nosso protótipo e atualizar e ver como isso se parece. Tudo bem, então, andando por aqui, está tudo bem. Meu mouse sobre a loja. Então o mega menu aparece, mas eu realmente não consigo fazê-lo desaparecer, e isso é porque nós não especificamos essa interação em particular ainda. Então vamos voltar à ação e ver como ele faria isso. Tudo bem, então eu vou subir aqui e clicar no mega menu para que eu esteja nesta área aqui e o que eu vou fazer é, ah, eu vou adicionar um objeto chamado ponto quente. E isso vai parecer incomum quanto ao porque eu faria isso, porque você pensaria que você seria capaz de usar a interação no mouse para fazer isso desaparecer. Mas o problema é, é que no mouse fora vai disparar mesmo se eu subir para o bar assim. E se eu quiser ir para o bar assim e ter esse menu permanecer, eu não posso usar no mouse para fora. Então eu vou usar esse objeto de ponto quente. Normalmente, gosto que tenha cerca de 40 pixels de altura. Isso geralmente é grande o suficiente, e o que este objeto vai fazer é que ele é totalmente invisível, então você não será capaz de ver nada com isso aqui, então ele só vai pegar o mouse enter, então quando o mouse entrar isso, então ele vai esconder o mega menu. Mas queremos que isso faça parte do mega menu, então estou olhando aqui no contorno, e agora é muito separado, então não queremos tê-lo assim. Então eu vou arrastá-lo para o mega menu aqui, bem em cima, e eu vou nomeá-lo porque nós nomeamos tudo. Um ator para me chamar. Ah, mega comerciante de menu. Tudo bem, e agora isso ainda está selecionado. Então eu quero adicionar minha interação. Eu vou escolher no mouse enter e novamente eu quero mostrar ou ocultar. E novamente eu quero mostrar ou esconder mega menu. Mas neste caso, não quero mostrá-lo. Quero esconder o dedo do pé. Então eu clico em esconder e bater. Certo, e agora se eu for ao protótipo e atualizá-lo, trago o menu que mostra o menu e, em seguida, sair de lá faz com que ele desapareça. E quando eu subo aqui , nada acontece. Então estamos quase lá. Vamos voltar para a verdade agora o que precisamos fazer é fazer isso para que quando o mouse entrar nesta área de barra superior novamente, este é ah, grupo grande. Quando o mouse entrar nesta área, então queremos que o mega menu desapareça. Então eu vou seguir em frente e clicar em nova interação novamente e novamente. Eu vou usar no mouse, entrar e mostrar e esconder, e eu quero mostrar e esconder mega menu novamente. E neste caso novamente, quero me esconder. Então eu seleciono ocultar e, em seguida, pressione. Ok. E vamos voltar ao nosso protótipo de atualização. E se eu pairar sobre a loja e subir, então ele vai embora. Se eu pairar sobre a loja e cair, então ele vai embora, que é exatamente o que queremos que aconteça. E é assim que você usa o mouse, entra em interação ou em ER real para controlar a visibilidade de objetos dentro do protótipo. 13. Criação de um Mouseover rico: nesta aula, nós vamos aprender como fazer um mouse ricamente interativo sobre interação no ator. Então, se olharmos para baixo no site Sunita aqui e olharmos para esses blocos de categoria, podemos ver que há muita coisa acontecendo quando você passa o mouse sobre a imagem de fundo escurece. Este título se move para cima e essas coisas aparecem, e isso ainda se estende. Agora você pode fazer tudo isso no ator, mas para conseguir isso requer um pouco mais de técnicas avançadas que estão fora do escopo desta classe introdutória. Então vamos dar uma olhada no que vamos fazer em vez disso, é muito perto, mas não é todo o caminho até lá. Então, quando passamos o mouse sobre isso, temos o título da categoria que se move para cima, e a imagem no fundo é ótima para fora um pouco. E então temos esses itens aqui que aparecem. Então vamos em frente e ver como fazer isso. Um ator. Vou mudar aqui para o nosso protótipo, e a primeira coisa que quero fazer é criar esse efeito de escurecimento. A maneira que eu vou conseguir isso é adicionando outra caixa aqui, e eu vou torná-la exatamente do mesmo tamanho. Vou nomeá-lo antes de fazer qualquer outra coisa. Dê o nome de máscara. E então a maneira que eles realmente obtêm esse efeito está lá essencialmente sobrepondo algo em cima dessa imagem. Eu vou fazer este preto e 40% opaco, e você deve ver algo que parece bem perto. Tudo bem, lá vamos nós. Agora, nós precisamos realmente colocá-lo dentro deste grupo. Eu vou apenas arrastá-lo até aqui , e vai demorar um pouco. Dedo, entra aí. Uh, ok. Então lá estamos nós. Os deles são de primeira categoria agora. Nós temos isso no grupo de categoria, mas ele precisa estar acima dessa máscara estão me desculpe acima da imagem. Então agora parece certo. Mas o que queremos fazer é ter certeza de que ele está oculto por padrão. Então eu vou clicar com o botão direito sobre ele. Ele se escondeu. Lá vamos nós. E não, eu vou trapacear um pouco e vir aqui no meu arquivo completo. Eu só vou copiar um pouco desse material sobreposto aqui, tudo bem, e ele já foi agrupado, e eu consegui colá-lo diretamente nesse grupo, então eu acho que estamos bem. Mas, novamente, este o nome da categoria aqui precisa estar acima da sobreposição. Tudo bem, então agora o que queremos fazer é criar a interação no próprio grupo. Então, se eu selecionar o grupo aqui, clique em interações e nova interação. A primeira coisa em que precisamos trabalhar é tornar a imagem de fundo fraca. Então vamos em frente e usar no mouse Enter novamente e no Mao Center. Queremos mostrar esse objeto, , e como há muita coisa aqui, eu vou procurar por essa máscara certa e encontrá-lo bem rápido, e eu quero mostrá-la. Mas agora vamos adicionar um pouco de sabor. Se nos lembrarmos do site, ele é realmente animado. Um bocadinho. Vamos desaparecer em 250 milissegundos. Parece certo. Tudo bem, então agora, quando passarmos o mouse, ele vai aparecer. Mas também precisamos adicionar outra interação nesse mesmo grupo. É a interação no mouse para fora. Porque o que vamos fazer é essencialmente o oposto do que acabamos de fazer. Então eu vou vir aqui e bater show e novamente procurar por máscara. E desta vez quero escondê-lo. Então eu vou bater em esconder e desbotar 250 novamente e depois bater. Ok. Tudo bem, vamos verificar nosso protótipo no navegador e ver como ele se parece e atualizar. Aqui. Role para baixo. Sim. Sim. Ok. Isso está funcionando. Excelente. Certo, vamos voltar ao ator. E agora vamos trabalhar para fazer esta categoria. movimento de imagem aqui é uma espécie de movimento de título de categoria. Uma das coisas que eu faço, uh é fazer uma cópia dele, porque você vai ver, uma das coisas que precisamos fazer é identificar exatamente para onde queremos movê-lo . Então essa cópia me ajuda a descobrir isso. Então não, porque estou à procura de coisas. Vou me certificar de que não vou confundir este e chamá-lo de idiota. Ok. Então, para 19 por 16. 73. É aí que eu quero que isso mude para Ok, então eu selecionei o grupo novamente. Não. Você pode ver que já temos interações aqui. Então podemos ter várias interações no mesmo objeto, mas também podemos ter várias ações no mesmo evento. Então, se eu clicar aqui Ah, e eu acertar esse outro tipo de ação chamado Mover. Este é um novo para nós. Vou bater categoria categoria categoria aqui. Tudo bem. Nome da categoria é o que eu quero mover. E você pode se mover, que é um número relativo de pixels ou dois, que é definido local na tela. E você pode se mover, que é um número relativo de pixels ou dois, E dois geralmente é muito mais confiável. Então era 219 16. 73. Ok. E sim, quero animá-lo. Uh, eu vou usar essa curva de facilidade na saída, porque isso tende a parecer o mais natural. É bastante gentil. Você bateu. Ok. Tudo bem. E agora precisamos fazer a mesma coisa no mouse para fora, mas oposto. Então o que eu vou fazer é ir até aqui e ver onde está. Começando. Isso é 2 1917 18 Eu vou voltar para o meu, uh, meu grupo. Adicione em ação novamente. Eu quero adicionar Move aqui, e eu vou procurar o nome da categoria título aqui. Eu quero mudar para mudar. Quero movê-lo diretamente para 19 por 17. 18 e depois vamos animá-lo. Ele entra e sai de novo. 250 milissegundos. Certo, vamos dar uma olhada no que isso parece. Mas, na verdade, é primeiro livrar-se daquele boneco. Tudo bem? Em uma atualização. Tudo bem. Parece que queremos que pareça. Tudo bem, não, entrando em real novamente aqui. E a última coisa que precisamos fazer acontecer é que precisamos fazer essa sobreposição parecer eso Eu vou clicar no grupo novamente aqui e, em seguida, adicionar outro show de ação. E então eu vou bater sobreposição de gado, na verdade, porque é assim que o grupo é chamado, e eu quero mostrá-lo, e eu quero desvanecê-lo em 250 milissegundos novamente. E adivinha o que tenho de fazer aqui em baixo. Mesma coisa, mas ao contrário. Então, uh, eu vou mostrar a sobreposição. Mas desta vez eu quero escondê-lo e sim, eu quero ser animado neste caso também. Muito bem, vamos voltar ao nosso protótipo e actualizar. E nós temos isso funcionando. Agora, vá em frente e faça isso por esses outros dois. Então você se acostuma a usar várias ações e interações no, na verdade, porque é assim que você vai conseguir toda a sua rica interatividade com seus protótipos ricos . 14. Usando estilos de interação: nesta lição, nós vamos aprender sobre algo chamado interação. Estilos de interação. Os estilos são semelhantes às interações, mas também são ligeiramente diferentes. Essencialmente, o que eles são é um conjunto de parâmetros de formatação que são atribuídos a no objeto na interface do usuário do seu protótipo quando determinadas ações ocorrem. Então vamos dar uma olhada no Senado um site para um exemplo. Então, quando pairamos sobre essas coisas, podemos ver que elas ficam cor-de-rosa. Isso seria um exemplo do estilo de interação com o mouse. Agora há quatro outros que vão chegar a em um pouco que realmente suporta. Então vamos descobrir como podemos fazer isso na verdade. Então eu estou indo apenas para navegar para a direita para a lista de desejos. Vamos fazer isso pela lista de desejos, e então vocês podem fazer o resto sozinhos. Portanto, há uma série de maneiras de chegar aos estilos de interação na realidade, mas a que é a mais fácil de lembrar é clicar com o botão direito ou clicar no objeto que eu quero aplicar o estilo de interação dois. E então eu vou clicar em efeitos de estilo. E então essa janela virá aqui. Agora você pode ver aqui os outros quatro estilos de interação mouse sobre é aquele em que vamos nos concentrar hoje. Alguns desses outros discutiremos em uma classe mais avançada. Então, uma das coisas que queríamos fazer era fazer o funt rosa. Então eu vou verificar a cor da fonte porque isso significa que ele vai mudar. A cor da fonte é parte desta interação e, em seguida, que parece ser um rosa perto o suficiente para mim. Então eu vou bater OK, e nós vamos voltar para o protótipo regenerar. E se passarmos por cima disso, lá vamos nós. Mas se quisermos que funcione assim, onde realmente faz o coração cor-de-rosa, teremos que trabalhar um pouco mais. Voltando ao ator, a primeira coisa que precisamos fazer é adicionar um estilo de interação a essa coisa. Então, o ícone em si, Então eu vou clicar com o botão direito efeitos de estilo hit. E para uma Nikon, você pensaria que seria a linha, mas na verdade é a cor de preenchimento que você precisa mudar e eu vou mudar para aquele hit rosa. Certo, volte ao protótipo e atualize. E lá vamos nós. Ambas as coisas estavam ficando cor-de-rosa. O único problema é que eles não estão ficando cor-de-rosa juntos. Vou te mostrar como resolver isso. Então vamos voltar ao real aqui, e podemos ver que essas coisas são realmente um grupo. E o que podemos fazer é selecionar o grupo, depois clicar com obotão direito e escolher essa opção chamada efeitos de estilo do mouse de fogo. E o que podemos fazer é selecionar o grupo, depois clicar com o O que isso fará é enviar quaisquer interações do mouse diretamente para todos os objetos dentro do grupo ao mesmo tempo. Então, se eu clicar nisso e voltarmos para o protótipo e atualizar e eu revisar a lista de desejos, lá vamos nós. Posso rever qualquer área do grupo, e tudo fica rosa agora com o resto do que vocês precisam fazer para terminar. Isso é fazer isso para o resto dessas opções de navegação aqui. Agora, se isso soa bem entediante para você, você está exatamente correto. Isso é muito tedioso. Vou te mostrar uma dica rápida de que você pode dialogar então se você tiver algo que tem estilos de interação selecionados e você copiá-lo, eu vou apertar o comando, ver o nosso controle. Veja, o que eu posso fazer é que eu posso realmente selecionar outro objeto e clique com o botão direito nele ou controle. Clique nele realmente tem que ampliar aqui um pouco e ir em frente e ir Teoh colar especial . E então, hum eu vou colar estilo e vamos em frente e atualizar o protótipo porque parece que nada aconteceu. Mas agora, se eu for aqui, lá vamos nós. Então você pode realmente copiar e colar estilos de interação também, ansioso para a próxima lição em que começamos a falar sobre painéis dinâmicos. 15. Usando painéis dinâmicos - básico: menos e vamos aprender os conceitos básicos de painéis dinâmicos. Agora, o que é um painel dinâmico é que é uma área na idade do protótipo que pode alterar o conteúdo dinamicamente. Deixe-me mostrar-lhe um exemplo de como isso se parece no site Sunita. Então, se percorrermos até aqui até as imagens do produto, se passarmos o mouse sobre isso, o que acontece é que a imagem no fundo muda. Agora vamos fazer um protótipo deste ator, você sabe, enfraquecer, fazer a, uh, sobreposição como nós fizemos acima. Mas por enquanto, vamos nos concentrar em fazer a imagem do produto mudar. Vocês podem fazer a sobreposição sozinhos porque já sabem como fazer isso. Então, vamos dar uma olhada em como nós realmente faria isso. Um ator. Eu vou rolar até aqui para as imagens do produto que temos e ah, eu só vou trabalhar com este em particular. Então, na verdade, há várias maneiras diferentes de colocar um painel dinâmico em seu protótipo. Uma é arrastá-la da biblioteca, mas quase nunca faço isso. Eu só não acho que é super útil, porque quando eu crio um quadro de arame, o que eu estou fazendo é que eu geralmente estou colocando para fora o conteúdo primeiro. Então, há essa coisinha agradável que eu posso dio onde eu posso selecionar algum conteúdo. Neste caso, eu vou para aqui para o delineado para ter certeza de que eu tenho tudo selecionado que eu preciso ter selecionado. Você precisa olhar para os produtos. Certo, aqui estamos nós, o produto dele, BG Image 1. Isto vai ser, ah, ah, onde o meu painel dinâmico existe agora. Um painel dinâmico em si mesmo não é absolutamente nada. É apenas um limite para fazer com que pareça algo que você precisa para criar estados e conteúdo atribuído a esses estados. E é a mudança desses estados que dá o comportamento que acabamos de ver no site Sunita. Então, a maneira que eu prefiro criar um painel dinâmico é para a direita, clique ou controle. Clique no conteúdo selecionado, uh, e clique em criar painel dinâmico é o que isso vai fazer é ele vai criar um painel dinâmico com um estado, e esse estado tem sobre ele todas as coisas que eu selecionei. Então eu bati. Criar painel dinâmico e você pode ver aqui temos um nome genérico. É o estado do painel dinâmico dele, e depois o conteúdo que eu selecionei. Então, a primeira coisa que eu vou fazer é, é claro, claro, renomear isso para imagem do produto um. E eu também vou renomear o estado porque isso é algo que também é muito importante. Vou chamar isso de padrão me ajuda a manter o controle do que deveria estar onde, tudo bem. E agora você vai notar que há esta área azul por aqui. Agora, isso é muito novo em ação. Nove. Uma nova maneira de lidar com painéis dinâmicos. Ator tem painéis dinâmicos por algum tempo, mas eles realmente reformularam como você trabalha com, hum Então, por padrão, ele provavelmente vai realmente se parecer com isso. Hum, então você ainda verá todo o conteúdo ao seu redor lá pode ser um pouco confuso porque, você sabe, você acha que está trabalhando com o conteúdo, mas você realmente não está. É por isso que eu gosto deste recurso isolado que também é conhecido um ator nove. Então eu posso olhar apenas para o conteúdo que eu estou querendo criar. Agora há uma série de maneiras diferentes de criar estados diferentes porque vamos precisar fazer isso para poder alternar entre eles. Eu posso vir aqui e bater adicionar estado porque este pequeno você eu vou permitir que eu navegue entre estados novamente. Isto é novo na verdade nove, hum, ou eu posso ir até aqui à direita ou clicar em um estado ou no próprio painel dinâmico e apertar Adicionar estado. Mas o que eu realmente vou fazer é eu vou duplicar este estado porque o próximo estado vai ter exatamente o mesmo tipo de conteúdo, uma imagem, e ele vai ser exatamente as mesmas dimensões. Então eu vou chamar esse rato de estado ali. Se continuarmos, eu o isolei. Eu posso ver que eu estou no estado do mouse sobre, então eu vou apenas clicar duas vezes sobre esta imagem porque eu quero substituí-la por uma nova imagem que eu estou indo para bater produto para. Muito bem, aqui está o meu estado, o meu rato sobre o estado. E aqui está o meu estado padrão mais acima do estado. Muito bem, vamos fechar isto. E então agora voltamos para a própria página de arame em vez de um estado de painel dinâmico. E vamos ao nosso protótipo aqui, atualizar isto e ver como é. Agora você percebe que nada acontece. E a razão pela qual nada acontece é porque temos que especificar uma ação específica chamada set panel state, a fim de fazer o painel dinâmico se comportar assim. Então vamos ver como fazer isso em ação. Ok, então eu vou selecionar o painel dinâmico e, ah, ah, como com qualquer outro objeto na verdade, você pode ter interações associadas a esse tipo de objeto. Então o que queremos fazer é quando o mouse continua, queremos que ele alterne o mouse dentado sobre o estado. E quando ele se apaga, queríamos voltar para o estado padrão. Então vamos ter uma nova interação e depois ir para o nosso velho amigo no mouse enter. E é aqui que as coisas ficam novas porque vamos usar esse novo tipo de ação chamado estado do painel de configuração. E o que vamos fazer é escolher um painel dinâmico específico. Então, por exemplo, se eu tivesse vários painéis dinâmicos, eu poderia mudar o estado de outro painel dinâmico. Mas eu vou mantê-lo simples e dizer este widget porque isso é sempre auto-referencial. E no mouse enter, eu quero que ele fique, para mudar, para passar o mouse. Então eu seleciono esse estado aqui. Eu não quero fazer nenhuma animação, embora há todo tipo de coisas divertidas que você pode fazer lá vai bater. Ok, e então, é claro, eu tenho que adicionar a interação correspondente no mouse para fora. Então, novamente, defina o estado do painel neste widget para o estado padrão. Isso é o que eu quero. E mais uma vez, sem animação. OK, e agora vamos verificar o nosso protótipo novamente. Refresque-se e passa o mouse e lá vamos nós. Isso é o que esperamos. Então, esses são os conceitos básicos de trabalhar com painéis dinâmicos e ator. Na próxima lição, analisaremos algumas das propriedades e interações mais exclusivas associadas aos painéisdinâmicos painéis 16. Usando painéis dinâmicos - intermediário: nesta lição estará aprendendo sobre algumas propriedades adicionais que são exclusivas para painéis dinâmicos . Então deixe-me mudar para o site da Sunita e mostrar-lhe do que estou falando. Então preste atenção a estas duas barras aqui em cima, então a de cima vai embora, e então a de baixo aparece novamente e depois fica no topo da janela depois de você rolar para baixo até um certo ponto agora, fazendo com que as coisas grudem em qualquer lugar da janela. Isso é algo muito fácil de fazer com painéis dinâmicos. Quando, embora você possa fazer essa interação onde ela só aparece depois de rolar para baixo até um determinado ponto, ela requer técnicas mais avançadas. Então eu vou te mostrar o que vamos fazer em vez disso. Então, se olharmos para estes dois, acima dos nossos, vamos apenas enfiá-los no topo da janela e mantê-los lá para o todo com do esquilo. Então, a maneira como fazemos isso vai entrar em ator. Ah, como eu disse em Lee, painéis dinâmicos têm essa propriedade de ser capaz de ficar em algum lugar na janela enquanto você está rolando. Então o que eu vou fazer é eu vou criar estes. O NAB estão na barra superior como painéis dinâmicos. Então eu vou para a direita, clique ou controle, clique nele, crie painel dinâmico e, em seguida, nomeie-o. Painel da barra superior. Eu gosto do Teoh. Meus painéis realmente têm o painel de nomes neles? Isso só me ajuda a manter o controle das coisas enquanto eu estou protótipo. Então eu vou fazer a mesma coisa aqui, exceto que eu vou chamá-lo de pegar o nosso painel. E agora, a fim de fazê-lo ficar no topo, o que precisamos fazer é clicar neste link aqui. Agora, esta é uma seção que os painéis dinâmicos do Onley terão. Ele permite que você controle a rolagem, bem como algumas outras propriedades. Mas o que vamos falar agora está fixando no navegador. Então fixar é como você faz as coisas pegajosas. Então, para fazer isso, você clica no navegador Pinto, marque esta caixa de seleção e porque queremos que isso esteja no centro da tela, vamos organizar isso no centro e queremos que ele seja fixado no topo e nós quero mantê-lo na frente. Então nós vamos bater, OK, e agora isso não vai ter nenhuma mudança para nós aqui na real você por quê? Mas quando vamos para realmente visualizar isso, o que vamos ver é que isso parece um pouco diferente. Então aquele está preso lá em cima no topo. E vamos fazer isso com este também. Então, clique no pin para o navegador pin para a janela do navegador e clique no centro novamente. Agora, aqui você vai notar que há uma margem. Essa margem apenas significa que isso é essencialmente 40 pixels para baixo a partir do topo da página. Vou bater nisso e depois ir aqui e refrescar-me. E lá vamos nós. É o que procuramos. Então isso é tudo que você precisa fazer para colocar as coisas no topo da janela. Eu quero mostrar algumas outras propriedades interessantes de painéis dinâmicos. Então, uma das coisas que você pode fazer é que você pode realmente atribuir ah cor de fundo a um painel dinâmico. Uh, e por que isso é interessante é porque você pode fazer um painel dinâmico 100% com largura em qualquer janela do navegador. Então o que eu vou fazer aqui é ir para a cor e eu vou digitar d sete d sete porque acontece que eu sei que esse é o valor hexadecimal do fundo dessa barra em particular. E o que você vai ver é que você não vai ver nada aqui agora. Mas quando eu vou para o, uh o navegador e atualizar e se eu encolher um pouco para que você possa ver como tudo fica no meio lá e então este, uh, uh, se estende por todo o caminho. Agora, este é um padrão muito comum que Ah, você vê muito em sites modernos. Então essa é uma boa maneira, Teoh de recriar um ator. Agora a outra coisa interessante sobre painéis dinâmicos é que eles têm interações únicas associadas a, hum, então eu selecionei neste painel, e se eu tocar em nova interação, você verá um monte de coisas que você normalmente não veem tal alteração no estado do painel. Assim, quando um painel dinâmico muda para exibir conteúdo diferente ou um estado diferente, você pode fazer coisas. Quando isso acontece, você pode realmente usar painéis dinâmicos para fazer interações de gota de dragão. E se você estiver criando protótipos de experiências móveis nativas, poderá usar painéis dinâmicos para fazer interações de tipo com o dedo. E você também pode fazer interações de rolagem com quando estiver rolando dentro do painel dinâmico . E você também pode fazer interações de rolagem com quando estiver rolando dentro do painel dinâmico Normalmente, você só pode fazer isso quando estiver rolando na página, e é isso que eu tenho que mostrar sobre algumas propriedades especiais adicionais e interações associadas a painéis dinâmicos. Espero chegar a um tutorial de painel mais avançado e dinâmico no futuro porque há um monte de coisas realmente interessantes que você pode fazer com esses widgets. 17. Introdução a Masters: Os mestres são um dos recursos e ação mais poderosos. Eles permitem que você reutilize o conteúdo e a funcionalidade em todo o protótipo, mantendo-o em apenas um lugar. Agora, na versão nove, eles realmente tornaram isso ainda melhor adicionando substituições de estilo de esboço. O que isso significa é que eu posso criar um componente complexo, usá-lo em todo o meu protótipo, alterar o conteúdo para cada instância desse componente e, em seguida, ainda manter as interações e o layout básico em um só lugar. É super incrível. Tudo bem, vamos em frente e começar a aprender sobre mestres. 18. Criação de mestres: nesta aula, nós vamos aprender como trabalhar com mestres, que são objetos em que realmente nos permitem reutilizar estilo, conteúdo e funcionalidade. Ao longo do protótipo, você pode encontrar mestres aqui ao lado de suas bibliotecas. Por padrão. Ele estará vazio porque você realmente tem que criar um mestre primeiro. Então eu vou chamar este mestre de teste e você vai notar que nada aconteceu aqui que é totalmente bom porque um mestre está em si mesmo, sua própria armação de , arame. Então o que você precisa fazer é realmente atribuir coisas para o mestre. Vou colocar esta caixa aqui em cima, e então vou colocar uma imagem na caixa que fica bem em nós. E quando eu voltar para casa novamente, nada mudou. Se eu for até os mestres aqui, posso arrastar este objeto. Na verdade, é objeto composto neste ponto para a página. Agora há várias instâncias disso. A coisa legal sobre mestres, no entanto, é que se eu mudar algo no mestre, como um, adicionar ah, título, adicionar algum texto aqui e voltar para a página inicial que muda automaticamente feita todas as instâncias do mestre. Então vamos olhar para um exemplo real em que usaríamos isso porque o que acabamos de descrever é algo que não é como eu normalmente trabalharia. Normalmente. O que eu gosto de fazer é rebocar arame no lugar e, em seguida, direito, clique ou controle, clique e clique. Criar Mestre. Isso funciona exatamente como criar painéis dinâmicos. Desta forma. Vou ligar para esta lista de produtos, está bem? E agora eu tenho esse mestre, então há um monte de, uh, funcionalidade e interatividade que está acontecendo aqui. Mas agora eu poderia comer, copiar tudo isso no resto dessas coisas e não ter que refazer isso. Mas uma das coisas interessantes, entanto, é que, hum, para produtos como este, você gostaria de ter conteúdo diferente. E embora tenhamos este mestre de listagem de produtos aqui, uma das coisas que é nova na versão nove é essa ideia de sobreposições. Isso é muito parecido com substituições de símbolos e esboços se você é um usuário de esboço, mas você pode realmente alterar esse conteúdo. Eso, por exemplo, deixe-me realmente excluir isso e criar outra instância da listagem de produtos porque quando você está fazendo essas substituições, você realmente não está alterando o conteúdo do mestre. Você só mudou sua única alteração no conteúdo da instância do mestre. Então aqui, na listagem de produtos um, isso é na verdade, hum, algo parecido com isso. Então eu vou ligar. Vou mudar o preço também. 1 99 e ligue para os produtos 1. E agora você pode ver essas mudanças refletem aqui eu posso mesmo se eu quiser escolher as imagens. Então, a imagem padrão que eu vou para Ah, digamos que eu vou para imagens coloridas desta vez. E, em seguida, o mouse sobre a imagem. Vou fazer esta imagem. E agora, quando vamos ao protótipo e regeneramos, vocês podem ver aqui embaixo, ele ainda mantém todas as interações. Estes são os dois iguais. Eles ainda se movem da mesma maneira. Agora você provavelmente está se perguntando, OK , bem, qual é o uso disso se eu posso mudar todo esse conteúdo? O uso é se você quiser mudar algo sobre essa interação. Então, por exemplo, eu vou entrar aqui, e a interação está dizendo que ele vai mostrar a sobreposição de 2 250 milissegundos. Então vamos realmente aumentar isso para 500. A mesma coisa com a pele. E agora, quando formos até aqui e atualizarmos o protótipo novamente, vocês notarão que ambos funcionam. Da mesma forma , ambos têm o mesmo desbotamento. E essa é a vantagem. Porque se você quer mudar a natureza de uma interação para um mestre como este, se você está substituindo o conteúdo, então você realmente só precisa alterá-lo em um lugar. Pessoalmente, eu acho que isso é, ah, uma nova adição fantástica para depois das nove. Agora, eu encorajaria você a ir em frente e fazer isso por todas essas coisas. Sinta-se livre para adicionar as imagens que você quiser. 19. Comportamentos de mestre: esta lição aprendeu sobre alguns tipos diferentes de comportamentos que os mestres podem exibir quando você os solta na página. Também falaremos um pouco sobre planejamento e estratégia quando se trata de construir seu protótipo, porque o uso de mestres pode realmente acelerar as coisas ou potencialmente retardar as coisas. Então, o que vimos até agora é apenas um mestre que você atribuiu a uma página e vai onde você colocou. E quando você muda algo nesse mestre que altere atualizações e outros mestres, a menos , claro, que, claro,tenha sido substituído. Mas se você realmente clicar com o botão direito sobre esses mestres na lista, você vai chegar a algo que diz comportamento Drop, o comportamento padrão. O que acabamos de descrever é lugar em qualquer lugar. Há dois outros comportamentos travados para a localização principal, o que é interessante. Você pode ver as alterações de ícone aqui. Agora, se formos para o próprio mestre de listagem de produtos, sua localização é 00 Então o que vai acontecer é quando eu arrastar este mestre para cá, eu meio que vou colocá-lo aqui. Mas não vai para lá. Vai estourar todo o caminho até 00 agora Este não é um que eu uso muito mais porque nós temos painéis dinâmicos que podemos fixar no topo da página. Normalmente, eu uso isso muito para, hum para navegação. Agora há outro comportamento a ser chamado separatista. O que isso faz é que isso significa que é ah, mestre que não está necessariamente ligado ao nosso, em vez de uma instância do mestre que não está ligado ao próprio mestre. Então eu posso, você sabe, entrar aqui e deletar coisas individualmente, etc, etc. Mas, novamente, este não é um que eu me vejo usando muito mais. Por causa das substituições de mestre, posso realizar a mesma coisa de uma forma muito mais eficiente com essas substituições. Quando comecei a prototipagem com ator, eu ia direto para a ferramenta e começava a prototipagem. E então, no meio do caminho, eu descobriria uma maneira mais eficiente de fazer algo, e então eu voltava e fazia isso da maneira eficiente, e então eu acabaria tomando muito mais tempo. Então o que eu recomendo às pessoas é que você não pense que um ator pense em um caderno de esboços, desenhe coisas, pense em tudo e, em seguida, represente seu design. E, na verdade, quando o tempo estiver pronto e então também pensar no que vai ser um mestre, pense no que vai ser um painel dinâmico. Pense em como as coisas vão interagir e isso vai ajudá-lo a ser muito mais eficiente quando você vem para prototipagem. Um ator é um programa muito complicado e de fundos para usar, então se você não entrar nele, plano Feli, você pode ir para alguns buracos bem profundos de coelho. 20. Introdução a Visualizações adaptativas: Tecnologias responsivas já existem há algum tempo. Os sites no APS para dispositivos móveis nativos expandem e se contraem para caber em qualquer dispositivo Infelizmente, não muitas ferramentas de design facilitam o uso de sistemas de moldura ou protótipo como esse. Na verdade, porém, é um uso adaptativo. O recurso torna muito fácil protótipo de um sistema responsivo agora, embora as visualizações adaptativas sejam tamanhos de porta de visualização fixa e não realmente responsivo, isso geralmente é bom o suficiente para testes de usabilidade ou para se comunicar com partes interessadas como gerentes de produtos e engenheiros ou qualquer outra pessoa e também inversão nove. Estes tornaram-se ainda mais úteis com a adição do recurso adaptável que você define. O que isso faz, basicamente é. Agora posso ter tamanhos de porta de visualização diferentes para páginas diferentes, que aumenta muito a flexibilidade do meu protótipo. Então vamos em frente e descobrir como usar o uso adaptativo e ator 21. Configurando vistas de futuro: nesta aula, nós vamos aprender como configurar o ator para acomodar prototipagem para sistemas responsivos, enquanto na verdade não podemos protótipo de resposta completa de si mesmo. Pode chegar perto de algo chamado adaptativo. Use a maneira mais fácil de configurar usos adaptativos para ir em frente e clicar em algum lugar fora do seu quadro de arame e clique neste painel de estilo aqui à direita. E então haverá algo aqui que diz, Adicionar uso adaptativo. Vá em frente e clique nisso. Agora esse diálogo irá surgir e mostrará a vocês uma visão base. Esta é a visão que é tão ampla quanto a sua armação atualmente é, , então eu vou realmente nomear esta vista. Chame de tela grande só para me ajudar a entender o que é o quê. E o que eu vou fazer é criar visualizações adicionais para acomodar situações em que a porta de visualização é menor do que 14 40 pixels. Então eu vou adicionar outro, e eu vou usar esta função predefinida útil, que é super liso, e eu vou bater tablet paisagem e, em seguida, mais um para tablet retrato. Agora o que está acontecendo aqui é que essas visualizações serão mostradas em momentos diferentes, tão grande exibição será exibido Are será mostrado a qualquer momento. A porta de visualização é 14 40 pixels ou mais larga mesa Paisagem será mostrado a qualquer momento. A porta View é 10 entre 10 24 e 14 40 pixels e, em seguida, retrato tablet será exibido quando a porta View está entre 7 68 e 10 24. Mas também uma vez que é a visão mais baixa qualquer menor com também. Então, quando eu bater OK, o que você vai ver acontecer aqui é que essas visões tipo de aparecer acima da armação de arame. Vou desmarcar isto. Falaremos sobre isso na próxima lição. Mas o que isso nos permite fazer é atribuir coisas diferentes a diferentes molduras de desgaste . Agora é difícil dizer que algo aconteceu agora. Mas se percorrer todo o caminho até a parte inferior e vemos uma espécie de largura da página, se eu clicar em tablet paisagem e tablet retrato, você pode ver que estes que o tamanho da página essencialmente fica muito menor. E na próxima lição, aprenderemos sobre como usar moldura nessa situação. Ah, uma das coisas que são novas em ação. Nove. É essa idéia de adaptável você define em versões anteriores, a única maneira que você poderia realizar o uso adaptativo era protótipo largo, então cada página teria o mesmo uso adaptativo. Agora, se eu clicar duas vezes na loja aqui, você notará que não há nenhuma configuração de uso adaptativo. Hum, você vai pensar que você provavelmente vai estar preocupado que ok, eu tenho que configurar isso para cada página? E sim e não, uh, você tem que configurá-los, mas é bem fácil. Portanto, se você criou um conjunto adaptativo de exibições adaptativas em uma página, se você clicar em adicionar exibições adaptativas em uma página que não as tenha, você pode realmente selecionar um dos conjuntos que você já criou. Então eu vou fazer isso agora, e podemos ver que é exatamente o mesmo que fizemos antes. E podemos ver as coisas ficando menores, assim como na página inicial. Na próxima lição, vamos falar sobre como realmente usar quadro nesta situação, ansioso por isso 22. Enframe de fio adaptativo: Agora que temos o nosso adaptável que você configurou, podemos ir em frente e garantir que nosso quadro de arame tenha uma aparência correta em todos os tamanhos de relatório diferentes . E antes de começarmos, certifique-se de desmarcar afetar todas as visualizações. Vamos falar sobre o que isso faz e um pouco mais porque o enquadramento do fio adaptativo pode ser um pouco demorado. Eu só vou me concentrar em um objeto aqui. Então, ah, é esta imagem de herói aqui. Então, agora, em grande exibição, parece exatamente como aconteceu no passado. Agora, se eu clicar na paisagem Tablet, ele ainda parece o mesmo. Mas eu vou mudar seu tamanho aqui. Então, se eu torná-lo que com de da página e, em seguida, eu voltar para uma tela grande, você vê grandes coisas de exibição permanecem inalterados. Mas no tablet retrato, essa mudança foi filtrada. Essa é a herança que estávamos falando na lição anterior. Então agora temos esses três tamanhos para essas três portas de visualização. Vamos dar uma olhada no que isso parece no navegador. Então, se eu rolar até aqui, , podemos ver que a imagem é toda ampla nisso. E não, porque esta é a 1440 que é o tamanho do meu monitor. Vai estourar imediatamente. Então, esta é a visualização de mesa gráfica paisagem e em breve estará na visualização de mesa gráfica retrato. Lá vamos nós e você pode ver como tudo o resto permanece igual. E isso é basicamente o quão consciente enquadrar, uh, nessas diferentes visões funciona. Agora há algumas outras coisas interessantes. Uma é que se estamos em uma visão mais baixa, normalmente , um, as coisas que fazemos aqui não afetam nenhuma dessas visões mais altas, e você pode dizer porque esse ar meio ótimo. Mas se eu bater efeito todas as visualizações, essas coisas ficam verdes, e o que eu posso realmente fazer é adicionar algo que eu vou adicionar, dirigindo um aqui e, em seguida, quando eu tabulação sobre o dedo do pé tablet paisagem e grande display, que ainda está lá. Então é esse o efeito que todas as visualizações fazem. Eu costumo não usar isso porque pode realmente estragar as coisas se você não está realmente na bola. Agora há outra coisa que é interessante sobre o adepto de prototipagem versus enquadramento de fios , e por interessante quero dizer realmente bastante irritante. Mas isso é lidar com interações. Então vamos dar uma olhada nessa interação que tivemos protótipo anteriormente. Ah, e vamos ver se podemos mudar isso entre pontos de vista. Portanto, esta máscara está em 250 milissegundos para uma tela grande. Vamos mudar para o tablet paisagem e mudá-lo para 500. Agora, o que você acha que vai acontecer aqui? Tabuleiro de retratos. Sim, 500. Isso é o que você esperaria. No entanto, na tela grande, ele também muda, portanto, você não pode realmente ter interações diferentes para diferentes portas de exibição. Pessoalmente, eu acho que é uma espécie de falta, mas é com isso que temos que lidar. Então, felizmente, há uma maneira de lidar com isso, e isso é com este maravilhoso widget mágico chamado hot spot. Ah, hot spot é essencialmente uma área invisível na página na qual você pode aplicar interações . Eu vou fazer um atalho aqui e selecionar este objeto porque estas são as interações que eu quero e eu vou clicar e controlar Clique em um clique em vez Shift sobre isso e, uh, copiá-los com comando, veja ou Controle, vê? E então eu vou apenas selecionar o ponto de acesso e pressionar o comando V para colar ou controlar V, e você pode ver que estes realmente aparecem bem ali. E eu vou dar um nome a isto. Vou chamar isso de gatilho da paisagem. E então o que eu vou fazer é movê-lo para cima disso, então ele vai realmente absorver as interações e não disparar as que estão no fundo. E se eu for para a parte tablet, você pode ver que ele está lá também. Mas não está lá em grande exibição. Então aqui, o que eu vou fazer é que eu posso realmente mudar a interação aqui sobre isso em vez de ter que fazê-lo no próprio objeto. E quando eu chegar ao tablet de retratos Ah, eu realmente vou, uh, fazer a mesma coisa. Mas vou apagar este. Hum, você vai ver que ele ainda está lá no tablet paisagem e criar outro e fazer este tipo de coisa semelhante como eu fiz da última vez, uma cópia dessas interações e colá-los. Mas desta vez eu vou fazer 1000. Essencialmente só um segundo. Tudo bem, e então eu vou colocar isso aqui em baixo exatamente onde os outros estavam, e eu vou chamar este gatilho de um tablet retrato. Ok, então agora são 1000 no tablet retrato. São 500 milissegundos na paisagem e o regular para 50 na tela grande, e é assim que temos que lidar com isso. Saiba que a outra coisa que quero mostrar associada a isso é isso. Você notará que eles estão listados em vermelho porque isso significa que eles são exibidos na página mas eles não estão visíveis nesta exibição. Então, se eu for para a mesa de paisagem, você pode ver que o Trigger está agora visível. E para tablet retrato, PT Trek Trigger está agora visível. Agora o vermelho significa algo muito estranho para dizer. Isso significa que este não foi jogado est da vista, o que significa que ele simplesmente não está na vista agora. Se eu clicar com o botão direito ou controle, clique nele, Eu posso colocá-lo de volta na vista, Hum, e também, se eu tiver P t gatilho, Eu posso remover algo apenas desta vista por controle ou clicando com o botão direito do mouse e clicando em renda UNP da vista. , Mas sim, é assim que você lida com interações e usa molduras para protótipos adaptativos. Na próxima lição, falaremos sobre como os mestres impactam isso e a versão curta. É muito fixe. 23. Mestres adaptativos: Não são apenas páginas que podem ter uso adaptativo. Os mestres podem ter um uso adaptável e combinado com a capacidade de substituir conteúdo bastardo . Pode ser um poderoso espaço de tempo para você. Então, é rolar até aqui e dar uma olhada no mestre que eu criei anteriormente. Então, este produto listando Master Ah, agora você pode ver em cada uma dessas visualizações é o mesmo. E se eu clicar duas vezes neste dedo do pé, abra-o. Podemos ver que não há realmente nenhum uso adaptativo para este mestre novamente porque as exibições adaptativas estão associadas a páginas e você pode adicionar conjuntos como quiser. Então o que eu realmente vou fazer é eu vou adicionar pontos de vista mestre. Então, as visualizações mestre são ligeiramente diferentes do uso adaptativo, e você verá, por que essa base é essa? Você verá que não tem uma medida. Vou ligar para esse grande de vocês e adicionar mais um, um, e chamar essa visão pequena, e agora podemos ver que temos esses pontos de vista diferentes aqui. Então, em pequena vista, eu realmente vou clicar sobre isso e torná-lo obviamente diferente. Há uma vista grande. Há uma pequena vista e agora vamos voltar para a nossa página inicial. E à medida que passamos por diferentes pontos de vista aqui novamente, nada mudou. Hum, mas vamos fazer isso na vista do tablet paisagem. Vou selecionar uma dessas instâncias e você pode ver que há esse campo adicional aqui perto das substituições. Aqui é onde eu posso escolher qual de vocês do mestre eu quero. E assim, neste, eu realmente vou ter essas duas visões ao mesmo tempo. E neste, eu vou ter ambos em pequena vista e podemos ver como isso se desenrola no protótipo. Então, vamos refrescar isso e vir até aqui. E por isso é normal aqui. E depois vai mudar quando eu aparecer nessa vista. Então lá vamos nós, e depois mais um. E agora nós dois podemos vê-los lá agora, vez que o enquadramento do desgaste adaptativo pode ser bastante fino, há um monte de coisas para dio um, eu quero encorajá-lo a olhar para o arquivo de exercícios completo porque eu fui através e fez todas as visualizações para isso. Agora eu segui meu próprio conselho e apenas protótipo o suficiente para conseguir o meu ponto de vista, que é esta parte principal aqui. Agora, uma das coisas que eles querem mostrar especificamente a vocês é este mestre em particular, porque o que está acontecendo aqui é que cada um desses mestres está sendo substituído por conteúdo, mas é exatamente o mesmo mestre. Então, se eu for aqui para a categoria, podemos ver que há a visualização de mesa de paisagem, a visualização de mesa de retrato e o que eu também fiz foi onde vocês realmente tinham essa configuração para usar essa ação de movimento que você estava usando mover para em vez de mover por. Eu mudei isso para passar e, em seguida, eu não precisava mudar a interação entre grande tela no tablet paisagem. Mas para o tablet retrato, eu ainda precisava do dedo do pé. Adicione o ponto quente lá com interações diferentes porque eu estava realmente me movendo por um número diferente de pixels. Para tirar o máximo proveito desta classe, vá em frente e arame completamente todo o uso adaptativo para todo este sistema. Não, não fizemos muito isso na aula, mas isso é porque pode ser muito demorado. Mas você aprenderá muito se fizer isso e certifique-se de verificar o arquivo de exercícios concluído. Se você ficar preso, há um monte de coisas boas lá, então, em seguida, vamos falar sobre documentação e eu estou ansioso por isso. 24. Introdução à documentação: não é eficiente para protótipo. Até a última coisa que você quer que seu sistema faça. E é aí que a funcionalidade de documentação dos atores vem em coisas como notas de página e anotações de widget. Usei estas duas coisas para comunicar coisas que não faz sentido. Protótipo de mensagens aéreas são realmente um bom exemplo é ótimo para protótipo um exemplo de erro. Dessa forma, as pessoas concebem o comportamento da mensagem onde a mensagem aparece e a animação associada a ela. Mas não faz sentido protótipo cada última condição de ar e mensagem associada a ele. Então o que eu faço é documentar essas coisas em vez de uma nota que torna muito mais eficiente trabalhar com Actor agora na versão nove, não muito mudou sobre documentação é para coisas novas. Uma delas é que agora você pode mover uma nota de um widget para outro widget. Você também pode ter várias notas em um único widget. Mas a coisa que é realmente diferente é como a participação real evoluiu. Agora é chamado de nuvem real, e é uma visão muito semelhante à plataforma de colaboração. Então vamos em frente e começar a documentar coisas e, na verdade, 25. Documentação de páginas e widgets: nesta lição, nós vamos aprender sobre como usar a funcionalidade de documentação de atores para comunicar mais informações sobre seu protótipo, como ele deve se comportar ou qualquer outra coisa para seus colaboradores, como produto gerentes, engenheiros ou qualquer outro tipo de stakeholders. Então vamos em frente e começar. Agora, quando estamos fazendo documentação e ator, há essencialmente a níveis que podemos fazê-lo no nível de arame, que é onde estamos comunicando informações sobre ah páginas Ah, buraco e, em seguida, no indivíduo nível de widget, onde estamos comunicando informações sobre widgets individuais. Então, se quisermos comunicar informações sobre a página do todo, basta ir em frente e clicar fora de qualquer um dos widgets e, em seguida, vá em frente e clique aqui despercebido e você verá o nome da página. E então essa coisa aqui que diz visão geral da página. Isto é realmente onde você é capaz de digitar suas notas, então eu vou apenas digitar I. Eu sou uma nota de página, e então quando vamos para o protótipo gerado aqui, atualize isso. Se não conseguirmos ver notas a menos que clicemos neste ícone aqui em cima, isso mostra a documentação. Então você vê o nome da página, bem como a própria nota. Então é aqui que eu comunicaria informações sobre as condições sob as quais esta página aparece. Comportamentos especiais e situações especiais, esse tipo de coisa. Comportamentos especiais e situações especiais, Então vamos em frente e olhar para documentando widgets. Eu realmente vou descer aqui e, ah, ah, normalmente o que você faria quando você está documentando um widget é você clicar no widget e, em seguida, clicar em notas. Agora você vai notar que não há nada aqui. Isso é algo que eu realmente não estou super feliz porque um ator nove pelo menos você não pode realmente documentar um grupo. Então eu realmente tenho que clicar em, ah, um objeto a fim de ser capaz de colocar notas sobre isso. Então, neste caso, eu vou apenas colocar esta nota na imagem de fundo Categoria 2. Hum, então você pode ver aqui onde diz nota, eu vou Teoh, insira algumas informações, eu sou uma nota, e você verá aqui que assim que você criar uma nota, uh, outro aparece. E também, quando você cria essa primeira nota, essa pequena tag aparece aqui e você também pode criar várias notas por objeto, o que é muito legal. Eu sou outra nota, e se você tem conteúdo associado a um widget ou qualquer tipo de interações, você pode clicar neste ah, ícone de anexo, e você pode incluir ambos. Nesse caso, não há nenhum texto ou interação associado a isso, mas se houvesse, ele puxaria isso. E a razão pela qual você gostaria de fazer isso é porque se você estiver usando esse protótipo para se comunicar com engenheiros, às vezes pegar texto de um protótipo é difícil para que os engenheiros possam simplesmente pegá-lo fora de sua nota. Então vamos ver o que isso parece no protótipo e atualizar. Clique nas minhas notas aqui e aqui. Minha nota de página está lá, e minhas notas individuais estão lá em você. Eu posso ver claramente o que a nota individual está em, e eu posso clicar nela. Vai para lá. Então isso é realmente e se eu clicar no número real que eu recebo a nota aqui, então basicamente é muito, muito difícil perder as notas Now. Você também pode fazer esse tipo de documentação em mestres. Acho que isso é super útil quando se comunica sobre o comportamento de objetos como este . Na próxima lição, falaremos um pouco sobre como publicar seu protótipo na nuvem real, que é o que permitirá que você realmente comece essa colaboração. 26. Publicação no Axure Compartilhamento: para tirar o máximo proveito do ator como uma ferramenta de colaboração, você realmente precisa publicar seus protótipos na nuvem real. Se você vai fazer isso, a primeira coisa que você precisa fazer é ir para o actor dot cloud e criar uma nova conta. Eu já tenho contas, então eu vou apenas ir em frente e ah, entrar aqui. Hum, então isso é tudo meu material de ator, mas isso não é importante agora. O que é importante é voltar para a realidade e certificar-se de que você está logado por aqui. Então, se você for para a conta e acertar, entrar na sua conta real, basta digitar as credenciais da Crittenden que você acabou de criar para sua conta real na nuvem, e você deve estar pronto para ir, cara. Então, uma vez que você tenha feito isso, você pode apertar este botão de compartilhamento. Agora, quando eu acertar isso, isso vai parecer um pouco diferente porque eu realmente preciso publicar isso em um ano novo, Earl, hum, hum, porque eu criei e deletei esse protótipo um número de vezes. Então, quando eu fizer isso, isso é o que ele vai procurar por você por padrão. Eu realmente vou escolher um lugar diferente toe colocar isso porque eu tenho muitas pastas na minha conta de nuvem real. Posso proteger com senha se não quiser, mas não quero fazer isso agora. Uh, isto é importante. Certifique-se de permitir comentários verificados. Caso contrário, outras pessoas não poderão comentar seu protótipo. Então eu vou clicar em Publicar sobre isso leva um pouco de tempo, mesmo com um protótipo relativamente pequeno como este. Então eu só vou bater lentamente Copiar você é l E em nenhuma pressa de me admirar de volta aqui para o meu navegador, colocá-lo lá e estava lá. Então deixe-me ir para a home page da Sunita. Tudo bem, então o que estamos olhando para comentar sobre a participação de atores é você usar essa coisa de anotações aqui. Na maior parte, o que você quer fazer é acertar. Na maior parte, o Adicionar comentário na tela. Agora, o importante é que você tem que rolar para onde você deseja adicionar o comentário. Porque uma vez que você clicar nisso, você não poderá mais rolar. Então eu vou adicionar um comentário aqui quando eu clicar sobre isso. Está numerada. E está me dizendo quem eu sou para que ele capte meu nome. Ah, aqui está o meu cometa. Então eu vou postar isso, e eu posso continuar fazendo isso. Hum, mas eu preciso bater na saída, a fim de sair dessa. Então isso aparece aqui você pode responder e, você sabe, você pode editá-lo. O mercado está resolvido. Uma das outras coisas interessantes é em outro comentário aqui, Hum, você também pode clicar sobre isso. E o que isso vai fazer é que me permitirá tirar uma foto particular do que estou falando. Vou dizer que quero refilmar esta fotografia. Ah, e então eu também posso mudar a cor por qualquer motivo e depois sair. E isso mostra shows aparece aqui. E quando fizeres as notificações por e-mail, aviso-te, haverá muitos deles. E quando fizeres as notificações por e-mail , aviso-te, Mas todas essas informações, incluindo essas fotos, aparecem lá. Mas todas essas informações, incluindo essas fotos, Então é muito fácil acompanhar o que está acontecendo. Então isso encerra nossa lição sobre a publicação na nuvem real 27. Conclusão: Parabéns. Você completou a introdução à prototipagem, e depois das nove, falamos sobre interações de enquadramento de fios, mestres, design responsivo e documentação. E acredite ou não, esses são apenas o básico. Então eu espero cobrir alguns tópicos mais avançados nas próximas aulas. Coisas como interações avançadas, interações baseadas em formulários de animação e aplicativos dinâmicos também coisas como lógica condicional e design visual detalhado. Então fique de olho nelas. Enquanto isso, quero agradecer-lhe muito pela sua atenção, seu interesse no seu tempo. E espero que tenha aprendido muito. Cuide-se.