Naudotojai linkę greitai nuspręsti apie svetainės patikimumą, profesionalumą ir tinkamumą, atsižvelgdami į jos vizualinę išvaizdą. Spustelėjus a
Viduje konors
Vienas pirmųjų dalykų, kuriuos lankytojai pamato apsilankę svetainėje, ir vienas iš pagrindinių veiksnių, patraukiančių jų dėmesį, yra pagrindiniai vaizdai . Tai strategiškai ir vizualiai patrauklūs 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
Didėjant mobiliųjų įrenginių naudojimui, pagrindiniai vaizdai kuriami taip , kad būtų pritaikomi prie skirtingų ekranų dydžių, siekiant užtikrinti nuoseklią ir vizualiai patrauklią patirtį įvairiuose įrenginiuose.
Nepaisant vien tik didelio vizualinio patrauklumo , pagrindiniai paveikslėliai dažnai turi uždėtą tekstą ar kitą turinį . Šis tekstas gali būti antraštė, paantraštė arba papildoma informacija, suteikianti žiūrovams kontekstą arba nukreipianti juos į konkrečias svetainės sritis.
Pagrindinis paveikslėlio su tekstu ir raginimu veikti pavyzdys. Daugiau įkvepiančių pagrindinio paveikslėlio pavyzdžių rasite čia.
Galiausiai, herojų paveikslėliuose dažnai yra raginimas veikti , raginantis žiūrovus atlikti tam tikrą veiksmą. Tai gali būti bet kas – nuo „Sužinokite daugiau“ iki „Apsipirkite dabar“.
Hero vaizdų pavyzdžiai
Žiniatinklio dizaine naudojami herojų atvaizdai perteikia prekės ženklo tapatybę , nustato toną ir akimirksniu patraukia dėmesį. Trumpai apžvelkime, kaip geriausios svetainės įvaldo herojų atvaizdų meną. Kitame skyriuje nagrinėsime kuruotą herojų atvaizdų pavyzdžių kolekciją iš įvairių pramonės šakų, pademonstruodami įvairius ir įtaigius būdus, kaip jie gerina naudotojų patirtį. Skaitykite toliau, nes atskleisime strategijas, kurios šiuos vaizdus daro išties nenugalimus!
Mada: Zara
„Zara“ į savo naujausias mados kolekcijas įtraukia herojų atvaizdus. Šiuose atvaizduose dažnai matomi modeliai, dėvintys drabužius stilingoje aplinkoje, taip sukuriant vizualiai patrauklų ir įkvepiantį įvaizdį.
Maistas ir kulinarija: maisto tinklas
„Food Network“ svetainėje naudojami pagrindiniai vaizdai, kuriuose vaizduojami gardūs patiekalai. Šie vaizdai yra ryškūs ir viliojantys, skatinantys lankytojus tyrinėti receptus ir kulinarinį turinį.
Ne pelno: Pasaulio laukinės gamtos fondas (WWF)
WWF dažnai naudoja herojiškus atvaizdus, vaizduojančius nykstančias rūšis arba gamtos peizažus, taip sukurdamas emocinį ryšį su lankytojais. Šie vaizdai perteikia gamtosaugos pastangų skubumą.
Finansai: monetų kalykla
Mėta, 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
Pagrindinių paveikslėlių matmenys gali skirtis priklausomai nuo svetainės dizaino nuostatų , išdėstymo ir konkrečių turinio valdymo ar naudojamos temos reikalavimų.
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į. - aukštis: aukštis 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ų.
- aukštis: reklamjuostės herojaus atvaizdo aukštis 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: 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 pagrindinio paveikslėlio tekste ar mygtukuose pateikiate informaciją, įsitikinkite, kad jie yra glausti, patrauklūs ir skatina vartotojus imtis veiksmų. Raginimą veikti pradėkite stipriais veiksmažodžiais, įtraukite žodžius, kurie sukelia emocijas ar entuziazmą, pasinaudokite natūralia baime praleisti ką nors naujo, raginimą veikti priderinkite prie savo įrenginio tipo ir galiausiai išlaikykite gerą balansą tarp vaizdinių elementų ir teksto.
Patvirtinantys dizainas
Sukurkite pritaikomus herojaus paveikslėlius prie skirtingų ekranų dydžių ir skiriamųjų gebų, įskaitant mobiliuosius įrenginius ir planšetinius kompiuterius. Nepamirškite ir tipografijos.
Ž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 pagrindinių paveikslėlių variantais, kad pamatytumėte, kuris veikia geriausiai. A/B testavimas pagrindinių paveikslėlių padeda nustatyti efektyviausius vaizdinius elementus 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 pagrindinių paveikslėlių, kad jūsų svetainė išliktų aktuali ir atitiktų vykstančias akcijas ar sezoninius pokyčius. Naudodami patrauklius pagrindinių paveikslėlių vaizdus, el. prekybos parduotuvių savininkai gali sukurti įtraukiančią ir vizualiai patrauklią 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?
