Melhore seu fluxo de trabalho de design de UX: esboce uma interface para seu aplicativo móvel

1. Introdução: quando você tem uma ideia de aplicativo ou um recurso para tentar explicá-lo, sua equipe para clientes ou até mesmo seus amigos. Todo mundo terá uma imagem diferente em sua imaginação fora de sua idéia, e às vezes isso pode levar a mal-entendidos, e custa algum tempo e esforço para entregar A idéia que você tem em mente esboçar é uma parte fundamental do X processo de designer e Mr Practice. Para designers, há esboços que você pode propor explorados e comunicar suas idéias nos estágios iniciais fora do processo de designer. Meu nome é Dimas Data e um, um designer de UX e diferente e desenvolvimento, e eu vou guiá-lo através desta classe, desde esboçar formas básicas até interações de esboços e navegação. Você não pode desenhar. Isso é bom. Você não tem que ser um artista. Imex pega boas ideias. No final desta classe, você será capaz de esboçar interfaces de usuário para o seu aplicativo Para a classe de projeto, você estará esboçando uma interface de usuário simples para um aplicativo móvel em mensagens para esboçar um aplicativo de entrega de alimentos para os seus restaurantes favoritos. Você pode saber mais sobre o projeto na seção do projeto 2. Por que esboço: Então, por que fazer um esboço? Vamos dar uma olhada neste exemplo. Estes são alguns esboços que eu fiz para o meu valor porta do site, e como você pode vê-lo, apenas tela contém um componentes ou idéias específicas. Então, basicamente, eu uso o esboço para gerar ideias antes de começar as etapas de design e desenvolvimento que você pode anotar os recursos são os componentes de cada esboço em lançar quantas idéias quiser . Então aqui estava eu gerando ideias. Eu conheci diferentes esboços para cada página para escolher o melhor design entre eles e aplicá-lo. Você pode usar os esboços para sessões de brainstorming com sua equipe para gerar ideias são propostas e comunicar idéias com seus clientes. Agora vamos falar sobre as ferramentas que você precisa nesta aula. Basicamente, precisamos de uma caneta. Eu deveria ter uma multa. As linhas são este piloto gêmeo? Como você pode usar um lápis? Usaremos microfones também. Aplique alguma cor para botões ou fez sua atenção para elementos específicos. A segunda coisa, nós comigo, alguns papéis. Às vezes eu esboço no meu indiscutível caderno de esboços, mas nesta aula, vou usar para planar um papel de quatro que você pode usar o papel pontilhado que eu forneci na seção de material da classe . Eu também incluí alguns modelos. Você pode trazê-los para fora e usá-los para esboçar. Eles são muito úteis, e nós vamos economizar seu tempo e ajudar Pedro compartilhar com mais precisão. Vamos usar algumas notas pegajosas em para interações nos próximos óculos. 3. Esboço de formas básicas: Vamos começar esboçando as formas básicas em que cada design consiste. Vou me aquecer fazendo algumas linhas retas. Vamos fazer um esboço, as bordas ou as linhas de construção de uma tela de bola. Como você pode ver, eu estou jogando declínios, e eles não precisam ser perfeitos. Considere mover o braço e a caneta com o ombro em vez de com os Orestes disponíveis . Isso permitirá que você não faça mais linhas retas. Se você tiver uma dificuldade durante uma linha reta em todas as direções, proteja o papel para desenhar facilmente uma linha na direção que você encontrará o melhor para você. Você tem que ter em mente que os esboços devem ser rápidos e simples, já que estamos fazendo tudo idéias ou conceitos. Agora, vamos jogar alguns círculos. Desenhar círculos é mais complicado. Eu recomendei jogar o círculo duas ou três vezes no ar antes de jogá-lo no papel. Pratique, pratique e pratique jogando essas linhas e círculos. Se você quiser fazer um elemento que parece clicável como um botão, você pode dar-lhe alguma sombra para fazê-lo se destacar. Vamos jogar um botão que permanece enviar e dar-lhe a sombra que você pode usar uma grande cor em vez de preto. Como você pode ver, ele se destaca e parece um clicável. Vamos jogar outro botão, e ele vai dizer submissões, dê a ele a sombra e acerte o ego. Destaca-se e explicável. A eclosão é outra técnica usada para criar efeitos de resfriamento desenhando linhas bem espaçadas . Vamos dar um exemplo que eu vou deixar de lado, que significa que se sobrepõe no topo do menu. Eu adicionaria alguns itens dentro do dinheiro lateral. Vamos desenhar uma linha reta que sua garrafa no menu lateral e, em seguida, começou a jogar uma resposta rápida as linhas agonais lado a lado para criar o efeito derramamento. Então, como você pode ver, eclosão é uma técnica simples que ajuda a fazer elemento para se destacar. 4. Esboço de interface de inos: nesta lição, eu vou mostrar-lhe como esboçar você I elementos como textos, imagens, imagens, controles estrangeiros e alguns fora dos ícones comumente usados. Então vamos começar jogando na minha tela. Esboçar fixo é bastante simples, apenas que há alguns que é internalizado para representar um texto. Você pode usar o texto real dentro de você. Por que, quando você precisa chamar a atenção para ele, ou apenas um pouco linhas horizontais Se você não tem um texto específico, às vezes nós para a prisão textos como uma linha ondulada ou é exatamente assim. Agora, se você quiser esboçar rumo a um título, você pode fazer isso desenhando o ângulo correto e preenchê-lo com uma linha em ziguezague. Ou você pode simplesmente usar um marcador para preencher o retângulo. Não, vamos fazer um esboço. Eu apenas desenhava um retângulo, e então eu jogava para as linhas agonais que atravessavam o retângulo. Vamos fazer um esboço mais algumas imagens, às vezes esboçando imagens, e desta forma poderia ser chato para que você possa jogar variantes simples de objetos. Por exemplo, eu representaria imagens jogando montanhas e areia no topo. Os formulários são usados para coletar informações dos usuários. Nós os usamos e as páginas de registro atualizando usam sua influência e assim por diante. Vou desenhá-los na tela. E antes de começar a esboçar, eu só adicionava o título da página para que quando eu tivesse uma série de outros esboços, eu pudesse facilmente encontrá-lo. Você pode deixar um pouco de espaço para outro título em outras notas, como a data, então eu vou começar desenhando um círculo. Isso indicaria que o usuário pode clicar nele para atualizar sua imagem de perfil. Então eu desenharia um retângulo. Isso representaria um campo de entrada que o usuário pode sentir. Vou dar-lhe um espaço reservado que diga o nome dele. Não é isso, ao contrário dos botões, não lhe demos uma sombra. Os campos de entrada podem ser usados para preencher informações como nome para número e senha. Agora vou desenhar outro retângulo para o usuário. É como a área de várias áreas. Então o que vamos fazer é desenhar em auto como este. Esta carta indicará que este é um menu suspenso que tem vários itens para selecionar de Vamos lançar outro campo, defender o endereço do usuário. O endereço pode conter Building Number Street Name outra informação que exigiu um controle um pouco maior do que o campo de entrada, que é uma área de texto. Agora vou mostrar a vocês como desenhar outros países estrangeiros, como caixas de seleção, como caixas de seleção opção e botões de alternância. As caixas de seleção são simples. Apenas um tengan dramático no pequeno carrapato dentro. Assim. Caixas de seleção argumenta que usar vários itens para não desenhar um botão de opção desenhou um círculo, em seguida, outro pequeno círculo dentro dele. Botões de opção argumenta que mostra apenas um item. Agora, se você quiser ligar e desligar opção você pode alternar botões, por exemplo, por exemplo, fez grandes notificações ligado ou desligado. Apresentamos assim em forma oval no círculo. Dentro dele você pode representá-lo como este retângulo e outro pequeno retângulo dentro. Você pode escrever nele. Vou dar-lhe um pouco de cor. Vou desenhar outro para mostrar aos estados do escritório. Agora vamos ao fundo. É um cofre e dá um pouco de cor. E a sombra. Agora temos um bipado sobre os detalhes do usuário da morte. Agora eu vou mostrar a vocês como desenhar alguns dos ícones comumente usados. Os ícones são simples. As representações de objetos da vida real. Vou começar fazendo o campo de busca. Então aqui está o ícone de pesquisa. É só um círculo na linha curta. Isso é o que eles fazem. Outro, um círculo. E então eu gostaria. É bem simples. O próximo ícone que vamos desenhar é o usuário caminhante, então eu estou apenas para jogar um círculo. No interior. Haverá um círculo menor que representa a dica, em seguida, retirou linhas representam um corpo. Vamos lá com mais algumas vezes pit e o corpo. Agora vamos pegar a estrada. O ícone de localização. Basta jogar uma forma de balão em um pequeno círculo dentro. Assim como este. Não Não jogue o ícone que é usado para abrir o menu lateral. Este ícone na escola chama-se Humber Good Menu, porque parece hambúrguer nele. Basta lutar para três linhas horizontais paralelas. Por último, vamos crescer de novo em cima e para baixo ícones como este. Então, como você pode ver tudo no ano I esboços, incluindo ícones, é apenas uma combinação fora de linhas e círculos 5. Esboço de interações: Às vezes, você pode querer usar elementos de interação, como dicas de ferramentas , modelos, menus laterais ou outros elementos, mas você não deseja redesenhar a tela inteira. Para isso, usaremos notas pegajosas ou pequenos papéis e canetas. Se você quiser fixá-lo em um quadro de pinos. Sim, usarei cores e tamanhos diferentes para representar diferentes tipos de elementos. Vamos fazer um retrato requisitando arremesso. Vou escrever o título aqui. A primeira coisa que teremos é uma imagem fora da refeição, depois seu nome. Tem que ser bom, por exemplo. Em seguida, teremos um menu suspenso para o usuário selecionar o molho. Eles querem agir para o trabalhador. Vou usar esta nota adesiva para escrever as possíveis opções de fonte. Por exemplo, não molho de tomate, nosso molho especial. Agora, isso indica que quando o usuário clica no botão suspenso, essas opções serão exibidas. Então, quando você quiser explicar o que clicar em certos elementos irá acionar, você pode usar esse método. A próxima coisa que teremos nesta tela é uma área de texto para adicionar notas, e uma informação. Eu posso Ok, então quando o usuário clica nele em tudo, eles serão exibidos. Eu vou usar. Este é menor, pegajoso, observa Andre. As informações serão exibidas, por exemplo, não porque isso teria que o usuário saber qual nariz inserir na área de texto. Agora teremos um botão para ordenar esta reunião. Vou dar-lhe a cor e a sombra. Clicar neste botão irá mostrar uma mensagem ou uma mensagem sexista. Recebi uma mensagem de erro sobre ele será exibido como um moderno ou um pop-up na tela para a mensagem de sucesso. Eu realmente era uma nota verde pegajosa. Ele contém um título, algum texto e o botão para visualizar as devoluções do pedido. Então, no caso de sexistas, isso deve, como você será exibido agora para a mensagem. Vou usar este Karanja notas pegajosas. É com Conter um Titã, algum texto e detalhes da entrevista sobre esta área. Portanto, este método será útil na geração de ideias e sessões de brainstorming, ou quando você quiser explicar lógica e comportamento para os desenvolvedores em sua equipe. Não, vou te mostrar como explicar ações. Então por que eles o usam, como um clique deslizando, ampliando e diminuindo. Vamos dar um exemplo. Este é o peixe de guarda e contém os itens que o usuário deseja encomendar no botão que tem algum texto. Ele o registrou. O cartão contém uma imagem e o texto que é, e quando o usuário desliza o item para a esquerda, um botão ficará visível. Vamos fazer um ícone. Ele moveu o ícone? Quando o usuário clica nele, o item será removido do tribunal. Agora eu iria jogar uma mão andan auto para mostrar a direção deslizante, então quando eles usá-lo, é mentira. O item à esquerda. O botão Remover ficará visível. Vamos em frente e fazer outra mão. Isso representa uma pressão longa. Agora vamos vomitar. E desta vez vou demonstrar o zoom em ação novamente. Eu ficava fora de controle, em seguida, dois outros estava apontando e contrastando direções como este. Isso explicará o zoom em ação no mapa. Se você encontrá-lo jogando latas desafiador, você pode rastrear ou copiar imagem mão. Ou você pode escrever anotações para explicar comportamento ou gestos. A última coisa que vou mostrar nesta lição é como esboçar navegações. Vamos dar um exemplo que é esta é uma página de menu de restaurante nele. Contém significa que cada média neste menu tem uma imagem, um nome em seu preço. Quando eu clico em uma refeição, Eu seria direcionado para outra página que contém muitos detalhes, como imagem, nome, descrição, talvez um número de outras imagens deste botão Onda significa para encomendá-lo. Então, para mostrar a navegação, eu vou desenhar em auto e dar-lhe a sombra. Não só que esta foto não seja parte da U I. É apenas um indicador para mostrar navegação. 6. Obrigado: Obrigado pessoal, e espero que tenham gostado desta aula. Se você tiver alguma dúvida ou pensamento, por favor me avise na seção de revisão sobre. Lembre-se que esboçar é sobre tirar ideias. É a maneira mais rápida de explorar e compartilhar pensamentos com outras pessoas e receber feedback. Eu adoraria ver sua idéia começando a esboçar. Se você precisar de ajuda para criar seu projeto, você pode assistir os vídeos anteriores e tomar notas, e, portanto, você pode usar os documentos do forno de impressão anexado para um pouco mais de ajuda. Tire fotos do seu processo e compartilhe-o em seu projeto para inspirar outras pessoas e obter feedback.