Transcrições
1. Boas-vindas: I caso do meu nome e eu sou a interface de usuário no uso de experiências linha Eu especializo-me em criar por que quadros protótipos em layouts de alta fidelidade. Ao longo da minha carreira de design, desenvolvi um fluxo de trabalho consistente ao manter-me a par das tendências da indústria envolvidas em campos de tecnologia e design. Isso me levou a encontrar novas maneiras de adicionar um nível único de nous dinâmica para os produtos que eu crio nesta classe seria olhar para ovos quadro. Estarei guiando você durante todo o processo de trazer seus projetos vivos. Então, ela está utilizando componentes,
adicionando eventos e explorando as lojas internas Freeman que você pode obter experiência ao usar o potencial mais recente. Por trás deste software é imenso. À medida que passamos por cada etapa do processo interativo, vou tomar o tempo para explicar o que cada recurso total faz e por que ele fez um específico. Antes de continuar com esta classe, vá em frente e baixe os arquivos de projeto anexados em Haverá um projeto de classe que lhe
dará a oportunidade de experimentar na prática em ordem no tempo. Se você quiser ver mais do meu trabalho, certifique-se de ir para o perfil de compartilhamento de habilidades ou me conectou em outras plataformas sociais . Tais disparates no Twitter também se sintam à vontade para manter este perfil de acompanhamento para manter-se atualizado de quaisquer aulas futuras sobre qualquer coisa projetada em você sabe que está relacionado. Sinta-se à vontade para entrar em contato comigo se você tiver alguma dúvida ou feedback sobre como este curso pode ser melhorado, pronto para começar, então vamos começar.
2. Visão geral do Framer X: Oi, pessoal. E bem-vindos de volta à próxima parte deste vídeo. Vou dar-lhe uma visão geral rápida do software frame X, como para qualquer interface e dar uma olhada no que alguns dos recursos fazem. Isto é apenas para dar uma ideia de como será a plataforma antes de começarmos a criar um protótipo. O que é legal sobre isso é um potencial por trás dele e a forma como ele foi recebido dentro da comunidade, especificamente entre designers. Como eu senti que com a versão anterior, ela tinha uma curva de aprendizado bastante íngreme, que significava que se você não estivesse familiarizado com JavaScript, apoderando do básico em impostos e aproveitando ao máximo o processo de prototipagem parecia um ponto e tarefa para muitas pessoas. E apesar do quadro de X ainda usando o mecanismo baseado em código desta vez reagir, o processo de prototipagem real em si foi feito muito mais amigável e intuitivo, e definitivamente rivaliza com os gostos de estúdio de visão em um doobie excede prototipagem, característica ou muito superam, em princípio, em termos de simplicidade. Portanto, eu sinto que é benéfico aprender isso porque, como designers, não só podemos criar
interações surpreendentes . Nós também podemos ver o poder de reagir, como ele funciona sem realmente ter que escrever qualquer reativação. Então, sem mais delongas, vamos abrir a interface principal e explosivo com os recursos. Ok, então aqui estamos nós em revistas livres, como você pode ver, não há muita coisa acontecendo. No entanto, selecionamos este tipo aqui, que é onde a magia principal começa. O que acontece é chamado de ferramentas e lá está dividido em quatro seções, que é layout interativo. Desenho na decisão da tela permite controlar não apenas o processo de design, mas também o processo prototipagem. Esta pesquisa provavelmente parece muito familiar para você, mas para abrir mais da interface, vamos selecionar livre e escolher um campus em que o design para Senador Como imaginando esboço Temos a opção de escolher relógio, telefone, tablet, computador ou TV? Para os fins disso, vamos escolher os ovos do iPhone, e é como a turnê redonda para abrir as coisas da propriedade. Agora que eu criei círculo, você verá na banheira camadas que está aninhado dentro deste iPhone para ele aqui, você tem o material de propriedade eles provavelmente parece muito familiar para tê-lo olha no esboço aqui, você pode Alinhe. Defina a posição em para a capacidade de resposta como visto pela animação abaixo, disse que o dentro da altura, o estouro para mostrar ou ocultar, bem
como coisas como o A, Passy, a rotação e o Raio. Você também pode transformar isso em um link, tornando este um evento clicável que irá levá-lo para
a próxima página é o que editar o código. É como a opção de mesclagem ou alterar outras coisas familiares que devem ter sensação de cor e outros elementos de estilo como a borda nas sombras. Você também pode explorá-lo individualmente ou como uma tela inteira. Dependente dos requisitos, entanto, vai tocar em notícias em um vídeo posterior dentro de uma seção de ferramentas. Você também verá três outros elementos importantes, que um link de pilha e pilha de rolagem é essencialmente um atributo de livros flexíveis que
permite distribuir listas organizadas, mas para limpar horizontalmente de forma fácil e eficiente. Link é essencialmente o processo de vinculação tela para que você possa ir entre eles e rolar é um componente de rolagem permitirá que você rolar dentro de uma máscara em uma determinada página abaixo que sob o desenho, você tem gráfico, que é onde você pode criar e editar formas vetoriais e caminhos. E por último, sob tela, você tem opções básicas de navegação. Essa seleção de zoom e pan esse problema para que você possa se mover pela página e ampliar conforme você projetar. Tudo bem, então eu não olhei para o lado do design das coisas, e eu sinto a necessidade de entrar em muitos detalhes. Estava pronto para ser direto em semelhante a todos os Softwares? Portanto, vamos olhar para componentes agora semelhantes aos símbolos, e componentes de esboço são essencialmente elementos reutilizáveis. Ele pode ser distribuído em várias páginas, no entanto, só precisa ser editado uma vez. Para usar seus próprios componentes, você pode criá-los usando até mesmo design ou código. Se você é um designer, é
claro, seu favor isso. No entanto, se você é um desenvolvedor ou alguém familiar com um código exagerado, você pode criá-los. Usar isso no código do estúdio visual de notícias é uma integração de fluxo de trabalho. Para os propósitos deste vídeo, vamos criar usando código para que eu possa mostrar como essa integração funcionará para começar. Vamos nomear algo simples, como Hello World Click, criando-o. O que acontecerá é que o código do estúdio visual carregará exibindo todas as
propriedades de reação para esse componente. Eu não vou entrar nisso muito é como eu disse, embora ele usa reagir, nós não temos que se preocupar com realmente certo neste, apesar destes para seus componentes ou devo dizer componente que está sendo criado em reagir para ele. Eggs também oferece a oportunidade de substituir coisas como o título. Como há elementos básicos de estilo ainda terá que ser feito no código do Visual Studio para mostrar como os componentes funcionam em duas páginas. Vamos voltar rapidamente e mudar um dos estilos dos elementos. Não é um simples como mudar de cor do texto de Black Control S a partir do qual é um pouco de mudança através do Like, Eu disse, maioria de vocês provavelmente ter feito isso em design. No entanto, a loja Framers também oferece uma variedade de diferentes kits e componentes para você instalar novos em seus projetos. Então vamos explorar isso a seguir. Tudo bem, então eu toquei em componentes e como você pode criar o próprio incomum. No entanto, quando se trata de prototipagem rápida, às vezes criar o seu próprio a partir do zero não é viável. Felizmente, quadro oferece uma loja interna inteira ou pessoas dentro da comunidade pode dar-lhe uma variedade de diferentes Você I crianças em componentes prontos para você usar. Isto é especialmente útil para pessoas como eu. Você só quer arrastar rapidamente coisas como carregar ícones. E não pense muito nisso. Esta constante está sendo atualizada? Então eu definitivamente recomendo verificar isso.
3. Atualizações e framer: Muito bem, pessoal, bem-vindos de volta à próxima parte deste vídeo. Em um pouco de pesquisa esta manhã, e a última versão, que foi lançada em 16 de outubro é na verdade framer X três. Agora, honestamente, para no X cinco na versão beta parece exatamente o mesmo. É um quadro extra. Eu acho que é principalmente apenas funcionalidade melhorada. Então, se você está seguindo este tutorial realmente não faz diferença. Você pode usar este ou este, porque se você voltar para a interface, esta é a versão mais recente. Parece exatamente o mesmo. Como eu disse, a maioria é apenas coisas melhoradas. Hum, e eles tinham um monte de coisas que a comunidade recomendou também. Então, transições de sobreposição personalizadas. O que é realmente estranho é que eu mandei isso através de feedbacks de propriedade. Se eles pegaram aquela ambulância bem legal. Parte deste vídeo foi bem, foi principalmente apenas dar-lhe uma visão geral do site real. Então a comunidade por trás disso sobre as outras pessoas que estão apoiando porque eles estão ficando por trás disso e apenas, você sabe, o tipo geral de apoio que você encontraria no Twitter e Dribble. E outra coisa que eu recomendo olhar também. Agora sou mais uma pessoa em mãos. Gosto de mergulhar em Softwares e aprender. No entanto, eu sempre dou. A documentação para o novo software é uma leitura rápida, porque era realmente útil para realmente passar. Eles vão explicar tudo. Sim, é muito barulhento, mas e imagens visuais estão lá. Eles são muito simpáticos. E como eu disse, se você quiser ir e verificar isso, basta ir para enquadrar ex ponto com. Mas sim, No próximo vídeo, vamos olhar para ele importar e exportar do esboço e também apenas dar uma rápida visão geral de como a
capacidade de resposta funciona dentro do design e, em seguida, sim, vamos entrar em prototipagem.
4. Como importar do esboço: Tudo bem, então neste vídeo, estamos olhando para importar seus projetos diretamente do esboço para Freeman, agora 22. Longo é um processo muito simples. Mas digamos que você projetou um esboço de pensamento e você gosta de qualquer um para protótipo. Precisa ser rápido e rápido. O que você vai ter que fazer? Quero dizer, desculpa a terrível hierarquia de camadas era o comando implicado. Veja para copiá-lo, você entra em Freeman. Vamos lá, V e você vai. E o que ele faria é manter todas as camadas e também adicionar pais também. Portanto, esses grupos, embora não quadros, terão layouts aninhados dentro deles. Ele mantém a sua e a partir daí você pode simplesmente destacar o que você quer fazer. Ligeiro link dizer, levá-lo para esta página. E quando você visualizá-lo, isso é simples. É agora importante do esboço não é sem suas limitações. Você vai notar imediatamente. Bem, você pode não ter notado, no
entanto, que estes dois gráficos aqui na porta em, não importa quantas vezes eu tentei obter aqueles para traduzir aqui, isso simplesmente não acontece. São apenas quadrados brancos puros. Portanto, há algumas falhas em termos de traduzir o design de lá para um
software diferente . Outra coisa legal sobre importados diretamente do esboço é essencialmente retém todas as propriedades da
camada do arquivo original. Se você quiser fazer qualquer ajuste de design de última hora, você não precisa voltar para o esboço original, pois você poderia fazê-lo diretamente no quadro
simplesmente tocando duas vezes nele para exibir as propriedades da camada. A partir daí, você pode mudar a cor. Mude sua Plessy dada mudança de irritação, que
significa que você pode manter um controle constante. O processo de design que, ao mesmo tempo, mantendo-o separado do arquivo de esboço original .
5. Crie no Framer X: Ok, então a última coisa que vamos olhar rapidamente é as relações pai e filho dentro do processo de design que forma a hierarquia de camadas é bem, é um lado responsivo das coisas baseado em torno do design de caixa flexível. Ovos de airframe é realmente para ele, e tudo já está organizado para você. Se você criar um player de texto, Hello, Forever X determinará automaticamente a relação pai e filho entre essas duas camadas. Isso significa que tudo permanece organizado. Você não tem que se preocupar em descobrir para onde o grupo vai. Isso também torna mais fácil para o lado responsivo das coisas que demonstrarão aqui
demonstrá-lo . capacidade de resposta criou estes três anos. Eu continuo isso aqui cada um contendo dois elementos dentro de oito pixel margem figura e fecha sem abrir de forma responsável. Você verá três quadros que cada um destes emoldurados representam cada um desses contêineres aqui com eles. Nesses quadros, você tem os dois Filhos, o texto e o círculo. Isso permite que a saída do quadro determine a capacidade de resposta com precisão. Tudo bem, Então eu só mostrei você estabelecer uma hierarquia e capacidade de resposta e eles mostram que você exportar como realmente obviamente para mostrar é praticamente o mesmo que qualquer outro software. No entanto, É show legal de qualquer maneira, apenas no caso. Então, o que faremos se você quiser exportar todo o seu campus selecionará o título de exportação. Eu vou cruzar a exploração esta pequena queda para baixo. Você esperaria o seu tamanho e ir um X, Eu acho que dois x ou três x Se eu estou comprimindo para baixo para drible, Eu nunca ouço esse tipo de arquivo, então você pode ver o completo é PNG. No entanto, você pode escolher a partir de J. Peg Ah pacote Web, que basicamente é um formato de compressão para imagens que você coloca na Web e, em seguida, você tem exportação PDF e legumes frescos é um processo ligeiramente diferente é exige que você copie as demãos SPG para que você possa acompanhá-las diretamente em seu editor de texto. Isso é especialmente útil para exportação e iconografia para que seu desenvolvedor demonstre como isso pode funcionar. Vou entrar no tipo de ferramentas em selecionar gráfico, criar quadro, e o que isso vai fazer é abrir uma variedade de opções diferentes que devem caminho, retângulo, oval, polígono e começar a mostrar como exportar ele. Vamos criar uma forma básica usando o sopro. Não deixou nada louco o suficiente para mostrar como o exploramos. Põe o Phil, sabes, os 100 e agora tens a tua forma. A menos que digamos, você precisa exportar. Isso vai mantê-lo totalmente comestível. Com o seu na fase de produção, você simplesmente vai para copiar. Você tem a opção de copiar o código SPG. Agora que eu cobri a exportação, eu sinto que é hora de passar para o protótipo completo. Então vá em frente e abra o arquivo de treino. E em arquivos principais, é como a pasta Usuários, onde você vai encontrar o trabalho do dedo do arquivo a partir daí será capaz de passar pelos aumentos
protótipo juntos. Vejo você no próximo vídeo.
6. Linking de telas: Muito bem, bem-vindos de volta à próxima fase deste curso. Neste, vamos começar a construir um protótipo básico. Presumo que tenha aberto os arquivos do projeto. O que? Você verá que eu criei quatro telas. Embora relativamente simples, Estas quatro telas contém quatro das principais características em expedições de quadros, pilhas Cree componentes inescrutáveis ligando telas e usando vídeos do YouTube. Mantenha-o simples. Vamos olhar para telas de Lincoln e criar um fluxo básico dentro da APP. Acho que mostrei isso recentemente, quando não deveria ter que importar do esboço. É um processo muito fácil, então vamos demonstrar isso agora. Na página entra, você tem um mas aqui, que tem medo que eu fui chamado enter. O que vamos fazer é quando um link é que a página muda para a página de categorias aqui para fazer acima. Vou cozinhar link, direcioná-lo para esta página e você verá uma variedade de opções diferentes, como a transição ea direção em que ele vem em é o que faz quais páginas em um alvo para ou uma substituição para não fazer isso. Você pode até cair aqui. Digamos que você queira ir para o principal. Você vai apenas selecionar o menu onde você pode apenas clicar nele novamente e ele será realmente em si. Não é que o linchamento para ver que as transições completas do que funciona e deixe-me
visualizá-lo . Nós clicamos nisso, colocar suas categorias de dormir transições página em muito simples, realmente eficaz e bom em mostrar como a maçã flui. Eu vou em frente e olhar mais das telas. Então eu digo a partir das categorias Página, nós temos este quadro aqui, que é um menu o que nós vamos fazer. Nós também vamos gostar que este menu Hoover locação você pode ligá-lo tão gostei que ir para a opção de
transição estão atualmente configurado para alimentar, que é o que funciona você tem direito de diferentes. Eles têm o modo de sobreposição push. Além disso, se fosse como um instantâneo pop-up, que ela quer o Departamento de Animação real. Eu só não usaria isso e eu já usei. É caótico, mas desaparece. Ele vai criar um bom pouco excessivamente será nenhum movimento e você vai ver que como nós voltar para dentro, então atualizá-lo. Você verá o menu aparece. Ok, então a partir daqui, você sabe como é o próximo, mas é claro, nós não temos nenhuma quebra. Quero dizer, o que as coisas fluem bem. Vamos voltar. Deslize o quadro X e novamente
Pretty, processo bastante simples o que você está ligando concorda prático. Não empurre. Querias desaparecer outra vez, deixa-me voltar, pessoal fresco. Nenhuma fé por duas categorias. Agora o que vamos fazer é partir de filmagens de vídeo. Vamos até a última página para terminar a parte do Lincoln deste processo. Vamos conseguir filmagens de novo. Link vídeos Página tem que empurrar novamente. Então o que vamos fazer são coisas como menus que todos acreditam que vão desaparecer. Qualquer página terá em transição do da direita para ir para a esquerda. E agora vamos pré-visualizar a coisa toda se ele realmente ficar preto. Talvez não. Mas de qualquer maneira,
então, se você clicar em filmagem de vídeo, você verá que vai para a página de vídeo. É por isso que olhamos para os gabinetes GT. Você pode ver o destaque, seu ativo. É muito legal, mas nós olhamos para esses ar fase final Agora que temos ligado às telas, vamos visualizar o todo para ver como ele vai fluir tela cheia que você pode ver que
ainda estamos neste pH agradável. Aqui você vai clicar em Enter the cosmos, não levá-lo através para cortar todas as páginas. partir daí, você pode clicar no menu
e, em seguida, selecionaremos uma gravação de vídeo para passar para a última página. E outra coisa que eu tenho que mostrar também é que esse Bakker também vai cortar, concorda. Quando você clica que você verá as transições opostas para criar uma morte agradável e
dinâmica dentro do design.
7. Criação de pilhas: Ok, então agora que nós ligamos as idades e vendo como as saídas o próximo looker único é pilhas e como podemos organizar e distribuir a lista de uma maneira fácil e eficiente, isso é particularmente útil porque quadro reconhece o exato posição de onde o último estava, permitindo-lhes encaixar no lugar sem que você tenha que se preocupar em organizá-los de uma maneira
diferente. Então eles te mostram como fazer isso. Para começar com cada um desses quadros seus elementos individuais sobre Para colocá-los em um estoque você pode ir através da seção de ferramentas e na pilha de acertos de layout ou s com certeza. , Eu deixo executar os elementos que você deseja colocar na pilha e esperar que o painel de propriedades apareça. Então, como você pode ver aqui, você tem um preenchimento que lhe permitirá distribuir na página se você quiser manter esse zero. E para estes eu tinha uma margem de 30 pixels entre eles foram alteradas uma lacuna para 30. Como você pode ver, então eu pareço exatamente o mesmo. No entanto, você geralmente pode movê-los e organizá-los e fazê-lo entrar no lugar. No entanto você quer que ele foi ser capaz de definir a lacuna no partido em porque é um
atributo flex livros . Ele também usa muitos dos livros flex originais. Terminologia Basta começar no centro é o que está dando a você a opção de definir uma direção para qualquer layout horizontal ou uma saída vertical. Agora com esta pilha, essencialmente acessar uma máscara, o que significa que ela está presa por aqui. Então, se você fosse vendê-lo para vertical desculpe horizontal, não muito vai acontecer, pois está literalmente contido nesta seção. Normalmente, ele sairia da página para os fins deste, ou eles não vão realmente precisar dele. Demonstrar como isso funcionaria de modo que você pode ver e eu dar-lhe um pouco de espaço ao redor do lado porque ele está definido para começar, distribuí-lo disse que ele para cima vista para definir que para o centro. Como você pode ver, não
é perfumado dentro da mesquita. Se você tivesse dito no final, claro, você está definido para o fundo da mesquita também é que você também tem uma linha, então se você disse que começa como você pode ver, é uma linha para o lado esquerdo. Você disse isso até o fim, bem alinhado com o lado direito, e que o estágio tardio vai transformar isso em uma componente escolar. Portanto, é sempre útil encontrá-los em uma pilha primeiro para que quaisquer ajustes de última hora possam ser feitos facilmente. Então, agora que você sabe como utilizar pilhas e organizar seu ouvinte, mas fora no próximo vídeo, vamos olhar para transformar esses componentes indescritíveis.
8. Criação de seções Scrollable: Tudo bem, pessoal. Agora que cobrimos veados, vamos olhar rolando. É aqui que os sites interativos vamos ficar muito mais interessantes. Então as primeiras coisas em primeiro lugar e não faria isso pode parecer um pouco longo vento vai mover estes para fora do caminho. Obrigado,
então essa filmagem de vídeo que o fantasma era uma página de vídeos que vamos remover. Vou duplicar esta página. Bem, eu sei muito bem porque o CD está lá. Vou simplesmente apagar isto. Refrigeramos essas categorias. Um pergaminho que vou fazer vai fazer 910 pixels. 110. Livre-se destes. Agora, sente-se nas pilhas. O que você fizer vai remover essa pilha. Visite ST Pictures a partir do topo, alguém para essencialmente fotografia. Duplicar estes. Agora é qualquer coisa ao extremo é apenas para mostrar como eles iriam rolar sobre o que fazemos. Coloque um minuto. Preso só para que fossem organizados, caso queiras fazer ajustes de
última hora como fizemos da última vez. 30 pixels com a estação, devo dizer? E agora você tem este pergaminho aqui. Então agora vamos fazer vai para ferramentas. Vais sentar-te como um pergaminho. Você vai desenhar neste comércio aqui onde o componente de pontuação precisa ir. Então 37 pixels em 375 pixels de largura e aproximadamente 654 pixels de altura. Então eu rastreei aquela stupa, e depois o que vamos fazer antes de ligarmos isso de volta à página do vídeo , então eu vou lá. Vinculá-lo que não, não usar que dentro de uma pilha em um componente de rolagem futuro agora também está vinculado. Agora volte para a seção inicial de rolagem. Nós ligamos isso a isso. Como você pode ver, eles acabaram de aparecer. Parece exatamente o mesmo. No entanto, nós iria em pré-visualização que eu estou atualizá-lo. Não só as filmagens de vídeo ainda funcionam, como também não é possível rolar
9. Adição de componentes no YouTube: Ok, então bem-vindos de volta à fase final deste processo. Agora, neste vídeo, vamos olhar usando o componente de mídia e t níquel orar em tempo real, você RL está em projetos baixos. A coisa legal sobre isso não é só ele está usando o bebê do YouTube I ele também ajuda a reter todas as miniaturas originais também. Se obtivermos a pré-visualização, verá que estes eram todos os links ativos. Você clica lá, você vê, o vídeo vai carregar no lugar que normalmente não emite seus vários
temas de espécies diferentes e outras coisas. Isso é o que estava acontecendo aqui. E para fazer isso, tudo que você tem que fazer é sair não mostrado aqui. Sempre não podia se suicidar. Mas você vai para o seu que. Eu mostro-lhe o que ele baixar originalmente. Então é isso aqui agora já foi em frente e baixou aquilo e parecia assim. Então será uma moldura do YouTube. Como você pode ver que o telefone é um quadro X vídeo introdução, no entanto bem, Eu fui em frente e feito é encontrado mesmo aqui que eu uso lá. Então é só uma equipe espacial. Então ela é sua melhor comida. Apressado, então você vai fazer muito simples nós vamos copiar o euro bem, você vai voltar e você vai ver que o euro está aqui. Vamos lá, muito desta vez agora muda quando eu acerto. Digite outra coisa legal. Você também pode diminuir as coisas auto lugar. Agora. Isso determina essencialmente como o vídeo será reproduzido quando você entrar pela primeira vez na página
definida no momento , o que significa que você tem que clicar fisicamente no vídeo antigo para carregar. Eu acho que você também pode escolher a partir de agora, que essencialmente permite que os vídeos começam a ser reproduzidos automaticamente, bem como Luke, que irá reproduzir o vídeo em um ciclo contínuo. Então, o que é que você quer cortar o vídeo de código certo? Eu também edito o código de exemplo real para este componente. Então é muito legal, muito versátil. E, sim, você sabe, um nível real de profundidade para suas animações também não se sentem restritos por essas dimensões que você pode ver aqui. Isto é basicamente em 1920 por 10 80 p dimensão. No entanto você vai ver aqui eu realmente mudei isso, e isso é essencialmente uma máscara de recorte. Então, quando eu clicar sobre isso, você verá que o quadro está aninhado deve ver. O componente do tubo você está aninhado dentro do quadro que eu teria feito é usado como uma
máscara de recorte . Então eu vou me desprender. Você verá que as dimensões reais dos componentes originais do YouTube estão lá. E se eu gostar dos dois novamente você está para clipar você vê que está de volta a como ele originalmente Waas. Vá em frente e jogue uma rodada de apostas ao redor. Você está rollings lá dentro, mesmo recortando isso ou simplesmente toque duas vezes? E se quiser manter a prova de estilo, também
serei Lincoln. Companheiros de exemplo no Projeto Flutuador. Você pode avançar na prática com isso em seu próprio tempo. Então, agora que você sabe como incorporar vídeos do YouTube em seu projeto, que basicamente conclui nosso processo de prototipagem para esse design, os próximos vídeos serão surgidos. Tudo o que fizemos é o que ele procura. A atualização mais recente dos novos recursos que foram adicionados
10. Juntando tudo: Então, bem-vindos de volta ao que ia ser o vídeo final. Obviamente, esta manhã para além de sua versão de lançamento cinco para a sua base A na Itália têm sido, como um novo lado interativo das coisas também. Mas eu digo que foi um extra, você sabe, visão geral
rápida que no próximo vídeo, mas essencialmente, isso seria apenas,
você sabe, você sabe, tipo de recapitulação sobre o que fizemos. Então eu lhe mostrei a interface. Tenho certeza que você armar uma loja. Sim, os diferentes futuros e esperanças de realmente construir um projeto de prototipagem. Então isso parece, você sabe, a guia de propriedades, e você sabe como usar um design responsivo. E ele estava realmente, realmente nele se compara com o quadro original. Se alguma vez usaste isso, não
ficaste de pé. Por quê? Isso é, você sabe, todo o hype. Uh, sim. Nós montamos o protótipo mais básico possível. Claro, Claro, no mundo real, você cria fluxos mais complexos neste revolucionário como nós. Não tem muita animação de morte que o princípio tem. Eu sei. Eu disse que é muito mais fácil de usar, uh, em princípio, princípio dá-lhe muito mais tipo de liberdade para jogar em torno da linha do tempo e personalizar diferentes transições que você já viu disse antes na época. Os quatro elementos principais há agora outro elemento chamado Página, mas isso era apenas ligando telas, organizando esses componentes para quadro, Devo dizer em um componente pilha e também, você sabe, criação de pergaminhos e esse nível de nous dinâmico para páginas diferentes? Eobviamente,
adicionar vídeos do YouTubeé
o processo mais simples,
mas é muito legal. Eobviamente, obviamente, adicionar vídeos do YouTube adicionar vídeos do YouTubeé
o processo mais simples,
mas é muito legal. é
o processo mais simples, Sim, quero dizer, vamos antever o protótipo final. Vou para tela cheia. Vindo, explodiu, foi excedido. Vou entrar no MERS da CAA. Como você se lembra, nós passamos pelas categorias Page Ah, e você não pode rolar com lá dentro também. Eu percebi que eu selecionei a máscara de rolagem um pouco mais para baixo. Você vê onde ele corta lá. É aí que o topo disto deveria estar. E, provavelmente, no meio do caminho, haveria onde a máscara termina. Então está crescendo, mas é toda a demonstração mostra como ele flutuaria. Claro, vá em frente. Você cansou essas coisas enquanto o processo continua. Claro que sim. A partir daqui, você também pode exibir o menu ao selecionar. Lá vamos nós. Então, claro que você poderia ser legal se eles tivessem, tipo, estado
flutuante é bem, lembre-se, em princípio, eles têm a capacidade de colher. Tipo de passar por cima destes e mudar a cor. Ele simplesmente desiste, você sabe, profundidade
extra. Mas você está perto. Isso você quer passar para filmagens de vídeo? Não, Não, você trabalha. De jeito nenhum. Eu ia tão bem. Oh, eu vejo. Eu mudei para a sua, mas então um sábio do que isso vamos passar por filmagens de vídeo. E você tem vídeos fáceis aqui. Então você pode clicar em qualquer um que você quiser. Uh, você sabe, você tem o som completo lá, e é realmente alta qualidade é o que eu realmente fiquei impressionado com isso. Quero dizer, quando eu vi pela primeira vez no nós temos a demo que eles deram para fora, eu pensei, isso é incrível. Este não é nenhum outro Softwares feito. Este corso e ir mordida vai vê-lo transições em uma direção diferente. - Sim. Quero dizer, como eu disse, isso foi apenas para dar às pessoas uma apresentação a ele. É um software relativamente novo. Então, que dias estão acontecendo constantemente? E é meio irritante tentar ensinar software como este porque,
como eu disse, eu pensei que tinha sido mostrado embora principais características. E então esta manhã outra atualização vem através e é como, Oh, bem agora Adam Page e eu
pensamos, Eu preciso criar outro vídeo, apenas uma espécie de demonstrar o que é isso, porque caso contrário eu sinto que estou curto mudando. Você passa, lê as docas no site. Eles provavelmente atualizaram. Agora que há coisas novas chegando, sim, é honestamente se movendo tão rápido e todos estão por trás disso. E eu sinto que este é o futuro de onde esse tipo de Softwares se dirige.
11. Interação atualizado: Tudo bem. Então aqui está o vídeo não planejado baseado em torno do novo recurso chamado Página. Agora eles têm alguns outros uma bacia também, e eu literalmente apenas tive que passar. Olhe para ele. Então é quadro x quatro agora, como, disse, nós estávamos executando o livre faz três. Ah, e sim, o maior que eles adicionaram é a nova página interativa. Até agora, eles tinham anunciado isso e mencionado. Não havia nada no software. E honestamente, esqueci completamente. Eu adoro isso. Você sabe, olhando através do e-mail que eles enviaram também vai ter que rever o que estava acontecendo. Você sabe, você olha para os exemplos do que você pode criar. Quero dizer, olha para aquilo. Realmente impressionante. E sim, basta montar rapidamente um cão de exemplo. Sim, que podemos dar uma olhada. Então aqui você tem três quadros e você tem uma página em tela no iPhone X. O que você faz, ela vai para a página, então é vamos fazer a largura total. Então 375 Isto é essencialmente, você sabe, o componente de página agora dentro dos espaços onde esses elementos serão capazes de ser
percorridos através de seu cara. Você é usado para se conectar então você pode usar, tipo, 23 Eu acho que ele está lá. Bom. Moisés. Deixe o último não ser. O que aconteceu é que não está conectado. Todos estes juntos. E quando você selecionar este componente irá trazer um monte de opções diferentes também. Então você pode essencialmente selecionar a lacuna entre as estações são apenas para torná-lo um pouco mais claro no movimento. Eu vou nos dar 30 pixels preenchimento C ou grande, e no lado do preenchimento no sem sentido dentro desta máscara aqui, você pode ver que não há espaço aqui. Então o que vamos fazer é definir isso para 15. Então é exatamente meia intensidade. Escuta, o desejo parece bom. Ah, e ainda assim saberemos que você pode personalizar qualquer uma dessas coisas. Este ano está atualmente definido para o padrão, que é slide tem momentum desligado, o que significa que você tem que ciclo fisicamente três. Bem, você vai ver eu visualizá-lo para que você tenha certeza que ele está atualizado e ainda assim você pode realmente passar como um metrô. Momentum é este A, como essencialmente permite que você apenas deslize uma vez e ter uma boa distância. Três. Onde está porque está desligado? Você meio que tem que passar manualmente, então vamos fazer. Ele vai brincar com aqueles que vão ligar o ímpeto. Claro. Bem, você vai ver que há mais fresco que você pode ir direto através de um furto, que provavelmente útil ou um pouco rápido demais novamente. Você não pode controlar a velocidade destes. E então o que vamos fazer é você sabe, nós vamos fazer você vai fazer cubo, porque você sabe o quê? Sua atualização favorita que você pode ver em vez de ter que usar após efeitos agora para criar esses tipos de efeitos, você pode ir direto para aqui e fazer isso.
12. Envolvendo o envolvimento de para a embrulho.: e isso é um embrulho arrependido pelo ultraje não convencional. E eu adoraria ter feito um vídeo falante usando a câmera. Infelizmente, as circunstâncias mudaram. Eu não fui capaz de pegar um. Então estou começando a me arrepender de não ter filmado que, nos mesmos dias, o interesse em nossas colocações realmente dá essa pequena câmera. Ela deve dizer, obrigado por assistir. Há uma pequena foto minha, como na casa dele, mas não importa. Ah, e sim, honestamente, só quero encorajá-lo a me alcançar e realmente se envolver com o curso, você sabe, fazer perguntas e também dar feedback. Quero dizer, este é o primeiro curso que eu faço. Não tenho experiência em ensino online. Isso meio que me procurou e disse: “
Olha, Olha, você quer fazer vídeos? Eu estava tipo, sim, sim, eu sei algo diferente e, sim, me
procure em outro lugar também. Como eu disse, drible pré ativo lá, sempre publicando coisas e principalmente tentando, eu acho que ficando mais de uma rede no LinkedIn já do usuário. Mas sim, 57 conexões ganhando tão honestamente, se você quisesse, tipo, rede em um nível mais profissional. Acerte-me ao ouvir a mensagem. Eu honrado, eu poderia me encontrar em. Bem, eu tenho os links aqui, então sim, use o chão. Foi onde eu fiz um pouco de código. Seja mãos e sim, Então eu espero que você tenha gostado deste curso. Tentei ser o mais informativo possível e quebrar tudo da melhor maneira possível , então sim. Oferecer algum feedback sobre? Sim. Fique atento. Espero incluir mais coisas num futuro próximo. Vejo-te em breve.
Curtis Lee, 21 | Product Designer
