Trucs, consells i tècniques de disseny d'Adobe Experience Design

01 de 07

Trucs, consells i tècniques de disseny d'Adobe Experience Design

Quan Adobe va introduir Experience Design com una vista prèvia pública , la companyia va aconseguir dues fites força sorprenents al mateix temps. En primer lloc, van apostar per un espai en el mercat emergent de programari de prototipatge. En segon lloc, van crear una oportunitat perquè els usuaris juguin amb un "treball en progrés" i deixin que els usuaris influenciïn aquest progrés. Ara que l'aplicació ha estat disponible durant uns mesos, vaig pensar que seria un bon moment per compartir alguns trucs, consells i tècniques de Experience Design.

Però primer, podeu preguntar-se què significa el programari de prototipatge. Entre els principals actors d'aquest espai es troben Proto.io, Principi, UXPin, Atomic.io , Disseny d'experiències i Invisió. A diferència d'aplicacions com Sketch 3, Photoshop i Illustrator on es produeixen dissenys estàtics, aquests editors gràfics introdueixen interactivitat, moviment i altres característiques comuns en l'espai de disseny de mòbils i web actual.

Amb l'auge del mòbil i el focus inevitable del làser a l'usuari, ja no és suficient per a que un dissenyador pugui treure uns quants esbossos, reunir uns pocs compassos i després alliberar el projecte o carregar-lo a un servidor web. El flux de treball UI / UX ha canviat fonamentalment les coses. Tots els passos del procés, des de la identificació de l'usuari, esbossos, trets, maquetes i prototips, ara estan subjectes a proves d'usuari extensives.

És la darrera etapa - prototipat - on es descobreixen i es resolen els punts de dolor abans que el projecte passi a la producció final. Aquí és tan important la interactivitat, el moviment, la transició de la pantalla i la col·locació de tot a la pantalla. Els problemes i els problemes no es poden mostrar simplement com una imatge estàtica o explicats verbalment. Després de tot, aquests productes són per a éssers humans. En comptes de moure tot això per al codi, el procés de prototipatge cada cop està sent emprès per programari de gràfics dissenyat amb aquest propòsit. És més fàcil solucionar un error, reemplaçar una imatge, reescriure un text, moure un botó i així successivament utilitzant un editor visual que no oblideu reescriure i eliminar el codi constantment.

De fet, aquest programari s'ha convertit en un component clau en l'entorn de disseny i desenvolupament "Rapid Prototyping" actual.

Amb això, anem a divertir-nos amb Experience Design.

02 de 07

Crea un PIN de destinació amb un cercle senzill en Adobe Experience Design

Un aspecte net de XD és l'ús d'eines de dibuix vectorial. No trobeu una icona? No hi ha problema. Feu el vostre compte. A continuació s'explica com:

1. Seleccioneu l' eina Ellipse i, amb les tecles Opció / Alt-Maj, prem un cercle.
2. Amb el cercle seleccionat, estableixi el color de farcit a FF0000 i la vora a "cap" a les propietats.
3. Feu doble clic al cercle per mostrar els punts d'ancoratge. Arrossegueu l'àncora inferior cap avall.
4. Feu doble clic al punt d'ancoratge seleccionat i les corbes es reemplacen per línies.
5. Dibuixa un petit cercle amb un farcit blanc i no hi ha cap estoc. Mou-la a la posició i selecciona el pin i el cercle. Al panell Alinear, a la part superior de les Propietats, feu clic al botó Centre horitzontal i es crea Pin.

03 de 07

Creeu un borrós de fons a Adobe Experience Design

És comú tenir text o un altre contingut sobre una imatge de fons. El problema aquí és que la imatge, amb més freqüència, supera el contingut que hi ha a sobre. Una manera de resoldre aquest problema és desenfocar la imatge de fons. Podeu desenfocar la imatge en Photoshop o un altre programari d'edició d'imatges, però això és una mica ineficient, especialment perquè XD ara pot gestionar aquesta tasca. A continuació s'explica com:

1. Crea una nova taula d'art i afegeix la teva imatge de fons.
2. Seleccioneu l'eina rectangular a dibuixar un rectangle sobre la imatge. Amb el rectangle seleccionat, estableixi el farcit a blanc i el traç a cap.
3. Amb el rectangle seleccionat, seleccioneu Desenfocament de fons al panell de propietats. Els tres barres de desplaçament són Quantitat de desenfocament, brillantor i opacitat. A continuació us indiquem què fan:

• Amortiment de desenfocament: Ajusta el desenfocament de la imatge sota la forma. El valor màxim és de +50.
• Brillantor: Ajusta els aspectes més destacats i les ombres a la imatge. El valor mínim és -50 i el valor màxim és +50.
• Opacitat: afecta la transparència de la forma i la visibilitat de la imatge sota la forma. Els valors oscil·len entre el 0% i el 100%.

Si realment voleu "canviar les coses", canvieu el color de la forma i reproduïu amb el valor d'Opacitat per canviar l'aspecte de la imatge.

04 de 07

Crea un Scrim a Adobe Experience Design

Un problema de disseny comú és que els elements d'elements de la interfície han de ser un color comú, però es perden quan es col·loquen sobre una imatge de fons o un color sòlid. La solució és un escamot. Un raspall és un degradat una miqueta opac situat entre l'element de la interfície i el fons. Això és fàcil d'aconseguir a XD. A continuació s'explica com:

1. Creeu la vostra artboard a XD, afegiu una imatge i copieu i enganxeu els elements d'una interfície des del kit de la interfície d'usuari apropiat - Fitxer> Obre Kit UI ... - a l'artboard. A la imatge de dalt, la foto fa que la barra d'estat i la barra d'aplicacions siguin difícils de veure.
2. Seleccioneu l'eina rectangular i traieu un rectangle. Al panell de propietats, seleccioneu Omple i seleccioneu Gradient des del menú desplegable al selector de colors. Estableix els colors de degradat en blanc i negre. Estableix el valor A - Opacitat- al 60% i el valor A blanc a 0%.
3. Amb el rectangle seleccionat, seleccioneu Object> Organitzar> Envia cap a enrere . Els elements de la interfície ara són visibles sobre la imatge.

05 de 07

Crea una imatge d'Avatar en Adobe Experience Design

Un patró de disseny comú es troba a les aplicacions de xat on la gent parla entre si i la imatge de l'altaveu apareix a la pantalla. Aquests avatars solen ser imatges que s'han emmascarat. Està mort simple fer això en XD. A continuació s'explica com:

1. Comenceu amb una imatge i un cercle o d'una altra forma a l'artboard. Podeu omplir el cercle amb qualsevol color. El que no cal fer és afegir un color de traç. Desapareixerà quan creïs l'efecte, així que, per què molestar-te? Si heu d'activar el cercle, copieu-lo al porta-retalls.
2. Mou el cercle a la imatge i selecciona la imatge i el cercle. Amb objectes bot seleccionats, seleccioneu Object> Mask with Shape . Quan deixeu anar el ratolí, es crea Avatar. Des d'allà podeu canviar-ne la mida.
3. Si necessiteu afegir un cop, enganxeu el cercle assegut al porta-retalls a l'artboard. Amb la còpia seleccionada, desactiveu l'emplenament de les Propietats i afegiu un color i amplada de traç. Per alinear-los, seleccioneu els dos objectes i feu clic als botons Centre Alinea en les opcions Alinear a la part superior del quadre de propietats.
4. Si voleu moure la fotografia a la màscara, feu doble clic a la màscara. Això mostrarà la imatge i la forma de la màscara. Feu clic a la imatge i arrossegueu-la cap a la posició. Quan deixeu anar el ratolí, la imatge estarà en la seva nova posició dins de la màscara.

06 de 07

Reproduir amb Adobe ArtDesigns de disseny d'experiència

Els artistes de Design Experience no són només per a tu per col·locar continguts. També es poden manipular. Aquí teniu un parell de coses que podeu fer:

1. Si necessiteu versions de paisatge i retrat d'un quadre artístic, dupliqueu l'artboard i, amb el duplicat seleccionat, feu clic al botó de paisatge del quadre Propietats. L'artícle canviarà a l'orientació del paisatge. Si l'Artboard té contingut, feu clic al nom d'Artboard i les propietats Artboard apareixeran al Panell de propietats.
2. Per afegir un color personalitzat a l'Artícle, i el projecte per a aquest assumpte, seleccioneu l'Artícle i feu clic al xip de color de farcit a la secció d'Aparença del Panell de propietats. Introduïu el valor hexadecimal del color i feu clic al signe +. El color s'afegirà com a color personalitzat. Per aplicar aquest color a un altre lloc, seleccioneu un objecte i feu clic al xip de color personalitzat per aplicar el color.
3. Els taulers artístics es poden desplaçar verticalment. Per fer-ho, seleccioneu l'artboard i canvieu la seva alçada en els panells de propietats o arrossegant la part inferior de l'artboard cap avall. A l'àrea Desplaçament del quadre de propietats, seleccioneu verticalment al menú desplegable i introduïu l'alçada de la finestra de la pantalla. Aquesta línia blava traçada mostra la part inferior de la finestra. Per provar-lo, feu clic al botó Reproduir i desplaceu-vos cap avall. Per desactivar el desplaçament, seleccioneu Cap a la desplaçament cap avall.

07 de 07

Editeu un Kit d'interfície d'usuari mòbil a Adobe Experience Design

Experience Design conté un kit d'interfície d'usuari per desenvolupar iOS, Android i Windows UI. Quan els obriu primer, podeu pensar que estan ben establerts. No és així: cadascun dels bits i peces d'aquests kits és totalment editable. Anem a descobrir mitjançant la creació d'un filferro d'Android.

1. Comenceu seleccionant l'eina Artboard i seleccionant Android Mobile a la secció de Google del Panell de propietats .
2. Seleccioneu Fitxer> Obre Kit UI> Material de Google . Això obre el kit d'interfície d'usuari de disseny de materials. Seleccioneu la lupa i marquee el guió de la pantalla d'artboard . M'agrada començar amb aquest perquè em dóna les guies per a la correcta col·locació en pantalla dels elements de la interfície. Si feu clic a una de les barres blaves, veureu que està bloquejat. Feu clic al blocatge que s'adjunta a cadascun d'ells per desbloquejar-lo . Marqueu l'artboard i copieu la selecció al porta-retalls. Torneu al vostre document i enganxeu la pantalla a la vostra portada.
3. Feu clic una vegada a la barra d'aplicacions que hi ha a la part superior de l'artboard. Observeu com podeu seleccionar-lo. Seleccioneu l'objecte> Organitza> Porta cap al davant. La vostra selecció ara està a sobre de les guies de pantalla. Això us hauria de dir que cadascun dels elements de la pantalla es pot editar.
4. Feu doble clic a la barra d'estat a la part superior i, al panell de propietats i el color del farcit a 455A64 . Feu doble clic a la barra d'aplicacions i configureu el complement a 607D8B. Això us hauria de dir que es poden editar cada element d'un kit d'interfície d'usuari per complir les especificacions de color del projecte.
5. Què passa amb les icones? A continuació s'explica com canviar el color. Feu doble clic al cor per seleccionar-lo. Si observeu el Panell de propietats, podeu assumir que no podeu editar la selecció. No exactament. Feu doble clic al cor una vegada més . Les propietats obren i canvieu el color de farcit a FF0000. Repetiu aquest doble clic amb el truc per a les icones restants i el text.