Nadopuni mobilni tijek dizajna u Sketch-u

Sketch je trenutno najpoznatija u području alata Design. Uvijek vjerujem da je jedan od razloga to što Sketch ima veliku biblioteku dodataka - zajednicu. Danas želim predstaviti 2 dodatka: Paddy i RenameIt koji će vam pomoći smanjiti vrijeme radeći replicirane radnje i pojednostaviti vaš tijek mobilnog dizajna. Posebno, ako gradite Sustav dizajna, mislim da će vam biti vrlo koristan.

Ovaj članak pišem na osnovu svog iskustva, tako da sam zaista otvoren za raspravu kako bismo poboljšali tijek rada na dizajnu. I ranije sam pokušao sa automatskim postavljanjem, ali čini se da ne pripadamo zajedno.

Zbog ograničenja GIF-a. Žao nam je zbog brzine GIF slika u ovom postu! Ovdje možete pogledati moj originalni članak za gledanje videozapisa u punoj / maloj brzini.

Moj stari trenutni tijek dizajna

Krenimo na glavnu temu. Koji je trenutačni problem? Vidite li dolje poznati tijek dizajna?

Kada se bavite UI dizajnom, morate brinuti o sadržaju, kako to izgleda na varijanti veličine ekrana. Svaki put kada ažuriramo sadržaj, sve moramo iznova izmjenjivati. Možete ga vidjeti normalno, zar ne radi posao dizajniranja? Ali ako imate stotinu komponenti koje je potrebno ažurirati, tada ćete vidjeti bol ovdje.

Problem možete riješiti na mnogo načina, a za slojeve možete organizirati više dodataka. Ali to i dalje nije automatski ili barem nije na prikladan način kao u ovom članku. Krenut ćemo od izgradnje osnovnih komponenti do cijele stranice, poput metode atomskog dizajna.

Dugme

Mislim da je to jedna od najpopularnijih komponenti pa ćemo prvo pokušati. Ako ste prije upotrebljavali Dynamic Button, brzo ćete ga upoznati. Ovo je struktura gumba: Pozadina, Tekst. U naziv pozadinskog sloja dodati ćemo [topPadding rightPadding bottomPadding leftPadding]. Tada će se automatski ažurirati vaša pozadina baze na duljini teksta. Ako su gornji i donji jastučići isti, lijevi jastuci i desni su isti, možete upotrijebiti skraćenicu kao CSS kratica:

Bilo bi korisnije ako stvorimo simbol gumba, ovako:

Gumb s Ikonom

Primijenite li ovaj mehanizam, možemo stvoriti gumb s ikonom dva:

Varijante gumba

Vjerujem da ste upoznati sa: gumb-zadani, opasnost od gumba, upozorenje gumba ... Ovo je mjesto na kojem će Preimenovati dodatak biti savršena kombinacija s Paddyjem. Prišao sam situaciji koja stvara puno simbola gumba, zatim obavio neke eksperimente, i tada sam ustanovio da moram smanjiti veličinu gumba. Sada samo odabiremo sve pozadine gumba> Fino i zamijeni naziv sloja> Promijenite veličinu prema sadržaju. Tumaralo! sve je opet uredno.

sastavni dio

Sada ćemo izgraditi popularnu komponentu, vodoravnu stavku:

Prije nego što krenem prema dolje, želim predstaviti Paddyjevu značajku automatskog poravnanja. Ova značajka pomaže nam uskladiti sve i ažurirati kad god svaki sloj promijeni veličinu. Više pojedinosti potražite u nastavku na cijelom popisu za varanje:

Paddy automatski poravnava list listova

Pomoću atomske metodologije dijelimo komponentu na: Avatar i Info. Podaci uključuju naslov i podnaslov:

Zahvaljujući značajki automatskog poravnanja Paddyja mogu vodoravno centrirati Avatar i informacije. Razmak između Avatar-a i Info-a je 16 piksela, pa grupa treba imati naziv "[16h m]". Razmak između naslova i podnaslova je 2 piksela, a dvije su stavke poravnate lijevo, tako da u info skupinu dodamo „[2v l]“. Napokon, struktura grupe trebala bi biti takva:

Složenije komponente

Sada gradimo složenije dijelove širine, ugniježđene komponente, odjeljak Popis:

Slijedite duh raspada bilo čega, razbijemo ga na manje komponente:

Sada ćemo vidjeti što se događa kad dodam novi predmet:

Nova će se stavka poravnati u grupu kao što su to stavke. Super povoljno!

Stranica / zaslona

Sada znamo kako napraviti neke komponente, spremni smo za izgradnju cjelovite stranice. Izradit ćemo 2 stranice: na ekranu za ukrcavanje i na početnom zaslonu:

Ukrcavanje

Sada ćemo testirati ovaj zaslon u različitim veličinama zaslona:

Početni zaslon

Zaslon dijelimo na 3 glavna odjeljka:

  • Zaglavlje stranice: Naslov stranice i Korisnički avatar
  • Vodoravni presjek.
  • Okomiti presjek.

Dodat ćemo više detalja da vidimo kako su sastavljene svake komponente:

Naslov stranice i avatar su okomito poravnajte središte.

Vodoravni presjek

  • Razmak između naslova i popisa je 24px → [24v l].
  • Razmak između stavke na popisu je 16px → [16h t].

Okomiti presjek

  • Razmak između naslova i popisa je 24px → [24v l].
  • Razmak između stavke na popisu je 24px → [24v l].

Konačno, imamo stranicu koja automatski organizira i usklađuje vaše komponente na svoj način. Sada ćemo popis zabrljati malo:

  • Promijenite veličinu sličice u vodoravnom dijelu.
  • Dodajte još predmeta u odjeljku okomito.

Bum! Sve je opet uredno!

Sada mogu sve brzo testirati. Stoga se mogu usredotočiti na iskustvo izgradnje, a ne na pritiskanje svakog piksela. Uz to, on također održava preciznost sastavnih dijelova i dosljednost između njih.

Zaključak

Upotrebljeni dodaci

  • Riža
  • Preimenuj to

4 stvari koje treba zapamtiti

Podijelite svoju stranicu na najmanje komade kao u ovoj knjizi Atomic.

Pozadina automatske veličine dodavanjem veličine [gornji desni donji lijevi dio] nazivu sloja pozadine.

Poravnajte sve u grupi dodavanjem tih niza u ime nadređene grupe:

  • Okomito: [t] => vrh, [m] => sredina, [b] => dno
  • Vodoravno: [l] => lijevo, [c] => središte, [r] => desno

Razdvojite sve u grupi dodavanjem tih nizova u ime nadređene grupe:

  • Okomito: [Xv], tj. [16v] => razmak između djece u okomitoj osi iznosi 16px.
  • Vodoravni: [Xh], tj. [24v] => razmak između djece u vodoravnoj osi je 24px.

Inspirirao me ovaj genijalan članak primijenio sam ovaj sličan mehanizam na svoj tijek rada i smislio neke dobre prakse kao što sam gore spomenuo.

Hvala na čitanju! Sretno skiciranje!

Ovaj je članak izvorno objavljen na mojoj web stranici ovdje. Želite znati više? Ja sam Duy Luong, dizajner proizvoda i razvojni programer. Pogledajte moj portfelj ovdje!