Bár a tervezés alapja a kreativitás, mégis van néhány weboldal felület elemei jó lenne kéznél lenni. Ebben a cikkben 15+ legfontosabb részletet mutatok be felhasználói felület webhely amelyek mindenki számára hasznosak. Ezekkel az apró tippekkel elérheti szép és praktikus kialakítás kevesebb erőfeszítéssel és idővel.

1. Háló

Az oldal a szerzői tartalom mellett általában tartalmaz egy helyet bannernek, reklámhelyet, linkeknek stb. Fontos, hogy ezek a helyek nem rontotta el az oldal összképétés egyben voltak jól megközelíthető helyen. Ezért kényelmes az oldaljelölés használata. A klasszikus oldalelrendezés így néz ki:

Márka(logó, szlogen stb.), a bal felső sarokban

Navigáció- az oldal tetején, és lehetőleg a bal oldalon is

Központi téma- oldal közepén

hirdetéseket- az oldal jobb oldalán

lábléc nem tartalmaz fontos információ(vagy annak másolatát tartalmazza), általában ezek a hivatkozások belső oldalakés elérhetőségeit.

Ebben a példában egy képzeletbeli rácsot rajzoltam

A rács megtekintéséhez elegendő a képet gondolatban egyenes vonalakkal osztani.

És még egy példa a rács használatára a tervezésben.

2. Függőleges navigáció

A bal és jobb navigációs sávval egyre ritkábban találkozunk, mert. most tendencia a menü egyszerűsítése és a vízszintes változatra váltás. A függőleges navigáció azonban nem tűnik el egyszerűen azért, mert a vízszintes lehetőség nem mindig olyan univerzális. Így, a függőleges opció kényelmesebb az összetett vagy hosszú fastruktúrájú menüknél. Vegyük például a molotok.ru oldalt.

Nehéz elképzelni, hogy minden kategóriája hogyan illeszkedik egy vízszintes menübe.
Azonban semmi sem akadályozza meg abban, hogy kis webhelyeken használja. Ha közvetlenül a logó alá helyezed, akkor egész szépen kitöltheti az űrt.

Szép egyszerű példa a függőleges navigációra

A függőleges menü a bal oldalon, a logó alatt található

3. Vízszintes navigáció

Vízszintes navigációáltalában egyszerű és nem hosszú hivatkozáslistákhoz használják. Nagyon kényelmes a logó fölé vagy alá helyezni. Kivéve a tiédet láthatóság, a vízszintes menünek van még egy pluszja - ez helytakarékos. A függőleges menü a leghosszabb szó hossza alapján foglal helyet. De a vízszintes menü csak egy kicsit „nő” a magasságban, és akkor is mindig lehet játszani a margókkal és a kitöméssel.

Sima (jól megtervezett) vízszintes menü

Egy másik példa a jó tervezésre vízszintes menü

4. Legördülő listák

Egy másik, fejlettebb navigációs lehetőség a legördülő listák. Gyakran használják olyan oldalakon, ahol kevés kategória, de ezek tartalmaznak alkategóriákat. A legördülő menü nagyon kényelmes, segít elkerülni a felesleges átmeneteket és helyet takarít meg az oldalon

Elegáns legördülő menü

Módosított menü, hozzáadott arculattervezés

A legördülő menü nemcsak vízszintes, hanem függőleges is lehet

5. Zsemlemorzsa

A navigációs útvonalak egy webhely oldalhierarchiájának vizuális megjelenítése. A felhasználónak meg kell értenie, hogy az oldal melyik részében található, és melyik kategóriába tartozik az oldal. Nagyon kényelmes dolog, mint amilyen webhely navigáció, és mint forrás további linkelés oldalak (ami a keresők szeretik, így ennek az elemnek a népszerűsége folyamatosan növekszik). Az oldal tartalma felett helyezkednek el, balról jobbra.

Az aktuális oldal színes kiemeléssel jelenik meg

Az aktuális oldal semmilyen módon nincs kiemelve. A szerzők a látogató logikájára játszottak)

Az aktuális oldal semmilyen módon nincs kiemelve. De a gyökéroldalak kiemelve vannak

6. Felvétellista

A blogok egyre népszerűbbek, és mindenkinek van bejegyzéslistája, ami logikus. Minden egyes egy ilyen lista a bejegyzések „előzeteseiből” áll. És "előzetesek", viszont a cikk címéből, összefoglalóból, kommentek számából és hasonló általános információkból. Mindig a névre koncentrálunk. Nagynak kell lennie, felfedi a témát, felesleges szavak nélkül, és h1 vagy h2 címkékben kell szerepelnie. Az „előzetesnek” fel kell kelteni az olvasót, hogy legyen érdeke a posztot nézni, felmászni az oldalra.

Kibontott formában csak az utolsó bejegyzés jelenik meg, a többi kis „előzetes” formában. Ez az opció helyet takarít meg.

Minden bejegyzés jegyzetfüzet-oldalként van formázva.

7. Archívum

Az archívumok nagyon jó út hozzáférést biztosít a régi blogbejegyzésekhez. Egy jó archívumnak nemcsak dátum, hanem kategória szerinti rendezést is tartalmaznia kell, mert a felhasználókat gyakran csak egy blogcím érdekli. Sajnos nem minden szerző fordít kellő figyelmet erre az elemre, de hiába - az archívum nagyban javítja az oldal használhatóságát.

Részletes archívum, ahol a rekordok kategóriák és címkék szerint vannak rendezve

Ez az archívum kényelmes időnavigációt tartalmaz

Kiváló példa arra, amikor az archívumot dátumok és rekordok egyesítik

8. Tartalom lábléc

Az egyszerű láblécek ideje elenyészni látszik, és újra divatba jön. a láblécek szépek és hasznosak. Ott elhelyezheti ugyanazokat az archívumokat, elérhetőségeket, információkat a blog szerzőjéről (tulajdonosáról), menüket és egy csomó mást. hasznos információ. A lábléc funkciója magában foglalhatja a látogatók vonzását a webhely más oldalainak megtekintésére. Természetesen kívánatos szépen elrendezni. Alternatív megoldásként sok használjon 3-4 oszlopot, amelyek belső hivatkozásokat és információkat, valamint előfizetéseket tartalmaznak RSS és e-mail.

Három oszlopos tájékoztató lábléc

Példa egy nagyszerű webhely lábléc grafikai tervezésére

Érdekes, elegáns kialakítású lábléc

9. Lapszámozás

Ha sok tartalom van az oldalon, és azt valahogy rendszerezni kell, akkor az oldalszámozás az első, ami eszünkbe jut. Megengedi gyorsan görgetheti a webhely tartalmát, ugyanakkor csökkenti az oldal betöltési idejét. Az oldalnavigáció legjobb példája véleményem szerint a következőképpen van megvalósítva:

Itt valószínűleg nem leptem meg senkit, mert. ez a séma elég gyakori. Itt jól látható az aktuális oldal, szomszédai, és azonnal elérhető az utolsó (és első) rekord is.

Az egyik leggyakoribb oldalgörgetési tervezési lehetőség

És itt van egy érdekesebb design

10. Modális fülek

A kompakt formában lévő modális lapok további tartalmakat tartalmaznak, amelyek csak akkor nyílnak meg, amikor a felhasználó akarja. Amikor a blog kora lehetővé teszi, hogy például egy nagy archívumot nagy mennyiség címkéket és kategóriákat, több lapra rendezheti őket úgy, hogy azok nem foglalt sok helyet. Természetesen így bármit meg lehet jeleníteni, és a tervezési módszerek is nagyon eltérőek lehetnek.

Ebben a példában minden új lapon − különböző típusúéttermi ételek

A magazin felkínálja a látogatónak, hogy válassza ki a kívánt tartalmat

11. Vegyen részt az értékelési rendszerben.

A legtöbb modern webhely/blog a felhasználói interakcióra összpontosít. Sokan pedig arra törekednek, hogy az oldalaik minden legyen interaktívabb.
Helyezzen el gombokat a webhelyén Stumbleupon/Twitter/Vkontakte stb. - és meglátod, hogyan kelnek életre az oldalak.

Az egyik népszerű lehetőség az ikonok tömeges hozzáadása. közösségi könyvjelző a cikk végén

12. Információs panel

Nem olyan gyakran (még!) Olyan dolog, aminek ebben a cikkben is helye van. Online áruházak, online bankok, agytrösztök – mindezen szolgáltatások weboldalaikon statisztikai információkat tartalmazó oldalak találhatók. Az ilyen oldalakon ez különösen fontos közvetíti a látogatónak, hogy mit szeretne találni. Tervezésüknek egyszerűnek, jól szervezettnek és könnyen érthetőnek kell lennie.

A Google Analytics az egyik legtisztább példa a jól működő irányítópultra.

Még egy példa jó designés használhatóság az adatokkal való munka során.

A grafikonokat a részvényárfolyamok megjelenítésére is használják. Ez az egyik tervezési példa.

13. Egyszerű regisztráció

Mindannyian találkozunk a regisztrációs űrlappal az oldalakon, és sokan kénytelenek vagyunk ilyen vagy olyan okok miatt gyakran regisztrálni. Azt hiszem, mindenki egyetért azzal, hogy a regisztrációs lap 3. oldalán egy e-mailes visszaigazolás vagy összetett, érthetetlen biztonsági szöveg megadására vonatkozó ajánlat sivár. Mindezek a túlzások egyáltalán nem egyszerűsítik le a látogatók életét. Ezért fontos maximális egyszerű alak bejegyzés. A felhasználó ne gondolja, hogy elfelejtett beírni valamit, és ne nézze meg a karaktereket. Ha a legtöbb információt szeretné kinyerni a felhasználóból, tegye a következőket:
A regisztrációhoz meg kell adnia egy felhasználónevet, e-mailt és jelszót. Regisztráció után pedig hívd meg a kérdőív egyéb mezőinek kitöltésére.

Kiváló példa egy egyszerű regisztrációs űrlapra, bár nem a lehető legrövidebbre

A Vimeo rendelkezik a legrövidebb regisztrációs űrlap verziójával – csak három (!) mezővel

A Facebook egy másik példa a jó forma-végrehajtásra.

14. Ékezetek

Emelje fel az oldalt. Hangsúlyozza ki a fontos szavakat/kifejezéseket. Játssz a mérettel, betűtípussal, színnel, dizájnnal. Végül is az első dolog, amit a látogatónak látnia kell mit mondasz neki. Kicsit nehezebb azonban rávenni, hogy az oldal részeit a megfelelő RENDBEN lássa. De ez is megoldható.

A fontos szövegrészek türkiz színnel vannak kiemelve.

Az oldal főfelirata maximálisan nagyított és más betűtípussal van írva

Minden egyes új sor"elhalványul" az előzőhöz képest

15. Gyűjtemények megjelenítése

Sokan szeretjük bemutatni barátainkat, képgyűjteményeinket, forrásainkat, fotóinkat és így tovább. Ezen gyűjtemények megjelenítéséhez több különböző utak.
Valaki az „előnézetek” rácsát használja, valaki pedig a képek listáját.

Ebben a példában a barátságos linkek ilyen sajátos megjelenítését látjuk

Egyszerű és stílusos bemutató a tervező legújabb munkáiról

16. Keresés

Minden olyan webhelyen, amely sok tartalmat tartalmaz, keresni kell. A keresés gomb általában található kiemelt helyen. kalapban ill függőleges menü.

Egyszerű és lágy tónusú keresési űrlap

Példa a keresési űrlap szokatlan kialakítására

És még egy példa az űrlapunk nem szabványos kialakítására

17. Alakzatok

Hozzászólás írásához vagy valamilyen fizetéshez az oldalakon található űrlapok szükségesek. Mint a regisztrációs példában, itt is a maximális egyszerűség fontos. Végül is a felhasználók nem szeretnek sokáig elmélyülni a karakterekben, és azon gondolkodni, hogy mit hova írjanak be.

Jobb, ha engedélyezzük annak megtekintését, hogy a felhasználó a kitöltés melyik szakaszában van, és mennyi van még hátra a végére. Ugyanilyen módon kívánatos a szakaszokat kategóriákra bontani (Általános információ, elérhetőségek stb.)

Ezen az oldalon lépésről lépésre megtekintheti az űrlap kitöltésének folyamatát

Egy másik példa az űrlapok lépésről lépésre történő kitöltésére. Az aktív szakasz színnel van kiemelve

Egy másik tervezési lehetőség - az aktív folyamat egy új lapon nyílik meg

18. Előfizetések

Míg a blogok és közösségi hálózatok egyre népszerűbbek, tendencia a több előfizetési gomb elhelyezése. Általában a minimum az RSS és Twitter. Az emberek igyekeznek élénkebbé és kommunikatívabbá tenni az oldalakat, hogy az olvasók a lehető legkönnyebben kövessék a híreket.

Az előfizetés gombokkal együtt azonnal megjelenik az előfizetők száma

Amikor megláttam ezt a lehetőséget, az elegáns dizájn azonnal megakadt a szememben.

A legegyszerűbb lehetőség csak az előfizetési gombok, valamint a közösségi hálózatokra mutató hivatkozások

19. Csúszdák

Minden többé-kevésbé tapasztalt kódoló elővehet egy kész jQuery csúszkát az interneten, és beillesztheti az oldalába. És nagyon lenyűgözőnek tűnik. Ezért egyre gyakrabban találhatók a csúszkák az oldalakon. Általában hirdetőtáblaként helyezik el a webhely legjobb anyagait (vagy termékeit), a legszembetűnőbb helyen.

Nagyszerű, egyszerű, stílusos csúszka.

És ez egy meglehetősen gyakori példa a csúszkára.

Jó szokatlan példa a csúszka kialakítására

Ezzel természetesen az elemek nem érnek véget - sokkal több van belőlük. Csak a legdivatosabbról és a legfutóbbról meséltem. Szeretném mindenkinek azt kívánni, hogy vegye komolyan az információkat, elemezze és gondolja át. Készíts gyönyörű weboldalakat. Tedd kényelmes oldalak.

Üdvözlettel: Niko Michael.

Kiadás: Rog Viktor és Andrej Bernatsky. webformyself parancsot.

2019. október 25 A bejegyzés frissítve lett

Jurij Nemets

Gyönyörű lapok választéka – gyönyörű lapok készlete a webhelyhez

Ma a gyönyörű és eredeti lapok választékát ajánlom figyelmébe. Ezen effektusok létrehozásakor pszeudoelemeket használtak, svg képekés CSS átmenetek. Az összes fül kialakítása modern stílusban készült, és szinte minden webhelyhez alkalmas. Tekintse meg ezeknek a lapoknak a példáit, és meg fog lepődni, hogy mennyire szokatlan lehet egy ilyen gyakran használt elem elrendezése a webhelyen.

Gyönyörű lapok választéka

Letöltés

Gyönyörű lapok választéka

Ha megnézte a demó verziót, észrevehette, hogy az összes példa ugyanazon az oldalon található. Ezért ha letölti és megnyitja a forrást, egy hosszú oldalt fog látni, mint a bal oldali képen. Ne félj! Minden szépen felépített. Csak ki kell vennie a kívánt "darabot" a kódból, és be kell illesztenie a webhelyére.

Minden új példa külön blokkban található