Вэбсайт хөгжүүлэх технологи нь маш олон талт үйл явц юм. Гэсэн хэдий ч түүний бүх үе шатыг функциональ болон гаднах бүрхүүл гэсэн хоёр үндсэн бүрэлдэхүүн хэсэгт хувааж болно. Эсвэл вэбмастеруудын дунд уламжлал ёсоор back-end болон front-end-ийг тус тусад нь авдаг. Вэб хөгжүүлэлтийн студиэс вэбсайтаа захиалж буй хүмүүс ихэнхдээ зөвхөн функциональ байдалд анхаарлаа хандуулах нь зүйтэй гэж гэнэнээр итгэдэг бөгөөд энэ нь зөв шийдвэр байх болно. Гэхдээ энэ нь маш ховор тохиолдлуудад, ихэвчлэн бета туршилтын шатанд байгаа гарааны төслүүдэд үнэн байдаг. Үгүй бол график дизайн болон хэрэглэгчийн интерфэйс нь вэб хөгжүүлэлтийн стандартад нийцэж, тохиромжтой байх шаардлагатай.
Интерфэйсийн дизайнер буюу дизайнерын тулгардаг хамгийн эхний тулгын чулуу бол сайтын зохион байгуулалтын өргөн юм. Эцсийн эцэст, үүний тулд интерфейсийг зурах шаардлагатай. Зөвхөн зөн совингийн хувьд хоёр хандлага гарч ирдэг - алдартай дэлгэцийн нягтрал тус бүрийг тусад нь байрлуулах эсвэл бүх дэлгэцийн сайтын нэг хувилбарыг бий болгох. Хоёр сонголт хоёулаа буруу байх болно, гэхдээ хамгийн түрүүнд хийх зүйл.
Стандарт вэб сайтын өргөнийг пикселээр илэрхийлнэRunet-д зориулсан
Дасан зохицох зохион байгуулалтыг хөгжүүлэхээс өмнө мянган пикселийн өргөнтэй сайтыг хөгжүүлэх нь массын үзэгдэл байсан. Энэ зургийг нэг энгийн шалтгаанаар сонгосон бөгөөд ингэснээр сайт нь ямар ч дэлгэцэнд багтах болно. Энэ нь өөрийн гэсэн логиктой боловч хүн ширээний компьютер дээр дор хаяж HD дэлгэцтэй хэвээр байна гэж бодъё. Энэ тохиолдолд таны зохион байгуулалт нь дэлгэцийн голд бүх зүйл нэг овоолгод наалдсан, хажуу талд нь ашиглагдаагүй асар том зайтай жижиг тууз шиг харагдах болно. Одоо нэг хүн 800px өргөн дэлгэцтэй таблетаар таны вэб сайт руу нэвтэрч, тохиргоонд "Вэбсайтыг бүрэн харуулах" гэсэн тэмдэгт орсон байна гэж бодъё. Энэ тохиолдолд таны сайт дэлгэцэнд багтахгүй тул буруу харагдах болно.
Эдгээр бодлоос бид бүдүүвчийн тогтмол өргөн нь бидэнд тохиромжгүй бөгөөд өөр арга хайх хэрэгтэй гэж дүгнэж болно. Дэлгэцийн өргөн тус бүрийг тусад нь зохион байгуулах санааг шинжилье.
Бүх тохиолдлуудад зориулсан бүдүүвч
Хэрэв та зах зээл дээрх бүх хэмжээтэй дэлгэцийн зураглал үүсгэх стратеги сонгосон бол таны сайт интернетэд хамгийн өвөрмөц байх болно. Эцсийн эцэст, сонголт бүрийг нарийн тааруулахыг хичээж, бүх төрлийн төхөөрөмжийг хамрах нь өнөөдөр боломжгүй юм. Гэхдээ хэрэв та монитор, төхөөрөмжийн дэлгэцийн хамгийн алдартай нарийвчлалд анхаарлаа төвлөрүүлбэл санаа нь тийм ч муу биш юм. Үүний цорын ганц сул тал бол санхүүгийн зардал юм. Эцсийн эцэст, интерфэйс дизайнер, дизайнер, кодлогч хоёр нэг ажлыг 5, 6 удаа хийхээс өөр аргагүйд хүрвэл төслийн зардал гарах болно.анх төсөвлөсөн үнээс харьцангуй өндөр байна.
Тиймээс зөвхөн нэг хуудастай сайтууд өөр өөр дэлгэцийн олон хувилбараар сайрхаж чадна, зорилго нь нэг бүтээгдэхүүнийг зарж, үүнийг сайн хийх болно. Хэрэв танд эдгээр буултуудын аль нь ч биш, харин олон хуудастай сайт байгаа бол цааш нь бодох хэрэгтэй.
Сайтын хамгийн алдартай хэмжээ
Хоёр туйлшралын хоорондох тохироо нь 3-4 хэмжээтэй дэлгэцийн бүдүүвчийг гаргах явдал юм. Тэдгээрийн нэг нь хөдөлгөөнт төхөөрөмжүүдийн зохион байгуулалт байх ёстой. Үлдсэн хэсэг нь жижиг, дунд, том ширээний дэлгэцэнд тохирсон байх ёстой. Сайтын өргөнийг хэрхэн сонгох вэ? Доор бид 2017 оны 5-р сарын HotLog үйлчилгээний статистикийг толилуулж байгаа бөгөөд энэ нь төхөөрөмжийн дэлгэцийн янз бүрийн нягтралын тархалтын тархалт, мөн энэ үзүүлэлтийн динамикийг харуулж байна.
Хүснэгтээс та ашиглахыг хүссэн сайтынхаа хэмжээг хэрхэн тодорхойлохыг олж мэдэх боломжтой. Нэмж дурдахад өнөөдөр хамгийн түгээмэл формат бол 1366-аас 768 пикселийн дэлгэц гэж бид дүгнэж болно. Ийм дэлгэцийг төсвийн зөөврийн компьютерт суурилуулсан тул тэдний түгээмэл байдал нь байгалийн юм. Дараагийн хамгийн алдартай нь Full HD дэлгэц бөгөөд энэ нь видео, тоглоом, улмаар вэбсайтын зохион байгуулалтыг бий болгох алтан стандарт юм. Хүснэгтээс бид хөдөлгөөнт төхөөрөмжүүдийн 360-аас 640 пикселийн нягтрал, мөн үүний дараа ширээний болон гар утасны дэлгэцийн янз бүрийн сонголтуудыг харж болно.
Зураг зохион бүтээх
ТэгэхээрСтатистикт дүн шинжилгээ хийсний дараа сайтын оновчтой өргөн нь 4 өөрчлөлттэй байна гэж дүгнэж болно:
- 1366px өргөнтэй зөөврийн компьютерын хувилбар.
- Бүрэн HD хувилбар.
- Жижиг ширээний дэлгэц дээр харуулах 800 пикселийн өргөн бүтэц.
- Сайтын гар утасны хувилбар - 360 пиксел өргөн.
Сайтын үүсгэсэн эх сурвалжийн хэмжээг ямар хэмжээгээр ашиглахаа шийдсэн гэж бодъё. Гэхдээ ийм төсөл өндөр өртөгтэй хэвээр байх болно. Тиймээс энэ удаад тогтмол өргөн ашиглахгүйгээр өөр сонголтуудыг харцгаая.
Бүдүүвчийг уян хатан болгох
Дэлгэцийн хамгийн бага хэмжээтэй таарч тохирох өөр арга байдаг бөгөөд сайтын хэмжээг өөрөө хувиар тогтоох болно. Үүний зэрэгцээ цэс, товчлуур, лого гэх мэт интерфэйсийн элементүүдийг пикселийн дэлгэцийн өргөний хамгийн бага хэмжээг анхаарч, үнэмлэхүй утгуудад тохируулж болно. Агуулгатай блокууд нь эсрэгээр дэлгэцийн талбайн өргөний заасан хувиар сунах болно. Энэ арга нь сайтын хэмжээг дизайнерын хязгаарлалт гэж үзэхээ больж, энэ нарийн ширийн зүйлийг чадварлаг даван туулах боломжийг олгоно.
Алтан харьцаа гэж юу вэ, үүнийг вэб хуудасны загварт хэрхэн ашиглах вэ?
Сэргэн мандалтын үед ч олон архитектор, зураачид бүтээлээ төгс хэлбэр, харьцаатай болгохыг хичээсэн. Ийм пропорцын утгын талаарх асуултын хариултыг тэд бүх шинжлэх ухааны хатан хаан болох математикт хандсан.
Эрт дээр үеэс бидний нүдийг хамгийн байгалийн, гоёмсог гэж ойлгодог хувь хэмжээг зохион бүтээжээ. Учир нь энэ нь байгальд хаа сайгүй байдаг. Ийм харьцааны томъёог нээсэн нь эртний Грекийн авъяаслаг архитектор Фидиас байв. Түүний тооцоолсноор пропорцын том хэсэг нь жижгэвтэр пропорцтой холбоотой бол бүхэлдээ том хэмжээтэй холбоотой бол ийм пропорц хамгийн сайн харагдах болно. Гэхдээ хэрэв та объектыг тэгш бус байдлаар хуваахыг хүсч байвал ийм зүйл болно. Энэ хувь хэмжээг хожим алтан хэсэг гэж нэрлэсэн бөгөөд энэ нь дэлхийн соёлын түүхэнд түүний ач холбогдлыг хэт үнэлээгүй хэвээр байна.
Вэб дизайн руу буцах
Энэ нь маш энгийн - алтан харьцааг ашигласнаар та аль болох хүний нүдийг татахуйц хуудсуудыг зохион бүтээх боломжтой. Алтан харьцааны томъёоны тодорхойлолтын дагуу тооцоолсноор бид 6180339887 … иррационал тоо 1-ийг авдаг, гэхдээ тохиромжтой байхын тулд бид 1, 62 гэсэн дугуйрсан утгыг ашиглаж болно. Энэ нь манай хуудасны блокууд 62 байх ёстой гэсэн үг юм. % ба нийт 38% нь таны ашиглаж буй сайтын үүсгэсэн эх сурвалжийн хэмжээнээс үл хамааран. Та энэ диаграмаас жишээг харж болно:
Шинэ технологи ашиглах
Вэбсайтыг зохион бүтээх орчин үеийн технологи нь төлөвлөгч, дизайнерын санааг үнэн зөв илэрхийлэх боломжийг олгодог тул одоо та интернет технологийн эхэн үеэс илүү зоригтой санаануудыг хэрэгжүүлэх боломжтой болсон. Та сайтын хэмжээ ямар байх ёстой талаар сайн бодох шаардлагагүй болсон. Блокийн дасан зохицох байршил, контент, фонтыг динамик ачаалах гэх мэт зүйлс гарч ирснээр вэбсайт хөгжүүлэх нь илүү тааламжтай болсон. Эцсийн эцэст эдгээр технологиуд юмцөөн хязгаарлалт байдаг, гэхдээ тэдгээр нь хэвээр байна. Гэхдээ та бүхний мэдэж байгаагаар хязгааргүй урлаг гэж байхгүй. Бид танд нэг жинхэнэ бүтээлч дизайны аргыг ашиглахыг санал болгож байна - алтан харьцаа. Үүний тусламжтайгаар та загвар дээрээ ямар сайтын хэмжээг тохируулсан ч ажлын талбарыг үр дүнтэй, сайхан дүүргэх боломжтой.
Сайтын ажлын талбайг хэрхэн нэмэгдүүлэх вэ
Танд UI бүх элементүүдийг жижиг байршилд багтаах хангалттай зай байхгүй байх магадлал өндөр байна. Энэ тохиолдолд та бүтээлчээр эсвэл өмнөхөөсөө илүү бүтээлчээр сэтгэж эхлэх хэрэгтэй болно.
Попап цэсний навигацыг нууснаар сайтад хамгийн их зай гаргах боломжтой. Энэ аргыг зөвхөн хөдөлгөөнт төхөөрөмж дээр төдийгүй ширээний компьютер дээр ашиглах нь логик юм. Эцсийн эцэст, хэрэглэгч таны сайт дээр ямар гарчиг байгааг байнга харах шаардлагагүй - тэр агуулгын төлөө ирсэн. Мөн хэрэглэгчийн хүслийг хүндэтгэх ёстой.
Цэсийг нуух сайн аргын жишээ бол дараах загвар юм (доорх зураг).
Улаан хэсгийн дээд буланд та загалмай харагдах бөгөөд үүн дээр дарснаар цэсийг жижиг дүрс болгон нууж, хэрэглэгч вэбсайтын агуулгатай ганцаараа үлдэх болно.
Гэхдээ энэ нь сонголттой тул та үргэлж харагдахуйц навигацийг орхиж болно. Гэхдээ та үүнийг сайт дээрх алдартай холбоосуудын жагсаалт биш харин үзэсгэлэнтэй дизайны элемент болгож чадна. Текст линкээс гадна зөн совингийн дүрсүүдийг ашиглана уу. Энэ нь ижил юмЭнэ нь таны сайтад хэрэглэгчийн төхөөрөмж дээрх дэлгэцийн зайг илүү үр дүнтэй ашиглах боломжийг олгоно.
Хамгийн сайн вэб сайт нь хариу үйлдэл үзүүлэх чадвартай
Хэрэв та сайтын аль зохион байгуулалтыг сонгохоо мэдэхгүй байгаа бол танд бүх зүйл энгийн. Хөгжүүлэлтийн зардлаа хэмнэхийн зэрэгцээ зарим төхөөрөмжийн зохион байгуулалт муугаас болж үзэгчдээ алдахгүйн тулд мэдрэмжтэй дизайн ашиглана уу.
Responsive дизайн нь өөр өөр төхөөрөмж дээр адилхан сайн харагддаг загвар юм. Энэ арга нь таны сайтыг зөөврийн компьютер, таблет, ухаалаг гар утсан дээр ч ойлгомжтой, тохиромжтой байлгах боломжийг олгоно. Энэ нөлөө нь дэлгэцийн ажлын талбайн өргөнийг автоматаар өөрчлөх замаар хийгддэг. Сайтдаа хариу үйлдэл үзүүлэх загварын хүснэгтүүдийг ашигласнаар та хамгийн сайн шийдвэрийг гаргаж байна.
Responsive дизайн болон вэб сайтын хувилбаруудын ялгаа юу вэ
Responsive дизайн нь сайтын гар утасны хувилбараас ялгаатай нь сүүлийн тохиолдолд хэрэглэгч ширээнийхээс өөр html код хүлээн авдаг. Энэ нь серверийн гүйцэтгэлийн оновчлол, түүнчлэн хайлтын системийн оновчлолын хувьд сул тал юм. Үүнээс гадна сайтын янз бүрийн хувилбаруудын статистикийг тооцоолоход илүү хэцүү болж байна. Дасан зохицох аргад эдгээр сул тал байхгүй.
Төрөл бүрийн төхөөрөмжүүдийн хариу үйлдэл нь заасан өргөний тодорхой хувьтай байрлалаар эсвэл блокуудыг боломжтой зайд шилжүүлэх замаар (ухаалаг утасны босоо хавтгайд биш харин ухаалаг утсан дээр) хүрдэг.ширээний компьютер дээр хэвтээ) эсвэл өөр өөр дэлгэцэнд тус тусын бүдүүвч үүсгэх боломжтой.
Манай хичээлүүдээс responsive дизайн болон хөгжүүлэлтийн талаар нэмэлт мэдээлэл аваарай.
