Share
Det finns tusen sätt att designa och skapa knappar idag och du behöver bara spendera lite tid genom att titta på arbete på dribbling för att få en känsla av dem. En stor del av dessa exempel är exakt samma, men ibland finns det märkliga få som känner att de har fått lite mer omsorg och uppmärksamhet vid tillverkningen.
Genom att utnyttja underbara nya CSS3 egenskaper kan vi skapa några otroligt eleganta och snygga knappar stilar utan att ha så mycket som en bild och ha helt adekvata faller tillbaka stilar för äldre webbläsare. Du kanske vill skapa dina knappar rakt i CSS, eller du kanske vill ha huvudet på ditt layoutverktyg, men det är viktigt att tänka noga på hur din knappdesign lever i ett sammanhang.
Det är alltför lätt att helt enkelt nå en förkonstruerad "UI Elements PSD" som någon generös själ har delat gratis (och utan tvekan innehåller Apple-inspirerade knappar). Men varför inte ta en stund att överväga om den här knappstilen är lämplig i samband med din design och överväga om det finns utrymme för att skapa något lite mer original?
Återvinning av någon annans knappar är bra, det sparar tid, men det är ingen skada att ta en stund för att förstå utformningen och sammansättningen av dina (eller någon annans) knappar i lite mer detalj. Hur är de utformade? Passar de gränssnittet / kontexten / varumärket? Finns det en möjlighet att skapa något unikt? Är mina knappar framstående nog? Behöver jag primära, sekundära, tertiära knappar? Skiljer de sig väsentligt från varandra? Ser de smarta ut ?! (Varför vill vi alla designa snygga grejer ?!).
Här är tio snabba och enkla saker som jag alltid tänker på när knappar utformas. Jag kommer inte att dela med dig av idéer om hur du använder lagereffekter i Photoshop, utan några enkla, generella konstruktionsprinciper som kan ta lång tid att optimera utformningen av dina knappar och andra användargränssnitt i allmänhet.
Det är viktigt att dina knappar matchar deras kontextuella stil. Detta kan innebära att passa in med en färgpalett, grafisk stil eller ta ledning från någon form av varumärkesriktlinjer eller logotyper. Kanske finns det några framstående former, strukturer eller designstilar som du kan hämta på. Kanske en logotyp har en cirkulär aspekt till det och du kan hämta detta på dina knappar eller andra potentiella uppmaningar till handling.
Om ett gränssnitt övervägande använder platt färg är kanske stora, skina Apple-liknande knappar inte vägen att gå. Om du kan, ta tillfället i akt att experimentera med att utöka varumärket till gränssnittet genom att använda lämpliga former, effekter, färg eller andra former av utsmyckning.
Efter ovanstående, sluta ett ögonblick innan du öppnar "UI Elements PSD". Det är lätt att nå fram till grader, skuggor, fasader etc. men ta en stund att tänka om det är rätt val att inte bara matcha ett varumärke utan även gränssnittet där knapparna sitter och om de behöver känna sig alltför knappar.
Knappar kan behöva känna sig speciellt knappliknande inom en app och på mobilen, men med webbplatser kanske det finns utrymme för att göra något lite annorlunda med knapparna eller samtal till handling.
Med så många gränssnittsdesigner som inspireras av Apple OS-styling, särskilt i en hel del UI Element PSD där ute, kan knappar bli lite förlorade bland andra element som används i användargränssnittet, vilket sparar deras potentiellt viktiga kraft. Försök använda färg, storlek, blankutrymme eller typografi så att dina knappar har den visuella vikt som de behöver sticka ut från resten av gränssnittet.
Efter det att ovanstående, om det finns många andra avrundade hörn-UI-element i din design, överväga att använda cirkulära slutna knappar eller kanske någon annan formförändring. Detta kan ge dig en extra bit av kontrast som säkerställer att dina viktiga uppmaningar till handling har den framträdande de kan behöva.
Om du strävar efter en OS-inspirerad stil eller arbetar med ett PSD-system, är det troligt att dina UI-element kommer att vara avrundat hörn, rektangulärt i form. Överväg att minska nivån på utsmyckning på element som har råd att känna sig mindre "knäppt".
Anpassade menyer, segmenterade kontroller, anpassade menyutlösare kan till exempel alla ha samma runda hörnformer, men med mindre skugga, kant, kant, gradient eller andra effekter kan det bidra till att minska deras rikedom och i sin tur främja knappstorlekar.
De flesta knappar vi ser där ute har någon form av gräns eller stroke på dem. Om du knappt talar om din knapp är mörkare än bakgrunden där den sitter, använd en mörk streck av den allmänna knappfärgen. Om omvänden är sant, gå till en stroke som är en mörkare nyans av bakgrundsfärgen. Om du håller fast vid den förra och använder den på en mörkare bakgrund tycker jag att det kan göra knappkanterna lite "smutsiga". Att använda den senare kan också hjälpa till att göra din knapp verkligen pop. Jag anser att detta är en generell designprincip när man arbetar med slag / gränser i webbdesign.
Under åren har jag alltid svurit med min "Shadow Law". Skugglagen säger att droppskuggor fungerar bäst när ett element är ljusare än dess bakgrund. Om ett element är mörkare än dess bakgrund, ska droppskuggor användas mycket subtilt. I likhet med färgkombinationer och gränser anser jag att det här är en generell designprincip som gäller för alla användargränssnitt.
Förutom att vara en annan liten detalj som kan skilja på dina knappar från liknande användargränssnitt kan användningen av enkla ikoniska element som pilar ge en viss känsla av handling och ett litet råd om vad som händer när en användare klickar.
Till exempel kan en pil som pekar direkt efter texten på en knapp ge användaren viss känsla av att gå vidare eller lämna sidan. En pil som pekar ner kan tyder på att något innehåll kommer att beskrivas successivt nedan, eller kanske någon slags meny öppnas.
Om du utformar ett gränssnitt där det finns konsekvent många åtgärder och funktionalitet på displayen kan det vara viktigt att skapa visuellt språk med knapparna genom att skapa primära, sekundära, tertiära och potentiellt fler stilar.
Överväg att spara den starkaste och djärvaste färgen för dina primära knappar och använda progressivt mindre styrka eller mättnad när du minskar betydelsen. Förutom färg och skugga, överväga att minska storlek, vittomrymd, textstorlek och nivån på utsmyckning för att ytterligare minska den visuella vikten av knappar som inte är primära.
Det här är en nej brainer, men det är ofta något som ses mot slutet av designprocessen. Arbeta alltid genom de kärntillstånd som krävs för dina knappar för att säkerställa att de ger användaren tillräcklig feedback i sitt sammanhang. Användare kommer sannolikt att ha en mental modell av hur en knapp fungerar i den verkliga världen som de använder den genom sina olika stater. Vissa enkla CSS-tweaks med skuggor, gränser och gradienter och liknande kan ge användaren lite enkel återkoppling och en snygg ögonsocka!
Som designers har du alla en egen process som du går igenom. Jag satsar mycket på den tiden som kan innebära att du flyttar huvudet tillbaka från skärmen, lutar det något, snurrar och säger "Ja, det handlar om rätt!". Det är en del av det roliga med att designa självklart och begåvade designers tenderar att få det rätt att göra just det, men jag tycker att det alltid är bra att köra lite intern kommentar, förhör och resonemang över de designbeslut du fattar.
Det finns ingen skada vid återanvändning eller lutning på förkonstruerade stilar och användargränssnitt, de kan givetvis spara mycket tid. Det kan till och med vara så att någon har pixel-perfekt utformad exakt vad du letade efter och erbjuder det gratis. Men jag tror inte att det finns någon skada i att ha en djupare förståelse för designprocessen och hantverk bakom det du skapar och informera dina designbeslut framåt.
Accentsconagua