Érzékeny fejlécek és logók - tippek és csapdák

Az érzékeny web design koncepciója áthatolt a weben, és a frontend fejlesztők számára kapcsos lett. A mai világban nem tagadható az érzékeny tervezés értéke, de bizonyos nehézségek teljes mértékben megértsék, hogyan kell megfelelően kialakítani az érzékeny elrendezéseket.

A téma hosszabb ideig folytatható, mert olyan sok egyedi terület van a weboldalon, de az egyes elemekre való összpontosítás segíthet jobban megérteni a felhasználó céljait, és hogyan lehet ezeket a célokat érthető tervezéssel elérni.

Szeretném lefedni tervezési tippek a fejlécekhez, logókhoz, és navigációs menük, az érzékeny tervezéshez. Vegye figyelembe ezeket a javaslatokat, ahogyan saját munkájára vonatkozik, és ügyeljen arra, hogy a felhasználói viselkedést szem előtt tartva tervezze meg a felületét.

Vékonyabb sávok

Nagy képernyőkön normális, hogy nagy fejlécek, talán még túlméretezett fejlécek is vannak többszintű kapcsolati szintekkel. De a kisebb képernyőknek nincs azonos helyük, és szükség szerint korlátozni kell őket.

Mivel a natív mobilalkalmazások jellemzően vannak fix fejlécek, ez a gyakorlatban is érzékeny kialakítás. Egy fix fejléc csökkennie kell amikor kisebb eszközökön van: ez több helyet biztosít a tartalom számára, de még mindig közvetlen hozzáférést biztosít az olvasóknak a fejléchez és a navigációhoz.

Vegyük például a Cartoon Brew elrendezést egy teljes méretű monitoron és egy mobil eszközön.

A 600px töréspontnál a navigáció az oldal magasságának közel felére csökken. Ezáltal a logó és a kattintás nélküli navigációs menü is kisebb, de ők sokkal arányosabb a relatív képernyőterülethez.

Vegyük figyelembe azt is, hogy a Cartoon Brew-nak van egy legördülő menüje, amely a mobil képernyőn érzékeny menü. Ez azt jelenti borítja a tartalmat az oldal megnyitásakor fontos, hogy rengeteg helyet hagyjon erre.

Hasonló példa megtalálható a Jacksonville Art Walk weboldalán. A felső navigációs sáv a görgetés közben is rögzítve marad kisebb eszközökön csökken. Ez jobb az érzékeny tervezéshez, mert a vékonyabb navigációs sáv több teret hagy a tartalomhoz egy kisebb mobil képernyőn.

A navigációs sáv minden egyes hivatkozásához tartozik egy kapcsolódó ikon a szöveges hivatkozáshoz. Ez egy szélesvásznú monitoron jól néz ki, de a kisebb képernyőkön túl részletes.

Az Art Walk navigáció a 770px töréspont körüli fix kapcsolatokkal rendelkező legördülő menüre vált. Az ikonok elrejtve vannak a legördülő menüben, mert túl kicsiek és túlságosan szűkösek a kisebb eszközökön.

Egy érzékeny fejléc kialakításakor mindig vegye figyelembe teljes képernyőterület a navigációs sáv formázása közben. Ha nem szeretné, hogy a fejléc rögzítve maradjon, akkor ez teljesen rendben van, de még mindig szeretné kicsit zsugorodni menteni a szobát az oldal tetején.

Jelölje be a logót

A legtöbb logó tartalmaz egy szöveget és egy ikont vagy grafikát a márka képviseletéhez. Ez azt jelenti, hogy mindig iconify (igen, ez egy igazi szó) ez a fajta logó egy szimbólumig teljes verzióját.

Ez egy hatékony technika az érzékeny fejlécek számára, mert nincs mindig elegendő hely a teljes logó számára. Elveszítjük a teljes méretű logó csillogását és csillogását, de ez az ár, amit meg kell fizetnie a tiszta, érzékeny elrendezésért.

Nézze meg a Web Designer News logóját, és nézze meg, hogyan változik a böngésző átméretezése.

Talán nem mindenki ismeri fel ezt az ikont, amikor először meglátogatja a webhelyet, de hála mintafelismerés ez nem nagy probléma.

Az emberek elég hosszú ideig voltak az interneten, hogy tudják, hogy az oldal bal felső sarka általában egy logó számára van fenntartva. Ezt a kis rózsaszín ikont is használják a faviconban, így könnyű következtetéseket levonni anélkül, hogy túl messzire ásnánk a helyszínre.

A kondenzált logó technikájának nem mindig kell a grafikára támaszkodnia. A Young And Hungry fejléce élénkzöld szöveget használ a logóhoz, amely végül tömörül az "Y&H" szöveghez..

Ez nem feltétlenül működik minden webhelyen, ha a márkajelzés nem egyszerű egyetlen betűként felismerni. De ez a logók bemutatása egyszerűsíthető mind a grafikába, mind a szövegbe, és mindkét változatba kevesebb helyet foglal el kisebb képernyőkön.

Teljes képernyős háttér kezelése

Számos céloldal használja a teljes képernyős háttereket, hogy nagyobb figyelmet kapjon. Ez egy hatalmas technika, de gyakran a legnagyobb monitorokon működik.

Szóval hogyan kezeljük ezt egy kisebb képernyőn? Általában a tervezők is távolítsa el a háttérképet egy bizonyos törésponton, vagy maga a képen igazodik beilleszkedni az ablakba.

A Cap Radio Raffle ezt a technikát használja saját honlapján. A háttérkép megtartja a központot mindenkor, függetlenül attól, hogy a képernyő mennyi legyen.

Ez a fajta megoldás jellemzően némi CSS pozícionálást igényel de ez nagyon egyszerű, ha megragadja. Éppen tartsa a központot mindenkor, és a képtartály átméretezése illeszkedjen a készülékhez.

Az esztétikai okokból kifolyólag nagy háttérképek mellett az oldal tartalmához nagy képeket is használhat. A Mashable kezdőlapja a teljes elrendezést lefedő legfőbb történet képi hátterét használja.

Érzékeny elrendezésük tömöríti a képet míg központi kapcsolattartó pont fenntartása. Nehéz ezt megtenni, mert az adott kép megváltozik, amikor a történet megváltozik, így a képeket gondosan kell megrendelni. A Mashable megoldása még mindig nagyszerű módszer a teljes képernyős fotók kezelésére a blogok és magazinok elrendezései számára, ha megfelelően tervezték.

Egyszerűsítse a navigációt

Kisebb képernyők újratelepítésekor, tartsa a lehető legtöbb kapcsolatot a navigációban, és könnyen hozzáférhetővé teszi. Ez azt jelenti, hogy szükség lehet néhány hivatkozásra, ha többszintű legördülő menük van.

Bár ha van a megfelelő stratégia, még mindig lehetséges, hogy az összes legördülő listát megtartsa. Például a Kidscreen a kis nyíl ikonok szórólap menü az aloldalak megjelölése az érzékeny menüben.

Sokan vitatkoznak a hamburger menüvel szemben, de azért jöttem, hogy elfogadjam a hosszabb navigációs menükhez szükséges elemet. Egyszerűen működik, és a legtöbb okostelefon-felhasználó széles körben értette, hogy „a menü gombja”.

Tény, hogy nehézkes lesz, hogy találjon egy olyan érzékeny webhelyet, amely nem támaszkodik a háromsávos hamburger menüre. A CyberChimps jó példa erre függőleges legördülést használ ahelyett, hogy dia-in.

A CyberChimps navigációs struktúrája átrendeződik az oldal tetejére csúsztatásra. A menü felülről lefelé esik nagy blokkelemek a linkekhez.

Val vel további terület a kattintásra és nagyobb link szöveg, az oldalak navigálásának folyamata sokkal egyszerűbbé válik. Célja, hogy kövesse ezt a filozófiát a teljes érzékeny fejlécével, és a tervek drasztikusan javulnak.

Építsd meg a sajátodat

Ezekkel a tippekkel az Ön rendelkezésére kell állnia, hogy ne használjon felépíthető fejléceket. Bár rengeteg eszköz áll a rendelkezésedre, az egyetlen módja annak, hogy valóban megértsük a gyakorlatot.

Tehát vegye magával ezeket a technikákat, és kezdje meg a weboldalak építését! Én is felsoroltam néhány további erőforrást az érzékeny fejlécekhez, amelyeket az alábbiakban nézhetsz meg.

• Hozzon létre egy alapvető mobil CSS érzékeny navigációs menüt (Teamtreehouse.com)
• Legjobb gyakorlat az érzékeny honlap fejlécéhez (Ux.stackexchange.com)
• Hogyan tudom a fejlécképet megfelelően reagálni? (Stackoverflow.com)