Kuidas kujundada sisukorraldust tundliku disaini jaoks

Hiljuti postitasin, kuidas visuaalne sisu seostub kujundus. Kuid see teema on väga üksikasjalik ja lõhenevad paljudeks alateemateks, millest üks on visuaalne organisatsioon reageerivate paigutuste jaoks.

Selles postituses tahaksin sügavamale reageerida tundlikule sisule, et vaadata mõningaid parimaid tavasid sisu ümberkorraldamine väiksematele ekraanidele. UI & UX disainis pole iga projekti jaoks ühtegi õiget vastust, kuid on olemas suundumused, mis toimivad hästi, ja nendest suundumustest saate luua omaenda ideid.

Ümberkorraldage võrgud nimekirjadesse

Iga veebileht kasutab teatud tüüpi võrku, kas see on nähtav või mitte. Tahkes võrgus olev sisu koondab tihti laiemate monitoride horisontaalselt, kuid see ei ole väiksemate seadmete puhul mõttekas. Parim lahendus on nende võrkude lagunemine väiksematel ekraanidel ja teisendage üksused loenditeks.

Näide 1: Wellingtoni linnavolikogu

Heitke pilk Wellingtoni linnavolikogu veebisaidile, kus kasutatakse mitut ruudukujulised sektsioonid avalehel.

Seal on väike ruudu slaidiseanss vähendab brauseri akna suuruse muutmisel. Jaluse jagu muutub väiksemaks, ja lõpuks teisendab vertikaalseks linkide loendiks.

Väga väikestel telefonidel, mille laius on 320 pikslit, peate kujundama seadme suuruse. IPhone'i puhul on seade kõrgem kui lai, seega on mõttekas korraldada sisu nii.

Näide 2: Mooyah Burgers

Heitke pilk Mooyahi kodulehele ja proovige paigutuse suurust muuta. Seal on väike slaidiseansi ala, mis sisaldab töölaua ekraanil kolme üksust, kuid seda kahaneb näitama mobiilil ainult ühte üksust (lisades vidinale rohkem peidetud slaidid).

Kaks reklaamikasti, mis reklaamivad Mooyahi rakendust & menüüd, on fikseeritud kõrvuti kuni ekraan muutub piisavalt väikeseks neid vertikaalselt ümber paigutada.

The “võta meiega ühendust!” jagu muudab ka sisu ümber nii, et iga sotsiaalne postitus saab võimalikult palju ruumi. Üldiselt on laiekraani monitorid kõige laiemad ja nutitelefoni ekraanid on kõige kõrgemad.

Näide 3: teematurg

Võrgustikuga paigutuse kujundamisel peaksite kaaluma nii laia ja kõrge paigutusstiiliga enne ühe koodirea kirjutamist. Nii saate valmis looge mõttekäikuid.

Täisvõrgu paigutusega leht peaks olema vähendada kastide suurust enne nende rikkumist uuele reale. Näiteks on teematurul a fikseeritud maksimaalne laius 1240 ja võrk sisaldab neli rida rea ​​kohta.

Kuna ekraanil on need plokid väiksemad vähendada, kuid lõpuks lagunema kuni jätke kolm rida rea ​​kohta. Väikseimale suurusele saate ühe ruudu ja selle on palju ruumi teksti ja kujutiste särama.

Seal on alati tasakaal hoida võimalikult palju infot koos vajadusega muuta tekst loetavaks. Mida rohkem te võrgusüsteeme loote, seda lihtsam on see leida sisukorra tasakaal.

Peida või eemaldada veerud

Laiemad monitorid ja rohkem brauseri tuge võimaldada arendajatel ehitada uskumatult keerulisi paigutusi. Ma näen tihti blogisid kolm või isegi neli veergu mis võtavad osa ekraanist.

Kuid väiksemad seadmed vajavad seda sisu on mõistlik vertikaalselt. Ma leidsin kaks võimalust liigsete külgribade käitlemine:

1. Pange need peamise sisu alla
2. Peida need kokku

Näide 1: Stop Press

Vaadake veebilehte Stop Press. Sellel on neli vertikaalset veergu minu töölaua monitoril.

Vasak veerg on vertikaalne nav menüü, järgmine veerg on peamine sisu veerg viimaste artiklitega. Siis on meil kaks erinevat külgriba veergu, mis on täis ekstra “kõrvale” sisu.

Brauseri akna suuruse muutmisel need veerud vähendada aeglaselt. Esimene neist on vasakpoolne navigatsioon, mis peitub hamburgerimenüü ikooni taha.

Järgmine murdepunkt peidab keskmist veergu koos ülemise sotsiaalse jagamise nuppudega. Lõpuks kaob kõige väiksematel ekraanidel parem parempoolne külgriba jättes vaid esmase kesksamba sisu.

Ükski külgriba sisu ei kuvata põhisisu all. See on täielikult peidetud, ja see on täiesti vastuvõetav valik vähendada lehe koormust ja hoida kerimisriba kõrgust korralikus suuruses.

Teiselt poolt, paljud blogid liigutage külgriba põhisisu all nagu Concept Art Empire, mis külgribal on seotud postitusi, mis lõpuks sisu alla.

Näide 2: Soovin blogi

Soovi blogi ka eemaldab täielikult külgriba väiksematest vaatepunktidest. See külgriba ala sisaldab tavaliselt reklaami, registreerimisvorme ja nendega seotud postilinke. Ükski selle sisu pole oluline, kuid see võib anda külastajatele lisaväärtust.

Mulle meeldib järgida a hübriidne lähenemine kus ma liigutan külgriba sisu alla, aga ka peita mõned elemendid külgriba teatud murdepunkti möödudes.

Näiteks, kui mul on kolm paigutusplokki kogu paigutusega, võin varjata kaks neist reklaamiruumidest mobiilil. See muudab külgriba sisu ligipääsetavaks aga ei muuda lehekülge liigse sisuga.

Näide 3: Madame Gautier

Mulle meeldib ka see, kuidas Madame Gautier kasutab “Viimased uudised” külgriba. See lõpuks langeb alla sisu, ja võtab täisvaate positsiooni lehel.

Peaaegu igal veebisaidil on disainis vähemalt üks külgriba. Kas see on kogu saidi külgriba või lihtsalt midagi, mis ilmub lehe mallile kõrvuti disaini stiil on populaarne, sest see sobib rohkem sisu ekraanil.

See on sinu valik kuidas sisu töödelda. Võite külgriba langetada, seda varjata või kasutada nende kahe meetodi hübriidi. Aga te peaksite oma valiku tegema põhineb külgriba asjakohasusel, ja selle vajadus lehele.

Reguleeri & pigista marginaale

Seal on alati punkt, kus sisu ei saa pigistada edasi ja üks osa peab olema langege alla teise.

Kõrval marginaalide reguleerimine enne lehe sisu vähendamist annate lugejatele laiema valiku.

Näide 1: Üks maailm

Üks maailma jalus on suurepärane näide. Sellel on sitewide jalus lingid paremale e-posti registreerimise vorm vasakul.

Kui paigutus muutub, vähenevad nende elementide vahelised marginaalid ja paddings. Lingi veerud lähemale, ja registreerimisvorm muutub veidi väiksemaks, ka.

Mõne punkti möödudes on see lihtsalt mõttekas langetage registreerimisvormi all olevad lingid, ja anna jalus palju ruumi hingata.

Jah, see muudab lehekülje pikemaks ja jah, see võtab kaugemale, et seda kaugele kerida, kuid nendel väiksematel punktidel võite eeldada, et kasutajad on vertikaalselt orienteeritud seadmetel.

Näide 2: Kuldsed saared

Teine näide, mida ma armastan, on Golden Isles'i kodulehekülg, millel on oma unikaalne navigeerimisstiil. Kui muudate brauseri akna suurust, siis nav-linkid kokku suruda. Lõpuks nad murda ühest reast kahele reale, seejärel allapoole kõige väiksema suurusega veergudesse.

Muud lehekülje elemendid järgige sama mustrit. See näide demonstreerib marginaalide suuruse muutmine enne paigutuse täielikku ümberkorraldamist.

Vertikaalne vool väiksematel ekraanidel

Lehekülje sisu peaks olema voolu loomulikult, ja vertikaalne joondamine on mõistlik mobiilile. See tähendab, et peate kaaluma lehekülje sisu plokke värskendage sisu vastavalt. Siia kuuluvad lõiked, päised, blokkvoodid, järjestamata nimekirjad ja ka kohandatud sisu kastid.

Näide 1: BodyBuilding.com Single Post

Võtke näiteks see BodyBuilding postitus, mis kasutab väikesed kastid näidata erinevaid glute treeninguid.

Need kastid sisaldavad pisipildid paremal näidata ülesannet. Väiksematel ekraanidel on need pisipildid lõhkuda uuele reale, ja lõpuks üksteise peale.

Teie reageeriv CSS peaks seda veebilehe iga lehekülge arvesse võtma.

Näide 2: Vanity Fair

Suurema näite saamiseks vaadake Vanity Fairi kodulehekülge ümberkorraldab täies mahus lugu. Täisekraanil asuval töölaual kuvatakse lugude pealkirjad ühe nähtava pildiga, mis näitab külge. Kuna brauser suurendab väiksemat suurust, on see ülemine lugude osa muutub libisev karussell.

Liides ise täielikult muutuvad lisades punktide navigeerimise, nooled ja esiletõstetud pildid loendi iga loo jaoks. Nende täisekraanite nimekiri on rohkem “vertikaalne”, kuid see paigutus on mobiilsel ekraanil keerulisem, nii et selle muutmine libisevaks karusselliks on parem valik.

Mõtle rohkem kasutaja voolu kohta pigem teie sisuvoogu. Sisu ei pea alati olema sunnitud vertikaalsesse paigutusse väike ekraan. Mõelge lihtsalt sellele, kuidas sisu sellisel viisil organiseerida toetab vertikaalset sirvimiskogemust.

Mõtete sulgemine

Vastupidav disain on tänapäeval oluline ja iga veebidisainer ja arendaja peaksid mõistma, kuidas see toimib. Külastajad ootavad kõiki veebisaite mobiilne-sõbralik. Iga kord, kui ma komistun mitte-tundlikule veebisaidile, ma lähen selle horisontaalse kerimisriba silmis.

Järgige selle postituse nõuandeid kavandamisstrateegiate kavandamine sisu ümberkorraldamiseks parima võimaliku kasutuskogemuse saavutamiseks kõigis.