7 näpunäidet paremini reageerivate fotogaleriide jaoks
Me kõik teame ja mõistame, kui oluline on veebisaitide kujundamine reageerival platvormil, eks? See kehtib ka piltide ja pildigaleriide kohta.
Pole midagi hullemat, kui navigeerida kaunile veebisaidile ja vaadata pilte, mis lihtsalt ei lukustu oma kohale ega suurus korralikult. See jätab peaaegu mõtlemata, et disainer unustas midagi või jättis ühe sammu vahele.
Täna vaatame seitset asja, mida saate disainiprotsessis paremini reageerivate fotogaleriide loomiseks teha. (Me ei räägi siin koodi; need on projekteerimisprotsessid, mis saavad teid ja arendajat aidata, olenemata sellest, kas need on samad või mitte).
Uurige Envato elemente
1. Arvestage kuvasuhteid
Töölauavaatamiskogemus võib olla üsna erinev mobiilseadme omast. Kuid enamiku veebisaitide puhul on pildipaigutused samad. Teie ülesanne on veenduda, et mõlemas keskkonnas edastatakse sama sõnum ja et pilt ei eksiks erineva ekraanisuuruse korral.
Siit tulebki mõelda kuvasuhtele - pildi horisontaalse ja vertikaalse tasapinna suhtele.
Tagasi töölaua veebisaidil võib lahe üliõhuke horisontaalfoto teie veebisaidi kujunduse ülaosas tunduda hämmastav. Kuid mis juhtub selle pildiga väiksemal ekraanil ruudukujulisemas keskkonnas? Kas foto kahaneb suuruses, mida on raske näha? Või kaob pool fotost?
Siit tulebki kuvasuhe. Kui valite sarnase foto suuruse jaoks horisontaalse ja vertikaalse suhte, kaob seadmete vahetamisel vähem pildisisu. See muudab ka piltide paigutustega töötamise lihtsamaks ja te ei pea muretsema nii palju, et üles laadida mitu erinevat suurust erinevale murdepunktile.
2. Suurus ja skaala järjepidevalt
Fotode kärpimise, suuruse määramise ja üleslaadimise eest hoolitsemine võib teie töövoogu üsna dramaatiliselt mõjutada.
Kui paljud teist laadivad fotod lihtsalt CMS-i ja loodate parimat? Jah on vale vastus.
Iga foto peaks olema kärbitud ja selle suurus veebisaidi kujunduses paigutamiseks. See tagab, et fotod näevad välja sellised, nagu need on mõeldud, ja te ei jää fotode pealmistest puududest peadest või elementidest (või mõlemast küljest).
Projekti tagaküljele kulub natuke rohkem aega, kuid see on vaeva väärt. (Eriti kui töötate liugurite või galeriidega.)
3. Kasutage liugurit või galeriid
Konteineri kasutamine piltide (nt liuguri või galerii) jaoks aitab teil veebisaidi kujunduses paremini reageerida tundlikele piltidele. Eriti kui kasutate tuntud ja väljakujunenud kolmanda osapoole tööriistu, tehakse suurem osa rasketest tõstetest teie jaoks selle tagamiseks, et need elemendid töötaksid ettenähtud viisil.
Kaks eelmist näpunäidet on eluliselt olulised isegi liug- või galeriielementide kasutamisel; Kuvasuhted ning suuruse ja skaleerimise mõisted kehtivad endiselt.
Kas pole kindel, millist võimalust kasutada? Valige liugur, kui teil on käputäis suurepäraseid pilte, mis töötavad suuremates suurustes. See on populaarne variant veebilehe ülaosa või kangelase jaoks. Valige galerii, kui teil on palju pilte, mille saab muuta väikeseks ilma loetavusprobleemideta. See sobib hästi portfellide või veebisaitide jaoks, kus on palju pilte esitleda.
4. Hoia võimalusel tiitritest eemal
Tiitrid võivad olla suurepäraseks vahendiks pildi infole lisaväärtuse lisamiseks, kuid võivad tõepoolest veebisaidi toimimisele takistada. Vältige neid, kui suudate leida alternatiivse lahenduse, mis pole traditsioonilise pealdise kujul.
Suured tekstiplokid, näiteks pealdised, saavad küll suurtel ekraanidel ilusaks muuta, kuid väiksemates keskkondades tekitavad need suuri probleeme. Selle tagajärg võib olla rämps ja potentsiaalselt võivad kasutajad teie saidi hüljata. (Ja kuna enamiku veebisaitide jaoks tuleb mobiiltelefoni kaudu nii palju liiklust, võib see olla hukatuslik.)
5. Olge video ja piltide segamisel ettevaatlik
Teeme selgeks: on täiesti vastuvõetav, kui teie veebisaidil on video- ja pildielemente. Tõenäoliselt peaks see midagi tegema.
Kuid ärge segage videot ja pilte kujunduse samades elementides, näiteks pange video- ja pildielemendid samasse liugurisse. Mõnikord õnnestub teil ja see töötab nagu võlu. Teinekord jäetakse teile teatud seadmetes tühjad kastid, mis näevad lihtsalt imelikud välja.
Parim võimalus on anda igale erinevat tüüpi elemendile kujunduses oma ruum. See kehtib peaaegu kõigi kujunduselementide, eriti piltide ja video kohta.
6. Lõika mittevajalikud elemendid
Liugurite ja galeriide üks suurimaid probleeme on see, et liiga sageli paneb disainer konteinerisse liiga palju rämpsu. Seal on navigeerimise nooled, juhtnupud, tekst, tegevusele kutsumised ja loend jätkub.
Üldiselt saavad kasutajad aru, kuidas liuguri abil suhelda. Kui te ei tee midagi täiesti seina äärest, pole teil vaja kahte kihti navigeerimist, mis näitab kasutajatele, mida teha. Ühte rida nuppe või nooli on palju (kui neid üldse vaja on).
Lisage ainult neid elemente, millega kasutajad peavad suhtlema. Kui pildigalerii või liuguri eesmärk on panna kasutaja klõpsama / koputama üleskutsele, peaks see olema fotol ainus võimalus. Hoidke see lihtne. Ärge pakkuge liiga palju võimalusi. See võib teie konversioonimäärasid tegelikult aidata.
7. Kasutage ainult kvaliteetseid pilte
See on peaaegu iseenesestmõistetav, kuid juhtub ikka liiga sageli. Kui teil pole tähepilti, siis ärge kasutage seda pilti üldse. Kvaliteetsed ja kõrge eraldusvõimega pildid on tähtsamad kui kunagi varem. Kasutajad ei kavatse raisata aega pikslite või halbade piltidega veebisaiti otsides (ja tõenäoliselt ei usalda teid, kui kvaliteet on madalam).
Suur hulk kasutajaid vaatab teie veebisaidi kujundust kõrge eraldusvõimega ekraanidega seadmete abil; nad ootavad tipptasemel visuaale. Peate toimetama.
Mõned pildivormingud muutuvad, et rahuldada neid kõrge eraldusvõimega vajadusi, pakkudes samas tihendatud pilte. Uurige end vormingutes - Google'i arendajad on hea koht alustamiseks - teadke, milliseid ekraani eraldusvõimet kõige sagedamini kasutatakse, ja harjutage salvestama faile viisil, mis oleks kasutajatele kõige paremini edastatav.
Järeldus
Me kõik tahame luua veebisaite, millega kasutajad tunnevad vajadust suhelda. Tugevad pildid on selle võrrandi põhiosa. Samavõrd oluline on see, et need muutuksid seadmest sõltumata hästi.
Planeerige pildiruumid, mis töötavad erinevates suurustes seadmetes, kui olete veebisaidi kujundamise projekti ettevalmistamise etapis. Võib juhtuda, et on olemas midagi, mida antakse ja võetakse, eriti pildi kuju osas, kuid pikas perspektiivis teete need otsused varakult ja looge selline järjepidevus pikaajaliselt teie saidi kujundusele.
