A webhelyek hátterét, amely egykor minden weboldal tervezésének legfontosabb része volt, sokféleképpen fel lehet használni a jobb felhasználói élmény megteremtésére.
Ma a hátterek megfelelő létrehozása nehezebb, mint egykor volt, és új kihívásokat is jelent, miközben korlátozza azokat a lehetőségeket, amelyek más háttérrel rendelkeznek.wise lenne.
Például a háttér a korábbi időkben ténylegesen használható volt a tervezés gyakorlati részeként. Nyilakat tehetsz rá például, hogy valami fontos dologra irányítsd a néző figyelmét.
Hogy miért változtak a dolgok, az annak szükségessége miatt van responsive design, valamint az emberek által használt különböző képernyőméretek és képernyőtípusok sokfélesége.
Emiatt a háttér ma már kevésbé fontos eleme lett az oldaltervezésnek, és elég sok oldalnak egyáltalán nincs hivatalos háttere.
Valóban fontosak a háttérek? Hogy megtudjuk, megvizsgáltuk az első 30 rangsorolt webhelyet (az ismétléseket nem beleértve), és az eredmények nagyon érdekesek.
Ahogy a fenti képen is látszik, a legjobban rangsorolt weboldalak egyáltalán nem foglalkoznak a hátterekkel, és úgy tűnik, ez cseppet sem ártott nekik a felhasználói elfogadás tekintetében.
Ez szembeszáll a weboldal tervezésével kapcsolatos hagyományos gondolatokkal, de nehéz vitatkozni a hideg kemény tényekkel. Meglepő módon a lista első, háttérrel rendelkező webhelye nem indul el, amíg el nem éri a 10-es helyet, ami Twitter, és ez a háttér csak akkor látható, ha nincs bejelentkezve.
A 30-es top 2017 webhely között csak a megfelelő háttérrel rendelkező webhelyek voltak:
- Twitter, fényképes háttérrel (10. helyezett)
- Élőben (Outlook), egyszínű háttérrel (12. helyen)
- NetFlix, kollázs háttérrel (21. helyezett)
- WordPress, egyszínű háttérrel (26th)
- Bing, fényképes háttérrel (29th)
- Tumblr, fényképes háttérrel (30th)
Tehát a legjobb 20 webhelynek csak 30 százaléka rendelkezett háttérrel, és azok, amelyek igen, jóval lejjebb kerültek a listán.
A webhely hátterének egyetlen előnye, hogy segít fenntartani a webhely azonosságtudatát több oldalon, de mivel vannak más elemek is, amelyek ezt a célt ugyanolyan jól és talán jobban is elérhetik, ez nem igazán nagy előny.
A hátrányok számosak. A hátterek további kihívásokat jelentenek az oldallal kapcsolatban responsiveés gyakori frissítésre lehet szükség, hogy elkerüljük az elavulást.
További kihívás a modern tervező számára, hogy a statikus hátterek mellett immár videós hátterek készítésére is van lehetőség. Ha az utóbbi mellett dönt, létfontosságú, hogy tudja, mit csinál, mert sok felhasználó bosszantónak találja a rosszul megtervezett videó hátteret.
Ha sok oka van annak, hogy ne használjon hátteret, akkor dönthet úgy, hogy követi az első helyen álló webhelyek nyomdokait, és végleg elvetheti az egész háttérötletet. De ha a rövidke ragaszkodik ahhoz, hogy a webhelynek rendelkeznie kell háttérrel, mit tehet? Ezt próbáljuk megoldani a cikk további részében.
A háttereket tartalmaznia kell
A tartalomnak mindig az oldal háttere feletti rétegen kell lennie. Ha nem választja szét az oldalelemeket különböző rétegekre, az problémákat okozhat Önnek, amikor valamin változtatni kell.
A legjobb gyakorlat ezt a rétegelválasztást a lehető legnagyobb mértékben alkalmazni. Például, a webhely logóját valóban közvetlenül a háttérbe kell beépíteni? Leggyakrabban ésszerűbb lenne, ha a logó külön rétegben lenne. Így ha a logót frissíteni kell, a teljes háttértől függetlenül frissíthető.
A rétegek ilyen módon történő használata több munkát jelent az alkotási oldalon, de kevesebbet a karbantartási oldalon. Ezenkívül maximális irányítást biztosít, hiszen bármikor elrejtheti, mozgathatja vagy másképp viselkedhet az Ön igényei szerint.
Ez a kép a háttértervező sablon ideális szerkezetét mutatja:
Minden rétegen belül (az alapréteg kivételével) lehetőség van további rétegek létrehozására a még nagyobb elválasztás érdekében, ha szükség van rájuk.
Minél több fokú elválasztást hoz létre, annál nagyobb irányítást szerezhet. Lehet, hogy úgy érzed, hogy ez most nem fontos számodra, de gyakran megesik, hogy később tényezővé válik.
A legfontosabb dolog, amit meg kell érteni, hogy a „háttér” minden, ami nem tartalom. Tehát a szöveg vagy a képek, amelyeknek az oldalon kell lenniük, de nem tartalomként, a háttér részének számítanak, de nem mindenki fogja őket így besorolni.
Komponálása
A webdizájn kezdeti idejében a keretezés csak egy egyszerű feladat volt annak kidolgozása, hogy a tartalom hol helyezkedjen el a háttérhez képest. Ezen a napon responsive tervezése azonban jellemzően ennél bonyolultabb.
A responsive tervezés, csak két választása van a keretezési probléma kezelésére. Az első lehetőség a tartalom és a háttérkép méretezése a rendelkezésre álló képernyőmérethez képest. Ez akkor optimális, ha a tervezés integritása a legfontosabb tényező, bár ez meglehetősen ritka helyzet.
A második lehetőség a háttér egyes részei, vagy akár az egész háttér fokozatos megszüntetése abban a gyakoribb helyzetben, amikor a tartalom olvashatósága fontosabb, mint a tervezés integritása.
A „terv integritásának” ez a kérdése egyébként egyszerűen azt jelenti, hogy a design mindig ugyanúgy néz ki, függetlenül attól, hogy milyen képernyőn nézzük. Ennek ellenkezője az, hogy a tartalom mindig (többé-kevésbé) ugyanúgy néz ki, függetlenül attól, hogy milyen képernyőn nézik.
Méretezés használata for responsiveség
Ha a méretezést használja az egységes keretezés megtartására a különböző eszköztípusokon és tájoláson, megőrzi a terv integritását, de előfordulhat, hogy az eredmény mégsem mindig az elvárt vagy akár vágyott, különösen ha fényképes hátteret használ.
Nézzünk meg egy példát ennek a technikának működés közben. Kezdve a Samsung Galaxy S5 portré módban (megjegyzendő, hogy ezek a képek a cikkhez igazodva vannak méretezve, így az ott látható szöveg valójában magán a készüléken olvasható).
Így néz ki fekvő módban (majdnem mindig jobb fekvő helyzetben tartani a telefont, kivéve a telefonálást, de az emberek továbbra is ragaszkodnak ahhoz, hogy a telefonjukat álló tájolásban tartsák.
Amint látja, az elrendezés méretezve teljesen rendben van, még akkor is, ha csak 640 x 360 pixel dolgozik. Következő az iPad portré tájolásban.
És táj.
A méretezés használatakor észre fogja venni, hogy a különböző eszközök és felbontások között alig van eltérés, kivéve, hogy az álló nézetben sok elpazarolt függőleges hely lehet.
Valójában jobb lenne különböző módszereket alkalmazni a háttérben és a tartalmi részeken, hogy a menüpontok 2×2-es rácsba burkolódjanak, ahelyett, hogy mindig 1×4-es elrendezésben maradnának, de ez nem így történik, mert lehetetlen megjósolni, hogy mekkora függőleges tér áll majd rendelkezésre.
Így a méretezés előnye abban rejlik, ha azt szeretnénk biztosítani, hogy valamilyen összetevő mindig szem előtt maradjon, bármilyen körülmények között is.
Fázisos elrejtés és felfedés használata responsiveség
Egy praktikusabb forgatókönyv, amelyet a legtöbb tervező a legtöbbször használni szeretne, egy olyan kialakítás, ahol a háttér (vagy annak egy része) egyszerűen megszüntethető, ha nincs elég hely a megjelenítéséhez, így a webhely tartalma mindig maximális figyelmet kap.
Íme egy példa a különbségre ennek a módszernek a használatakor. Ugyanazokat az eszközöket és tájolásokat fogjuk használni a szemléltetéshez. Az első a Samsung Galaxy S5 portréja.
Samsung Galaxy S5 tájkép.
iPad portré.
iPad tájkép.
Itt jelentős különbségek láthatók az eszközök között. A Samsung Galaxy S5 kis képernyője nem teszi lehetővé a háttér megjelenítését, függetlenül attól, hogy álló vagy fekvő helyzetben van-e a készülék, és a megjelenített a rendelkezésre álló helyhez igazodik.
Ha ugyanazt a webhelyet tekinti meg az iPaden, akkor a háttér mindig látható, függetlenül a tájolástól, de van némi különbség a látottak között.
Legjobb koncepciók a háttértervezéshez (sorrendben)
1. Egyszínű (vagy színtelen)
2. Fényképészeti (nyújtott)
3. Kis csempe (tökéletes varrat nélküli)
4. Nagy csempe (tökéletes varrat nélküli)
Amit el kell kerülni, az a fényképes hátterek csempézése, kivéve, ha ezt úgy lehet megtenni, hogy az ne legyen észrevehető. A nyújtás általában a legmegfelelőbb fotós hátterekhez, vagy arra, hogy egy előre meghatározott térbe zárja azokat.
A nagy fröccsenő háttér korszaka nagyjából kihalt kivéve a csak megtekintésre szánt szakoldalakat a desktop. A legtöbb hátteret erre tervezték desktops nem fog jól kinézni telefonon nézve.
Megoldható megoldás, ha nagyszámú töréspontot állít be a CSS-fájlban, és tervez bedivikettős hátteret minden törésponthoz, de szokás szerint az a kihívás, hogy a rendelkezésre álló függőleges terület soha nem számítható ki, még akkor sem, ha az eszköz típusa ismert.
fejléckép jóvoltából
Hozzászólások 0 válaszok