Favicons, ikone na dotik, ikone ploščic itd

Zakaj uporabljati ikone? Pri oblikovanju gre predvsem za komunikacijo med ljudmi: ni pomembno, kako zanimive in pomembne so informacije, ki jih predstavljate drugim, če vam ne uspe zadržati pozornosti obiskovalcev. Ko prvič obišče spletno stran, večina uporabnikov pregleda stran in išče zanimivo vsebino. Šele ko nekaj pritegne njihovo pozornost, začnejo brati. Ikone so preproste in učinkovit način uporabnika seznanite z vsebino vaše strani.

Ikone imajo enak psihološki namen kot prelomi odstavkov: vizualno razdelijo vsebino, zaradi česar je branje manj zastrašujoče. Dobro oblikovana stran z besedilom, razdeljenim na lahko berljive odstavke in poudarjenimi z ikonami, je lahko berljiva in dovolj zanimiva, da obdrži pozornost obiskovalca. Nehajte izgubljati čas s pisanjem ogromnih besedil, ki jih nihče ne bere. Začnite uporabljati ikone!

V tem članku bomo prikazali odlične primere in najboljše prakse uporabe ikon za podporo vsebine v spletnem oblikovanju.

1. Kako uporabljati ikone

Glavni namen uporabe ikon je pomagati uporabniku pri učinkovit proces zaznavanje in obdelava informacij. Običajno se cilji dosežejo s prostim prostorom in ikonami, ki ne odvračajo pozornosti od vsebine, temveč jo dopolnjujejo. Uporaba ikon obogati še tako minimalno vsebino, ji da težo in izboljša učinkovitost komunikacije brez nepotrebnih besed. Ikone je treba uporabljati za pritegnitev pozornosti na vsebino, nikoli pa za njeno zamenjavo.

Krepitev seznama funkcij

Kotiranje storitev je običajna praksa in nujen del učinkovitega marketinga, sam seznam pa je zelo banalen in dolgočasen. Zaradi uporabe ikon v kombinaciji s seznamom funkcij je bolj privlačen in informativen.

Opozoriti na nove funkcije spletne aplikacije

Ikone so vizualno vabilo, da preizkusite najnovejše in najboljše funkcije vaše spletne aplikacije. Ikone bi morale pritegniti pozornost vašega obiskovalca in ga usmeriti k novim funkcijam. Ko pritegnete pozornost obiskovalca, mu povejte o velikih priložnostih, ki so mu na voljo.


Seznam različnih aplikacij in izdelkov

IN v tem primeru ikono morate obravnavati kot logotip, pri čemer morate upoštevati, da je namen logotipa zgraditi miselno povezavo med izdelkom in sliko. Ikona mora biti edinstvena, a preprosta: večina ikon je velikosti 128 krat 128 px, zato morate uporabiti minimalističen pristop in z minimalnimi sredstvi povedati veliko.

primer:


Navedite svoje storitve in naredite seznam lažji za branje

Ikone morajo ustrezati vsebini in imeti preprosto obliko. Določite, kaj želite izraziti z vsebino in na podlagi tega ustvarite ikono. Kakšna je tema spletnega mesta ali članka? Katere barve se uporabljajo? Kakšen slog je to? Moderno? Klasično? Ikone morajo biti vizualno poenotene z idejami, izraženimi v vsebini.


2. Namen in postavitev

Ikone naredijo vmesnik spletne strani prijazen, vabljiv in profesionalen. Kažejo, da vam je sploh mar majhne podrobnosti. Pri delu z ikonami uporabite svojo domišljijo: glave, stranske vrstice, noge in seznami so odlična mesta za postavitev ikon.

Poudarjanje glav in nog za poseben videz naslovov

Tudi preprosta ikona lahko spletnemu mestu doda čar in osebnost.

primer:


Privabite svojega obiskovalca k branju dolge strani

Uporabite ikone kot točke v odstavkih. Ta pristop bo bistveno izboljšal berljivost tudi najdaljšega besedila.

primer:


Ločevanje naslovov in razdelkov

Uporabite ikone za vizualno ločevanje različnih delov besedila.

primer:


Velikost ni pomembna! Tudi majhne ikone so lahko učinkovite

Majhne ikone zagotavljajo enako raven vizualnega zanimanja kot velike ikone, vendar brez potencialna nevarnost preusmeriti pozornost. Prepričajte se, da so ikone lahko prepoznavne in da so po pomenu blizu besedilu, ki je poudarjeno.


Označite besedilo tako, da postavite ikone na desno stran odstavka

Ni potrebe, da bi se obesili na monotono postavitev ikon. Razporeditev ikon na desni strani besedila je manj pogosto uporabljena, zato je vizualno privlačnejša. Toda pozor, včasih je ta ureditev videti neurejena.


Spremenite velikost in postavitev ikon

Uporabite svojo domišljijo! Če spremenite velikost in postavitev ikon, bo vsebina bolj dinamična in zanimiva.


3. Izberite svoj stil

Ko gre za slog, morate imeti za cilj učinkovitost. Če vaš dizajn zahteva edinstvenost, potem bodo originalne ikone dobre za to, vendar je učinkovitost veliko bolj pomembna. Ne pozabite, da so ikone namenjene izboljšanju in dopolnjevanju vsebine in oblikovanja. Zato je še posebej pomembno, da ste pozorni na to, kako se vaše ikone ujemajo s preostalim delom vaše spletne strani. Ne kupujte kul ikon na spletnem mestu, kot je iStockPhoto. Veliko bolj pomembno je, da so ikone v istem stilu kot ostala vsebina spletnega mesta.

Pomembno je tudi, da se vse vaše ikone med seboj ujemajo. Združevanje različnih ikon, ne glede na to, kako kul so videti, je očitna napaka v oblikovanju in znak neprofesionalizma. Spodaj je nekaj primerov, kako je mogoče ikone učinkovito vključiti v slog spletnega mesta.

Uporaba svetle barve odlična 3D zasnova ikon pa se odlično dopolnjuje videz Spletna stran: GoodBarry



Uporaba neurejenega sloga za 2D ikone doda globino: Sprehodite se


Izbira edinstvenega in doslednega sloga naredi vaše spletno mesto dinamično in profesionalno: Squarespace


Enobarvne ikone lahko usmerijo pozornost na vsebino brez motenj: Studio 7 Designs


Izkoristite moč preoblikovanja preprostega gradientnega posnetka zaslona v edinstveno ikono: Gist


Ne uporabljajte ikone samo zato, ker je videti kul. Izberite tisto, kar najbolj ustreza slogu in blagovni znamki vašega spletnega mesta: Treemo


4. Dodatni primeri

Spodaj je nekaj primerov učinkovita uporaba ikone

Ikone prihranijo prostor in izgledajo sveže. Ikone so hiter odgovor na zapletena vprašanja:

  • Kako ga narediti lepšega?
  • Kako lahko to označimo?
  • Kako narediti bolj zabavno?

Radi imamo ikone. Dokler se ne začnemo zmedeni glede njih.

Obstajajo različne ikone: na izdelkih, v arhitekturi, na računalnikih, na seznamih, na gumbih, za splet in aplikacije, za iOS in Android. Ikone orodne vrstice, označene in neoznačene, stilizirane in standardizirane, barvne in enobarvne, v pisavah ikon, datotekah PNG ali SVG ...

Obstaja veliko brezplačnih in plačljivih kompletov ikon, vektorskih in rastrskih, ravnih in tridimenzionalnih, in če si zapišete pravila za delo z njimi, boste potrebovali debelejši zvezek. Prekletih ikon je toliko, da vas bo Hudič zlahka prepričal, da bo izvlekel še tako slab dizajn.

Vendar bodite previdni. Če je "ikona" vaš odgovor na katero koli vprašanje, bo nekega dne Don Norman potrkal na vaša vrata in ko jih boste odprli, vas bo pogledal globoko v oči in rekel:

»Nerazumljive ikone posejajo vmesnik, čeprav je znanstvena skupnost dolgo pokazala, da si ljudje zapomnijo pomene le majhnega števila ikon. Se spomnite pomena vseh teh ikon? Jaz ne".

S temi besedami je Don Norman poučeval svojega nekdanjega delodajalca Apple. Primere Apple iconotoxia najdete v iTunes, Mail in nadzorni plošči iOS.

Na Twitterju strašijo ljudi z ikonami iTunes, kot je Baba Yaga. Tukaj je odličen primer iz aplikacije Apple Mail za OS X: Koliko od teh ikon prepoznate brez podpisa?

Kaj vidimo v tem primeru? Le da ikone prihranijo prostor in izgledajo sveže. Namen gumbov ne postavlja vprašanj samo pri oblikovalcu, ki je ikone postavil na to ploščo. Za ikono se lahko skriva tisoč različne besede, in to glavni problem. Ko ima beseda tisoč pomenov, se bo le dobro razumevanje konteksta izognilo neskladjem. Tukaj so iste ikone, vendar z napisi:

Napisi pojasnjujejo ikone. Z njimi postane vmesnik bolj priročen. Zaradi tega nekateri brezsrčni ljudje trdijo, da je "najboljša ikona besedilo." Logično, pravilni podpisi rešijo pred zmedo. Zakaj torej ne uporabimo napisov brez ikon?

Funkcionalno je "samo besedilna" zasnova jasna kot beli dan (če so informacijski arhitekti kos nalogi), vendar se nekaj pokvari, ko odstranite slike iz vmesnika. Življenje ga zapusti. Neha biti svež in vesel. To ne zadeva oblikovalskega pozitivista. Skrbi pa druge ljudi. To hipotezo smo preizkusili z odstranitvijo ikon iz iA Writer. Odziv uporabnika je bil odmeven "Ne!"

Morda je bolje, da ne izbirate med besedilom in ikonami, ampak da razumete, kdaj uporabiti samo ikone, kdaj samo besedilo in kdaj ikone z napisi. Ugotovimo ...

Samo ikone

Ikone so slike. Slike olajšajo prikaz običajnih predmetov. Ikone, ki prikazujejo zlahka prepoznavne predmete, ki predstavljajo znane pojme, ne potrebujejo napisa. Na primer letala za letališča, človeške figure za stranišča, košare za mesta, kjer so shranjeni dokumenti, ki jih bomo kmalu zavrgli.

Lahko je upodabljati materialne predmete, vendar je treba prikazati dejanje oz abstraktni koncept povzročila škodo številnim oblikovalcem. Težava je v tem, da je v interakciji med človekom in računalnikom večina ikon dejanj in abstrakcij.

Pokaži pravo akcijo. Animirana ikona je moteča; bolje je uporabiti akcijsko metaforo. V kontekstu namizja računalnika ikona tiskalnika pomeni »Natisni«, koš za smeti pomeni »Izbriši«, škarje pa pomenijo »Izreži«. Vsak od teh predmetov ima en poseben namen, zato je nameravano dejanje lahko razumljivo.

To ne bo več delovalo s kompleksnimi dejanji in abstrakcijami. In ni upanja, da se bo v bližnji prihodnosti kaj spremenilo. V 40 letih interakcije med človekom in računalnikom nismo našli univerzalnih simbolov za osnovne funkcije, kot so shranjevanje, kopiranje in lepljenje.

"Pogosta težava s piktografskimi sistemi je, da je njihova edina omejitev število predmetov iz okoliškega sveta, ki jih je mogoče prikazati na sliki."

Gole ikone na funkcionalnih elementih vmesnika poslabšajo uporabnost. Najboljši način prijavi funkcijo - besedo, ne sliko. Še bolje, če je glagol.

»Ko gre za vedno nepopolno izmenjavo misli med ljudmi, je najboljša stvar, ki jo ljudje imamo za to, govor. Pisni govor daje mislim dolgotrajnost in natančnost (redko popravljamo svoje govorne vzorce, vendar sem ta stavek večkrat popravil).«

Vizualno so grafični simboli preprostejši in privlačnejši od gostih besed. Toda bolj ko se približujejo, bolj postajajo sirene podobne pošasti. Ko jih poskušate prebrati in razumeti, se spremenijo v skrivnostne znake iz jezika, ki ga ne poznate, zgrabijo interakcijo in ji odgriznejo glavo. Gole ikone izboljšajo videz vmesnika in zmanjšajo njegovo jasnost. Zakrijejo jasne funkcije in jih prekrijejo s plastjo temnih simbolov.

»Ikona je simbol, ki je enako nerazumljiv v katerem koli jeziku. Ne glede na to, katere jezike poznate, se boste morali naučiti pomena ikone. Ljudje niso kar tako prišli na to idejo fonetičnih jezikov, kjer je mogoče kombinirati več znakov, da ustvarite poljubno besedo. Veliko oblikovalcev me je prepričalo v uporabo ikon v vmesniku. Vprašal sem jih: "Ali je to res najboljši vmesnik, ki si ga lahko izmislimo, ali je le narejen iz navade?" Oblikovalci so preprosto obtičali v tej paradigmi in ne opazijo njenega zatona.”

Ikone izgledajo modno in kul rešujejo težave s pomanjkanjem prostora. Seveda Apple ni edini krivec za pretirano uporabo golih ikon. Googlov materialni dizajn je zastrupljen z blagovno znamko. Tukaj je Gmail za primerjavo:

Kaj vidimo tukaj? Gmailove ikone so videti preproste, vendar vas spodbudijo k razmišljanju o namenu gumbov. Če se malo osredotočite in skoncentrirate, boste lahko uganili. Čez nekaj časa vam bo pomagal mišični spomin, a kratkoročni in dolgoročni spomin jih bosta enako težko sprejela. V e-poštni aplikaciji morata biti koncentracija in osredotočenost usmerjena v razumevanje in pisanje besedila, ne pa v dešifriranje vmesnika.

nehaj! Ali Google ne meri vsega? Verjetno vedo, kaj delajo, kajne? Tam delajo znanstveniki. Ubrali so pristop ikon brez oznak in nikoli ne spodletijo. Torej, ikone so prave! Morda, toda tisto, kar deluje za Google ali Facebook, morda ne bo delovalo za nas. Kot je navedeno spodaj, je Google morda našel razlog zunaj naravoslovnih znanosti. Kakor koli že, Google ponuja tudi možnost golega besedila.

Samo besedilo

Slike je mogoče interpretirati na različne načine. Odvisno od konteksta se celo vseprisotno povečevalno steklo bere kot "iskanje" in "povečava". Pomen besede je odvisen tudi od konteksta, vendar se vedno bere enako. Kaj pa, če so ikone zamenjane z besedilom? Logično je, da bo tak vmesnik deloval bolje kot vmesnik z ikonami. V nastavitvah Gmaila lahko zamenjate vrstico z ikonami z besedilno različico:

Kaj se je zgodilo? Pomen gumbov je zdaj jasen. Toda vmesnik je postal manj človeški, manj zabaven. Spominja na delovno orodje, postalo je hladnejše in presenetljivo se zdi bolj zapleteno. Kako je to mogoče? Besedilni vmesnik je objektivno bolj priročen, vendar zaradi estetskih odtenkov ni zaznan kot tak.

Besedilo je racionalna izbira. Pravilno strukturirane in poimenovane funkcije so osnova interakcije med človekom in računalnikom.

Ikone so čustvena izbira. Prave ikone dodajo pozitivnost. Čustvenega vpliva ni mogoče izmeriti, vendar zaradi tega ni nič manj resničen.

»Ni dovolj ustvariti izdelkov, ki delujejo, so jasni in enostavni za uporabo. Ustvariti moramo izdelke, ki prinašajo veselje in vznemirjenje, veselje in zabavo ter seveda lepoto človeška življenja" - Don Norman v knjigi "The Design of Common Things."

Ljudje smo tako razumna kot čustvena bitja: »Možgani ne obdelujejo informacij, ne pridobivajo znanja in ne shranjujejo spominov. Na kratko: možgani niso računalnik.« Če je kaj dokazano na temo uporabnosti ikon, je to, da "ikone z napisi delujejo bolje kot samo ikona ali samo besedilo."

Ikona s podpisom

Ikona s podpisom je hkrati čustvena in razumljiva. Ikone z napisi vedno delujejo. Če ikona ni jasna, bo pojasnil napis. Zakaj torej ne bi uporabili tega zmagovalnega para?

Težava je v tem, da gre za kompromis. Zmanjša čustveno sporočilo ikon in preprostost čistega besedila. Ne prihrani prostora in ne okrasi videza. Zavzame več navpičnega prostora in ustvari več vizualnega šuma kot čiste ikone ali čisto besedilo.

Čustveno imamo raje ikone. Racionalno je za nas bolje, da ikone zamenjamo z besedilom. V teoriji je ikona s podpisom zmagovalna možnost. V praksi v oblikovanju ni srebrnih krogel.

Ni zmagovalnih možnosti, obstajajo pa boljši in slabši kompromisi. Delamo za ljudi. Ljudje čutijo in razmišljajo. Čeprav je bolje, da se ne spuščamo v relativizem.

Teorija in praksa

Kot katera koli druga tehnologija pomaga graditi vmesnike na vrhu racionalne, funkcionalne strukture. Oblikovanje ni naravoslovna veda. To je praksa, ki ima koristi od znanosti in meritev, vendar kakovosti oblikovanja ni mogoče oceniti zgolj z objektivnimi meritvami. Uporabniško testiranje in analitika ne nadomestita oblikovalcev, ampak preizkušata načrtovalske predpostavke. V izdelku je več, o čemer lahko oblikovalec razmišlja, in v dizajnu je več, kar lahko izmerimo. To »več« je mogoče ujeti samo s pogovorom z ljudmi, ki uporabljajo izdelek.

Interakcija človek-računalnik je zgrajena na racionalnih temeljih. Smo živa bitja, našega vedenja ni mogoče preračunati, lahko pa se z nami pogovarjate. Ikone, barve, ritem, zrak, tipografija in druge lepe stvari naredijo vmesnik prijetnejši in s tem izboljšajo interakcijo. Ne zdi se tako racionalen. Videti je kot človek.

Preprosta pravila

Ne hitite z dodajanjem ikon, če je kaj narobe z zasnovo, če menite, da ne deluje po načrtih. Ikone ne bodo popravile slabe strukture spletnega mesta. Dodajte jih čisto na koncu. Med delom na žičnem okvirju se ne igrajte z ikonami. Ena slika lahko skrije tisoč besed. Dobra informacijska arhitektura postavi prave besede v pravi kontekst. Preizkusite racionalni del, preden preidete na čustveni del.

Ikona označuje določen razdelek ali funkcijo. Predstavlja določeno besedo, ki izraža preprost in razumljiv pomen. Pomen sporočila je odvisen od konteksta. Tudi najlepša ikona bo neuporabna, če je izbrana beseda nejasna ali ne ustreza kontekstu. Preden izberete ikono, se vprašajte: Katero besedo bo predstavljala? to prava beseda? Je jasno? Bo delovalo v tem kontekstu? Ikona lahko skriva veliko različnih konceptov. Besede v kontekstu niso tako prilagodljive. Za razliko od ikon veljajo številna pravila.

Ko je vaša struktura pripravljena in je čas za ikone, veselje in druge stvari, sledite preprostemu pravilu: dodajte zahtevano najmanjše število ikon, vendar nič manj.

Z ikonami ravnajte zelo skrbno. Njihovo izboljšanje vam lahko vzame ves čas. Biti morajo prepoznavni sami po sebi, jasno morajo ilustrirati koncept, ki ga predstavljajo, in delovati v kontekstu z drugimi ikonami in koncepti.

Ikone so pridevniki in prislovi v navadnem besedilu. Če jih odstranite, vašega besedila ne boste spremenili v literarno mojstrovino. Odstranite nepotrebno, poiščite pravo, zamenjajte nejasne in pretenciozne formulacije z natančnimi in jedrnatimi.

Esej so napisali strokovnjaki iA.


Z ikonami se srečujemo vsak dan pri uporabi računalnika, saj... tvorijo osnovo grafičnih vmesnikov, ki se uporabljajo za sodobno programsko opremo. Te majhne slike se uporabljajo za predstavitev datotek (vključno s spletnimi stranmi) in programov ter za izvajanje ukazov.

Kako uporabljamo ikone?

Ikone so priročno nameščene na našem namizju ali v programih in počakajo, dokler jih ne kliknemo (enkrat ali dvakrat). Jih je enostavno prepoznati, predstavljajo priročen način neposredno pridete do želene funkcionalnosti, ne da bi se prebijali skozi zmešnjavo ukazov in menijev.

Običajno je dizajn povezan z namenom programa ali datoteke, s katero je povezana ikona. Na primer, ikona za e-poštni program lahko prikazuje ovojnico, ikona za večpredstavnostni predvajalnik pa lahko prikazuje glasbeno noto ali vseprisotno trikotno puščico, ki kaže v desno.

Kako so oblikovane ikone?

Kar zadeva njihovo strukturo, imajo ikone standardne velikosti, običajno precej majhne - od 16x16 do 48x48 slikovnih pik (na Macih - do 128x128, v sistemu Windows Vista - do 256x256). Ena ikona običajno vsebuje več slik, vključno s prosojnimi območji, tako da se skozi njo vidi ozadje namizja. Zaradi tega se zdi, da je ikona nad namizjem ali orodno vrstico, na kateri se nahaja.

Ikona vsebuje več slik različnih velikosti in barv, da Windows ali Mac OS omogoči uporabo najprimernejše za dano situacijo. Ta izbira je odvisna od načina, v katerem je računalniški monitor, in mesta, kjer naj se prikaže ikona. Na primer, ikone, prikazane v opravilni vrstici Windows, so običajno velike 16x16, medtem ko so ikone na namizju 48x48.

Kateri formati se uporabljajo za ikone?

Ikone za Windows imajo pripono "ICO", ikone za Mac pa pripono "ICNS", "RSC", "RSRC" ali "BIN". Ena ikona (vključno z vsemi različicami) je v eni datoteki, medtem ko so skupine ikon združene v knjižnice.

Kakšna je razlika med ikonami Windows XP?

Ikone za Windows XP imajo bogate barve in gladke robove, ki dopolnjujejo slog Windows XP. Njihovi robovi so običajno rahlo zaobljeni, vir svetlobe pa se nahaja v zgornjem levem kotu, medtem ko difuzna svetloba osvetljuje druge dele dizajna.

Prelivi, obrisi in sence se uporabljajo za dodajanje dimenzije in kontrasta ikoni. Nekatere ikone v XP imajo panoramski pogled, medtem ko so ikone, ki se uporabljajo za dokumente ali tiste, ki prikazujejo simbole ali posamezne predmete, obrnjene. Na splošno jih lahko opišemo kot sodobne in kakovostne.

V XP so ikone na desni strani menija Start velike 24x24, tiste v orodnih vrsticah pa 24x24 ali 16x16. Sistem podpira 32-bitne ikone, ki so pravzaprav 24-bitne slike z 8-bitnim alfa kanalom, zaradi česar so robovi ikon gladki in se zlijejo z ozadjem.

Ikone sistema Windows XP vključujejo tri barve za podporo različnih nastavitev monitorja: 24-bitno z 8-bitno alfa, 8-bitno (256 barv) z 1-bitno prosojnostjo in 4-bitno (16 barv) z 1-bitno prosojnostjo.

  • Prevajanje

Od prevajalca.
To je prevod članka Philipa Bernarda s css-tricks.com. Dovolil sem si izpustiti del članka z opisom dela s storitvijo, ki jo je ustvaril. Če najdete napake, jih sporočite v zasebno sporočilo.

Članek vsebuje rezultate njegove raziskave o tem, kakšen naj bi bil favicon (in kaj ga nadomešča), da bi bil v različnih primerih dobro prikazan.

Favicon je bil predstavljen leta 1999 v Internet Explorerju 5 (), W3C pa ga je standardiziral nekaj mesecev pozneje. Bila je majhna ikona, ki je predstavljala spletno mesto.

Od takrat je večina namiznih brskalnikov sledila trendu in na tak ali drugačen način uporabljala priljubljene ikone. Zelo preprosto je, kajne? Ustvarite majhno sliko in jo dodajte kateremu koli internetnemu projektu, da bo »popoln«. Nič zapletenega. ali ne?

Naredimo kviz!

Kaj je glavna datoteka favicon?

Odgovor: favicon.ico. Da se prepričamo, to ni PNG, preimenovan v favicon.ico. Čeprav nekateri brskalniki odpustijo to napako, je ICO drugačna oblika, ki podpira več različic slike.

Vprašanje: Kakšna naj bo velikost favicon.ico?

A: 16x16. Standardno.
B: 32x32. Ali ni bil favicon že pred časom posodobljen?
C: 64x64.
D: Nič od naštetega.

Odgovor: D.

Format favicon.ico je prvotno zasnoval Microsoft, podpira pa ga več drugih proizvajalcev. Microsoft priporoča velikosti 16x16, 32x32 in 48x48. Da, en ICO lahko vsebuje več slik.

Brskalniki običajno prikazujejo priljubljene ikone v zavihkih in pri običajnih ločljivostih je različica 16x16 videti dobro:

16x16 v zavihku Chrome. Zaenkrat gre dobro.

Toda ikona 16x16 je premajhna za druga mesta: opravilno vrstico in namizje.

16x16 v opravilni vrstici.


16x16 na namizju. Slabo.

Če ikona vsebuje več slik, je rezultat veliko boljši.

16x16, 32x32 in 48x48 favicon.ico v opravilni vrstici. Izgleda kot običajen program.


16x16, 32x32 in 48x48 favicon.ico na namizju. Popoln.

Vprašanje: Kaj je namen favicon.png?

Pravzaprav je pogostejša druga datoteka, favicon.png. Ljudje pogosto sprašujejo o tem.
Kaj je v resnici?

O: Ikona za brskalnike, ki ne podpirajo favicon.ico. Kot na primer Firefox, morda?
B: Ikona visoke ločljivosti. Veste, z vsemi temi novimi zasloni z visoko gostoto slikovnih pik.
C: Artefakt iz preteklosti. Zdaj so to nove ikone, na primer ikona Apple Touch.
D: Vse skupaj.

Odgovor: D.
Od sprejetja HTML5 favicon.ico ni zelo uporaben. Atribut je bil predstavljen velikosti, ki vam omogoča, da deklarirate več različne različice ista ikona in to so lahko datoteke PNG:

Kaj naj torej objavimo?

Priznajmo si. Čeprav skoraj vsi namizni brskalniki podpirajo favicon.ico, je ta datoteka zastarela. Da, še vedno lahko uporabljate to datoteko in vse bo delovalo, kot je predvideno. Ampak resno, to je zastarela oblika. Ne uporablja se nikjer razen na spletu. PNG je veliko bolje podprt.

Favicon.ico - za starejše različice IE. Za druge brskalnike in najnovejše različice IE uporablja ikone PNG. Pa kaj velikosti je treba določiti? Kmalu bomo izvedeli.

Vprašanje: Kateri format je potreben za podporo mobilnim platformam?

Po podatkih SmartInsights več kot 26 % spletnega prometa ustvarijo pametni telefoni in tablice. To je prihodnost. Kaj je potrebno za podporo temu svetu?

A: favicon.ico. Delovalo je pred 15 leti in deluje še danes.
B: ikone PNG. Rekel si, da boš o tem govoril.
C: ikona Apple Touch. kapa
D: Tukaj še vedno ni pravilnega odgovora.

Odgovor: D. Potrebujete ikone PNG. In ikona Apple Touch. In ploščice za Windows 8. In datoteka z imenom browserconfig.xml.

Mobilne platforme so veliko bolj heterogene kot navadni namizni brskalniki. Velikosti in ločljivosti zaslona se zelo razlikujejo in ni prevladujočega operacijski sistem, kot je Windows, kot je bil med pojavom interneta.
Posledica: Ne mislite, da je ikona za priljubljene mobilne naprave lahko ena univerzalna slika ali da ima univerzalno deklaracijo v kodi HTML.

Vprašanje: Kakšne velikosti naj bodo ikone PNG?

A: 96x96 za Google TV
B: 196 x 196 za Android Chrome
C: 228x228 za Opera Coast
D: Vse našteto

Odgovor: D, in še več. Na primer, 160x160 za stara različica Operino hitro klicanje (že dolgo ni več) ali 128x128 za spletno trgovino Chrome, vse je močno odvisno od platforme, ki jo boste podpirali.

Vprašanje: Kakšna je velikost ikone Apple Touch?

Ikona Apple Touch, ki jo iOS uporablja za zaznamke in spletna mesta na domačem zaslonu. 57x57 mi pride na misel, bravo. To je prav. Pred 7 leti je bil izdan prvi iPhone.

Odgovor: Do 180x180.

Po pojavu prvega iPhona so sledile 3 pomembne izdaje:

  • iPad. Z veliko večjim zaslonom.
  • Retina zasloni. Z dvojno gostoto slikovnih pik.
  • iOS7. Ravna zasnova je drugačna pri iPhone/iPad.
Skupaj je 9 kombinacij.
Naprava zaslon Različica iOS Velikost ikone
iPhone Klasična 6 in manj 57x57
7 60x60
Mrežnica 6 in manj 114x114
7 120x120
6Plus 8 in več 180x180
iPad Klasična 6 in manj 72x72
7 76x76
Mrežnica 6 in manj 144x144
7 152x152



Stara ikona Apple Touch velikosti 57x57 na sijočem Retina iPadu. Oblačno.


Velika ikona Apple Touch velikosti 152 x 152 na iPadu Retina. Previdno.

Če ste odgovorili napačno, ne bodite razburjeni. Od 5000 priljubljenih spletnih mest, ki ponujajo apple-touch-icon.png, jih manj kot 4 % naredi pravilno.

Nekateri bodo morda trdili, da vseh 9 slik v resnici ni potrebnih. Vendar bi morala biti vsaj glavna ikona Apple Touch velika 152x152. Retina iPad z operacijskim sistemom iOS 7 bo našel, kar potrebujete, mlajše naprave pa lahko zmanjšajo sliko.

Vprašanje: Ali je treba ikono Apple Touch prijaviti v HTML?

O: Ne vem. Nekaj ​​moramo odgovoriti!
B: Da. V nasprotnem primeru, kako jih bo iOS našel?
C: Ne. Apple ponuja priporočila, torej katera koli naprava iOSše vedno jih nosi.
D: Ne, ampak...

Odgovor: D... ampak tudi nekatere druge platforme uporabljajo ikono Apple Touch, zato je bolje, da jih deklarirate.

Naj se sliši še tako čudno, naprave iOS niso edine, ki iščejo ikono Apple Touch. Ker so bolj priljubljene in pogostejše od drugih ikon PNG visoke ločljivosti, jih uporabljajo nekateri brskalniki, kot je Android Chrome. Zato jih je bolje prijaviti, saj bo obiskovalec z združljivo napravo ali brskalnikom lahko uporabil enega od njih.

Vprašanje: Kako prijavim ploščico za tablične računalnike Windows 8?

O: Tablični računalnik Windows 8? Kaj je to?
B: favicon.ico. Zapuščina Steva Ballmerja.
C: Meta oznake. Dva msapplication-TileColor in msapplication-TileImage.
D: browserconfig.xml.

Odgovor: C za Windows 8 in IE 10, D za Windows 8.1 in IE 11. Tudi odgovor A je nekoliko pravilen.

Oglas za Windows 8.0 izgleda nekako takole:

Windows 8.1 in IE 11 pričakujeta več različic slik, navedenih v browserconfig.xml. Na primer:
#2b5797
Novi vmesnik Metro uvaja več novih načel oblikovanja, kot so "bele silhuete", ki jih uporablja večina vnaprej nameščenih programov.


Ploščice spletnega mesta v sistemu Windows 8.

Vprašanje: Kakšna je velikost kvadratne ploščice z logotipom 150x150?

A: 150x150. Ne znaš brati?
B: Drugo.

Odgovor: B, 270x270.

»Glavni urednik bloga GetGoodRank, spletni analitik, bloger.
Kako pravilno oblikovati in uporabiti ikone na spletnem mestu? Pogovarjamo se o preprosta pravila uporabnost ikon, ponuja pa tudi preprost kontrolni seznam za testiranje.«

Ikona je shematski element grafičnega vmesnika, ki označuje aplikacijo, funkcijo ali tematski del spletnega mesta/aplikacije. Ikone so preproste, jedrnate in učinkovite. Uporablja se za poenostavitev grafičnega vmesnika aplikacije ali spletne strani ter za poenostavitev in pospešitev komunikacije z uporabnikom ( človeška zavest obdela in »razume« grafiko velikokrat hitreje kot besedilo). Ikone so razvrščene glede na funkcijo, ki jo opravljajo:

  • Navigacijske ikone- uporablja se za označevanje funkcije: navigacijski puščici navzgor in navzdol za premikanje po dolgi strani, voziček za prehod v voziček, povečevalno steklo za aktiviranje iskalne vrstice.
  • Informacijske ikone- navedite temo rubrike. Na primer, prekrižana orodja pogosto označujejo razdelek s tehničnimi informacijami, zobnik označuje del z nastavitvami, stroj označuje podatke o dostavi, številke 24/7 označujejo 24-urni urnik dela itd.
  • Ikone za poziv k dejanju- pogosto se uporablja za označevanje očitnih dejanj. Na primer, na strani za prenos aplikacije debela puščica navzdol označuje poziv za prenos programske opreme, na strani izdelka plus označuje poziv za dodajanje izdelka v košarico itd.

Pravila uporabnosti ikon

Vse ikone niso enako razumljive uporabnikom, še posebej, če spletno mesto uporablja individualen slog in odstopa od splošno sprejetih standardov. Da bi ikone opravljale neposredno funkcijo poenostavitve oblikovanja in komunikacije z uporabnikom, upoštevajte naslednja pravila:

1. Spremno besedilo- različna spletna mesta celo uporabljajo standardne ikone za različne namene. Tako lahko standardna lupa pomeni iskanje po spletnem mestu ali povečavo/povečanje slike. Grafične simbole lahko razlagamo na dva načina. Za poenostavitev naloge uporabnika naj ikone spremlja besedilo. To večinoma velja za navigacijske ikone. Besedilo in grafika delujeta veliko bolje v paru kot vsak sam.

2. Enotni slog- ikone morajo biti izdelane v istem slogu. Bolje je uporabiti shematične slike z minimalno količino podrobnosti. Ikona mora biti zlahka vidna v celotnem konceptu oblikovanja in uporabniku lahko razumljiva. Ikone, ki opravljajo različne naloge na spletnem mestu, so lahko izdelane v različnih konceptih. Pri uporabi različnih grafičnih stilov pa se izogibajte pretirani raznolikosti. Ne pozabite, da je ikona zasnovana tako, da poenostavi uporabnikovo interakcijo s spletnim mestom in ne obratno, da ga prisili, da preuči funkcije, skrite v simbolih.

3. Razmerje med prikazi in kliki- ikone, za katere je na voljo dejanje, morajo vizualno prikazati možnost klikanja: označevanje pri premikanju kazalca, spreminjanje barve, povečavo. Tako bo uporabniku jasno, da je ikona funkcionalna in ne le element GUI. Uporabite animacijo na minimum.

4. Preizkus 5 sekund- pri razvoju individualnega koncepta ikone (z uporabo nestandardnih ikon) opravite test 5 sekund. Če v 5 sekundah ne morete prepoznati ikone in razumeti, kaj pomeni na spletnem mestu, potem je ta grafični simbol v oblikovanju nesprejemljiv. To bo ustvarilo dodatne ovire na poti uporabnika do cilja: preučevanje informacij na spletnem mestu, izbira izdelka / storitve.

5. Velikost je pomembna- premajhni simboli tvegajo, da bodo v dizajnu ostali neopaženi, prevelike ikone pa lahko zmedejo, prevladujejo nad drugimi elementi in pritegnejo pozornost nase (še posebej, če so velike ikone barvno poudarjene).

Kako preveriti uporabnost ikon

Uporabite naslednji kontrolni seznam vprašanj, da preverite uporabnost ikon na vašem spletnem mestu:

  • Ali je preprosto najti ikono na spletnem mestu ali vmesniku aplikacije?
  • Kako harmonično izgleda ikona v vmesniku? Ali ne krši celotnega koncepta oblikovanja?
  • Ali je ikona na mestu, ki ga uporabnik pričakuje?
  • Ali ikona odvrača pozornost od glavne vsebine strani?
  • Ali je uporabniku pomen ikone jasen?
  • Kako izgleda ikona na mobilni različici spletnega mesta? Ali je enostavno komunicirati z njim prek zaslona na dotik?
  • Ali je ta ikona povezana z drugimi dejanji, ki niso sosednja? Ali ne povzroča dodatnih težav pri uporabi spletnega mesta? Ali bo ikona povzročila napačna dejanja?
  • Ali je v tem kontekstu potrebna ikona, ki označuje, na kaj je pritrjena? Ali je mogoče brez tega?


 

Morda bi bilo koristno prebrati: