Kaip suplanuoti turinio išdėstymą atsakingam dizainui

Pastaruoju metu aš aptariau, kaip vaizdinis turinys susijęs su maketavimo dizainas. Tačiau šis dalykas yra labai išsamus, o skiltelės į daugelį temų, iš kurių viena yra vizualinė organizacija reaguojant į maketą.

Šiame pranešime norėčiau giliau įsisąmoninti turinį, kad galėčiau ieškoti geriausios praktikos turinio pertvarkymas mažesniems ekranams. „UI“ ir „UX“ dizaine nėra vieno teisingo atsakymo kiekvienam projektui, bet yra gerai veikiančios tendencijos, ir iš šių tendencijų galite sukurti savo idėjas.

Pertvarkykite tinklus į sąrašus

Kiekviena svetainė naudoja tam tikro tipo tinklą, ar jis matomas, ar ne. Kietame tinkle esantis turinys dažnai suskirsto horizontaliai į platesnius monitorius, tačiau tai nėra prasminga mažesniuose įrenginiuose. Geriausia priemonė yra suskirstyti šiuos tinklus į mažesnius ekranus ir konvertuoti elementus į sąrašus.

1 pavyzdys: Velingtono miesto taryba

Pažvelkite į Wellingtono miesto tarybos svetainę, kurioje yra keletas tinklelio formos skyriai pagrindiniame puslapyje.

Tai yra maža kvadratinių nuotraukų demonstracija sumažėja pakeitus naršyklės langą. Taip pat ir poraštės dalis sumažėja, ir galiausiai konvertuoja į vertikalų nuorodų sąrašą.

Labai mažuose telefonuose, kurių plotis yra 320 pikselių, reikia sukurti prietaiso dydį. „IPhone“ atveju prietaisas yra aukštesnis nei platesnis, todėl tikslinga organizuoti turinį tokiu būdu.

2 pavyzdys: Mooyah Burgers

Pažvelkite į Mooyah pagrindinį puslapį ir pabandykite pakeisti išdėstymo dydį. Yra maža skaidrių demonstravimo sritis, kurioje yra trys elementai darbalaukio ekrane, bet tai sumažėja mobiliajame telefone rodyti tik vieną elementą (pridėjus daugiau paslėptų skaidrių prie valdiklio).

Du reklamos laukeliai, reklamuojantys „Mooyah“ programą ir meniu, fiksuoti vienas šalia kito kol ekranas tampa pakankamai mažas juos pertvarkyti vertikaliai.

The “Susisiekite su mumis!” skyriuje taip pat pertvarkomas turinys, kad kiekvienas socialinis pranešimas gauna kuo daugiau vietos. Apskritai plačiaekraniai monitoriai yra plačiausios ir išmaniojo telefono ekranai yra aukščiausi.

3 pavyzdys: teminė rinka

Kuriant maketą su tinkleliu, turėtumėte apsvarstyti tiek platus, tiek aukštas išdėstymo stilius prieš rašydami vieną kodo eilutę. Tokiu būdu jūs būsite pasiruošę sukurti prasmės taškų.

Turėtų būti puslapis su visais tinklelio išdėstymais sumažinti langelių dydį prieš juos perkeliant į naują eilutę. Pavyzdžiui, teminė rinka turi a fiksuotas maksimalus plotis 1240, ir tinklelis yra keturi blokai per eilę.

Kadangi ekranas sumažina šiuos blokus sumažinti plotį, bet galiausiai palūžti į palikite tris langelius po eilutę. Mažiausiu dydžiu gausite vieną langelį po eilutę ir turi daug vietos kad tekstas ir vaizdai blizgėtų.

Visada yra pusiausvyra kuo daugiau informacijos kartu su būtinybe tekstą skaityti. Kuo daugiau sukursite tinklelį, tuo lengviau tai surasti turinio išdėstymo balansas.

Slėpti arba pašalinti stulpelius

Platesni monitoriai ir daugiau naršyklės palaikymo leidžia kūrėjams sukurti neįtikėtinai sudėtingus išdėstymus. Dažnai matau tinklaraščius trys ar net keturi stulpeliai kuri užima gerą ekrano dalį.

Tačiau mažesniems įrenginiams reikia turinio srauto vertikaliai. Radau dvi parinktis tvarkyti pernelyg dideles šonines juostas:

1. Nuleiskite juos po pagrindiniu turiniu
2. Paslėpti juos visiškai

1 pavyzdys: „Stop Press“

Pažvelkite į „Stop Press“ svetainę. Tai turi keturios vertikalios stulpeliai mano darbalaukio monitoriuje.

Kairysis stulpelis yra vertikalus Nav meniu, kitas stulpelis yra pagrindinis turinys, kuriame yra naujausi straipsniai. Tada mes turime du skirtingus šoninės juostos stulpelius, perpildytus papildomais “nuošalyje” turinys.

Pakeitus naršyklės langą, šie stulpeliai lėtai sumažinti. Pirmoji eiti į kairę navigaciją, kuri paslėpta už mėsainių meniu piktogramos.

Kitas persilaužimo taškas slepia vidurinį stulpelį kartu su aukščiausiais socialinio bendrinimo mygtukais. Tada pagaliau mažiausiuose ekranuose visiškai išnyksta dešinė pusė paliekant tik pagrindinį centrinį stulpelį turinio.

Nei vienas iš šoninės juostos turinio nėra rodomas po pagrindiniu turiniu. Tai visiškai paslėptas nuo vaizdo, ir tai yra visiškai priimtinas pasirinkimas sumažinti puslapio apkrovą ir išlaikyti slinkties juostos aukštį tinkamo dydžio.

Kita vertus, daugelis dienoraščių perkelkite šoninę juostą po pagrindiniu turiniu patinka „Concept Art Empire“, kuriai būdingi susiję įrašai šoninėje juostoje nukristi žemiau turinio.

2 pavyzdys

Taip pat taip pat pageidaujamas dienoraštis visiškai pašalina šoninę juostą iš ekrano mažesnėse peržiūros srityse. Šioje šoninės juostos srityje paprastai yra reklamos, registracijos formų ir susijusių nuorodų. Nė vienas šio turinio nėra gyvybiškai svarbus, tačiau jis gali suteikti pridėtinę vertę lankytojams.

Man patinka sekti a hibridinis požiūris kur perkeliu šoninę juostą po turiniu, bet taip pat slėpiu kelis elementus šoninėje juostoje, esančioje praeityje tam tikru tašku.

Pvz., Jei turiu tris skelbimų blokus visame išdėstyme, galiu paslėpti du iš tų skelbimų vietų mobiliajame telefone. Tai leidžia prieinamą šoninės juostos turinį bet nepažeidžia puslapio su per dideliu turiniu.

3 pavyzdys: Madame Gautier

Aš taip pat mėgstu, kaip Madame Gautier naudojasi “Naujausios naujienos” šoninę juostą pagrindiniame puslapyje. Tai galiausiai nukrenta žemiau turinio, ir užima visą vaizdą puslapyje.

Beveik kiekvienoje interneto svetainėje bus bent viena šoninė juosta. Nesvarbu, ar tai yra visos svetainės šoninė juosta, ar tik kažkas, kas rodoma puslapio šablone, šoninio dizaino stilius yra populiarus, nes jis tinka daugiau turinio ekrane.

Tai tavo pasirinkimas kaip tvarkyti turinį. Šoninę juostą galite nuleisti žemiau, paslėpti jį visiškai arba naudoti šių dviejų metodų hibridą. Bet turėtumėte pasirinkti remiantis šoninės juostos tinkamumu, ir tai būtinybė į puslapį.

Nustatykite ir išspauskite paraštes

Visada bus taškas, kur turinio negalima spausti toliau, ir viename skyriuje reikia žemiau kito.

Iki koreguoti paraštes prieš sumažindami puslapio turinį, skaitytojams suteikiate platesnį pasirinkimo turinį.

1 pavyzdys: vienas pasaulis

Vieno pasaulio poraštė yra puikus pavyzdys. Tai turi sitewide poraštės nuorodos plaukiojo teisę su el. pašto registracijos forma kairėje.

Pakeitus maketą, tarp šių elementų esančių paraščių ir polių sumažėja. Nuorodų stulpeliai priartėti, ir registracijos formą šiek tiek mažesnis, taip pat.

Praeityje tam tikru momentu tai tiesiog prasminga nuleiskite nuorodas po registracijos forma, ir duokite poraštę daug erdvės kvėpuoti.

Taip, jis daro puslapį ilgesnį laiką, ir taip, prireiks daugiau pastangų, kad slinktumėte iki šiol, bet šiais mažesniais taškais galite tikėtis, kad vartotojai yra vertikaliai orientuotuose įrenginiuose.

2 pavyzdys: Auksinės salos

Kitas pavyzdys, kurį myliu, yra „Auksinių salų“ pagrindinis puslapis unikalus navigacijos stilius. Kai keičiate naršyklės lango dydį, navigacijos nuorodos suspausti. Galų gale jie pertrauka iš vienos linijos į dvi eilutes, tada žemyn į mažiausio dydžio stulpelius.

Kiti puslapio elementai laikykitės to paties modelio. Šis pavyzdys parodo Jėgos galingumą dydžio keitimo dydį prieš visiškai pertvarkydami išdėstymą.

Vertikalus srautas mažesniuose ekranuose

Puslapio turinys turėtų būti srautas natūraliai, ir vertikalus lygiavimas prasminga mobiliesiems. Tai reiškia, kad reikia apsvarstyti turinio blokų turinį atitinkamai atnaujinkite turinio stilių. Tai apima paragrafus, antraštes, bloknotus, neregistruotus sąrašus ir pasirinktinius turinio langelius.

1 pavyzdys: BodyBuilding.com Single Post

Paimkite, pavyzdžiui, šį „BodyBuilding“ postą naudoja mažas dėžutes parodyti skirtingas treniruotes.

Šios dėžutės apima miniatiūros dešinėje pusėje demonstruoti pratybas. Mažesniuose ekranuose šie miniatiūros suskirstyti į naują liniją, ir galiausiai sukrauti vienas ant kito.

Jūsų atsakingas CSS turėtų atsižvelgti į šią mažą detalę kiekviename svetainės puslapyje.

2 pavyzdys: „Vanity Fair“

Norėdami gauti didesnį pavyzdį, patikrinkite „Vanity Fair“ pagrindinį puslapį visiškai pertvarko rodomo stiklo slankiklį. Pilnaekraniame darbalaukyje pasakojimų sąraše yra antraštės su vienu vaizdiniu vaizdu, rodomu šone. Kadangi naršyklė keičia mažesnius dydžius, šis populiariausių istorijų skyrius tampa slankiuoju karuseliu.

Pati sąsaja visiškai pasikeičia pridedant taškų navigaciją, rodykles ir rodomus vaizdus kiekvienai sąrašo istorijai. Jų pilno ekrano sąrašas yra daugiau “vertikaliai”, tačiau šis išdėstymas yra sudėtingesnis darbui mobiliajame ekrane, todėl geresnis pasirinkimas - keisti jį į slankiąją karuselę.

Pagalvokite daugiau apie vartotojo srautą vietoj turinio srauto. Turinys ne visada reikia priversti vertikalų išdėstymą mažame ekrane. Pagalvokite, kaip organizuoti turinį tokiu būdu palaiko vertikalią naršymo patirtį.

Baigiamosios mintys

Atsparus dizainas yra būtinas šių dienų, ir kiekvienas interneto dizaineris ir kūrėjas turėtų suprasti, kaip jis veikia. Lankytojai tikisi, kad visos svetainės bus mobilus. Kai aš suklupsiu prie neatsakingo tinklalapio, aš žiūriu į tą horizontalią slinkties juostą.

Sekite patarimus šiame pranešime planavimo strategijų planavimas turinio pertvarkymui užtikrinti geriausią įmanomą vartotojo patirtį visuose įrenginiuose.