10 asja, mida tuleks Sketch & Zepliniga töötades meeles pidada. Arendajad tänavad teid!

Pärast Sketch & Zeplini plusside ja miinuste kaalumist enne nende kasutamist hakkas tunduma, et plusse kui miinuseid oli palju rohkem, kuid teil on arendusmeeskonnaga suhtlemisel ikka sama töökoormus ja raskused. Võite teada saada, kas arendajad ei tea, kuidas kasutada nii lihtsat tööriista nagu Zeplin.

Olete äsja kõik oma kujundused Zeplini üles laadinud ja äkki saate ühelt arendajatelt teate, milles palutakse teil eksportida kõik oma ikoonid ja pildid ning saata need ZIP-faili. Ja te ei tea, miks nad ei lae neid otse Zeplinist? Nad käskisid teil Zeplini ekraanipildi üles laadida, kuna nad ei näe üksuste vahelisi veeriseid ... ja arvate, siis mis eesmärki see tööriist teenib?

Kui mõni neist juhtub teiega, on see artikkel teie jaoks. Need on 10 asja, mis aitavad teil oma ajast maksimaalselt kasu saada ja koos arendajatega õnneliku meediumi leida.

1. Artboards suurus

iOS

  • @ 1X: 375 x 667 pikslit

Android

  • mdpi: 360 x 640 pikslit

võrk

Millistes seadmetes teie toodet nähakse? Määratlege murdepunktid ja pidage meeles meediumipäringuid, mida arendajad kavatsevad kasutada. Kui te ei tea, mis see on, rääkige oma arendajaga.

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

2. Kuidas toimivad murdepunktid reageerivas paigutuses

Laadige Zeplinisse üles kunstiteos koos reageeriva kujundusega (vastavalt teie juba seatud murdepunktidele), teisisõnu jagage oma disainilahenduse väljanägemist erinevates ekraani eraldusvõimetes ja seadmetes.

Arvate, et on selge, et kõrgeima eraldusvõime korral (nt 1920 x 1080 pikslit) on kujundus horisontaalselt kese, kuid arendajad ei ole mõistuselugejad.

Vastuvõtliku disaini jagamine

3. Rasterpiltide suurus

Määrake rasterkujutistele maksimaalne suurus, et vältida kvaliteedi langust, kui kujundus kuvatakse kõrgema eraldusvõimega ekraanidel. Näiteks kui töötate iOS-i jaoks mõeldud rakendusega, määrake piltide suuruseks @ 3x. Kui te ei tee seda, saate arendajalt järgmise sõnumi:

Saatke mulle suureformaadilisi pilte, kuna need näevad ekraanil iPhone 7 nähes pikslit.

4. Tehke eksporditav ikoonigrupp, aga ka üksikud objektid eraldi

Arendajad võivad olla huvitatud teie ikooni või täieliku ikooni ühe või mitme elemendi eksportimisest. Seega tehke kõik kaubad eraldi ja rühmadena eksporditavaks. Hiljem saab Zeplinis dev-meeskond eksportida nii kogu vara kui ka kogu rühma.

5. Tehke eksporditavad pildid, mitte tekst

Kujutage ette ribareklaami, mis sisaldab pilti, teksti ja filtrit ning filtrit ei saa CSS-iga ehitada. Seejärel peavad arendajad saama eksportida:

  1. Ainult pilt
  2. Ainult filter
  3. Pilt + filter

6. Joone kõrgus

Korpusteksti reakõrgus peab olema 6 pikslit suurem kui praeguses kirjasuuruses, erandiks võivad olla pealkirjad või ülekattega tekstid, kus soovite kasutajale mõju avaldada, võimaldades elemendi graafikat.

Seejärel kontrollige erinevate tekstiväljade reakõrgust. Pidage meeles, et arendaja valib tekstikasti ja kopeerib ja kleepib rea kõrguse. Seadke kõigis tekstikastides sama joonekõrgus, et oma kujunduses sidusust salvestada.

7. Tekstikasti laius

Seadke ühe rea teksti laius väärtusele „auto”. See võimaldab teie arendusmeeskonnal vaadata marginaali teksti ja muude liidese elementide vahel või ekraani kujunduse piire.

8. Eemaldage ikooni ümbritsev ala

Mõnel Sketchis imporditud ikoonil on ümbritsev ala, mida on hea vara eksportida, kuid arendaja jaoks on see karm, kui ta üritab Zeplinis objektide vahelist marginaali kontrollida. Eemaldage see ruum, et arendajad saaksid kontrollida marginaali ikooni ja liidese järgmise elemendi vahel.

9. Nupu olekud

Te olete visandis visandi lõpetanud ja laadisite ekraanid üles Zeplini. Nüüd kerkib arendaja küsimus.

Milline on ikooni, teksti, nupu käitumine, mis juhtub, kui kasutaja hõljub hiirekursorit, klõpsates ...

Looge liideses kasutatavate komponentide jaoks kõigi olekutega uus kujundus. Võite selle nimetada spetsifikatsiooniks.

10. Kuidas Zeplinis disainiekraane korraldada?

Zeplin võimaldab ekraane siltide kaupa korraldada. Ekraanide kujundusi saate sortida sisu (näiteks oma veebisaidi jaotised) või funktsioonide järgi.

Sorteerige ekraanid vastavalt kasutaja voolule igasse silti (jaotis või funktsioon). Nii on Zeplini esimene ekraan teie veebisaidi või rakenduse esimene ekraan.

Mida veel?

Ära raiska oma aega stiilijuhendi loomisele, vaid värvid ja tüpograafiad saate lisada otse Zeplinist (vahekaart Styleguide).

PD: ärge unustage, et kutsuge arendusmeeskond oma Zeplini projekti!

Loodetavasti aitab see, andke teada, kui teil on küsimusi!

Liituge minu Skillshare'i klassiga, kuidas luua prototüüpe inVisionis, kasutades Sketch & Craft pluginat, et saada rohkem näpunäiteid: https://skl.sh/2Y4hj6l