Share
Tja, om du har läst de fem första artiklarna i denna serie kanske du frågar dig själv: "Hur hänför sig allt detta till mobil design?" Syftet med denna introduktionsserie är att du ska lägga till några nya verktyg och idéer till din mobila designarsenal. Denna artikel är inte annorlunda. Färger kan göra din applikation ser professionell och vacker, men på sidan kan de också se ut som din app gjordes av min femåriga brorson.
Jag är inte ute för att göra dig till en professionell designare i den här kursen, men att veta grunderna för färgteori kan verkligen hjälpa till med att ta dina appar till nästa nivå, även om du tänker skapa hela appgränssnittet i kod.
När det gäller att förstå färgteori är det enklaste sättet att bryta ner det för dig.
Röd, Gul, Blå. Det här är de tre grundläggande färgerna som inte kan skapas av någon kombination av andra färger. Alla andra färger är resultatet av att blanda dessa tre.
Grön, Orange, Lila. Dessa är de färger som bildas genom att blanda de primära färgerna.
Gul-orange, röd-orange, röd-lila, blå-lila, blågrön och gulgrön. Dessa är färgerna som bildas genom att blanda en primär och en sekundär färg. Med andra ord fylls det i resten av vårt färghjul.
Eventuella tre färger som ligger bredvid varandra på ett 12-deligt färghjul, till exempel gulgrön, gul och gul-orange. Vanligtvis är en av de tre färgerna den dominerande färgen.
När det gäller färghjulet är komplementära färger två färger direkt mittemot varandra, till exempel röd och grön. Komplementära färger skapar maximal kontrast och maximal stabilitet. Var försiktig när du arbetar med helt mättade komplementära färger för digitala gränssnitt: de kan vara ansträngda på ögat.
Här är en annan av mina små hemligheter som jag kommer att släppa in och även där jag tog tag i grafiken från. Det här är en bra webbplats som hjälper dig att få lite harmoni i din app.
Tillsatsfärger är vad webb-, tv- och mobila enheter är gjorda av. I Photoshop skapar vi alla våra app skärmdumpar, bakgrunder och grafik i RGB-format. RGB står för Röd, Grön och Blå, och dessa tre är primärfärgerna. När olika kombinationer av dessa tre blandas samman skapas alla återstående färger. I Photoshop kan du hantera RGB-färgen genom att dubbelklicka på färgpalett. De två vanligaste sätten att justera färg i Photoshop är att antingen skriva in numeriska RGB-värden direkt i textfält eller bara dra färgväljaren över färgpalett.
På en skala från 0 till 255 ändrar varje numeriskt steg färgen på ett subtilt sätt. Bara för att få hänga på det finns inget underligt om skillnaderna nedan!
Ett RGB-värde på 255, 255, 255 (fullmättnad) är samma sak som vit, vilket också visar hexvärdet av #ffffff.
Tvärtom, om alla RGB-värden är inställda på noll, är den genererade färgen svart. Detta visar motsvarande hex värde # 000000.
Om du får lite mer in i det borde du kunna förutse vilken färg som kommer att genereras när Röd är satt till ett värde på 255 och Grön och Blå är inställda på 0.
Ändå kunde jag inte motstå ett annat skärmdump. Med ett värde på 255 i Röda fläckar och 0 i Gröna och Blå får vi en helt mättad röd färg. Grön och Blå ändras följaktligen med samma värden omorganiseras.
Som ett exempel på vad som händer när vi börjar röra med flera olika värden, med ett värde på 255 i Rött och Grönt, skapar vi en helt mättad gul färg med hex-värdet på # ffff00.
Så, genom att bara ändra värdena på Röd, Grön eller Blå, kan vi skapa den exakta färgen som behövs för den aktuella konstruktionen. Att veta hur färger interagerar med varandra kommer verkligen att hjälpa dina applikationer och webbplatser att visa lite mer harmoni och sammanhållning.
Så nu kommer den roliga delen. Med den allmänna teorin på vägen, hur vet du vilken färg som är bäst för din app? Färger kan ha olika effekter på människor och kan till och med hålla olika kulturella betydelser utöver vad som kan vara naturligt intuitivt. Rött har varit känt för att öka blodcirkulationen och stimulerar vår kropp och sinne. Av dessa skäl är det sålunda ofta associerat med sex och kärlek. Orange har varit känt för att öka den totala energin. Blå kan användas för att behandla smärta och är känt som en stimulant och kan ofta tillskriva sömnlöshet. Kom ihåg nästa gång du stirrar på det lilla blå ljuset på din tv!
Att veta hur människor reagerar på färger i naturen kan vara en viktig tid-bit av information för att hålla sig i din ficka. Färgförening och färgpsykologi går hand-och-hand, och båda är värda ytterligare självständig forskning för den seriösa designer.
En webbplats som du bör njuta av och kommer att påskynda beslut om färgföreningens design är http://colorapi.com. Sök efter ett ord, säg, bröd, och du kommer att få upp en massa färgalternativ för den bakverk-appen du jobbar med. Njut av!
Jag är en stor förespråkare för tillgänglighet och färg spelar en viktig roll i den övergripande tillgängligheten för både webbplatser och mobila applikationer. Genom att ge tillräcklig kontrast mellan bakgrundsfärg och sidelement kan du se till att alla kommer att kunna njuta av dina applikationer så som du tänker att de ska njutas.
För att se hur din webbplats eller webbapplikation ser ut som de synskadade, kolla http://colorfilter.wickline.org/.
Här är några apps som har det rätt. Ta en titt på den webbplats som du skulle se när du besöker från en stationär dator och jämför den med den i mobilapplikationen. Båda har en konsekvent utseende, känsla och färgschema. Kontinuitet mellan webbplats och webbapp är lika viktigt som färgschema (men den diskussionen är en annan gång).
Med en blå färg, ger webbplatsen en lugn och lugn och snygg webbplats. Inte cool som i surfer-boy slang, men cool som i temperatur, så termometer app. Funkar bra.
Jag gillar denna. Källaren drar av en fin effekt med bruna för att ge webbplatsen och appen en naturlig och tröstande känsla. Som en verklig vinkällare, eventuellt med smutsgolv och trälådor och väggar, var bruna det självklara valet här.
Liksom termometerns app, ger den mobila versionen av arctic.ru ett snyggt coolt utseende med de vita, blues och graysna. Att visa coola färger på en plats med isbjörnar är alltid en bra idé. Omvänt skulle en plats för Las Vegas eller Arizona eller varmare tropiska klimat ha mer framgång med hjälp av varma färger som röda, apelsiner och gula.
Nästa gång kommer vi att komma tillbaka till Photoshop och vi lär oss hur du skapar grundläggande former och knappar. Håll dig igång!
Accentsconagua