Trucchi, suggerimenti e tecniche per la progettazione dell'esperienza Adobe

01 di 07

Trucchi, suggerimenti e tecniche per la progettazione dell'esperienza Adobe

Quando Adobe introdusse Experience Design come anteprima pubblica, la compagnia realizzò due prodigi piuttosto sorprendenti allo stesso tempo. In primo luogo, hanno messo in piedi uno spazio nel mercato emergente del software di prototipazione. In secondo luogo, hanno creato un'opportunità per gli utenti di giocare con un "work-in-progress" e di lasciare che gli utenti influenzassero tale progresso. Ora che l'applicazione è disponibile da alcuni mesi, ho pensato che sarebbe stato un buon momento per condividere alcuni trucchi, suggerimenti e tecniche di Experience Design.

Ma prima, potreste chiedervi cosa si intende per software di prototipazione. Tra i principali attori in questo spazio ci sono Proto.io, Principle, UXPin, Atomic.io, Experience Design e InVision. A differenza di applicazioni come Sketch 3, Photoshop e Illustrator, in cui vengono prodotti disegni statici, questi editor grafici introducono l'interattività, il movimento e altre funzionalità comuni nello spazio di progettazione mobile e web di oggi.

Con l'avvento del mobile e l'inevitabile attenzione al laser dell'Utente, non è più sufficiente per un designer creare alcuni schizzi, riunire alcune comp e rilasciare il progetto o caricarlo su un server web. Il flusso di lavoro UI / UX ha cambiato radicalmente le cose. Ogni fase del processo, dall'identificazione all'utente, agli schizzi, ai wireframe, ai prototipi e alla prototipazione, è ora sottoposta a numerosi test da parte dell'utente.

È l'ultima fase - la prototipazione - in cui i punti critici vengono scoperti e risolti prima che il progetto passi alla produzione finale. È qui che l'interattività, il movimento, le transizioni dello schermo e il posizionamento di tutto sullo schermo sono così importanti. Problemi e problemi non possono essere semplicemente mostrati come un'immagine statica o spiegati verbalmente. Dopotutto, questi prodotti sono per veri umani. Piuttosto che spostare tutto ciò in codice, il processo di prototipazione viene sempre più intrapreso da un software di grafica progettato proprio a tale scopo. È più facile correggere un errore, sostituire un'immagine, riscrivere del testo, spostare un pulsante e così via usando un editor visivo piuttosto che riscrivere e correggere continuamente il codice.

In realtà, questo software è diventato un componente chiave nell'ambiente di progettazione e sviluppo "Rapid Prototyping" di oggi.

Detto questo, divertiamoci con Experience Design.

02 del 07

Crea un perno di destinazione con un cerchio semplice in Adobe Experience Design

Un aspetto chiaro di XD è l'uso di strumenti di disegno vettoriale. Non riesci a trovare un'icona? Nessun problema. Rotola il tuo. Ecco come:

1. Selezionare Lo strumento Ellisse e, con i tasti Opzione / Alt-Maiusc premuto, disegnare un cerchio.
2. Con il cerchio selezionato, imposta il Riempi colore a FF0000 e il bordo su "none" nelle proprietà.
3. Fare doppio clic sul cerchio per mostrare i punti di ancoraggio. Trascina l'ancoraggio inferiore verso il basso.
4. Fare doppio clic sul punto di ancoraggio selezionato e le curve vengono sostituite con linee.
5. Disegna un altro piccolo cerchio con un riempimento bianco e nessun rifornimento. Spostalo in posizione e seleziona il perno e il cerchio. Nel pannello Allinea nella parte superiore delle proprietà fai clic sul pulsante Centro orizzontale e viene creato il Pin.

03 di 07

Crea una sfocatura dello sfondo in Adobe Experience Design

È comune avere testo o altri contenuti su un'immagine di sfondo. Il problema qui è che l'immagine, il più delle volte, supera il contenuto sopra di esso. Un modo per risolvere questo problema è sfocare l'immagine di sfondo. È possibile sfocare l'immagine in Photoshop o in altri software di modifica delle immagini, ma ciò è in qualche modo inefficiente, soprattutto poiché XD può ora gestire questa attività per te. Ecco come:

1. Crea una nuova tavola da disegno e aggiungi la tua immagine di sfondo.
2. Seleziona lo strumento Rettangolo ae disegna un rettangolo sull'immagine. Con il rettangolo selezionato, imposta Riempi su Bianco e Traccia su Nessuno.
3. Con il rettangolo selezionato, seleziona Sfocatura sfondo nel pannello delle proprietà. I tre cursori sono Blur Amount, Brightness e Opacity. Ecco cosa fanno:

• Quantità di sfocatura: Regola la sfocatura dell'immagine sotto la forma. Il valore massimo è +50.
• Luminosità: Regola le luci e le ombre nell'immagine. Il valore minimo è -50 e il valore Massimo è +50.
• Opacità: Influisce sulla trasparenza della forma e sulla visibilità dell'immagine sotto la forma. I valori vanno da 0% a 100%.

Se vuoi davvero "cambiare le cose", cambia il colore della forma e gioca con il valore Opacità per cambiare il "look" dell'immagine.

04 di 07

Crea uno Scrim in Adobe Experience Design

Un problema di progettazione comune è che gli elementi degli elementi dell'interfaccia devono essere un colore comune, ma vanno persi quando vengono posizionati su un'immagine di sfondo o su un colore a tinta unita. La soluzione è una tela. Uno scrim è un gradiente piuttosto opaco posto tra l'elemento dell'interfaccia e lo sfondo. Questo è facile da realizzare in XD. Ecco come:

1. Crea la tua tavola da disegno in XD, aggiungi un'immagine e copia e incolla gli elementi dell'interfaccia dall'apposito Kit UI - File> Apri kit UI … - nella tavola da disegno. Nell'immagine sopra la foto rende difficile vedere la barra di stato e la barra delle applicazioni.
2. Seleziona lo strumento Rettangolo e disegna un rettangolo. Nel pannello Proprietà seleziona Riempi e seleziona Gradiente dal menu a discesa nel Selettore colore. Imposta i colori del gradiente su Bianco e nero. Imposta il valore A - Opacità- al 60% e il Bianco Un valore a 0%.
3. Con il rettangolo selezionato, selezionare Oggetto> Disponi> Porta indietro. Gli elementi dell'interfaccia sono ora visibili sull'immagine.

05 di 07

Crea un avatar immagine in Adobe Experience Design

Un modello di progettazione comune si trova nelle app di chat in cui le persone parlano tra loro e l'immagine dell'altoparlante appare sullo schermo. Questi avatar sono solitamente immagini che sono state mascherate. È semplicemente semplice farlo in XD. Ecco come:

1. Inizi con un'immagine e un cerchio o altra forma sulla tavola da disegno. Puoi riempire il cerchio con qualsiasi colore. Quello che non devi fare è aggiungere un colore per il tratto. Scomparirà quando crei l'effetto, quindi perché preoccuparsi. Se hai bisogno di alimentare il cerchio, copialo negli appunti.
2. Muovi il cerchio sull'immagine e seleziona sia l'immagine che il cerchio. Con gli oggetti bot selezionati, selezionare Oggetto> Maschera con forma. Quando rilasci il mouse, viene creato l'Avatar. Da lì puoi ridimensionarlo.
3. Se devi aggiungere un tratto, incolla il cerchio che si trova negli Appunti sulla tavola da disegno. Con la copia selezionata, disattivare il riempimento nelle Proprietà e aggiungere un colore e una larghezza del tratto. Per allinearli, seleziona entrambi gli oggetti e fai clic sui pulsanti Centra allinea nelle opzioni Allinea nella parte superiore del pannello delle proprietà.
4. Se vuoi spostare la foto nella maschera, fai doppio clic sulla maschera. Questo mostrerà l'immagine e la forma della maschera. Clicca sull'immagine e trascinala in posizione. Quando rilasci il mouse, l'immagine si troverà nella sua nuova posizione all'interno della maschera.

06 di 07

Gioca con Adobe Experience Design Artboards

Le tavole da disegno Experience Design non sono solo lì per te per inserire contenuti. Anche loro possono essere manipolati. Ecco un paio di cose che puoi fare:

1. Se sono necessarie le versioni Orizzontale e Verticale di una tavola da disegno, duplicare la tavola da disegno e, con il duplicato selezionato, fare clic sul pulsante Orizzontale nel pannello Proprietà. La tavola da disegno cambierà in Orientamento orizzontale. Se la tavola da disegno contiene dei contenuti, fai clic sul nome della tavola da disegno e le proprietà della tavola da disegno verranno visualizzate nel pannello Proprietà.
2. Per aggiungere un colore personalizzato alla tavola da disegno e il relativo progetto, selezionare la tavola da disegno e fare clic sul chip Colore riempimento nella sezione Aspetto del pannello Proprietà. Immettere il valore esadecimale per il colore e fare clic sul segno +. Il colore verrà aggiunto come colore personalizzato. Per applicare quel colore altrove, selezionare un oggetto e fare clic sul chip Colore personalizzato per applicare il colore.
3. Le tavole da disegno possono essere fatte scorrere verticalmente. Per fare ciò, selezionare la tavola da disegno e modificarne l'altezza sui pannelli delle proprietà o trascinando verso il basso la parte inferiore della tavola da disegno. Nell'area Scrollabile del pannello delle proprietà, seleziona verticale dal menu a discesa e inserisci l'altezza del viewport per lo schermo. Quella linea tratteggiata blu ti mostra la parte inferiore della finestra. Per testarlo, fai clic sul pulsante Riproduci e scorri. Per disattivare lo scorrimento, selezionare Nessuno nel menu a comparsa Scorrimento.

07 di 07

Modifica un kit UI mobile in Adobe Experience Design

Experience Design contiene un kit UI per lo sviluppo di interfacce utente iOS, Android e Windows. Quando li apri per la prima volta, potresti pensare che siano abbastanza ben impostati. Non proprio, ognuno dei pezzi e dei pezzi di questi kit è completamente modificabile. Scopriamolo costruendo un wireframe Android.

1. Si inizia selezionando lo strumento tavola da disegno e selezionando Android Mobile nella sezione Google del pannello Proprietà.
2. Seleziona File> Apri kit UI> Materiale Google. Questo apre il kit di interfaccia utente di Material Design. Seleziona la Lente di ingrandimento e il riquadro di selezione ta tavola da disegno. Mi piace iniziare con questo perché mi fornisce le guide per il corretto posizionamento sullo schermo degli elementi dell'interfaccia. Se fai clic su una delle barre blu vedrai che è bloccato. Fai clic sul lucchetto collegato a ciascuno di essi per sbloccarlo. Seleziona la tavola da disegno e copia la selezione negli Appunti. Ritorna al tuo documento e incolla lo schermo nella tua tavola da disegno.
3. Fare clic una volta sulla barra delle applicazioni nella parte superiore della tavola da disegno. Nota come puoi selezionarlo.Seleziona Oggetto> Disponi> Porta in primo piano. La tua selezione è ora al di sopra delle guide dello schermo. Questo dovrebbe dirti che ognuno degli elementi sullo schermo può essere modificato.
4. Fare doppio clic sulla barra di stato in alto e, nel pannello Proprietà se il colore di riempimento a 455A64. Fare doppio clic sulla barra delle applicazioni e impostarne il riempimento su 607D8B. Questo dovrebbe dire che ogni elemento in un kit UI può essere modificato per soddisfare le specifiche del colore del progetto.
5. E le icone? Ecco come cambiare il loro colore. Fai doppio clic sul cuore per selezionarlo. Se si guarda il pannello delle proprietà, si può presumere che non è possibile modificare la selezione. Non proprio. Fai doppio clic sul cuore ancora una volta. Le proprietà si aprono e si modifica il colore di riempimento su FF0000. Ripeti questo doppio trucco doppio clic per le icone rimanenti e il testo.