Vaizdo karuselės Web dizaine - privalumai ir geriausia praktika

Nėra trūkumo karuselės skaidrių demonstracijos žiniatinklyje. Tiesą sakant, ši tendencija nieko nedarė per pastaruosius 5–10 metų daugiau naršyklės palaikymo dabar nei bet kada anksčiau. Bet ar vaizdų karuselės tikrai verta pastangų? Kokios yra jų teikiamos naudos ir kaip jos turėtų būti naudojamos produktyviai išdėstant?

Norėčiau pasidalinti kai kuriais bendros tendencijos, gyvi pavyzdžiai ir idėjos interneto dizaineriams, kurie domisi vaizdo karuselėmis. Šie dinamiški slankikliai yra labai diskutuojami, bet manau, kad jie sukuria pridėtinę vertę, kai jie sukurti tinkamu kontekstu.

Produkto karuselės elektroninei prekybai

Elektroninės komercijos pasaulis yra pilnas besisukančių karuselių pagrindiniuose puslapiuose ir produktų puslapiuose. Tikslas yra išlaikyti aiškų informacijos tankumą su nuotraukomis ir tekstu pasakykite unikalią, bet vertingą istoriją padėti parduoti produktus.

Yra dvi pagrindinės paskirties vietos el. prekybos produkto slankiklį:

1. Parduotuvės pagrindiniame puslapyje
2. Produkto puslapyje

Jie abu dirba skirtingai, bet tarnauti tam pačiam tikslui - parduoti produktus vizualiai.

1 pavyzdys: „Au Lit Fine Linens“ - pagrindinis puslapis

Pažvelkite į „Au Lit Fine Linens“ pagrindinį puslapį naudoja pilno ekrano automatiškai besisukančią karuselę parodyti skirtingus gaminius, tokius kaip antklodės, pagalvės ir lovos dangos.

Vaizdai užimkite visą plotį pagrindiniame puslapyje, ir jie rodomi gerokai virš kartus. Tiesą sakant, šis slankiklis turėtų būti pirmas dalykas, į kurį reikia atkreipti jūsų dėmesį pirmą kartą nusileidžiant puslapyje. Kiekviena skaidrė nukelia į kitą svetainės puslapį vadovauti klientams per pirkinių patirtį.

Šis slankiklis gali būti bauginantis, kai pirmą kartą nusileidžiate puslapyje, bet su mygtuko nuoroda ir perdengti tekstą tai taip pat gali būti labai viliojanti lankytojams, kurie tiesiog nori nardyti ir apsipirkti.

2 pavyzdys: „Eden“ telefono dėklas - produkto puslapis

Jūs galite pamatyti konkretesnį pavyzdį „Eden“ telefono atveju produkto puslapyje. Jis naudoja automatiškai besisukantis slankiklis parodyti produkto vaizdus.

Manau, kad tai šiek tiek “per daug” e. prekybos pasaulyje. Pažvelgus į norimą būti produktą valdant vaizdų perjungimą.

Geresnis pasirinkimas - padaryti vaizdų galeriją lankytojui suteikta kontrolė. Pavyzdžiui, naudojamas puslapis „Dizainas pagal žmones“ kiekvienos nuotraukos miniatiūros kuri yra daug labiau skatinanti ir suteikia vartotojui daugiau kontrolės.

Interneto portfelio karuselės

Interneto svetainių portfeliai yra šiek tiek skirtingi, nes šie skaidres ne visada spustelėkite kitą puslapį. Tiesa, kad kai kurie iš jų bus atvejo tyrimas arba parašyti apie projektą, tačiau daugelis karuselių portfelio svetainėse yra tik skirtos parodyti vizualinį darbą.

1 pavyzdys: Biboun - pagrindinis puslapis

Prancūzų menininkas, dirbantis pagal pavadinimą Biboun, turi a slankiklį pagrindiniame puslapyje vaizduoja meno kūrinius. Atskiros skaidrės veda į vidinius portfelio puslapius apima visą projektą su keliomis nuotraukomis.

Tai tikriausiai geriausias būdas atlikti slankiklį portfelio svetainėje. Tiesiog atsitiktinis darbų sąrašo demonstravimas yra beprasmis, nebent šie konkretūs darbai turi pagrindą.

Visi gabalai yra išskirtinis Bibouno slankiklį ir jį neužima daug vietos taip pat. Nors žinau, kad kai kurie žmonės nekenčia automatiškai besisukančių skaidrių peržiūrų dėl pagrįstos priežasties, dėl tokio minimalistinio išdėstymo turiu sunkų skundą dėl šios dizaino funkcijos.

2 pavyzdys: Aarono Blaise interneto svetainė - pagrindinis puslapis

Man labai patinka pavyzdys, rastas Aaron Blaise svetainėje, nes jis demonstruoja savo darbą kaip portfelį, tačiau daugiausia naudoja šią svetainę parduoti savo meno vaizdo įrašus. Aaron Blaise keletą metų dirbo „Disney“, ir jis turi įgūdžių, kad jį įrodytų.

Nors pagrindiniame puslapyje esantis slankiklis savo svetainėje automatiškai sukasi, nemanau, kad tai nepaprastai erzina ar neveikia. Kiekviena skaidrė turi šiek tiek turinio, susijusio su vaizdu, ir tai padeda Aaronui atkreipti dėmesį į savo naujausias vaizdo pamokas mokyti jaunus menininkus, kaip įvaldyti konkrečius įgūdžius.

Puikus portfelio karuselė dėmesys sutelkiamas į vaizdinius, ir veda lankytojus toliau į svetainę. Jei galite gauti šiuos du dalykus, aš nebūtų prieš tokį funkciją asmeninėje portfelio svetainėje.

Bendros dizaino tendencijos

Jei pažvelgsite į kai kuriuos aukščiau pateiktus pavyzdžius, pastebėsite, kad paprastai yra du skirtingi slankiklių tipai: per visą ekraną ir fiksuotas plotis.

Šie stilistiniai pasirinkimai dažnai susiję su išdėstymu ir kiek turinio jis gali laikyti. Jei maketas aprėpia visą puslapio plotį, tuomet prasminga išplėsti slankiklį. Bet tai taip pat verčia jus rasti aukštos kokybės vaizdus kad vis dar gerai atrodo visame ekrane didelės skiriamosios gebos monitoriuose.

Asmeniškai norėčiau nustatyti fiksuoto pločio stilių, kaip matysite dviejuose meno portfelio pavyzdžiuose. Sitie yra daug lengviau kontroliuoti, ir jie dažnai ne toks aukštas - lankytojams lengviau tiesiog ignoruokite jei jie nori.

Taip pat apsvarstykite automatinio judėjimo skaidrių vertę ir kaip sunku tai gali būti vartotojai gali sugauti šį turinį. „Nielsen Norman“ grupė puikiai ištyrė, kad tai geriau neturi automatinio progresavimo slankiklių.

Aš šiuo laivu būsiu ta prasme, kad tai yra mažiau intensyvi atmintyje su mažesne animacija ir judesiu naršyklėje, ir dauguma žmonių nemėgsta automatiškai besisukančių karuselių - ir visada turėtumėte rūpintis savo auditorija.

Tačiau aš negaliu pasakyti, kad niekada verta pridėti automatinio judėjimo slankiklį, ypač nuo to, kad jūs statiški slankikliai negauna tiek daug vaizdų, ir jūs taip pat turite padaryti savo pirmąją skaidrę svarbiausia nes daugelis naudotojų nepradės pereiti prie kito skaidrių. Deja, nuspręsti, ar slankiklį padaryti automatiškai, ar ne bandymų ir klaidų sritis.

Ką reikia vengti bet kokia kaina

Štai svarbus dalykas, kurį aš asmeniškai manau patenka į “išvengti bet kokia kaina”. Pažvelkite arba spustelėkite toliau pateiktą ekrano kopiją ir pabandykite atspėti, kas gali būti.

„Yozenn“ kavinės svetainėje naudojama viso ekrano antraštė. Jis nėra automatiškai sukasi, kuris yra puikus, tačiau taip pat ir skaidrės neturi jokio kito tikslo, išskyrus apdailą.

Vaizdai nesijunkite niekur, ir jie demonstruoja nedidelį sauja produktų. Jie visi galėjo būti pridėta prie pagrindinio puslapio fono be slankiklio išsaugoti painiavą ir papildomus „JavaScript“ kilobaitus.

Norėčiau teigti, kad ši foninė slankiojančioji funkcija nepadidina jau sukurtos svetainės. Jei vaizduose buvo nuorodų ar pridedamas tekstas, jie bent jau būtų tinkamesni.

Nesivaržykite naudoti antraštės skiltyje esančius vaizdus, ​​kurie užima visą puslapį, tačiau jei jie yra nesiekite jokios nuorodos ar pasiūlykite tikrą informaciją tada nekreipkite jų į karuselę.

Interaktyvios funkcijos

Tai, kaip vartotojai naršo karuselę, daro įtaką pačiam dizainui. Čia yra įvairių navigacijos stilių, tačiau jie yra populiariausi:

• Taškų navigacija
• Rodyklės naršymas
• Miniatiūros navigacija
• Sąrašų nuorodų arba antraštės elementų sąrašas

Dažniausiai tai yra taškų navigacija kurią rasite šimtuose šiuolaikinių svetainių.

1 pavyzdys: „Chic“ namuose - pagrindiniame puslapyje

„Chic at Home“ yra puikus pavyzdys naudojant po trimis mažais taškais žymėti navigaciją. Kiekvienas vaizdas sukasi automatiškai, o atitinkamas taškas serijoje pripildo juodos spalvos. Kiti du tuščia taškai žymi potencialius skaidres naudotojams naršyti.

Tai yra populiarus dizainas kad daugelis vartotojų jau atpažįsta. Jis patenka į tą pačią kategoriją kaip ir mėsainiai, kurių nemėgsta daugelis dizainerių, bet vartotojai jau jį atpažįsta, ir instinktyviai žino, kaip jį naudoti.

2 pavyzdys: „Pure Cycles“ - pagrindinis puslapis

Pure Cycles pagrindinis puslapis naudoja a taško ir rodyklės navigacijos derinys. Tokiu būdu vartotojai turi navigaciją į priekį ir atgal taip pat žr “apskritai” navigacija per taškų nuorodas apačioje.

Aš iš tikrųjų rasiu taškų nuorodas šiame pavyzdyje. Sunkumų, susijusių su vaizdo skaidriomis, yra tai, kad daug elementų nėra lengva atskirti, todėl gali būti rodyklės ir taškai lengvai įsilieja į foną.

3 pavyzdys: IGN - pagrindinis puslapis

IGN pagrindiniame puslapyje rasite kitą automatiškai sukasi karuselė kuri naudoja navigacijos pavadinimo nuorodos. Tai labai dažnas leidėjams, norintiems parduoti antraštes vietoj produktų. Kiekviena nuoroda eina į atskirą skaidrę veda į straipsnio puslapį.

Šios nuorodos galima pakeisti miniatiūromis, arba netgi įtraukti miniatiūras iš kiekvienos istorijos - tačiau vizualinis aspektas parodytas karuselėje, taip ištrinant miniatiūrą iš tikrųjų sutaupoma vietos.

Skirtingos svetainės naudoja skirtingus navigacijos stilius dėl įvairių priežasčių. Apsvarstykite lankytojų tikslą (-us), ir sukurti geriausią naudotojo patirtį.

Raktai

Jūs turėtumėte siekti gaminti tikrą vertę arba papildomą informaciją su karuseliu. Tai gali būti informacija, kurią lankytojas anksčiau neturėjo, arba gali būti, kad puslapiai, kuriuos lankytojas gali nenustatyti kitaip.

Pabandykite vengti automatiškai besisukančių karuselių ir juos naudoti tik pagrindiniuose nukreipimo puslapiuose (pagrindinis puslapis yra vienas pavyzdys). Tol, kol karuselė turi tikslą, ir neatrodo kaip skelbimas, jūsų dizainas turėtų būti gerai.

Jei ieškote daugiau informacijos apie interneto karuselius, patikrinkite kai kuriuos iš šių įrašų:

• Brad Frost karuselės
• 8 UX reikalavimai vartotojui patogiam pagrindiniam tinklalapiui Karuselė
• Karuselės naudingumas: efektyvios vartotojo sąsajos kūrimas svetainėms su turiniu