Share
Ordet metafor är förmodligen mest likadant med en skriftskrift, när den används som en litterär talförteckning för beskrivande effekt. Men idag ska vi prata om en annan typ av metafor: en visuell vi kan använda i webbdesign.
liknelse: en talesätt där ett uttryck används för att hänvisa till något som det inte bokstavligen betecknar för att föreslå en likhet - WolframAlpha
På webben använder vi bilder och ikoner mycket för att symbolisera olika saker. När vi besöker en webbsida skannar vi för att försöka hitta det vi behöver så fort som möjligt, och bilder används för att påskynda processen. Vi kan tolka något mycket snabbare med bekant styling och bilder. Till exempel kan vi genast känna igen ett fel när det finns något som ett utropstecken, eller en gul eller röd färg. Det är helt ned till förtrogenhet.
Framförallt i de senaste tiderna har vi börjat se att urbana metaforer uppträder i webbdesign med hjälp av kända element som en bokhylla eller en vägg i en design. Det finns dock massor av andra metaforer som används i webbdesign för att överbrygga klyftan mellan faktisk och virtuell liv.
Den "officiella" definitionen av en metafor har inte förändrats från föregående avsnitt: en talesätt där ett uttryck används för att hänvisa till något som det inte bokstavligen betecknar för att föreslå likhet. Det är väldigt sanningsenkt när vi tittar på webben och användningen av metaforer på den plattformen. Där använder vi pixlar som representanter för verkliga objekt att överbrygga viss känsla av förtrogenhet mellan virtuellt och verkligt liv.
Det finns flera olika typer av metaforer som vi använder på webben också: de i en mindre skala som efterliknar verkliga objekt som knappar, ikoniska metaforer som kopierar verkliga föreningar och använder dem på webben och utvidgade där en hel design kan rotera runt en metafor.
En knapp på webben är faktiskt inte knappen är det? Nej, det är en massa pixlar gjorda för att se ut som en knapp, eftersom (a) vi har gjort det så och (b) våra användare kommer att känna igen det och vet att det är något som ska tryckas (eller, mer korrekt, klickas). Vi gör den här länken som en knapp eftersom vi är vana vid att känna igen en knapp som en samspelspunkt i verkligheten, och kommer att kunna särskilja den specifika länken från resten av sidan med liten ansträngning.
Efterliknande av verkliga konventioner hjälper oss att interagera med den virtuella världen. Det betrar vår användarupplevelse eftersom webben inte visar sig vara något utländskt gränssnitt som kräver en hel del lärande att interagera med. Vi vet att knappar är knappar eftersom de ser ganska mycket överallt ut, de är en visuell cue och användarna interagerar med dem instinktivt.
Detsamma gäller för Windows, skrivbord och flikar i UI-design. Steve Krug, i användbarhetsboken Gör mig inte Tänk, använder famously exemplet av mappflikar som stor användning av metaforer i gränssnittsdesign.
Jag har inte kunnat bevisa det (ännu), men jag misstänker starkt att Leonardo da Vinci uppfann flikdelare någon gång under slutet av 1500-talet. När gränssnittsenheter går, är de helt klart en produkt av geni. - Steve Krug
Flikar är det klassiska exemplet på en intuitiv gränssnittsmetaför.
Något annorlunda än identiska metaforer är ikoner, precis som vi pratade om tidigare. Exempelvis används utropstecken för att representera en del av betydelse eller varning så vi använder den ikonen i samma sammanhang på webben. Vi kan också använda symbolen för en telefon eller ett brev för att beteckna kontakt.
För ett perfekt exempel kan vi titta på WordPress instrumentbrädan. Var och en av menyalternativen längst ner till vänster har en slags metafor, till exempel tryckknappen för att representera inlägg och talbubblan för kommentarer.
Uppmuntran att använda sådana metaforer är identisk med dem i föregående avsnitt: det skapar viss förtrogenhet - en "länk" om du vill - till den verkliga världen som hjälper läsaren att tolka och navigera en sida med relativ lättnad.
Vi har tagit en kort rundtur i att kopiera verkliga objekt och använda ikoner för att skapa länkar, men det finns en viktigare typ av metafor: de som sträcker sig bortom ett enda element. Det mest slående exempel jag kan tänka på är inte en hemsida, men en app. iBooks ser inte ut som en vanlig iPad-app eftersom det är meningen att imitera utseendet på en riktig bokhylla för att lägga till känslan av förtroende för läsaren. Du tittar på iBooks och du vet omedelbart att det har något att göra med böcker. Om det görs bra kan dessa typer av webbplatser vara fantastiska!
Utökade metaforer är mindre vanliga att de andra typerna som används på de flesta webbsidor mönster kring webben.
Även om "förlängd metafor" kan vara fel terminologi, är denna typ av metafor fortfarande den bredaste typen du kan få. De erbjuder ett litet fönster i din webbläsare i det verkliga livet och kan vara en omedelbar metod för att skapa ett första intryck av vad webbplatsen handlar om.
Vi använder skriftligen en metafor för att uttrycka, förklara och beskriva. Metaforer kan vara ett användbart sätt att koppla en idé med en att det inte är bokstavligen liknande (där en liknad sannolikt skulle användas istället), men där de två kan användas för att representera varandra.
Metaforer i webbdesign, som skrivande, används som en beskrivande mekanism genom att länka verkliga objekt och idéer till pixlarna på en webbplats. Det kan tyckas mycket litet och något som kan förbises, men webbläsare har en kortare uppmärksamhet än skrivare, så tiden är avgörande när du surfar på en webbplats. Och under dessa omständigheter blir metaforer användbara genom att kopiera verkliga föreningar (som färgen röd med fara eller ett förstoringsglas med sökning) och använda dem på webben så att processen med att skanna en webbsida spedas upp.
Som designers kan vi utnyttja metaforer för att öka attraktionen på designen och göra våra mönster minnesvärda. Vi vill att användarna ska ansluta till webbplatsen, och redan har de flesta webbplatser någon form av metaforer som används för att passa deras målgrupp. Webbplatser speglar verkliga koncept, företag, människor och objekt, och de valda stilarna skiljer sig inte från de i verkliga livet. Inte bara gör metaforer en känsla av förtrogenhet mellan pixlar på en webbsida och verkliga saker, men de kan också användas för att ansluta till en viss publik.
Låt oss ta till BBC: s CBeebies hemsida till exempel. Webbplatsen är uppbyggd kring en bakgrund som visar en trädgård med träd och regnbågar, en idealistisk bild av världen som är vanlig i många barnorienterade medier. Metaforen för en online trädgård välkomnar att barnen använder webbplatsen, men om den utformades som Microsofts hemsida, skulle det inte vara så attraktivt för barn att använda.
Metaforer används i alla medier för att uttrycka något som något annat, och på webbplatser är de ett bra sätt att kommunicera förtrogenhet och locka läsare till en design. När vi överväger detta i världens 4,5 miljarder år är webben fortfarande ett helt nytt medium, så att skapa kopplingar mellan verkligt och virtuellt är en övergångsåtgärd, men en som fungerar.
Flourish är en webbdesignbyrå som tar namnet på allvar. Med blomstringen definierad som "växa eller utvecklas på ett hälsosamt eller kraftfullt sätt" presenteras begreppet växande träd i annars ojämnt land och en allsidig naturbaserad design.
"Interior Design" -mallen är ett ThemeForest-objekt stylat för att representera ett kontor, ett perfekt exempel på en metafor i spel.
Starta är ett annat ThemeForest-objekt, men det här liknar frisläppandet av en webbplats till lanseringen av en raket, liksom många liknande mönster.
Mutant Labs, ett mjukvaruutvecklingsföretag, tar "lab" delen av sitt namn i ett vetenskapligt sammanhang för deras webbplatsens design.
Accentsconagua