Vodič za handoffs za savršen dizajn piksela. III dio.

UI setove

UI komplet je popis svih elemenata koje koristite u projektu. Ovaj komplet vam pomaže da zadržite sve u stvarnom stanju i olakšava postupak održavanja kad radite s timom na velikim projektima.

U korisničkom sučelju trebali biste ilustrirati sljedeće boje: boje; tipografija; komponente poput tipki, ulaza i klizača; i različita stanja poput lebdjenja, aktivnog i zadanog. Upotrijebite D.R.Y. ("Nemojte ponavljati sebe") princip kada razmatrate hoćete li dati određeni element u UI komplet. Ako u umetničkoj ploči imate dva slična elementa, jedan premjestite na UI komplet. U umetničkim pločama dizajnera koji ne koriste UI setove obično ćete naći dva, tri ili četiri različita gumba s vrlo malim i nebitnim razlikama. U tim će slučajevima programer vjerojatno primijeniti sve njih umjesto da napravi jednu objedinjenu verziju.

Craft preporučujemo za izradu korisničke sučelje vašeg projekta. Za veće projekte, dobra je ideja imati HTML i CSS verziju korisničkog sučelja i koristiti ih kao referencu za ostale elemente.

CRAFT dodatak (prikupi elemente za višekratnu upotrebu u projektu)

Izvoz

Olakšajte život programeru i povećajte svoje šanse za izgradnju savršenog dizajna piksela pomoću jednog od ovih alata:

  • Invision Inspection
  • Zeplin
  • Sympli
  • Skica mjere
Zeplin: moderan instrument za pregled dizajna

Oni vam mogu pomoći u pronalaženju boja, fontova, veličina, sredstava, udaljenosti između elemenata, CSS svojstava i ostalih stvari sa vašeg Sketch ili PSD. Invision i Zeplin vam također omogućavaju pisanje u bilješkama umjesto da vas forsiraju na stvaranje dodatnih slojeva, poput Photoshopa.

Stari način. Stvaranje komentara u Photoshop slojevima

Element stanja

Da biste spriječili nesporazume, preporučujemo vam da koristite specifičnu terminologiju za različita stanja svojih elemenata, baš kao što to radimo u CSS-u. Programeri će znati o čemu govorite bez pretjeranog objašnjenja.

  • Zadano
  • Zadržite pokazivač: stanje elementa pomicanjem miša
  • Aktivno: stanje elementa pritiskom
  • Fokus: stanje elementa koji je trenutno ciljana tipkovnicom ili aktiviran mišem (tj. Unosi, tekstualna područja)
  • Posjećeno: stanje veza koje su već posjećene
Primjeri stanja elemenata

Line-height

Visina crte vrlo je važan dio vašeg dizajna i postupka predaje. Najvažnije je ovdje shvatiti kako će preglednik prikazati svaki element i kako će visina linije utjecati na njega. Pogledajte sliku ispod. Ovo je tipičan primjer tekstualnog bloka koji je prikazao preglednik. Visina tog elementa jednaka je visini crte i visini različitih znakova koji nisu u skladu s elementom u cjelini.

Jedna od prednosti upotrebe Sketch-a je ta što tekstualne objekte prikazuje istom logikom. Veličine elemenata Photoshop ne ovise o visini crte.

Najbolja praksa diktira pomoću visine retka slične fontovima. Nemojte upotrebljavati mnogo različitih, prilagođenih visina crta na web-lokaciji. Svaki font ima zadanu vrijednost visine retka. Na primjer, Roboto ima visinu fonta 1,4x; ako imate veličinu fonta 16px, visina retka iznosi 22px. Čak i ako odlučite da ne koristite zadanu vrijednost, pokušajte upotrijebiti isti udio na cijeloj web lokaciji. Uobičajene vrijednosti su 1,3-1,6 veličine slova. Programerima će se ovo svidjeti, jer više vole definirati vrijednost visine crte i zaboraviti na nju, nastavljajući raditi s samo veličinom fonta.

Sada, malo o ponašanju s pomičnim brojevima u različitim preglednicima. Na primjer početne vrijednosti:

  • Veličina slova: 36px
  • Visina crte: 1.4

Chrome, Safari, Opera: Izračunajte samo cjelobrojne vrijednosti i skraćuju pomični sloj. 36px * 1,4 = 50,4 i bit će skraćen do 50px.

Krijesnica: Računajte s floatom. 36px * 1,4 = 50,4, a ostat će 50,4px. Ako imate dva retka teksta, kao u donjem primjeru, iznosit će 100,8 px. Glavna razlika kod Safarija i Chromea je da ako odaberete visinu linije poput 1,41, dobit ćete 100px; u Firefoxu, to će biti veličina spremnika od 101.533px.

U ovom slučaju, Firefox koristi preciznije vrijednosti visine linije, poput 1.33333. Ako se to ne tiče vas, držite se lijepih i čistih brojeva, poput 1.3.

fontovi

Prvo pokušajte pronaći prihvatljive fontove u Google Fontima. Preglednici podržavaju različite formate fontova. To znači da će za upotrebu određenih prilagođenih fontova programer trebati pripremiti ih sa posebnim uslugama za pretvaranje ttf / otf u woff, woff2 ili eot. Tijekom tog procesa font može izgubiti kvalitetu. Dakle, moja preporuka je da koristite prilagođene fontove samo ako znate da vaši programeri neće uspjeti u procesu. Moraju znati raditi sa fontovima.

Evo nekoliko stvari koje treba zapamtiti o korištenju fontova:

  • Nemojte koristiti više od dva slova. To će utjecati na vrijeme učitavanja stranice, pogotovo ako su fontovi prilagođeni.
  • Ne koristite previše različitih veličina ili stilova (kurziv / podebljan / lagan / tanki / redoviti).
Google biblioteka fontova besplatnih fontova za upotrebu

Programeri i dizajneri

Dizajneri ponekad mrze programere jer ne mogu realizirati svoje ideje; programeri ponekad mrze dizajnere jer zahtijevaju značajke koje je tehnički teško implementirati. Ti se problemi mogu riješiti jednom jednostavnom stvari: razgovorom. Razgovarajte sa svojim programerima, a ne samo u završnoj fazi. Raspravite o svojim idejama prije nego što počnete crtati, jer neće biti previše katastrofalno odbiti ideju u ranoj fazi. Manja je vjerojatnost da ćete biti razočarani rezultatom.

Mislimo da su programeri i dizajneri uvijek mogli pronaći razuman kompromis i učinkovito surađivati ​​na smanjenju troškova / vremena svojih projekata.

Dodirnite gumb if ako vam je ovaj članak koristan!

Dio 1 - Softver, imenovanje, optimizacija slike, Sprites, SVG, Favicon

Dio 2 - Mreža, osjetljivi dizajn, animacije, prototipovi

Imate li pitanja ili povratnih informacija? Povežite se putem Pixel Pointa