Share
I siste avlevering lærte du om ikondesignens historie og hvordan den har utviklet seg fra svart og hvitt representasjoner av kontorartikler til fargede, glassagtige, hypergjengede, isometriske representasjoner av ... kontorartikler. I denne avdelingen vil jeg dvele videre inn i verden av ikoner og utforske hvilke ikoner som betyr for oss i dag.
Dette innlegget er dag 8 i vårt grensesnitt design sesjon. Creative Sessions "Session Day 7ikon - substantiv (Datamaskiner) et bilde eller symbol som vises på en skjerm og brukes til å representere en kommando, som en filskuff for å representere arkivering - dictionary.com
Så vi vet meningen med "Ikon" i den tradisjonelle databehandlingen av ordet, men hvordan forklarer dette alle illustrative ikonene vi ser i dag? Hvordan er et vakkert gjengitt bilde av en Tekanne, Romskip eller Bucket of Chicken ment å representere noe i brukergrensesnittet? Det er noen svar på dette spørsmålet.
Uansett hvor streng eller uvanlig designet er, bør alle ikoner gjøres til spesifikasjon - det vil snart være mer om det.
Nedenfor vil du se en sammenfatning av moderne ikondesign. Noen mennesker kan hevde at ikonene på «illustrasjon» -siden av diagrammet ikke bør betraktes som ikoner. Dette er delvis sant, de er ikke tradisjonelle ikoner, men de er moderne ikoner i den forstand at de kunne representere applikasjoner, spill eller en bestemt kontekst.
Ikonene på venstre side av diagrammet er ikoner som anses å være tradisjonelle ikoner med en moderne vri. Vi knytter øyeblikkelig disse ikonene sammen med deres funksjon, dette oppnås med over 30 års visuelt språk, noe som er en sterk faktor i design suksess.
Ikonene i midten av diagrammet er ikoner som ikke er illustrative eller informative, men en kombinasjon av begge. Konvolutten er tradisjonell på grunn av sin form, men det kan oppfattes annerledes på grunn av sin gjengivelse, et design som dette fungerer best innenfor en bestemt kontekst. Blå Twitter Bird har umiddelbar anerkjennelse fra internettbrukere, men er redusert til en illustrasjon av en blå fugl for ikke-brukere (som mamma) og den stilistiske GTalk Bubble er også ganske avhengige av merkevareforeningen.
Lenker til ikonene ovenfor (i ingen bestemt rekkefølge)
Pump It Up, av mgilchuk, My Breafast, ved blink, SNOW.E 2 XP, ved RADE8, CS3 iKons - Vinn, ved-kol, iChat Bubble, av Delta909, Icecream ikon sett, av Miniartx, Batman Mask, av Svengraph, I Spirited We Love, av Raindropmemory, Twitter Bird, av freakyframes, StarWars Vehicles Archigraphs, av Cyberella74, Systematrix Full, av royalflushxx, New Moshii World, av anekdamian, Somatic Rebirth Extras, av Iconfactory og David Lanham
Når du designer ikoner for et grensesnitt, kan du ikke gå forbi konvensjonen. Sjekk tidligere design for en indikasjon på hvordan du nærmer deg din. Du finner at de fleste programvarepakker og brukergrensesnitt har lignende ikoner, dette skyldes brukeropplevelse (UX). Hvis en bruker plutselig konfronteres med et design som de ikke forventer eller er komfortabel med, vil de trolig bli forvirret.
Hvis du designer for en bestemt plattform, må du alltid sjekke utviklerens notater før du starter. Disse gir deg en ide om størrelses-, perspektiv- og fargepalett du bør bruke. Du finner lenker til både Apple og Microsoft-utviklerens notater i delen "Ressurser og videre lesing" på slutten av dette innlegget.
Grønn = God - Blå = Hjelp - Gul = Alert - Rød = Feil
Ikon spesifikasjoner blir mer komplisert med hver ny teknologi eller operativsystem. Windows og Mac er i et Arms Race over ikonstørrelse, med det største ikonet til dags måling en massiv 512 piksler. Trenden for store ikoner har mye å gjøre med moderne skjermoppløsninger, men det er også en viss drool faktor med et gigantisk, perfekt gjengitt ikon. Se på eksemplene nedenfor hvis du ikke tror på meg!
AppZapper, Billings, Things og Coda Application Ikoner for Mac (nedskalert for å passe dette innlegget!)
Nå som jeg har vist deg Drool verdig ikoner, la oss flytte på noen ikoner jeg har designet meg selv. Eksempelet nedenfor er en dekonstruert .ICO-fil laget i mitt tidligere liv som et ikon og grensesnittdesigner (de som kjenner meg som LoungeKat visste sikkert ikke dette faktumet). Det største 256px-ikonet er laget i Adobe Photoshop med former og lagstiler. Det ble deretter omskalert for hver enkelt størrelse (64, 48, 32, 16) og importert til Microangelo Toolset for å bli kombinert som en .ICO. 256px-ikonet er ikke en del av ikonfilen selv, men er inkludert i programvaren som en gjennomsiktig PNG som Windows kaller på hvis størrelsen er nødvendig. Dette holder filstørrelsen nede.
Som du ser, har jeg brukt noen variasjoner på designet, avhengig av fargedybden og størrelsen på ikonet. Ikoner inkluderer alle disse størrelsene og fargene for å imøtekomme alle de forskjellige måtene de kan se av operativsystemet.
Det er viktig å designe hver størrelse separat, og skalering av et stort bilde kan gjøre designet sløret. Når du designer et 16px-ikon, er det alltid best å komme helt ned til pikselvisning. Som du kan se, kan noen velutstyrte piksler formidle mye mer enn du tror. Du kan lese tilleggsinformasjon om ikoner, ulike spesifikasjoner og bransjens anbefalinger i Axialis Software's ikonveiledning.
Et eksempel på skalering
For å få en bedre forståelse av ikoner foreslår jeg å se på så mange forskjellige operativsystemer, programmer, grensesnitt og portaler som mulig. Tenk på den forskjellige måten fargen og metaforen brukes til hver applikasjon. Hvilke ikoner skiller seg ut som å være lett å forstå (kanskje mappen eller søppel kan slå deg som den mest gjenkjennelige?), Hvilke ikoner trenger videre forklaring? Stol på meg, du vil bli overrasket over hva du finner ut om psykologien bak det visuelle språket vi bruker hver dag og tar ofte for gitt.
Accentsconagua