Standarta izmēri vietnes: funkcijas, prasības un ieteikumi

Tehnoloģiju attīstība tīmekļa vietnes - ir ļoti daudzšķautņains process. Tomēr visi tās posmi var iedalīt divās galvenās sastāvdaļas - funkcionāls un ārējā apvalkā. Vai, kā vidējā webmaster Beg End un Front End attiecīgi. Cilvēki, kuri iegādājās savu mājas web izstrādes studijas, bieži naivi domāt, ka tas ir nepieciešams, lai koncentrētos tikai funkcionāla, un tas būs pareizais lēmums. Bet tas ir taisnība, pēc ļoti, ļoti retos gadījumos, parasti jaundibinātiem projektu stadijā beta testēšana. No grafiskā dizaina un lietotāja interfeisa pārējie ir vienkārši pienākums ievērot web izstrādes standartiem un ir ērti.

Pirmais pamats saskaras interfeisa dizainers, vai dizainers - ir platums vietnes izkārtojumu. Galu galā, tas ir nepieciešams, lai pievērstu saskarnes viņai. Intuitīvi ir divas pieejas - vai nu veikt atsevišķus izkārtojumus katru no populārākajiem ekrāna izšķirtspēju, vai arī varat izveidot vienu versiju vietnes visām kartēm. Abi varianti būtu nepareizi, bet pirmās lietas pirmās.

Standarta platums pikseļos par vietnē jūs kādreiz nepieciešams

Pirms attīstību adaptīvo izkārtojuma masveida parādības ir attīstība vietu ar tūkstošiem pikseļiem. Šis skaitlis tika izvēlēta viena vienkārša iemesla dēļ - ka vietne tika likts uz jebkura ekrāna. Un tur ir zināma loģika, bet pieņemsim, ka persona ir vēl vismaz HD monitors uz darbvirsmas. Tādā gadījumā jūsu izkārtojums šķitīs nelielu sloksnes vidū ekrāna, kur viss tiek izformēta vienā kaudzē, un sānos milzīgo nav telpu. Tagad pieņemsim, ka cilvēks nāca uz jūsu mājas lapā no tabletes ar ekrānu 800 pikseļu platumā, un tiek pārbaudīta iestatījumos "parādīta tīmekļa vietni pilno versiju." Šajā gadījumā tiks parādīta arī jūsu mājas nepareizi, jo vienkārši neiederas ekrānā.

No šiem apsvērumiem, mēs varam secināt, ka fiksēta platuma izkārtojumam, mums vienkārši nav piemērots, un jūs vēlaties atrast citu ceļu. Pieņemsim analizēt ideju par atsevišķu izkārtojumu katrai ekrāna platumā.

Izkārtojumi visiem dzīves gadījumiem

Ja esat izvēlējies kā stratēģiju, lai radītu izkārtojumus visiem ekrāna lielums, kas pieejams tirgū, tad jūsu vietnē būs visvairāk unikāla internetā. Galu galā, šodien tas ir vienkārši neiespējami, lai segtu visu ierīču klāstu, mēģinot veikt precīzu iestatījumu katru iespēju. Bet, ja jums koncentrēties uz populārākajiem monitora izšķirtspēja un ekrāna ierīces, ideja ir laba. Tās vienīgais trūkums - finansiālās izmaksas. Galu galā, kad dizainers interfeiss dizainers un coder būs spiesta 5 vai 6 reizes, lai veiktu to pašu darbu, projekts maksās nesamērīgi sākotnēji stāda budžeta cenām.

Tāpēc lepoties pārpilnība versijas dažādiem ekrāniem var būt izņemot to, ka vietnes, odnostranichniki kura mērķis - pārdot vienu produktu, un būt pārliecināti, lai to izdarītu labi. Nu, ja jūs neesat viens no tiem Landing, multi-vietā, loģiski tālāk.

Populārākās izmēri vietām

Kompromiss starp divām galējībām ir zīmējums izkārtojumu trīs vai četras ekrāna izmēriem. Starp tiem viens ir jābūt izkārtojums mobilajām ierīcēm. Pārējais jāpielāgo mazo, vidējo un lielo darbvirsmas ekrāns. Kā izvēlēties platumu vietā? Zemāk mēs piedāvājam HotLog pakalpojumu statistiku 2017. gada maijā, kas parāda mums, ka popularitāti dažādu ierīces ekrāna izšķirtspēju izplatīšanu, kā arī izmaiņu dinamiku šajā rādītāja.

No tabulas ir iespējams uzzināt, kā noteikt lielumu vietnes, kuru vēlaties izmantot. Turklāt, var secināt, ka visbiežāk formāts šodien ir ekrāns ar 1366 x 768 punkti. Šie ekrāni ir uzstādīti budžeta klēpjdators, tādēļ to popularitāte ir dabiski. Nākamais populārākais ir Full HD-monitoru, kas ir zelta standarts filmas, spēles, un tāpēc, lai izveidotu vietnes izkārtojumu. Tālāk tabulā mēs redzam atļaut mobilajām ierīcēm 360 x 640 pikseļi, kā arī dažādi iemiesojumi darbvirsmas un mobilo ekrāniem vēlāk.

dizains izkārtojums

Tātad, pēc statistikas analīzes, mēs varam secināt, ka optimālais platums vietā ir 4 variācijas:

1. Versija klēpjdatorus ar 1366 pikseļi.
2. Full HD-versija.
3. 800 pikseļi platuma izmēru izkārtojumu displeja par mazajiem darbvirsmas monitoriem.
4. Mobilā versija vietā - 360 pikseļi platumā.

Pieņemsim, ka mēs nolēmām to, ko jūs vēlaties izmantot izmēru radīto avota koda vietā. Taču šāds projekts joprojām būtu dārgi. Tāpēc jāapsver citas iespējas, šoreiz neizmantojot fiksētu platumu.

Padarīt elastīgu izkārtojumu

Ir alternatīva pieeja, kas mums ir nepieciešams tikai, lai pielāgotu minimālo ekrāna izmēru, un milzīgais izmērs vietām tiks uzdoti procentiem. Tādā gadījumā interfeisa elementus, piemēram, izvēlnes, pogas un logotipus, var definēt absolūtā izteiksmē, koncentrējoties uz minimālo lielumu platumu ekrāna pikseļos. Bloki ar saturu, gluži pretēji, tiks izstiepts saskaņā ar norādīto procenti no platuma ekrāna platību. Šī pieeja ļauj ne noteikt lielumu vietnē, ierobežojumus attiecībā uz dizaineru un talantu, lai beat šo niansi.

Kas ir zelta attiecība, un kā izmantot tīmekļa lapas izkārtojumu?

Pat Renaissance daudzi arhitekti un mākslinieki centās dot viņa radīto perfektu formu un proporciju. Par atbildes uz jautājumiem par ietekmi tādās proporcijās, viņi vērsās pie karalienes visu zinātnes - matemātiku.

Kopš dienas senatnes izgudroja daļu, kas mūsu acu uztver kā visdabiskākā un elegants, jo tā ir visur dabā. Atklājēju formulu šī attiecība bija talantīgs grieķu arhitekts nosaukts Phidias. Ir aprēķināts, ka gadījumā, ja lielāko daļu proporcijas saistīta ar zemu kopumā nodrošina lielāku, tad šī proporcija izskatās labi. Bet šajā gadījumā, ja vēlaties sadalīt asimetriski objektu. Šī proporcija vēlāk kļuva sauc zelta attiecība, kas vēl nav pārvērtēt tās nozīmi pasaules kultūras vēsturē.

Atgriezīsimies pie web dizains

Tas ir ļoti vienkārši - izmantojot zelta attiecība, varat izveidot lapas, kas būs visvairāk patīkami cilvēka acs. Aprēķināts saskaņā ar formulu zelta sadaļā, mēs atrodam neracionāla numuru 1,6180339887 ..., bet ērtības labad var izmantot noapaļota vērtību 1,62. Tas nozīmē, ka mūsu lapa bloķē jābūt 62% un 38% no visa, neatkarīgi no tā, kāda izmēra ģenerēts pirmkods vietnes jūs izmantojat. Piemēram, jūs varat redzēt uz šādu shēmu:

Izmantot jauno tehnoloģiju

Mūsdienu tehnoloģijas izkārtojums tīmekļa vietnes ļauj jums precīzi nodot idejas dizainera un dizaineris, tāpēc tagad jūs varat atļauties ieviešanu drosmīgāki ideju nekā rītausmā interneta tehnoloģijas. Vairs nav nepieciešams daudz, lai puzzle pār to, ko būtu lielums vietā. Ar Advent tādām lietām kā bloks adaptīvā izkārtojumu, dinamiskās slodzes satura un fontus, tīmekļa vietnes izstrādi ir kļuvusi daudz reizes vairāk patīkams. Galu galā, šīs tehnoloģijas ir mazāk ierobežojumu, pat ja tie ir. Bet, kā jūs zināt, bez ierobežojumiem, nebūtu māksla. Mēs iesakām izmantot patiesi radošu pieeju projektēšana - zelta sadaļā. Ar to, jūs varēsiet efektīvi un labi aizpildīt darbvietu, neatkarīgi no tā, kāda izmēra vai vietnēm jautāts jūsu veidnes.

Kā palielināt darbvietu vietu

Iespējams, ka jums nav pietiekami daudz vietas, lai izvietotu visus interfeisa elementus izkārtojumu mazo izmēru. Tādā gadījumā jums būs jāsāk domāt radoši, vai pat vairāk, radošs, nekā jūs agrāk.

Maksimālais atbrīvotu vietu uz vietas, kā tas iespējams, slēpjas navigāciju pop-up izvēlnē. Šī pieeja ir loģiski izmantot ne tikai mobilo, bet arī uz darbvirsmas. Galu galā, lietotājam nav nepieciešams visu laiku jāskatās, kādi ir virsrakstus jūsu vietnē - tas ir pienācis saturu. Lietotājs vēlas jāievēro.

Piemērs labs veids, kā noslēpt izvēlni ir šāds izkārtojums (attēlā zemāk).

Augšējā stūrī sarkanās zonas, jūs varat redzēt pāri, noklikšķiniet uz izvēlnes, kas slēpj mazā ikona, atstājot lietotājs vienatnē ar mājas lapas saturu.

Tomēr tas nav obligāti, jūs varat atstāt navigāciju, kas vienmēr ir aktuāli. Bet jūs varat padarīt skaistu dizaina elements, ne tikai saraksts ar saitēm uz tautas vietā. Lietošana intuitīvus ikonas papildus teksta saites vai pat nomainīt tos. Tas arī ļauj jūsu vietni, lai efektīvāk izmantotu ekrāna telpu ierīcē.

Best Website - adaptīvo

Ja jūs nezināt, ko viena izvēlēties izkārtojumu vietā, viss tieši Jums. Lai ietaupītu izstrādes izmaksas, un tajā pašā laikā nezaudē auditoriju, jo sliktu izkārtojumu kādu ierīci, izmantojiet adaptīvu tīmekļa dizainu.

Adaptīvā sauc dizainu, kas izskatās dažādās ierīcēs vienlīdz labi. Šī pieeja ļaus jūsu vietni, lai būtu skaidrs un viegli pat klēpjdators, vismaz uz tabletes, pat uz viedtālrunis. Tas panākts šis efekts ir saistīts ar automātisko izmaiņām darba jomā ekrāna platumā. Izmantojot adaptīvās stila lapas par vietni, jūs lietojat pareizo lēmumu iespējams.

Kas atšķir adaptīvo dizainu pieejamību dažādām versijām jūsu vietni

Atsaucīgs dizains ir atšķirīgs no mobilā vietne, lai pēdējā gadījumā, lietotājs saņem html kodu, kas atšķiras no darbvirsmā. Tas ir trūkums, no viedokļa optimizētu veiktspēju serveri, kā arī meklētājprogrammu optimizāciju. Turklāt, jo grūtāk kļūst apsvērt statistiku, saskaņā ar dažādām versijām vietā. Adaptīvu pieeju, ir nepiemīt trūkumi.

Spēja pielāgoties dažādām ierīcēm tiek panākts, pateicoties izkārtojuma platumu vai procentos, izmantojot transporta blokos pieejamo telpu (vertikālajā plaknē, nevis horizontālā viedtālrunis uz darbvirsmas), vai arī atsevišķu izkārtojumus, izveidojot dažādus ekrāniem.

Jūs varat uzzināt vairāk par adaptīvu dizainu un attīstīt varat no grāmatām.