Share
I den sista delen lärde du dig om ikondesignens historia och hur det har utvecklats från svartvita representationer av kontorsartiklar till fullfärgade, glasiga, hypergjorda, isometriska representationer av ... kontorsartiklar. I denna avdelning kommer jag att dyka längre in i ikonvärlden och utforska vilka ikoner som betyder för oss idag.
Denna post är dag 8 i vår gränssnittsdesignsession. Creative Sessions "Session Day 7ikon - substantiv (Datorer) En bild eller symbol som visas på en bildskärm och används för att representera ett kommando, som en fillåda för att representera filing - dictionary.com
Så vi känner till betydelsen av "Ikon" i ordets traditionella beräkning, men hur förklarar vi alla illustrativa ikoner vi ser idag? Hur ska en vackert gjord bild av en tekanna, rymdskepp eller hinkhink antas representera något inom användargränssnittet? Det finns några svar på den här frågan.
Oavsett hur strikt eller ovanligt din design är, ska alla ikoner göras till specifikation - det kommer snart att bli mer om det.
Nedan ser du en sammanfattning av modern ikondesign. Vissa människor kan hävda att ikonerna på "illustrationen" -sidan av diagrammet inte ska betraktas som ikoner. Det här är delvis sant, det är inte traditionella ikoner, men de är moderna ikoner i den meningen att de skulle kunna representera applikationer, spel eller ett specifikt sammanhang.
Ikonerna på vänster sida av diagrammet är ikoner som skulle anses vara traditionella ikoner med en modern twist. Vi associerar omedelbart dessa ikoner med deras funktion, detta uppnås genom över 30 års visuellt språk, vilket är en stark faktor i mönsterets framgång.
Ikonerna längst ner i diagrammet är ikoner som varken är illustrativa eller informativa, utan en kombination av båda. Kuvertet är traditionellt på grund av dess form, men det kan uppfattas annorlunda på grund av dess utförande, en design som denna fungerar bäst inom ett visst sammanhang. Blue Twitter Bird har omedelbart erkännande från internetanvändare, men reduceras till en illustration av en blå fågel för icke-användare (som min mamma) och den stilistiska GTalk Bubble är också ganska beroende av varumärkesförening.
Länkar till ikonen ovan (i ingen särskild ordning)
Pump It Up, av mgilchuk, My Breafast, med blink, SNOW.E 2 XP, av RADE8, CS3 iKons - Vinn, genom -kol, iChat Bubble, av Delta909, Icecream ikonuppsättning, 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 och David Lanham
När du designar ikoner för ett gränssnitt kan du inte gå över konventionen. Kontrollera tidigare design för en indikation på hur du ska närma dig. Du kommer att upptäcka att de flesta mjukvarupaket och användargränssnitt har liknande ikoner, det beror på användarupplevelse (UX). Om en användare plötsligt konfronteras med en design som de inte förväntar sig eller bekväma med, kommer de sannolikt att bli förvirrade.
Om du designar för en specifik plattform, kolla alltid utvecklarens anteckningar innan du börjar. Dessa ger dig en bild av storlek, perspektiv och färgpalett som du ska använda. Du hittar länkar till både Apple och Microsoft-utvecklarens anteckningar i avsnittet "Resurser och vidare läsning" i slutet av det här inlägget.
Grön = Bra - Blå = Hjälp - Gul = Varning - Röd = Fel
Ikonspecifikationer blir mer komplicerade med varje ny teknik eller operativsystem. Windows och Mac finns i ett vapenrace över ikonstorlek, med den största ikonen hittills som mäter en massiv 512 pixlar. Trenden för stora ikoner har mycket att göra med moderna skärmupplösningar, men det finns också en viss droolfaktor med en jätte, perfekt gjord ikon. Titta på exemplen nedan om du inte tror på mig!
AppZapper, Billings, Things och Coda Application Ikoner för Mac (nedskalad för att passa det här inlägget!)
Nu när jag har visat dig Drool Worthy ikoner, låt oss flytta på några ikoner som jag har utformat mig själv. Exemplet nedan är en dekonstruerad .ICO-fil gjord i mitt tidigare liv som en ikon och gränssnittsdesigner (de som känner mig som LoungeKat visste förmodligen inte detta faktum). Den viktigaste 256px-ikonen har gjorts i Adobe Photoshop med former och lagerstorlekar, den var sedan omskalad för varje enskild storlek (64, 48, 32, 16) och importerad till Microangelo Toolset som kombineras som en .ICO. Ikonen 256px är inte en del av ikonfilen själv, men ingår i programvaran som en transparent PNG som Windows samtalar om storleken krävs. Detta håller ned filstorleken.
Som du kan se har jag använt några variationer på designen beroende på färgdjupet och storleken på ikonen. Ikoner inkluderar alla dessa storlekar och färgutrymmen för att rymma alla olika sätt som de kan ses av operativsystemet.
Det är viktigt att utforma varje storlek separat, att skala en stor bild kan göra designen suddig. När du utformar en 16px-ikon är det alltid bäst att få rakt ner till pixelvyn. Som du kan se kan några bra placerade pixlar överföra mycket mer än du tror. Du kan läsa ytterligare information om ikoner, olika specifikationer och branschrekommendationer i Axialis Softwares ikonguide.
Ett exempel på skalning
För att få en bättre förståelse av ikoner skulle jag föreslå att du tittar på så många olika operativsystem, program, gränssnitt och portaler som möjligt. Tänk på olika sätt färg och metafor används för varje applikation. Vilka ikoner utmärker sig som lätt att förstå (kanske mappen eller papperskorgen kan slå dig som den mest igenkännliga?), Vilka ikoner behöver förklaras ytterligare? Lita på mig, du kommer att bli förvånad över vad du får reda på psykologin bakom det visuella språket vi använder varje dag och tar ofta för givet.
Accentsconagua