Tīmekļa vietņu izstrādes tehnoloģija ir ļoti daudzpusīgs process. Bet tomēr visus tā posmus var iedalīt divās galvenajās sastāvdaļās - funkcionālajā un ārējā apvalkā. Vai arī, kā tas ir ierasts tīmekļa pārziņiem, attiecīgi aizmugures un priekšgala. Cilvēki, kuri savas mājas lapas pasūta web izstrādes studijās, bieži vien naivi uzskata, ka ir vērts pievērsties tikai funkcionalitātei, un tas būs pareizais lēmums. Taču tā ir ļoti, ļoti retos gadījumos, parasti starta projektiem beta testēšanas stadijā. Pretējā gadījumā grafiskajam dizainam un lietotāja interfeisam vienkārši jāatbilst tīmekļa izstrādes standartiem un jābūt ērtiem.
Pirmais stūrakmens, ar ko saskaras izstrādātājs vai dizainers saskaras, ir vietnes izkārtojuma platums. Galu galā tam ir jāzīmē saskarnes. Tīri intuitīvi rodas divas pieejas - vai nu izveidojiet atsevišķus izkārtojumus katrai populārajai ekrāna izšķirtspējai, vai arī izveidojiet vienu vietnes versiju visiem displejiem. Un abas iespējas būs nepareizas, taču vispirms vispirms.
Standarta vietnes platums pikseļospar Runet
Pirms adaptīvā izkārtojuma izstrādes vietnes izveide ar tūkstoš pikseļu platumu bija masveida parādība. Šis skaitlis tika izvēlēts viena vienkārša iemesla dēļ - lai vietne ietilptu jebkurā ekrānā. Un tam ir sava loģika, bet pieņemsim, ka cilvēkam uz darbvirsmas joprojām ir vismaz HD monitors. Šajā gadījumā jūsu izkārtojums šķitīs kā maza sloksne ekrāna vidū, kur viss ir salīmēts vienā kaudzē, un sānos ir milzīga neizmantota vieta. Tagad pieņemsim, ka persona piekļūst jūsu vietnei planšetdatorā ar 800 pikseļu platu ekrānu un iestatījumos ir atzīmēta opcija “Rādīt visu vietni”. Šajā gadījumā arī jūsu vietne tiks parādīta nepareizi, jo tā vienkārši neietilps ekrānā.
No šiem apsvērumiem varam secināt, ka fiksēts platums izkārtojumam mums noteikti nav piemērots un jāmeklē cits veids. Analizēsim ideju par atsevišķu izkārtojumu katram ekrāna platumam.
Izkārtojumi visiem gadījumiem
Ja kā stratēģiju esat izvēlējies izveidot izkārtojumus visiem tirgū pieejamiem ekrāna izmēriem, jūsu vietne būs unikālākā visā internetā. Galu galā šodien ir vienkārši neiespējami aptvert visu ierīču klāstu, mēģinot precīzi noregulēt katru iespēju. Bet, ja koncentrējaties uz populārākajām monitoru un ierīču ekrānu izšķirtspējām, tad ideja nav slikta. Tās vienīgais trūkums ir finansiālās izmaksas. Galu galā, kad saskarnes dizainers, dizainers un kodētājs ir spiesti veikt vienu un to pašu darbu 5 vai 6 reizes, projekts maksāsnesamērīgi augstāka nekā sākotnēji budžetā paredzētā cena.
Tādēļ tikai vienas lapas vietnes var lepoties ar daudzām versijām dažādiem ekrāniem, kuru mērķis ir pārdot vienu produktu un noteikti darīt to labi. Ja jums nav neviena no šīm piezemēšanās vietām, bet gan vairāku lapu vietne, jums vajadzētu padomāt tālāk.
Populārākie vietņu izmēri
Kompromiss starp abām galējībām ir izkārtojuma atveidošana trim vai četriem ekrāna izmēriem. Starp tiem ir jābūt mobilo ierīču izkārtojumam. Pārējie ir jāpielāgo maziem, vidējiem un lieliem darbvirsmas ekrāniem. Kā izvēlēties vietnes platumu? Zemāk piedāvājam HotLog servisa statistiku par 2017. gada maiju, kas parāda dažādu ierīču ekrāna izšķirtspējas popularitātes sadalījumu, kā arī šī rādītāja dinamiku.
No tabulas varat uzzināt, kā noteikt izmantojamās vietnes lielumu. Turklāt varam secināt, ka mūsdienās visizplatītākais formāts ir 1366x768 pikseļu ekrāns. Šādi ekrāni tiek uzstādīti budžeta klēpjdatoros, tāpēc to popularitāte ir dabiska. Nākamais populārākais ir Full HD monitors, kas ir zelta standarts video, spēlēm un līdz ar to arī vietņu izkārtojumu veidošanai. Tālāk tabulā redzama mobilo ierīču izšķirtspēja 360x640 pikseļi, kā arī dažādas iespējas galddatoru un mobilo ierīču ekrāniem pēc tās.
Izkārtojuma noformēšana
TātadPēc statistikas analīzes varam secināt, ka optimālajam vietnes platumam ir 4 variācijas:
- Klēpjdatora versija ar 1366 pikseļu platumu.
- Pilna HD versija.
- 800 pikseļu plats izkārtojums attēlošanai mazos galddatoru monitoros.
- Vietnes mobilā versija - 360 pikseļu platums.
Pieņemsim, ka esam izlēmuši, kādu izmēru izmantot vietnes ģenerētajam avotam. Taču šāds projekts tomēr izmaksātu dārgi. Tāpēc apskatīsim vairāk iespēju, šoreiz neizmantojot fiksētu platumu.
Izkārtojuma padarīšana elastīga
Ir alternatīva pieeja, kad ir vērts pielāgoties tikai minimālajam ekrāna izmēram, un paši vietņu izmēri tiks noteikti procentos. Tajā pašā laikā tādus interfeisa elementus kā izvēlnes, pogas un logotips var iestatīt absolūtās vērtībās, koncentrējoties uz minimālo ekrāna platuma izmēru pikseļos. Gluži pretēji, bloki ar saturu tiks izstiepti atbilstoši norādītajam ekrāna laukuma platuma procentam. Šī pieeja ļauj pārstāt uztvert vietņu lielumu kā dizainera ierobežojumu un prasmīgi pārspēt šo niansi.
Kas ir zelta griezums un kā to var izmantot tīmekļa lapas izkārtojumam?
Pat renesanses laikā daudzi arhitekti un mākslinieki centās saviem darbiem piešķirt nevainojamu formu un proporcijas. Lai saņemtu atbildes uz jautājumiem par šādas proporcijas vērtībām, viņi vērsās pie visu zinātņu karalienes - matemātikas.
Kopš senatnes ir izgudrota proporcija, ko mūsu acs uztver kā dabiskāko un elegantāko,jo tas ir visuresošs dabā. Šādas attiecības formulas atklājējs bija talantīgs sengrieķu arhitekts, vārdā Phidias. Viņš aprēķināja, ja lielākā proporcija ir saistīta ar mazāko, jo veselums ir saistīts ar lielāko, tad šāda proporcija izskatīsies vislabāk. Bet tas ir gadījumā, ja vēlaties sadalīt objektu asimetriski. Šo proporciju vēlāk nosauca par zelta griezumu, kas joprojām nepārvērtē tās nozīmi pasaules kultūras vēsturē.
Atpakaļ uz tīmekļa dizainu
Tas ir ļoti vienkārši – izmantojot zelta griezumu, var noformēt lapas, kas būs pēc iespējas patīkamākas cilvēka acij. Aprēķinot pēc zelta griezuma formulas definīcijas, iegūstam iracionālo skaitli 1, 6180339887 …, bet ērtības labad varam izmantot noapaļotu vērtību 1, 62. Tas nozīmēs, ka mūsu lapas blokiem jābūt 62. % un 38% no kopuma neatkarīgi no tā, kāda izmēra ir jūsu izmantotās vietnes ģenerētais avots. Šajā diagrammā varat redzēt piemēru:
Izmantojiet jaunās tehnoloģijas
Mūsdienīgas vietņu izkārtojuma tehnoloģijas ļauj precīzi nodot plānotāja un dizainera ideju, tāpēc šobrīd vari atļauties īstenot drosmīgākas idejas nekā interneta tehnoloģiju rītausmā. Jums vairs nav rūpīgi jādomā par to, kādam jābūt vietnes izmēram. Līdz ar tādu lietu parādīšanos kā bloku adaptīvais izkārtojums, dinamiska satura un fontu ielāde, vietņu izstrāde ir kļuvusi daudz patīkamāka. Galu galā šīs tehnoloģijas irmazāk ierobežojumu, lai gan 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 dizaina pieeju – zelta griezumu. Ar to jūs varat efektīvi un skaisti aizpildīt darbvietu neatkarīgi no tā, kādus vietnes izmērus iestatāt savās veidnēs.
Kā palielināt vietnes darba telpu
Pastāv liela iespēja, ka jums nebūs pietiekami daudz vietas, lai ievietotu visus lietotāja interfeisa elementus nelielā izkārtojumā. Šajā gadījumā jums būs jāsāk domāt radoši vai pat radošāk nekā iepriekš.
Maksimāli atbrīvojiet vietu vietnē, paslēpjot navigāciju uznirstošajā izvēlnē. Šo pieeju ir loģiski izmantot ne tikai mobilajās ierīcēs, bet arī galddatoros. Galu galā lietotājam nav visu laiku jāskatās, kādi virsraksti ir jūsu vietnē - viņš ieradās pēc satura. Un lietotāja vēlmes ir jārespektē.
Piemērs labam izvēlnes paslēpšanas veidam ir šāds izkārtojums (foto zemāk).
Sarkanā laukuma augšējā stūrī ir redzams krustiņš, uz kura noklikšķinot, izvēlne tiks paslēpta mazā ikonā, atstājot lietotāju vienatnē ar vietnes saturu.
Tomēr tas nav obligāti, jūs varat atstāt navigāciju, kas vienmēr būs redzama. Bet jūs varat padarīt to par skaistu dizaina elementu, nevis tikai populāru saišu sarakstu vietnē. Izmantojiet intuitīvas ikonas papildus teksta saitēm vai pat to vietā. tas ir tas patsļaus jūsu vietnei efektīvāk izmantot ekrāna vietu lietotāja ierīcē.
Labākā vietne ir atsaucīga
Ja nezināt, kādu vietnes izkārtojumu izvēlēties, tad jums viss ir vienkārši. Lai ietaupītu uz izstrādes izmaksām un tajā pašā laikā nezaudētu auditoriju sliktas izkārtojuma dēļ dažām ierīcēm, izmantojiet adaptīvu dizainu.
Atsaucīgs dizains ir dizains, kas vienlīdz labi izskatās dažādās ierīcēs. Šī pieeja ļaus jūsu vietnei būt saprotamai un ērtai pat klēpjdatorā, pat planšetdatorā, pat viedtālrunī. Šis efekts tiek panākts, automātiski mainot ekrāna darba zonas platumu. Izmantojot savai vietnei adaptīvas stila lapas, jūs pieņemat vislabāko iespējamo lēmumu.
Kāda ir atšķirība starp adaptīvo dizainu un vietnes versijām
Responsīvais dizains atšķiras no vietnes mobilās versijas ar to, ka pēdējā gadījumā lietotājs saņem html kodu, kas atšķiras no darbvirsmas versijas. Tas ir trūkums attiecībā uz servera veiktspējas optimizāciju, kā arī meklētājprogrammu optimizāciju. Turklāt kļūst grūtāk aprēķināt statistiku dažādām vietnes versijām. Adaptīvajai pieejai nav šo trūkumu.
Atsaucība dažādām ierīcēm tiek panākta, izmantojot izkārtojumu ar norādīto platuma procentuālo daļu vai pārvietojot blokus uz pieejamo vietu (vertikālā plaknē viedtālrunī, nevishorizontāli uz darbvirsmas) vai izveidojot atsevišķus izkārtojumus dažādiem ekrāniem.
Uzziniet vairāk par adaptīvo dizainu un izstrādi mūsu apmācībās.
