Kā plānot satura izkārtojumu atbildīgajam dizainam

Nesenā ziņojumā es apspriedu, kā vizuālo saturu attiecas uz izkārtojuma dizains. Tomēr šis temats ir ļoti detalizēts, un šķembas nonāk daudzās apakštēmām, no kurām viena ir vizuāla organizācija, kas nodrošina atsaucīgu izkārtojumu.

Šajā ziņojumā es vēlētos dziļāk pievērsties atsaucīgam saturam, lai aplūkotu dažas labākās prakses satura pārkārtošana mazākiem ekrāniem. UI un UX dizainā nav nevienas pareizas atbildes uz katru projektu, bet ir tendences, kas darbojas labi, un no šīm tendencēm jūs varat veidot savas idejas.

Pārkārtot režģus uz sarakstiem

Katra tīmekļa vietne izmanto kādu veidu režģi, vai tas ir redzams vai nē. Saturs cietā režģī bieži vien grupējas horizontāli uz plašākiem monitoriem, bet tas nav jēga mazākās ierīcēs. Labākais risinājums ir sadalīt šos tīklus uz mazākiem ekrāniem un pārvērst vienumus sarakstos.

1. piemērs: Velingtonas pilsētas dome

Apskatiet Wellington pilsētas domes tīmekļa vietni, kurā izmantots vairāki režģveida stili mājas lapā.

Ir neliela kvadrātveida slīdrāde, kas to saista samazinās mainās pārlūka logs. Arī kājenes sadaļa samazinās, un galu galā pārvēršas vertikālā saikņu sarakstā.

Ļoti mazos tālruņos, kuru platums ir 320 pikseļi, ir jāizstrādā ierīces lielums. IPhone gadījumā ierīce ir garāka par plašāku, tāpēc ir lietderīgi organizēt saturu šādā veidā.

2. piemērs: Mooyah Burgers

Paskatieties Mooyah mājas lapā un mēģiniet mainīt izkārtojumu. Ir neliela slaidrādes zona, kurā darbvirsmas ekrānā ir trīs vienumi, bet tas ir samazinās mobilajā ierīcē rādīt tikai vienu vienumu (pievienojot logrīkam vairāk slēptu slaidu).

Divas reklāmas kastes, kas reklamē Mooyah lietotni un izvēlni, ir fiksētas blakus līdz ekrāns kļūst pietiekami mazs pārkārtot tos vertikāli.

The “Sazinieties ar mums!” sadaļa arī pārkārto saturu tā, lai katrs sociālais post izpaužas pēc iespējas vairāk vietas. Vispārīgi runājot, platekrāna monitori ir visplašākie un viedtālruņu ekrāni ir visaugstākie.

3. piemērs: tematiskais tirgus

Izstrādājot izkārtojumu ar režģi, jāapsver gan plašs, gan garš izkārtojuma stils pirms viena koda rindas rakstīšanas. Tādā veidā jūs būsiet gatavs veidot pārtraukumus, kas ir jēga.

Lapai ar pilnu režģa izkārtojumu samazināt kastu izmēru pirms to pārrāvuma uz jaunu līniju. Piemēram, tematiskajā tirgū ir a fiksēts maksimālais platums no 1240. gada, un režģis satur četri bloki rindā.

Tā kā ekrāns samazinās šos blokus samazināt platumu, bet galu galā saplīst uz atstājiet trīs kastes katrā rindā. Vismazākajā izmērā jūs saņemat vienu lodziņu katrā rindā un to ir daudz vietas lai tekstu un attēlus spīdētu.

Vienmēr ir līdzsvars pēc iespējas vairāk informācijas kopā ar nepieciešamību padarīt tekstu salasāmu. Jo vairāk jūs veidojat režģa izkārtojumus, jo vieglāk būs to atrast satura struktūras līdzsvars.

Slēpt vai noņemt slejas

Plašāki monitori un vairāk pārlūkprogrammas atbalsta ļauj izstrādātājiem veidot neticami sarežģītus izkārtojumus. Es bieži redzu blogus trīs vai pat četras kolonnas kas aizņem labu ekrāna daļu.

Tomēr mazākām ierīcēm ir nepieciešama satura plūsma ir jēga vertikāli. Esmu atradis divas iespējas pārmērīgu sānjoslu apstrāde:

1. Nometiet tos zem galvenā satura
2. Slēpt tos pavisam

1. piemērs: Stop Press

Apskatiet Stop Press tīmekļa vietni. Tas ir četras vertikālās kolonnas darbvirsmas monitorā.

Kreisā sleja ir vertikāla navigācijas izvēlne, nākamā sleja ir galvenā satura sleja ar jaunākajiem rakstiem. Tad mums ir divas dažādas sānjoslas kolonnas, kas pārpildītas ar papildus “malā” saturu.

Tā kā pārlūkprogrammas logs mainās, šīs kolonnas lēnām samaziniet izmēru. Pirmais, kas iet, ir kreisā navigācija, kas tiek paslēpta aiz hamburgeru izvēlnes ikonas.

Nākamais pārtraukuma punkts slēpj vidējo kolonnu kopā ar galvenajām sociālās koplietošanas pogām. Tad beidzot uz mazākajiem ekrāniem pilnībā izzūd labās malas sānjosla atstājot tikai galveno centrālo kolonnu saturu.

Neviens no sānjoslas saturiem nav redzams zem galvenā satura. Tas ir pilnīgi paslēpta no skata, un tā ir pilnīgi pieņemama izvēle samazināt lapas slodzi un lai ritjoslas augstums būtu pienācīgs.

No otras puses, daudzi blogi pārvietojiet sānjoslu zem galvenā satura tāpat kā Concept Art Empire, kurā blakus esošie ziņojumi ir sānjoslā zemāk par saturu.

2. piemērs

Vēlaties atbildēt uz Blog pilnībā noņem sānjoslu no ekrāna mazākos skatu logos. Šajā sānjoslas apgabalā parasti ir reklāmas, pierakstīšanās veidlapas un saistītās pasta saites. Neviens no šiem materiāliem nav būtisks, bet tas var radīt pievienoto vērtību apmeklētājiem.

Man patīk sekot a hibrīda pieeja kur es pārvietoju sānu joslu zem satura, bet arī slēpt dažus vienumus sānjoslā, kas atrodas pirms noteiktā pārtraukuma punkta.

Piemēram, ja man ir trīs reklāmu bloki pilnā izkārtojumā, es varu slēpt divus no šiem reklāmu laukumiem mobilajā ierīcē. Tas padara sānjoslas saturu pieejamu bet neaizver lapu ar pārmērīgu saturu.

3. piemērs: Madame Gautier

Man arī patīk, kā Madame Gautier izmanto to “Jaunākās ziņas” sānjosla mājas lapā. Tas galu galā nokrīt zem satura, un aizņem pilnu skatījuma pozīciju lapā.

Gandrīz katrai tīmekļa vietnei būs vismaz viens sānjoslas dizains. Vai tas ir visas vietnes sānjosla vai tikai kaut kas, kas parādās lapas veidnē blakus dizaina stils ir populāra, jo tā der vairāk satura ekrānā.

Tā ir tava izvēle kā rīkoties ar saturu. Jūs varat nolaist sānjoslu zemāk, paslēpt to visu vai izmantot šo divu metožu hibrīdu. Bet jums vajadzētu izdarīt izvēli pamatojoties uz sānjoslas atbilstību, un tas ir nepieciešamību uz lapu.

Pielāgojiet un izspiediet robežas

Vienmēr būs vieta, kur saturu nevar izspiest tālāk, un vienai sadaļai kritums zem otra.

Līdz pielāgojot rezerves pirms lapas satura samazināšanas, lasītājiem varat izvēlēties plašāku satura izvēli.

1. piemērs: viena pasaule

Vienas pasaules kājene ir lielisks piemērs. Tas ir sitewide kājenes saites peldēja labi ar e-pasta pierakstīšanās veidlapa pa kreisi.

Tā kā izkārtojums mainās, starp šiem elementiem esošās starpības un polsterējumi samazinās. Saites kolonnas tuvināties, un pierakstīšanās veidlapu mazliet mazāks, arī.

Pagājušajā brīdī tam ir jēga nometiet saites zem pierakstīšanās veidlapas, un dodiet kājeni daudz vietas, kur elpot.

Jā, tas padara lapu ilgāku, un jā, tas aizņem vairāk pūļu, lai ritinātu uz leju līdz šim, bet šajos mazākajos pārtraukumos jūs varat pieņemt, ka lietotāji ir uz vertikāli orientētām ierīcēm.

2. piemērs: Zelta salas

Vēl viens piemērs, ko es mīlu, ir Zelta salu mājas lapa ar tās unikāls navigācijas stils. Kad maināt pārlūkprogrammas loga izmērus, nav saites saspiest kopā. Galu galā viņi pārtraukums no vienas līnijas divās rindās, tad uz leju kolonnās, kas ir vismazākās.

Citas lapas lapas izpildiet to pašu modeli. Šis piemērs parāda spēku izmēru maiņas izmēru maiņa pirms izkārtojuma pilnīgas pārkārtošanas.

Vertikālā plūsma mazākajos ekrānos

Lapas saturam jābūt plūsma dabiski, un vertikālā izlīdzināšana ir jēga mobilajā tālrunī. Tas nozīmē, ka ir jāapsver lapas satura bloki atbilstoši atjauniniet satura stilu. Tas ietver punktus, virsrakstus, bloknotes, neierobežotus sarakstus un arī pielāgotus satura lodziņus.

1. piemērs: BodyBuilding.com Single Post

Veikt, piemēram, šo BodyBuilding post, kas izmanto mazas kastes demonstrēt dažādus glute treniņus.

Šīs kastes ietver sīktēli labajā pusē demonstrēt vingrinājumu. Mazākos ekrānos šie sīktēli sadalīt uz jaunas līnijas, un galu galā kaudze viens otram.

Jūsu atsaucīgajai CSS ir jāņem vērā šī sīkā sīkrīka informācija par katru mājas lapas lapu.

2. piemērs: Vanity Fair

Lai iegūtu lielāku piemēru, apskatiet Vanity Fair mājas lapu pilnībā pārkārto attēloto stāstu slīdni. Pilnekrāna darbvirsmā stāstu sarakstos tiek parādīti virsraksti ar vienu redzamu attēlu, kas redzams uz sāniem. Tā kā pārlūkprogramma maina lielākus izmērus, šī populārākā sadaļa kļūst par bīdāmu karuseli.

Saskarne pati pilnībā mainās pievienojot dot navigāciju, bultas un attēlus katram sarakstam. Viņu pilnekrāna saraksts ir vairāk “vertikāli”, taču šis izkārtojums ir sarežģītāks darboties mobilajā ekrānā, tāpēc labāka izvēle ir to mainīt bīdāmā karuseļveida.

Padomā vairāk par lietotāja plūsmu nevis satura plūsmu. Saturs ne vienmēr ir nepieciešams piespiest vertikālā izkārtojumā uz mazā ekrāna. Padomājiet par to, kā organizēt saturu tādā veidā atbalsta vertikālu pārlūkošanas pieredzi.

Aizvērtās domas

Atbildīgs dizains ir būtisks šajās dienās, un katram tīmekļa dizainerim un attīstītājam ir jāsaprot, kā tas darbojas. Apmeklētāji sagaida, ka visas tīmekļa vietnes būs mobilais. Ikreiz, kad es paklupt uz neatsakāmu tīmekļa vietni, es redzu šo horizontālo ritjoslu.

Izpildiet šajā ziņojumā sniegtos padomus plānošanas stratēģiju plānošana satura pārkārtošanai vislabāko lietotāja pieredzi visās ierīcēs.