10 lucruri de care trebuie să ții cont că lucrează cu Sketch & Zeplin. Dezvoltatorii vă vor mulțumi!

După ce a cântărit pro și contra Sketch & Zeplin înainte de a începe să le folosească, părea că există mult mai mulți argumente decât contra, dar mai aveți aceeași încărcare de lucru și dificultăți pentru a comunica cu echipa de dezvoltare. Vă întrebați dacă dezvoltatorii nu știu să folosească un instrument atât de simplu precum Zeplin.

Tocmai ați încărcat toate design-urile pe Zeplin și, dintr-o dată, primiți un mesaj de la unul dintre dezvoltatori care vă solicită să vă exportați toate pictogramele și imaginile și să le trimiteți într-un fișier zip. Și vă întrebați, de ce nu le descarcă direct de la Zeplin? V-au spus să încărcați o captură de ecran pe Zeplin, deoarece nu pot vedea marjele dintre articole ... și vă gândiți, atunci la ce scop servește acest instrument?

Dacă vi se întâmplă unul dintre aceste lucruri, acest articol este pentru dvs. Acestea sunt cele 10 lucruri care vă vor ajuta să beneficiați la maxim de timp și să găsiți un mediu fericit cu dezvoltatori.

1. Dimensiuni tablouri

iOS

  • @ 1X: 375 x 667 px

Android

  • mdpi: 360 x 640 px

Web

În ce dispozitive va fi văzut produsul dvs.? Definiți punctele de întrerupere și rețineți întrebările media pe care dezvoltatorii urmează să le utilizeze. Discutați cu dezvoltatorul dvs. dacă nu știți despre ce este vorba.

  • 1920 x 1080 px
  • 1200 x 900 px
  • 1024 x 768 px
  • 320 x 480 px

2. Cum funcționează punctele de întrerupere în machete responsive

Încărcați o lucrare de artă către Zeplin cu designul receptiv (în funcție de punctele de referință pe care le-ați setat deja), cu alte cuvinte, împărtășiți aspectul designului dvs. în diferite rezoluții de ecran și dispozitive.

Credeți că este clar că designul va fi centrat pe orizontală la rezoluții mai mari, cum ar fi 1920 x 1080 pixeli, dar dezvoltatorii nu sunt minți cititori.

Împărtășirea proiectării responsive

3. Mărimea imaginilor mai rapide

Alocați dimensiunea maximă imaginilor raster pentru a evita pierderea de calitate atunci când designul este afișat pe ecrane cu rezoluții mai mari. De exemplu, dacă lucrați la o aplicație pentru iOS, setați dimensiunea imaginilor la @ 3x. Dacă nu faceți acest lucru, veți primi un mesaj de la dezvoltator, după cum urmează:

Trimite-mi imaginile de dimensiuni mari, deoarece arată pixelate când văd designul pe un iPhone 7.

4. Creează exportabil grupul de pictograme, dar și obiectele individuale separat

Dezvoltatorii pot fi interesați să exporte unul sau mai multe dintre elementele pictogramei dvs. sau ale pictogramei complete. Așadar, faceți ca toate articolele să fie exportate separat și ca grup. Mai târziu în Zeplin, echipa de dev va putea exporta active individuale, precum și grupul complet.

5. Creează imaginile exportabile, nu textul

Imaginează-ți un banner care conține o imagine, un text și un filtru, iar filtrul nu poate fi construit cu CSS. Apoi, dezvoltatorii trebuie să poată exporta:

  1. Doar imaginea
  2. Numai filtrul
  3. Imagine + filtru

6. Înălțimea liniei

Înălțimea de linie a textului corpului trebuie să fie cu 6px mai mare decât dimensiunea fontului curentă, excepție pot fi titluri sau texte suprapuse în care doriți să influențați utilizatorul prin abilitarea graficii unui element.

Apoi, bifează înălțimea liniei diferitelor casete de text. Rețineți că dezvoltatorul va selecta o casetă de text și va copia și lipi linia înălțime. Setați aceeași înălțime a liniei în toate casetele de text pentru a economisi coerența de-a lungul proiectării.

7. Lățimea casetei de text

Setați lățimea unui text de o singură linie la „auto”. Acest lucru va permite echipei dvs. dev să vizualizeze marja dintre text și alte elemente ale interfeței sau limitele proiectării ecranului.

8. Eliminați zona din jurul pictogramei

Unele dintre pictogramele pe care le importați în Sketch au o zonă înconjurătoare, ceea ce este bun pentru a exporta activul, dar este dificil pentru dezvoltator atunci când încearcă să verifice marja dintre obiectele din Zeplin. Eliminați acest spațiu pentru a permite dezvoltatorilor să poată verifica marja dintre pictogramă și următorul element al interfeței.

9. Stări de butoane

Ați făcut designul în Sketch și ați încărcat ecranele în Zeplin. Acum apare întrebarea dezvoltatorului.

Care este comportamentul pictogramei, textului, butonului, ce se întâmplă atunci când utilizatorul dă curs, făcând clic ...

Creați o nouă lucrare de artă cu toate stările pentru diferitele componente pe care le utilizați în interfață, Puteți numi „Specificații”.

10. Cum să organizezi ecranele de proiectare în Zeplin

Zeplin vă permite să organizați ecranele după etichete. Puteți sorta designul ecranelor în funcție de conținut (de exemplu, secțiunile site-ului dvs. web) sau funcționalități.

Sortează ecranele după fluxul utilizatorului în fiecare dintre etichete (secțiune sau funcționalitate). În acest fel, primul ecran din Zeplin va fi primul ecran de pe site-ul sau aplicația dvs.

Ce mai mult?

Nu vă pierdeți timpul creând un ghid de stil, puteți adăuga culorile și tipografiile direct din Zeplin (fila Styleguide).

PD: Nu uitați să invitați echipa de dezvoltare la proiectul dvs. Zeplin!

Sper că vă ajută, anunțați-mă dacă aveți întrebări!

Alăturați-vă clasei mele Skillshare despre cum să construiți prototipuri în inVision folosind pluginul Sketch & Craft pentru mai multe sfaturi: https://skl.sh/2Y4hj6l