Bug'doy dalasida fotosessiyani qanday qilish kerak. Dalada suratga olish: qanday g'oyalarni amalga oshirish mumkin? Tabiatda fotosessiya uchun g'oyalar: tasvir yaratish va hikoya yaratish

Agar poyafzal har qanday kiyimning yakuniy tarkibiy qismi bo'lsa, elektron tijorat sayti uchun kolontiter uning sotuv dizaynining yakuniy elementi hisoblanadi. Pastki elementga, altbilgiga e'tibor qaratib, zamonaviy veb-saytlar o'zlarining shaxsiyatini har tomonlama namoyish etishga tayyor. Raqobatbardosh elektron tijorat muhitida etarli original g'oyalar, ijodkorlik va dizayn tendentsiyalari. Elektron tijorat saytining pastki qismini diversifikatsiya qilishdan oldin, muhim fikrlarni ko'rib chiqishga arziydi. Avval nimani joylashtirish kerak va buni qilishning eng yaxshi usuli qanday? Bizning ilhomlantiruvchi altbilgi dizaynlarimiz to'plamida qiziqarli variantlar mavjud.

Shuningdek o'qing: 13 ta marketing tendentsiyalari elektron tijorat 2019

Chartbeat-dan qiziqarli statistika. 25 million foydalanuvchining xatti-harakatlarini o'rganish ularning sahifalarni qanchalik chuqur ko'rishini ko'rsatdi. Ma’lum bo‘lishicha, foydalanuvchining e’tibori katlama chizig‘i ostidagi bo‘shliqqa qaratiladi. Amaliy jihatdan ko'proq foydali ma'lumotlar, tashrif buyuruvchilar sahifaning yuqori qismidan 1200px (brauzerda oʻrtacha 700px vertikal ekran bilan) yoki ikkinchi ekranning orqasida eng uzoq vaqt qolishadi.

Ko'rish vaqti (sek.) / Sahifaning yuqori qismidan masofa (piksel)

Birinchi va ikkinchi ekranlarni ko'rish davomiyligida katta bo'shliq mavjud. TOP - 4 soniya, yuqoridan 1200 pikselda davomiylik maksimal (16 soniya) ga etadi va keyingi aylantirish bilan u asta-sekin kamayadi.

Tashrif buyuruvchilar ulushi (%) / Sahifaning yuqori qismidan masofa (piksel)

Tashrif buyuruvchilarning muhim qismi (25% dan ko'prog'i) hatto kontent yuklanishini kutmaydi va sahifani aylantira boshlaydi. Bu shuni anglatadiki, faqat 75% birinchi navbatda eng yuqori qismini ko'radi. Sahifaning eng ko'p ko'rilgan maydoni 550px (katlama chizig'idan biroz yuqoriroq).

Tadqiqot foydalanuvchilar sahifaning pastki qismiga o‘tmaydi va barcha kontentni tomosha qilmaydi, degan afsonani yo‘q qiladi. Altbilgi zamonaviy elektron tijorat sayti uchun ham muhimdir va hatto o'zining afzalliklariga ega.

Qanday qilib "podval" ni loyihalash bo'yicha g'oyalar (ko'rsatuv), dizaynlarni sotish misollari

Ushbu 10 ta maslahat sizga veb-dizayndagi kompozitsiya qoidalari va ustuvor vazifalarni hal qilish bo'yicha veb-sayt uchun pastki ko'rsatkichni qanday chiroyli tarzda loyihalashtirishni aytib beradi. Foydalanish qulayligi, UX (foydalanuvchi tajribasi) va hatto savdoni oshirish uchun eng mos taktikalarni qo'llang.

1. Kerakli ma'lumotlar

An'anaga ko'ra, talab qilinadigan tashkiliy va huquqiy masalalar saytning pastki qismida yoritilgan. Bildirishnomalar kamroq ko'zga tashlanadigan matn bilan yaratilgan bo'lib, u yanada mazmunli elementlar uchun sahifalarning boshqa joylarini bo'shatadi. Quyida ko'rib chiqilishi kerak bo'lgan namunaviy ro'yxat:

• Mualliflik huquqiga oid bildirishnomalar
• Huquqiy rad etish
• To'lov ma'lumotlari
• Cookie haqida eslatma

Mahsulotni sotadigan veb-sayt qonuniy talablarga javob berishi va protsedura va qaytarish muddatlari haqida ma'lumot berishi kerak. Uning pastki qismidagi joylashuvi sotuvchi resurs uchun ham, tashrif buyuruvchilar uchun ham qulaydir.

Kolonent misoli: Iv Rocher

Onlayn do'kon savdo belgisi Yves Rocher: o'zgaruvchan qatlamlarning chiroyli dizayni bilan to'liq ekranli altbilgi. Kompaniya haqida, sotuvchi veb-sayt infratuzilmasi haqida - buyurtmani kuzatishdan shaxsiy ma'lumotlar siyosatigacha ma'lumot beradi. Shuningdek, mahsulotdan foydalanish bo'yicha maslahatlar, bonuslar, aktsiyalar mavjud

Misol uchun altbilgi: Lumity

Oziqlantiruvchi qo'shimchalar sotuvchilari qonuniy talablarni kuchaytiradi. mas'uliyat. Savdo veb-saytida ular aytishi kerak bo'lgan juda ko'p narsalar mavjud. ga havolalar huquqiy ma'lumotlar yaxshiroq ko'rish uchun qalin qilib ta'kidlangan.

Chiroyli fon tasviriga ega bo'lgan altbilgi saytning umumiy dizayniga juda organik tarzda mos keladi. Hech qanday aniq chegara yo'q, aksincha, tarkibning o'zi ajratuvchi bo'lib xizmat qiladi

Misol altbilgisi: Saddleback Leather Co

Chiroyli retro sarlavha va altbilgi dizayni bilan sotiladigan veb-sayt. Materiallar va tugatishdagi nuqsonlarga qarshi 100 yillik kafolat. Qaytish shartlari bilan birga keladi qiziqarli hikoyalar... kerakli elektron tijorat ma'lumotlari bilan hamma narsa juda qayg'uli emas, ma'lum bo'ladi

2. Salbiy bo'shliq - etarli vizual masofa

Altbilgi havolalari sonini cheklaganda, salbiy bo'sh joyni tejamang - bu vizual idrokga ajoyib ta'sir qiladi va o'qishni yaxshilaydi. Umumiy qoida: Vizual ierarxiyani saqlab, markaziy elementlar tezroq seziladi (foydalanishingiz mumkin!).

Kostotit misoli: QUAY AUSTRALIA

Minimalist uslub va sobit ochiladigan menyu bilan onlayn-do'kon keng altbilgiga ega bo'lishi mumkin

Kostotki misoli: Incase

HAQIDA katta miqdorda mikro-salbiy bo'shliqni (kichik elementlar orasidagi) shunday deyish mumkin: barcha kerakli ma'lumotlar mavjud ekan, u o'qilishi mumkin va tez qabul qilinadi - hamma narsa yaxshi

Misol altbilgisi: Stumptown Coffee Roasters

Qahva saytining keng altbilgisi toza dizayn kompozitsiyasining ajoyib yakunidir, unda juda ko'p makro-salbiy bo'shliq (bo'limlar/bo'limlar orasidagi havo) mavjud.

3. Harakatga yakuniy chaqiruv

Shuningdek o'qing: Maqsadli harakat tugmalarini loyihalash uchun 30 dan ortiq misollar va g'oyalar

Altbilgining zamonaviy dizayni resursning o'zi haqida gapiradi. Shuni ta'kidlash kerakki, xaridor bu erda sahifaning boshqa qismlariga qaraganda bir oz ko'proq qoladi. Yana bitta, yakuniy harakatga chaqirish uchun qulay imkoniyat. Ko'pincha bu obuna/axborot byulletenidir, lekin siz CTA qo'ng'irog'ini hisob qaydnomasini ro'yxatdan o'tkazish bilan ham bog'lashingiz mumkin.

Kolontit misoli: Greetabl

Greetabl o'z sahifalarining pastki qismiga obuna bo'lishga qo'ng'iroqni o'z ichiga oladi. Minimal elementlar bilan qo'ng'iroq sezilarli bo'ladi va turkuaz fon bilan uyg'unlikda u saytning bezakiga aylanadi.

Kolontit misoli: Ecwid

Sahifalarning pastki qismida harakatga chaqiruvlar bilan chiroyli dizayn. Sotuvchi veb-sayt yaratuvchisining tuzilishi universaldir. U millionlab mijozlari uchun 35 tilga tarjima qilingan.

4. Suzuvchi arava - sotish funksiyasining mavjudligini oshirish

Saytning pastki qismidan xarid qilish savatiga kirish saytning qulayligi va sotish sifatini yaxshilashning ajoyib usuli hisoblanadi.

Kolontiter misoli: Lemonadela

Umumiy ovqatlanish kompaniyasining sotuvchi veb-sayti ko'rish yoqimli va xaridor uchun qulay

5. Footer navigatsiyasi

Saytning pastki qismi tez-tez ko'rilmaydigan ma'lumotlar uchun ideal: kompaniya, xizmat ko'rsatish shartlari va maxfiylik siyosati haqida. Bunday holda, altbilgining vazifasi hammani qutqarishdir. Elektron tijorat muhitida o'zini yo'qotib qo'ygan odam infratuzilmaga qiziqadi elektron do'kon, instinktiv ravishda oldinga siljiydi ...

Tarkibning o'qilishi uchun salbiy bo'sh joy juda muhimdir. Umuman olganda, "footer" menyu yoki sayt xaritasidan farqli o'laroq, navigatsiya maqsadlari uchun emas. Faqat kamdan-kam hollarda, elektron tijorat saytlari pastki qismga joylashadi alohida toifalar tovarlar (

Esimda, men jadvallardan div tartibiga o'tishni boshlaganimda, men duch kelgan qiyinchiliklardan biri quyidagilar edi - sayt altbilgisini brauzer oynasining eng pastki qismiga qanday surish kerak, shunday qilib, matn hajmidan qatʼiy nazar sahifa toʻliq balandligigacha choʻzilgan koʻrinadi va agar sahifa balandligi brauzer oynasi balandligidan kattaroq boʻlsa (aylantirish paydo boʻlganda), pastki kolontiter oʻz joyida qoladi.

Agar jadvallar yordamida bu muammo faqat jadval va/yoki unga joylashtirilgan katakning balandligini ko'rsatish orqali hal etilsa, CSS-ni bloklashda ishlatishda butunlay boshqacha yondashuv qo'llaniladi.

Amaliyot jarayonida men o'zimni aniqladim CSS-dan foydalanib, brauzer oynasining pastki qismiga pastki kolontiterni siqishning 5 usuli.

Barcha taqdim etilgan usullarning HTML kodi quyidagi tuzilishga ega (farq faqat CSS kodi):

Quyidagi CSS kodi faqat mos keladigan usulni amalga oshirish uchun minimal zarur bo'lgan xususiyatlarni o'z ichiga oladi. Ularning har biri uchun jonli misolni ko'rishingiz mumkin.

Birinchi yo'l

Altbilgini mutlaq joylashtirish va asosiy bloklarning balandligini (html , body va .wrapper) 100% ga cho'zish orqali pastga bosiladi. Bunday holda, kontent bloki.content pastki qismning balandligiga teng yoki undan kattaroq bo'lgan pastki chetni ko'rsatishi kerak, aks holda altbilgi kontentning bir qismini qamrab oladi.

* ( chekka: 0; toʻldirish: 0; ) html, tana (balandlik: 100%; ) .oʻrash (pozitsiya: nisbiy; min-balandlik: 100%; ) .kontent (toʻldiruvchi-pastki: 90px; ) .footer (pozitsiya) : mutlaq; eni: 100%;

Ikkinchi yo'l

Ko'rinadigan vertikal aylantirishdan xalos bo'lish uchun pastki kolontiter kontent blokini va uning "ota-onasini" brauzer oynasining to'liq balandligiga tortib, pastki qismni salbiy chekka (chekka-yuqori) orqali yuqoriga ko'tarish orqali pastga bosiladi. Bunday holda, podvalning balandligini ko'rsatish kerak va u chuqurlik miqdoriga teng bo'lishi kerak.

* ( chekka: 0; toʻldirish: 0; ) html, tana, .wrapper (balandlik: 100%; ) .kontent (box-sizing: border-box; min-balandligi: 100%; padding-pastki: 90px; ) . altbilgi (balandligi: 80px; chetidan tepa: -80px; )

Box-sizing: border-box xususiyati tufayli biz .content sinfiga ega qutining balandligi 100% dan oshishini oldini olamiz. Ya'ni, bu holda min-height: 100% + padding-bottom: 90px brauzer oynasi balandligining 100% ga teng.

Uchinchi yo'l

Bu yaxshi, chunki boshqa usullardan farqli o'laroq (5-chidan tashqari), altbilgining balandligi muhim emas.

* ( chekka: 0; toʻldirish: 0; ) html, korpus (balandlik: 100%; ) .oʻrash (displey: jadval; balandlik: 100%; ) .kontent (displey: jadval-qator; balandlik: 100%; )

Bu yerda biz .wrapper blokini jadvalga va .content blokini jadval qatoriga aylantirish orqali jadvalning harakatini taqlid qilamiz (mos ravishda displey: jadval va displey: jadval qatori xususiyatlari). Buning yordamida va .content bloki va uning barcha asosiy konteynerlari 100% balandlikda o'rnatilganligi sababli, kontent to'liq balandlikka cho'zilgan, minus kolontiter balandligi avtomatik ravishda aniqlanadi - jadval emulyatsiyasi pastki ko'rsatkichning kengayishiga yo'l qo'ymaydi. brauzer oynasining balandligidan tashqarida.

Natijada, pastki qism pastki qismga bosiladi.

To'rtinchi usul

Bu usul avvalgilarining hech biriga o'xshamaydi va uning o'ziga xos xususiyati CSS funksiyasi calc() va vh o'lchov birligidan foydalanishdir, ular faqat zamonaviy brauzerlar tomonidan qo'llab-quvvatlanadi. Bu erda siz podvalning aniq balandligini bilishingiz kerak.

* (chekka: 0; toʻldirish: 0; ) .kontent ( min-balandlik: calc(100vh - 80px); )

100vh - brauzer oynasining balandligi, 80px esa pastki kolontiterning balandligi. Va calc() funktsiyasidan foydalanib, biz ikkinchi qiymatni birinchisidan ayirib tashlaymiz va shu bilan pastki qismni pastga bosamiz.

Qaysi brauzerlar calc() va vh-ni qo‘llab-quvvatlashini caniuse.com saytida quyidagi havolalar orqali bilib olishingiz mumkin: calc() funksiyasini qo‘llab-quvvatlash, vh birligini qo‘llab-quvvatlash.

Beshinchi usul (eng tegishli)

Bu eng yaxshi yo'l taqdim etilganlarning barchasidan, ammo u faqat zamonaviy brauzerlarda ishlaydi. Uchinchi usulda bo'lgani kabi, pastki qismning balandligi ham muhim emas.

* ( chekka: 0; toʻldirish: 0; ) html, tana (balandlik: 100%; ) .wrapper ( displey: moslashuvchan; moslashuvchan yoʻnalish: ustun; min-balandlik: 100%; ) .kontent ( flex: 1 0 avtomatik ) .footer ( flex: 0 0 auto; )

Flex xususiyati uchun brauzerni qo'llab-quvvatlash haqida bilib olishingiz mumkin.

Altbilgi - bu veb-sayt sahifasining pastki bloki, oxirgisi, lekin eng muhimi emas. Saytning pastki qismi yoki "kolontitr" ham deyilganidek, sahifaning pastki qismida joylashganligi, unda ahamiyatsiz ma'lumotlar borligini va unga kam odam "kirishini" anglatmaydi. Ammo shu bilan birga, sahifaning bu qismi keraksiz ma'lumotlar bilan ortiqcha yuklanmasligi kerak. Altbilgiga nimani kiritish yaxshiroq va uni qanday qilib iloji boricha funktsional qilish kerak?

Biz yaqinda Ukrainaning 50 ta onlayn-do'konining veb-saytlarini ko'rib chiqdik va ularning pastki ko'rsatkichlarini bir nechta parametrlar, jumladan, havolalar soni, ijtimoiy media akkauntlariga havolalar mavjudligi yoki axborot byulletenlariga obuna bo'lishlari asosida baholadik. Saytlar tasodifiy tanlangan, ammo biz onlayn savdoning turli sohalarini qamrab olishga harakat qildik, masalan: elektronika va maishiy texnika, moda, kosmetika va parfyumeriya, bolalar uchun mahsulotlar, oziq-ovqat, qurilish materiallari, bozorlar, savdo klublari va boshqalar. Biz o'rgangan onlayn-do'konlar ro'yxatiga o'z sohalaridagi yetakchilar ham, yangi kelganlar ham kiritilgan.

Foydali havolalar

Biz ko'rib chiqqan altbilgilardagi havolalarning o'rtacha soni 21 tani tashkil etdi.

Biz PARFUMS.UA onlayn-do'koni uchun eng kichik faol havolalarni hisobladik - "Yuqoriga" tugmachasini hisobga olmaganda, 5 ta havola.

Biz PARFUMS.UA kompaniyasining veb-saytidagi eng kam havolalar sonini hisobladik: do'kon sahifalari ijtimoiy tarmoqlar va aloqa ma'lumotlari.

Biz boshqa kosmetika va parfyumeriya onlayn-do'konidan, MakeUp.com.ua-dan 86 ta havolaning eng ko'p sonini hisobladik. Bu erda axborot byulleteniga obuna bo'lish qatoriga qo'shimcha ravishda toifalar va kichik toifalarga havolalar, kontaktlar, etkazib berish ma'lumotlari, yangiliklar, maqolalar va ijtimoiy tarmoqlardagi profillar va boshqalar mavjud.

Biz ko'rib chiqqan saytlarning aksariyati do'kon va uning qanday ishlashi haqida ko'proq ma'lumot olishga qiziqqan mehmon uchun foydali ma'lumotlar bloki sifatida altbilgidan foydalangan. Ko'pgina saytlar pastki qismga kiritilgan, masalan, maxfiylik siyosatiga havolalar, saytdan foydalanish qoidalari va boshqalar.

Biz tekshirgan saytlarning 88 foizi pastki qismda "Biz haqimizda" sahifasiga havolani o'z ichiga olgan. Va yana 88% - kontaktlar yoki kontaktlarning o'zlari bilan sahifaga havola. Saytlarning atigi 22 foizida foydalanuvchi u yoki bu darajada kompaniyadan xizmat ko'rsatishi mumkin bo'lgan pastki qismda havolalar mavjud. Biz koʻrib chiqqan barcha saytlarning 56% pastki qismidagi yuk tashish va toʻlov maʼlumotlari va/yoki qaytarish siyosatiga havolalarni oʻz ichiga olgan.

Mualliflik huquqi. Huquqlarni himoya qilish

Belgi biz tahlil qilgan onlayn-do'konlarning 76 foizining pastki qismida mavjud.

"Citrus" gadjetlari va aksessuarlari onlayn-do'konining veb-saytida, boshqa ko'plab veb-saytlarda bo'lgani kabi, mualliflik huquqini himoya qilish belgisi mavjud.

Qoidalarga ko'ra, belgidan keyin mualliflik huquqi egasining ismi va mualliflik huquqining amal qilish muddati ko'rsatiladi. Saytda paydo bo'ladigan noyob kontent sukut bo'yicha mualliflik huquqi qonuniga bo'ysunadi va o'rnatilishi talab etilmasa ham, ko'pchilik veb-ustalar hali ham ushbu belgini sayt altbilgisiga qo'shadilar.

Onlayn do'kon veb-saytida qurilish materiallari"StroyMAG" mualliflik huquqi belgisi yonida "Barcha huquqlar himoyalangan" iborasini ishlatgan.

Bundan tashqari, mualliflik huquqi belgisi bilan bir qatorda, ko'plab saytlar "Barcha huquqlar himoyalangan" iborasini ham qo'llaydi, ya'ni ular biror narsa sodir bo'lganda taqdim etishlari mumkin bo'lgan mualliflik guvohnomasiga ega. Shu tarzda, sayt egalari nusxa ko'chiruvchilarni o'g'irlik noto'g'ri ekanligi haqida ogohlantirilishini ta'minlashga harakat qilmoqda.

Ijtimoiy tarmoqlar va boshqa marketing

Amaliyot shuni ko'rsatadiki, altbilgi, shuningdek, tashrif buyuruvchi ijtimoiy tarmoqlardagi onlayn-do'kon sahifalariga havolalar yoki u bilan yanada o'zaro aloqa qilishning boshqa usulini topishi mumkin bo'lgan joy.

O'rganilgan taglavhalarning to'liq 92% ijtimoiy media akkauntlariga havolalarni o'z ichiga olgan. Bu biz tahlil qilgan saytlarning pastki qismidagi eng mashhur element.

Misol uchun, "Kviter" onlayn gul do'koni veb-saytining pastki qismi, biz ko'rib chiqqan ko'pgina saytlarning pastki qismi kabi, mashhur ijtimoiy tarmoqlardagi ularning akkauntlariga havolalarni o'z ichiga oladi.

Onlayn do'konlarning 34 foizi o'zlarining pastki qismida elektron pochta yoki SMS xabarnomalariga obuna bo'lish uchun qatorni o'z ichiga olgan. Ba'zilar obuna bo'lish uchun yoqimli bonuslarni va'da qiladilar, masalan, ma'lum miqdor uchun kupon.

Masalan, Answear onlayn kiyim do'konida obuna 300 UAHga o'zgartiriladi. sotib olish uchun.

Tahlil qilingan altbilgilarning 30 foizi marketing mazmunining ayrim shakllariga havolalarni ham o'z ichiga oladi. Ko'pincha bu blogga havolalar, maqolalar, video sharhlar va boshqalar.

Bo'sh ish o'rinlari

Ishlar boshqa juda mashhur altbilgi elementidir. Biz tahlil qilgan saytlarning 40% sahifalarining pastki qismida ushbu ma'lumotlarga havolalarni o'z ichiga olgan. Ko'rinishidan, bu erda foydalanuvchilar kompaniyada potentsial ish imkoniyatlarini izlashlari mumkin.

Kutilmagan kuzatishlar

Biz onlayn-do'konlarning atigi 30 foizida sayt xaritasi kabi altbilgi uchun mos keladigan elementni topdik.

Ishonch belgilari, masalan, xavfsiz sotib olish kafolati belgisi, barcha 50 ta onlayn-do'kondan atigi 4 tasi pastki qismga kiritilgan.

BonPrix savdo klubi veb-saytining pastki qismida siz xavfsiz xaridni va'da qiluvchi belgini topishingiz mumkin.

Altbilgidagi to'lov usuli piktogrammalaridan oz sonli onlayn-do'konlar ham foydalangan - atigi 18%.

Sizning pastki qismingiz

Tasodifiy tanlangan onlayn-do'konlarning 50 ta pastki qismidagi bu oddiy tahlil, albatta, ilmiy tadqiqot emas. Va biz olgan raqamlarni umuman elektron tijorat sanoatiga qo'llash qiyin. Agar bizning tahlilimizga ko'ra, onlayn-do'konlarning 54 foizi o'zlarining pastki qismidagi telefon raqamlarini o'z ichiga olgan bo'lsa, bu barcha elektron tijorat saytlarining 54 foizi xuddi shunday qiladi degani emas.

Ammo bu ma'lumot saytingizning pastki qismiga nima qo'shishni hal qilishda yordam beradigan qimmatli fikrdir. Shunga qaramay, ba'zi elementlarni saytning pastki blokiga joylashtirish mantiqan to'g'ri keladi, chunki foydalanuvchi ularni ko'rishni kutadi.