Cum se creează Frontiere unilaterale în Sketch și Adobe XD

În acest sfat rapid, vreau să vă arăt un truc bun pentru crearea frontierelor unilaterale atât în ​​Sketch, cât și în Adobe XD. 

Dacă ați folosit oricare dintre aceste aplicații înainte de a ști că crearea frontierelor este de fapt destul de simplă. Problema este că granițele sunt adăugate la întreaga margine exterioară a unui obiect - nici aplicația nu permite adăugarea unei singure margini pe o singură parte.

Cu toate acestea, este posibil să realizăm ceea ce dorim prin utilizarea umbrelor de picătură. Hai să aruncăm o privire.

Uita-te la Screencast

Crearea unor frontiere ușoare pe o singură parte

Să începem cu un dreptunghi simplu pe pânza noastră, în acest caz folosind Adobe XD. Are o culoare de umplere și o margine:

Adobe XD

Dacă vrem ca marginea să apară numai de-a lungul marginii de jos, putem elimina Frontieră (debifând setările de frontieră din bara laterală a proprietăților), apoi selectând Umbră in schimb.

Vom da umbra o valoare de-a lungul Y offset (care va împinge umbra în jos) asigurați-vă că X offset citește 0 și eliminați B (aceasta este neclaritatea). Dați umbrei o culoare potrivită (# 707070 în cazul nostru) și asigurați-vă că opacitatea este setată la 100%.

Limite unilaterale în Adobe XD

Acolo o avem - o tehnică simplă pentru crearea unei frontiere unilaterale. Frontierele ca aceasta sunt o modalitate foarte eficienta (dar subtila) de a adauga dimensiune design-urilor dvs. UI. Încercați-l pe casete de dialog sau intrări de formular.

Multiple frontiere unilaterale

În Sketch este de asemenea posibil să adăugați mai multe umbre și, prin urmare, mai multe frontiere unilaterale. Apasă pe + pictograma de lângă setările umbrelor pentru a adăuga o altă imagine. În exemplul de mai jos puteți vedea o margine mai mare de-a lungul marginii de jos, cu o margine mai subțire de-a lungul vârfului:

Mai multe frontiere unilaterale în Sketch

Un dezavantaj față de această tehnică este modul în care colțurile sunt redate în cazul în care au două frontiere adiacente. Există un decalaj evident:

Acest lucru nu înseamnă că CSS ar face colțul și nu este într-adevăr posibil să rezolvi într-un mod perfect în Sketch dacă nu folosești următorul plugin:

Plug-in pentru schița frontală unică

Pentru un control mai mare (și pentru a rezolva problema menționată mai sus), puteți utiliza un plugin pentru schiță numit frontieră unică.

Notă: pluginurile de la terțe părți nu sunt încă disponibile pentru Adobe XD, deși vă puteți aștepta ca acestea să fie o mare parte a modului în care XD se dezvoltă în viitor.

Odată instalat, selectați un obiect și mergeți la Plugin-uri> Border unic> Border unic. În fereastra pop-up rezultată puteți specifica exact ceea ce doriți să arate chenarul dumneavoastră:

Concluzie

Asta e; un simplu truc pentru îmbunătățirea designului dvs. de interfață în Sketch și Adobe XD. Dacă știți despre alte trucuri similare, vă rugăm să ne spuneți în comentarii!

Aflați mai multe despre designul UI