Kako planirati uređenje sadržaja za odgovarajući dizajn
U nedavnom postu, raspravljao sam o tome vizualni sadržaj odnosi se na izgleda. Međutim, ova tema je vrlo detaljna, i rascjepkana na mnoge pod-teme, od kojih je jedna vizualna organizacija za odgovarajući raspored.
U ovom postu želio bih se dublje upuštati u odgovarajući sadržaj kako bih pogledao neke najbolje prakse za preraspodjela sadržaja za manje zaslone. U UI i UX dizajnu ne postoji jedan pravi odgovor za svaki projekt, ali postoje trendovi koji dobro funkcioniraju, iz tih trendova možete izgraditi vlastite ideje.
Preuredite rešetke na popise
Svaka web-lokacija koristi neku vrstu mreže bilo da je vidljiva ili ne. Sadržaj u čvrstoj mreži često se grupira vodoravno na širim monitorima, ali to nema smisla na manjim uređajima. Najbolji lijek je razbiti te mreže na manjim ekranima i pretvoriti stavke u popise.
Primjer 1: Gradsko vijeće Wellingtona
Pogledajte internetsku stranicu Gradskog vijeća Wellingtona koja koristi brojne odjeljci u obliku mreže na početnoj stranici.
Postoji mali slideshow kvadratnih veza koje smanjuje kako se prozor prozora preglednika mijenja. Dio podnožja također postaje manja, i na kraju pretvara u vertikalni popis veza.
Na vrlo malim telefonima širine 320 piksela morate dizajnirati veličinu uređaja. U slučaju iPhone uređaja, uređaj je viši nego širi pa ima smisla urediti sadržaj na taj način.
Primjer 2: Mooyah burgeri
Pogledajte početnu stranicu za Mooyah i pokušajte promijeniti raspored. Postoji mali prostor za prikaz slajdova koji sadrži tri stavke na zaslonu radne površine, ali to smanjuje se za prikaz samo jedne stavke na mobilnom uređaju (dodavanje više skrivenih slajdova u widget).
Dvije promotivne kutije za oglašavanje Mooyah aplikacije i izbornika ostaju fiksirane jedna uz drugu dok zaslon ne postane dovoljno mali da ih prerasporedite okomito.
“Poveži se s nama!” odjeljak također preraspodjeljuje sadržaj tako da svaka društvena pošta dobiva što više prostora. Općenito govoreći, monitori sa širokim zaslonom su najširi, a zasloni s pametnim telefonima su najviši.
Primjer 3: Tematsko tržište
Prilikom projektiranja rasporeda s rešetkom, razmislite široke i visoke stilove izgleda prije pisanja jednog retka koda. Tako ćete biti spremni graditi prijelomne točke koje imaju smisla.
Stranica s punim rasporedom mreže trebala bi smanjite veličinu kutija prije razbijanja na novu liniju. Na primjer, Theme Market ima a fiksna maksimalna širina od 1240, a rešetka sadrži četiri bloka po redu.
Kako se na ekranu smanjuju ovi blokovi smanjite u širinu, ali na kraju razbiti do ostavite tri polja po redu. Pri najmanjoj veličini dobivate po jedan okvir po redu, i to ima dosta mjesta da bi tekst i slike bile sjajne.
Uvijek postoji ravnoteža čuvanje što je moguće više informacija u kombinaciji s potrebom učiniti tekst čitljivim. Što više gradite raspored mreže, to ćete lakše pronaći bilanca sadržaja.
Sakrij ili ukloni stupce
Širi monitori i više podrške za preglednik omogućiti programerima da izgrade nevjerojatno složene izglede. Često vidim blogove s tri ili čak četiri stupca koji zauzimaju dobar dio zaslona.
Međutim, manjim uređajima potreban je protok sadržaja ima smisla vertikalno. Pronašao sam dvije opcije rukovanje prekomjernim bočnim trakama:
- Spustite ih ispod glavnog sadržaja
- Sakrijte ih u potpunosti
Primjer 1: Zaustavi pritisnite
Pogledajte web stranicu Stop Press. Ima četiri okomita stupca na stolnom monitoru.
Lijevi stupac je vertikalni navigacijski izbornik, sljedeći stupac je glavni stupac sadržaja s nedavnim člancima. Zatim imamo dva različita stupca bočne trake koji su preplavljeni dodatkom “u stranu” sadržaj.
Kako se prozor preglednika mijenja, ovi stupci polako smanjiti u veličini. Prvi koji je otišao je lijeva navigacija koja se skriva iza ikone izbornika hamburgera.
Sljedeća točka prekida skriva srednji stupac zajedno s gornjim gumbima društvenog dijeljenja. Na kraju na najmanjim ekranima, krajnja desna stranica potpuno nestaje ostavljajući samo primarni središnji stup sadržaja.
Ni jedan sadržaj bočne trake ne pojavljuje se ispod glavnog sadržaja. to je potpuno skriven od pogleda, i to je savršeno prihvatljiv izbor smanjite učitavanje stranice i zadržati visinu klizača na pristojnoj veličini.
S druge strane, mnogi blogovi premjestite bočnu traku ispod glavnog sadržaja kao na konceptnom carstvu koje sadrži povezane postove u bočnoj traci spustite se ispod sadržaja.
Primjer 2: Blog odgovora
Također i Blog želja potpuno uklanja bočnu traku sa zaslona na manjim prozorima. Ovo područje bočne trake obično sadrži oglašavanje, obrasce za prijavu i povezane veze posta. Ništa od ovog sadržaja nije od vitalnog značaja, ali može dodati vrijednost posjetiteljima.
Volim slijediti hibridni pristup gdje pomičem bočnu traku ispod sadržaja, ali i sakrijem nekoliko stavki u bočnoj traci iza određene točke prekida.
Na primjer, ako imam tri bloka oglasa u punom rasporedu, mogu sakriti dva od tih oglasnih mjesta na mobilnom uređaju. Ovaj čini sadržaj bočne trake dostupnim ali ne pretrpi stranicu s pretjeranim sadržajem.
Primjer 3: Madame Gautier
Također mi se sviđa kako Madame Gautier koristi njihovu “Najnovije vijesti” na početnoj stranici. To na kraju pada ispod sadržaja, i zauzima cjeloviti položaj na stranici.
Gotovo svaka web stranica će imati barem jednu sidebar u dizajnu. Bilo da se radi o bočnoj traci za cijelu web-lokaciju ili samo o nečemu što se pojavljuje na predlošku stranice, stil dizajna jedan do drugog popularan je zbog toga više sadržaja na ekranu.
Tvoj izbor kako se nositi sa sadržajem. Možete spustiti bočnu traku niže, sve je sakriti ili upotrijebiti hibrid ove dvije tehnike. Ali bi trebao napraviti svoj izbor na temelju relevantnosti bočne trake, I je nužnost na stranicu.
Podesite i stisnite margine
Uvijek će postojati točka u kojoj sadržaj se ne može stisnuti dalje, i jedan odjeljak treba ispustite ispod druge.
Po podešavanje margina prije smanjivanja sadržaja na stranici, čitateljima dajete širu širinu sadržaja za odabir.
Primjer 1: Jedan svijet
Podnožje na jednom svijetu je odličan primjer. Ima sitewide podnožja linkovi pluta s pravom obrazac za prijavu putem e-pošte na lijevo.
Kako se raspored mijenja, rubovi i paddovi između tih elemenata se smanjuju. Stupci veze približite se, i obrazac za prijavu postaje malo manji, isto.
Preko određene točke, to samo ima smisla ispustite veze ispod obrasca za prijavu, i dati podnožje dosta prostora za disanje.
Da, stranica je dulja, i da, potrebno je više truda za pomicanje prema dolje tako daleko, ali na tim malim točkama prekida možete pretpostaviti da su korisnici na vertikalno orijentiranim uređajima.
Primjer 2: Zlatni otoci
Još jedan primjer koji volim je početna stranica Golden Islesa sa svojom jedinstveni stil navigacije. Kada promijenite veličinu prozora preglednika, nav linkovi stisnite zajedno. Na kraju oni prekid s jedne linije u dva reda, a zatim dolje u stupce u najmanjoj veličini.
Ostale stavke na stranici slijedite isti uzorak. Ovaj primjer pokazuje moć margine za promjenu veličine prije potpunog preuređivanja rasporeda.
Vertikalni protok na manjim zaslonima
Sadržaj stranice treba prirodno teče, i vertikalno poravnanje ima smisla na mobitelu. To znači da morate razmotriti blokove sadržaja na stranici sukladno tome ažurirajte stil sadržaja. To uključuje paragrafe, zaglavlja, blokove, neuređene popise te okvire prilagođenog sadržaja.
Primjer 1: BodyBuilding.com pojedinačna pošta
Uzmi za primjer ovaj BodyBuilding post koji koristi male kutije pokazati različite glute vježbe.
Te kutije uključuju minijature s desne strane pokazati vježbu. Na manjim zaslonima, te minijature razbiti na novu liniju, i na kraju naslagati jedan na drugi.
Vaš odgovarajući CSS trebao bi uzeti u obzir ove sitnice u svakoj stranici web-mjesta.
Primjer 2: Sajam ispraznosti
Za veći primjer, pogledajte početnu stranicu Vanity Faira koja potpuno preuređuje klizač istaknute priče. Na radnoj površini preko cijelog zaslona, priče navode naslove s jednom istaknutom slikom koja se prikazuje sa strane. Budući da preglednik mijenja veličinu manje, ovaj odjeljak gornjih vijesti postaje klizni karusel.
Samo sučelje potpuno se mijenja dodavanjem navigacije točkama, strelicama i istaknutim slikama za svaku priču na popisu. Njihov je cijeli popis članaka više “vertikala”, ali ovaj je raspored složeniji za rad na mobilnom zaslonu, tako da je njegova zamjena u klizni karusel bolja opcija.
Razmišljati više o tijeku korisnika umjesto toka sadržaja. Sadržaj ne mora uvijek biti prisiljen na vertikalni raspored na malom zaslonu. Razmislite samo o tome kako organizirati sadržaj na takav način podržava okomito pregledavanje.
Završne misli
Odgovarajući dizajn je bitan ovih dana, a svaki bi web-dizajner i programer trebao razumjeti kako to radi. Posjetitelji očekuju da sve web-lokacije budu prilagođena mobilnim uređajima. Kad god sam posrnuti na ne-odgovarajući web stranice sam crtati na očima tog horizontalnog klizača.
Slijedite savjete za ovaj post planiranje dizajnerskih strategija za preraspodjelu sadržaja za najbolje moguće korisničko iskustvo na svim uređajima.
