Сайн байна уу, нөхөр уншигч!

Бидэнд яагаад 10 блокоор буух хуудас хэрэгтэй байна вэ? чухал мэдээлэлЭхний дэлгэц дээр байгаа бөгөөд та "Бидний тухай", "Үйлчилгээ", "Үнэ", "Харилцах хаяг" гэсэн хэсгүүдэд өөрийгөө хязгаарлаж болох уу? Хариулт нь энгийн: to анхаарлыг татаххудалдан авагч, урам зориг бүтээгдэхүүнтэй харилцах харилцаанд орох ба бүтээгдэхүүнийг худалдан авахыг уриалж байна.

Хамгийн их хэрэглэдэг зочдыг татах арга техникбүтээгдэхүүн худалдан авах явцад AIDA(Англи хэлнээс Анхаарал-Сонирхол-Хүсэл-Үйлдэл) ба PMPHS(Өвдөлт-Илүү их өвдөлт-найдвар-шийдвэр). Эдгээр техникийг удирдан чиглүүлснээр логик бүтэц бий болно буух хуудасболон буух дээр байх блокуудыг тодорхойлно.

Би чамд зориулж цуглуулсан Блокуудын 20 харааны жишээтодорхой мэдээллийн функцийг гүйцэтгэх. Жишээ нь танд хэрэг болно, хэрэв та, түүнчлэн харилцаа холбоог хөнгөвчлөхтаны буух хуудасны дизайнер, дизайнертай хамт.

Энэ нийтлэлд та эхний хагас - 10 блоктой танилцах болно. Үлдсэн 10 жишээ нь 8-р сарын дараагийн нийтлэлд байна.

20 буух блок - өөрийнхийгөө сонго

1. Бүтээгдэхүүний блок бүрэлдэхүүн хэсэг, тоног төхөөрөмж;
2. Блокийн баталгаа (гурвалсан);
3. Танай компанийн ололт амжилт/давуу талуудын тухай блок;
4. Компанийн ажилчдын тухай блок;
5. Компанийн үйлчилгээ / хэлтэсийн талаархи блок;
6. Түншүүд / үйлчлүүлэгчдийн талаар блоклох;
7. CTA (Call-to action, call to action);
8. Үйлчлүүлэгчийн таны бүтээгдэхүүнийг ашиглахад саад болох ашиг тус ("Яагаад бид гэж?");
9. Үйлчилгээ үзүүлэх үйл явцын талаар блоклох (хүргэх, гүйлгээ хийх арга);
10. Блок тооцоолуур;
11. Урамшуулал + цаг хязгаарлагчтай блоклох;
12. Бэлэгтэй блок + бэлэг авах нөхцөл;
13. Компанийн байршлын газрын зураг бүхий блок ("Тэнд яаж очих вэ");
14. Холбоо барих мэдээллээр хаах;
15. Блокийн харьцуулах хүснэгт;
16. Блок таних "Хэний төлөө?";
17. Түгээмэл асуултуудыг блоклох.

*Блокуудын дугаарлалт нь ойролцоо байна - буух хуудсан дээрх блокуудын дараалал нь торноос хамаарна. Та бүх ижил Yandex Metrica хэрэгслийг ашиглан блокуудын дарааллыг тодорхойлж болно (, газрын зураг гүйлгэх, газрын зураг дээр дарна уу) энэ нийтлэл танд туслах болно.

агуулсан гол мэдээлэлбуух зочдын хувьд, танай компанийн USP. Энэ мэдээлэл нь өрсөлдөх чадвартай байх нь зүйтэй юм. Нөхцөл байдлаас хамааран ийм мэдээлэл байж болно: бүтээгдэхүүний үнэ (1 ширхэг тутамд 488 рубль), хүргэх хугацаа (2 өдрийн дотор хүргэх), үйлдвэрлэсэн газар (шууд Германаас). Дэлгэрэнгүй мэдээллийг өмнөх нийтлэлээс олж болно.

Хувьд тохиромжтой:бөөний сэдэв; Худалдан авагч нь тухайн бүтээгдэхүүний (гол төлөв бүтээгдэхүүн) ашиг тусын талаар хангалттай мэдлэггүй байдаг торууд.

Блок нь худалдан авагчийн асуултын хариулт байж болох юм "Яагаад ийм үнэтэй вэ?" Хэрэв энэ нь бүтээгдэхүүний шинж чанарыг нарийвчлан тодорхойлсон бол. Энэ нь боломжит үйлчлүүлэгчийн толгойд хүслийн объектын талаар илүү тодорхой дүр зургийг бий болгоход зайлшгүй шаардлагатай.

3. Бүтээгдэхүүний блок эд анги, тоног төхөөрөмж

Хувьд тохиромжтой:цогц үйлчилгээний тодорхойлолт; чөлөөт цагийг зохион байгуулах тор; бүтээгдэхүүний тодорхойлолт.

Бүтээгдэхүүний шинж чанарын тухай блок нь бүтээгдэхүүнийг бүхэлд нь харуулсан бол бүрэлдэхүүн хэсгүүдийн тухай блок нь бүтээгдэхүүнийг (бараа, үйлчилгээ) бүрэлдэхүүн хэсгүүдэд задалдаг.

4. Блокийн баталгаа (гурвалсан)

Хувьд тохиромжтой:ямар ч буух хуудас.

Ихэнхдээ бүтээгдэхүүний өртөг бүхий блокийн дараа байрладаг. Энэ нь зорилтот үзэгчдийн эсэргүүцлийн үндсэн дээр бүтээгдсэн бөгөөд тэдгээрийг хааж, танай компанид үйлчилгээний ашиг тусыг харуулж байна.

5. Амжилт / ашиг тусын блок

Хувьд тохиромжтой:ямар ч буух; алдартай компанийн брэнд бүтээгдэхүүн; ялангуяа өрсөлдөөн ихтэй газарт чухал ач холбогдолтой.

Өрсөлдөөн өндөртэй бизнес эрхлэгчдэд онцгой ач холбогдолтой. Жишээлбэл, хэд хэдэн компани ижил бүтээгдэхүүнийг санал болгодог бол гүйлгээ хийхэд хамгийн тохиромжтой нөхцөлийг бүрдүүлж, компанийнхаа чадварыг харуулсан хүн (компани хэдэн оноос хойш байгуулагдсан, хэрэгжүүлсэн төслүүдийн тоо, хөнгөлөлт, бэлэг тогтмол үйлчлүүлэгчид, борлуулалтын цэгүүдийн тоо гэх мэт).

6. Компанийн ажилчдын тухай блок

Хувьд тохиромжтой:үйлчилгээний цэгүүд

Үүнийг хийхгүй байх нь чухал нөхцөл байдалд ашигтай ЮУхудалдан авагч хүлээн авах болно ХЭРХЭНүр дүнд хүрэх болно.

7. Компанийн үйлчилгээ / хэлтсийн талаар блоклох

Хувьд тохиромжтой:цогц үйлчилгээний сэдэв; хэрэглээний нэг талбарт хэд хэдэн бүтээгдэхүүн бүхий буух хуудас.

8. Түншүүдийг блоклох

Хувьд тохиромжтой: дурын буух хуудас.

Блок нь алдартай үйлчлүүлэгчдийн логог ашигладаг бол зочдын итгэлийг нэмэгдүүлдэг.

Хувьд тохиромжтой:мэдээллийн бизнес; үйлчилгээ; үйл явцын чухал цэгүүд (ХЭРХЭН)үр дүнд хүрэх.

Кейсүүдэд маш сайн нэмэлт - харааны үзүүлбэр БАЙСАН / БАЙСАН, түүнчлэн статистик мэдээлэл бүхий инфографик болон хэвлэх дэлгэц.

Үзүүлэн харуулах чухал цэгүүд:

Үргэлжлэл бий…

Өнөөдөр бид эхний 10 буух блокийн талаар ярилцлаа, бид ойрын ирээдүйд илүү ихийг нийтлэх болно - бидэнтэй хамт байгаарай!

Сүлжээний цар хүрээг судалж үзэхэд ихэнх сайтууд сүлжээний үндсэн дээр баригдсан гэдгийг олон хүн анзаарах байх. Ийм сайтуудын элементүүд эсвэл блокууд нь хэдэн жилийн өмнөх шиг санамсаргүй байдлаар биш, тодорхой дарааллаар, бүтэцтэй байдаг (заримдаа энэ нь анх харахад анзаарагдахгүй). Эдгээр сайтууд тэнцвэртэй бөгөөд цэвэрхэн, эмх цэгцтэй харагддаг. Энэ нямбай байдлын ихэнх гавьяа нь үүнд хамаарна сүлжээ, энэ нь дизайны үндэс суурь бөгөөд хэрэглэгчийг тодорхой, гажуудаагүй сайтын бүтцийг бий болгодог.

Сүлжээ нь ихэвчлэн хэвтээ ба босоо шугамын энгийн огтлолцлыг урьдчилан тодорхойлсон зайд дүрсэлдэг бол олон дизайнерууд тэдгээрийг тодорхой геометрийн дүрсийг чимэглэж, тодотгоход ашигладаг. харааны замууд. Бид эдгээр зам, хэлбэрийг портфолио сайт, галерей, блог болон бусад бүтээлч төслүүдээс харж болно. Энэ нь гайхмаар зүйл биш юм, учир нь сүлжээнд хэд хэдэн байдаг ашигтай шинж чанаруудболон ашиг тус, тухайлбал:

• Хэрэглэгчдийг чиглүүлэхийн тулд харааны замыг бий болгох
• Төрөл бүрийн бүрэлдэхүүн хэсгүүдийг нэг цогц болгон нэгтгэх
• Мэдээллийг эрэмбэлэх

Мэдээжийн хэрэг, тор нь шулуун шугамын гоо сайхныг харуулах хамгийн сайн арга юм (та хол явах шаардлагагүй болно). Доор бид сүлжээ нь зөвхөн дизайны үндэс биш болох вэбсайтуудыг бэлтгэсэн.

Дүгнэлт

Өмнө дурьдсанчлан сүлжээ нь дизайны салшгүй хэсэг бөгөөд эмх замбараагүй байдлыг хялбархан дэг журам болгон хувиргадаг бөгөөд вэбсайтын дизайнд бусад газраас илүүтэйгээр энэ онцлог нь үнэхээр чухал юм. Ихэнх хэрэглэгчид хурдан бөгөөд хялбар мэдээлэл авахыг хүсдэг бөгөөд үгүй илүү сайн аргатэднийг тодорхой, зохион байгуулалттай бүтэцтэйгээр танилцуулахаас илүү.

Үгүй ээ, энэ нь огт тийм гэсэн үг биш юм Гадаад төрхСайт нь шугаман, энгийн байх ёстой. Заримдаа өнгө, зураг, графикаар чадварлаг "шингэрүүлсэн" энгийн геометрийн хэлбэрүүд ч гэсэн үнэхээр сэтгэл татам байж чаддаг. Чи юу гэж бодож байна? Ийм тодорхой блок болгон хуваах нь сэтгэл татам харагдахгүй байна гэж үү?

Сайтын өргөтгөлийн асуудал нь вэб дизайнер бүрт хамаатай. Зохиогчийн харааны бүтээгдэхүүнийг бүтээхдээ би үүнийг ямар ч төхөөрөмжийн хэрэглэгчдэд адилхан үзэсгэлэнтэй, тохиромжтой байлгахыг хүсч байна. Блог эсвэл вэбсайт нь 1920x1080px нягтралтай дэлгэц дээр гайхалтай харагдаж, 240x320px параметр бүхий ухаалаг гар утасны дэлгэц дээр бүрэн унших боломжгүй бол энэ сонголтыг хүлээн зөвшөөрөх боломжгүй юм.

10-15 жилийн өмнө ийм төрөл, тоотой монитор байгаагүй. Тиймээс вэбсайтуудын дизайн хийхэд хялбар байсан. Та тогтмол дэлгэцийн өргөнд зориулж ердийн статик дизайн үүсгэдэг бөгөөд ихэнх хэрэглэгчид сайтыг зориулалтын дагуу харах болно гэдэгт итгэлтэй байж болно.

Өнөөдөр хэрэглэгчид зөвхөн олон төрлийн нягтралтай дэлгэцтэй төдийгүй 3.5 тэрбум хүн нэтбүүк, таблет, ухаалаг гар утас гэх мэт гар утасны төхөөрөмжөөс интернетэд нэвтэрч байна. Хуучин аргуудыг ашиглан вэбсайт үүсгэх нь ямар ч хэрэггүй болсон.

Олон хөгжүүлэгчдийн толгойд орж ирсэн анхны шийдэл бол гар утасны төхөөрөмжид зориулсан сайтын тусдаа "хөнгөн" хувилбарыг бий болгох явдал байв. Үүнийг олон томоохон порталууд хийсэн. Гэсэн хэдий ч сүүлийн жилүүдэд хэрэглэгчид сүлжээнд нэвтрэх янз бүрийн төрөл, дэд төрлийн төхөөрөмжүүдийн тоо гайхалтай хурдацтай өсч байна. Мөн таблет эсвэл ухаалаг гар утасны эзэд сайтын бүрэн хувилбарыг үзэх боломжтой гэдгийг анхаарах хэрэгтэй. Эцэст нь вэб дизайнерууд болон хөгжүүлэгчид "хариуцлагатай" дизайны санааг гаргаж ирэв.

Өнөөг хүртэл та янз бүрийн мэдээллийн технологийн мэргэжилтнүүд "хариуцлагатай дизайн" гэж хэрхэн ойлгодог талаар хэд хэдэн хувилбартай танилцаж болно. Вэбсайт дизайн боловсруулах ямар сонголтууд байгааг олж мэдье.

Статик дизайн

"Статик" эсвэл "статик" гэдэг нь хувиршгүй HTML хуудаснаас бүрдэх сайтыг хэлнэ. Ийм сайт нь тогтмол өргөнтэй тогтмол сэдэв байгааг илтгэдэг бөгөөд ихэнхдээ нэг буюу хэд хэдэн хуудас агуулдаг. Ийм сайтыг дэлгэцийн төвд харуулахын тулд 1000 px хангалттай. Контент нь үргэлж төвд байх болно.

Зөвхөн вэб хөгжүүлэлтийн сайн туршлагатай хүн л статик сайтыг шинэчлэх боломжтой гэдгийг анхаарах нь зүйтэй. Энэ нь админ самбаргүй тул бүх өөрчлөлтийг эх кодоор дамжуулан хийх ёстой.

Статик дизайны давуу талууд:

• Хөгжлийн явцад цаг хугацаа, хүчин чармайлт хэмнэх;
• Хостинг ачаалал бага шаарддаг;
• Зураг, видео материал, баннерыг бие биетэйгээ давхцах эсвэл өөр өөр нягтралтайгаар хөдөлгөх вий гэсэн айдасгүйгээр харуулах боломжтой.

Статик дизайны сул талууд:

• Дээр гар утассайтыг хэвтээ гүйлгэх самбараар харуулах болно;
• Өргөн дэлгэцийн мониторууд нь статик дизайныг маш муу харуулдаг - энэ нь харуулахыг эрмэлздэг хүмүүст тохирохгүй сонголт юм.

Өмнө нь илүү статик сайтууд байсан - CMS-ийн үүсэл, хөгжил нь динамик сайтуудыг ашиглахын оронд тэдний тоо буурахад нөлөөлсөн. Статик сайтуудын жишээ:

Динамик дизайн

"Хариуцлагатай дизайн нь вэб сайт хөгжүүлэх хамгийн сүүлийн үеийн чиг хандлагын нэг бөгөөд энэ нь үнэнч бөгөөд удаан хугацааны туршид бий болсон" - вэб хөгжүүлэлт болон . Энэ нь юу болохыг олж мэдэх нь тийм ч хэцүү биш юм. Гэсэн хэдий ч ийм дизайны талаархи ойлголт, ойлголттой холбоотой зарим нарийн мэдрэмжүүд байдаг. Тэднийг харцгаая.

"Резин" загвар

Энэхүү дизайны гол онцлог нь баганын өргөнийг пикселээр биш харин хувиар тогтоосон явдал юм. Тиймээс ямар ч дэлгэцийн нягтралтай "резин" загвар нь дэлгэцийн бүхэл бүтэн өргөнийг хамардаг. Ийм дизайн хийх, ялангуяа блокийн байршлыг ашиглах нь тогтмол загвараас арай илүү хэцүү боловч хэрэглэгч хуудсан дээрх хоосон талбаруудыг харахгүй. Резинэн загвар нь RuNet-д анх өргөн хэрэглэгдэж эхэлсэн бол барууны орнуудад хөгжүүлэгчид маш удаан хугацаанд статик дизайнд тууштай хэвээр байсан нь анхаарал татаж байна.

Гэсэн хэдий ч энгийн резинэн загвар нь тодорхой хязгаарлалт, сул талуудтай байдаг. Орчин үеийн төхөөрөмжүүдийн өргөн цар хүрээтэй дэлгэцийн хэмжээсүүдийн хувьд бүх зүйл ямар ч нарийвчлалтайгаар адилхан харагдахуйц, дизайн нь "тархахгүй", зураг, видео нь мөлхөхгүй байхын тулд шингэн загварыг хэрэгжүүлэхэд хэцүү байдаг. блокийн хил хязгаар гэх мэт Энэ шалтгааны улмаас жинхэнэ бүх нийтийн сайтыг бий болгохын тулд бусад шийдлүүд шаардлагатай байсан.

Дасан зохицох загвар

Сайтыг адилхан сайхан харагдуулахын тулд гар утастом дэлгэц дээр зарим сайтын хөгжүүлэгчид бие даасан дизайны хэд хэдэн хувилбаруудыг боловсруулах замаар явсан. янз бүрийн төхөөрөмжүүд. Хэрэглэгч сайтад зочлоход сервер төхөөрөмжийн төрөл, дэлгэцийн нягтралыг тодорхойлж, сайтын нэг буюу өөр хувилбарыг "өгсөн". Түүнчлэн, хувилбар бүрийг өөр өөр нягтаршилд зориулан урьдчилан оновчтой болгосон. Бага нарийвчлалтай дэлгэцийн хувилбаруудад жижиг зургуудыг ашигласан бөгөөд зарим элементүүдийг бүрмөсөн устгасан. Блокны зохион байгуулалт нь өөрөө "том" хувилбараас өөр байсан.

Том хэмжээний төслүүдийг бий болгоход хариу үйлдэл үзүүлэх загвар нь зөвтгөгддөг. мэдээллийн порталууд, онлайн дэлгүүр, форум, корпорацийн вэбсайт болон бусад ижил төстэй эх сурвалжууд. Энэ нь хамгийн багадаа 15.6 '' диагональтай мониторууд дээр гайхалтай харагдаж байна.

Дасан зохицох зарчим нь контентыг тохируулан тохируулах нэг URL үүсгэхэд суурилдаг янз бүрийн форматууддэлгэцүүд. Жишээ нь:

Өөр өөр дэлгэц дээр текст болон зургийн байршил хэрхэн өөрчлөгдөж байгааг хараарай. Яагаад дажгүй юм бэ? Үүний нэг шалтгаан нь Google ийм нөөцийг илүүд үздэг Хайлтын үр дүн. Өөр нэг шалтгаан нь ийм сайтыг зохион бүтээх, засварлахад хялбар байдаг бөгөөд энэ нь олон хүний ​​ажлыг хөнгөвчлөхөд хүргэдэг.

"Хариуцлагатай" дизайн

Вэб дизайнеруудын гаргаж ирсэн хамгийн сүүлийн арга бол ердийн "дасан зохицох" дизайн (англи. дасан зохицох загвар) -ын эсрэг байсан "responsive" дизайн (eng. responsive design) байсан боловч өнөөг хүртэл эдгээр нэр томъёог ихэвчлэн андуурч, ашигладаг. ижил төстэй мэдрэмж. "Мэдрэмжтэй" загвар нь дасан зохицох болон "шингэн" дизайны онцлогуудыг хослуулсан. Энэ нь резин шиг ямар ч дэлгэцийн өргөнийг автоматаар тохируулдаг. Үүний зэрэгцээ, тохируулах явцад блокуудын байршил, зургийн хэмжээ өөрчлөгдөж болно. Зарим элементүүд гарч ирэх, алга болох эсвэл өөрчлөгдөж болно. Жишээлбэл, ердийн хэвтээ цэсунадаг цэс рүү өөрчилж болно.

Илүү чухал зүйл бол хүмүүс танай сайт руу орох газрууд юм. Тиймээс интернетийн хурд 1 Mb/s ч хүрэхгүй алслагдсан бүс нутагт асар олон тооны хүмүүс амьдардаг тул интернетийн хурдыг харгалзан үзэх нь маш чухал юм. Хэрэглэгчдийн 57% нь таны сайтыг ачаалахад хэдхэн секундээс илүү хугацаа шаардагддаг гэсэн судалгаа байдаг. Саяхан Google сайтуудыг эрэмблэхдээ хурдыг анхаарч эхэлсэн. Тэр өгдөггүй том нөлөөдундаж ачаалах хурдтай сайтуудын байрлалд, гэхдээ хэрэв хуудас тодорхой хугацаанд ачаалагдахгүй бол хайлтын алгоритм нь ийм сайтад торгууль ногдуулдаг.

Энэ бүхэн нь биднийг интернетийн хурдыг сайтар судалж, хэрэглэгчдэд контентыг хамгийн бага хурдаар хангалттай хурдан татаж авах боломжийг олгодог. Өөрөөр хэлбэл, "хариуцлагатай" дизайн нь зөвхөн дэлгэцийн хэмжээсийн тухай түүх байхаа больсон, харин янз бүрийн хувилбарууд, шийдэл нь уян хатан, анхааралтай байх ёстой.

Өмнө нь Интернет дээр хүснэгт хэлбэрийн зохион байгуулалт өргөн тархсан байсан бөгөөд үүнд . Гэсэн хэдий ч цаг хугацаа өнгөрөхөд сайтын бүтцийг бий болгох энэ арга нь хоцрогдсон бөгөөд үүнийг блок зохион байгуулалтаар сольсон.

Блок зохион байгуулалт ба хүснэгтийн хоорондох ялгаа

Хэрэв хүснэгтийн байршил нь хуудасны агуулга нь шошгон дотор байгааг илтгэж байвал

, дараа нь блок зохион байгуулалтын үзэл баримтлал нь бүх нийтийн хаягуудыг идэвхтэй ашиглахад суурилдаг нь хүснэгтийн өгөгдлийг харуулахад ашиглах ёстой хүснэгт бөгөөд өөр юу ч биш.

Блокийн байршлын цорын ганц мэдэгдэхүйц сул тал бол үүн дээр хийгдсэн сайтуудыг хөтчүүдэд өөрөөр харуулах боломжтой юм. Үүнээс зайлсхийхийн тулд та байршлыг "хөндлөн хөтөч" болгох хэрэгтэй, өөрөөр хэлбэл ямар ч хөтөч дээр адилхан харагдана.

Блокны байршлын мөн чанар

AT график засварлагчсайтын зохион байгуулалтыг бий болгосон: хуудасны аль хэсэг (толгой, доод хэсэг, хажуугийн хэсэг, үндсэн агуулга) хаана байрлаж, хэр их зай эзэлнэ, зураг, дэвсгэр бэлтгэж байгааг тэмдэглэв.

Хуудасны хэсэг бүрийг өөрийн блокт байрлуулна