Transcrições
1. Introdução: Se você quer inovar algo novo em sua vida, deve levar isso. Sou Johny Vino. Sou Designer de Interações, Designer de Movimento, Protótipo e Visual Designer. Muitas vezes, meus projetos não são convencionais, novos e totalmente especializados em fazer design humanizado. Hoje, vamos aprender como podemos criar a idéia em sua cabeça para real protótipo móvel ao vivo, que é preenchido com muitas emoções, personalidade e uma identidade única no design. Para fazer essa classe, você não precisa ser realmente UX/UI designer agora. Você pode ser qualquer um como um designer gráfico, designer
visual ou engenheiros, ou você apenas tem uma idéia em sua mente e você quer transformar essa idéia em produto vivo. Hoje, vou criar um aplicativo para adolescentes. Vou mostrar a vocês qual é a maneira como ele é projetado atualmente, e como podemos melhorá-lo. Vamos mostrar como vamos melhorar o design visual do aplicativo. Em terceiro lugar, vamos realmente protótipo usando princípios para garantir como podemos adicionar este elemento micro interação e personalidade para o aplicativo. Você pode acompanhar baixando um arquivo de esboço neste curso de design. Você também pode aplicar todo o pensamento que vou ensinar, e aplicar esses princípios também em suas próprias idéias como projeto. Eu vim para projetar porque parece bonito e eu faço algo bonito, mas eu quero ficar no design porque eu posso fazer grandes mudanças no mundo. Interação é apenas um meio muito legal. Estou animado para ver o que você vai inventar. Vamos começar.
2. Humanizando o design de aplicativos: Hoje classe, vamos cobrir como podemos adicionar personalidade e emoção no design do aplicativo. É super importante no design do aplicativo
hoje em dia porque o design do aplicativo está mudando a vida de todos, como o interagir com o mundo. A coisa mais importante no aplicativo é que todos os dias, há centenas de aplicativos que as pessoas estão lançando na App Store. aplicativo mais bem sucedido, nós sempre temos uma pergunta como este aplicativo é tão bem sucedido porque eles adicionaram esse nível de emoção e sentimento para o aplicativo. Então, hoje, vamos cobrir isso. Como você pode fazer essa sensação em qualquer aplicativo está fazendo? Como você pode adicionar a personalidade de pequenas microinterações tocando o aplicativo? Porque eu sou de uma pequena aldeia de comunidade de pessoas pequenas, tudo acontece principalmente comunicação humana para humana como encomendar comida, como postar uma mensagem, tudo é tão humano. Mas quando me mudo para um mundo tecnológico, tudo é tão digital. Então eu tenho uma paixão de como trazer esse elemento humano que eu tinha no meu passado para o mundo digital. Para que de volta no meu lugar ou pessoas em uma aldeia ou em qualquer lugar do mundo possam usar seu aplicativo, não só ter pessoas em uma cidade tecnológica. Comecei a fazer design sozinho, mas não fazia ideia por onde começar, porque na minha área não há escolas de design. Então comecei a fazer aplicativos, todas as ideias. Todos os dias eu tinha algumas idéias, então eu comecei a fazer minhas idéias em protótipo real. Eu postei online todos os dias para passar dois anos. Muitas pessoas disseram: “Oh, isso parece único. Suas ideias são tão únicas.” Eu sou como, “Porque eu não aprendo design, porque eu não sei regras. Eu só faço o que eu penso.” Então, desde que você está começando como um iniciante, você já está fora da caixa. Não fique com medo. Você já é muito bom do que as pessoas realmente experimentaram porque todas as idéias que você vai vir agora vão ser super únicas. Então, seja confiante e aprenda com esta aula. Como pode a ideia que você tem trazê-la para o mundo e compartilhar ao mundo regularmente o que você está fazendo? Nós vamos aprender isso criando um passo a passo real do produto
da idéia que você tem
agora e como podemos criar isso em um passo a passo. Passo a passo é super importante para qualquer projeto porque quando você diz uma idéia para alguém, vai ser como, isso é legal. Mas eles não conseguem entender como se sente quando estão usando. Então, limpando passo a passo, você vai dar a alguém uma ação real no celular onde eles podem apenas clicar e sentir, isso se sente muito bom, eu realmente adoraria ter este aplicativo. Na maioria das vezes, quando você estará trabalhando nas diferentes partes interessadas, como engenheiros, como gerentes, equipe de marketing, eles não têm qualquer idéia do que projetos você está fazendo. Eles só podem tomar decisões quando realmente vêem quando algo se move. Por exemplo, há uma diferença entre um storyboard e um filme real. Quando você assiste a um filme, você tem a sensação. Não é apenas um conceito. Criar um aplicativo em um produto real leva cerca de seis meses, mas você pode fazer isso em um dia. Então é por isso que andar através é super importante para comunicar o sentimento que você está tentando se comunicar para que as pessoas possam realmente tomar decisões com base nisso. Durante esta aula, vamos criar um aplicativo de dieta especialmente para adolescentes e crianças. Vamos começar a partir de um arquivo básico de esboço que eu vou fornecer. Você pode baixar de nossos recursos. A partir disso, vou mostrar a vocês como podemos melhorar isso para o próximo nível de design visual. Em seguida, vamos testar esse produto usando InVision, então eu vou mostrar-lhe como você pode adicionar elemento de
micro-interação do momento aha no aplicativo. Então, finalmente, vou te ensinar como você pode comunicar suas ideias com um cliente, o mundo ou com engenheiros. Meu pensamento era, como podemos rapidamente pegar essa informação de nossa mente e transformar essa idéia em produto vivo? Então eu apareço com essa idéia do processo rápido de duas horas de chegar com a idéia,
criação, design e criação de protótipo. Vamos usar o esboço que é para o design da interface do usuário, e também vamos usar o InVision para testar nosso protótipo. Visualmente, como é a hierarquia de fontes, qual host as cores funciona, e depois disso vamos usar o software de princípio onde criamos animação, micro interação e fazemos as coisas realmente se moverem. Finalmente, vou ensinar-lhe algumas dicas e truques no Keynote. Como você pode realmente colocar todos os seus vídeos no Keynote para apresentar às pessoas. Todos esses softwares que mencionei agora estão disponíveis para avaliação gratuita por um mês ou 15 dias. Então você não precisa se preocupar. Basta ir àqueles sites e baixar os softwares. Então, o próximo passo, vamos ver como ótimos aplicativos realmente se parecem.
3. Ótimos aplicativos para uso na vida real: Nesta aula, vamos ver quais são os ótimos aplicativos que usamos todos os dias em nossa vida e o que os torna realmente ótimos, e o que lhes dá uma sensação de experiência de aplicativo memorável. Então vamos começar apenas olhando para quais são os
recursos do iPhone que temos agora que literalmente todos os dias usamos. Por exemplo, o Centro de Controle onde fazemos mudanças de brilho, em mudanças e tudo mais. Vamos apenas deslizar para baixo, essa interação em si, você sente a diferença. Ele simplesmente deslizou para baixo, é tão natural. Não é só isso, uma vez que estou gravando a tela, ele está realmente me mostrando um ponto de como eu realmente estou gravando a tela. Se melhorarmos o brilho, você pode ver como eles estão mudando o brilho lá. Na verdade, algo como som, eles estão realmente silenciando. Há tantos detalhes envolvidos nesse som. Super interessante é como o toque, que está aqui. Você pode realmente ver como o toque está dando por bar a bar e minha lanterna está aumentando. Então todas essas coisas que eles capturam
do mundo real e eles colocam essa experiência no celular, e é por isso que todo mundo sente que o iPhone é super fácil de usar porque eles usam essa pequena experiência humana que eles fazem isso indiretamente As pessoas não percebem. Vamos dar uma olhada em outro aplicativo. Este ano, eles foram apresentados como Apple Best App Award, apenas um aplicativo de lápis simples. A coisa legal que eles fizeram é este bar, onde você pode como mudar rapidamente o nip. Veja, assim. No passado, quando estávamos na escola, mudávamos os mamilos do telefone como num lápis. Então eles usam isso como mudar lápis como uma experiência humana em detalhes reais, quando eles se esforçam tanto. Fazendo essas mudanças de cor. Então, isso é o que eu estou dizendo a bordo como este aplicativo se sente ótimo e nós não entendemos por que ele se sente ótimo, é realmente eles envolvem experiência humana que tivemos antes. Vamos olhar para outro aplicativo que eu fiz e publiquei na App Store. Então, apenas uma calculadora de IMC simples que você pode verificar o seu IMC, onde você pode simplesmente deslizar rapidamente para baixo em vez de dar como um menu drop-down onde você pode apenas “Oh, qual é a altura do meu peso?” Você pode simplesmente deslizar para baixo. É super interessante e você pode inserir o peso ou gênero que você quer. Eu adicionei como um pequeno toque de como comer como nós jogamos este jogo. Então eu só gosto na parede esse princípio, eu rolar para baixo e então realmente dar o resultado. Embora, este como um realmente como uma guia de ajuda, não
é chato como qualquer um pode usá-lo e é bom para usar. Finalmente, podemos olhar para outro aplicativo que eu realmente admiro, é como uma página de tempo. Então eu baixei agora mesmo. Então está me dando um, oh, prazer em conhecê-lo. As palavras que estão usando, é que ainda parece um humano falando com você. Então só estão perguntando quais cores você quer, quais cores você gosta. Você pode escolher a cor que quiser. Isso é o que eu fiz. Você pode ver todo o seu calendário, apenas
parece bom. Não se sente como um calendário comum, ele se sente super inteligente. Um recurso muito legal que eu gosto sobre este aplicativo é como como eles estão fazendo uma configuração que é super interessante. Vamos clicar em alertas inteligentes. Como se clicarmos em chuvas, eles estão realmente mostrando como alertas, você quer uma notificação quando está chovendo. Se quisermos saber qual é a hora de sair e que tipo de carro você está usando, tudo isso são como elementos humanos como você vai andar ou você vai pegar um carro. Então, estes são como elementos realmente minúsculos, mas esses pequenos elementos tornam este aplicativo super único, ninguém pode fazer isso e qualquer um pode lembrar claramente este é a partir daquele aplicativo lapso de tempo. Então é isso que vamos ver em nossa aula hoje, como você pode criar um aplicativo como este. Esses aplicativos não são apenas como dar-lhe a funcionalidade, esses aplicativos são memoráveis porque é bonito, é impressionante e, ao mesmo tempo, é atemporal. Isso é o que é realmente importante enquanto você está fazendo um design. Você está fazendo um design que é moderno ou atemporal? Agora, vimos alguns exemplos de todos os grandes aplicativos são feitos em um produto ao vivo. Vamos começar a usar um esboço e criar nosso próprio design.
4. Preparar seu conceito: Então, o primeiro passo de fazer um ótimo aplicativo não é fazer interação complexa. O primeiro passo é que você precisa aprender o básico. Chamo isso de gramática inglesa. Se você quiser falar Inglês, você precisa aprender os conceitos básicos da gramática, então só você pode quebrar e criar algo novo. Se você não seguir essas regras, levará muito tempo para configurar o layout básico. Mas se você conhece as regras, você pode começar e ser criativo. Empresas como Google e Apple, logo eles têm tantos dispositivos e eles também [inaudível]. Eles já criaram todas essas regras básicas. Qual é o tamanho mínimo que você precisa usar? Quais cores são realmente acessíveis a todos? Para diferentes países, quais cores realmente deveriam? Qual é o elemento de navegação que você precisa também? Tudo isso é acessível se você vai gostar de Material Design, você vai encontrar todos esses recursos e está disponível gratuitamente e eles também fornecem muitos exemplos como o que você pode fazer, o que você não pode fazer. Então, primeiro comece por aí. Em seguida, você pode aplicá-los em seu design. Então vamos começar a fazer nossa própria idéia. Ontem eu estava falando com minha irmã. Ela disse: “Se você treinar as crianças na idade precoce para fazer o fitness, haverá mais saudável no futuro.” Então eu pensei em fazer um conceito de design de interação que encoraje as crianças a realmente interagir e fazer fitness. Vamos começar por escrever quais são os recursos ou como as coisas que precisamos
fazer para dar recomendação de exercício para crianças. Então, as coisas básicas que precisamos saber é como o gênero que eles são. Mais tarde, precisamos de altura, precisamos de que peso eles estão atualmente, e também podemos perguntar-lhes, qual é o seu peso desejado? Podemos fazer algumas perguntas como, qual é o estilo de vida? Qual é a comida que eles comem? Finalmente, mostra como uma tela que está processando todas as informações e, em seguida, mostrando sua tela inicial com o resultado, estes são exercícios recomendados para você. Então você precisa escrever basicamente todos os recursos rapidamente. Seja o que for que está vindo à sua mente ou você pode falar com seu amigo ou com os usuários que você está segmentando, você pode perguntar às crianças quais informações eles precisam e você pode preencher todas essas informações em um documento para começar. Às vezes, inicialmente, quando eu comecei a projetar, eu fiquei preso com eu preciso capturar todos os recursos e eu montei uma coisa toda, mas você vai fazer isso mais ou menos. Qual é a principal coisa que precisamos? Normalmente escolher cinco coisas principais que precisamos para este aplicativo ou quatro coisas principais. Para que sua interação seja mais focada e simples em vez de reunir todas as informações na primeira vez. Então agora vamos começar a trazer toda a velocidade de esboços ou os recursos que fizemos aqui em realmente esboço. Esboços aplicativo que ajuda você a visualizar rapidamente o seu design. É super simples de usar. Qualquer um como um grande nerd, ou qualquer um pode começar a usar o aplicativo. Então você já fez um arquivo básico ou mostrando quais são as coisas que discutimos, precisamos de um gênero, precisamos de uma altura, precisamos de um peso, e precisamos de um peso desejado. Eles querem alcançar, por exemplo, se eles estão em 80 voltas, eles querem ir para 60 voltas. Então estas são as informações básicas que precisamos. Depois que eles inseriram todas essas informações, vamos recomendá-los com os resultados. Eu cometi muitos erros intencionais neste específico [inaudível] porque essas são as coisas que a maioria dos iniciantes faz. Quando sou iniciante, cometi todos os erros. Então eu só quero que você saiba que esses erros são super comuns e você pode facilmente evitar essas coisas. Então erro super comum que todos fazem. Não é grande coisa, mas se você trabalha em uma empresa e está apresentando um design, e eu faria como um erro ortográfico de fazer coisas. É super simples, mas é realmente grande. Esse é o primeiro que eu diria. Em seguida, um segundo eu diria, conhecendo uma tipografia como um estilo hierárquico. Isso é super importante. Por exemplo, a tela atual. Você vê todas as telas, quase parecem iguais. Portanto, não há hierarquia adequada, qual é o primeiro, o que é mais importante. Então eu vou apenas limpar rapidamente essa coisa. Então eu sempre como eu disse aqui antes de algum site como as diretrizes humano-computador como a Apple, eles fizeram uma diretriz clara do que é o tamanho do cabeçalho que você pode usar, o que é um tamanho de parágrafo que você pode usar. Por exemplo, 16 é super pequeno para títulos. Então você pode usar 34 ou como se você quiser ter 32, esses são os tamanhos que mostra imediatamente este é o cabeçalho. Então o nível secundário é como um parágrafo. Agora, eu quis dizer inserir um estilo de fonte diferente como, por exemplo, este é um título e este subtexto figura. Mas diferenciar claramente. Se você é visto como o Google Material Design dado é realmente intencionalmente, muito bom. É como separar este tipo de títulos minúsculos, eles usam tampa completa. Então você pode selecionar todas as camadas e ir Texto e há uma função para chamar como Transformação. Se clicarmos em maiúsculas, está feito. Então agora você pode ver rapidamente que há uma clara diferenciação entre o título e a opção que você deseja. O terceiro erro comum que muitas pessoas fazem. Como se você estivesse indo imediatamente encontrar buracos como um designer iniciante ou alguém como por conveniência é como um espaçamento. Por exemplo 35, eu tenho 35 espaçamento aqui e eu tenho como um 13 espaço aqui e como um 43. Esse é um truque que é super fácil de aprender. É como um sistema de oito grades. Assim, por exemplo, quando você deseja manter um espaçamento entre elemento, você pode colocar itens aleatoriamente. Você vai dar como um múltiplo de oito. Por exemplo, eu quero que isso seja como 16 e isso seja como 16. Então você vai fazer uma constante como espaçamento, e terceira coisa é o tamanho. Por exemplo, muitos designers quando começamos a projetar, nós não temos qualquer idéia de como o tamanho
deste botão para ser e nós apenas desenhar um botão. O tamanho mínimo para um botão é como 44 pixels. Então, atualmente, a altura está dizendo 39, mas isso é muito bom, mas isso é realmente pequeno quando você está realmente usando uma impressão digital polegar. Você não pode clicar nesses botões. Então você tem que ter certeza de que seu mínimo é 44 de altura. Então eu costumava usar como 48 como tamanho mínimo para que o botão e ser como super fácil de clicar, e como eu disse, quando você está projetando você está cuidando de alguém,
quando eles estão apenas andando na estrada e eles querem preencher o formulário, você tem para se certificar de que é facilmente clicável. Se for super pequeno, eles podem clicar. Rapidamente nós vamos andar através como, como eu disse, nós podemos usar o mesmo estilo de cabeçalho aqui. Copie rapidamente o estilo e cole aqui. Então, quando você estiver alinhando, certifique-se de que essas fontes também estão alinhadas em um ângulo reto. O espaçamento está claramente correto. São oito sistemas múltiplos e fora. Então, também há uma pergunta como o que é o espaço exterior, você precisa dar. Você geralmente tem o tamanho mínimo aqui para dar ambos os lados como extensão extinta. A última coisa que quero dizer é como as cores. Então eu adoro tocar cores. Você pode usar cores aleatórias porque cores significam coisas diferentes para as pessoas. Então, para este, eu nem preciso de cores porque sempre que você vai usar cores, você está dando atenção a essa parte específica. Você quer que eles cliquem nele, e atualmente eu não quero que ninguém clique nos 10 minutos. Então você vai apenas torná-lo uma cor que não é tão importante e é um nível secundário de cor, é por
isso que eu usei cinza. Como você já viu, todas as cores que eu uso não é preto puro. Eu uso como um campo azulado. Isto parecia preto. Se eu usar preto azulado, é mais conveniente para os olhos. Então estes são como pequenos segredos como muitos aplicativos se aplicam no produto. Você pode colorir tintura. Vou compartilhar esses arquivos com você. Eles estarão na sua pasta de recursos. Você pode baixar e você pode jogar ao redor e certifique-se de que todas as fontes SSR. O espaçamento, as faces de fonte que você mantém estão perfeitamente alinhadas. A próxima lição que eu vou ensinar a vocês que esta aula é tudo sobre depois de ter aprendido o básico, próximo nível é como podemos torná-lo mais pessoal como elemento humano em toda a aplicação.
5. Testar seu design: Então aplicamos todas as regras básicas. Agora, vamos verificar rapidamente como a hierarquia de fontes está funcionando, a cor está funcionando em um dispositivo, ou os botões que estão sendo feitos são clicáveis ou não. Assim, podemos fazer isso rapidamente usando o InVision. Então eu tenho um InVision integrado usando aplicativo chamado Craft. Você pode baixar gratuitamente. Quando você fizer o download, haverá uma opção chamada carregar seu design. Você só precisa selecionar toda a opção que você precisa fazer, você precisa digitar o nome. Se você clicar em publicar, haverá um som tocando, e é isso. Agora, todos os seus projetos que você fez agora, os wireframes que você
fez, eles virão para o celular. Você precisa sempre verificar seu dispositivo. Devido a algumas pessoas fazer algum usuário testar o que eles pensam, mas eles estão clicando fazer algumas perguntas como, “Você poderia selecionar esta opção? O que você acha?” Assim, você pode saber rapidamente todos esses detalhes mostrando no dispositivo. Então como você tem que trabalhar ou você encontrou problemas como o tempo e as cores são super minúsculos. Então, o que você pode fazer rapidamente é, você pode ir para o esboço novamente, e rapidamente mudar a fonte. Então, você sabe como usar 10. Então eu quero mencionar rapidamente uma dica rápida você deve usar uma fonte, um mínimo de 14. Você tem que começar com 14, depois 16, 18, 24, 36. Essas são a hierarquia básica da fonte que você precisa usar. Então eu vou em frente e colocar 14 aqui. Aqui também, vou aplicar os mesmos estilos. Então eu vou apenas clicar com o botão direito do mouse e copiar esse estilo que eu vou colar aqui. Quando criamos ícone, não faça ícone em formas aleatórias. Se você quiser criar um ícone, certifique-se de que a altura é como 24. Isso também é para o estilo de ícone, que está fazendo um afiado como 24, 48, 96. Esses são os tamanhos que costumam usar. Agora, eles usam tamanhos de fonte aqui. Já que é um arame, não vou manter esse espaço antes, mas você vai aplicar todo o espaçamento que eu te ensinei antes. Então, agora, fizemos todas as mudanças. Podemos clicar rapidamente nesta prancheta e clicar em publicar. É isso. Novamente, tem um som. Se você atualizar a tela novamente, ela estará aqui. Agora, nós rapidamente fizemos todas as mudanças. A fonte é bem grande, e eu posso ser capaz de ver os ícones. Então é assim que você está indo para iterar constantemente
vendo o celular é super importante. Porque na maioria das vezes, quando começamos como um design, estaremos trabalhando em um grande monitor ou laptop. Então, se você ir ainda mais para verificar no celular, porque é aí que os usuários vão usar um produto. Então agora, você pode ter uma pergunta que quantas vezes eu tenho que repetir. Se você continuar iterando, você tem que iterar durante todo o ano. Então você deve parar em um ponto e realmente lançar o produto. Então, só haverá muitos usuários estarão usando seu produto e darão comentários ou comentários. Tente iterar umas cinco vezes. Não é um número, mas cinco vezes fazem uma grande iteração. Então, você tem que passar para o próximo. O próximo passo é o passo mais importante que vou ensinar a vocês é, como podemos humanizar isso. Como podemos tornar isto mais atraente, que é como você o usou? Especificamente, nós iteramos para ambos para crianças. Então, como podemos personalizar o design para eles?
6. Adicionar personalidade: Agora, vamos fazer as coisas divertidas. Fizemos todas as coisas básicas, como espaçamento. Agora, vamos criar esse elemento humano, e as emoções, e os sentimentos no aplicativo. Vamos pensar sobre como podemos realmente pensar sobre essas idéias. Porque pensar é super importante, vou ensinar-lhe como você pode explorar e pensar este tipo de elemento humano em seu aplicativo. Então, vou esboçar ideias diferentes. Quais são as diferentes maneiras pelas quais podemos coletar essa informação além de apenas como em formulários? Tipo, apenas na altura. Inicialmente, o que fiz foi,
literalmente, pesquisei alguns dos instrumentos de medição de altura e peso do garoto. Então eu tenho essa inspiração aqui. Há uma criança pequena que eles estão perto de uma medida de altura e esta está mostrando uma pessoa que eles estão colocando, como você lembra antigamente, eles colocam uma escala em sua cabeça para medir ou sua altura em sua casa. Eu baixei um monte de inspiração do Google. Então o que eu fiz é, eu apenas brainstorm como, ok, nós podemos ter um controle deslizante, que rapidamente aparece para cima e para baixo, você pode deslizar para inserir o valor, ou como controle deslizante esquerdo e direito para dar um valor. Então eu pensei, por que podemos usar a tela inteira para um valor, então eu coloco a escala à direita e os detalhes à esquerda. Então, finalmente, eu desenhei este personagem é apenas literalmente como tirado de combinado este parafuso em majors que eu tirei, como se houvesse uma escala na cabeça de um cara e há marcas na parede. Então eu coloquei as marcas na parede à direita e há uma criança pequena com uma escala na cabeça. Então você pode trazer algumas idéias diferentes, mas a maneira como ele tinha sido desenhado é apenas pensar, qual é a maneira diferente e inovadora que você pode mostrar esta informação e apenas mais interessante para o público-alvo específico. Então é assim que eu meço altura e peso, eu diria que você segue o mesmo princípio. Eu só pesquisei algumas das balanças de peso que as crianças estão usando. Encontrei esta fascinante balança de pesos redondos. Agora, embora seja tão digital, é tão legal ver como se move. Então eu peguei essa inspiração em uma escala normal e também adicionei uma escala de peso. Mas as crianças podem ter um caráter. Na verdade, é como se você aumentar o peso do personagem do garoto vai crescer e como menor. Finalmente, para a tela inicial eu fiz uma pequena dobra tal em ok, com base em todos os seus dados, temos essas recomendações para você. Vamos fazer uma última tela. Isso é tudo o que você tem para debater ideias rapidamente e esboçá-las em um jornal e mostrar às pessoas. Estas são ideias diferentes que tenho e peça-lhes para escolherem qual ideia é mais interessante. Para que você possa rapidamente tomar a decisão em vez de fazer tudo em uma tela, porque leva tempo quando você faz algo em um esboço. Então eu sempre mencionei esboços além de trabalhar em um laptop porque quando você esboça sua mente não está em um mundo digital, você está completamente fora do mundo digital. Quando você esboça usando a mão, a forma como o cérebro funciona é completamente diferente. Porque quando você está em um computador você tenta obter um monte de inspiração. Oh eu posso usar este aplicativo em vez de [inaudível] mas quando você está desenhando é tudo do seu cérebro. Então você está super focado. Quero dar uma dica de que, quando você está
esboçando, ninguém se importa com a aparência visual. Você está apenas mapeando a idéia. Então, basta esboçar rapidamente o que quer que tenha vindo à sua mente e compreensão para você ou para os designers com quem você está trabalhando. Então, depois de esboçar tudo, vamos transformar todas as ideias que temos em um esboço. Eu organizo as telas com base em cada passo. Se você quiser fazer um passo a passo, você precisa
ter certeza de que todos os seus quadros ímpares estão em estado diferente. Por exemplo, eu sei sem animação o que vou fazer. Por exemplo, se eu clicar em macho aqui, ele vai ser aqui. Então, se eu clicar no próximo, vai
haver altura e vai haver esta barra. Se eu deslizar esta barra, vai ser 169. Se eu clicar em seguida, ele vai pedir peso, e se eu mudar o peso, a forma da pessoa vai mudar. Então você tem que se certificar de que você está organizando toda a sua animação em um quadro ímpar separado diferente para que seja fácil fazer o passo a passo. Caso contrário, será muito difícil para você dar uma volta. Você pode fazer tudo em uma única tela, embora seja super difícil. Por exemplo, isso também sei que minha animação vai funcionar dessa maneira. Eu vou deslizar para baixo e ele vai ser clique
no jogador e novamente ele vai jogar toda a atividade. Então cada coisa tinha que ser uma camada específica separada para que fosse super simples para você fazer em princípio. Agora todas as telas estão prontas, e eu vou estar compartilhando o arquivo de esboço também na pasta de recursos para que você possa baixar, e a partir disso você pode continuar me seguindo sobre como eu estou importando todo o design em princípio e realmente criando o passo a passo sobre o qual falamos. Como você pode criar esse passo a passo que é mais interessante para compartilhar?
7. Criação de transições simples: Agora, vejamos como podemos importar esse design para a Princípio e começar a fazer animação. Primeiro eu vou apenas gostar de ter uma prancheta números, ele vai ser super útil. Então eu estou usando plug-in rápido chamado Sketch Number Prancheta. Nós vamos lá e clicamos em linhas e temos um número stile de um a três. Ok. Então você tem 11 telas agora. Então, seria super fácil quando você está importando tudo para a
Principle para que você saiba qual tela você está se conectando a seguir. Vamos abrir a Princípio. Eu uso principalmente Principle, é um software que ajuda você a criar protótipo muito rapidamente. Uma vantagem de usar o princípio é que você pode importar o arquivo Principal para o iPhone para que você possa facilmente fazer testes. Parece um laboratório real quando você exporta um arquivo principal. Então agora estamos em Princípio, o que precisamos fazer é clicar na importação e você tem que selecionar o documento. Este é o único documento que selecionamos agora. Então agora eu estou usando esboço e eu vou selecionar
3x para que minha qualidade do meu design seja realmente alta. Então eu vou clicar na página Importar. Então, ele vai renderizar toda a página que você desenha em um esboço no Princípio. Boom. Todas as telas estão aqui escreva agora. Então, depois de importar para
o princípio, o passo básico que você precisa fazer e o truque um monte de grandeza ou um monte de pessoas que não usam animação eles não sabem que, você só precisa selecionar a prancheta, você pode selecionar aqui ou você pode até selecionar aqui, não selecione um retângulo. Por exemplo, se eu clicar aqui, ele está selecionando um retângulo. Você deve selecionar a prancheta, e você vai clicar aqui e clicar em Tab. Você vai fazer repetidamente para todas as pranchetas. Então agora eu me conectei, se você vê no topo, é uma linha do tempo. A contagem no topo haverá uma pequena janela vem abaixo, chama-se linha do tempo. Agora não vamos tocar nisso, mas você pode ver que todas as setas estão conectadas. Significa que se você clicar nisso, ele irá para aqui. Se você clicar nisso, ele irá para o próximo. Então acabamos de fazer um protótipo click-through. Eu só preciso testar que se você clicar aqui, ele vai para aqui. Está acontecendo aqui e eu só estou clicando. Estou apenas clicando e animações estão acontecendo automaticamente. Então o problema aqui agora é o Princípio baseado em camadas. Por exemplo, se eu clicar aqui, esta rodada preta vai para lá porque ambos têm o mesmo nome. Então isso é como animação automática, mas o único problema aqui é às vezes, os nomes não são mencionados corretamente. Então, as coisas que não queremos, começam a se animar, algumas coisas que nem queremos como, por exemplo, esta. É aleatoriamente animado. É aí que vem o truque. Você precisa ter certeza de que nada está animando aleatoriamente. Então o truque é que você vai copiar toda essa camada. Você tem que ir para a segunda prancheta e cortar tudo, comando X e comando V, e comando X e comando V. O que ele realmente vai fazer é renomear todos os nomes, automaticamente pegar cortar e colar. Então, por exemplo, se eu clicar agora, não
há nenhuma animação porque não há nenhum nome comum porque Princípio renomeou quando você cortar e colar. Vamos tentar aqui. Veja, há alguma animação acontecendo. É porque talvez o vestido dessa garota seja parecido com o nome dos caras. Veja, ela tem um caminho três, caminho três, e ele tem caminho três como um vestido. Então o que você vai literalmente fazer é, novamente, você vai cortar toda a camada e colar aqui e cortar e colar aqui. Então, agora, se você clicar em calha, não
há animação acontecendo. Às vezes pensamos como, oh, por que não usar apenas animação automática? Mas a animação automática que você não pode controlar. Como você já viu anteriormente, a animação automática se move aleatoriamente. Então, quando você faz a animação automática, você não pode controlá-la porque você precisa controlar qual animar, o que não pode ser animado. Então só você pode criar o seu design, porque a missão não vai fazer design para
você, você vai fazer animação que você quer. Tão rápido basta copiar colar todas essas coisas para se certificar de que nada está animando automaticamente. Então eu vou ensiná-los que outras coisas podemos fazer para torná-lo realmente divertido, não apenas como se eu clicar aqui ele vai para lá. Então, para torná-lo mais suave, o que eu vou fazer rapidamente é copiar colar esses grupos. Então eu selecionei esses dois grupos. Eu vou copiar e colá-lo em uma prancheta anterior, e eu vou movê-lo um pouco para o lado direito. Então você pode fazer isso usando esta ferramenta chamada X.
Quando você passar o mouse sobre o x, haverá como uma seta. Então você só precisa gostar de deslizar aqui. Então, tecnicamente, o que queremos dizer é como se esta ilustração viesse da esquerda para a direita. Porque nesta tela, está à direita e na tela anterior você coloca a ilustração à esquerda. Então vou mostrar à demonstração o que está acontecendo. Se eu clicar aqui, veja, ele está vindo da esquerda para a direita porque você tinha a ilustração à esquerda. Se você mover a ilustração para a direita, ela virá da direita. Então é isso. Se você quiser, oh, eu quero de baixo, você pode usar y. não alterá-lo manualmente, não mova para baixo manualmente. Você precisa ter certeza que você está usando y, usando essas setas, porque é super perfeito. Então eu me mudei de baixo. Agora vou testá-lo. Vês, está a vir de baixo. Então esses são realmente básicos, se você sabe que você pode fazer qualquer coisa. Então eu vou fazê-lo literalmente de baixo, mas não tão para baixo. Mas ainda está bloqueando minha tela, então o que você pode fazer é realmente apenas mover-se abaixo dessa camada para que ela não tenha o símbolo aqui. Para torná-lo realmente mais suave, o truque são os números. Então isso é chamado de linha do tempo. Quando você clica nesta seta, isso é como uma linha do tempo, ele mostra zero segundos, um segundo, dois segundos. Então esta animação está acontecendo em, se clicarmos nisso, 0.3 milissegundos. Então está acontecendo muito rápido. Para torná-lo mais suave, o truque é que você precisa clicar nesta seta. Essa é a flecha. Eu já tenho um monte de animação para mim, Eu tenho uma animação padrão chamada 140. Para esta classe podemos criar uma nova animação. Então você tem que clicar na primavera. Então você pode ver o script, primavera é como muito charme, se você quiser linear, Easy In, há tantos opção padrão. Mas vou ensinar-te o meu segredo de como podemos torná-lo mais suave. Então, a fim de reduzir a tensão para que ele sinta esta forma, eu costumo fazer 100 ou 120. Então isso é super importante, se você não fizer isso,
isso é o que torna o toque final de alto nível de torná-lo super suave. Além disso, a coisa mais importante que você deve sempre fazer gráfico de animação. Se você está fazendo um protótipo, todos têm que sentir a mesma animação. Você não pode ser como um é super primavera, um é super suave. Você tem que ter certeza que todas as animações parecem iguais. Então você vai aplicar a mesma coisa aqui, 100. Se você estiver indo para usar o mesmo tipo, você pode realmente adicionar isso. Se você clicar em mais, você pode adicionar Skillshare. Então eu adicionei uma camada para que eu não precise mudar de
novo e de novo este gráfico, ele é alterado automaticamente. Então, quando eu clico, veja, é super suave. Então, estas são as etapas básicas de animação que você precisa fazer. Então eu vou fazer esse cara vir da direita para a esquerda porque o macho é da direita para a esquerda. Então eu vou colar aqui, e eu vou me mover um pouco aqui. Então, como você vê, eu não estou tocando em nenhum número manualmente, você só precisa de um jogo com a seta. Quero a opacidade, opacidade significa isolador zero. Vês? Só quero que a opacidade seja super zero. Então, quando ele vai aqui, ele se torna automaticamente 100. Então você não precisa se preocupar com o que vai acontecer aqui, você só precisa se preocupar com a opacidade que você quer. Então eu cheguei a zero e quando eu clique em macho, parece que está vindo de zero a 100. Então, agora, se eu selecionei o gênero, está funcionando perfeitamente. Como esperávamos, super suave e se sente como um aplicativo real. Agora o que vamos fazer é selecionar este macho e podemos nomeá-lo como um macho porque sabemos que vamos usar essa pessoa através do aplicativo. Então podemos nomear isso como um macho e eu vou nomear macho para todas as pranchetas. Por que é super importante é animar automaticamente. Agora é animação automática vai funcionar da maneira que você queria porque você está definindo que ele é homem, o nome da coisa. Então agora você vê a magia. Depois de terminar o gênero, você vai clicar em próximo e ver o cara se animar automaticamente porque você nomeou a camada igual. Este é masculino e na próxima tela este nome de grupo também é masculino. Se você clicar nisso, veja, não
é suave, mas você pode ver a diferença. Na verdade, essa pessoa está se movendo para lá, lá, lá. Vês? Este é o lugar onde automático é bom porque nós o nomeamos corretamente, ele não está acontecendo automaticamente.
8. Personalização de animações: Então agora sabemos que personagem precisamos manter através de diferentes pranchetas. Então agora o que eu quero fazer é, selecionamos o gênero, agora vamos selecionar uma altura. Altura, o que eu vou fazer é selecionar, quando eu clicar aqui, é claro para o cara cabelo crescer. Crescer significa que o cabelo cresça um pouco mais alto. Então o que está acontecendo aqui é que quando eu clico aqui, a pessoa está em um alinhamento diferente para
que ele está se movendo da esquerda para a direita, isso não é suave. Então o que eu vou fazer é eu vou apagar aqui. Vou copiar esta pessoa, vou colar o macho aqui. Então você vê, se eu for de 65 para 69, nada muda. Mas vamos fazer manualmente. Então é aí que eu vou te ensinar a opção de escala. Escala não é nada além de desenvolvimento fazê-lo como 1.1 e certifique-se de selecionar a ambas as camadas e alinhado para os fundos, não alinhado para a parte inferior. Certifique-se de que estes são da mesma altura para que ele não se mova muito. Então, agora, se eu passar para 699, veja, há uma transição suave. Terminamos a altura, agora vamos fazer o peso. Agora é uma parte um pouco complexa porque o peso está em um estilo circular, não
é como linear, linear é muito fácil. Então o que vamos fazer é que temos que fazer isso manualmente. Isso é um pouco irritante, mas você tem que fazer isso manualmente. Por exemplo 160, você tem que ter certeza que este 160, aqui também 160. Veja no anterior, ele mudou para 162 porque nós o renomeamos. Agora vamos nos certificar de que todos os nomes são iguais. Remova este número. Por que estamos tendo o mesmo número? Só estou tentando dizer que se você tem um mesmo número, ele realmente se anima. Vou te mostrar o exemplo. Se clicar aqui, este 160 está realmente se movendo daqui para aqui. Vejo aqui que algo está se movendo automaticamente, a cabeça de algum homem. Então, sempre que isso acontecer, copie aquele homem porque esse homem é o único problema. Vou cortar, colar, cortar, colar. Então agora eu renomear o nome corretamente, por exemplo, 140. Eu vou fazer 140. Então eu vou renomeá-lo rapidamente para garantir que ambos têm o mesmo nome, por exemplo. Duzentos é realmente 200 na prancheta seguinte para que ele animar propriedade. Mas para alguns números, estamos introduzindo novos. Por exemplo, quando você rola, estamos introduzindo 210 e 220. Então o que vamos fazer é copiar essa camada e colar aqui,
e movê-la para baixo para ter certeza de que continua a rodada. Então agora tudo está perfeito. Se você simplesmente deslizar, parece que está deslizando. Se entrarmos em todo o peso, altura, e o que queremos ser uma criança, não nós. Deixe o garoto inserir todos os detalhes e a criança finalmente quer pelo menos exercício de recompensa que eles podem fazer. Então, em vez de aterrissar diretamente para uma tela inicial, torná-lo, você pode fazer algo interessante. Então eu vou adicionar uma nova prancheta no meio. Para mostrar rapidamente, você pode clicar em inserir e eu vou inserir prancheta. Rapidamente fazer uma animação rápida, eu vou fazer um pouco de animação aqui. Então eu vou copiar tudo isso para o centro. Então ele se tornou retângulo porque você teve que ajustar o raio. Isto é outra coisa. Raio é a coisa que você usa para fazer isso. Então eu adicionei esta camada adicionalmente para mostrar que estamos realmente calculando uma taxa. Mostra um pouco de noivado. Então o que eu vou realmente fazer aqui é eu quero uma outra camada aqui, como uma barra de carregamento. Então, como você pode fazer isso? Que às vezes temos uma pergunta. Estamos fazendo algo e no meio, temos uma ideia nova e pensamos : “Como posso acrescentar isso?” Então esse é um truque que podemos fazer facilmente. Então o que eu vou fazer é como se eu fosse aqui. Por exemplo, eu vou fazer um carregamento como uma barra. Então você pode desenhar um círculo. Então, se você já sabe esboço ou se você é como iniciante, você pode aprender muitas dessas coisas minúsculas como fazer uma barra de carregamento on-line. No Skillshare, há muito, claro, onde eles ensinam a fazer as formas. Eu não vou fazer isso agora, mas eu estou dizendo rapidamente se você usar tesoura, você pode cortar esta forma para parecer uma barra de carga. Vou aumentar a largura. Até que você esteja tendo uma forma suave, vou adicionar este canto arredondado. Vou ter uma cor branca. Então, por exemplo, você pode estar se perguntando o que está acontecendo na verdade? Então, nós inserimos todos os dados e eu vou clicar em seguida. Vai ser esta tela. Então agora nós quebramos essa conexão e estamos conectando essa tela. Pense como as pranchetas, pense como a animação principal é simples, como você está organizando um monte de cartões
na mesa e você está apenas conectando cartões diferentes. A partir deste cartão, vá aqui. Isso é o que eu comparei com como fazer filmes, como um lançamento de história. Mas se você conectar um storyboard, ele se torna um filme. Esse é o segredo dos princípios. Agora, eu clico aqui, ele veio e o carregamento não está acontecendo nada. Então é aí que esse princípio é super inteligente. É como se você pudesse criar componentes. Componentes é chamada como a criação de animação dentro da animação. Então o que isso significa é como se isso fosse como uma barra de carregamento, eu quero que seja como girar. Então eu seleciono essa camada, crio componente, você o encontra no topo. Clique aqui e eu vou duplicar a prancheta. Então você vai selecionar a prancheta e clicar no comando D ou como copiar, colar para duplicar a prancheta. Então esta é a barra de carga. Quando eu clico nesta prancheta, este lado para ir aqui, é isso. Mas não há nada de animação acontecendo porque nós não fizemos nada. O que vamos fazer é quando eu clicar
nisso, ele vai ficar aqui. Além disso, vai mudar o ângulo. Há outra funcionalidade aqui. Então eu já te ensinei muita coisa; X Y, mudando a opacidade, aumentando a escala, raio. Última coisa, coisa super legal é ângulo. Então eu vou fazer como ângulo de 360, algo assim. Quando eu clicar sobre isso, você verá que há como uma rotação rápida acontecendo. Em vez de 360, se a grade 3.600 vai girar continuamente. Veja, está girando continuamente, mas é super rápido. Então, nesse tempo, o que você pode fazer é como, como eu disse, se você quiser mudar o período de tempo. É como edição de filmes. Se você for aqui e há uma linha do tempo e você pode expandir a linha do tempo. Eu estou apenas pin zoom aqui usando como uma barra de toque Mac. Se você fixar zoom, desta vez irá expandir e contrair. No momento em que vou me ajustar a uns três segundos. Então será um pouco mais lento. Então essa animação vai acontecer mais devagar, viu? Um pouco mais lento. Para que possamos encomendá-lo. Então, o que é a coisa é como esta animação completa é animação separada dentro da prancheta. Quando eu clico aqui, ele deve animar porque ele não está animado automaticamente. Veja, o problema é que a rotação só acontece quando clicado porque eu fiz torneira. Então, o que você vai fazer é, em vez de tocar, você vai excluir essa seta e clicar nessa prancheta. Há uma função chamada auto. Começa a girar automaticamente, é isso. Então, quando eu clicar aqui, e quando eu clicar novamente sobre isso tudo vai vir. Então, se eu for para
recomendação, recomendação eu quero ser um pouco mais dramático quando está chegando ou quando é feito. Então o que eu realmente vou fazer é
selecionar o grupo de tudo para que eu possa animá-lo. Sempre que você quiser fazer a coisa toda para se mover, você tem que agrupá-lo. Coisa triste quando eu tocar aqui, estes são para ser em vez de vir diretamente, Eu quero ser como esquerda e direita como a maneira que fizemos antes. Eu quero ser como vir daqui, vê? Quero que o cartão seja um por um em vez de vir tudo ao mesmo tempo. É assim que funciona a física mundial. Como se você jogasse três bolas. Então vai ser como ir um por um baseado na velocidade. Então você vai usar a física que você aprendeu em uma escola, você agora está usado. Então você vai usar essas coisas aqui. Então, qual é a primeira coisa que vem primeiro? Então a primeira coisa vem em primeiro lugar. A segunda coisa que quero ser um pequeno atraso de tempo. Por isso, vou mudar-me. Desta vez, isso é realmente como atraso. Isto vai começar primeiro, isto vai começar em segundo. Esse verde, esse cara aqui vai se perder. Algo adicional está acontecendo que não precisamos, viu? Este grupo, nem sequer sabemos quem é este. Então, vamos apenas clicar nele e remover animação. Clique. Veja a suavidade da coisa. Então você vai apenas chegar com o protótipo super rapidamente e clicar no macho, próximo, altura e peso e decidir o peso e ele está carregando, e ele está dando outra célula. Está feito.
9. Acrescentando detalhes que surpreendem: Então, como podemos torná-lo mais interessante usando formas, cores? É por isso que eu invento este pequeno conceito de como
podemos começar a atividade em coisas como botão de jogo chato? Isso é funcionalmente bom, mas não é tão interessante. Então eu vou adicionar que aha momento acima como adicionar micro reação minúscula aqui. Então, como você pode fazer isso? Selecione uma camada específica, por exemplo, a seta. Eu vou mostrar, deslize para baixo. Então você selecionar as setas específicas e clique em, Criar componente. Como eu fiz antes, você pode realmente duplicar esta seta. Você vai mover esta flecha um pouco para baixo. Porque como eu disse antes, você move algo para baixo. Desta seta para aquela tela, a seta vai se mover para baixo. Então a parte secreta é o que vamos fazer. O engraçado é que vamos dizer, a partir desta seta, vá aqui automaticamente. A partir deste, vamos dizer, volte automaticamente. Posso mostrar-lhe aqui. Veja esses pequenos detalhes. Estes pequenos detalhes, se você começar a notar, você pode notar em todos os aplicativos, como um Lift ou Uber ou Google, G-mail cada software tem essa coisinha minúscula que chama nossa atenção, que eles querem que você para dar o foco. Então o que eu vou fazer é, se eu quiser começar com a atividade então eu vou apenas deslizar para baixo este cartão. Então, inicialmente, nós apenas fizemos um toque para fazer um teste. Mas depois disso, existem tantas funcionalidades interessantes. Uma coisa interessante que eu realmente amo é Drag Begin. Portanto, o recurso Arrastar Begin é, quando você arrasta para baixo. Então eu vou dizer um Drag Begins, e o Drag Begins deste específico como um card. Arrastar significa, arrastando e este cartão tinha que ser menor, quando o arrasto começa. Então foi o que eu disse, enquanto você está falando com alguém que você está dizendo e uma chatice, tinha que ser menor. Você pode ver como quando eu preciso de uma pequena interação em uma única tela, é chamada de micro-interação. Essas coisas que
criamos, não criamos entre telas. Criamos dentro da tela. Como esta flecha, esta seta está dentro da tela onde eles são é uma coisa pequena. Agora o que eu vou fazer é, dentro da tela, eu quero que isso seja maior e maior. Então eu seleciono este grupo, agrupo tudo, Criar componente e eu vou para Auto. Como eu disse antes, vou descer e aumentar a escala. Como eu disse, de coisa maior para coisa menor e menor para maior. Então será como ir e voltar ver. Para dar algo mais urgente. Está dizendo deslize para baixo para começar. Então eu vou deslizar para baixo. Começa a piscar, dá-me uma direcção de que precisas de começar agora. Então, quando eu fiz isso, nada está acontecendo porque nós não conectamos a próxima tela. Mas este funcionou perfeitamente. Eu clico, este está funcionando perfeitamente. Se você não seguir esses truques e dicas, será realmente levar muito tempo. Desde que seguimos todo o truque e sabemos, passei muitos anos descobrindo todos esses erros. Eu te contei tudo, então é super fácil para você. Uma vez que você começa a brincar com ele, é super fácil. Agora podemos rapidamente dar uma foto de toda a caminhada através super rapidamente. Eu vou fazer, Start. Então eu vou selecionar um sexo masculino, e então altura, então eu vou selecionar o peso 180 libras. Ao lado do peso é como 160, e ele está carregando e me dando exercício diferente. Agora, se eu deslizar para baixo e a atividade já começou e eu quiser fechá-la, é isso. Você já tinha um conceito e você fez o seu conceito realmente lindamente, feito em muito pouco tempo. Agora criamos todo o vídeo do aplicativo. O próximo passo é o mais importante. É compartilhar seu design e receber feedback real de um usuário real.
10. Compartilhando o design de seu aplicativo: Então, finalmente, conseguimos. Fizemos um aplicativo que tivemos uma idéia e apenas na nossa cabeça, nós apenas transformamos em vídeos em movimento ao vivo. Então agora é a parte mais importante. Você vai compartilhar seu design com as pessoas e super aberto sobre. Feedback, receber feedback é super importante. Design não é apenas fazer uma iteração final, isso vai ter como 10 iteração. Então você vai ser super aberto e fazer perguntas de tantas maneiras, como por que eles
gostam, o que eles sentem. Você vai fazer um monte de como sentir pergunta, e você vai apenas para cima mostrá-los, em vez de dizer-lhes,
bem, como é que o design bonito parece. Você tem que enquadrar uma pergunta da maneira que eles podem te dar um monte de críticos, e outro segundo ponto que é super importante é como, nós fizemos muita suposição enquanto fazemos design. Por exemplo, eu disse, as crianças adoram ver ilustração, as crianças adoram ver esse tipo de escala. Você precisa rastrear toda a suposição, qual é a suposição que você fez para si mesmo. Então, enquanto você está testando seu produto, você precisa se certificar de que todas as suposições estão certas ou erradas. Então você vai aprender continuamente, ok, eu fiz essa suposição, mas as crianças nem gostam disso. Eles não gostam de ilustração, eles só querem uma entrega. Então, ter os pensamentos abertos faz de você um designer seria torná-lo melhor. Em vez de apenas empurrar para cima, este projeto que eu fiz, você precisa desenvolvê-lo. Novamente, dizer que você gosta de estar aberto a feedback é super importante se você é um designer. Se você não abrir para feedback, e se alguém diz que este design é ruim, você quer aceitar isso e perguntar por que você acha que é ruim, como o que algo específico é ruim? Então, se você fizer tantas perguntas, haverá como apontar as coisas. Então, não, no entanto, como olhar para como aleatório como feedback vago. Estas cores parecem bonitas. Como se você tivesse que perguntar por que isso está bonito. O bom do princípio é que, uma vez que fizemos a animação, podemos gravá-la no próprio computador. Então há um botão de gravação aqui, há como um pequeno botão de vídeo e você clica nele, e eu vou ser como clique e eu vou selecionar Masculino, e em seguida, e eu vou selecionar a altura, seguida e eu vou para selecionar o peso, e eu vou selecionar o peso desejado que eu quero. Em seguida, ele está carregando continuamente, e está dando o resultado e eu vou deslizar para baixo e começar. Depois que a atividade terminar, eu termino. Então isso é literalmente, a coisa legal sobre isso como eles se divertem no vídeo, então você pode compartilhar em qualquer lugar, assinar janela, colocar um nome. Vou clicar em Salvar. Enquanto isso, está exportando, vou mostrar-lhe no Photoshop, que enquanto você está apresentando on-line, você tem que se certificar de como seu design vai parecer em diferentes dispositivos. Se você está projetando para iPhone X, eu vou mostrar como um modelo móvel rápido, onde você pode colocar seu vídeo dentro. Então, se você tiver o Adobe CC, você pode realmente colocar um vídeo na pilha do Photoshop. Então eu já fiz uma maquete, você pode baixar online, encontrar uma maquete. Então o que você vai fazer é clicar em Comando+O, é como abrir um novo arquivo, e eu vou abrir como um vídeo que fizemos agora. Em seguida, como super simples, você só vai clicar e arrastar aqui assim, e seu vídeo já está em. No Photoshop, se você quiser reduzir o vídeo, ele é super grande, e eu vou rapidamente clicar em Comando+T para transformá-lo e eu vou encolhê-lo, e eu vou me alinhar ao tamanho do celular. Então eu alinho corretamente, então tudo é perfeito, o vídeo está perfeitamente alinhado, e eu tenho uma camada que você pode mascarar para a forma do iPhone, como um entalhe. Então eu clique com o botão direito no vídeo. Então você precisa desagrupar primeiro porque você não pode colocar o grupo. Então eu vou desagrupar. Shift+Comando+G para desagrupá-lo, modo que o vídeo vai se tornar como uma camada, se você pode deslizar e ver os vídeos em execução ver. Agora o que você vai fazer é clicar com o botão direito sobre ele, Criar máscara de recorte, é isso. Veja, parece um celular real, como seus vídeos em um celular real. Como você vê os vídeos muito longos, todas as camadas abaixo que você precisa para se certificar de que ele também está correspondendo ao comprimento do vídeo. Então eu combinei tudo, você vê que tudo está funcionando perfeitamente, o vídeo está rodando, você está pronto, e agora você vai clicar nesses três pontos. Se você clicar em Renderizar vídeo, ele irá renderizar o vídeo. Já defini o Skillshare e defini o Skillshare com maquete. Então, é muito legal que você também pode carregar seu MP4 em como Skillshare. Então, se você apenas seguir o que eu disse agora, você pode colocar em sua própria maquete ou você pode selecionar seus próprios dispositivos, e apenas colocar dentro e enviar os recursos do Skillshare. A segunda coisa que quero compartilhar é compartilhar ideias com clientes. Então este aqui, é como uma demonstração, como um slide que eu fiz, e eu vou mostrar o protótipo que fizemos agora. A coisa legal do Keynote é que você só precisa ir lá e copiar este vídeo, copiar e ir para o Keynote e simplesmente colá-lo e redimensionar um pouco. Outra coisa secreta que aprendi recentemente é como se clicássemos na lista de objetos, vai aparecer como uma camada, como um esboço, e você vai arrastar esse vídeo para baixo. Vou anexar este arquivo Keynote para que você possa usar isso, como o celular acima que eu tenho é como um maquete. Então você pode usar essa maquete. Então, a maneira que você tem que apresentar com os clientes ou qualquer um é eu vou clicar em filme de inicialização automática. Então, quando você está apresentando com um cliente, você pode apenas dizer, “Oh, este é um vídeo que eu fiz”, você tem que dizer como, “Bem, qual é o problema que estamos tentando resolver? Como podemos incentivar crianças e adolescentes a se inscreverem no aplicativo de fitness que estão vendo pela primeira vez?” Então esse é o problema que temos. Podemos fazer isso usando três princípios de design. Pode ser fofo, divertido e emocionante. Então você vai mostrar como, oh, este é o conceito da versão 1 que eu tenho, a pesquisa, nós temos como uma ilustração fofa, e então você vai mostrar. Esta é a versão 2, e esta é a versão final. Esta versão nós pesquisamos com este muitos usuários, todos
eles gostam, e nós preferimos esta versão. É assim que devemos apresentar o seu trabalho, quando você está conversando com clientes, quando você está começando como um iniciante para se inscrever. O terceiro tem como, agora você está realmente assumindo que você está trabalhando em uma empresa como papel de tempo integral. O terceiro é como você vai se comunicar com os desenvolvedores sobre
o protótipo que você fez e apenas perguntando-lhes quais são as restrições técnicas que eles têm. Quanto tempo este tipo de interação vai levar, e também você pode pedir-lhes para testar, porque os desenvolvedores são como eles são designers diferentes, mas você pode pedir seus comentários sobre o que eles estão pensando. O diretor é super poderoso nisso. Então você só precisa ir para o arquivo principal e apenas clicar com o botão direito sobre ele, e se clicarmos em Compartilhar, Airdrop, ele mostra automaticamente o meu celular, e no meu celular eu já tenho um aplicativo principal que baixei da App Store. Então agora eu vou clicar nele, e ele automaticamente enviá-lo imediatamente eu abrir meu protótipo no meu telefone, e isso se parece exatamente como aplicativo. Ninguém pode diferenciar este é um aplicativo ou isso é como um protótipo. Então agora o que vamos fazer é como dar este protótipo ao meu engenheiro, ele vai apenas clicar no que eu estou clicando aqui. Por exemplo, aqui vou pedir-lhe para gostar, você vai preencher seus detalhes de perfil. Então eu só vou jogar pergunta em aberto, e ele vai apenas clicar onde ele quiser clicar. Você só precisa assistir silenciosamente o que está acontecendo. Você vai pedir a eles para continuamente dizer o que eles estão pensando em sua mente como, “Oh, eu pensei que isso vai ser aqui, mas é se comportar assim.” Depois que você gosta de iterar tanto, você agora sabe, como o ritmo que você criou, a música que você criou, e você pode sentir a diferença de como você está fazendo a diferença na vida das pessoas, e fazê-los felizes, tornando qualquer processo perfeito para qualquer pessoa usar. Obviamente, será experiência diferente, vez que é um aplicativo para crianças, fomos para como forma mais ilustração, se é centro de preço, vamos tentar algo diferente, mas você ainda vai lhe dar um toque pessoal. Isso é super importante. Se você pode realmente seguir o caminho que eu ensino para você, você descobre que você pode fazê-lo usando suas próprias idéias.
11. Considerações finais: Parabéns, finalmente fez depois que o aprendeu como chegar a uma idéia, como fazer sua idéia em como um quadro de arame, como fazer um claramente visualmente único. Também aprendemos como adicionar esse toque pessoal e emocional ao aplicativo. Mais importante ainda, você aprenderá como obter feedback de pessoas e continuar iterando sobre ele. Espero que você aprendeu um monte de coisas e um monte de coisas novas através desta série de vídeos, eu acredito que você vai continuar experimentando e vai compartilhar um monte de novas idéias loucas e
inovadoras em todo o mundo que estão assistindo este vídeo. Não se esqueça de postar todos os seus designs, e como qualquer desenho que você faça em uma galeria de projetos. Obrigado mais uma vez por fazeres esta aula. Estou super animado e curioso para ver o que você vai fazer.
12. Explore mais cursos no Skillshare:
Johny Vino, Specialized in Humanizing UX
