Come creare bordi unilaterali in Sketch e Adobe XD

In questo suggerimento rapido voglio mostrarti un trucco per creare bordi unilaterali in Sketch e Adobe XD. 

Se hai già utilizzato una di queste applicazioni prima di sapere che la creazione di bordi è in realtà abbastanza semplice. Il problema è che i bordi vengono aggiunti all'intero bordo esterno di un oggetto: nessuna delle due applicazioni consente di aggiungere un singolo bordo lungo un solo lato.

Tuttavia, è possibile ottenere ciò che vogliamo usando le ombre esterne. Diamo un'occhiata.

Guarda Screencast

Creazione di bordi semplici su un lato

Iniziamo con un semplice rettangolo sulla nostra tela, in questo caso usando Adobe XD. Ha un colore di riempimento e un bordo:

Adobe XD

Se vogliamo che il bordo appaia solo lungo il bordo inferiore, possiamo rimuovere il Confine (deselezionando le impostazioni del bordo nella barra laterale delle proprietà), quindi selezionando Ombra anziché.

Daremo all'ombra un valore lungo il Y offset (che spingerà l'ombra verso il basso) assicurati che il X l'offset legge 0 e rimuove il B valore (questa è la sfocatura). Dai all'ombra un colore adatto (# 707070 nel nostro caso) e assicurati che l'opacità sia impostata al 100%.

Bordi a una facciata in Adobe XD

Eccoci qua: una tecnica semplice per creare un bordo unilaterale. I bordi come questo sono un modo davvero efficace (ma sottile) per aggiungere dimensione ai tuoi progetti di interfaccia utente. Provalo su finestre di dialogo o moduli di input.

Più bordi su un solo lato

In Sketch è anche possibile aggiungere più ombre e quindi più bordi unilaterali. Clicca il + icona accanto alle impostazioni ombra per aggiungerne un'altra. Nell'esempio seguente puoi vedere un bordo più grande lungo il bordo inferiore, con un bordo più sottile lungo la parte superiore:

Più bordi unilaterali in Sketch

Uno svantaggio di questa tecnica è il modo in cui gli angoli sono resi nell'eventualità di avere due bordi adiacenti. C'è un vuoto evidente:

Questo non è come il CSS dovrebbe rendere l'angolo, e non è davvero risolvibile in modo perfetto in Sketch a meno che non si usi il seguente plugin:

Plugin di schizzo a bordo singolo

Per un controllo ancora maggiore (e per risolvere il problema menzionato in precedenza) è possibile utilizzare un plug-in di Sketch chiamato single-border.

Nota: i plug-in di terze parti non sono ancora disponibili per Adobe XD, anche se puoi aspettarti che siano una parte importante di come XD si svilupperà in futuro.

Una volta installato, seleziona un oggetto e vai a Plugin> Single Border> Single Border. Nel pop-up risultante puoi specificare esattamente come deve apparire il tuo bordo:

Conclusione

Questo è tutto; un semplice trucco per migliorare la progettazione dell'interfaccia utente in Sketch e Adobe XD. Se sei a conoscenza di altri trucchi simili, faccelo sapere nei commenti!

Ulteriori informazioni su UI Design