A webdesign méretezhetősége és típusai. A webdesign méretezhetősége és típusai A köztes eredményt nézzük
A webhelyeknek saját csontvázuk is van. De hiába kérdezi meg az orvosokat a jellemzőiről. És az állatorvosok szintén nincsenek tisztában a telep szerkezetével. Erről csak az elrendezési tervezők tudnak. Rajtuk múlik a jövőbeli erőforrás csontvázának szerkezete. A csontváz csontjainak létrehozásának fő módja a blokk elrendezése.
A weboldal elrendezése mesterség a beavatottak számára
Van valami titokzatos az oldal elrendezésében. De ez mindaddig, amíg jobban meg nem ismeri ezt a mesterséget. Kezdjük elkötelezettségünket:
A weboldal fejlesztésének következő szakasza az elrendezés létrehozása után az elrendezés. Az elrendezéstervező feladata, hogy html kód és css táblák segítségével vigye át a jövő webhelyének csontvázát a virtuális világba. Egyszerűen fogalmazva, vigye át az erőforrás méreteit és arányait a böngésző számára érthető formába.
A html kóddal történő elrendezés során az oldal "váza" részekre van osztva. És a css ( lépcsőzetes stíluslapok) beállítja a „csontjainak” méretét, színét és helyét.
Többféle elrendezés létezik:
I. Táblás - korábban az elrendezés fő típusa. A táblázat elrendezésében a címke a webhely szerkezetének beállítására szolgál
és gyermekcímkéi. A táblázatok szerinti elrendezés lehetővé teszi, hogy az összes tervezési elemet a lehető legarányosabban rendezze el egymáshoz képest. De ugyanakkor ez a kód túl terjedelmesnek bizonyul:
A táblakód fő hátrányai közé tartozik a hosszú betöltési idő és a keresőmotorok rossz tartalomindexelése.
A táblázat-alapú oldal tartalma nem jelenik meg, amíg az összes adat nincs betöltve. A blokk elrendezés lehetővé teszi az egyes betöltött elemek külön -külön történő megjelenítését.
A táblázatoldalak rossz indexelése annak köszönhető, hogy a táblázat különböző celláiban elhelyezkedő szövegblokkok között nagyok a rések.
Most a táblázatos verst ritkán használják a webhelyek létrehozásának fő módszereként. Most csak a táblázatos adatok strukturálására és a grafikus képek elhelyezésére szolgál.
II. Blokk - jelenleg a fő elrendezési módszer. A táblázatos blokk elrendezéssel ellentétben számos előnye van:
Az elemek stílusának elkülönítése a html kódtól;
Az egyik réteg egymásra helyezésének képessége - ez a képesség nagyban megkönnyíti az elemek elhelyezését.
A keresőmotorok jobb indexelése;
Nagy sebességű, egymástól független elemekből álló oldal betöltése;
Könnyű vizuális effektek létrehozása ( legördülő menük, listák, eszköztippek).
A blokk elrendezésének fő hátránya egy bizonyos " kétértelműség»A kód megértése különböző böngészők által. Ezért a html oldalakat gyakran speciális "hack" segítségével kell "finomítani".
A blokk elrendezés megjelenésével megszületett egy olyan fogalom, mint a "böngészők közötti kompatibilitás". Mivel ugyanaz az elem különböző böngészőkben jelenik meg, az elrendezéstervezőknek egész kódrészletet (hack) kell beilleszteniük a fő html -be.
A hack rendkívül specializált, és csak egy böngészőben oldja meg a helytelen megjelenítés problémáját.
A blokk elrendezésben használt fő elem a címke
... A kód ezen szakaszával elválasztott szakaszát rétegnek nevezzük. Minden stílusos döntés a html -kódon kívül került lépcsőzetes stíluslapokba. Azonosítók vagy css osztályok segítségével érhetők el:
Hogyan működik a blokk elrendezés?
Az elrendezés megkezdése előtt a webhely kész psd elrendezését blokkokra (rétegekre) vágjuk egy grafikus szerkesztőben. A kivágott háttérképeket egy külön mappába helyezzük, amelyet minden réteghez külön csatolunk:
Vegyük például ezt a Photoshopban létrehozott weboldal -elrendezést. Először egy szövegszerkesztőben div segítségével állítjuk be a jövőbeli erőforrás szerkezetét, és minden réteghez hozzárendeljük a saját azonosítóját. Kiderül a következő szerkezet:
Ezután a kész webhelyszerkezethez html -ben a vonallal csatolja a css fájlt. Ezután hozzáadjuk az egyes rétegek stílusleírását, más elemekhez és méretekhez viszonyítva.
Az összes css tulajdonságról többet megtudhat a nyelv műszaki dokumentációjából.
Így néz ki egy példa a webhely blokk elrendezésére a böngészőablakban:
Természetesen ez a példa csak vizuális segítség, amely bemutatja a blokk elrendezés működését. A tényleges elrendezés a css -ben található háttérképek és logók használatával történik. És azzal is, hogy a hackeket a html és a css kódba is beépítették, hogy optimalizálják a megjelenítést minden böngészőben.
Az internet hatalmas területeinek feltárása során valószínűleg sokan észre fogják venni, hogy a legtöbb webhely rács alapján épül fel. Az ilyen webhelyeken található elemek vagy blokkok nem kaotikusan helyezkednek el az oldalon, mint néhány évvel ezelőtt, hanem egy bizonyos sorrendben és strukturálva (néha első pillantásra észrevehetetlen). Ezek a webhelyek kiegyensúlyozottak, és általában tisztának és rendezettnek tűnnek. E tisztaságért sok elismerés jár rács, amely a tervezés alapját képezi, és a felhasználó számára a webhely világos, torzításmentes struktúráját biztosítja.
Míg a rácsok általában vízszintes és függőleges vonalak egyszerű metszéspontjait képviselik meghatározott időközönként, sok tervező ezeket használja a nyilvánvaló geometriai formák és vizuális utak díszítésére és kiemelésére. Ezeket az utakat és formákat láthatjuk portfólió oldalakon, galériákban, blogokban és más kreatív projektekben. Ez nem meglepő, mivel a hálónak számos hasznos tulajdonsága és előnye van, például:
Vizuális útvonalak létrehozása a felhasználók irányításához
Különböző komponensek egységes egésszé való egyesítése
Információk rendezése
És természetesen a háló tökéletes az egyenes vonalak szépségének megmutatására. Az alábbiakban olyan webhelyeket készítettünk, amelyekben a rács több, mint egyszerű alaprajz.
Következtetés
Mint már említettük, a rács a tervezés szerves része, és könnyen rendbe hozza a káoszt, és a weboldal -tervezésben, mint sehol máshol, ez a lehetőség valóban fontos. A legtöbb felhasználó gyorsan és egyszerűen szeretne információt kapni, és nincs is jobb módja annak, mint hogy világos és jól szervezett struktúrával mutassa be őket.
Nem, ez egyáltalán nem jelenti azt, hogy a webhely megjelenésének lineárisnak és egyszerűnek kell lennie. Néha még az egyszerű geometriai formák is, amelyek ügyesen "hígítottak" színekkel, képekkel és grafikákkal (ne feledjük a lapos kialakítást), igazán vonzóak lehetnek. Mit gondolsz? Nem tűnik vonzónak egy ilyen egyértelmű blokkokra osztás?
Szia Olvasó elvtárs!
Miért van szükségünk 10 blokkban lévő céloldalakra, ha az első képernyőn fontos információk találhatók, és a "Rólunk", "Szolgáltatások", "Árak" és "Kapcsolatok" szakaszokra korlátozódhat? A válasz egyszerű: a elnyeli a figyelmet vevő és motivál lépjen kapcsolatba a termékkel ésösztönözni egy termék megvásárlására.
Legtöbbet használt a látogatók bevonásának technikái a termék megvásárlásának folyamatában van AIDA(az angol Attention-Interest-Desire-Action-ből) és PMPHS(Fájdalom-több fájdalom-remény-megoldás). Ezekkel a technikákkal vezérelve épül fel a céloldal logikai felépítése, és meghatározzák a leszálláskor jelenlévő blokkokat.
Összegyűjtöttem neked 20 szemléltető példa a blokkokra amelyek meghatározott információs funkciót látnak el. A példák jól jönnek, ha Ön, valamint megkönnyíti a kommunikációt a céloldal tervezőjével és tervezőjével.
Ebben a bejegyzésben megismerkedhet az első felével - 10 blokkkal. A fennmaradó 10 példa esetében várja meg a következő augusztusi cikket.
20 leszálló blokk - válassza ki a sajátját
A termék blokk alkotó részei, teljes készlet;
Blokkgaranciák (hármas);
Blokkolja a vállalat eredményeit / előnyeit;
Blokk a vállalati alkalmazottakról;
Blokk a vállalat szolgáltatásairól / részlegeiről;
Blokkolja az ügyfél előnyeit a terméke használatából ("Miért minket?");
Blokk a szolgáltatásnyújtás folyamatáról (szállítás, tranzakció végrehajtásának módja);
Blokkszámológép;
Blokkoljon különleges ajánlattal + időkorlátozóval;
Blokk ajándékkal + az ajándék fogadásának feltételei;
Blokkolja a vállalat helyének térképével ("Hogyan juthat el oda");
Blokkolás elérhetőségi adatokkal;
Blokkok összehasonlító táblázata;
Blokk azonosítása "Kinek?";
Blokkolja a GYIK -ot.
* A blokkok számozása hozzávetőleges - a blokkok sorrendje a céloldalon a réstől függ. A blokkok sorrendjét ugyanazokkal a Yandex Metrics eszközökkel (görgető térkép, hőtérkép) határozhatja meg, ez a cikk segít.
Kulcsfontosságú információkat tartalmaz a céloldal látogatója, a vállalat USP -je számára. Kívánatos, hogy ez az információ is versenyképes legyen. A réstől függően az ilyen információk lehetnek: termék ára (488 rubeltől 1 darabonként), szállítási idő (szállítás 2 napon belül), termelés helye (közvetlenül Németországból). többet megtudhat az előző cikkből.
Alkalmas: nagykereskedelmi témák; olyan rések, ahol a vevő nincs kellőképpen tisztában a termék (főként a termék) előnyeivel.
A blokk lehet a válasz a vevő „Miért olyan drága?” Kérdésére, ha részletes leírást tartalmaz a termék jellemzőiről. Ennek célja, hogy tisztább képet alkosson a vágy tárgyáról a potenciális ügyfél fejében.
3. A termék blokk-alkatrészei, teljes készlet
Alkalmas: komplex szolgáltatások leírása; fülkék szabadidős tevékenységek szervezésére; az árucsomag leírása.
Ha a termék tulajdonságairól szóló blokk teljes mértékben bemutatja a terméket, akkor az alkatrészekről szóló blokk a terméket (terméket vagy szolgáltatást) kifejezésekre bontja.
4. Blokkolási garanciák (hármas)
Alkalmas: bármely céloldal.
Leggyakrabban a blokk után található a termék költségével. A célközönség kifogásai alapján épül fel, és lezárja azokat, bemutatva a szolgáltatás előnyeit az Ön vállalatában.
5. Blokkolja az eredményeket / előnyöket
Alkalmas: bármely céloldal; jól ismert cég márkás terméke; különösen fontos a rendkívül versenyképes piacon.
Különösen fontos a rendkívül versenyképes piacon lévő vállalkozások számára. Például, ha több vállalat kínálja ugyanazt a terméket, akkor az, aki a legkényelmesebb feltételeket biztosítja a tranzakcióhoz, és megmutatja cége munkájának hozzáértését (melyik év óta létezik a vállalat, a megvalósított projektek számát, kedvezményeket és ajándékokat a törzsvásárlóknak, az értékesítési pontok számát stb.).
6. Blokk a vállalati alkalmazottakról
Alkalmas: rések a szolgáltatások nyújtásában
Használata ajánlott olyan helyzetekben, amikor fontos, hogy ne MIT a vevő megkapja, és HOGYAN az eredményt el fogják érni.
7. Blokk a vállalat szolgáltatásairól / részlegeiről
Alkalmas: komplex szolgáltatások témái; céloldalak több termékkel egy alkalmazási területen.
8. Blokkolja a partnereket
Alkalmas: bármely céloldal.
A blokk növeli a látogató bizalmát, ha híres ügyfelek logóit használja.
Alkalmas: információs üzlet; a szolgáltatási szektor; fülkék, ahol a folyamat számít (HOGYAN) megkapja az eredményt.
Nagyszerű kiegészítés az esetekhez - vizuális bemutató VOLT / VOLT, valamint infografikák és nyomtatási képernyők statisztikákkal.
Rések, ahol a demonstráció fontos:
Folytatjuk…
Ma megbeszéltük a céloldal első 10 blokkját, a közeljövőben többet is közzéteszünk - tarts velünk!
Az új év sok új technológiát és trendet hozott, de nagy valószínűséggel azok a trendek fognak dominálni, amelyek 2015 végére megmutatkoztak. További videók, függőleges mintázatú megoldások, anyag ihlette ötletek és stílusos diák. Ezen technikák népszerűségének növekedése várható. A legtöbb új koncepciót nem olyan nehéz megvalósítani. Az alábbiakban 11 webdesign -irányzat (és sok remek példaoldal) található, amelyekkel 2016 -ban szembesülünk. Ezeknek a mintáknak a mintái valóban segítenek megérteni a trendet.
Az oldal vonzó animált hátterekkel, interaktív effektekkel
Szebb tipográfia
Az egyszerűsített felületek megnyitották az utat a gyönyörű tipográfia ötlete előtt (valamint az olyan könnyen használható webes eszközök, mint a Google Fonts és az Adobe Typekit-a fejlesztési lehetőségek bővítése hatalmas online könyvtárakkal). A feliratok egyszerűsége (olvasható és könnyen érthető) a "kalligráfia" fogalmában helyet szabadít fel más elemek számára. Amit meg kell próbálnia összekapcsolni, az az olvasható betűtípus és a lehetőségek szórakoztató újdonsága.
vidéki stílusú étterem honlapja: kimért és sietetlen, felhajtás nélkül (fülbemászó kontrasztok), jól megválasztott színekkel és betűtípusokkal. A vidéki stílus (rusztikus stílus) a természet közelségének érzését kelti. A madarakhoz kapcsolódó márkajelzés grafikusan tükröződik (illusztrációk, háttérrajzok). Általában ez az identitás része - "sólyom és csirke" (eng. Hawk és Tyúk), mint a sikeres vadászat szimbóluma
Illusztrációk és rajzok
A rajzokkal ellátott illusztrációk kreatív fantáziát és vidám hangulatot kölcsönöznek a tervezésnek. Minden típusú webhelyhez használható (nem csak gyerekeknek). Az „illusztrált” stílus népszerűsége is nőtt, ha a webhely kialakításában kis elemek (ikonok stb.) Tervezéséről van szó.
Ebben a trendben különösen kellemes, hogy az illusztrációk személyiséget kölcsönöznek az oldalnak. Mivel az illusztrációk vagy a "vázlat ikonok" nagy valószínűséggel kézzel rajzoltak, vizuálisan és általános érzés szerint, a felhasználók számára egy ilyen webhely személyesebbnek tűnik. A felhasználóval folytatott kommunikáció hatékonyságának növelésére irányuló tendencia fejlődése szempontjából még sok tennivaló van ezen az úton.
Az oldalon szép mikroelemzések és illusztrációk találhatók. és a "baba stílus" az egész webhelyen a játékot játékmá alakítja
Korábban az interneten széles körben elterjedt volt az elrendezés táblázatos típusa, amelynek szentelték. Idővel azonban ez a megközelítés a webhelyszerkezet létrehozásához elavult, és helyébe egy blokk elrendezés lépett.
A blokk elrendezés és a táblázatos elrendezés közötti különbségek
Ha a táblázat elrendezése azt sugallja, hogy az oldal tartalma a címkén belül van
, akkor a blokk elrendezés fogalma az univerzális címkék aktív használatán alapul
amelybe a tartalom kerül, beleértve a többi címkét is.
A blokk elrendezés mentes a táblázatos elrendezés hátrányaitól - a keresőmotorok jobban indexelik, kódja nem annyira terjed, és a blokkok
, amelyeket annyira szeretnek "rétegeknek" nevezni, eredetileg univerzálisnak, azaz "mindennek" tervezték,
egy táblázat, amelyet a táblázatos adatok megjelenítéséhez kell használnia, és semmi több.
A blokk elrendezés egyetlen észrevehető hátránya, hogy a rajta készült webhelyek különböző módon jeleníthetők meg a böngészőkben. Ennek elkerülése érdekében az elrendezést "böngészőközi" -re kell állítani, azaz bármely böngésző egyformán megjeleníti.
A blokk elrendezés lényege
A weboldal elrendezését egy grafikus szerkesztőben hozzák létre: meg van jelölve, hogy az oldal melyik területe (fejléc, alsó, oldalsáv, fő tartalom) lesz elhelyezve, és mennyi helyet kell készíteni, képek és hátterek készülnek.
Az oldal minden része a saját blokkjába kerül
: a webhely teteje - az első, a menü - a másodikban, tartalom - a harmadikban, stb. Minden blokk tele van tartalommal HTML -el, valamint pozicionálva és stílusban CSS -jelöléssel.
A végső HTML dokumentum blokkok gyűjteménye
tartalommal. A design gyakran megtalálható egy külön CSS -fájlban, amely címkével van összekötve az oldallal. , vagy legalábbis tartályban
