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

rešetka

Imajte na umu ponašanje CSS Grid Systems tijekom izrade dizajna. Pogledajte mrežicu Bootstrap. To je vrlo popularan CSS okvir koji će pokriti sve standardne slučajeve, a programer se lako postavlja. Glavna stvar koju treba razumjeti je da stupci u CSS mrežama imaju relativnu širinu i statički unutarnji padding. Mreža za pokretanje sustava podrazumijeva 12 stupaca i unutarnju podlogu od 15 piksela, ali možete je prilagoditi. Mogli biste reći da nemate relativne brojeve stupaca u skici, i bili biste u pravu jer vam ne trebaju.

Kad izradite korisničko sučelje, uvijek prikazujete statičku sliku i, naravno, imate statičku veličinu spremnika. Tako, na primjer, ako imate umjetničku ploču 1920px i spremnik 960px, imat ćete jedan stupac od 80px, s unutarnjom oblogom od 15px i unutarnjom veličinom stupca 50px. Pročitajte ovaj članak da biste shvatili kako izgraditi ispravnu mrežicu za tekućinu sa Sketch-om.

Ponašanje mrežice za pokretanje

Kad izradite korisničko sučelje na temelju Grid sustava kao što je Bootstrap, programeru ne trebate reći veličinu svakog stupca; samo ćete mu trebati pokazati sloj presvlake stupca. Programer će znati koje klase treba koristiti u CSS-u: .col-sm-2 ili .col-sm-6.

Primjer korištenja mreže s pixelpoint.io

Mnogi proizvođači mreža imaju vlastite ideje o izradi mreža. Oni će imati jednu veličinu oluka između stupaca i margine za spremnik. Da biste ovo bolje razumjeli, koristite vodič ili pročitajte odjeljak Bootstrap Grid.

Primjer mrežnog generatora

Odgovarajući dizajn

Vaš je glavni cilj pokazati programeru kako će svaki element gledati na različite dimenzije i s različitim prijelazima između njih. Razmislite o relativnim, a ne statičkim vrijednostima. Ako pripremite izgled s nekoliko različitih dimenzija, poput 320x568, 1024x768 i 1920x1080, to ne znači da je vaš posao završen. I dalje ćete morati demonstrirati i objasniti svoje prijelaze.

  • Što će biti sa stupovima i unutarnjim sadržajem na svakoj prijelomnoj točki?
  • Koje će biti promjene s veličinom spremnika za svaku dimenziju (i osigurati da imate stupce s relativnim vrijednostima)?
  • Kako će te promjene utjecati na slike i jesmo li pripremili slike za takvo ponašanje? Uzmimo ovaj primjer: Imate sliku veličine 200 x 200 na verziji za radnu površinu i odlučite je napraviti 100% širinu za uređaj veličine 375x667. U ovom slučaju trebate imati sliku veću od 750 px (velika gustoća piksela) kako biste spriječili zamućivanje na mobilnim uređajima.

Druga tipična pogreška koju dizajneri čine je zaboraviti na visinu i samo pokazati ponašanje elemenata na temelju promjene širine spremnika. Ponekad imate i elemente s relativnom visinom, a morat ćete objasniti programeru ponašanje tih objekata. Morate postaviti minimalnu visinu ili maksimalnu visinu i položaj elemenata unutar tog elementa.

Primjer responzivnog dizajna s pixelpoint.io

Koristite neke osnovne točke prijeloma: 320x568, 375x667, 768x1024, 1024x768, 1280x768, 1366x768 i 1920x1080. I, naravno, ne zaboravite da testirate svoj dizajn na pejzažnom mobilnom prikazu.

Ovo je primjer teksta u stupcima koji dobro izgleda na verziji za radnu površinu, ali ima problema sa odgovornošću. Morate definirati kako ćete raditi s tim.

Ne izmislite kotač

Ako nemate vremena ili niste sigurni da možete ispočetka sastaviti male komponente (poput padajućeg), pitajte razvojnog programera što knjižnica predlaga i polirajte unaprijed pripremljenu verziju. Jedan tipičan slučaj je izumljanje datuma za odabir datuma. Previše ljudi misli da samo trebaju nacrtati kalendar s brojevima, ali također morate razmišljati o:

  • Hoćete li označiti datume iz prethodnog ili sljedećeg mjeseca.
  • Kakav će efekt lebdjenja biti za svaki datum.
  • Kako ćete označiti trenutni datum.
  • Kako ćete označiti odabrani datum.
  • Kako ćete prebacivati ​​godine ili mjesece.
Primjer jednostavnog i čistog odabirača datuma

Živimo u svijetu u kojem svi pokušavaju izgraditi vlastiti startup. Ponekad je klijentima bolje doći do MVP-a nego gubiti vrijeme i novac na dizajnera koji pokušava biti kreativan. Dizajneri trebaju razumjeti da mogu koristiti postojeće knjižnice komponenata i polirati ih za različite projekte. To smanjuje često neracionalne troškove rada programera, čak i kada je potrebno kreirati prilagođena rješenja.

Animacija i prototipi koje je moguće kliknuti

Umjesto da napišete bilješke koje objašnjavaju kako bi vaše animacije trebale izgledati ili se ponašati, pokažite to. Malo je vjerojatno da će vaš opis animacije biti dobar koliko i u vašoj mašti. Koristite InVision ili Axure za prototipiranje korisničkih putovanja, a za animacije koristite Principle, Framer ili Adobe After Effects. To će spriječiti nesporazume koji uzrokuju glavobolju između vas, programera i klijenata. Također će vam pomoći da provjerite svoje pretpostavke prije implementacije. Animacije i prototipovi predstavljaju cool prezentacije za klijente, a vaši dizajni se čine ekstra posebnim.

Izrada jednostavnog mobilnog prototipa (aplikacija Flinto)

Dodirnite gumb if ako vam je ovaj članak koristan!

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

Dio 3 - UI setove, izvoz, stanja elemenata, visina crta, fontove, programere i dizajnere

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