Kako načrtovati vsebino dogovora za odzivno oblikovanje
V nedavnem postu sem razpravljal o tem vizualne vsebine se nanaša na načrtovanje. Vendar je ta tema zelo podrobna in se razcepi na številne podteme, od katerih je ena vizualna organizacija za odzivne postavitve.
V tej objavi bi se rad poglobil v odzivno vsebino in pogledal nekaj najboljših praks za preureditev vsebine za manjše zaslone. V oblikovanju UI in UX za vsak projekt ni enega samega pravega odgovora, vendar obstajajo trendi, ki dobro delujejo, in iz teh trendov lahko gradite svoje ideje.
Preuredite Mreže v sezname
Vsako spletno mesto uporablja vrsto omrežja, ali je viden ali ne. Vsebina v trdnem omrežju se pogosto združuje vodoravno na širših monitorjih, vendar to ni smiselno na manjših napravah. Najboljše zdravilo je razčleniti te mreže na manjših zaslonih in pretvorite elemente v sezname.
Primer 1: Mestni svet Wellingtona
Oglejte si spletno stran mestnega sveta Wellington, ki uporablja številne odseki, oblikovani v mreži na domači strani.
Tam je majhna diaprojekcija kvadratnih povezav zmanjšuje kot se spremeni velikost okna brskalnika. Tudi del noge postane manjša, in na koncu pretvori v navpični seznam povezav.
Na zelo majhnih telefonih s širino 320px morate oblikovati velikost naprave. V primeru iPhone je naprava višja kot širša, zato je smiselno urediti vsebino na ta način.
Primer 2: Burgerji Mooyah
Oglejte si domačo stran Mooyaha in poskusite spremeniti velikost. Obstaja majhno območje diaprojekcije, ki vsebuje tri elemente na namiznem zaslonu, vendar to se skrči prikazati samo en element v mobilnem omrežju (dodajanje več skritih diapozitivov v gradnik).
Obe promocijski škatli, ki oglašujeta aplikacijo Mooyah in menije, ostajata fiksno ob strani dokler zaslon ne postane dovolj majhen da jih preuredite navpično.
The “Povežite se z nami!” prerazporeja vsebino tako, da vsaka socialna pošta dobi čim več prostora. Na splošno so širokozaslonski monitorji najširši in zasloni s pametnimi telefoni so najvišji.
Primer 3: Tematski trg
Pri načrtovanju postavitve z mrežo morate razmisliti širok in visok slog postavitve pred pisanjem ene vrstice kode. Tako boste pripravljeni zgraditi točke, ki so smiselne.
Stran s polno razporeditvijo omrežja mora biti zmanjšajte velikost polj preden jih razbijemo na novo vrstico. Na primer, Theme Market ima a fiksna največja širina 1240, in mreža vsebuje štiri bloke v vrstico.
Zaslon postane manjši zmanjšajte po širini, ampak na koncu zlomiti se do pustite tri polja v vrstici. Pri najmanjši velikosti dobite eno okence v vrstici in to ima veliko prostora da bi besedilo in posnetki sijali.
Vedno obstaja ravnotežje ohranjanje čim večjega števila informacij skupaj s potrebo naredite besedilo berljivo. Bolj ko gradite mrežne postavitve, lažje boste našli to ureditev vsebine.
Skrij ali odstrani stolpce
Širši monitorji in več podpore brskalniku razvijalcem omogoči, da zgradijo neverjetno kompleksne postavitve. Pogosto vidim bloge z tri ali celo štiri stolpce ki zavzamejo dober del zaslona.
Vendar manjše naprave potrebujejo pretok vsebine smiselno navpično. Našel sem dve možnosti za ravnanje s prevelikimi pregradami:
- Spustite jih pod glavno vsebino
- Skrij jih
Primer 1: Zaustavitev pritisnite
Oglejte si spletno stran Stop Press. Ima štiri navpične stolpce na namiznem monitorju.
Levi stolpec je navpični meni, naslednji stolpec pa je glavni stolpec z zadnjimi členi. Nato imamo dva različna stolpca stranske vrstice, ki se prelita z ekstra “na stran” vsebine.
Ko se okno brskalnika spremeni, se ti stolpci počasi zmanjšajte. Prvi je leva navigacija, ki se skrije za ikono menija hamburgerja.
Naslednja prekinitvena točka skriva srednji stolpec skupaj z vrhunskimi gumbi za skupno rabo. Nato končno na najmanjših zaslonih, desna stranska vrstica popolnoma izgine zapušča samo primarni sredinski stolpec vsebine.
Nobena vsebina stranske vrstice se ne prikaže pod glavno vsebino. To je popolnoma skrit pred pogledom, in to je povsem sprejemljiva izbira zmanjšajte obremenitev strani in ohraniti višino drsnega traku na primerni velikosti.
Po drugi strani pa veliko blogov premaknete stransko vrstico pod glavno vsebino kot na Empire Art Empire, ki s povezavami v stranski vrstici sčasoma prikaže podobna delovna mesta spustite pod vsebino.
Primer 2: Blog želja
Blog želja tudi popolnoma odstrani stransko vrstico na zaslonu v manjših oknih. Področje te stranske vrstice običajno vsebuje oglaševanje, obrazce za prijavo in povezane povezave za objavo. Nobena od teh vsebin ni bistvenega pomena, lahko pa doda vrednost obiskovalcem.
Rad sledim a hibridni pristop kjer premaknem stransko vrstico pod vsebino, pa tudi skrijem nekaj elementov v stranski vrstici mimo določene točke prekinitve.
Če imam na primer tri bloke oglasov v celotni postavitvi, lahko skrijem dva od teh oglasnih prostorov na mobilnem. To omogoča dostop do vsebine stranske vrstice ampak ne zapira strani s pretirano vsebino.
Primer 3: Madame Gautier
Všeč mi je tudi, kako Madame Gautier uporablja njihovo “Zadnje novice” stranski vrstici na domači strani. Sčasoma pade pod vsebino, in zavzame polni pogled na strani.
Skoraj vsaka spletna stran ima v načrtu vsaj eno stransko vrstico. Ne glede na to, ali je to stranska vrstica za celotno spletno mesto ali samo nekaj, kar se pojavi na predlogi strani vzporedni slog oblikovanja je priljubljena zato, ker je ustreza več vsebini na zaslonu.
Izbira je tvoja kako ravnati z vsebino. Stransko vrstico lahko spustite nižje, jo popolnoma skrijete ali uporabite hibrid teh dveh tehnik. Ampak morate izbrati na podlagi pomembnosti stranske vrstice, in njegovo nujnosti na stran.
Prilagodite & stisnite robove
Vedno bo prišlo do točke, kjer vsebine ni mogoče stisniti nadaljevati in en del mora spustite pod drugo.
Z prilagajanje robov pred znižanjem vsebine na strani bralcem omogočite širšo izbiro vsebine.
Primer 1: en svet
Noga na enem svetu je odličen primer. Ima strani povezovalnih povezav so plavale desno z e-poštni obrazec za prijavo na levi.
Ko se postavitev spremeni, se robovi in padci med temi elementi skrčijo. Stolpci povezave zbližajte se, in obrazec za prijavo postane malo manjša, tudi.
Preko določene točke je smiselno spustite povezave pod obrazec za prijavo, in dajte nogo dovolj prostora za dihanje.
Da, stran je daljša, in da, potrebno je več truda, da se pomaknete navzdol tako daleč, toda na teh manjših prelomnih točkah lahko domnevate, da so uporabniki na vertikalno usmerjenih napravah.
Primer 2: Zlati otoki
Še en primer, ki ga imam rad, je domača stran zlatih otokov s svojimi edinstven slog navigacije. Ko spremenite velikost okna brskalnika, boste našli nav povezave stisnite skupaj. Sčasoma prelom iz ene vrstice v dve vrstici, nato pa v stolpce v najmanjši velikosti.
Druge postavke na strani po istem vzorcu. Ta primer prikazuje moč spremembe marž preden popolnoma preuredite postavitev.
Navpični tok na manjših zaslonih
Vsebina strani mora biti naravno, in navpična poravnava smiselno na mobilnem. To pomeni, da morate upoštevati bloke vsebine na strani ustrezno posodobite slog vsebine. To vključuje odstavke, glave, bloke, neurejene sezname in tudi vsebine po meri.
Primer 1: Posamezna pošta BodyBuilding.com
Vzemite za primer to delovno mesto za BodyBuilding, ki uporablja majhne škatle pokazati različne glutejeve treninge.
Ta polja vključujejo sličice na desni strani dokazati vajo. Na manjših zaslonih so te sličice razčlenite na novo vrstico, in na koncu postavite drug na drugega.
Vaš odzivni CSS bi moral upoštevati te drobne podrobnosti za vsako stran spletnega mesta.
Primer 2: Fair Vanity
Za večji primer si oglejte domačo stran Vanity Fair, ki popolnoma preuredi drsnik predstavljene zgodbe. Na celozaslonskem namizju zgodbe prikazujejo naslove z eno prikazano sliko na strani. Ker brskalnik spremeni velikost, ta razdelek z zgodbami postane drsni vrtiljak.
Vmesnik sam popolnoma spremeni z dodajanjem navigacije s puščicami, puščicami in predstavljenimi slikami za vsako zgodbo na seznamu. Njihov celoten seznam člankov je več “navpično”, vendar je ta postavitev bolj zahtevna za delovanje na mobilnem zaslonu, zato je menjava v drsni vrtiljak boljša možnost.
Misli več o pretoku uporabnika namesto pretoka vsebine. Vsebina vedno ni treba prisiliti v vertikalno postavitev na majhnem zaslonu. Samo pomislite, kako organizirati vsebino tako, da podpira navpično brskanje.
Zaključne misli
Odziven design je bistvenega pomena v teh dneh, in vsak spletni oblikovalec in razvijalec mora razumeti, kako deluje. Obiskovalci pričakujejo, da bodo vse spletne strani mobilno prijazno. Kadarkoli se spotaknem na spletno mesto, ki se ne odziva, se obremenjujem ob pogledu na vodoravni drsni trak.
Sledite nasvetom za to objavo načrtovanje strategij oblikovanja za preureditev vsebine za najboljšo uporabniško izkušnjo na vseh napravah.
