Trīs veidu attēli, kas vislabāk darbojas tīmeklī

Vizuālajā stāstījumā jūs parasti lietojat trīs dažādus attēlu veidus: ikonu attēlus, simboliskus attēlus un indeksētus attēlus. Nav viena veida attēla, kas būtu vispiemērotākais tīmekļa dizainam. Katru no tiem var izmantot, bieži vien vienlaikus vienā un tajā pašā projektā, lai sasniegtu vēlamos rezultātus.

Apskatīsim katra attēla veida īpašības, pēc tam pārbaudīsim labākos lietošanas scenārijus.

01. Ikonu attēli

Attēlu pieklājīgi no Amerikas Savienoto Valstu Transporta departamenta



Attēlu pieklājīgi no Amerikas Savienoto Valstu Transporta departamenta

Kā aprakstīts Vizuālo stāstnieku tīmekļa dizaina ceļvedis , ikonu attēli ir uzreiz atpazīstami un cieši saistīti ar noteiktu jēdzienu. Viņi arī parasti ir ļoti burtiski attēli, tāpēc pat kāds, kurš ar tiem nepazīst, var secināt vispārēju nozīmi. Viņi izskatās kā viņi domā.

Padomājiet par vīriešu un sieviešu tualetes simboliem. Cilvēka figūra biksēs vai kleitā ir diezgan viegli interpretējama neatkarīgi no tā, vai jūs kādreiz esat redzējis šos attēlus vai nē, vai arī to nozīme jums kādreiz ir izskaidrota.

Arī ikonas, piemēram, bultiņas, ratiņkrēsli un ikonas, kas ir vienkāršotas fizisko lietu formas, bieži tiek pakļautas ikonu attēliem. Ikonu kopas (piemēram, UXPin bezmaksas ikonu pakete ) bieži ir lielisks ikonu attēlu avots, jo tiem jābūt acīmredzamiem un viegli interpretējamiem ar vai bez teksta etiķetēm.

Diagrammas, diagrammas un zinātniskas ilustrācijas ir ikonisku attēlu piemēri. Viņi ļoti burtiski atspoguļo informāciju tādā veidā, kuru ir grūti nepareizi interpretēt (kas ir ikonu attēla stūrakmens).

Padomājiet par ikonām, ar kurām jūs, iespējams, sastopaties tīmeklī vai lietojumprogrammā:

  • aploksnes, lai norādītu e-pastu
  • atkritumu tvertne, kas norāda kaut ko izdzēšot
  • māju, lai norādītu mājas lapu
  • disks, kas norāda kaut ko saglabāt
  • atzīme, kas norāda uzdevuma izpildi

Neatkarīgi no iepriekšējas iepazīšanās ar šīm ikonām noteiktā vidē, lielākā daļa lietotāju varēs izglītoti uzminēt, kas tiek aktivizēts, noklikšķinot uz šīm ikonām.

Kaut arī daži ikonu attēli, iespējams, ir sākušies kā simboliski (vairāk par simboliskiem attēliem nākamajā sadaļā), daudzi tagad ir tik plaši atzīti, ka ir kļuvuši ikoniski.

kā novērst izkropļojumus

Kā redzat no dažām ikonām, kas pieejamas prototipēšanas lietotnē UXPin , mapes ikona ir diezgan plaši atzīta par faila atvēršanas simbolu, taču pati mape to nenorāda bez tās ilgstošās kultūras asociācijas.

Ikona ir rezultāts tam, ka attēls kļūst par daļu no galvenās kultūras

Ikona ir rezultāts tam, ka attēls kļūst par daļu no galvenās kultūras

Tas pats attiecas uz bieži redzamo “zobrata” ikonu, lai piekļūtu iestatījumiem, kā arī augšupielādes (kas parasti ietver bultiņu uz augšu) un lejupielādes (ietver bultiņu, kas vērsta uz leju) ikonas un daudzas citas.

Tas ir kopīgs rezultāts, kad attēls kļūst par galveno kultūru: tā nozīme var kļūt tik fiksēta, ka tā tiek vispāratzīta, pat ja sākotnēji šī nozīme bija jāapgūst. Kā aprakstīts Tīmekļa lietotāja saskarnes dizaina paraugprakse , jums nav nepieciešams vienmēr pārvarēt jaunu radošo pamatu: izmantojiet plaši atzītas ikonas, lai izveidotu izpratni par pamatu, pēc tam pievienojiet radošo uzplaukumu pēc nepieciešamības.

Jāņem vērā viena lieta: ne visas ikonas ir ikoniskas. Daži joprojām ir jāpaskaidro, pirms tie tiek pareizi interpretēti (pazīstami kā nepārprotami apzīmētāji.

Dizaineri dažreiz izvēlas izmantot ikonas, kas pielāgotas viņu pašu vietnes noformējumam vai tēmai, taču šāda veida ikonas skaidrības labad, iespējams, būs jāmarķē, jo tās ir tikai simboliskas. Vismaz etiķetei vajadzētu parādīties, kad tie ir novietoti virs kursora. Gadījumos, kad vēlaties, lai lietotāji uzreiz atpazītu ikonas nozīmi, pielīmējiet attēlus, kas patiesībā ir ikoniski.

02. Simboliski attēli

Simboliskie attēli ir abstraktāki nekā ikoniski attēli, un bieži vien viņi vairāk dara sajūtu vai vispārēju ideju, nekā konkrēts konkrēts objekts. Simboliski attēli ļoti bieži ir redzami logotipos, jo tie pastiprina jūtas, ko zīmols vēlas nodot.

Piemēram, Microsoft Windows logotips ir abstrakts loga attēlojums, bet tas nav tieša interpretācija. Kāds varētu to interpretēt, lai attēlotu kaut ko citu, it īpaši, ja viņi nāk no kultūras, kur biežāk tiek izmantots cits loga stils.

Simboliskajiem attēliem parasti ir jāmāca to nozīme. Tie nav uzreiz atpazīstami, jo nav burtiski. Kamēr nozīme nav iemācīta, tās var būt plaši interpretējamas.

Attēlu pieklājīgi no Microsoft Windows

Attēlu pieklājīgi no Microsoft Windows

Tā vietā tiek izmantoti simboliski attēli semiotika - vizuālā gramatika - lai nodotu nozīmi vairāk nekā ikonu attēli. Simboliskie attēli ir vizuālas metaforas, un šīs metaforas bieži jāapgūst, lai tās pareizi interpretētu.

Protams, daudzi simboli tiek atpazīti kultūras līmenī, pateicoties to kopīgajam lietojumam, kas saistīts ar konkrētām lietām vai idejām.

Viens piemērs varētu būt ceļa zīmes, piemēram, apstāšanās zīmes (kas lielākajā daļā valstu ir astoņas, bet Japānā - tikai trīspusīgas un vairāk līdzinās ASV “ražas” zīmei, un daudzās citās valstīs zīme ir aplis ar trīsstūris tajā). Un, ja jūs pajautātu kādam no vienas valsts, ko nozīmē citas valsts ceļa zīmes, iespējams, ka ievērojams to skaits kļūs nepareizs.

Attēla pieklājīgi no UXPin

Attēla pieklājīgi no UXPin

Tas ir tāpēc, ka šie attēli ir simboliski, nevis ikoniski. Viņu nozīme ir jāmāca, un to pamatā bieži vien ir kultūras asociācijas, nevis universālas izpratnes.

Viens piemērs tīmekļa dizaina pasaulē ir hamburgera izvēlnes ikona. Lai gan tas nedaudz atgādina izvēlni, attēls ir pārāk abstrakts, lai to varētu precīzi saukt par ikonu. Rezultātā, viens pētījums faktiski konstatēja, ka tā interpretācija ir atkarīga no vecuma. Faktiski 80 procenti lietotāju vecumā no 18 līdz 44 gadiem saprata tā nozīmi, bet tikai 52 procenti vecāku lietotāju.

03. Indeksiskie attēli

Indeksiskie attēli saista nozīmes starp attēla izskatu un attēlošanu. Piemēram, termometrs, kas parāda, ka tas ir zem nulles, norāda, ka kaut kas ir auksts.

Indeksiskie attēli ir daži no visbiežāk sastopamajiem attēliem reklāmā un dizainā. Mums ir tendence izvairīties pārāk burtiski attēlot lietas, bieži vien tāpēc, ka mēs dodam priekšroku emociju izsaukšanai, nevis burtiskas informācijas nogrūšanai lietotāja rīklē.

Apsveriet šos divus piemērus:

  • Skumjām vai jūs izmantotu attēlu, kurā redzams, kā cilvēks raud (burtiski), vai tumšu, mākoņainu dienu, kad lietus līst un bērnu velosipēds sēž neizmantots un izmērcēts priekšējā pagalmā (emocionāls)?

Attēla pieklājīgi no Volkena Olmeza: https://unsplash.com/volkanolmez

Attēla pieklājīgi no Volkena Olmeza: https://unsplash.com/volkanolmez
  • Lai izsauktu laimi, vai jūs izmantotu attēlu, kurā kāds smaida (burtiski), vai mīlīgs kucēns, kurš spēlē smiltīs (emocionāls)?

Attēlu pieklājīgi no Andrew Pons: https://unsplash.com/a_pons

Attēlu pieklājīgi no Andrew Pons: https://unsplash.com/a_pons

Abi attēlu veidi norāda uz emocijām, taču pēdējais piemērs katrā no tiem, visticamāk, liek lietotājam kaut ko sajust, nevis tikai domāt par emocijas vārdu.

Pieņemsim, ka jūs vēlaties izraisīt cilvēku nostalģiju, kad viņi apmeklē jūsu vietni. Ir vairāki veidi, kā to izdarīt, taču, sākot ar attēliem, kas šo sajūtu raisa bez kliedziena “NOSTALGIA”, ir laba vieta, kur sākt. Ja jūsu mērķauditorijai, visticamāk, ir 30 gadi, varat izmantot attēlus, kas atsaucas uz 80. gadiem, jo ​​tas bija laiks, kad jūsu auditorija auga.

To pašu efektu var sasniegt ar abstraktākiem vizuāliem elementiem, piemēram, krāsu paletēm. Izmantojot neona krāsu paleti, kas atgādina 80. gadu beigas un 90. gadu sākumu, nekavējoties radīs daudz atšķirīgāku iespaidu nekā krāsu palete ar rozā rozā un klusinātām akvām, kas biežāk bija sastopama 1950. gados.

Kurš darbojas vislabāk?

Visiem trim attēliem ir sava vieta labā dizainā. Tāpat kā ar visām projektēšanas metodēm, tas viss ir atkarīgs no jūsu projekta parametriem. Bet tas nenozīmē, ka nav labu pamatnoteikumu.

Veidojot savas vietnes navigācijas pamatstruktūru, visticamāk, vēlēsities palikt pie attēliem, kas ir ikoniski vai kas šķērso līniju starp ikoniskiem un simboliskiem. Jūs nevēlaties, lai jūsu apmeklētāji aplūkotu noteiktu attēlu un domātu, kas notiks, ja viņi noklikšķinās uz tā.

Šī iemesla dēļ grafikai, piemēram, ikonām, kuras izmanto navigācijai, jābūt universāli atpazīstamai un tik tuvu ikoniskai, cik vien iespējams pārvaldīt. Ikonu izvēlei ir daudz iespēju, neatkarīgi no tā, vai vēlaties veidot pats vai izmantot iepriekš sagatavotu komplektu. Vienkārši pārliecinieties, ka atrodat komplektu, kuru apmeklētājiem ir viegli interpretēt, un nebaidieties marķēt, ja tas nav uzreiz skaidrs.

Attēla pieklājīgi no Luhse Tea, http://www.luhsetea.com/

Attēla pieklājīgi no Luhse Tea, http://www.luhsetea.com/

Lielā mērā ikonu attēlu atrašana, kurus vēlaties izmantot savā vietnē, ir vienkārša. Ir tikai tik daudz lietu, kas burtiski atspoguļo to, ko vēlaties pateikt. Visgrūtāk ir atrast pareizā stila attēlus, kas atbilst jūsu vispārējam dizainam.

Attiecībā uz citiem jūsu vietnes vizuālajiem elementiem, it īpaši saturam pievienotajiem vizuālajiem materiāliem, varat izmantot lielāku radošo brīvību. Varat izmantot abstraktākus attēlus, kas tiek skaidri parādīti kontekstā, ko izveidojuši citi jūsu vietnes attēli un cita veida saturs.

Attēla pieklājība no Messages for Japan, http://www.messagesforjapan.com/

Attēla pieklājība no Messages for Japan, http://www.messagesforjapan.com/

Jūsu lēmums izmantot simboliskāku vai abstraktāku indeksu attēlu ir atkarīgs gan no jūsu vietnes vispārējā stila un satura, gan no mērķauditorijas.

Viens veids, kā atrast indeksētus attēlus, ja neesat pārliecināts, kā tieši vēlaties nodot ideju, ir atslēgvārdu meklēšana fotoattēlu koplietošanas vietnēs, piemēram, Flickr vai akciju fotoattēlu vietnēs (noteikti izmantojiet attēlus ar atbilstoša licence ja jūs tos tiešām izmantojat savā dizainā, nevis vienkārši izmantojat meklēšanu kā iedvesmu).

Piemēram, ja vietnē Flickr meklējat vārdu “mīlestība”, jūs saņemat virkni attēlu, kas var attēlot mīlestību: sirdis, ziedus (īpaši rozes), Eifeļa torni, laimīgus pārus, satraucoši daudz kļūdu pārošanās attēlu, kā arī kā daži, kas tieši atspoguļo vārdu “mīlestība” dažādos plašsaziņas līdzekļos. Tas nodrošina labu sākumpunktu, lai atrastu vai izveidotu precīzus attēlus, kurus varētu vēlēties izmantot manā dizainā.

Attēlu pieklājīgi no Nikolasa Reimonda, https://www.flickr.com/photos/80497449@N04/

Attēlu pieklājīgi no Nikolasa Reimonda, https://www.flickr.com/photos/80497449@N04/

Cits piemērs būtu meklēt kaut ko līdzīgu “bailēm”. Jūs saņemat attēlus ar šausmu filmu ļaundariem, augstumiem, vardarbību, cilvēkiem, kuri, šķiet, baidās, dažādus dzīvniekus un līdzīgus attēlus. Ir skaidrs, kāda veida attēli apmeklētāja prātā varētu izraisīt bailes.

kas ir gudrs slānis fotošopā

Šāda veida pētījumi ir svarīgi, lai noteiktu, no kādiem attēlu veidiem jums vajadzētu izvairīties vizuālajā stāstījumā. Jūs, iespējams, nesaistāt konkrētu attēlu ar konkrētu ideju, taču, veicot nelielu pētījumu, var secināt, ka ievērojama iedzīvotāju daļa tomēr korelē.

Sastādiet spēles plānu

Veiciet brīvu saistību ar šiem jēdzieniem un izmantoto attēlu veidiem. Arī meklējiet attēlus, pamatojoties uz šiem jēdziena atslēgvārdiem, un sāciet domāt par to, kas varētu vislabāk darboties kopā, kā arī lietas, kuras noteikti vēlaties atstāt malā.

Ja vēlaties vairāk vizuālā noformējuma paņēmienu, apskatiet bezmaksas e-grāmatu Vizuālo stāstnieku ceļvedis tīmekļa lietotāja saskarnes dizainam . Tiek sniegts daudz padomu, analizējot 29 piemērus no tādiem uzņēmumiem kā Tesla, Fitbit, Microsoft, Squarespace, Foursquare un citi.

Vārdi : Džerijs Cao

Džerijs Cao ir satura stratēģis UXPin - stieples un prototipu veidošanas lietotne - kur viņš izstrādā lietotņu iekšējo un tiešsaistes saturu stiepļu veidošanas un prototipēšanas platformai.

Kā šis? Izlasiet šos!

  • 3 bezmaksas fotoattēlu meklēšanas rīki, kas atvieglo attēlu atrašanu
  • Kā sagatavot attēlus tīmekļa lietošanai
  • Paātriniet savu vietni, aizmiglojot attēlus