10 digitaalset ikooni kuldreeglit

Ikonograafia lisab üha suurenevale suhtlusportfellile hindamatut vara. Kui ikoonikujundus järgib hea disaini põhimõtteid, mängib see oma reegleid. Siin on kümme alustamiseks.

01. Kujundus meelega

Ikoonidel, nagu kõigil hea kujunduse elementidel, peab olema selge eesmärk. Enne kui isegi mõelda, milliseid ikoone soovite, peate endalt küsima: miks? Kui teie vastus on 'kuna nad on ilusad', siis peaksite enne edasi auramist kaks korda mõtlema. Visuaalselt ülerahvastatud digitaalses maailmas kaotavad ka kõige kaunimad ikoonid peagi oma sära ilma tähenduse ja eesmärgita.

Alustuseks vaatame navigeerimist. Facebook ja Twitter on suurepärased näited ikoonide navigeerimiseks väga lihtsast ja praktilisest kasutamisest. Ikoonide kõrval teksti olemasolu on kasutajate jaoks ülioluline. Liiga palju on juhtumeid, kus abstraktseid ikoone kasutatakse vastuolus tekstiga või ilma, või kus tavasid eiratakse, mille tulemuseks on see, et kasutajad ei leia otsitavat hõlpsasti. Näiteks Skype iPhone rakenduses on inimeste leidmiseks kasutatud kolme erinevat ikooni. Alumisel navigeerimisribal olev ikoon on iOS-i kontaktide pisipildiikooni muudetud versioon. Dialoogi kasutamisel kontaktide leidmise ikoon on märkmik, mille keskel on #. Ikoon Skype'i kasutajate leidmiseks, mis pole teie kontaktide loendis, on pea, õlad ja +. Eh?



Mis puutub kasutajaliidese kujundusse, siis kas loote liidese nullist või muudate olemasolevat, võivad ikoonid tuua teie kujundusse sidususe ja tähenduse. Kui kujundate poodsaiti, on iseenesestmõistetav, et teil on kassaikoon nähtaval kohal kuskil ekraani paremas ülanurgas, mitte ainult link. Võite seda nimetada kassaks, ostukorviks, oma kaupadeks või ostukorviks, kuid kooskõlas järjepidevuse põhimõttega peaks kasutatav ikoon kajastama selle nime.

Skype saadab kasutajad metshane tagaajamisele, pakkudes inimeste leidmiseks kolm erinevat ikooni

Skype saadab kasutajad metshane tagaajamisele, pakkudes inimeste leidmiseks kolm erinevat ikooni

Amazon nimetab seda korviks ja kasutab hübriidkorvi ja käruikooni. Majesteetlikud veinid ostukärul on minimaalse kuue pudeli ostupoliitika. Iga pudeli lisamise korral muudab üks kuuest hallitanud veinipudelist värvi, et teavitada teid, kui olete miinimumnõude täitnud. Armas. ASOS trotsib kokkuleppeid ja ei kasuta ikooni, nii et kasutajad peavad oma kraami ostmiseks natuke raskemad välja nägema.

UX üldisest pildist saab kasu nii detailidele tähelepanu pööramine kui ka ikoonide ja muude graafiliste elementide koostoimes õige tasakaalu leidmine. Liiga peen ja ikoonid võivad kaduma minna. Näiteks on Witcheri saidil olevad navigeerimisikoonid lehe allservas ja need on kujundusest täiesti rabatud. Kuid muutke ikoonid liiga silmatorkavaks ja need täidavad teie kujunduse, nagu ka Õlletehas Ommegang veebisait; ikoonidega suhtlemiseks on kulunud nii palju aega ja tähelepanu, kuid see ei vaja nii palju. Siin valitseb filosoofia 'vähem on rohkem'.

Ehkki tabelite mõte võib tekitada soovi küngastele joosta, võib ikoonide kasutamine ja tabelstruktuuris selge legend korrastada kohmetut teavet. Viiepäevane kokkuvõtlik BBC ilmaennustus on BBC Weather saidi kõige kohesem ja silmapaistvam omadus. Kasutades kogu maailmas arusaadavaid konventsioone, hoiab see isegi mööda legendi vajadusest.

Piiratud kinnisvara ja veelgi piiratuma tähelepanu korral võib digidomeeni ikonograafia kergesti muutuda omaette keeleks, kuid see oleks ohtlik mäng. Teksti elustamiseks kasutatakse nüüd piltide või muude graafiliste elementide asemel lihtsaid ikoone. The Sümbolid Veebisait demonstreerib lõbusat viisi jutustada lugu koos teksti ja ikoonidega. Veggie ikoonid on soojad ja vastutulelikud.

Sõltumata sellest, kas need on digitaalses või paberkandjal, muudavad ainult tekstijuhised raskeks lugemiseks. Sellist teksti on hõlpsasti mõistetav, lisades hea tempo ikoone. Õige tühimaht on osa võrrandist, kuid strateegiliselt paigutatud ikoonid pakuvad nii kokkuvõtteid kui ka täiustusi. Hinnake My Shizzle'i juhendikoonid voolavad koos eksemplariga, pakkudes täiendavaid teksti- ja graafilisi marsruute Shizzle'i edu saavutamiseks.

Emotikonid tulevad meelde, kui mainitakse meeleolu ja emotsioone. Kuid tunnete mõjutamine on palju peenem kui emotikonide kasutamine, mis muudab õigeks saamise keeruliseks. Eeldades, et olete oma värviteooria kontrolli all, on kõik seotud metafooridega. Kui antakse edasi vale tähendus, võivad asjad kohutavalt viltu minna. eHarmony ikoonid on mõeldud selleks, et äratada tänaseni soovi, kuid need on liiga kliinilised ja jätavad kasutajad külmaks.

02. Tunne oma publikut

Mõistmine, kuidas teie kasutajad teie ikoone tõlgendavad, tugineb mõnele alamreeglile.

  • Ära eelda : Me kõik teame, mis juhtub siis, kui me MINULE KINNISTAME.
  • Viis W ja üks H : Peate teadma, kes on teie kasutajad ja miks, mida, kuidas, kus ja millal nad teie teenust kasutavad.
  • Muutke metafoorid sisukaks: Te ei saa kogu aeg kõigile inimestele meele järele olla, kuid kui teie metafoorid ei anna teie kasutajate enamusele enam sama tähendust, siis leidke uued.
  • Mõelge kultuurinormidele: Enamikus maailma riikides mõistetakse pöidlahoidmist kui tunnustuse tunnust. Kuid Tais on see samaväärne sellega, kui kellegile oma keelt välja pista.
  • Kasutage sobivat keelt : Kui teenindate ainult ühte riiki või saate oma teenuse lokaliseerida, kaaluge keelevariante. Kui teie teenus on ülemaailmne, sobivad asjakohased ikoonid keelebarjääride ületamiseks.

Õlletehase Ommegang veebisaidil on rohkem ikoone, kui see tegelikult vajab

Õlletehase Ommegang veebisaidil on rohkem ikoone, kui see tegelikult vajab

03. Planeerimine on hädavajalik

Ikoonide loomine ja integreerimine üldisesse kujundusse nõuab hoolikat planeerimist ja detailidele tähelepanu pööramist.

Peate kaaluma järgmist.

  • Kus ikoone vaja on . Kaardistage, kus soovite oma kujunduses ikoone kasutada. Mõelge, kui lahutamatu on see teie kujundusega. Kas soovite neid kasutada ainult globaalsetes jaotistes, näiteks jaluses, või soovite neid kasutada vaheldumisi teatud sisutüüpidega, näiteks poodide lehtedel poodides?
  • Ikoonide kasutamise sagedus . Mõelge, kui palju ikoone kasutatakse rohkem kui üks kord või kui palju on vaja ühe ikooni variatsioone. Mõelge ikoonide erinevatele rakendustele. Oletame, et kasutate oma veebisaidil reageerivat kujundusraamistikku ja kujundate ka iPhone'i rakendust. Võimalik, et saate veebisaidil ja rakenduses kasutada samu ikoone või kõige parem on neid platvorme eraldi teenindada.
  • Kuidas ikoonid üldises kujunduses istuvad . Välimuse ja tunde osas peavad ikoonid töötama kogu liidese ulatuses. Sama tähtsad on otsused asukoha, suuruse ja kasutamise kohta. See hõlmab ka seda, kuidas teie ikoonid koos teiste graafiliste elementidega töötavad.
  • Kas tekstist piisab? Kui olete detailidega arvestanud, seiske tagasi ja küsige endalt, kas tekstist piisab. Kui tekst saab selle tööga hakkama, siis laske sellel. Internet on piisavalt täis nagu ta on.

Enne jätkamist peate tutvuma planeerimise ja töövoo põhiaspektidega.

1. etapp: plaan

Hoidke nigelad otsad teelt ja jätkake siis loomingulisusega. Esitage endale järgmised küsimused, mis aitavad teil planeerimist teha.

  • Mis sõnumit edasi anda? Kui olete nii kaugele jõudnud, on igal ikoonil, mille soovite luua, oma eesmärk ja nüüd on hädavajalik, et oleksite täiesti selge, kuidas soovite sel eesmärgil suhelda. Teie ikoon võib olla sõnasõnaline või metafooriline, kuid peate veenduma, et saate selle tähenduse õigeks.
  • Kas on olemas konvent? Olgu see sõna otseses mõttes või metafooriline, kui konventsioon on juba olemas, peaksite seda järgima. Kui konventsiooni pole, jätkake järgmise sammuga.
  • Mis on kontekst? Kontekst on nagu liim. Kui teie ikoonid on õiged, jäävad nad sellest kinni. Kui ei, siis jäävad need välja nagu valus pöial. Tõenäoliselt olete tuttav ehitusplatsidel kasutatava ohutusmärgiga, mis näitab, et tuleb kanda raskeid mütse. Kui võtate selle kontekstist välja ja asetate selle restoranis garderoobi ala kõrvale, võib külastajatele andeks anda, kui nad arvavad, et nad olid mõeldud mütsid kätte andma. Kuigi konventsioon on olemas, sõltub see kontekstist.
  • Kas see on arusaadav? See on puhas loogika, kuid pisiasjadesse sattudes võite perspektiivi kaotada. Kasulik on küsida, kas saidi eesmärk, sõnum, kujundus ja kontekst on sidusad.
  • Kas see on juba olemas? Pärast kõike seda võite leida, et sama või sarnane ikoon on teie kujunduses juba kusagil mujal kasutusel. Kontrollige ja kontrollige uuesti.
  • Kas saate ammutada inspiratsiooni mujalt? Surfake Internetis, vaadake raamatuid ja vaadake, mis on praegune, mis on aegunud ja mida teised inimesed teevad. Ma ei soovita teil teiste töid kopeerida; Soovitan teil ammutada inspiratsiooni kõikjalt, kust leiate.

2. etapp: disain

Ükskõik, kas kujundate 16-pikslist ikooni või 16-toalist maja, on visandipadja välja saamine loomeprotsessi oluline osa. Kui klõpsate sellel hiirel, piirdute loovuse olemasoleva riist- ja tarkvaraga. Muidugi oleks ilma riistvara ja tarkvarata mobiil- ja veebiplatvormide kujundamine võimatu, kuid ärge alustage digitaalselt.

Fondid, ikoonid, värvid ja stiilid peavad olema järjepidevad nende endi peredes ja harmoonilised laiemates peredes. Kui kõik elemendid töötavad ühel platvormil, on vaja sama tasakaalu kopeerida, nii et kõik üksikute platvormide kujundused moodustavad ka harmoonilise perekonna. Ka gradientid, varjud ja perspektiivid peavad olema järjepidevad.

Siin kaovad ikoonid lehe allosas oleva kujunduse keskel

Siin kaovad ikoonid lehe allosas oleva kujunduse keskel

Mõelge hierarhiliselt ja kaaluge kõiki elemente tähtsuse järjekorras. Lähenege sellele samamoodi nagu HTML-i päise pesastamisel ja rakendage tähtsuse tasemele õiged suurused, toonid ja läbipaistmatus.

04. Suurus on tõesti oluline

Loodavate tehnoloogiate, nagu SVG ja ikoonifondid, lubadus on veel realiseerimata, nii et praegu peame mõtlema suurusele ja mastaapsusele. Enamik ikoone väljastatakse .png-failidena, mis võimaldavad pikslite täiuslikkust ja on nende eelkäija .gif-i jaoks märkimisväärne edasiminek.

Kuid .png ei laiene, nii et te ei saa lihtsalt kujundada ühte ikooni ja selle suurust muuta. See suurendab mitte ainult pikslit, kui suurendate, ja hägusust, kui vähendate, see takistab loovust ja halvendab kogu kujunduse kvaliteeti. Väiksemad ikoonid nõuavad vähem üksikasju, suuremad ikoonid vajavad sügavamat ja rikkalikumat kujundust. Olenemata suurusest, peavad ikoonid sündima ühest kujundusest ja olema peenelt kohandatud iga suuruse iteratsiooni jaoks.

Peate kujundama konkreetsete sihtkohtade ja kontekstide jaoks. Erinevad mobiilseadmete, tahvelarvutite ja lauaarvutite platvormid määravad igas platvormis järjepidevuse suurused, kuid platvormide vahel puudub ühtlus. Favikonid on tavaliselt 16 pikslit ja kohapeal kasutatavate ikoonide kujundamisel valitseb terve mõistus.

Ikoonide kujundusele lähenemise kohta on erinevaid koolkondi. Ülalt-alla lähenemisviis on kujundada võimalikult üksikasjalikult suurim ekraanisuurus (tõenäoliselt töölauale) ja täpsustada iga iteratsiooni jaoks skaalal, et saavutada kõige teravam ikoon kõige väiksemas suuruses.

Samuti on olemas lähenemine mobiilile kõigepealt, kujundades kõigepealt väikseima ikooni ja lisades seejärel suuruse suurendamisel üksikasjad. Mõlemal on omad küljed, kuid kui te pole kogenud ikoonikujundaja, on tõenäoliselt kõige parem töötada ülalt alla, kuna detailide täpsustamine ja eemaldamine on lihtsam kui lisamine.

05. Kasutage ühte ikooniperekonda

Ikooniperekondades on oluline saavutada õige järjepidevuse tasakaal, et vältida üldise kujunduse muutumist ühtlaseks, tasaseks ja tuhmiks. Kasutajaliidese ja muude graafiliste elementidega ikoonidega abiellumisel valitseb harmoonia. Näiteks, Luhse tee omad navigeerimisikoonid on sidusad; nad vaatavad, tunnevad ja räägivad sama lugu. Seevastu suhe JIB-id ikoonid on mõistatus, kuigi neil on sama kujundusstiil.

Rakenduste puhul on juba palju otsuseid stiili ja suuruse kohta tehtud, kuid on oluline rakendada samasuguseid põhjendusi, mis peituvad SDK erinevate juhiste taga. Joondage eesmärk suuruse ja stiiliga. Näiteks ikoonide navigeerimisel kasutamisel veenduge, et suurus, stiil ja värvid annaksid kasutajale teada, et need on navigeerimisikoonid. Ärge kasutage samu ikoone teistel juhtudel: see tekitab segadust. Tehke kasutajatele teie saidi fookuse tuvastamine lihtsaks. Kui navigeerimine on kujunduses otsimisest vähem oluline, siis veenduge, et navigeerimisikoonid oleksid oma stiili, suuruse ja kaalu poolest vähem silmatorkavad, et võimaldada kasutajatel otsingu suunas liikuda. Näiteks GOV.UK veebisaidil loob elementide kasutamine ja positsioneerimine selge fookuse otsingule. Teiselt poolt on noole kasutamine nii dekoratiivse kui ka interaktiivse elemendina Innovationsradar veebisait häirib voolu.

06. Ärge leiutage ratast uuesti

Sarnaselt konventsioonidest kinnipidamisele, kui on olemas avatud lähtekoodiga või riiulil olev ikooniperekond, mis vastab teie vajadustele (või isegi peaaegu vastab teie vajadustele ja nõuab ainult natuke kohandamist), on see tõenäoliselt parim valik. Ainult siis, kui töötate Interneti-hiiglase heaks, on parim tellimus. EqualEyes on Androidi rakendus nutitelefonide pimedatele, vaegnägijatele ja eakatele kättesaadavamaks muutmiseks. See kasutab avatud lähtekoodiga Font Awesome pere, mis sobib ideaalselt oma sihtrühmale ja platvormile ning on suurepärane näide sellest, millal riiulist sobib.

Rate My Shizzle paneb järgima juhiseid, et ikoonid voolaksid koopias, et pakkuda täiendavat teksti ja graafilisi marsruute

Rate My Shizzle paneb järgima juhiseid, et ikoonid voolaksid koopias, et pakkuda täiendavat teksti ja graafilisi marsruute

Kuigi on oluline konventsioonidest kinni pidada, võite ja peaksite asjadele panema oma pitseri: lihtsalt mitte abstraktsioonini. Aleksander Bickovi oma kampaania jõulupuude väljasuremise eest päästmiseks võib olla hästi mõeldud, kuid jätab punkti mööda, kasutades puude asemel nooli. Ja pidage meeles, et kõik, mida loote, peab seisma brändijuhiste luubi all.

07. Olge kursis vormingutega

Kuigi .png on kõige tavalisem pildivorming, eriti mitmeplatvormilise kujunduse puhul, on parimate tavade mõistmine erinevatest vormingutest ja nende hindamine projekti vajaduste valguses. Siin on kiire ülevaade:

  • GIF: graafika vahetusvorming . Pildivormingute vanaisa. Ainult 256 värvi puhul on probleemiks kvaliteet. GIF-id ei laiene, toetavad ainult ühte läbipaistvust ja peaksid ennetähtaegselt pensionile jääma.
  • PNG: kaasaskantav võrgugraafika . GIF-i järeltulija on kvaliteetsem, miljoneid värve ja toetab alfa-kilesid. Kuid nagu GIF, pole ka PNG-d skaleeritavad. Täielikult toetatud alternatiivide puudumisel on PNG-d parimaks vorminguks.
  • SVG: Skaleeritav vektorgraafika . Ideaalne on universaalne ja skaleeritav vektorgraafika. Vanemad brauserid ei toeta seda vormingut siiski täielikult, kannatab aliasimise vastu ja vaatamata mastaapsusele ei sobi üks suurus ikkagi kõigile.

Ikoonifondid

Brauseriteülese ühilduvuse ja täieliku mastaapsuse korral võivad ikoonifondid tunduda toimiv lahendus. Kuid pikslite täpsuse puudumine, koormavad renderdamisprotsessid ja sellest tulenevad semantiliselt valed märgistused muudavad need keelatud.

kuidas vaadata meeldinud fotosid arvutis instagramis

Piksel on üks mõõtühik ja see on endiselt kõigi ekraanide väikseim ühik. Kuid kõiki piksleid ei käsitleta ühesuguselt. Arvukad erinevad ekraanisuurused koos kvaliteetsemate ekraanitehnoloogiatega, nagu võrkkesta ekraan, on muutnud piksli eluiga. Ekraani eraldusvõimed pole enam seadme suuruse järgi, kuna PPI (pikslit tolli kohta) säte on nüüd sama oluline kui pikslite arv.

Asja veelgi keerulisemaks muutmiseks on Android kasutusele võtnud DP või DIP (tihedusest sõltumatu piksli), et vanast heast pikslist kõrvale kalduda, kuid aeg näitab, kas see püsib.

08. Jäta teised kaubamärgid rahule

Interaktiivses universumis on tavaks, et disainerid võtavad teiste kaubamärkide ikoonid ja logod ning manipuleerivad nendega oma kujunduse järgi. Ära tee seda.

Selle turundaja vastupidises veenmiseks on liiga palju juhtumeid, kus sotsiaalmeedia graafika on varjatud. Twitteri ja Facebooki logo ühendamine veebisaidil Kadunud telefoni katse on positiivne.

Innovationsradari veebisait kasutab ühte ikooni kahel eesmärgil. Nooleikoon nii dekoratiivse kui ka interaktiivse elemendina häirib kasutajakogemuse voogu

Innovationsradari veebisait kasutab ühte ikooni kahel eesmärgil. Nooleikoon nii dekoratiivse kui ka interaktiivse elemendina häirib kasutajakogemuse voogu

09. Hoidke ikoone oma kohal

See, et kogu Internetis ilmub ikoonikomplekte, ei tähenda, et olete kohustatud neid kasutama. Ikoonid toovad ärksat sisu ellu, kuid nad ei peaks oma elu elama. Selle asemel peaksid nad mängima toetavat rolli. Reeglina ei tohiks nad kunagi keskmes olla; mis on reserveeritud brändi identiteedile.

Digitaalsete platvormide ikoonide kujundamise parimad tavad sünnivad üldtunnustatud kujunduspõhimõtetest ja erilist tähelepanu pööratakse ikoonide paigutamisele.

  • Taustad . Areng GIF-ilt PNG-le on läbipaistvuse osas suurendanud paindlikkust. GIF-ide puhul on see nagu sisse / välja lüliti, kuna läbipaistvaks saab valida ainult ühe värvi. Koos PNG-vorminguga tuli alfakanal, mis võimaldas gradiente, läbipaistmatust ja aliasimist, nii et taustaga saab suurema efekti saamiseks manipuleerida nii ikooni enda sees kui ka kogu kujundusega integreerituna.
  • Positsioneerimine . Ikoonide asukoht on üks asi, kuid positsioneerimise mõiste on sama palju seotud perspektiivi, teravussügavuse, varjude ja mõõtmetega.
  • Kontrast . Oluline on varakult seada mõned reeglid kontrastiks. Arvestades seda, kui palju tähelepanu igal ikoonil või ikoonirühmal on alguses, annab teie üldine disain tasakaalustatud ruumi tunde. Selle tegemata jätmine põhjustab alati kitsaskohti ja muudab teie disaini tundmatuks.

10. Tasakaalu vorm ja funktsioon

Kujundus ja funktsioon disainis on ala, mille üle vaieldakse sageli, mõned toetavad vormid on funktsiooni kohal ja vastupidi. Reaalsus on see, et kumbki pole olulisem kui teine. Suurte ikoonide kujundamine on pidev tasakaalustamine, kus vorm ja funktsioon saavad kokku näiliselt pingutuseta ühenduses.

Lõppude lõpuks on teie ikoonid edukad, kui need on lihtsad, sümboolsed ja ikoonilised.

Sõnad: Sandi Wassmer

Sandi Wassmer on digitehnoloog, kaasava disainiradikaali, turundaja, kirjanik, esineja, valitsuse nõunik ja aeg-ajalt magaja. Tema innukus UX-i järele on inspireeritud heast disainist, eriti tööstusdisainist ja arhitektuurist.

See artikkel ilmus algselt aastal netiajakiri väljaanne 247.

Meeldis see? Loe neid!