7 padomi labāk reaģējošām fotogalerijām
Mēs visi zinām un saprotam, cik svarīgi ir izveidot vietnes reaģējošā platformā, vai ne? Tas attiecas arī uz attēliem un foto galerijām.
Nav nekas sliktāks, kā navigācija uz skaistu vietni un tādu attēlu redzēšana, kas vienkārši “nenofiksējas” vietā vai nav atbilstoši izmēru. Tas gandrīz atstāj domāt, ka dizainers kaut ko aizmirsa vai nokavēja soli.
Šodien mēs apskatīsim septiņas lietas, kuras jūs varat darīt dizaina procesā, lai izveidotu labāk reaģējošas fotogalerijas. (Šeit mēs nerunājam par kodu; tie ir projektēšanas procesi, kas var jums un izstrādātājam palīdzēt neatkarīgi no tā, vai tie ir vieni un tie paši.)
Izpētiet Envato elementus
1. Apsveriet malu attiecības
Darbvirsmas skatīšanās pieredze var būt pavisam citāda nekā mobilajā ierīcē. Bet lielākajā daļā vietņu attēlu izvietojumi ir vienādi. Jūsu uzdevums ir pārliecināties, ka abās vidēs tiek nosūtīts viens un tas pats ziņojums un vai attēls nepazūd pie dažādiem ekrāna izmēriem.
Tur rodas ideja par malu attiecību - attiecības starp attēla horizontālo un vertikālo plakni.
Atpakaļ uz darbvirsmas vietni lielisks, ļoti plāns horizontāls fotoattēls jūsu vietnes dizaina augšdaļā var izskatīties pārsteidzošs. Bet kas notiek ar šo attēlu mazākā ekrānā kvadrātveida vidē? Vai fotoattēls sarūk tādā apjomā, ka to ir grūti redzēt? Vai arī puse no fotoattēla pazūd?
Šeit tiek parādīts malu attiecība. Izvēloties līdzīgu fotoattēlu izmēru horizontālo un vertikālo attiecību, mainot ierīces, tiks zaudēts mazāk attēla satura. Tas jums arī atvieglos darbu ar attēlu izvietojumiem, un jums nevajadzēs tikpat daudz uztraukties par vairāku izmēru augšupielādi dažādiem pārtraukšanas punktiem.
2. Izmērs un mērogs konsekventi
Rūpes par fotoattēlu apgriešanu, izmēru maiņu un augšupielādi var diezgan dramatiski ietekmēt jūsu darbplūsmu.
Cik no jums tikai augšupielādē fotoattēlus CMS un cerat uz labāko? Jā, ir nepareiza atbilde.
Katrs fotoattēls ir jāapgriež un jāizmēra, lai to ievietotu vietnes dizainā. Tas nodrošina, ka fotoattēli izskatīsies tā, kā tie ir domāti, un jums nevajadzēs galvu pietrūkt, lai fotoattēlu virsotnēs vai elementos paliktu no vienas (vai abām) pusēm.
Projekta beigām ir nepieciešams nedaudz vairāk laika, taču tas ir pūļu vērts. (Īpaši, ja strādājat ar slīdņiem vai galerijām.)
3. Izmantojiet slīdni vai galeriju
Tvertnes izmantošana attēliem, piemēram, slīdnim vai galerijai, var palīdzēt labāk pārvaldīt adaptīvos attēlus vietnes dizainā. Īpaši, ja jūs izmantojat labi zināmu un atzītu trešo personu instrumentu, lielākā daļa smago celšanas darbu tiek veikta jūsu labā, lai nodrošinātu, ka šie elementi darbosies kā paredzēts.
Divi no iepriekšējiem padomiem joprojām ir vitāli svarīgi, pat izmantojot slīdni vai galerijas elementus; joprojām tiek piemērotas proporcijas un lieluma un mērogošanas koncepcijas.
Vai nezināt, kuru iespēju izmantot? Izvēlieties slīdni, ja jums ir nedaudz lielisku attēlu, kas darbosies lielākos izmēros. Tā ir populāra opcija tīmekļa lapas augšdaļai vai “varonim”. Izvēlieties galeriju, ja jums ir daudz attēlu, kurus var padarīt mazus, bez lasāmības problēmām. Tas labi darbojas portfeļos vai vietnēs, kurās ir daudz attēlu.
4. Kad vien iespējams, esiet prom no parakstiem
Paraksti var būt lielisks rīks, lai pievienotu attēla informācijai pievienoto vērtību, taču tie patiešām var traucēt vietnes darbībai. Izvairieties no tām, ja varat piedāvāt alternatīvu risinājumu, kas nav tradicionāls paraksts.
Lielus teksta blokus, piemēram, parakstus, var skaisti attēlot uz lieliem ekrāniem, bet mazākās vidēs tie rada lielas problēmas. Iegūtais efekts var būt kaitinošs un potenciāli izraisīt to, ka lietotāji pamet jūsu vietni. (Un tā kā lielākajā daļā vietņu tik daudz trafika nāk no mobilajām ierīcēm, tas varētu būt postošs.)
5. Esiet piesardzīgs, sajaucot video un attēlus
Būsim skaidri: ir pilnīgi pieņemami, ja jūsu vietnē ir video un attēlu elementi. Droši vien tas ir kaut kas, kas jums jādara.
Bet nejauciet video un attēlus tajos pašos dizaina elementos, piemēram, ievietojiet video un attēla elementus vienā un tajā pašā slīdnī. Dažreiz jums paveiksies un tas darbosies kā šarms. Citreiz dažās ierīcēs jums tiks atstātas tukšas kastes, kas vienkārši izskatās dīvaini.
Vislabākais risinājums ir katram atšķirīgam elementa veidam piešķirt savu vietu dizainā. Tas attiecas uz gandrīz visiem dizaina elementiem, bet jo īpaši uz attēliem un video.
6. Izgrieziet nevajadzīgos elementus
Viena no lielākajām slīdņu un galeriju problēmām ir tā, ka pārāk bieži dizainers konteinera iekšpusē ievieto pārāk daudz nevēlamā materiāla. Ir navigācijas bultiņas, navigācijas pogas, teksts, aicinājumi uz darbību un saraksts turpinās.
Parasti lietotāji saprot, kā mijiedarboties ar slīdni. Ja vien jūs kaut ko darāt pavisam pie sienas, jums nav nepieciešami divi navigācijas slāņi, kas lietotājiem parādītu, kā rīkoties. Atsevišķu pogu vai bultu rindu ir daudz (ja jums tās vispār ir vajadzīgas).
Iekļaujiet tikai tos elementus, ar kuriem lietotājiem būs jāsadarbojas. Ja attēlu galerijas vai slīdņa mērķis ir likt lietotājam noklikšķināt / pieskarties aicinājumam uz darbību, tam vajadzētu būt vienīgajai fotoattēla opcijai. Saglabā to vienkāršu. Nesniedziet pārāk daudz iespēju. Tas faktiski var palīdzēt jūsu reklāmguvumu līmeņiem.
7. Izmantojiet tikai augstas kvalitātes attēlus
Gandrīz pats par sevi saprotams, bet tas joprojām notiek pārāk bieži. Ja jums nav zvaigžņu attēla, nelietojiet attēlu vispār. Augstas kvalitātes, augstas izšķirtspējas attēli ir svarīgāki nekā jebkad agrāk. Lietotāji netērēs laiku, apskatot vietni ar pikseļiem vai sliktiem attēliem (un viņi, iespējams, neuzticēsies jums, ja kvalitāte ir zemāka).
Liels skaits lietotāju izskata jūsu vietnes dizainu, izmantojot ierīces ar augstas izšķirtspējas ekrāniem; viņi sagaida visaugstākos vizuālos attēlus. Jums ir jāpiegādā.
Daži attēlu formāti mainās, lai apmierinātu šīs augstas izšķirtspējas vajadzības, vienlaikus nodrošinot vairāk saspiestu attēlu. Pārbaudiet sevi formātos - Google izstrādātāji ir lieliska vieta, kur sākt - zināt, kuras ekrāna izšķirtspējas tiek izmantotas visbiežāk, un iegūstiet ieradumu saglabāt failus tā, lai tos vislabāk piegādātu lietotājiem.
Secinājums
Mēs visi vēlamies izveidot vietnes, kurās lietotāji jūtas vajadzīgi mijiedarbībai. Spēcīgi attēli ir galvenā šī vienādojuma sastāvdaļa. Tikpat svarīgi ir panākt, lai tie tiktu atveidoti labi neatkarīgi no ierīces.
Plānojiet attēlu telpas, kas darbosies ar dažādiem ierīču izmēriem, kad atrodaties vietnes dizaina projekta izstrādes posmā. Varētu secināt, ka ir kāds, kas dod un pieņem, jo īpaši attiecībā uz attēla formu, taču ilgtermiņā šos lēmumus pieņemot agri un radot šo konsekvenci, ilgtermiņā būs jūsu vietnes dizains.
