Naudotojai linkę greitai nuspręsti apie svetainės patikimumą, profesionalumą ir tinkamumą, atsižvelgdami į jos vizualinę išvaizdą. Spustelėjus a
Viduje konors
Vienas iš pirmųjų dalykų, kurį lankytojai pamato, kai patenka į svetainę, ir vienas iš pagrindinių veiksnių, patraukiančių jų dėmesį, yra herojų vaizdai.. Tai strategiškai ir vizualiai įspūdingi elementai, perteikiantys prekės ženklo tapatybę.
Šiame įraše išnagrinėsime herojų vaizdų svarbą žiniatinklio dizainui, atskleisime jų žavesio paslaptis ir išnagrinėsime, kaip jie yra skaitmeninis sveikinimo kilimėlis jūsų prekės ženklo buvimui internete. Prisijunkite prie mūsų, kai pasineriame į meną ir mokslą už herojų atvaizdų.
Kas yra interneto dizaino herojaus įvaizdis?
Tinklalapio kūrime herojaus atvaizdas yra pirmoji nuotrauka, grafika, iliustracija ar vaizdo įrašas, kurį žmonės mato tinklalapyje.
Tai ne tik gražus vaizdas; tai esminis interneto dizaino komponentas, kuris akimirksniu perteikia prekės ženklo tapatybę, žinutę ar tikslą. Herojaus vaizdai paprastai pateikiami tinklalapio viršuje, todėl jie iškart matomi svetainėje.
Įvairių svetainių, tokių kaip tinklaraščiai, nukreipimo puslapiai, elektroninės prekybos platformos, ir komercinėse bei įmonių svetainėse, naudokite herojų nuotraukas. Jų gebėjimas pritraukti žmones ir efektyviai perteikti esmines idėjas yra sustiprintas
Koks pagrindinis herojų vaizdų tikslas?
Manote, kad herojų atvaizdai yra tik estetika? Pagalvok dar kartą!
Daugiau nei gražus paveikslėlis, skirtas tam tikram vaizdiniam puslapiui pridėti, pagrindinis herojaus įvaizdžio tikslas – patraukti žiūrovo dėmesį. Dažnai tai yra a
Vis dažniau naudojant mobiliuosius įrenginius, herojų vaizdai sukurti taip, kad reaguotų, prisitaikanti prie skirtingų ekranų dydžių, kad būtų užtikrinta nuosekli ir vizualiai patraukli patirtis įvairiuose įrenginiuose.
Herojaus atvaizduose dažnai yra tekstas ar kitoks turinys nepaisant jų stipraus vizualinio patrauklumo. Šis tekstas gali būti antraštė, paantraštė arba papildoma kalba, kuri suteikia žiūrovams konteksto arba nukreipia juos į tam tikras svetainės sritis.
Herojaus vaizdo su tekstu ir raginimo veikti pavyzdys. Daugiau įkvepiančių herojų įvaizdžių pavyzdžiai yra čia.
Paskutinis, bet ne mažiau svarbu, Herojaus vaizdai dažnai turi raginimą veikti, raginantis žiūrovus atlikti tam tikrą veiksmą. Tai gali būti bet kas nuo „Sužinokite daugiau“ iki „Apsipirkti dabar“.
Hero vaizdų pavyzdžiai
Tinklalapio dizaino herojų vaizdai perteikia prekinio ženklo tapatumas, nustatykite toną ir akimirksniu patraukite dėmesį. Greitai pažiūrėkime, kaip geriausios svetainės įvaldo herojų vaizdų meną. Kitame skyriuje išnagrinėsime kuruojamą herojų atvaizdų pavyzdžių kolekciją įvairiose pramonės šakose, parodydami įvairius ir veiksmingus būdus, kaip jie pagerina naudotojų patirtį. Skaitykite toliau, nes pristatome strategijas, dėl kurių šie vaizdai tikrai nenugalimi!
Mada: Zara
apima herojų atvaizdus, kad būtų rodomos naujausios mados kolekcijos. Į šiuos vaizdus dažnai įtraukiami modeliai, dėvintys drabužius stilingoje aplinkoje, sukuriantys vizualiai patrauklų ir ambicingą vaizdą.
Maistas ir kulinarija: maisto tinklas
svetainėje naudojami herojų vaizdai, kuriuose demonstruojami skanūs patiekalai. Šie vaizdai yra gyvybingi ir viliojantys, skatinantys lankytojus tyrinėti receptus ir kulinarinį turinį.
Ne pelno: Pasaulio laukinės gamtos fondas (WWF)
dažnai naudoja herojų atvaizdus, kuriuose pavaizduotos nykstančios rūšys ar gamtos peizažai, sukuriantys emocinį ryšį su lankytojais. Šie vaizdai perteikia išsaugojimo pastangų būtinybę.
Finansai: monetų kalykla
, asmeninių finansų programėlė, naudoja herojų vaizdus, kuriuose vaizduojami asmenys, be vargo tvarkantys savo finansus. Vaizdai perteikia kontrolės ir finansų jausmą
Herojaus vaizdo matmenys
Herojaus vaizdų matmenys gali skirtis atsižvelgiant į svetainės dizaino nuostatas, išdėstymas ir specifiniai naudojamos turinio valdymo ar temos reikalavimai.
Herojaus įvaizdžio dydžio nustatymas gali būti painus. Reklamjuosčių herojų vaizdai nėra tokie patys kaip
Nors reklamjuostės herojų vaizdai paprastai apima visą turinio srities arba sudėtinio rodinio plotį,
Štai kodėl nustatant herojų vaizdų dydį gali kilti painiavos ieškant tinkamo formato koeficiento ir apkarpant. Štai keletas gairių, padėsiančių geriau pritaikyti įprastus herojų vaizdų tipus. Atminkite, kad tai yra siūlomi dydžiai ir galite juos koreguoti pagal savo konkretų dizainą ir platformą:
Per visą ekraną vaizdo matmuo
- Plotis: plotis a
visą ekraną herojaus vaizdas paprastai nustatomas į 100 % peržiūros srities pločio, užtikrinant, kad jis apimtų visą naudotojo ekrano plotį. - ܰšپ: ܰšپ a
visą ekraną herojaus vaizdas dažnai nustatomas į 100 % peržiūros srities aukščio, todėl sukuriama vertikaliai įtraukianti patirtis. Tikslūs pikselių matmenys gali skirtis priklausomai nuo formato santykio ir dizaino estetikos.
Reklamjuostės herojaus vaizdo matmenys
- Plotis: paprastai apima visą turinio srities arba sudėtinio rodinio plotį. Reklamjuostės herojaus vaizdo plotis apima visą turinio srities arba sudėtinio rodinio plotį. Šis plotis gali skirtis, tačiau standartiniams darbalaukio ekranams dažnai būna apie 1920 pikselių.
- ܰšپ: reklamjuostės herojaus atvaizdo ܰšپ paprastai yra įvairesnis ir gali priklausyti nuo dizaino estetikos ir turinio, kurį norite įtraukti. Įprasta, kad reklamjuostės herojų atvaizdai yra trumpesni nei
visą ekraną vaizdų, dažnai nuo 300 iki 600 pikselių.
Mobiliojo herojaus vaizdo matmenys
- Plotis: kad dizainas būtų jautrus, įprastas plotis yra 100 %, kad vaizdas prisitaikytų prie mobiliojo įrenginio ekrano pločio. Tai leidžia vaizdui aprėpti visą peržiūros srities plotį.
- Aukštis: ܰšپ gali skirtis, tačiau būtina atsižvelgti į kraštinių santykį, kad būtų išvengta iškraipymų. Gera praktika yra optimizuoti, kad būtų vizualiai malonu ir subalansuota išvaizda mobiliųjų telefonų ekranuose. Aukštis paprastai svyruoja nuo 200 iki 600 pikselių, priklausomai nuo konkretaus dizaino ir turinio.
Apskritai, jei jūsų svetainė labai priklauso nuo teksto ir informacijos, reklamjuostės herojaus vaizdas gali būti tinkamesnis. Jei norite sukurti vizualiai įtraukiančią patirtį arba pademonstruoti nuostabius vaizdus, a
Dažnos klaidos pridedant herojų vaizdus
Hero nuotraukos gali veiksmingai perteikti prekės ženklo žinią ir pagerinti svetainės vizualinį patrauklumą, tačiau yra keletas tipiškos interneto dizainerių klaidos ir kūrėjai daro juos naudodami. Svetainė, kuri yra sėkmingesnė ir
- Dideli failai: Pridedant
aukštos kokybės nuotraukos, kurios yra per didelės jūsų svetainei, gali būti įkeliamos lėčiau. Jei įkėlimas užtrunka per ilgai, vartotojai gali nesidomėti arba išeiti iš svetainės. Optimizuokite savo nuotraukas, kad gautumėte geriausią įmanomą raiškos ir dydžio pusiausvyrą. - Neoptimizuojama mobiliesiems: herojų vaizdai, kuriems trūksta jautraus dizaino, mažesniuose ekranuose gali atrodyti deformuoti arba nepatrauklūs. Norėdami užtikrinti sklandų naudotojo patirtį, įsitikinkite, kad herojaus nuotraukos efektyviai veikia įvairiuose įrenginiuose.
- Prastas kontrastas su tekstu: jei herojaus vaizde yra užimtų arba tamsių funkcijų, jis gali susidurti su persidengiančiu tekstu. Įsitikinkite, kad kontrastas yra pakankamas, kad būtų lengva skaityti tekstą. Naudojant tekstą su a
pusiau skaidrus fone arba pridėjus teksto šešėlius, galima pagerinti įskaitomumą. - Prekės ženklo nuoseklumo nepaisymas: herojaus vaizdas turi atitikti bendrą svetainės prekės ženklą. Naudojant vaizdus, kurie neatitinka prekės ženklo spalvų schemos, tono ar stiliaus, lankytojai gali suklaidinti ir sumenkinti svetainės profesionalumą.
- Nepaisoma puslapio greičio: Be paveikslėlių failų dydžių, kiti kintamieji, turintys įtakos puslapio greičiui, apima HTTP užklausų skaičių ir laiką, kurio reikia serveriui atsakyti. Patobulinkite savo svetainės funkcionalumą, kad užtikrintumėte sklandžią vartotojo patirtį.
- Trūksta aktualumo: svetainės turinį arba tikslą turi atitikti herojaus vaizdas. Lankytojai gali sutrikti orientacija arba prarasti susidomėjimą, jei tai nesudaro aiškaus ryšio su svetainės turiniu.
- Netestuojama įvairiose naršyklėse: skirtingos žiniatinklio naršyklės gali skirtingai interpretuoti kodą ir rodyti vaizdus. Išbandykite savo svetainę įvairiose naršyklėse, kad įsitikintumėte, jog herojaus vaizdai atrodo taip, kaip numatyta visiems naudotojams.
Nuo didelių failų matmenų iki lėto įkėlimo laiko ir prasto kontrasto su tekstu – kiekviena iš šių dažnai pasitaikančių klaidų gali turėti didelės įtakos lankytojo suvokimui ir įsitraukimui. Norint užtikrinti teigiamą vartotojo patirtį ir patrauklią svetainę, būtina vengti šių dažnai pasitaikančių klaidų diegiant herojų vaizdus.
Siekiama subtilios estetikos ir funkcionalumo pusiausvyros. Per strateginį planavimą, bandymus ir įsipareigojimą
Hero Images geriausios praktikos
Dar nespustelėkite, nes ruošiamės pasidalyti viešai neatskleista informacija apie herojų atvaizdus, kurie sklandžiai dera su jūsų prekės ženklu!
Panašiai kaip ir įprastos klaidos, geriausios herojaus įvaizdžio praktikos dažniausiai apima efektyvų tam tikros praktikos įgyvendinimą, siekiant užtikrinti, kad jūsų pasirinkti vaizdai veiksmingai prisidėtų prie teigiamos naudotojo patirties. Iš esmės tai susiję su anksčiau minėtų įprastų klaidų vengimu ir kai kuriomis pagrindinėmis gairėmis, paminėtomis kituose skyriuose.
Aiškus raginimas veikti
Jei herojaus paveikslėlyje yra tekstas arba mygtukai, įsitikinkite, kad jie yra glausti, patrauklūs ir paskatinkite naudotojus imtis veiksmų. Norėdami pradėti, naudokite stiprius veiksmažodžius raginimas veikti, įtraukite žodžius, kurie sukelia emocijas ar entuziazmą, pasinaudokite mūsų natūralia baime praleisti, suderinkite raginimą veikti su įrenginio tipu ir galiausiai išlaikykite gerą vaizdinių elementų ir teksto pusiausvyrą.
Patvirtinantys dizainas
Sukurkite herojų vaizdus, kad jie reaguotų, sklandžiai prisitaikantis prie skirtingų ekranų dydžių ir skiriamųjų gebų, įskaitant mobiliuosius įrenginius ir planšetinius kompiuterius. Taip pat nepamirškite apie tipografiją.
Židinio taškas ir kompozicija
Įdėkite svarbius elementus (pvz., logotipą ar pagrindinį pranešimą) strategiškai herojaus įvaizdyje, kad žiūrovas galėtų sutelkti dėmesį. Apsvarstykite kompozicijos principus kaip trečdalių taisyklę.
Pakrovimo greitis
Optimizuokite vaizdus, kad sumažintumėte įkėlimo laiką. Naudotojai gali išeiti, jei svetainė įkeliama per ilgai, o tai turi įtakos atmetimo rodikliams ir SEO.
Pasakojimas ir emocijos
Naudokite herojų atvaizdus, kad papasakotumėte istoriją arba sužadintumėte emocijas, susijusias su jūsų prekės ženklu ar pranešimu. Užmegzkite ryšį su lankytojais pasitelkdami patrauklius vaizdus.
A / B testavimas
Eksperimentuokite su skirtingais herojų atvaizdų variantais, kad sužinotumėte, kuris našiausias. A/B testavimo herojų vaizdai padeda nustatyti efektyviausius vaizdus jūsų auditorijai.
Laikydamiesi šios praktikos galite išnaudoti visas savo herojų vaizdų galimybes, pagerinti svetainės išvaizdą ir paskatinti lankytojus likti ilgiau. Strategiškai taikydami šiuos praktikos elementus galite pagerinti bendrą naudotojo patirtį ir prisidėti prie savo svetainės ar parduotuvės sėkmės.
Didvyrių vaizdai svetainių ir el. prekybos parduotuvių savininkams
Herojaus atvaizdai gali atlikti lemiamą vaidmenį patraukiant lankytojų dėmesį ir skatinant juos tyrinėti jūsų produktus.
Galite naudoti herojų vaizdus, kad parodytumėte savo įgūdžius žiniatinklio aplanke, kad galėtumėte pateikti savo ne pelno siekiančios svetainės fono istoriją, pademonstruoti naujausius produktus ar pristatymus į savo internetinę parduotuvę ir netgi kaip būdą paryškinti naujas prekes.
Taip pat galite pritaikyti herojų atvaizdus, kad jie atitiktų sezonines kampanijas ar reklamas, skelbti specialius pasiūlymus ar nuolaidas, papasakoti savo prekės ženklo istoriją, parodyti patrauklius raginimus veikti, raginančius lankytojus nedelsiant imtis veiksmų ir galiausiai pridėti dinamišką savo puslapį.
Nepamirškite reguliariai atnaujinti herojų vaizdų, kad juos išsaugotumėte Jūsų tinklalapis atnaujinkite ir suderinkite vaizdus su vykstančiomis reklamomis ar sezoniniais pokyčiais. Naudodami patrauklius herojų vaizdus, el. prekybos parduotuvių savininkai gali sukurti įtraukiantį ir vizualiai patrauklų apsipirkimo internetu patirtį.
- Kaip pataisyti parduotuvės navigaciją
- Viskas, ką reikia žinoti apie produktų prekybą
- Prekyba internetu: kaip išdėstyti produktus internetinėje parduotuvėje
- Kas yra mados prekyba ir kodėl ji tokia svarbi?
- 10 internetinių parduotuvių dizaino klaidų
- 15 puikių šriftų porų jūsų el. prekybos svetainei
- Spalvų teorija: viskas, ką reikia žinoti apie spalvų temas
- 7 kūrybinės idėjos jūsų el. prekybos produkto puslapiui
- Herojaus įvaizdžio galia interneto dizaino srityje
Privalu turėti UX principai, kurių reikia laikytis internetinėje parduotuvėje- Svetainės dizaino auditas
- Atlaisvinkite UX dizaino galią el. prekybai
- Kuo skiriasi UI ir UX el. prekyboje?