10 asiaa, jotka pitää mielessä työskennellessäsi Sketch & Zeplinin kanssa. Kehittäjät kiittävät sinua!

Kun olet punninnut Sketch & Zeplinin edut ja haitat ennen niiden käyttämistä, näytti siltä, ​​että etuja olisi ollut paljon enemmän kuin haittoja, mutta sinulla on silti sama työkuorma ja vaikeudet kommunikoida kehitysryhmän kanssa. Huomaat, että ihmettelet, etteivätkö kehittäjät osaa käyttää niin yksinkertaista työkalua kuin Zeplin.

Olet juuri lähettänyt kaikki mallisi Zepliniin ja yhtäkkiä saat yhdeltä kehittäjältä viestin, jossa sinua kehotetaan viemään kaikki kuvakkeet ja kuvat ja lähettämään ne zip-tiedostoksi. Ja ihmettelet, miksi he eivät lataa niitä suoraan Zeplinistä? He käskivät sinun lataa kuvakaappauksen Zepliniin, koska he eivät näe esineiden välisiä marginaaleja ... ja luulet, mitä tarkoitusta tämä työkalu palvelee?

Jos jotakin näistä asioista tapahtuu sinulle, tämä artikkeli on sinulle. Nämä ovat 10 asiaa, jotka auttavat sinua saamaan kaiken irti ajasta ja löytämään onnellisen välineen kehittäjien kanssa.

1. Käsikirjojen koko

iOS

  • @ 1X: 375 x 667 kuvapistettä

Android

  • mdpi: 360 x 640 px

verkko

Missä laitteissa tuotteesi näkyy? Määritä tauot ja pidä mielessä mediakyselyt, joita kehittäjät aikovat käyttää. Keskustele kehittäjän kanssa, jos et tiedä mikä se on.

  • 1920 x 1080 px
  • 1 200 x 900 kuvapistettä
  • 1024 x 768 px
  • 320 x 480 px

2. Kuinka raja-arvot toimivat reagoivissa asetteluissa

Lataa kuva Zepliniin reagoivalla suunnittelulla (jo asettamasi väliaikojen mukaan), toisin sanoen, jaa miltä näytöksesi näyttää eri näytön tarkkuuksilla ja laitteilla.

Mielestäsi on selvää, että malli keskittyy vaakatasossa korkeampien tarkkuuksien, kuten 1920 x 1080 pikselin, kanssa, mutta kehittäjät eivät ole mielenlukijoita.

Vastuullisen suunnittelun jakaminen

3. Rasterikuvien koko

Määritä rasterikuville enimmäiskoko, jotta vältetään laadun heikkeneminen, kun malli näytetään suurempien tarkkuuksien näyttöillä. Jos työskentelet esimerkiksi iOS-sovellukselle, aseta kuvien kokoksi @ 3x. Jos et tee tätä, saat kehittäjältä seuraavan viestin:

Lähetä minulle suurikokoiset kuvat, koska ne näyttävät pikseliksi, kun näen kuvion iPhone 7: llä.

4. Tee vietäväksi kuvakeryhmä, mutta myös yksittäiset objektit erikseen

Kehittäjät voivat olla kiinnostuneita viemään yhden tai useamman kuvakkeesi elementistä tai koko kuvakkeen. Joten tee kaikki tuotteet vietäviksi erikseen ja ryhmänä. Myöhemmin Zeplinissä dev-joukkue pystyy viemään yksittäisiä omaisuuseriä sekä koko ryhmän.

5. Tee siirrettävistä kuvista, ei tekstistä

Kuvittele banneri, joka sisältää kuvan, tekstin ja suodattimen, eikä suodatinta voida rakentaa CSS: llä. Sitten kehittäjien on voitava viedä:

  1. Vain kuva
  2. Vain suodatin
  3. Kuva + suodatin

6. Linjan korkeus

Runkotekstin rivikorkeuden on oltava 6 pikseliä suurempi kuin nykyinen fonttikoko. Poikkeuksena voivat olla otsikot tai päällekkäiset tekstit, joissa haluat vaikuttaa käyttäjään valtuuttamalla elementin grafiikat.

Tarkista sitten eri tekstikenttien rivikorkeudet. Muista, että kehittäjä valitsee tekstikenttän ja kopioi ja liittää rivin korkeuden. Aseta sama rivikorkeus kaikkiin tekstiruutuihin, jotta johdonmukaisuus säästyy suunnittelussa.

7. Tekstikentän leveys

Aseta yhden rivitekstin leveydeksi 'auto'. Tämän avulla dev-tiimisi voi tarkastella marginaalia tekstin ja muiden käyttöliittymän elementtien välillä tai näytön suunnittelun rajoja.

8. Poista alue kuvakkeen ympäriltä

Joillakin luonnoksessa tuomilla kuvakkeilla on ympäröivä alue, joka on hyvä viedä omaisuus, mutta on vaikea kehittäjälle, kun hän yrittää tarkistaa objektien välisen marginaalin Zeplinissä. Poista tämä tila, jotta kehittäjät voivat tarkistaa marginaalin kuvakkeen ja käyttöliittymän seuraavan elementin välillä.

9. Painike

Olet tehnyt suunnittelun Sketchissä ja olet lähettänyt näytöt Zepliniin. Nyt tulee kehittäjän kysymys.

Mikä on kuvakkeen, tekstin, painikkeen käyttäytyminen, mitä tapahtuu, kun käyttäjä vie hiiri, napsauttamalla…

Luo uusi taideteos kaikilla tiloilla käyttöliittymässä käyttämille komponenteille. Voit nimetä sen Specs.

10. Kuinka suunnitella näytöt Zeplinissä

Zeplin antaa sinun järjestää näytöt tunnisteiden mukaan. Voit lajitella näytönohjelmasi sisällön (esimerkiksi verkkosivustosi osiot) tai toimintojen perusteella.

Lajittele käyttäjän virtausta seuraavat näytöt jokaiseen tunnisteeseen (osa tai toiminto). Tällä tavoin Zeplinin ensimmäinen näyttö on verkkosivustosi tai sovelluksesi ensimmäinen näyttö.

Mitä vielä?

Älä tuhlaa aikaa tyylioppaan luomiseen, voit lisätä värit ja typografiat suoraan Zeplinistä (Styleguide-välilehti).

PD: Älä unohda kutsua kehitysryhmää Zeplin-projektiisi!

Toivottavasti tämä auttaa, kerro minulle, jos sinulla on kysyttävää!

Liity Skillshare-luokkaan, jossa kerrotaan kuinka rakentaa prototyyppejä inVision-sovellukseen Sketch & Craft -laajennuksen avulla saadaksesi lisää vinkkejä: https://skl.sh/2Y4hj6l