SITE MEKLĒŠANA

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. Pilnībā intuitīvi ir divas pieejas - vai nu katrai tautas ekrāna izšķirtspējai izveidot atsevišķu izkārtojumu, vai izveidot visu vietņu versiju visiem kartējumiem. 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 tam ir sava loģika, bet pieņemsim, ka personai joprojām ir vismaz HD monitoru darbvirsmā. Šajā gadījumā jūsu izkārtojums ekrāna vidū izskatīsies kā niecīga sloksne, kurā viss ir novietots vienā kaudzē, 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ējiet izvēles rūtiņu "Rādīt pilnīgu mājas lapas versiju". Šajā gadījumā jūsu vietne tiks parādīta arī nepareizi, jo tā 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ā, ja 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 jums nav neviena no šīm izkraušanas vietām un vairāku lapu vietne, tad ir vērts apspriest 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? Tālāk ir sniegta HotLog pakalpojuma statistika par 2017. gada maiju, kas parāda dažādu ierīču ekrāna rezolūciju popularitātes izplatību, kā arī šīs rādītāju maiņas dinamiku.

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. 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.

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. Šādā gadījumā tādus interfeisa elementus kā izvēlnes, pogas un logotipus var iestatīt absolūtās vērtībās, koncentrējoties uz ekrāna platuma minimālo izmēru 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.

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

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 darba vietu

Iespējams, ka jums nebūsPietiekami daudz vietas, lai piemērotu visiem interfeisa elementiem nelielu izkārtojumu. Šajā gadījumā jums ir jāsāk radoši domāt vai pat radošākāk nekā agrāk.

Vietnē var būt maksimāli atbrīvota vietauznirstoš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 vajadzīgs viss laiks, lai apskatītu, kādas rubrikas ir jūsu vietnē - viņš nāca pēc satura. Un lietotāja vēlmes ir jāievēro.

Laba veida izvēlnes paslēpšanas piemērs ir šāds izkārtojums (foto zemāk).

vietnes izveidotā 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 tas nav nepieciešams, jūs 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 vietas lietotāja ierīcē.

kā izvēlēties vietnes platumu

Labākais vietne - adaptīvā

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 tajā pašā laikā nezaudētu auditoriju sliktas izkārtojuma dēļ jebkurai ierīcei, izmantojiet adaptīvo 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 skaidrai un ērtai pat klēpjdatorā, pat planšetdatorā, pat viedtālrunī. Šis efekts tiek sasniegts, automātiski mainot ekrāna darba zonas platumu. Izmantojot jutīgas vietnes stilu lapas, jūs pieļaujat pareizo lēmumu.

optimālais vietnes platums

Kāda ir atšķirība starp jutīgu dizainu un dažādām vietnes versijām?

Atbildīgais dizains atšķiras no mobilās versijas.vietā, kurā pēdējā gadījumā lietotājs saņem html kodu, kas atšķiras no darbvirsmas. Tas ir nelabvēlīgs servera veiktspējas optimizēšanas, kā arī meklētājprogrammu optimizācijas ziņā. Turklāt ir grūtāk saskaitīt statistiku par dažādām vietnes versijām. Adaptīvai pieejai nav šādu trūkumu.

kāds būtu vietnes lielums

Ir sasniegta dažādu ierīču pielāgojamībauz izkārtojuma rēķina ar platuma procentuālo iestatījumu, pārvietojot blokus uz pieejamo vietu (viedtālruņa vertikālā plaknē, nevis horizontālajā darbvirsmas vietā) vai arī izveidojot atsevišķus izkārtojumus dažādiem ekrāniem.

Jūs varat uzzināt vairāk par adaptīvo dizainu un tā izstrādi no mācību grāmatām.

  • Reitings:



  • Pievienot komentāru