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

Internets
Notiek ielāde ...

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 kurusaskaras interfeisa dizainers, vai dizainers - ir platums vietnes izkārtojumu. 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. 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, 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 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.

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ānu izšķirtspēju izplatības popularitāti, kā arī šo izmaiņu 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. 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, varam secināt, ka optimālajam vietnes platumam ir 4 varianti:

  1. Versija klēpjdatoriem ar platumu 1366 pikseļi.
  2. Full HD versija.
  3. 800 pikseļu plats izkārtojums, lai to parādītu mazos galddatoru monitoros.
  4. Vietnes mobilā versija - platums 360 pikseļi.

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

Izkārtojuma noformēšana elastīga

Pastāv alternatīva pieeja, kadir vērts pielāgoties tikai minimālajam ekrāna izmēram, un vietņu lielumi paši tiks noteikti procentos. Tajā pašā laikā interfeisa elementus, piemēram, izvēlnes, pogas un logotipu, var iestatīt absolūtās vērtībās, koncentrējoties uz ekrāna platuma minimālo izmēru pikseļos. Savukārt bloki ar saturu tiks izstiepti atbilstoši norādītajiem ekrāna laukuma platuma lielumiem. Šī pieeja ļauj pārtraukt uztvert vietņu izmērus kā dizainera ierobežojumu un talantīgi pārspēt šo nianšu.

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

Atpakaļ Renesanā daudzi arhitekti unmākslinieki mēģināja radīt idejas formu un proporciju. Lai atbildētu uz jautājumiem par šādas proporcijas vērtībām, viņi pievērsās visu zinātņu karalienei - matemātikai.

Kopš senatnes izgudrošanasproporcija, kuru mūsu acs uztver kā vispiemērotāko un elegantāko, jo tā ir visuresoša pēc būtības. Šādu attiecību formulas atklājējs bija talantīgs senā grieķu arhitekts Phidias. Viņš aprēķināja, ka, ja liela daļa attiecības ir saistīta ar mazāko, jo visa ir saistīta ar lielāku, tad šāda proporcija izskatīsies vislabāk. Bet tas ir gadījumā, ja vēlaties objektu sadalīt asimetriski. Šo proporciju vēlāk sauca par zelta sekciju, kas joprojām nenovērtē tās nozīmi pasaules kultūras vēsturē.

Atpakaļ uz web dizains

Tas ir ļoti vienkārši - izmantojot zelta koeficientuJūs varat veidot lapas, kas būs tikpat patīkami kā cilvēka acs. Aprēķinot zelta iedaļas formulas definīciju, mēs iegūstam iracionālo skaitli 1,6180339887 ..., taču ērtībai jūs varat izmantot noapaļoto vērtību 1,62. Tas nozīmēs, ka mūsu lapas blokiem jābūt 62% un 38% no kopējā apjoma, neatkarīgi no tā, kāda izmēra izveidotajam vietnei jūs izmantojat. Piemērs, ko jūs varat redzēt šajā shēmā:

vietnes platums pikseļos

Izmantojiet jaunas tehnoloģijas

Mūsdienu tehnoloģiju izkārtojuma vietnesļauj precīzi izpaust ideju par dizaineru un dizaineru, tāpēc tagad jūs varat atļauties īstenot vērienīgākas idejas nekā interneta tehnoloģiju pirmsākumos. Jums vairs nav jācīnās ar galvu, nekā būtu jābūt vietnes izmēram. Pieaugot tādām lietām kā bluķu pielāgotais izkārtojums, satura un fontu dinamiskā 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 arī tie joprojām pastāv. Bet, kā jūs zināt, bez ierobežojumiem nebūtu mākslas. Mēs iesakām izmantot vienu patiesi radošu dizainu - zelta sadaļu. Ar to jūs varat efektīvi un skaisti aizpildīt darbvietu neatkarīgi no tā, cik lielu vietņu jūs norādāt savās veidnēs.

Kā palielināt vietnes darba vietu

Iespējams, ka jums nebūsPietiekami daudz vietas, lai visas interfeisa elementi atbilstu mazam izkārtojumam. Š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ī jūs varat redzēt krustu, uz kura noklikšķinot uz tā, paslēpsies izvēlne nelielā ikonā, 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.

Notiek ielāde ...
Notiek ielāde ...