Hogyan tervezzük meg a tartalmi elrendezést az érzékeny tervezéshez

Egy közelmúltban írtam le, hogyan vizuális tartalom vonatkozik valamire kinézeti terv. Azonban ez a téma nagyon részletes, és a szétvágások sok al-témakörbe kerülnek, amelyek közül az egyik vizuális szervezet az érzékeny elrendezésekhez.

Ebben a bejegyzésben mélyebbre szeretnék ásni az érzékeny tartalmat, hogy megnézhessem a legjobb gyakorlatokat a kisebb képernyők tartalmának átrendezése. Az UI és az UX tervezésben nincs egyetlen helyes válasz minden projektre, de vannak a jól működő trendek, és ezekből a trendekből saját ötleteket építhetsz.

A rácsok átrendezése a listákra

Minden weboldal valamilyen rácsot használ, függetlenül attól, hogy látható-e vagy sem. A szilárd hálózatban lévő tartalom gyakran vízszintesen csoportosul szélesebb monitorokon, de ez nem értelme a kisebb eszközöknél. A legjobb megoldás az, hogy ezeket a rácsokat kisebb képernyőkön lebontják, és konvertálja az elemeket listákká.

1. példa: Wellington városi tanács

Vessen egy pillantást a Wellington városi tanács honlapjára, amely számos felhasználót használ rácsos szekciók a kezdőlapon.

Van egy kis diavetítés a téren csökkenti a böngészőablak átméretezése. A lábléc szakasz is kisebb lesz, és végül a függőleges linkek listájává alakul.

Nagyon kis telefonokon, amelyek 320px szélességűek, meg kell tervezni az eszköz méretét. Az iPhone esetében a készülék szélesebb, mint a szélesebb, ezért érdemes a tartalmat elrendezni.

2. példa: Mooyah Burgers

Nézd meg a Mooyah honlapját, és próbáld meg átméretezni az elrendezést. Van egy kis diavetítési terület, amely három elemet tartalmaz az asztali képernyőn, de ez csökken csak egy elem megjelenítése a mobilon (több rejtett diák hozzáadása a widgethez).

A Mooyah alkalmazást és menüt tartalmazó hirdetési dobozok egymás mellett rögzítettek amíg a képernyő elég kicsi lesz függőleges irányban.

A “Csatlakozz hozzánk!” A szekció is átrendezi a tartalmat úgy, hogy minden egyes társadalmi bejegyzés minél több szobát kap. Általánosságban elmondható, hogy a szélesvásznú monitorok a legszélesebbek és az okostelefon-képernyők a legmagasabbak.

3. példa: Témapiac

Ha rácsos elrendezést tervez, fontolja meg széles és magas elrendezési stílusok egy kódsor írása előtt. Így készen állsz építsen töréspontokat, amelyeknek értelme van.

A teljes rács elrendezésű oldalnak meg kell felelnie csökkenti a dobozok méretét mielőtt új sorra törné őket. Például a Theme Market a fix maximális szélesség 1240, és a rács tartalmazza négy blokk soronként.

Mivel a képernyő csökkenti ezeket a blokkokat csökkentse a szélességet, de végül bontás nak nek hagyjon három mezőt soronként. A legkisebb méretenként egy mezőt kapsz egy sorba, és azt rengeteg szobája van a szöveg és a kép ragyogásához.

Mindig van egyensúlya a lehető legtöbb információ megtartását kombinálva annak szükségességével a szöveg olvasható. Minél többet építesz rácselrendezéseket, annál könnyebb lesz ezt megtalálni tartalmi elrendezés egyensúlya.

Oszlopok elrejtése vagy eltávolítása

Szélesebb monitorok és több böngésző támogatás lehetővé teszi a fejlesztők számára, hogy hihetetlenül összetett elrendezéseket építsenek. Gyakran látom a blogokat három vagy akár négy oszlop a képernyő egy jó részét veszi fel.

A kisebb eszközöknek azonban tartalmaznia kell egy tartalomáramlást értelme függőlegesen. Két lehetőséget találtam túlzott oldalsávok kezelése:

1. Dobd el őket a fő tartalom alatt
2. Teljesen elrejti őket

1. példa: Stop Press

Tekintse meg a Stop Press webhelyet. Van négy függőleges oszlop az asztali monitoromon.

A bal oldali oszlop függőleges navigációs menü, a következő oszlop a legfrissebb tartalmak oszlop a legújabb cikkekkel. Ezután két különböző oldalsávoszlop van, amelyek túlcsordulnak extra “félre” tartalom.

Mivel a böngészőablak átméretezi ezeket az oszlopokat lassan csökkenti a méretét. Az elsõ lépés a bal oldali navigáció, amely egy hamburger menüikon mögött rejtõzik.

A következő töréspont elrejti a középső oszlopot a felső társadalmi megosztási gombokkal együtt. Ezután végül a legkisebb képernyőkön teljesen eltűnik a jobb oldali oldalsáv csak az elsődleges középső oszlopot hagyja tartalmát.

Az oldalsáv tartalma nem jelenik meg a fő tartalom alatt. ez teljesen elrejtve, és ez egy tökéletesen elfogadható választás csökkenti az oldal betöltését és hogy a görgetősáv magassága tisztességes méretű legyen.

Másrészt sok blog mozgassa az oldalsávot a fő tartalom alatt olyan, mint a Concept Art Empire-nél, amely az oldalsávban kapcsolódó üzeneteket tartalmaz a tartalom alá csökken.

2. példa: Kívánatos blog

A Wishpond Blog is teljesen eltávolítja az oldalsávot a kisebb nézetablakokról. Ez az oldalsáv terület jellemzően hirdetést, bejelentkezési űrlapokat és kapcsolódó postahivatkozásokat tartalmaz. Ez a tartalom egyáltalán nem létfontosságú, de hozzáadott értéket biztosít a látogatók számára.

Szeretem követni a hibrid megközelítés ahol az oldalsávot a tartalom alatt mozgatom, de elrejtem néhány oldalt az oldalsávon egy bizonyos töréspontnál.

Ha például három hirdetési blokk van a teljes elrendezésben, elrejthetem két hirdetési területet a mobilon. Ez hozzáférhetővé teszi az oldalsáv tartalmát de nem zavarja az oldalt túlzott tartalommal.

3. példa: Madame Gautier

Azt is szeretném, hogy Madame Gautier használja “Legfrissebb hírek” oldalsávot. Végül a tartalom alá csökken, és teljes nézet pozícióba kerül az oldalon.

Szinte minden weboldalon legalább egy oldalsáv található a designban. Akár ez egy webhelyes oldalsáv, vagy csak valami, ami megjelenik az oldal sablonjában, a side-by-side design stílus népszerű, mert több tartalomhoz illeszkedik a képernyőn.

A te döntésed hogyan kell kezelni a tartalmat. Csökkentheti az oldalsávot, elrejtheti, vagy használhatja a két technikát. De választanod kell az oldalsáv relevanciája alapján, és annak szükségesség az oldalhoz.

Állítsa be és állítsa be a margókat

Mindig ott lesz egy pont, ahol a tartalom nem szorítható tovább kell, és egy szekciónak szüksége van a másik alá.

Által margók beállítása az oldal tartalmának csökkentése előtt az olvasóknak szélesebb körű tartalmat kell választaniuk.

1. példa: Egy világ

Az One World lábléc nagyszerű példa. Van a sitewide lábléc linkek lebegtek jobbra egy e-mail regisztrációs űrlap bal oldalon.

Ahogy az elrendezés átméretezi, az elemek között lévő margók és párnák zsugorodnak. A link oszlopok közelebb kerüljön egymáshoz, és a regisztrációs űrlapot kicsit kisebb lesz, is.

Egy bizonyos pontot megelőzően csak értelme van dobja le a feliratkozási lap alatt található hivatkozásokat, és adja meg a láblécet rengeteg hely a légzéshez.

Igen, az oldal hosszabbá válik, és igen, több erőfeszítésre van szükség ahhoz, hogy lefelé gördüljön, de ezeknél a kisebb pontoknál feltételezhető, hogy a felhasználók függőlegesen orientált eszközökön.

2. példa: Arany-szigetek

Egy másik példa, amit szeretem, az Arany-szigetek kezdőlapja egyedi navigációs stílus. Amikor átméretezi a böngészőablakot, a navigációs linkek nyomja össze. Végül is törés egy sorból két sorba, majd a legkisebb méretű oszlopokba.

Az oldal egyéb elemei kövesse ugyanazt a mintát. Ez a példa a margók átméretezése az elrendezés teljes átrendezése előtt.

Függőleges áramlás kisebb képernyőkön

Az oldal tartalma legyen természetesen áramlik, és függőleges igazítás értelme a mobilon. Ez azt jelenti, hogy az oldal tartalmának blokkjait meg kell fontolnia frissítse a tartalomstílust. Ez magában foglalja a bekezdéseket, a fejléceket, a blokkjegyeket, a rendezetlen listákat és az egyéni tartalomdobozokat is.

1. példa: BodyBuilding.com Single Post

Vegyük például ezt a BodyBuilding posztot kis dobozokat használ különböző glutál edzésekre mutat.

Ezek a dobozok tartalmazzák miniatűrök a jobb oldalon a gyakorlat bemutatására. Kisebb képernyőkön ezek a bélyegképek lebontani egy új vonalra, és végül egymás tetején.

Az érzékeny CSS-nek figyelembe kell vennie ezt a apró részleteket a weboldal minden oldalán.

2. példa: Vanity Fair

Nagyobb példa erre a Vanity Fair honlapjára teljesen átrendezi a bemutatott történet csúszkát. A teljes képernyős asztalon a történetek egy címmel jelennek meg, amelyek egy oldalra mutatnak. Mivel a böngésző átméretezi a kisebb méretet, ez a legfelsőbb történetek csúszó karusszává válik.

Az interfész maga teljesen megváltozik pont-navigáció, nyilak és kiemelt képek hozzáadásával a lista minden egyes történetéhez. A teljes képernyős cikkek listája több “függőleges”, de ez az elrendezés nehezebb a mobil képernyőn működni, így a csúszós karusszel való jobb változtatás jobb megoldás.

Gondol többet a felhasználó áramlásáról a tartalmi áramlás helyett. Tartalom nem mindig kell függőleges elrendezésre kényszeríteni kis képernyőn. Gondoljunk csak arra, hogyan szervezhetjük meg a tartalmat oly módon támogatja a vertikális böngészési élményt.

Záró gondolatok

A mai napig elengedhetetlen az érzékeny tervezés, és minden webes tervezőnek és fejlesztőnek meg kell értenie, hogyan működik. A látogatók minden webhelyet várnak mobilbaráttá. Valahányszor behatolok egy nem reagáló webhelyre, a vízszintes görgetősáv látványa felé nyúlik.

Kövesse az ebben a bejegyzésben található tippeket tervezési stratégiák tervezése a tartalom átrendezéséhez a lehető legjobb felhasználói élményt minden eszközön.