Dicas, truques e técnicas do Adobe Experience Design
Quando a Adobe introduziu o Experience Design como uma visualização pública, a empresa realizou dois talentos bastante surpreendentes ao mesmo tempo. Primeiro, eles criaram um espaço no emergente mercado de software de prototipagem. Segundo, eles criaram uma oportunidade para os usuários jogarem com um "trabalho em andamento" e permitir que os usuários influenciassem esse progresso. Agora que o aplicativo está disponível há alguns meses, achei que seria um bom momento para compartilhar alguns truques, dicas e técnicas do Experience Design.
Mas primeiro, você pode estar se perguntando o que significa Prototyping Software. Entre os principais intervenientes neste espaço estão o Proto.io, o Principio, o UXPin, o Atomic.io, o Experience Design e o InVision. Ao contrário de aplicativos como o Sketch 3, o Photoshop e o Illustrator, onde os designs estáticos são produzidos, esses editores gráficos apresentam interatividade, movimento e outros recursos comuns no espaço para dispositivos móveis e web da atualidade.
Com a ascensão do celular e o inevitável foco no usuário, como o laser, não é mais suficiente para um projetista criar alguns esboços, reunir algumas composições e, em seguida, liberar o projeto ou enviá-lo para um servidor da web. O fluxo de trabalho UI / UX mudou fundamentalmente as coisas. Cada etapa do processo, desde a identificação do usuário, esboços, wireframes, protótipos e protótipos, está agora sujeita a extensos testes com usuários.
É esse último estágio - prototipagem - onde os pontos de dor são descobertos e corrigidos antes que o projeto passe para a produção final. É onde a interatividade, movimento, transições de tela e colocação de tudo na tela são tão importantes. Problemas e problemas não podem ser simplesmente mostrados como uma imagem estática ou explicados verbalmente. Afinal, esses produtos são para seres humanos reais. Em vez de mover tudo isso para o código, o processo de prototipagem está sendo cada vez mais realizado por um software gráfico projetado apenas para essa finalidade. É mais fácil consertar um erro, substituir uma imagem, reescrever algum texto, mover um botão e assim por diante, usando um editor visual, do que constantemente reescrevendo e depurando código.
Na verdade, esse software se tornou um componente-chave no ambiente de design e desenvolvimento de "prototipagem rápida" de hoje.
Com isso dito, vamos nos divertir com o Experience Design.
02 de 07Crie um pino de destino com um círculo simples no Adobe Experience Design
Um aspecto interessante do XD é o uso de ferramentas de desenho vetorial. Não consegue encontrar um ícone? Sem problemas. Role o seu próprio. Veja como:
- Selecione A ferramenta elipse e, com as teclas Option / Alt-Shift pressionadas, desenhe um círculo.
- Com o círculo selecionado, defina Preencha cor para FF0000 e a fronteira para "nenhum" nas propriedades.
- Clique duas vezes no círculo para mostrar os pontos de ancoragem. Arraste a âncora inferior para baixo.
- Clique duas vezes no ponto de ancoragem selecionado e as curvas são substituídas por linhas.
- Desenhe outro círculo pequeno com um preenchimento branco e sem stoke. Mova-o para a posição e selecione o pino e o círculo. No painel Alinhar na parte superior das Propriedades, clique no botão Centro Horizontal e o Pino é criado.
Crie um desfoque de fundo no Adobe Experience Design
É comum ter texto ou outro conteúdo sobre uma imagem de plano de fundo. O problema aqui é que a imagem, mais frequentemente do que não, domina o conteúdo acima dela. Uma maneira de resolver esse problema é desfocar a imagem de fundo. Você pode desfocar a imagem no Photoshop ou em outro software de edição de imagens, mas isso é um pouco ineficiente, especialmente porque o XD agora pode lidar com essa tarefa para você. Veja como:
- Crie uma nova prancheta e adicione sua imagem de plano de fundo.
- Selecione a ferramenta Retângulo and desenhar um retângulo sobre a imagem. Com o retângulo selecionado, defina o preenchimento como branco e o traçado como Nenhum.
- Com o retângulo selecionado, selecione Desfoque de fundo no painel de propriedades. Os três sliders são Blur Amount, Brightness e Opacity. Veja o que eles fazem:
- Quantidade de desfoque: Ajusta o desfoque da imagem abaixo da forma. O valor máximo é +50.
- Brilho: Ajusta os realces e sombras na imagem. O valor mínimo é -50 e o valor máximo é +50.
- Opacidade: Afeta a transparência da forma e a visibilidade da imagem sob a forma. Os valores variam de 0% a 100%.
Se você realmente quiser “mudar as coisas”, mude a cor da forma e brinque com o valor Opacity para mudar a “aparência” da imagem.
04 de 07Crie um Scrim no Adobe Experience Design
Um problema de design comum é que os elementos dos elementos da interface têm que ser uma cor comum, mas são perdidos quando colocados sobre uma imagem de plano de fundo ou cor sólida. A solução é um scrim. Um scrim é um gradiente um pouco opaco colocado entre o elemento da interface e o plano de fundo. Isso é fácil de realizar no XD. Veja como:
- Crie sua prancheta no XD, adicione uma imagem e copie e cole os elementos da interface Kit de interface do usuário - Arquivo> Abrir kit de interface do usuário … - na prancheta. Na imagem acima, a foto torna a barra de status e a Barra de aplicativos difíceis de ver.
- Selecione a ferramenta Retângulo e desenhe um retângulo. No Painel de Propriedades, selecione Preencher e selecione Gradiente no menu suspenso no Seletor de Cores. Defina as cores do gradiente para preto e branco. Defina o valor A - Opacidade - para 60% e a Branco Um valor para 0%.
- Com o retângulo selecionado, selecione Objeto> Organizar> Enviar para trás. Os elementos da interface agora são visíveis sobre a imagem.
Criar um avatar de imagem no Adobe Experience Design
Um padrão de design comum é encontrado em aplicativos de bate-papo em que as pessoas conversam entre si e a imagem do falante é exibida na tela. Esses avatares geralmente são imagens que foram mascaradas. É simples fazer isso em XD. Veja como:
- Você começa com uma imagem e um círculo ou outra forma na prancheta. Você pode preencher o círculo com qualquer cor. O que você não precisa fazer é adicionar uma cor de traço. Ele irá desaparecer quando você criar o efeito, então por que se preocupar? Se você precisar carregar o círculo, copie-o para a área de transferência.
- Mova o círculo para a imagem e selecione a imagem e o círculo. Com os objetos bot selecionados, selecione Objeto> Máscara com Forma. Quando você solta o mouse, o Avatar é criado. De lá você pode redimensioná-lo.
- Se você precisar adicionar um traço, cole o círculo na sua prancheta na prancheta. Com a cópia selecionada, desative o preenchimento nas Propriedades e adicione uma cor e largura do traço. Para alinhá-los, selecione os dois objetos e clique nos botões Centralizar Alinhar nas opções Alinhar na parte superior do painel de propriedades.
- Se você quiser mover a foto ao redor da máscara, clique duas vezes na máscara. Isso mostrará a imagem e a forma da máscara. Clique na imagem e arraste-a para a posição. Quando você soltar o mouse, a imagem estará em sua nova posição dentro da máscara.
Jogar com o Adobe Experience Design Artboards
As pranchetas do Experience Design não estão lá apenas para você colocar o conteúdo. Eles também podem ser manipulados. Aqui estão algumas coisas que você pode fazer:
- Se você precisar das versões Paisagem e Retrato de uma prancheta, duplique a prancheta e, com a duplicata selecionada, clique no botão paisagem no painel Propriedades. A prancheta mudará para orientação paisagem. Se o Artboard tiver conteúdo, clique no nome do Artboard e as propriedades do Artboard aparecerão no Painel de propriedades.
- Para adicionar uma cor personalizada ao Artboard e ao projeto, selecione o Artboard e clique no chip Cor de preenchimento na seção Aparência do Painel de propriedades. Digite o valor hexadecimal da cor e clique no sinal +. A cor será adicionada como uma cor personalizada. Para aplicar essa cor em outro lugar, selecione um objeto e clique no chip de cor personalizada para aplicar a cor.
- As pranchetas podem ser feitas verticalmente roláveis. Para fazer isso, selecione a prancheta e altere sua altura nos Painéis de Propriedades ou arraste a parte inferior da prancheta para baixo. Na área Rolável do painel de propriedades, selecione vertical no menu pop-up e insira a altura da janela de visualização da tela. Essa linha azul tracejada mostra a parte inferior da viewport. Para testá-lo, clique no botão Reproduzir e desça. Para desativar a rolagem, selecione Nenhum no menu suspenso Rolagem.
Editar um kit de interface do usuário para dispositivos móveis no Adobe Experience Design
O Experience Design contém um kit de interface do usuário para desenvolvimento de interface do usuário do iOS, Android e Windows. Quando você abri-los pela primeira vez, você pode pensar que eles são muito bem definidos no lugar. Não é bem assim - cada um dos fragmentos desses kits é totalmente editável. Vamos descobrir criando um wireframe para Android.
- Você começa selecionando a ferramenta Artboard e selecionando Android Mobile na seção do Google do painel "Propriedades".
- Selecione Arquivo> Abrir kit de interface do usuário> Google Material. Isso abre o Kit de interface do usuário do Material Design. Selecione a Lupa e marquise tele guia de tela. Eu gosto de começar com este porque me dá os guias para o posicionamento adequado na tela dos elementos da interface. Se você clicar em uma das barras azuis, verá que ela está bloqueada. Clique no cadeado anexado a cada um deles para desbloqueá-lo. Marque a prancheta e copie a seleção para a área de transferência. Volte ao seu documento e cole a tela na sua prancheta.
- Clique uma vez na barra de aplicativos na parte superior da prancheta. Observe como você pode selecioná-lo. DetalhesSelecione Objeto> Organizar> Trazer para frente. Sua seleção está agora acima dos Guias de tela. Isso deve dizer a você que cada um dos elementos na tela pode ser editado.
- Clique duas vezes na barra de status na parte superior e, no Painel de Propriedades set a cor de preenchimento para 455A64. Clique duas vezes na barra de aplicativos e defina seu preenchimento como 607D8B. Isso deve informar que cada elemento de um kit de interface do usuário pode ser editado para atender às especificações de cores do projeto.
- E os ícones? Veja como mudar a cor deles. Clique duas vezes no coração para selecioná-lo. Se você olhar no Painel de propriedades, poderá presumir que não pode editar a seleção. Não é bem assim. Clique duas vezes no coração mais uma vez. As propriedades abrem e você alterar a cor de preenchimento para FF0000. Repita este truque de duplo clique duplo para os ícones restantes e o texto.
