Standard na sukat na mga site: mga tampok, mga kinakailangan at mga rekomendasyon

Pagpapaunlad ng teknolohiya ng mga website - isang napaka-multi-faceted na proseso. Ngunit ang lahat ng mga yugto nito ay nahahati sa dalawang pangunahing mga bahagi - isang functional at isang panlabas na kaluban. O kaya, tulad ng sa daluyan webmaster Beg End at Front End ayon sa pagkakabanggit. Ang mga tao na bumili ng kanilang mga website sa studio web development, madalas na naively naniniwala na ito ay kinakailangan upang tumutok lamang sa functional, at ito ang magiging tamang desisyon. Ngunit ito ay totoo sa isang napaka, napaka-bihirang okasyon, karaniwan para sa mga start-up ng mga proyekto sa yugto ng beta testing. Ang natitirang bahagi ng graphic na disenyo at user interface ay nagre-nagpapasalamat upang sumunod sa mga pamantayan ng web development at maging komportable.

Ang unang pundasyon ng nakaharap sa interface designer, o taga-disenyo - ay ang lapad ng layout ng site. Pagkatapos ng lahat, ito ay kinakailangan upang gumuhit ng mga interface para sa kanya. Intuitively mayroong dalawang na paglalapit - sa halip na gumawa ng hiwalay na mga layout para sa bawat isa sa mga popular na mga resolution ng screen, o maaari kang lumikha ng isang bersyon ng site para sa lahat ng mga mapa. Ang parehong mga pagpipilian ay magiging mali, ngunit unang bagay muna.

Standard na lapad sa pixels para sa site na kayo kailanman kailangan

Bago ang pag-unlad ng agpang layout mass kababalaghan ay naging ang pagbuo ng isang site na may libu-libong mga pixels ang lapad. Malaman na ito ay napili para sa isang simpleng dahilan - na ang site ay ilagay sa anumang screen. At doon ay isang tiyak na lohika, ngunit sabihin ipinapalagay na ang isang tao ay pa rin ng hindi bababa sa HD-monitor sa desktop. Sa kasong ito, ang iyong layout ay tila maliliit na strip sa gitna ng screen, kung saan lahat ng bagay ay molded sa isang tumpok, at sa mga gilid ng malaking non-space. Ngayon sabihin ipinapalagay na ang isang tao ay dumating sa iyong web site mula sa isang tablet na may isang screen ng 800 pixels ang lapad, at ay naka-check sa mga setting ng "Ipakita ang mga Web site sa buong bersyon." Sa kasong ito, ang iyong website ay magkakaroon din ipakita nang hindi tama, tulad ng hindi lang magkasya sa screen.

Mula sa mga pagsasaalang-alang, maaari naming tapusin na ang isang nakapirming lapad ng layout, kami lamang ay hindi magkasya at gusto mong mahanap ang isa pang paraan. aralan ang mga ideya ng isang hiwalay na layout para sa bawat lapad ng screen Hayaan.

Layout para sa lahat ng okasyon

Kung napili mo bilang isang diskarte upang lumikha ng mga layout para sa lahat ng mga laki ng screen na magagamit sa merkado, at pagkatapos ang iyong site ay ang pinaka-natatanging sa Internet. Matapos ang lahat, ngayon ito ay simpleng imposible upang masakop ang buong hanay ng mga aparato sa isang pagtatangka na gumawa ng isang eksaktong setting para sa bawat pagpipilian. Ngunit kung kang tumuon sa mga pinaka-popular monitor resolution at screen mga aparatong, ang ideya ay mabuti. Nito tanging disbentaha - ang pinansiyal na mga gastos. Matapos ang lahat, kapag ang taga-disenyo ng interface designer at coder ay sapilitang sa 5 o 6 na beses upang maisagawa ang parehong trabaho, ang proyekto ay nagkakahalaga disproportionately orihinal na nakatanim sa presyong badyet.

Samakatuwid Ipinagmamalaki ng isang kasaganaan ng mga bersyon para sa iba't ibang mga screen ay maaaring maging maliban na ang mga site-odnostranichniki ang layunin - upang magbenta ng isang produkto at siguraduhin na gawin ito rin. Well, kung ikaw ay hindi isa sa mga Landing, isang multi-site, ito ay sa dahilan na mas malayo.

Ang pinaka-popular na mga laki ng mga site

Ang isang kompromiso sa pagitan ng dalawang extremes ay isang pagguhit ng layout para sa tatlo o apat na mga laki ng screen. Kabilang sa mga ito, dapat isa maging isang layout para sa mga mobile device. Ang natitira ay kailangang ma-inangkop para sa maliit na, daluyan at malalaking mga desktop screen. Paano upang piliin ang lapad ng site? Sa ibaba ipakita namin HotLog istatistika service para sa Mayo 2017, na nagpapakita sa amin ang pamamahagi ng ang kasikatan ng iba't-ibang mga resolution ng aparato screen, pati na rin ang dynamics ng pagbabago sa ito tagapagpahiwatig.

Mula sa talahanayan ito ay posible upang malaman kung paano upang matukoy ang laki ng mga site na gusto mong gamitin. Bilang karagdagan, maaari itong Forrester na ang pinaka-karaniwang format sa araw na ito ay ang screen sa 1366 by 768 puntos. Ang mga screen ay naka-install sa isang laptop na badyet, kaya ang kanilang pagiging popular ay natural. Ang susunod na pinaka-popular na ay isang Full HD-monitor, na kung saan ay ang gintong standard para sa mga pelikula, laro, at, samakatuwid, upang lumikha ng mga layout ng site. Dagdag dito sa table nakita namin pinapahintulutan pagkatapos mobile device 360 x 640 pixels, pati na rin ng iba't-ibang embodiments ng desktop at mobile na mga screen.

disenyo ng layout

Kaya, pagkatapos ng pagsusuri ng mga istatistika, maaari naming tapusin na ang pinakamainam na lapad ng mga site ay may 4 na mga pagkakaiba-iba:

1. Bersyon laptop na may 1366 pixels ang lapad.
2. Full HD na bersyon.
3. 800 mga pixel ang lapad layout laki para maipakita sa mga maliliit na desktop monitor.
4. Mobile na bersyon ng site - 360 pixels sa lapad.

Ipagpalagay na namin nagpasya kung ano ang nais mong gamitin ang laki ng nakabuo ng source code para sa site. Ngunit tulad ng isang proyekto ay pa rin ang mahal. Kaya isaalang-alang ang higit pang mga pagpipilian, oras na ito nang walang ang paggamit ng isang nakapirming lapad.

Gumawa ng isang nababaluktot layout

May ay isang alternatibo diskarte na kailangan lamang namin upang ayusin para sa minimum na laki ng screen, at ang manipis na manipis na laki ng mga site hihingiin porsyento. Sa kasong ito, ang interface mga elemento tulad ng mga menu, mga pindutan at mga logo, ay maaaring tinukoy sa ganap na tuntunin, na tumututok sa ang minimum na sukat ng lapad ng screen sa pixels. Mga bloke sa mga nilalaman, sa salungat, ay mauunat ayon sa tinukoy na porsiyento ng ang lapad ng lugar ng screen. Diskarte na ito ay nagbibigay-daan sa hindi nakakita ng ang laki ng mga site tulad ng mga hadlang para sa mga designer at ang talent upang matalo ito pananarinari.

Ano ang ginintuang ratio, at kung paano gamitin ang mga pahina ng web sa layout?

Kahit sa Renaissance maraming mga arkitekto at mga artist sinubukan upang bigyan ang kanyang mga nilikha ang perpektong hugis at sukat. Para sa mga sagot sa mga tanong tungkol sa mga implikasyon ng naturang mga sukat, sila ay sumangguni sa ang reyna ng lahat ng sciences - matematika.

Simula pa nang kapanahunan ng unang panahon ay imbento ng proporsyon na kung saan ang aming mga mata perceives bilang ang pinaka-natural at elegante, dahil ito ay nasa lahat ng pook sa kalikasan. Ang Nakatuklas sa ang formula ng mga ito ratio ay isang mahuhusay Greek architect na nagngangalang Phidias. Ito ay kinakalkula na kung ang karamihan ng mga sukat may kaugnayan sa mababang bilang isang buo ay nagbibigay ng isang mas malaki, at pagkatapos ay ang proporsiyon na ito ang magiging hitsura rin. Ngunit sa kasong ito, kung nais mong hatiin asymmetrically object. proportion ito sa ibang pagkakataon naging tinawag na ginintuang ratio, hindi pa rin nito ang kalkula ang kahalagahan nito para sa mundo kultural na kasaysayan.

Sabihin bumalik sa disenyo ng web

Ito ay napaka-simple - gamit ang ginintuang ratio, maaari kang magdisenyo ng mga pahina na ay pinaka-nakalulugod sa mata ng tao. Kinalkula alinsunod sa mga formula ng mga ginintuang seksyon, nakita namin ang mga hindi makatwiran na numero 1.6180339887 ..., ngunit para sa kaginhawahan mo maaaring gamitin ang bilugan halaga ng 1.62. Ito ay nangangahulugan na ang aming mga bloke pahina ay dapat na 62% at 38% ng kabuuan, kahit na ano ang laki ay nakabuo ng source code para sa site na iyong ginagamit. Halimbawa maaari mong makita sa mga sumusunod na pamamaraan:

Paggamit ng mga bagong teknolohiya

Modern technology layout web site-daan sa iyo upang tumpak na ihatid ang mga ideya ng designer at ang taga-disenyo, kaya ngayon maaari mong kayang bayaran ang pagpapatupad ng mas agresibong mga ideya kaysa sa bukang-liwayway ng Internet teknolohiya. Hindi na kailangan ng magkano ang pag-isipan kung ano ang dapat na ang laki ng isang site. Gamit ang pagdating ng mga bagay tulad ng mga bloke agpang layout, dynamic loading ng nilalaman at mga font, mga web site na pag-unlad ay naging maraming beses na mas kasiya-siya. Pagkatapos ng lahat, ang mga ito na teknolohiya ay may mas mababa paghihigpit, kahit na ang mga ito. Ngunit bilang alam mo, walang limitasyon, doon ay magiging walang art. Iminumungkahi namin na gamitin mo ang isang tunay na creative diskarte sa pagdidisenyo - ang ginintuang seksyon. Gamit ito, magagawa mong upang mahusay at mabuti punan ang workspace, kahit ano ang laki o mga site na iyong hiniling sa iyong mga template.

Paano upang madagdagan ang workspace site

Malamang na hindi ka magkakaroon ng sapat na espasyo upang mapaunlakan ang lahat ng mga elemento interface sa ang layout ng mga maliliit na laki. Sa kasong ito, ikaw ay may upang simulan ang pag-iisip creatively, o kahit na mas creative kaysa ginawa mo dati.

Maximum libreng espasyo sa site hangga't maaari, pagtatago ng pag-navigate sa pop-up menu. Diskarte na ito ay lohikal na upang gamitin hindi lamang mobile, ngunit din sa desktop. Pagkatapos ng lahat, ang gumagamit ay hindi kailangan sa lahat ng oras upang tumingin sa kung ano ay heading sa iyong site - ito ay dumating para sa nilalaman. Ang isang gumagamit ay nais na maging iginagalang.

Ang isang halimbawa ng isang mahusay na paraan upang itago ang menu ay ang mga sumusunod na layout (nakalarawan sa ibaba).

Sa itaas na sulok ng pulang lugar, maaari mong makita ang isang krus, i-click ang menu na nagtatago sa isang maliit na icon, nag-iiwan ng user ang nag-iisa sa mga nilalaman ng website.

Gayunpaman, ito ay opsyonal, maaari mong iwanan ang pag-navigate na palaging nasa paningin. Ngunit maaari mong gawin itong isang magandang elemento ng disenyo, hindi lamang ng isang listahan ng mga link sa mga popular na site. Gamitin intuitive mga icon sa karagdagan sa text link o kahit na palitan ang mga ito. Aalisin din nito sa magbibigay-daan sa iyong site upang mas mahusay na paggamit ng mga puwang ng screen sa iyong device.

Best Website - agpang

Kung hindi mo alam kung alin ang pipiliin ng isang layout para sa site, ang lahat ng lamang sa iyo. Upang i-save sa mga gastos sa pag-unlad at sa parehong oras hindi mawawala ang madla dahil sa hindi magandang layout para sa ilang mga aparato, gamitin nakikiramay web design.

Agpang tinatawag na isang disenyo na mukhang sa iba't ibang mga aparato nang mahusay. diskarte na ito ay magpapahintulot sa iyong site upang maging malinaw at madaling kahit para sa isang laptop, hindi bababa sa tablet, kahit na sa isang smartphone. Ito ay nakakamit epekto na ito ay dahil sa awtomatikong pagbabago sa working area ng lapad ng screen. Paggamit ng agpang style sheet para sa site, ikaw ay paglalaan ng tamang desisyon maaari.

Ano Tinutukoy ang agpang disenyo ng availability ng iba't ibang mga bersyon ng iyong website

Nakikiramay disenyo ay naiiba mula sa mga mobile na site upang sa huli kaso, ang user ay makakatanggap nang isang html-code, na kung saan ay naiiba mula sa mga desktop. Ito ang dehado mula sa punto ng view ng pag-optimize ang pagganap ng mga server, pati na rin ang search engine optimization. Sa karagdagan, ang mas mahirap ito ay nagiging upang isaalang-alang ang mga istatistika ayon sa iba't ibang mga bersyon ng site. Isang agpang diskarte ay walang wala ng mga pagkukulang.

Kaya sa pagbagay para sa iba't ibang mga aparato ay nakakamit dahil sa ang layout lapad o Porsyento sa pamamagitan ng transport bloke sa mga magagamit na puwang (sa vertical eroplano sa halip na pahalang smartphone sa isang desktop), o ang mga indibidwal na mga layout sa pamamagitan ng paglikha ng iba't-ibang mga screen.

Maaari kang matuto nang higit pa tungkol sa tumutugon disenyo at bumuo ng maaari mong mula sa mga libro.