7 uobičajenih pogrešaka napravljenih uz responzivne makete

Responzivni dizajn više je nego samo trend popularnog dizajna , to je praktičan odgovor na sjajan pomak pregledavanja s radne površine na mobitel. Da bi preživjeli u trenutnom stanju u industriji, web dizajneri moraju podržavati više veličina zaslona i uređaja, a responzivni pristup (RWD) rješava puno tih problema.

Slika ljubaznošću PlasmaCompa, http://www.plasmacomp.com/blogs/are-you-making-these-responsive-design-mistakes

Slika ljubaznošću PlasmaCompa, http://www.plasmacomp.com/blogs/are-you-making-these-responsive-design-mistakes

Kao prijelazna faza koja idejama donosi oblik, makete imaju veliku težinu u procesu dizajniranja. Ovaj dio daje pregled najčešćih pogrešaka u maketi prilikom dizajniranja u upravljačkom pogonu, tako da možete biti sigurni da je vaš korak prema reakciji korak naprijed, a ne natrag.



01. Dizajniranje za uređaje, a ne za zaslone

Prema podatke pruža OpenSignal , na tržištu je sada 24.093 različita Android uređaja, u odnosu na 18.796 samo prošle godine - a to čak i ne računa iOS i druge uređaje.

Ova nevjerojatna raznolikost onemogućava ciljanje pojedinih uređaja. Pametnija strategija je usredotočiti se na veličinu zaslona.

Slika ljubaznošću Lukea Wrobelwskog: https://www.flickr.com/photos/lukew

Slika ljubaznošću Lukea Wrobelwskog: https://www.flickr.com/photos/lukew

Ne razmišljajte u terminima nosive opreme, telefona, tableta ili radne površine. Podijelite svoje makete po:

  • Mikro-ekrani
  • Mali ekrani
  • Srednja klasa
  • Veliki
  • Jako veliko

Određene dimenzije zaslona čine pouzdaniju metriku za određivanje veličine, jer se mnogi uređaji razlikuju. Razmislite o svim različitim veličinama zaslona za telefone: neki su veći od malih tableta.

kako slikati pastelama za početnike

Fokusiranje na veličinu zaslona također sprječava oslanjanje na veličinu uređaja za responzivne točke prekida, još jednu reaktivnu pogrešku makete koju ću sada opisati.

ipad air 2 crni petak 2017

02. Oslanjajući se samo na veličine uređaja za točke prekida

Uvijek je novi uređaj iza ugla, pa čak i ako uzmete u obzir točke zaustavljanja svakog dostupnog uređaja, vaša će responzivna web lokacija propasti kad se pojavi sljedeći veliki.

Slika ljubaznošću Stephanie Walter, http://www.inpixelitrust.fr/blog/illustration-content-is-like-water-et-traduction-responsive-webdesign-present-et-futur-de-ladaptation-mobile/

Slika ljubaznošću Stephanie Walter, http://www.inpixelitrust.fr/blog/illustration-content-is-like-water-et-traduction-responsive-webdesign-present-et-futur-de-ladaptation-mobile/

Kao što je objašnjeno u Najbolje prakse za korisničko sučelje po UXPin , 'nadograditi prema dizajnu, a ne prema uređaju':

  • Počnite s Prvo mobitel pristup: izradite maketu za najmanji zaslon, a zatim povećajte. Za referencu, iPhone u portretu širok je 320 piksela.
  • Ako puno vaših korisnika ima nosive uređaje, trebate razmotriti mikro-zaslone s još manjim razlučivostima. Apple Watch - najmanji nakon Vremena šljunka - ima širinu od 272 piksela.
  • Kako se vaš dizajn počinje osjećati napeto, dodajte medijski upiti da napravite sve potrebne promjene izgleda tako da vaš dizajn bude udoban i dobro funkcionira na svakom koraku.
  • Dizajn za maksimalnu širinu od 2000 piksela pokriva sve zaslone osim najvećih koji su danas dostupni. Prema najnovije statistike preglednika W3Schools , 99 posto posjetitelja ima rezolucije koje su ispod te veličine 2000 piksela.
  • Unesi osjetljive točke prekida temeljeno na potrebama dizajna kako bi se izbjeglo to neugodno međuprostorno stanje koje pada između uobičajenih veličina uređaja. Stvaranje dizajna koji 'odgovara' veličini zaslona priroda je RWD-a.

03. Zanemarivanje kontrola na dodir

Dodirne kontrole jedna su od velikih prednosti većine mobilnih uređaja: zabavni su, intuitivni i štede vrijeme. Ne zanemarujte ih na nekim uređajima jer ih drugi ne mogu koristiti. Evo nekoliko savjeta za uključivanje kontrola na dodir:

  • Upoznajte najbolje postupke za svaki uređaj. Na malim zaslonima donji lijevi kut je najlakše mjesto za pristup palcem, pa tamo smjestite svoje elemente s najvećim klikom. Međutim, za tablete, jer se drže drugačije, gornji kutovi su glavna stvar za dodir.
  • Ciljevi dodira (poput CTA gumba) moraju biti odgovarajuće veličine. Minimalne 44 točke su u skladu smjernice prilagođene debelim prstima.
  • Predloženi razmak između elemenata je najmanje 23pt kako bi se izbjegao klik pogrešnog.
  • Prilagodite se nedostatku stanja lebdenja. Možete zamijeniti funkcije aktivirane klikom ili otkriti elemente lebdenja u izvornom stanju od samog početka.
  • Ne izmišljajte kotač. Uobičajene geste rukama poput prevlačenja prstiju najbolje rade za navigaciju i druge značajke jer ih je korisnik već naučio.

04. Povezivanje sa sadržajem koji nije prilagođen mobilnim uređajima

Ne možete dizajnirati povezivanje posjetitelja s drugim stranicama ili sadržajem, bilo na vašoj web lokaciji ili negdje drugdje. Problem responzivnih iskustava je kada vaša agnostička web-lokacija povezuje na web stranice koje ne reagiraju.

Ako vaše responzivno web mjesto povezuje s vanjskim web mjestima, doista ne možete ništa učiniti, osim razmotriti alternativno web mjesto. Međutim, prilikom povezivanja s web lokacijama i resursima koje kontrolirate, uključujući mikro web stranice ili partnerske web stranice, želite osigurati da sve one pružaju dosljedno pozitivno iskustvo reagiranja.

05. Loše planiranje za veće zaslone

Predlažem pristup koji je prvenstveno mobilni, a ne samo mobilni. Iako su manji zasloni možda popularniji, 42% prometa i dalje dolaze od posjetitelja radne površine. Moraju se uzeti u obzir obje strane spektra veličine zaslona.

Slika ljubaznošću UXPina

Slika ljubaznošću UXPina

Evo nekoliko savjeta od Vodič za makete za razmatranje 'velike slike':

  • Morate učiniti više od jednostavnog povećanja dizajna manjih zaslona. Iskoristite dodatni prostor dodavanjem novih elemenata ili restrukturiranjem vizualne hijerarhije.
  • Provjerite kvalitetu slika - na većim zaslonima mogu izgledati mutnije.
  • Isto tako, provjerite čitljivost duljina linija. Optimalno je između 45 i 75 znakova. Možete koristiti bookmarklet od Chrisa Coyera kako biste testirali duljine linija vašeg dizajna.
  • Ne povećavajte fontove previše. Predimenzionirani fontovi zauzimaju značajan vodoravni prostor, što čitatelje može prisiliti na usporavanje ili preskakanje sadržaja.

06. Korištenje dosljedne navigacije kroz veličine zaslona

Dosljedna navigacija unutar uređaja definitivno je dobra stvar. Ali nemojte se vjenčati s jednim izgledom i pokušajte ga iznova stvarati na drugim uređajima. To se protivi onome što je prilagodljiv dizajn.

ono što napravite slikajući ili crtajući

Slika ljubaznošću FiveSimpleSteps (stolna računala)

Slika ljubaznošću FiveSimpleSteps (stolna računala)

Slika ljubaznošću FiveSimpleSteps (mobilni uređaj)

Slika ljubaznošću FiveSimpleSteps (mobilni uređaj)

Izvjesna je dosljednost dobra za održavanje dosljednog UX-a. Određeni elementi trebali bi ostati isti za izgradnju prepoznatljivog sučelja i predlaganje korisnicima kako koristiti korisničko sučelje na novom uređaju. Ovi bi elementi trebali ostati dosljedni:

  • Oznake veza ili gumba
  • Tipografski slovi
  • Tretmani u boji

Ipak, različite veličine zaslona zahtijevaju različite navigacijske sustave. Sljedeći elementi ne bi trebali ostati dosljedni jer uvažavaju nijanse određenih veličina zaslona:

  • Veličina gumba
  • Vizualni izgled
  • Navigacijska funkcionalnost - uključujući kontrole na dodir

Na primjer, navigacija na radnoj površini može stati statički na vrhu zaslona. Kada preradite izgled mobilnog zaslona, ​​možete učiniti navigaciju trajnom i smanjiti u veličini kako biste se maknuli s puta (ali zadržavajući sličnu shemu boja, tipografiju i oznake gumba).

07. Skrivanje sadržaja

Uobičajena zabluda jednom je presudila da su korisnici mobilnih uređaja užurbani i žele samo manju verziju 'cjelovite web stranice'. Sadržaj poput podataka za kontakt i uputa imao je prioritet, dok je drugi sadržaj bio skriven.

Sada znamo da većina mobilnih korisnika uopće nije mobilna 68% upotrebe događa se kod kuće . Većina korisnika želi cjelovito web mjesto na mobilnom uređaju. Nije skraćeno, već preoblikovano.

Slika ljubaznošću UXPina

Slika ljubaznošću UXPina

Poznavanje nečijeg preferiranog uređaja nije isto što i poznavanje željenog sadržaja. Ako je sadržaj relevantan za korisnike na jednom uređaju, velika je vjerojatnost da je relevantan za korisnike na drugom uređaju.

Štoviše, morate uzeti u obzir tijekove zadataka za više uređaja. Korisnici često započnu zadatak na jednom uređaju, a završe na drugom, prebacujući se između njih u procesu. Ograničavanje sadržaja ovisno o uređajima također ograničava način interakcije korisnika.

Predstavljajte sadržaj i dajte mu prioritet za različite veličine zaslona prema progresivnom poboljšanju , ali nikada nemojte sakriti ili ograničiti sam sadržaj.

kako očistiti četke za boje akrilnom bojom

Daljnje čitanje

Ovdje su savjeti samo pregled onoga što je dostupno u besplatnoj e-knjizi UX dizajnerski trendovi 2015. i 2016 .

Analizom 71 današnjeg najboljeg UX primjera, ovaj vodič dekonstruira korisne trendove u jednostavne taktike dizajna za svakodnevni dizajn.

Riječi: Jeremy Girard

Jeremy Girard voditelj je web dizajna / razvoja za Providence, sa sjedištem u Rhode Islandu Zamislite savjetnike za tehnologiju . Također predaje dizajn web stranica i front-end razvoj na Sveučilištu Rhode Island. Doprinosi sadržaju besplatna knjižnica dizajna suradničkom aplikacijom za izradu prototipova UXPin.

Kao ovo? Pročitajte ovo!

  • Kako dizajnirati makete koje programeri neće mrziti
  • 7 najboljih praksi za izradu maketa
  • 15 uobičajenih pogrešaka koje dizajneri čine