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

Standarta portāla izmēri: funkcijas, prasības un ieteikumi

Vietnes izstrādes tehnoloģijas ir ļotidaudzšķautņains process. Bet tomēr visus tā posmus var sadalīt divās galvenajās sastāvdaļās - funkcionālajā un ārējā apvalkā. Vai, attiecīgi, kā parasti tīmekļa pārziņiem, backend un front-end. Cilvēki, kuri pasūtījuši savas tīmekļa vietnes no tīmekļa attīstības studijām, bieži vien naivi tic, ka ir vērts pievērst uzmanību tikai funkcionalitātei, un tas būs pareizais lēmums. Bet tas tā ir ļoti, ļoti retos gadījumos, parasti starta projektiem beta stadijā. Citos aspektos grafiskais dizains un lietotāja interfeiss ir vienkārši vajadzīgi, lai tie atbilstu tīmekļa izstrādes standartiem un būtu lietotājdraudzīgi.

Pirmais stūrakmens, ar kurusaskarnes dizainers vai dizaineris saskaras, ir vietas izkārtojuma platums. Galu galā, tas ir nepieciešams izdarīt saskarnes par to. 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. Un abas opcijas būs nepareizas, bet viss kārtībā.

Vietnes standarta platums pikseļos RuNet

Pirms masveida parādības adaptācijas izkārtojuma izstrādestika izveidota vietne ar platumu tūkstoš pikseli. Šis skaitlis tika izvēlēts vienkārša iemesla dēļ - vietne ir piemērota jebkuram ekrānam. Un tur ir zināma loģika, bet pieņemsim, ka persona ir vēl vismaz HD monitors uz darbvirsmas. Šajā gadījumā jūsu izkārtojums izskatīsies kā mazs sloksnes ekrāna vidū, kur viss ir saliekts kopā, un no sāniem ir milzīgs neaizņemts telpa. Tagad pieņemsim, ka persona ieradās uz jūsu vietni no planšetdatora ar ekrāna platumu 800 pikseļi, un iestatījumos atzīmēta izvēle "Rādīt pilno mājas lapas 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, kaIzkārtojuma fiksētais platums mums ne vienmēr ir piemērots, un mums ir jāmeklē cits ceļš. Mēs analizēsim ideju par atsevišķu izkārtojumu katram ekrāna platumam.

Izkārtojumi visiem gadījumiem

Ja esat izvēlējies stratēģiju, lai izveidotu izkārtojumusvisi izmēri ekrāniem ir pieejami tirgū, tad jūsu vietne kļūs visvairāk unikāla visā internetā. Mūsdienās vienkārši nav iespējams aptvert visu ierīču klāstu, cenšoties precīzi pielāgot katru opciju. Bet, ja jūs koncentrējatties uz populārākajām monitoru un ierīču ekrānu rezolūcijām, tad šī ideja nav slikta. Vienīgais mīnus ir finansiālās izmaksas. Galu galā, kad saskarnes dizainers, dizaineris un maketētājs ir spiesti veikt to pašu darbu 5 vai 6 reizes, projekts nesamērojami izmaksās vairāk nekā sākotnēji noteiktā cena budžetā.

vietnes izmēri

Tāpēc, lepoties pārpilnība versijas dažādiemekrāni var attiekties tikai uz vienas lappuses vietnēm, kuru mērķis ir pārdot vienu produktu un pārliecināties, ka tas ir labi paveicams. Nu, ja jūs neesat viens no tiem Landing, multi-vietā, loģiski tālāk.

Populārākie vietņu izmēri

Kombinācija starp abām galējībām irIzkārtojiet trīs vai četru ekrāna izmēru izkārtojumu. Starp tiem ir jābūt mobilo ierīču mockup. Pārējais jāpielāgo mazam, vidējam un lielam galddatora ekrānam. Kā izvēlēties vietnes platumu? 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.

vietnes standarta platums pikseļos

No tabulas varat uzzināt, kā noteikt izmēruvietne, kuru vēlaties izmantot. Turklāt mēs varam secināt, ka šodien visbiežāk sastopamais formāts ir ekrāns 1366 ar 768 punktiem. Šādi ekrāni ir uzstādīti budžeta klēpjdatoros, tāpēc to popularitāte ir dabiska. Nākamais vispopulārākais ir Full HD monitors, kas ir zelta standarts videoklipiem, spēlēm un tādējādi arī vietņu izkārtojumu izveidei. Papildus tabulā mēs redzam mobilo ierīču 360 izšķirtspēju ar 640 punktiem, kā arī dažādus galddatoru un mobilo ekrānu opcijas pēc tā.

Izkārtojuma veidošana

Tātad, analizējot statistiku, mēs varam secināt, ka vietnes optimālajam platumam ir 4 varianti:

  1. Piezīmju lappušu versija ar platumu 1366 pikseļi.
  2. Full HD versija.
  3. 800 pikseļu platums izkārtojums uz maziem galddatoriem.
  4. Vietnes mobilā versija ir 360 pikseļi platumā.

Pieņemsim, ka esam nolēmuši, kas ir nepieciešamsizmantojiet lapas ģenerētā avota izmēru. Bet šāds projekts joprojām būs dārgs. Tāpēc apsveram vairāk iespēju, šoreiz neizmantojot fiksētu platumu.

Izkārtojuma noformēšana elastīga

Pastāv alternatīva pieeja, kadLai to koriģētu, ir nepieciešams tikai minimālais ekrāna izmērs, un vietņu lielumi tiks noteikti procentos. 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. Pretēji tam bloki ar saturu tiek izstiepti atbilstoši noteiktajam ekrāna laukuma platumam. Šī pieeja ļauj pārtraukt uztvert vietņu lielumu kā ierobežojumu dizaineram un talantīgam, lai pārspēt šo nianšu.

Kāda ir zelta proporcija un kā to pielietot tīmekļa lapu izkārtojumam?

Pat renesanses laikā daudzi arhitekti unmākslinieki centās radīt idejas formu un proporciju. Atbildot uz jautājumiem par šīs proporcijas nozīmi, viņi pievērsās visu zinātņu karalienei - matemātikai.

Kopš senatnes laiks tika izgudrotsproporcija, ko mūsu acs uztver kā visvairāk dabisko un eleganci, jo tā ir atrodama dabā visur. Šādas attiecības formulas atklājējs bija talantīgs senā grieķu arhitekts, vārdā Phidias. Viņš aprēķināja, ka, ja lielākā proporcija attiecas uz mazāk, jo kopumā tas attiecas uz lielāku, tad šī proporcija izskatīsies vislabāk. Bet tas ir gadījumā, ja vēlaties objektu sadalīt asimetriski. Šo daļu vēlāk sauca par zelta sekciju, kas joprojām nenovērtē tās nozīmi pasaules kultūras vēsturē.

Atpakaļ pie Web dizaina

Tas ir ļoti vienkārši - jūs izmantojat zelta sadaļujūs varat veidot lapas, kas būs vispiemērotākās cilvēka acs. Aprēķinot ar zelta iedaļas formulas definīciju, mēs iegūstam neracionālo numuru 1.6180339887 ..., bet ērtības mēs varam izmantot ar noapaļoto vērtību 1,62. Tas nozīmē, ka mūsu lapas blokiem jābūt 62% un 38% no kopējā apjoma, neatkarīgi no tā, cik liela ir vietne, kuru izmantojat, avota kodam. Piemērs, ko jūs varat redzēt šajā shēmā:

Vietnes platums pikseļos

Izmantojiet jaunas tehnoloģijas

Mūsdienu tīmekļa dizaina tehnoloģijasļauj precīzi izpaust dizainera un dizainera ideju, tādēļ tagad jūs varat atļauties īstenot drosmīgākas idejas nekā pirms interneta tehnoloģijām. Nevajadzētu nopietni izprast, cik liela ir vietne. Ar ierašanos tādās lietās kā bloku pielāgotais izkārtojums, dinamisks satura un fontu ielāde, vietnes attīstība ir kļuvusi daudzkārt patīkamāka. Galu galā, šādām tehnoloģijām ir mazāk ierobežojumu, lai gan tie ir. Bet, kā jūs zināt, bez ierobežojumiem nebūtu mākslas. Mēs iesakām izmantot vienu patiesi radošu pieeju dizainam - zelta sadaļai. Ar to jūs varat efektīvi un labi aizpildīt darbvietu neatkarīgi no izmēru vietnēm, kuras norādījāt savās veidnēs.

Kā palielināt vietnes darbvietu

Iespējams, ka jums nebūspietiekami daudz vietas, lai noturētu visus elementus interfeiss izkārtojumu maza izmēra. 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.

Maksimizēt vietu vietnē var būtuznirstošajā izvēlnē slēpjas navigācija. Šī pieeja ir loģiski izmantot ne tikai mobilajās ierīcēs, bet arī darbvirsmā. Galu galā lietotājam nav nepieciešams visu laiku meklēt kādās kategorijās jūsu vietnē - viņš atnāca par saturu. Un lietotāja vēlmes ir jāievēro.

Piemēram, labs veids, kā slēpt izvēlni, ir šāds izkārtojums (fotoattēls zemāk).

vietnes radītā avota lielums

Sarkanās zonas augšējā stūrī redzams krusts, pēc kura noklikšķinot uz tā, maza ikona tiks paslēpta izvēlnei, atstājot lietotāju vienīgi ar vietnes saturu.

Tomēr jums tas nav jādara, varatAtstājiet navigāciju, kas vienmēr būs redzama. Bet jūs varat padarīt to par skaistu dizaina elementu, nevis tikai populāru vietņu saišu sarakstu. Izmantojiet intuitīvas ikonas papildus teksta saitēm vai pat tās vietā. Tas arī ļaus jūsu vietnei efektīvāk izmantot ekrāna laukumu lietotāja ierīcē.

kā izvēlēties vietnes platumu

Labākā vietne - pielāgojama

Ja nezināt, kādu izkārtojumu izvēlēties vietnei,tad viss ir vienkāršs jums. Lai ietaupītu uz izstrādes izmaksām un nezaudētu auditoriju ierīces nepareiza izkārtojuma dēļ, izmantojiet pielāgojamu dizainu.

Adaptīvo sauc par dizainu, kasizskatās uz dažādām ierīcēm vienādi labi. Šī pieeja ļaus jūsu vietnei būt saprotamai un ērtai pat klēpjdatorā, vismaz planšetdatorā, pat viedtālrunī. Šis efekts tiek sasniegts, automātiski mainot ekrāna darba zonas platumu. Izmantojot vietnes adaptīvās stila lapas, jūs veicat visprecīzāko iespējamo lēmumu.

optimālais vietnes platums

Kāda ir atšķirība starp adaptīvo dizainu un dažādu vietnes versiju pieejamību

Adaptīvais dizains atšķiras no mobilās versijasvietā, kurā pēdējā gadījumā lietotājs saņem html kodu, kas atšķiras no darbvirsmas koda. Tas ir trūkums attiecībā uz servera veiktspējas optimizāciju, kā arī meklētājprogrammu optimizāciju. Turklāt ir grūtāk uzskaitīt statistiku par dažādām vietnes versijām. Adaptīvajai pieejai trūkst šādu trūkumu.

kādam vietnes izmēram vajadzētu būt

Ir sasniegta dažādu ierīču pielāgojamībaņemot vērā izkārtojumu ar platuma procentu vai nododot blokus uz pieejamo vietu (viedtālruņa vertikālajā plaknē, nevis horizontāli darbvirsmā) vai arī izveidojot atsevišķus izkārtojumus dažādiem ekrāniem.

Sīkāka informācija par adaptīvo dizainu un tā attīstību no mācību grāmatām.

Lasīt vairāk: