8 vietņu attēla kļūdas, no kurām jāizvairās
Lieli attēli, galerijas un ļoti smagi dizaini ir liela tendence tīmekļa dizainā. Lai maksimāli izmantotu šo estētiku, vēlaties pārliecināties, vai katrs jūsu vietnes attēls ir piemērots displejam un labi attēlo jūsu zīmolu.
Ir ļoti daudz kļūdu, ko dizaineri pieļauj, sākot ar tehniskiem jautājumiem un beidzot ar attēla kvalitāti. Bet, strādājot ar vietnes attēliem, jums nav jāiekļaujas vienā no šiem slazdiem. Šeit apskatīsim attēla kļūdas un to, kā tās labot vai no tām izvairīties. (Kā piemaksu šajā amatā mēs piedāvājam jautru un lielisku attēlu kolekciju no nāves līdz Fonda fotoattēla neseno objektu kolekcijai.)
Kļūda: milzīgu failu augšupielāde
Pilna izmēra attēli ir skaisti (un nepieciešami), kad runa ir par drukas darbiem, taču var rasties problēmas, kas saistītas ar tīmekli. Lieli attēli tiek ielādēti lēnām; lēns ielādes laiks liek lietotājiem pamest jūsu vietni.
Diemžēl ir viegli iekļūt slazdā. Daudzas aizmugures programmas ļauj augšupielādēt lielus attēlus, un, ja vien jūs tam nepievēršat uzmanību, jūs, iespējams, pat nezināt, ka faili tiek augšupielādēti neticami lielumā. Dažādiem attēliem dažādiem lietojumiem ir vajadzīgas atšķirīgas attēlu specifikācijas. Skatiet sava zīmola vai vietnes ceļvedi, lai jūs zināt, kādi ir jūsu vietnes kopējo tēlu apgabalu izmēri.
Domājot par attēliem, svarīgs ir arī faila tips. Lūdzu, nelietojiet tiff tīmeklim. Visizplatītākie un izmantojamie failu formāti ir PNG (datora ģenerēti attēli, piemēram, diagrammas vai logotipi vai, ja ir nepieciešama caurspīdīgums), JPG (fotoattēli) vai GIF (animācijas).
Risinājums: vienkāršs risinājums ir izmēru palielināšana rāmja dimensijā, kur tie parādīsies ar atbilstošu tīmekļa izšķirtspēju. Bet tur ir nedaudz vairāk. Saglabājiet katru attēlu, lai to optimāli izmantotu vietnē un lai kopīgotu to sociālajā tīklā. (Piemēram, Pinterest attēla platums ir 600 pikseļi; ja vēlaties, lai attēls būtu koplietojams, tam vajadzētu būt tādam.)
Kļūda: aizmirst apgriezt
Izmantojot milzīgus failus, vietne var tikt aizspiesta, tāpēc var izmantot pilna kadra attēlus, kas ir paslēpti uz ekrāna. Apgriešana palīdz parādīt vizuālos materiālus, kurus lietotāji redz, izveidojot noteiktu fokusa punktu, kas, iespējams, tur nav ar pilnrāmja attēlu.
Attēlu apgriešanas trūkums var radīt arī mazāk dinamisku vizuālo materiālu kaudzi, kuriem visiem ir vienādas formas un proporcijas. Vairāku kultūru un interesantu formu izmantošana attēliem var pievienot vizuālu intrigu vietnei.
Risinājums: pirms augšupielādēšanas apgrieziet attēlus atbilstošā izmērā vai dimensijā, lai katrs attēls tiktu padarīts vēlamais.
Kļūda: aizmirstot par sīktēliem
Ir vairāki veidi, kā rīkoties ar sīktēlu izmēru un tā izmēru. (Daudzi no tiem ir atkarīgi no jūsu aizmugures iespējām, tāpēc mēs neapgalvosim katra pamatotību.) Bet jums ir jāatceras atjaunināt un pievērst uzmanību vismazākajiem jūsu vietnes attēliem.
Pārāk bieži dizaineri aizmirst, ka sīktēli, attēlu priekšskatījumi un veidlapas būs jāatjaunina, mainot vietnes saturu.
Otra galvenā kļūda? Vāja attēla izmantošana sīktēlu izmērā, jo tas ir tik liels, cik tas var būt. Ja attēls ir slikts, vienkārši nelietojiet to. Neviens attēls nav labāks par sliktu attēlu.
Risinājums: ja attēli mainās un jūsu favons ir aktuāls, noņemiet vecos sīktēlus vai priekšskatījumus.
Kļūda: nav meklējami vārdi un meta dati
Digitālās fotokameras dažādos meta laukos ietaupa daudz informācijas, kas netulko tīmeklī. Izņemiet šo informāciju no attēliem un nomainiet to uz izmantojamiem datiem. Meklētājprogrammas nevar nolasīt attēlu saturu, tāpēc, lai attēli būtu meklējami, virsrakstā jāiekļauj aprakstoši vārdi, tagi un apkārtējais saturs.
Nederīgu attēlu nosaukumu piemēri:
- attēls1.jpg
- DSCN00023.jpg
- brilles% un% watch.jpg
Daudz labāks attēla nosaukums satur dažus aprakstošus vārdus, piemēram, brilles-un-skatīties-un-augu.jpg. Attēla taga norādei jāietver līdzīgs apraksts, piemēram, “priekšmeti uz pretspīles, pulksteņa un auga”. (Un pārliecinieties, ka vārdi ir pareizi uzrakstīti.)
Risinājums: izmantojiet stingrus nosaukšanas nosacījumus visiem vietnes attēliem un pāru attēliem ar saturu, kas attiecas uz katru vizuālo attēlu. Attēlu nosaukumos jāiekļauj aprakstoši vārdi, kas atdalīti ar defisēm.
Kļūda: nepareiza mērogošana vai stiepšanās
Nekas neizskatās dīvaināk, ja cilvēks ar izstieptu seju vai nepareizi mērogojamu attēlu. Attēlu izstiepšana vai nesamērīga mērogošana (kas var būt īpaši izplatīta, mainoties tēmai vai aizmugures daļai) ir nē. Katrs attēls ir jānobīdīt vertikāli un horizontāli ar attiecību 1: 1. Viss cits sabojā fotoattēla integritāti.
Risinājums: cieši novērojiet visas mērogošanas proporcijas un periodiski pārbaudiet savu vietni.
Kļūda: neplānojat vairāku ierīču izmērus
Adaptīvajiem dizaina ietvariem ir kāda ietekme uz attēliem. Formas vai lieluma izmaiņas no vienas ierīces uz otru vai pēc orientācijas padara svarīgu diktēt, kā attēli tiks parādīti dažādās ierīcēs.
Viena no izplatītākajām metodēm ir multivides vaicājumu izmantošana, lai plānotu šīs izmaiņas ierīcē. CSS ļauj attēliem piemērot noteiktus stilus, pamatojoties uz ekrāna izmēriem, un palīdz attēliem labi izlauzties, “nesalaužot” dizainu.
Risinājums: izmantojiet multivides vaicājumus reaģējošiem ietvariem un pārbaudiet attēlu atveidošanu vairākās ierīcēs.
Kļūda: tīklenes ekrānu ignorēšana
Nebija tik sen, kad standarta attēls ar 600 pikseļu platumu ar 72 ppi bija viss, kas jums nepieciešams vietnei. Bet ekrāni uzlabojas tādā tempā, kad tas tā vairs nav.
Atkarībā no jūsu ietvara katrā attēlā var būt ietverti vairāki attēli, kas saglabāti dažādiem ekrāna izmēriem un izšķirtspējai, ieskaitot tīklenes displejus. (Tīklenes displeju izšķirtspēja var atšķirties atkarībā no ierīces, bet ir ievērojami augstāka nekā standarta displejiem.)
Risinājums: iekļaujiet failus un multivides vaicājumus, kas ir īpaši paredzēti tīklenes displejiem. (CSS-triki var palīdzēt.)
Kļūda: pārmērīgi izmantota vai vispārīga māksla
Fotogrāfija var būt lielisks ātrs labojums, taču tā var izraisīt dažas neparedzētas sekas. Fotoattēli, kas tiek izmantoti pārāk daudzās vietnēs vai kuriem vienkārši ir vispārīgs izskats un izjūta, neradīs vizuālu attēlu, kas izveido savienojumu ar lietotājiem. (Jūs nevēlaties, lai jūsu vietne izskatītos kā jebkura cita, kas tur atrodas?)
Ja plānojat izmantot fonda fotogrāfiju, apsveriet attēlus, kurus varat rediģēt vai strādāt ar tiem interesantos veidos. Izvairieties no attēliem, kas izskatās pēc lietām, kuras esat redzējis citās vietās (apskatiet visu konkurentu vai līdzīgu vietņu attēlus).
Risinājums: apsveriet iespēju nolīgt fotogrāfu, lai izveidotu lielisku attēlu failu, kas raksturīgs tieši jūsu vietnei. Iekļaujiet vizuālos materiālus, kas saistīti ar jūsu uzņēmumu vai zīmolu un pareizajā veidā atspoguļo jūsu vietni.
Secinājums
Attēlu atlase un izveide vietnes projektam var būt viena no jautrākajām dizaina procesa sastāvdaļām. Rūpīgi izturieties pret katru attēlu un pikseļu, lai pārliecinātos, ka vietne darbojas labi un tajā ir attēli, kas piesaistīs lietotājus.
Vai jums ir kādi padomi vai triki, kas saistīti ar attēlu izmantošanu vietņu projektos? Mēs labprāt uzzinātu, kādi viņi ir. Dalieties ar viņiem komentāros.
