Trenutno stanje adaptivnog dizajna

Sanjam dan kada dizajniram sučelje koristeći sustavnu logiku i više nikada ne moram gurati pojedine predmete oko ploča različitih dimenzija. Dan o kojem se sanjam približava se i 2016. je bila nevjerojatna godina za adaptivni dizajn.

Mislio sam da ću trebati malo vremena za uzorak nekoliko popularnih alata za dizajn da usporedim gdje se nalaze sa njihovim karakteristikama adaptivnog izgleda.

Zašto adaptivni dizajn?

Kada su dizajnirane originalne iPhone aplikacije postojala je jedna veličina zaslona. Ovih dana postoji šest različitih veličina zaslona za iOS s dvije orijentacije za svaku. Ako želite podržati više zadataka na iPadu, možete dodati još četiri rasporeda u kombinaciju za ukupno 16 različitih mogućih izgleda za vaš prikaz. Dizajn za Android oduvijek je bio takav zbog raznolikosti uređaja.

Programerima je trebao bolji način izrade adaptivnih izgleda, jer postupak tvrdog kodiranja statičkih vrijednosti za različite prikaze nije bio skalabilan ili praktičan. Alati poput značajke automatskog izgleda sučelja graditelja sučelja u Xcode-u razvijeni su radi lakšeg programiranja ograničenja izgleda prilikom prilagođavanja različitim izgledima.

To je kako dodavanje ograničenja i uređivanje ograničenja izgleda u automatskom izgledu Xcode-a

Prije nego što sam bio dizajner, izrađivao sam web stranice koje su odgovarale na dizajn i za izradu aplikacija koristio sam alate poput automatskog izgleda. Ti su alati oblikovali način razmišljanja o tome kako dizajni mogu koristiti ograničenja kako bi se prilagodili svojim spremnicima. I dalje smatram da je to korisno razmišljanje prilikom dizajniranja i želim pristup toj istoj logici u svojim alatima za dizajn.

Skica - pametno mijenjanje veličine simbola

Budući da je Sketch moj glavni alat za statički dizajn, bio sam prilično zadovoljan kad su u srpnju 2016. dodali značajke za prilagodljivi izgled, a to su riješili dodavanjem 3 dodatne opcije alatu za promjenu veličine tijekom zadanog ponašanja „istezanja“. Tri nove opcije su:

  • Zakačite u kut
    Automatski pribada sloj u najbliži kut i ne mijenja veličinu ako su napravljene promjene.
  • Promjena veličine objekta
    Promijenit će veličinu sloja kad mu se promijeni matična grupa. To je optimalno kada želite da odnos između slojeva ostane isti, bez obzira na veličinu, kao u stvaranju ikona.
  • Lebdi na mjestu
    Sloj ne mijenja veličinu, ali postotak položaja je zadržan.

Ovo je rješenje dobro za dizajnera koji možda nije upoznat s načinom rada alata poput automatskog izgleda ili Flexbox-a. Pojednostavljuje vrste ograničenja i pokušava predvidjeti ponašanje na temelju položaja elementa unutar elementa koji ga okružuje.

Pogledajte ovaj članak o načinu na koji ove opcije djeluju detaljno plus nekoliko dobrih savjeta kako ih Peter Nowell koristiti.

Smatram da ovo rješenje djeluje prilično jednostavno za jednostavne izgledima, poput istezanja nekih stavki popisa vodoravno ili mijenjanja veličine trake s karticama, ali ono se raspada kada pokušam izgraditi potpuno prilagodljivo sučelje koje se može proširiti i smanjiti u dvije dimenzije.

Na primjer, pogledajte ovaj prikaz klijenta za chat. Kada je horizontalno skaliram, izvrsno djeluje.

Ovo postavljanje radi vodoravno

Ali kad ga okomito skaliram, pukne.

Ne radi okomito

Mogu izmijeniti svoje mogućnosti mijenjanja veličine kako bih učinio vertikalno ako promijenim sva ograničenja za takvo ponašanje, ali kad novu postavku horizontalno promijenim, ona se i dalje ruši. To je zato što su mi u mnogim slučajevima potrebna različita ograničenja svojstva za različite dimenzije.

S trenutačnim skupom opcija ne mogu stvoriti potpuno prilagodljiv izgled pomoću alata Sketch. To je čvrst uvodni korak u radu s ograničenjima i pojednostavljuje iskustvo nekoga novog u adaptivnom dizajnu.

Što Sketch dobiva pravo:

  • Najjednostavniji alat
  • Pokušajte predvidjeti što namjeravate učiniti na temelju lokacije elemenata
  • Povežite odnose s bilo kojim roditeljskim elementom

Na čemu Sketch treba raditi:

  • Dodatne ručne kontrole koje bi otključale predvidljive složene prilagodljive izgleda

Figma - ograničenja

Kad sam prvi put vidio Figmu, rekao sam, "web-dizajniran alat za dizajn ... dobro, ne", i vratio se o svom profesionalnom danu koristeći izvorno izgrađene profesionalne aplikacije. Moja greška.

U nekom trenutku u posljednjih nekoliko mjeseci bio sam inspiriran za testiranje Figme. Kad sam ga prvi put upotrijebio, pomislio sam: 'o, moj, ovo stvarno dobro funkcionira.' 'Glavni korak moje spoznaje da je Figma ozbiljan alat jest kada sam pokušao izgraditi dizajn koji je bio zaista složen i nije.' Kopča uopće. Zapravo sam se osjećao brže i više u kontroli s Figmom nego kod Sketcha.

Jedan od načina na koji Figma uspijeva je kako se nosi s ograničenjima. Prvi put kad sam se poigrao sa njegovim sustavom ograničenja stvarno sam bio uzbuđen jer je to ono o čemu sam godinama sanjao. Mogao sam kontrolirati odnos svakog elementa u obje dimenzije. U početku sučelje liči na način na koji se ograničenja prenose u Automatski izgled.

Evo kako izgleda Figmina ograničenje:

Element odabran na lijevoj strani povezan je s lijevom stranom ploče i centriran

Mnogo je slučajeva u kojima ovaj sustav stvarno dobro funkcionira i čini mi se zrelijim od implementacije Sketch-a. Još uvijek postoje scenariji u kojima želim više od alata.

Na primjer, mogu oblikovati ograničenja koja se odnose na umjetničku ploču, ali ne mogu stvoriti odnos sa sestrinskim elementima. U ovom primjeru želim biti sigurna da se dva reda nikada ne kreću više od manje od 8 dp, u automatskom izgledu mogao bih postaviti taj odnos sa statičkom vrijednošću s visokim prioritetom, pa kad izgled promijeni veličinu te udaljenosti zadržan. Na Figmi, prisiljen sam da dopustim da se skalira unutar umetničke ploče, što će proširiti ili smanjiti vrijednost 8dp na nešto veće ili manje kad prilagodim visinu roditeljskih elemenata.

Skaliranjem redova mijenja se podmetanje između, jer ja skaliram u odnosu na artboard

Moja druga opcija bila bi poravnavanje redaka u ploči s umetničkim pločama umjesto da ih skalirate.

Poravnavanje redaka ne dopušta mi da ih dopustim međusobnim interakcijama

Nijedna od ovih opcija ne daje mi željeni učinak. Nešto drugo što me muči je nemogućnost povezivanja elementa sa slojem roditeljske grupe. U prozoru za chat radne površine imamo dva okna: razgovore i trenutno odabrani razgovor. Ne mogu povezati lijeve mjehuriće s grupom za razgovor na Figmi, mogu ih povezati samo s umetničkom pločom.

Ni na koji način ne mogu predvidjeti gdje bi trebali biti smješteni mjehurići u odnosu na prikaz razgovora kad promijenim veličinu cijelog prikaza bez upotrebe "ljestvice". Ako koristim "skali", mjehurići će sami širiti širinu i izobličiti se što nije idealno.

Lijevi skup mjehurića ne može prepoznati na kojem mjestu ih treba postaviti u odnosu na grupu za razgovorOkomita promjena veličine umetničke ploče pruža nam očekivano ponašanje!
Ažuriranje: Postoji način da to stvarno postignete na Figmi! Nisam bio svjestan toga, ali možete staviti okvire unutar okvira. Ti će podokviri djelovati kao spremnici na koje će odgovarati ograničenja. Puno hvala Anjo Cerdeña što ste to istakli. Kako to radi možete pogledati ovdje: https://vimeo.com/146967683

Što Figma dobiva pravo:

  • Napredna ograničenja koja djeluju u mnogim scenarijima
  • Jasno sučelje, osjeća se kao pojednostavljeni alat za razvojne programere

Na čemu Figma treba raditi:

  • Odnosi moraju biti dostupni nadređenim elementima osim matičnoj ploči
  • Odnosi moraju biti dostupni sestrinskim elementima
  • Prednost sukobljenih ograničenja bilo bi lijepo

Podforma - osjetljiv dizajn

Podform je najnoviji kandidat koji je ovdje naveden. U igru ​​dolaze s nešto drugačijim mentalitetom od prethodnih alata.

  1. Podforma ne podržava tradicionalni grafički dizajn, već se isključivo bavi dizajnom sučelja
  2. To nije način da bude alat za početnike, ovo je alat dizajniran za profesionalce

Alat su ugradili s komponentama i ograničenjima u jezgru njihovog pokretačkog motora.

Subform je imao uspješan Kickstarter i otada radi na lansiranju. Testirao sam aplikaciju i iako je još uvijek u razvoju, zaista se približava rješenju adaptivnog izgleda kao i sve što sam koristio. Kao što je rečeno, nije bez cijene, a još nije savršeno.

Vjerojatno ne možete jednostavno uskočiti i početi koristiti Subform u svom punom potencijalu ako ste navikli koristiti alate poput Sketch i Figma. Proces dizajna može biti bitno drugačiji, a Subform stvara sesije o korištenju alata. Budite spremni napraviti neka istraživanja.

Ajmo sada uboditi moj primjer "8dp statičkog paddinga između redova" koji sam pokušao skinuti na Figmi. Podforma ne dopušta izravne sestrinske odnose elemenata, ali pruža druge alate za uklanjanje elemenata. Dodavanjem vertikalnih margina u redove mogu se pomoću podređenog alata za izgled na nadređenom spremniku grupirati redove okomito. Zatim, budući da su redovi postavljeni na skali od postotka nadređenog elementa, unutrašnjosti redaka će se skalirati. Margine koje drže redove zajedno ostat će jedna statička udaljenost. Prilično cool, ali definitivno ne odmah intuitivno.

Bez obzira na to što radim, vertikalna obloga između redova ostaje ista

Podforma je vrlo obećavajuća. Mnogi dizajneri nemaju iskustva u razvoju koji se bavim i pitam se koliko će njih biti voljno naučiti upravljati ovim alatom i koliko će im biti teško. Bez obzira na to, to se osjeća kao snažan pravac naprijed.

Što Podforma dobiva pravo:

  • Najsnažniji skup značajki za stvaranje prilagodljivih izgleda
  • Predvidivi rezultati ograničenja

Na onoj podformi treba raditi:

  • Nije odmah intuitivno za pridošlice
  • Nije nužno alat za igru, dizajniranje u Subformu djeluje najbolje kad imate jasne namjere

Zamotati

Iako je u ovo vrijeme učinjeno toliko posla na ovom prostoru, još uvijek ne mislim da je bilo koji od ovih alata tamo gdje trebaju biti da bi se stvorili potpuno prilagodljivi dizajni. Ako za izradu izgleda koristim Interface Builder, znam što će se dogoditi s tim izgledom u bilo kojoj situaciji. Osim podforme, ne osjećam tu razinu kontrole pomoću ovih alata za dizajn.

Iznenađen sam koliko sam zadovoljan implementacijom programa Sketch kada ih sve usporedim. Čini se vrlo osnovnim, ali na kraju je zaista koristan u praktičnim primjenama. Ako je Sketch također omogućio napredne značajke i ručne poništavanja slične onome što radi Figma, vjerujem da bih mogao stvoriti potpuno prilagodljive izgleda u Sketch-u zbog svoje sposobnosti povezivanja ograničenja s roditeljskom grupom.

Ažuriranje: Sada kada sam naučio da mogu koristiti okvire unutar okvira na Figmi za stvaranje odnosa roditelj-dijete, vjerujem da Figma ima blagu prednost u odnosu na Sketch. Mogućnost kontrole obje dimenzije ograničenja omogućava mi većinu kontrole koju bih trebao stvoriti u potpunosti prilagodljive dizajne.
Ažuriranje 16. svibnja 2017.: Sketch je danas objavio veliko ažuriranje kako bi promijenio veličinu kontrola. Ovo je sada moćno rješenje.

Hvala na čitanju! Preporučite ovo ili podijelite s prijateljem ako smatrate da je korisno. Ako želite još razgovarati o tim stvarima, udaljite me na Twitter @charliedeets. Živjeli!