Madhësitë standarde të faqes: karakteristikat, kërkesat dhe rekomandimet

Teknologjia e zhvillimit të faqeve të internetit është një proces shumë i shumëanshëm. Por ende të gjitha fazat e saj mund të ndahen në dy komponentë kryesore - funksionale dhe shell jashtme. Ose, siç është e zakonshme në webmasters, backend dhe front-end, respektivisht. Njerëzit që rendisin faqet e tyre të internetit nga studiot e zhvillimit të internetit, shpesh naivisht besojnë se ia vlen të përqëndrohet vetëm në funksionalitetin dhe kjo do të jetë vendimi i duhur. Por kjo është e vërtetë në shumë raste shumë të rralla, zakonisht për projektet e fillimit në fazën beta. Në aspekte të tjera, dizajni grafik dhe ndërfaqja e përdoruesit thjesht duhet të jenë në përputhje me standardet e zhvillimit të uebit dhe të jenë të rehatshme.

Gurthemeli i parë me të cilin ballafaqohet dizajni i ndërfaqes, ose dizajner, është gjerësia e faqeve të faqeve. Pas të gjitha, është e nevojshme për të nxjerrë interfaces për të. Thjesht intuitive ekzistojnë dy qasje - ose për të bërë Layouts të veçanta për secilën rezolutë të popullarizuar të ekranit, ose për të krijuar një version të faqes për të gjitha mappings. Dhe të dy opsionet do të jenë të gabuara, por gjithçka në rregull.

Gjerësia standarde e faqes në pixels për RuNet

Para zhvillimit të planit adaptiv, një fenomen masiv ishte zhvillimi i një vendi me një gjerësi prej një mijë piksish. Kjo shifër u zgjodh për një arsye të thjeshtë - për të vënë vendin në çdo ekran. Dhe kjo ka logjikën e vet, por le të supozojmë se personi ka ende të paktën një monitor HD në desktop. Në këtë rast, faqosja juaj do të duket si një shirit i vogël në mes të ekranit, ku çdo gjë është grumbulluar në një grumbull, dhe në anët është një hapësirë e madhe e pabanuar. Tani le të supozojmë se një person ka ardhur në faqen tuaj nga një tabletë me një ekran 800 piksele të gjerë dhe në cilësimet është shënoni "Trego versionin e plotë të faqes". Në këtë rast, faqja juaj gjithashtu do të shfaqet gabimisht, sepse thjesht nuk përshtatet në ekran.

Nga këto konsiderata, mund të konkludojmë se gjerësia fikse për paraqitjen nuk përputhet saktësisht me ne dhe është e nevojshme të kërkohet një mënyrë tjetër. Le të analizojmë idenë e një paraqitjeje të veçantë për secilën gjerësi të ekranit.

Layouts për të gjitha rastet

Nëse keni zgjedhur si një strategji për të krijuar skicime për të gjitha madhësitë e ekranit të pranishëm në treg, atëherë faqja juaj do të bëhet më unike në të gjithë Internetin. Në fund të fundit, është thjesht e pamundur të mbulosh të gjithë gamën e pajisjeve sot, duke u përpjekur për të bërë një rregullim të saktë për çdo opsion. Por nëse përqendrohesh te zgjidhjet më të njohura të monitorëve dhe ekraneve të pajisjes, atëherë ideja nuk është e keqe. I vetmi minus është kostot financiare. Në fund të fundit, kur projektuesi i ndërfaqes, projektuesi dhe projektuesi i faqosjes janë të detyruar të bëjnë të njëjtën punë 5 ose 6 herë, projekti do të kushtojë në mënyrë të pandashme më shumë se çmimi i vendosur fillimisht në buxhet.

Prandaj, mburremi me një numër të madh versionesh për ekranet e ndryshme, me përjashtim të faqeve të një faqe të vetme, qëllimi i të cilave është të shesin një produkt dhe domosdoshmërisht të bëjnë atë mirë. Epo, nëse nuk keni një nga këto ulje, dhe një faqe me shumë faqe, atëherë ia vlen të diskutohet më tej.

Madhësia më e popullarizuar e faqes

Një kompromis në mes të dy ekstremeve po vizaton një plan urbanistik për tre ose katër madhësi të ekranit. Midis tyre, domosdoshmërisht duhet të jetë një model për pajisjet mobile. Pjesa tjetër duhet të përshtatet për një ekran të vogël, të mesëm dhe të gjerë desktop. Si të zgjidhni gjerësinë e faqes? Më poshtë janë statistikat e shërbimit HotLog për Maj 2017, që na tregon shpërndarjen e popullaritetit të zgjidhjeve të ndryshme të ekraneve të pajisjes, si dhe dinamikën e këtij ndryshimi të treguesit.

Nga tabela mund të mësoni se si të përcaktoni madhësinë e faqes që dëshironi të përdorni. Përveç kësaj, mund të konkludojmë se formati më i zakonshëm sot është ekrani 1366 nga 768 pikë. Ekrane të tilla janë instaluar në laptopë buxhetorë, kështu që popullariteti i tyre është i natyrshëm. E ardhmja më e popullarizuar është monitorimi Full HD, i cili është standardi i arit për videoklipe, lojëra, dhe kështu për krijimin e faqeve të faqes. Më tej në tabelë shohim zgjidhjen e pajisjeve mobile 360 në 640 pikë, si dhe mundësi të ndryshme për ekranet desktop dhe të lëvizshëm pas saj.

Hartimi i planit

Pra, pas analizimit të statistikave, mund të konkludojmë se gjerësia optimale e faqes ka 4 variacione:

1. Versioni për laptopë me gjerësi 1366 piksele.
2. Versioni Full HD.
3. Një plan urbanistik me gjerësi 800 piksele për shfaqje në monitoret e veglave të vogla.
4. Versioni celular i faqes është 360 piksele në gjerësi.

Le të themi se kemi vendosur se si të përdorim madhësinë e burimit të gjeneruar për këtë faqe interneti. Por një projekt i tillë do të vazhdojë të jetë i kushtueshëm. Pra, le të shqyrtojmë më shumë opsione, këtë herë pa përdorur një gjerësi fikse.

Hartimi i faqosjes fleksibël

Ekziston një qasje alternative, kur është e nevojshme të përshtatet vetëm për madhësinë minimale të ekranit dhe madhësia e vendeve do të caktohet me përqindje. Në këtë rast, elemente të tilla të ndërfaqes si menutë, butona dhe logoja mund të vendosen në vlera absolute, duke u fokusuar në madhësinë minimale të gjerësisë së ekranit në piksele. Bllokon me përmbajtje, në të kundërt, do të shtrihen sipas përqindjeve të specifikuara të gjerësisë së sipërfaqes së ekranit. Kjo qasje ju lejon të ndaloni perceptimin e madhësisë së faqeve si një kufizim për projektuesin dhe të talentuar për të rrahur këtë nuancë.

Cila është raporti i artë, dhe si ta aplikoni atë në paraqitjen e faqeve të internetit?

Edhe në Rilindjen, shumë arkitektë dhe artistë u përpoqën t'i japin krijimet e tyre një formë dhe proporcion ideal. Pas përgjigjes ndaj pyetjeve rreth kuptimit të këtij proporcioni, ata u kthyen në mbretëreshën e të gjitha shkencave - matematikës.

Që nga koha e antikitetit, një pjesë është shpikur, e cila syri ynë percepton si më të natyrshme dhe elegante, sepse ajo është e gjetur kudo në natyrë. Zbuluesi i formulës së një raporti të tillë ishte një arkitekt i talentuar grek i quajtur Phidias. Ai llogariti se nëse pjesa më e madhe e proporcionit i referohet më pak, pasi i tërë i referohet më të mëdhenjve, atëherë ky proporcion do të duket më i miri. Por ky është rasti nëse doni të ndani objektin asimetrikisht. Ky proporcion u quajt më vonë si seksion i artë, i cili ende nuk e mbivlerëson rëndësinë e tij për historinë botërore të kulturës.

Kthehu tek Web Design

Është shumë e thjeshtë - duke përdorur një seksion të artë, ju mund të dizajnoni faqe që do të jenë më të këndshme për syrin e njeriut. Duke llogaritur me përkufizimin e formulës për seksionin e artë, marrim numrin irracional 1.6180339887 ..., por për lehtësi ne mund të përdorim vlerën e rrumbullakët 1.62. Kjo do të thotë se blloqet e faqes tonë duhet të jenë 62% dhe 38% të të gjithë, pavarësisht nga madhësia e kodit burimor për faqen që po përdorni. Një shembull që mund të shihni në këtë skemë:

Përdorni teknologji të reja

Teknologjia moderne e dizenjimit të faqes së internetit ju lejon të përcjellni me saktësi idenë e projektuesit dhe projektuesit, kështu që tani ju mund të përballoni për të zbatuar ide më të guximshme sesa në agim të teknologjive të internetit. Nuk është më e nevojshme të mendohet seriozisht se çfarë duhet të jetë madhësia e faqes. Me mbërritjen e gjërave të tilla si paraqitja bllok adaptive, ngarkimi dinamik i përmbajtjes dhe fonts, zhvillimi i faqes është bërë shumë herë më i këndshëm. Në fund të fundit, teknologji të tilla kanë kufizime më të vogla, megjithëse ekzistojnë. Por siç e dini, pa kufizime nuk do të kishte arti. Ne ju sugjerojmë të përdorni një qasje vërtet kreative për të hartuar - një seksion të artë. Me të, ju mund të plotësoni në mënyrë efektive dhe të bukur hapësirën e punës, pa marrë parasysh madhësitë e faqeve që specifikoni në modelet tuaja.

Si të rritet hapësira e punës në vend

Ekziston një probabilitet i lartë që nuk do të keni hapësirë të mjaftueshme për të përshtatur të gjitha elementet e ndërfaqes në një plan urbanistik të vogël. Në këtë rast, duhet të filloni të mendoni në mënyrë krijuese ose edhe më kreative sesa keni bërë më parë.

Maksimizimi i hapësirës në vend mund të jetë duke fshehur navigacionin në menynë e pop-up. Kjo qasje është e logjikshme për t'u përdorur jo vetëm në pajisjet mobile, por edhe në kompjuterët. Në fund të fundit, përdoruesi nuk ka nevojë të shikojë gjithë kohën në çfarë rubrikat janë në faqen tuaj - ai erdhi për përmbajtjen. Dhe dëshirat e përdoruesit duhet të respektohen.

Një shembull i një mënyre të mirë për të fshehur menunë është paraqitja e mëposhtme (foto më poshtë).

Në cepin e sipërm të zonës së kuqe , mund të shihni një kryq, duke klikuar mbi të cilën do të fshihet menyja në një ikonë të vogël, duke lënë përdoruesin vetëm me përmbajtjen e faqes.

Megjithatë, ju nuk keni nevojë ta bëni këtë, ju mund të lini navigimin, i cili gjithmonë do të jetë i dukshëm. Por ju mund ta bëni atë një element të bukur të dizajnit, dhe jo vetëm një listë të lidhjeve popullore në faqe. Përdorni ikona intuitive përveç lidhjeve të tekstit ose madje në vend të tyre. Kjo gjithashtu do të lejojë që faqja juaj të përdorë në mënyrë më efikase hapësirën e ekranit në pajisjen e përdoruesit.

Faqja më e mirë - adaptive

Nëse nuk e dini se cilat skicime duhet të zgjedhni për faqen, atëherë gjithçka është e lehtë për ju. Për të kursyer në kostot e zhvillimit dhe ende të mos humbasësh audiencën për shkak të paraqitjes së dobët për një pajisje, përdor një dizajn adaptiv.

Adaptive quhet një dizajn që duket në pajisje të ndryshme po aq mirë. Kjo qasje do të lejojë që faqja juaj të jetë e kuptueshme dhe e përshtatshme edhe në një kompjuter portativ, të paktën në një tabletë, madje edhe në një smartphone. Ky efekt arrihet për shkak të ndryshimeve automatike në gjerësinë e zonës së punës të ekranit. Duke përdorur fletët e stilit të përshtatjes për këtë faqe, ju merrni vendimin më të saktë të mundshëm.

Çfarë e dallon dizajnin adaptiv nga disponueshmëria e versioneve të ndryshme të faqes

Dizajni përshtatës ndryshon nga versioni celular i faqes në atë që në rastin e fundit përdoruesi merr një kod html që ndryshon nga versioni desktop. Kjo është një pengesë në drejtim të optimizimit të performancës së serverit, si dhe optimizimit të motorëve të kërkimit. Përveç kësaj, bëhet më e vështirë të numërohen statistikat në versione të ndryshme të faqes. Qasja adaptive është e mangët nga këto mangësi.

Përshtatshmëria për pajisje të ndryshme arrihet përmes një shtrirjeje me një përqindje të gjerësisë ose duke transferuar blloqet në hapësirën në dispozicion (në planin vertikal në smartphone në vend të horizontalit në desktop), ose duke krijuar skica individuale për ekranet e ndryshme.

Më shumë informacion në lidhje me dizajnin adaptiv dhe zhvillimin e tij ju mund të merrni nga tekstet shkollore.