Štandardné rozmery miesta: Vlastnosti, požiadavky a odporúčania

Vývoj technológie webové stránky - veľmi rozmanitý proces. Napriek tomu všetkých stupňoch môže byť rozdelená do dvoch hlavných častí - funkčné a vonkajšieho plášťa. Alebo, ako v strednodobom webmaster Beg End a Front End, resp. Ľudia, ktorí si kúpili svoje webové stránky na vývoj webových aplikácií ateliéroch, často naivne domnievajú, že je potrebné sa zamerať iba na funkčné, a bude to správne rozhodnutie. Ale je to pravda, vo veľmi, veľmi zriedkavých príležitostiach, zvyčajne začínajúcich projektov vo fáze beta testovania. Zvyšok grafického dizajnu a užívateľské rozhranie sú jednoducho povinní dodržiavať štandardy webových rozvoja a byť pohodlné.

Prvým kameňom čelí návrhár rozhrania, alebo dizajnéra - je šírka rozvrhnutie webu. Koniec koncov, je potrebné vypracovať rozhranie pre ňu. Intuitívne existujú dva prístupy - buď vytvárať samostatné rozvrhnutie pre každý z populárnych rozlíšeniach obrazovky, alebo môžete vytvoriť jednu verziu stránok pre všetky mapy. Obe možnosti by bolo zlé, ale pekne poporiadku.

Štandardná šírka v pixeloch pre lokalitu budete niekedy potrebovať

Prior k rozvoju masový jav adaptívne rozloženia bol vývoj webu s tisíckami pixelov na šírku. Tento údaj bol vybraný z jedného prostého dôvodu - že na mieste bol umiestnený na ľubovoľnej obrazovke. A tam je určitá logika, ale predpokladajme, že osoba je ešte aspoň HD monitor na ploche. V tomto prípade bude vaše layout zdať malý pruh v strede obrazovky, kde je všetko tvarované v jednej hromade a na bokoch obrovské mimo priestorov. Teraz predpokladajme, že človek prišiel na vaše webové stránky z tabliet s obrazovkou o 800 pixelov na šírku a je kontrolovaná v nastavení "Zobraziť webových stránkach plnú verziu." V tomto prípade sa vaše webové stránky budú tiež zobrazené nesprávne, ako jednoducho nezmestia na obrazovku.

Z týchto úvah je možné konštatovať, že s pevnou šírkou pre rozvrhnutie, my jednoducho nezmestia a chcete nájsť inú cestu. Poďme analyzovať myšlienku samostatného rozloženie pre každú šírku obrazovky.

Rozvrhnutie pre každú príležitosť

Ak ste si vybrali ako stratégia pre vytvorenie rozvrhnutie na veľkosti k dispozícii po celý displej na trhu, potom sa vaše stránky budú najunikátnejšou na internete. Koniec koncov, dnes je to jednoducho nemožné pokryť celý rad zariadení v snahe urobiť presné nastavenie pre každú možnosť. Ale ak sa sústredíte na najpopulárnejšie rozlíšením monitora a displejom, táto myšlienka je dobrá. Jeho Jedinou nevýhodou - finančné náklady. Koniec koncov, keď projektant designer rozhranie a kodér bude nútená 5 alebo 6 krát vykonávať rovnakú prácu, projekt bude stáť neprimerane pôvodne vysadené v rozpočte ceny.

Z tohto dôvodu sa môžu pochváliť hojnosť verzií pre rôznych obrazovkách môže byť okrem toho, že miesta, odnostranichniki, ktorého cieľom - predať jeden výrobok a uistite sa, že to dobre. No, ak nie ste jedným z tých pristátie, multi-site, to dá rozum ďalej.

Najobľúbenejšie veľkosti stránok

Kompromis medzi týmito dvoma extrémami je nákres usporiadanie pre tri alebo štyri veľkosti obrazovky. Medzi nimi, jeden musí byť rozloženie pre mobilné zariadenia. Zvyšok musí byť prispôsobená pre malé, stredné a veľké pracovné plochy. Ako si vybrať šírku prihlásený? Nižšie predstavujeme HotLog štatistiky služieb za máj 2017, ktoré nám ukazuje rozloženie popularity rôznych rozlíšenie obrazovky zariadenia, ako aj dynamiku zmeny v tomto ukazovateli.

Z tabuľky je možné sa naučiť, ako určiť veľkosť stránky, ktorú chcete použiť. Okrem toho možno vyvodiť záver, že najčastejším je dnes formát obrazovky 1366 x 768 pixelov. Tieto obrazovky sú inštalované v rozpočte notebook, takže ich popularita je prirodzené. Budúci najpopulárnejšia je Full HD monitorov, čo je zlatý štandard pre filmy, hry, a preto vytvoriť rozloženie stránky. Ďalej v tabuľke vidíme dovoliť mobilné zariadenia 360 x 640 pixelov, rovnako ako rôzne prevedení desktop a mobilné obrazovky neskôr.

layout dizajn

Takže, po analýze štatistík, môžeme konštatovať, že optimálna šírka miesta má 4 varianty:

1. Verzia notebooky s 1366 pixelov na šírku.
2. Full HD-version.
3. 800 pixelov na šírku rozloženie veľkosti pre zobrazenie na malé stolové monitory.
4. Mobilná verzia stránok - 360 pixelov na šírku.

Predpokladajme, že sme sa rozhodli, čo chcete použiť veľkosť generovaného zdrojového kódu pre danú lokalitu. Ale taký projekt by stále bolo nákladné. Takže zvážiť ďalšie možnosti, tentokrát bez použitia pevnej šírky.

Make flexibilné usporiadanie

Tam je alternatívny prístup, ktorý je potrebné nastaviť iba pre minimálnu veľkosť obrazovky, a naprostá veľkosť miest bude požiadaný percenta. V tomto prípade sú prvky rozhrania ako menu, tlačidlá a logá, je možné definovať v absolútnych hodnotách, so zameraním na minimálnu veľkosť šírky obrazovky v pixeloch. Bloky s obsahom, naopak, bude roztiahnutý podľa zadaného percenta šírky oblasti obrazovky. Tento prístup umožňuje nezistí veľkosť miesta ako obmedzenie pre návrhárov a talent na prekonanie tejto nuansy.

Aký je zlatý pomer, a ako používať webové stránky k rozvrhnutie?

Dokonca aj v renesancii mnoho architektov a umelcov sa pokúsil dať jeho výtvory dokonalý tvar a proporcie. Odpovede na otázky o dôsledkoch takých rozmerov, že sa obrátil na kráľovná všetkých vied - matematiky.

Od tej doby dní staroveku bol vynájdený v pomere, ktorý naše oko vníma ako najprirodzenejší a elegantný, pretože je všadeprítomný v prírode. Objaviteľ vzorca tohto pomeru bol talentovaný grécky architekt menoval Phidias. Je vypočítané, že keď väčšina z proporcií týka nízkej ako celok poskytuje väčšiu, potom sa tento podiel bude vyzerať dobre. Ale v tomto prípade, ak budete chcieť rozdeliť asymetricky objekt. Tento podiel sa neskôr stal sa nazýva zlatý pomer, ktorý ešte nemá preceňovať jej význam pre svetové kultúrne histórie.

Vráťme sa k návrhu internetových stránok

Je to veľmi jednoduché - pomocou zlatý pomer, môžete navrhovať stránky, ktoré budú najviac lahodia ľudskému oku. Vypočíta podľa vzorca zlatého rezu, zistíme, iracionálne číslo 1,6180339887 ..., ale pre väčšie pohodlie môžete použiť zaoblený hodnotu 1,62. To znamená, že naša strana blokov by mala byť 62% a 38% z celku, bez ohľadu na to, akú veľkosť generované zdrojový kód pre web, ktorý používate. Príklad vidíte na nasledujúcej schéme:

Využívanie nových technológií

Moderný vzhľad technológie webové stránky umožňujú presne vyjadriť myšlienky projektanta a dizajnéra, takže teraz si môžete dovoliť realizáciu odvážnejšie nápady, než na úsvite internetové technológie. už nebudú musieť toľko lámu hlavu, čo by malo byť veľkosť miesta. S príchodom takých veciach, ako je blok rozloženie adaptívne, dynamického zaťaženia obsahu a písma, vývoj webových stránok sa stala mnohonásobne viac zábavná. Koniec koncov, tieto technológie majú menej obmedzení, aj keď sú. Ale ako viete, bez obmedzenia, by nebolo umenie. Odporúčame použiť skutočne kreatívny prístup k navrhovaniu - zlatého rezu. S ním budete môcť efektívne a príjemne vyplní pracovnú plochu, bez ohľadu na to, akú veľkosť či stránky ste požiadaní v šablónach.

Ako zvýšiť web pracovného priestoru

Je pravdepodobné, že nebudete mať dostatok priestoru pre uloženie všetkých prvkov rozhrania v rozložení na malú veľkosť. V tomto prípade budete musieť začať premýšľať kreatívne, alebo dokonca viac kreatívny, než ste predtým.

Maximálna uvoľniť priestor na mieste, ako je to možné, skrýva navigáciu v pop-up menu. Tento prístup je logické použiť nielen mobilné, ale aj na pracovnej ploche. Koniec koncov, používateľ nepotrebuje po celú dobu, aby sa pozrel, čo má záhlavie na vašich webových stránkach - to prišlo na obsah. Užívateľ si praje byť rešpektovaná.

Ako príklad dobrý spôsob, ako skryť menu je nasledujúci rozloženie (na obrázku nižšie).

V pravom hornom rohu červenej oblasti, môžete vidieť kríž, kliknite v ponuke, ktorá sa skrýva v malej ikony, takže užívateľ sám s webovým stránkam.

Avšak, to nie je povinné, môžete nechať navigáciu, ktorá je stále v nedohľadne. Ale môžete robiť to krásny dizajnový prvok, nie iba zoznam odkazov na obľúbené stránky. Použite intuitívne ikony okrem textových odkazov, alebo dokonca nahradiť. To tiež umožní vaše stránky efektívnejšie využitie priestoru obrazovky na vašom zariadení.

Najlepšie webové stránky - adaptívne

Ak si neviete, ktorý z nich si vybrať rozvrhnutie pre web, všetko len pre vás. Ak chcete ušetriť náklady na vývoj a zároveň nestráca publikum kvôli zlému rozloženie pre niektoré zariadenia, použite responzívne dizajn webu.

Adaptívne nazýva dizajn, ktorý vyzerá na rôznych zariadeniach rovnako dobre. Tento prístup umožní, aby vaše stránky byť jasné a jednoduché aj pre notebook, aspoň pokiaľ ide o tabletu, a to aj na smartphone. To dosiahlo tohto efektu je spôsobené automatickými zmenami pracovného priestoru šírky obrazovky. Pomocou adaptívne štýlov pre web, užívate správne rozhodnutie je to možné.

Čo odlišuje adaptívne dizajn Informácie o dostupnosti rôznych verzií svojich webových stránkach

Citlivý design je odlišný od mobilného webu, takže v takom prípade užívateľ dostane html kód, ktorý je odlišný od pracovnej plochy. To je nevýhodné z hľadiska optimalizácie výkonu servera, rovnako ako optimalizácia pre vyhľadávače. Okrem toho, tým ťažšie sa stáva pre Skúmanie štatistík podľa rôznych verzií na webe. Adaptívne prístup je bez nedostatkov.

Prispôsobivosť pre rôzne zariadenia je dosiahnuté vďaka šírke rozvrhnutie alebo percentách cez prenosové bloky do zostávajúceho voľného miesta (vo zvislej rovine miesto horizontálne smartphone na pracovnej ploche), alebo jednotlivé rozvrhnutie vytvorením rôznych obrazoviek.

Môžete sa dozvedieť viac o citlivý dizajnu a rozvíjať môžete z kníh.