Adobe Experience Design Tricks, Tips e Técnicas

01 de 07

Adobe Experience Design Tricks, Tips e Técnicas

Cando Adobe presentou o Deseño de experiencia como unha vista previa pública , a compañía realizou dúas fazañas bastante sorprendentes ao mesmo tempo. En primeiro lugar, apostaron por un espazo no mercado de software de prototipado emerxente. En segundo lugar, crearon unha oportunidade para que os usuarios xoguen cun "traballo en progreso" e está deixando que os usuarios influencien ese progreso. Agora que a aplicación estivo dispoñible durante uns meses, pensei que sería un bo momento para compartir algúns trucos, consellos e técnicas de Experience Design.

Pero primeiro, pode estar se pregunta o que significa Prototyping Software. Entre os principais xogadores neste espazo están Proto.io, Principio, UXPin, Atomic.io , Deseño de experiencias e Invisión. A diferenza de aplicacións como Sketch 3, Photoshop e Illustrator onde se producen deseños estáticos, estes editores gráficos presentan interactividade, movemento e outras características comúns no espazo de deseño web e móbil.

Co auxe do móbil e o inevitable foco con láser sobre o usuario, xa non é suficiente para que un diseñador lance algúns bocetos, arrinque uns cantos comps e logo libere o proxecto ou o cargue nun servidor web. O fluxo de traballo IU / UX cambiou fundamentalmente as cousas. Cada paso do proceso, desde a identificación do usuario, bosquexos, filas, maquetas e prototipos agora están suxeitos a probas de usuario extensas.

É a última etapa - prototipos - onde os puntos de dor son descubertos e corrixidos antes de que o proxecto se mova á produción final. Aquí é onde a interactividade, o movemento, as transicións de pantalla e a colocación de todo na pantalla son tan críticos. Problemas e problemas non poden simplemente ser mostrados como unha imaxe estática ou explicados de forma verbal. Ao final, estes produtos son para seres humanos reais. En vez de mover todo iso ao código, o proceso de prototipado está a ser cada vez máis emprendido polo software de gráficos deseñado só para ese efecto. É máis fácil corrixir un erro, substituír unha imaxe, reescribir un texto, mover un botón e así por diante usando un editor visual que non hai que reescribir e eliminar o código de depuración.

De feito, este software converteuse nun compoñente clave no entorno de deseño e desenvolvemento "Rapid Prototyping" de hoxe.

Dito isto, imos divertirnos con Experience Design.

02 de 07

Crea un PIN de destino cun círculo sinxelo en Adobe Experience Design

Un aspecto asediado de XD é o uso de ferramentas de debuxo vectorial. Non se pode atopar un ícono? Sen problema. Pase o teu. Vexa como:

1. Seleccione a ferramenta Ellipse e, premendo coas teclas Opción / Alt-Maiús, debuxa un círculo.
2. Co círculo seleccionado, estableza a cor do recheo en FF0000 e o bordo en "none" nas propiedades.
3. Faga dobre clic no círculo para mostrar os puntos de ancoraxe. Arrastra a áncora inferior cara abaixo.
4. Faga dobre clic no punto de ancoraxe seleccionado e as curvas son substituídas por liñas.
5. Debuxe outro pequeno círculo cun recheo branco e sen stoke. Móvea á súa posición e seleccione o pin eo círculo. No panel Alinear na parte superior das Propiedades prema no botón Centro horizontal e créase o pin.

03 de 07

Crea un borrão de fondo no Adobe Experience Design

É común ter contido de texto ou outro sobre unha imaxe de fondo. O problema aquí é a imaxe, máis veces que non, domina o contido anterior. Unha forma de resolver este problema é borrar a imaxe de fondo. Podes borrar a imaxe en Photoshop ou outro software de edición de imaxes, pero isto é algo ineficaz, especialmente porque XD agora pode manexar esta tarefa para ti. Vexa como:

1. Crea unha imaxe nova e engade a túa imaxe de fondo.
2. Selecciona a ferramenta rectangular e debuxa un rectángulo sobre a imaxe. Co Rectángulo seleccionado, configure o Fill to White eo Stroke to None.
3. Co Rectángulo seleccionado, seleccione Fondo borroso no panel de propiedades. Os tres controis deslizantes son Blur Amount, Brightness and Opacity. Velaquí o que fan:

• Cantidade de borrão: axusta o borrão da imaxe debaixo da forma. O valor máximo é +50.
• Brillo: axusta os destaques e sombras na imaxe. O valor mínimo é -50 eo valor máximo é +50.
• Opacidade: Afecta a transparencia da forma e a visibilidade da imaxe baixo a forma. Os valores varían do 0% ao 100%.

Se realmente quere "cambiar as cousas", cambie a cor da forma e xogue co valor de Opacidade para cambiar o "aspecto" da imaxe.

04 de 07

Crea un Scrim no Adobe Experience Design

Un problema de deseño común é que os elementos de elementos da interface deben ser unha cor común pero que se perden cando se colocan sobre unha imaxe de fondo ou cor sólida. A solución é un golpe. Un scrim é un gradiente un tanto opaco colocado entre o elemento da interface eo fondo. Isto é fácil de realizar en XD. Vexa como:

1. Crea o teu cadro artístico en XD, engada unha imaxe e copia e pega os elementos da interface desde o Kit da interface de usuario axeitado - Ficheiro> Abrir IU Kit ... - dentro do taboleiro. Na imaxe superior a foto fai que a barra de estado ea barra de aplicacións sexa difícil de ver.
2. Seleccione a ferramenta rectangular e elimine un rectángulo. No Panel de Propiedades, seleccione Encher e seleccione Gradiente desde o menú emerxente no selector de cores. Establece as cores de degradado en branco e negro. Establece o valor A - Opacidade- a 60% e o valor A branco a 0%.
3. Co Rectángulo seleccionado, seleccione Obxecto> Organizar> Enviar cara atrás . Os elementos da interface agora están visibles sobre a imaxe.

05 de 07

Crea unha imaxe Avatar en Adobe Experience Design

Un patrón de deseño común atópase en aplicacións de conversa nas que as persoas falan entre si e a imaxe do altofalante aparece na pantalla. Estes avatares adoitan ser imaxes que foron enmascaradas. É morto sinxelo lograr isto en XD. Vexa como:

1. Comezar cunha imaxe e un círculo ou outra forma no cadro artístico. Pode encher o círculo con calquera cor. O que non tes que facer é engadir unha cor de trazo. Desaparecerá cando crees o efecto, por que motivo. Se necesitas escoitar o círculo, copia-lo para o portapapeis.
2. Mova o círculo cara á imaxe e selecciona a imaxe e o círculo. Cos obxectos bot seleccionados, seleccione Obxecto> Máscara con forma . Cando solta o rato, o Avatar créase. A partir de aí pode redimensiona.
3. Se precisa engadir un accidente vascular cerebral, pegue o círculo sentado no portapapeis no cadro artístico. Coa copia seleccionada desactiva o recheo das propiedades e engade unha cor e ancho de trazo. Para aliñalos, selecciona os dous obxectos e fai clic nos botóns Centro Aliñar nas opcións Aliñar na parte superior do panel de propiedades.
4. Se queres mover a foto na máscara, fai dobre clic na máscara. Isto mostrará a imaxe ea forma da máscara. Fai clic na imaxe e arrástrea á súa posición. Cando solte o rato, a imaxe estará na súa nova posición dentro da máscara.

06 de 07

Xogar con Adobe Experience Design Artboards

Os artboards de Deseño de Experiencia non están só alí para que poidas poñer contido. Eles tamén poden ser manipulados. Aquí tes algunhas cousas que podes facer:

1. Se necesitas versións de paisaxe e retrato dun cadro artístico, duplica o taboleiro e, co duplicado seleccionado, fai clic no botón de paisaxe no panel Propiedades. A Artboard cambiará a orientación da paisaxe. Se o Artboard ten contido nel, fai clic no nome de Artboard e as propiedades de Artboard aparecerán no Panel de Propiedades.
2. Para engadir unha cor personalizada á Artboard e ao proxecto para este asunto, seleccione a opción Artboard e faga clic no campo Fill color chip na sección Aparencia do Panel de propiedades. Introduza o valor hexadecimal para a cor e faga clic no signo +. A cor engadirase como unha cor personalizada. Para aplicar esa cor noutro lugar, seleccione un obxecto e faga clic no chip de cor personalizada para aplicar a cor.
3. Os artboards pódense facer verticalmente deslizables. Para facelo, seleccione o cadro artístico e mude o seu auxe nos paneis de propiedades ou arrastrando cara abaixo o fondo do taboleiro. Na área Deslizante do panel de propiedades, seleccione vertical desde o menú emerxente e insira o alto da xanela para a pantalla. Esa liña de fondo azul mostra a parte inferior da xanela. Para probalo, faga clic no botón Reproducir e desprácese. Para desactivar o desprazamento, seleccione Ningunha no menú desprazábel.

07 de 07

Edite un kit de IU móbil na Adobe Experience Design

Experience Design contén un Kit de IU para desenvolver iOS, Android e Windows UI. Cando o abra por primeira vez, podes pensar que están ben preparados. Non obstante, cada un dos bits e pezas nestes kits é totalmente editable. Descubrímoslo construíndo un wireframe de Android.

1. Comezar seleccionando a ferramenta Artboard e seleccionando Android Mobile na sección de Google do Panel de Propiedades .
2. Seleccione Arquivo> Abrir o Kit de IU> Material de Google . Isto abre o kit de IU de deseño de materiais. Selecciona a lupa e marquee o Guías de pantalla artboard . Gústame comezar con este porque me dá as guías para a correcta colocación en pantalla dos elementos da interface. Se preme nunha das barras azuis, verá que está bloqueado. Fai clic no bloqueo unido a cada un deles para desbloquealo . Marquee o panel artístico e copia a selección no portarretallos. Regrese ao documento e pegue a pantalla no seu cadro artístico.
3. Fai clic unha vez na barra de aplicacións que aparece na parte superior da caixa de ferramentas. Observe como pode seleccionalo. Seleccione Obxecto> Organizar> Traer á fronte. A túa selección está agora arriba das Guías de Pantalla. Isto debería dicir que cada un dos elementos na pantalla pode ser editado.
4. Faga dobre clic na barra de estado na parte superior e, no panel Propiedades e a cor do recheo a 455A64 . Fai dobre clic na barra de aplicacións e configure o seu recheo en 607D8B. Isto debería dicir que cada elemento dun kit de IU pode ser editado para atender ás especificacións de cores do proxecto.
5. E sobre os íconos? Vexa como cambiar a súa cor. Dobre clic no corazón para seleccionalo. Se observas o Panel de Propiedades, podes supoñer que non podes editar a selección. Non completamente. Dobre clic no corazón outra vez . As Propiedades abertas e cambias a cor do recheo a FF0000. Repita este truco de dobre clic nun dobre clic nas iconas restantes e no texto.