Criação de wireframes no Axure RP 8: intermediário

1. Introdução: Olá, e bem-vindos à minha segunda aula de emolduramento com R P. Oito. Esta aula abrange tópicos mais profundos e complexos e habilidades e técnicas que serão perfeitas para alguém que já molhou seus pés com ER real e só quer aprender um pouco mais e fazer seus arames realmente se destacar se você já vi a minha introdução ao vídeo real do que o seu perfeitamente preparado para esta aula. Se não, sugiro que volte ao meu primeiro vídeo, que é chamado de introdução ao R P 8 real, só para molhar os pés com o software. E assim você sabe do que estou falando. Como você passar por esses vídeos, certifique-se de falar sobre o seu próprio projeto de classe nos comentários abaixo, bem como, enviar quaisquer perguntas para que outros alunos possam se beneficiar de sua própria aprendizagem. Obrigado e vamos começar 2. Mestres e agrupamentos: Esta primeira classe abrange duas técnicas importantes para tornar seus armações de arame de forma mais eficiente. A primeira técnica é chamada de Mestres, e a segunda é chamada de agrupamentos. Agora estou usando essa armação de arame que fiz na minha primeira aula de atores. É apenas uma armação de arame muito simples. Então, se você não tem isso ou não sabe como fazê-lo, eu sugiro voltar para a minha primeira aula e introdução à ação. Então você entende como isso foi feito. Agora eu tenho meu mapa do site aqui com várias páginas diferentes, mas eles estão todos em branco agora. Eu sei que eu quero criar mais telas deste quadro de arame, mas eu não quero ter que criar cada elemento uma e outra vez porque isso seria apenas muito trabalho. Mas posso fazer algo chamado Criando um Mestre. E a maneira como você faz isso é, você seleciona todos os elementos que você quer ser em seu mestre. Neste caso, vou selecionar as coisas que quero ser. Ah, como um modelo para as telas de arame restantes. Então eu estou selecionando tudo isso. Você vê, eu selecionei o grande layout do iPhone, bem como a barra superior, o hambúrguer e o rodapé . Clique com o botão direito do mouse e seleciono a opção converter para Mestre. E eu tenho a opção aqui de nomear meus mestres. Vou nomeá-lo, um, um, layout do iPhone aperte o botão Continuar, e eu posso ver que isso ficou vermelho, e este é basicamente o meu novo mestre. Então, se eu for até a guia Masters aqui e clicar no mestre, eu posso realmente ver meu mestre subir. Ah, e isso é basicamente como um modelo mestre do que você quer que ele seja. Então este pode ser um fundo do resto do seu quadro de fio móvel. Então, se eu quisesse arrastar isso para uma página diferente, eu poderia facilmente fazer isso. Eu apenas clique nisso e eu arrastá-lo aqui e agora eu tenho o mesmo modelo que eu tinha que eu tinha criado a partir do zero na página inicial. Mas eu tenho na segunda página também, e eu não tive muito trabalho para chegar lá. Então mestres ar útil quando você tem várias páginas e você sabe que o layout vai ser o mesmo. Então, você apenas cria um layout mestre e é capaz de copiar e colar esse layout onde quiser. , Claro, aqui eu posso começar a adicionar coisas em cima do meu mestre se eu quiser adicionar, você sabe, talvez esta seja uma tela diferente e eu quero adicionar um novo texto. Então, se eu entrar em bibliotecas, minhas bibliotecas padrão em um título aqui esta é talvez minha página inicial e você pode ver se eu mover o mestre desta maneira, ele vai desta maneira ou daquela maneira. No entanto, vou mantê-la onde estava. E depois esta mensagem, vou mudar para o centro. E, claro, eu posso continuar adicionando coisas nesta área. Isso seria como a área onde, você sabe, eu poderia adicionar recursos extras que só seriam visíveis na página inicial e não na tela de log in, como o que temos aqui para mestres ar útil dessa forma, Outra coisa que você pode fazer com mestres é realmente editar o mestre em si. Então, se eu clicar duas vezes aqui na dor dos mestres, eu posso realmente abrir o mestre em si e começar a editar essas peças como Talvez eu queira algo assim ou algo como nós. E então, se eu for para as novas páginas, você pode realmente ver que as mudanças foram replicadas em todos os meus mestres. Alterar este Masters são úteis porque você nunca terá um problema em mover isso ao redor ou ter quaisquer elementos extraviados quando você vai fazer mais alterações nessas páginas diferentes , então agora eu vou pegar este mestre e colocá-lo no outro páginas. Dessa forma, tenho um modelo do que preciso. Eu também poderia ir em frente e chuva nestas páginas agora, uma vez que é realmente a minha página de login, Esta vai ser a minha home page. Eu não tenho certeza do que estes serão apenas ainda, mas o bom é, como eu disse, eu tenho os mestres aqui, então eu realmente não preciso me preocupar em re criar este modelo uma e outra vez. A próxima coisa que você pode fazer é algo chamado de agrupamento, e um agrupamento é útil quando você tem muitos elementos diferentes. Mas você simplesmente não e você tem que movê-los ou alterá-los, você sabe, alterá-los ou qualquer coisa, mas você não quer coisas. Teoh, saia do lugar. Você quer que eles fiquem juntos. Então, aqui selecionaram um monte de elementos diferentes. Se eu clicar com o botão direito sobre estes elementos, Eu tenho esta opção que diz Grupo. Agora você pode ver a dor aqui à esquerda e o contorno. Estes elementos estão agora aninhados sob este arquivo chamado Grupo, que é super útil porque agora eu posso realmente tomar quem errado um. Se eu realmente selecionar este grupo, eu posso levá-lo e arrastá-lo para qualquer lugar que eu quiser. E eu não tenho que me preocupar com meus elementos saindo do lugar, e eu não tenho que me preocupar em arrastar individualmente cada elemento. Então isso é super útil quando você tem um quadro de arame grande ou um quadro de arame complexo. Ou talvez você tenha algo como um design de forma onde você sabe como o espaçamento entre os elementos e você simplesmente não quer Teoh estragar isso de qualquer maneira. Quando você está manipulando, as coisas estão movendo as coisas. Bem, você pode fazer dentro. Isto está dentro do grupo. Se você clicar duas vezes em um elemento, você pode editar esse elemento específico para que você ainda possa voltar e editar elementos específicos, se quiser. Bem, isso é tudo para esta lição. A próxima lição será sobre a criação de fluxogramas do usuário e mapas de jornada do usuário através actioner. O Real tem bibliotecas especiais e dedicadas onde você pode criar fluxogramas. Teoh faz coisas como mapas do site ou viagens do usuário, ou definiu o fluxo de seu aplicativo para suas partes interessadas. 3. Gráficos de fluxo: este vídeo será sobre a criação de fluxos de usuários, mapas do site e fluxos de tarefas em er real, usando atores construídos em ferramentas. Então, esses tipos de coisas são realmente úteis quando você tem um monte de telas ou você quer mostrar talvez a maneira como os usuários se moveriam nessas telas ou você quer mostrar o mapa do site ou você quer mostrar a forma como as coisas são organizadas para suas partes interessadas ah ou outros membros da equipa. Então a primeira coisa que vamos fazer é criar uma nova página para exibir este novo fluxograma, e vamos chamar este mapa do site porque eu vou usar ferramentas de atores para criar um mapa do site da minha aplicação. Ah Que é ir para a tela em branco ea primeira coisa a próxima coisa Will Dio é navegar para bibliotecas aqui em baixo e escolher a biblioteca. Esse é o fluxo dele, e você verá todas essas formas diferentes aqui que você pode usar para construir seu mapa do site . E temos coisas diferentes. Retângulos, retângulos empilhados retângulos empilhados,formas diferentes. , Até temos uma pessoa aqui, um ator. Até temos uma pessoa aqui, Então, este ar é útil. Se você tem um fluxograma ou você tem um fluxo de tarefas que você quer tipo de, um , você sabe, construir para que as pessoas possam vê-lo, e você verá muitas dessas formas diferentes. Você sabe, você pode atribuir diferentes ações a essas diferentes formas e coisas assim, dependendo do que você quer fazer. Mas agora, já que temos um mapa do site, isso é bem simples. Só vai ter quatro seções ah para ele. Só vou usar o retângulo. Bem, eu vou sim, eu vou usar direção. Arraste-o para cá. Então esta é uma forma que temos e você vê que eles têm a forma tem todos esses, hum, hum, você sabe, pequenos lugares onde você pode redimensionar. E isso é tudo isso também são lugares onde você pode adicionar conectores. Então esta é uma forma, então vamos chamar isso de, um, você sabe, para o nosso mapa do site para a nossa aplicação, temos quatro páginas que temos que fazer login. Contas de home page, 70 configurações e um centro de mensagens. Contas de home page, E este ar ainda não foi desenhado. Eu só os chamo assim. Só para termos algumas páginas de amostra para sair. Então, a fim de criar o mapa do site. Queremos ter a hierarquia certa. Então, esta seção superior será a página inicial em quando queremos criar Dentro da página inicial são dois outros chamados configurações de conta e centro de mensagens. Então nós provavelmente podemos colocar estes aqui no centro, e nós também temos a tela de login. Então deixe-me copiar e colar isso. Eu tenho a mesma forma aqui e chamamos isso de log in. Assim como eu arranjei. Isto é que temos a home page lá em cima porque esta é uma espécie de página de nível superior. Ah, por tudo o que vamos fazer dentro da nossa candidatura. Isso parece bastante lógico. E então, você sabe, aqui em baixo, nós temos três outras coisas que enfraquecem Dio da página inicial. Quero dizer, isso pode ser entrar, cortar fora, mas são apenas ações que podemos tomar da página inicial. Há seções tipo de, você sabe, esse ar. Esta é a forma como a hierarquia é para a minha aplicação. E assim, ah, você sabe, estas não são muito diferentes das outras formas que realmente tem em suas outras bibliotecas. Você sabe, você tem a biblioteca padrão com as caixas diferentes e outras coisas. Mas a biblioteca de fluxo é útil porque quando queremos começar a conectar essas formas, podemos realmente ir para o canto superior esquerdo e selecionar a ferramenta de conector. E agora nossos valores mudaram seus conectores. Então nós podemos realmente, se você passar o mouse sobre um desses lados, você clicar nele e você pode realmente começar a desenhar linhas entre cada caixa como esta. Agora, eu realmente conectei nossas caixas, e nós realmente fizemos basicamente um mapa do site, e nós podemos tipo de ajustar isso. Você pode ajustar as linhas para ser qualquer forma que você gosta. Seja qual for o tamanho que você quiser, você pode ajustar isso. E agora vemos que temos a página inicial e temos três seções ramificando para fora da página inicial para que possamos realmente mostrar hierarquia aqui. E se você sabe, se tivéssemos mais páginas aqui em baixo, continuaríamos a ter mais seções aqui. E talvez, você sabe, talvez tenhamos subseções dentro de cada uma dessas páginas. Você sabe, talvez nós teríamos, como, ah, subseção para configurações de conta e talvez eu queira que isso seja nós ainda estamos no modo de conector, então vamos voltar para o modo de seleção aqui para que possamos escolher o forma desta caixa. Você sabe, talvez eu teria, como, outras subseções em configurações de conta que eu quero ver como podemos continuar fazendo isso e e você pode conectar as linhas como esta para cada uma dessas subseções. E eu sempre digo que temos o começo de um mapa do site. E novamente, isso é super útil para suas fronteiras estaduais, e você pode fazer a mesma coisa aqui. Poderíamos até copiar, rebocar todas essas coisas e colocar e colocar aqui. Talvez apenas certifique-se de que estes conectores de ar de conexão, e podemos continuar a fazer isso. Então os ícones de fluxo são super úteis com um ator e, você sabe, só para dar uma idéia dos outros ícones que estão aqui, há um retângulo empilhado um . Às vezes, usamos isso e fluxos de usuário. Eu sei que o ar retângulos arredondados usado frequentemente para tipo de iniciar ou terminar um fluxo. É como o ponto inicial ou o ponto final. Hum, você sabe, nós temos outras formas, como tentar, objetivos. Atores, eu vou. Isto poderia ser semelhante. Isso poderia simular um elemento humano dentro de um fluxo de tarefas. Ah, e outras coisas assim. Então, e é claro, você pode mudar o estilo desses, você sabe, assim como com qualquer outro elemento. Você pode mudar a cor. Você não precisa ter um ótimo e pode ser sólido. Você pode mudar a borda para que você possa mudá-la para realmente ser o que você gosta das linhas também . Não precisa ser essa linha de cores. Eu sei que você pode mudar para ser como, agora é vermelho. Você pode mudar para ser verde ou o que você gosta de fazer. Então, sim. Esta é uma maneira super fácil de ilustrar o mapa do seu site ou a forma como você está aplicativo é definido bem como a forma como você sabe, talvez os usuários queiram fluir através de um aplicativo e ver como ele realmente funciona. 4. Interações simples: Então este vídeo vai ser uma introdução às interações e er real, e com isso quero dizer programar suas próprias interações e fazer seus protótipos ganharem vida e realmente começar a funcionar como se fosse a coisa real. Assim, as interações podem ser feitas de muitas maneiras diferentes. E eu vou me concentrar em um para esta lição. E depois para o próximo vídeo, vou mostrar-lhe mais alguns métodos. Para começar, quero o Teoh. Comece com a tela ah que eu chamei de centro de mensagens. E eu construí um pouco de Ah, você I para enviar uma mensagem. E o que eu vou fazer é programar uma interação para este botão, o botão de enviar, que quando enviarmos uma mensagem, ele vai realmente ter outra tela que diz que Sua mensagem foi enviada e isso é uma mensagem. Enviar tela de confirmação. Então o que fazemos é clicar no botão. Ah, o elemento que é um botão e você abre a dor da mão direita chamada Inspetor, e veremos que, você sabe, aqui temos o Inspetor, e ele estava inspecionando o retângulo aqui para que possamos até chamar isso de botão de envio e sob o há três guias aqui há propriedades, notas e estilo, e sob a guia Propriedades é onde vamos ver como podemos começar a criar interações. Portanto, as interações estão aqui, e há muitos eventos diferentes que podemos atribuir a este botão. Como você vai ver, não há em um clique no mouse, digite o mouse para fora e ainda mais eventos aqui em baixo Isso parece que há cerca de 15 a 20 tipos diferentes de interações que podemos realmente colocar neste botão. Hum, e nós vamos apenas focar no Click então eu vou clicar nisso. Isso diz no Click Ah, que irá atribuir um evento de clique ao botão. Então eu vou em frente e clique duas vezes em Clique e isso vai abrir o editor de caso eo editor caso é onde você ah, de caso é onde você ah, editar todas as interações que você deseja para seus esses diferentes elementos em seu protótipo assim por diante. Então temos no Click, e queremos que algo aconteça quando clicamos neste botão, e o que queremos que aconteça é queremos a outra tela que diz confirmação da mensagem. Queremos que isso apareça, então o que vamos fazer é Ah, para o primeiro caso. Queremos abrir um link. Então, clique nesta seção que diz link aberto na janela atual. Então agora estamos realmente adicionando uma ação aqui, e então vamos em frente e configurar a ação nesta terceira dor aqui, e a maneira como vamos fazer isso está tudo bem. Queremos vincular a uma página que já está neste design. Isso é verdade. Nós realmente queremos vincular a esta página a mensagem, enviar confirmação, e você pode ver que esta é apenas a lista de todas as páginas. É só dizer, você sabe, quando clicamos no botão, queremos abrir um link e o link será uma dessas páginas e você pode realmente vincular a qualquer coisa que você possa vincular a um externo. Você é. Ah ah, Você pode voltar para uma página anterior como se você tivesse ligado a uma página anterior, você pode realmente voltar para ele. Você pode recarregar a página atual para que super útil, um, muito intuitivo. Mas vamos em frente. E assim queremos um link para a mensagem, Enviar tela de confirmação e vamos clicar. OK, e é isso. Isso é tudo o que levou Teoh colocar uma interação neste botão vai ver. Há uma pequena nota aqui que diz um, um, é uma pequena nota que mostra que, sim, nós temos uma interação para isso, e você pode ver e novamente na dor superior direita que agora programamos em interação que diz, Ok quando clicamos no botão, um caso acontece nesse caso é abrir esta tela que é chamada mensagem filho confirmação na janela atual para que possamos até testar isso, iria para visualização, e agora estamos realmente abrindo no navegador. E este é o nosso protótipo. Nós não podemos nem digitar aqui um assunto, e você pode até o que quer, porque eu fiz essas caixas de texto para que eles sejam realmente nós podemos digitar nelas. E agora, quando clicamos nisso, ele agora vai para a tela de confirmação, que é ótimo. Isso é exatamente o que queremos. No próximo vídeo, mostrarei algumas interações mais complicadas. Estes são bem simples. E mais uma vez, você sabe, você tem tantos eventos diferentes que você pode escolher a partir daqui. Ele realmente faz realmente uma ferramenta muito poderosa para criar protótipos de trabalho. Vemo-nos no próximo vídeo, onde falaremos um pouco mais sobreinterações e mostrarei mais algumas maneiras diferentes de fazê-las. Vemo-nos no próximo vídeo, onde falaremos um pouco mais sobre interações e mostrarei mais algumas maneiras diferentes de fazê-las. interações e mostrarei mais algumas maneiras diferentes de fazê-las 5. Como usar os painéis dinâmicos: Oi, todo mundo. Então esta será uma aula rápida sobre uma introdução a um painel dinâmico, que é outro vídeo que vai junto com como usar elementos interativos dentro, na verdade para tornar seus protótipos interativos e trabalhar, sentir e olhar exatamente como o real Coisa. Painéis dinâmicos são parte de atores, bibliotecas, parte de bibliotecas padrão extras. Painéis dinâmicos são parte de atores, bibliotecas, Então, se você ir para a esquerda na biblioteca está pagando você clique em padrão e você rolar para baixo aqui, você verá uma opção aqui para painéis dinâmicos. Hum, se você arrastar um desses para a tela Ah, você vai aparecer com o que parece ser apenas uma caixa normal. Mas esses tipos de painéis são especiais porque eles realmente têm estados diferentes, que significa que você pode realmente colocar coisas diferentes neste painel, e eles aparecerão em momentos diferentes, dependendo de quando você quiser que eles apareçam. Então, por exemplo, este painel que eu acabei de arrastar para a tela da página inicial hum, isso já ganhou o estado chamado ST um. E eu posso adicionar estados como eu desejo, e estados são apenas uma espécie de como é o que ele diz. É como, Ah, Ah, um estado de ser, se você quiser, deste painel. Então, qualquer coisa que esteja nesta forma ganha o primeiro estado. Agora estamos abrindo o Estado Um. Ah, será Onley na ST 1. Só estará lá quando você mostrar o estado um. Então talvez eu coloque uma imagem aqui, Justus Um exemplo. Eu poderia colocar um texto, então algo assim poderia estar no primeiro estado. Você sabe, pode ser qualquer coisa que você quiser. Hum, então você pode ver na nossa periferia estes realmente aparecem sob o Estado um. E o esboço que vai ao ST para enfraquecer, fazer a mesma coisa, , e colocar algo diferente. E, claro, você poderia continuar indo e indo e fazendo tantos estados quanto você quiser voltar para a home page State One é o que aparece aqui. Ah, mas sabemos que temos outro estado chamado Estado para. E então este é o começo de como você usa painéis dinâmicos onde sabemos que temos estados diferentes. E agora o que queremos difundir é começar a alternar entre esses estados. Então, você sabe, talvez uma coisa que poderíamos fazer é ter um botão que diz clique aqui. Então, se eu tiver um botão aqui e eu gostaria de mudar eu gostaria de fazer este painel interativo Usando este botão. Eu posso fazer o que fizemos em nosso vídeo anterior, que é clicar duas vezes em Click. E aqui temos algumas opções aqui no editor de casos. Se queremos mudar o painel dinâmico, vamos para a guia que mostra diz widget, e podemos fazer definir, estado do painel. E primeiro olhamos para configurar o conjunto de ações. Nós vamos realmente dizer isso para declarar, que ele já está em ST One inicialmente e nós clicamos. OK, e agora essa interação aparece de um botão aqui. Então basicamente o que estamos fazendo é, enquanto clicamos no botão, este painel vai mudar. Tudo o que está neste painel vai mudar para o estado em vez de estar no primeiro estado . Então, se quisermos visualizar rapidamente isso e vamos ver se funciona, estamos na página inicial. Então este é o nosso painel dinâmico. Nós clicamos aqui e ele deve ir para o estado dois. E foi para o Estado 2. Então painéis dinâmicos são uma ótima maneira. Teoh ad Ah, um monte de elementos interativos ao mesmo tempo. Ou se você tem uma seção do seu aplicativo que você sabe que a coisa toda vai mudar ou , você sabe, você quer fazer um monte de diferentes como você diz estados são modos. Ah, isso de exatamente como naquela seção particular do seu aplicativo. Como aqui. Fizemos isso na página inicial e tínhamos um painel dinâmico aqui que poderíamos fazer. Este é Bigas. Nós queremos ela. Um pequeno é que queremos, hum se você sabe que você vai ter algo assim. Painéis dinâmicos são realmente úteis porque você não precisa mudar todos os elementos de uma só vez. Você pode simplesmente criar um estado com todos os elementos que você precisa e quantos estados quiser com quantos elementos quiser, e todos eles vão mudar de uma vez. Então é isso para painéis dinâmicos. E isso cobre a maior parte do que você precisa saber para interações com um ator 6. PROJETO DO CURSO: Ok, então agora que você dominou a maioria das técnicas dentro da ACTU r p 8 e a maioria das técnicas que eu consideraria intermediária a avançada, que inclui coisas como fluxos de usuários, interações e painéis dinâmicos, sua atribuição de classe é criar seu próprio conjunto interativo de quadros de arame, completo com um mapa do site ou um fluxo de tarefas. E também certifique-se de que você publicá-lo para atos, compartilhar e nos comentários, compartilhar um link para seu novo conjunto de quadros de arame para que todos possamos vê-los na sala de aula. E todos nós podemos comentar e sugerir mudanças e melhorias, etc, etc. Isso pode ser um conjunto de arames para um aplicativo que você decide construir sozinho. Talvez tenha sido uma ideia que você teve. Ou talvez seja um redesenho de um aplicativo existente ou de um site ou produto existente que você acha que poderia fazer melhor. Então eu adoraria ver seus projetos novamente. Certifique-se de publicar seus projetos no compartilhamento de atos, obter o link e colocá-lo nos comentários nesta sala de aula para que todos possamos vê-lo. E se tiver alguma dúvida, não hesite em entrar em contato. E boa sorte. Estou ansioso para ver seus projetos