9 Responsive Image Galleriesin keskeiset säännöt
Responsive design on välttämätön ja välttämätön osa web-kehitystä. Yksi suurimmista kysymyksistä, joilla reagoiva web-suunnittelu on myöhässä, on ollut kuvia. Monet keskustelevat parhaasta tavasta näyttää kuvia reagoivalla sivustolla. Ja mitä sitten kuvagallerioista?
Kuvagallerioissa on paljon monimutkaisempaa kuin yksittäiset kuvat; on vielä enemmän muuttujia ja asioita ajatella, kun toteutetaan koko herkkiä kuvagallerioita verkkosivustollasi. Katsotaanpa joitakin hyödyllisiä vinkkejä reagoivien kuvagallerioiden toteuttamiseen oikealla tavalla.
1) Kuvaesitykset: piilota Nav aina kun se on mahdollista
Sinulla ei ehkä ole navigointielementtejä tablet-laitteessa tai mobiililaitteessa, mutta työpöydällä on hyvä piilottaa nämä elementit, kunnes ne ovat tarpeen. Kohteita kuten eteen- ja taaksepäin suunnatut nuolet ja navigointipisteet on asetettava näkyviin vain, kun joku liipaisee liukuvan kuvagallerian yli. Tämä välttää häiriötekijöitä, ja vältät ristiriidat sisällön ja nav-elementtien välillä. Koko kokemus tuntuu vähemmän hämmentyneeltä.
2) Vältä liian monta muotokuvaa
Jos toteutat galleriaa, joka on kuvaruudun verkko, haluat valita maisemakuvan tai neliön, jos mahdollista. Tämä helpottaa niiden katselua pienellä näytöllä. Pystykuvien kuvat olisivat hienot älypuhelimessa pystyasennossa, mutta maisemasuuntaisen puhelimen laaja katselualue vaikeuttaa pystykuvien katselua. Maisema on paras, mutta voit asettua neliöön, jos maisema ei ole vaihtoehto. Kaikki kuvat voidaan asettaa katselualueelle sopiviksi, mutta maisemakuvan pystysuuntaiset kuvat näyttävät hyvin pieniltä. Kuviasi ei katsota yhtä tarkasti kuin neliö- tai maisemakuvat, jotka täyttävät näytön suuremman alueen ja näkyvät suuremmina. Kun valitset kuvia, pidä mielessäsi henkilö, joka katsoo ne.
3) Käytä eleitä tablet-laitteissa ja mobiililaitteissa
Ihmiset rakastavat käyttää eleitä kosketusnäytöllä. He tuntevat olevansa voimakkaampia, kun tuntuu siltä, että he liukuvat kuvaa, koska kokemus on enemmän immersiva. Yritetään napauttaa pieniä nuolia tai navigointipisteitä mobiililaitteessa liian tylsiä. On paljon luonnollisempaa pystyä ottamaan sormesi ja pyyhkäisemään kuva ylös, alas, vasemmalle tai oikealle.
4) Vältä lightboxeja: estä ne käytöstä mobiililaitteilla
Jos sinulla on kuvia tuotteista, kuten koneita tai esineitä, joita on tarkasteltava tarkemmin (kangas, jalokivi jne.), Niin lightboxilla on suurempia kuvia. Silloinkin niitä pitäisi käyttää vain työpöydällä. Kun hajoitat tablet-laitteiden ja mobiililaitteiden näyttökoot, lightboxien käytöstä poistetaan. Ne voivat aiheuttaa useita käyttäjäkokemuksia. Jos jotain tapahtuu, ja valokuvake ei koota oikein, he eivät välttämättä pysty käyttämään poistumispainiketta tai kuvat eivät ehkä näy oikein.
5) Käytä nav-elementtejä, jotta ne ovat huomaamattomia
Jos sinulla on liukuva kuvagalleria, jossa on huomattava määrä dioja, navigointi on järkevää. Et halua, että käyttäjät odottavat, että he voivat käydä läpi kaiken. He voivat helposti napsauttaa omalla nopeudellaan, päästä sisään, saada mitä tarvitsevat ja päästä ulos. Kun käytät näitä elementtejä, varmista, että aseta ne paikalle, joka on poissa tieltä. Sinulla ei ole navigointipisteitä tekstin tai muiden linkkien kautta. Vältä myös liian monimutkaisia kontrolleja. Nämä vievät paljon tilaa, häiritsevät käyttäjiä sisällöstä ja luovat tylsää ulkoasua. Ottamalla pisteitä, joita käyttäjät voivat napsauttaa, selata tai ohittaa tiettyjä kuvia, ja eteen- ja taakseinä on paljon. Älä liioittele sitä!
6) Älä sekoita kuvia ja videoita
Erilaisten medioiden sekoittaminen on yleensä okei, mutta videosekoitusten sekoittaminen, jos niitä ei odoteta, voi aiheuttaa ongelmia. Et halua, että käyttäjä aloittaa vahingossa videon, joka soittaa kaikkien kuuntelevan äänen. Erilliset videot ja kuvat, joten he tietävät, mitä odottaa. Kukaan ei pidä tällaisia yllätyksiä.
7) Varmista, että kuvat eivät skaalaudu niiden enimmäisleveyden yläpuolelle
Tämä on tärkeää, koska voit välttää kuvapisteiden skaalausta, joka on liian pieni tilaa varten. Kuvien on oltava riittävän suuria, jotta ne täyttävät 100 prosenttia mobiililaitteesta (useimmissa tapauksissa), mutta työpöydän kokoisten sivustojen pitäisi asettaa vain suurin leveys 100 prosenttiin. Olen nähnyt joitain tapauksia, joissa jollakin on yksi näistä suurista 27 "-näytöistä, ja kun he vetävät selaimen leveyden, kuva heilautuu sen kanssa ohi suunnitellun koon mukaan.
8) Kuvan skaalaus
Jos sinulla on kuvan mittakaava, varmista, että ne laskevat alas eikä ylöspäin. On parasta määrittää tarkat mitat kuville. Monta kertaa prosenttiosuutta käytetään yhtä ulottuvuutta, kun taas toinen ulottuvuus on asetettu automaattiseksi. Jos haluat esimerkiksi, että kuva kattaa 50% selaimen leveydestä, määritä kuvan leveys 50 prosenttiin ja korkeus automaattiseksi .
9) Vältä kuvaesitysten käyttämistä
Kuvan kuvatekstit tai muu siihen liittyvä teksti voivat aiheuttaa kaikenlaisia ongelmia sinulle ja käyttäjille. Ensimmäinen ongelma on se, että teksti on vaikea sovittaa mobiililaitteeseen. Älypuhelimilla on vain rajoitetusti tilaa, mutta tekstin lisääminen voi tehdä koko kokemuksen tylsistyneeksi ja kootuksi yhteen. Toinen asia on se, että sinulla on vain rajoitetusti käytettävissä olevaa tekstiä. Tekstin lisääminen tai ylimääräinen teksti lisää reagoivan tekstin muuttuja sekaan. Sinun on harkittava sanaaikoja ja kuinka monta tekstiriviä päätyy etsimään kuvaasi. Jos tekstiä käytetään peittokuvana, sinun on myös huolehdittava siitä, missä kuvassa on kuva. Vaalea teksti valokuvan valossa kuvaa tekstin lukemattomaksi. Kontrasti on avain, ja jokainen kuva on erilainen.
johtopäätös
Alhaalla, kun se tulee alas mihin tahansa osaan web design on, että se on toimittava hyvin, ja on käyttäjän mielessä. Jos kukaan ei voi käyttää verkkosivustoasi, he eivät tule takaisin. Näiden yksinkertaisten tiedostojen ja vastaamattomien kuvagallerioiden seuraaminen tekee siitä, ettei käyttäjät pääse yhteisiin ongelmiin kuvien katselemisen aikana.