Share
Det er tusen måter å designe og lage knapper i dag, og du trenger bare å bruke litt tid på å se gjennom arbeid på dribble for å få en følelse av dem. En stor del av disse eksemplene er nøyaktig det samme, men noen ganger er det de merkelige få som føler at de har hatt litt mer omsorg og oppmerksomhet i å lage dem.
Dra nytte av fantastiske nye CSS3 egenskaper, vi kan lage noen utrolig elegante og stilige knapper stiler uten så mye som whiff av et bilde og har perfekt tilstrekkelig fall tilbake stiler for eldre nettlesere. Du kan gjerne lage dine knapper rett i CSS, eller du kan like å lede etter det valgte layoutverktøyet ditt, men det er viktig å tenke nøye på hvordan knappedesignen din lever i kontekst.
Det er altfor enkelt å bare nå for en pre-designet 'UI Elements PSD' som noen sjenerøs sjel har delt gratis (og inneholder uten tvil Apple inspirerte knapper). Men hvorfor ikke ta et øyeblikk til å vurdere om knappestilen er hensiktsmessig i sammenheng med ditt design og vurdere om det er plass til å lage noe litt mer original?
Gjenvinning av andres knapper er bra, det sparer tid, men det er ingen skade i å ta et øyeblikk å forstå utformingen og sammensetningen av knappene dine (eller noen andre) i litt mer detaljert. Hvordan er de designet? Passer de i grensesnittet / konteksten / merket? Er det en mulighet til å skape noe unikt? Er mine knapper fremtredende nok? Trenger jeg primære, sekundære, tertiære knapper? Skiller de seg vesentlig nok fra hverandre? Ser de slick ?! (Hvorfor ikke, vi alle ønsker å designe kule ser ting riktig ?!).
Her er ti raske og enkle ting som jeg alltid tenker på når jeg designer knapper. Jeg kommer ikke til å dele ideer om hvordan du bruker lageffekter i Photoshop, men noen enkle, generelle designprinsipper som kan gå lang tid i å optimalisere utformingen av knappene dine og andre brukergrensesnitt generelt.
Det er viktig at knappene dine stemmer overens med deres kontekstuelle stil. Dette kan innebære å passe inn med en fargepalett, grafisk stil eller ta en ledelse fra noen form for merkets retningslinjer eller logoer. Kanskje det er noen fremtredende former, teksturer eller design stiler som du kan plukke opp på. Kanskje en logo har et sirkulært aspekt til det, og du kan hente på dette i knappene dine eller andre mulige oppfordringer.
Hvis et grensesnitt hovedsakelig bruker flat farge, er det kanskje ikke store skinnende Apple-lignende knapper som er veien å gå. Hvis du kan, bruk muligheten til å eksperimentere med å utvide merkevaren til grensesnittet ved å bruke passende former, effekter, fargestoffer eller andre former for utsmykning.
Følg ovenfra, stopp et øyeblikk før du åpner "UI Elements PSD". Det er lett å nå frem til grader, skygger, fasetter osv., Men ta et øyeblikk til å tenke om det er det riktige valget, ikke bare for å matche et merke, men også grensesnittet der knappene sitter og om de trenger å føle seg altfor "knallete".
Knapper må kanskje føles spesielt knappaktig i en app og på mobil, for eksempel, men med nettsteder kan det være plass til å gjøre noe litt annerledes med knappene eller handlingene til handling.
Med så mange grensesnittdesigner som er inspirert av Apple OS-styling, spesielt i mange UI-element PSD-er der ute, kan knapper bli litt tapt blant andre elementer som brukes i brukergrensesnittet, og fortynner deres potensielt viktige kraft. Prøv å bruke farge, størrelse, mellomrom eller typografi for å sikre at knappene dine har den visuelle vekten de trenger for å skille seg ut fra resten av grensesnittet.
Etter at fra det ovennevnte, hvis det er mange andre avrundede hjørne-UI-elementer i ditt design, bør du vurdere å bruke sirkulære sluttknapper eller kanskje en annen endring i form. Dette kan gi deg en ekstra bit av kontrast som sikrer at dine viktige oppfordringer til handling har den fremtredende måten de trenger.
Hvis du strever etter en OS-inspirert stil, eller du jobber med et forhåndsdesignt element PSD, så er det sannsynligvis at brukergrensesnittene dine hovedsakelig vil være avrundet hjørne rektangulært i form. Vurder å redusere nivået på utsmykking på elementer som har råd til å føle seg mindre 'knallete'.
For eksempel kan skreddersydde utvalgte menyer, segmenterte kontroller, tilpassede menyutløsere alle være de samme rotasjons hjørneformene, men ved å bruke mindre skygge, kantlinje, skråkant, gradient eller andre effekter kan det bidra til å redusere sin rikdom og igjen fremme knappestiler.
De fleste knappene vi ser der ute, har noen form for grense eller slag på dem. Løst snakkes, hvis knappen er mørkere enn bakgrunnen den sitter på, bruker det et mørkt slag av den generelle knappefarge. Hvis omvendt er sant, så gå for et slag som er en mørkere nyanse av bakgrunnsfargen. Hvis du holder deg til den tidligere og bruker den på en mørkere bakgrunn, finner jeg det kan gjøre knappekanter litt "skitne". Å bruke sistnevnte kan også bidra til å gjøre knappen din virkelig pop. Jeg anser dette for å være et generelt designprinsipp når det gjelder slag / grenser i webdesign.
Gjennom årene har jeg alltid svoret ved min "Shadow Law". "Shadow Law" sier at drop shadows fungerer best når et element er lettere enn bakgrunnen. Hvis et element er mørkere enn bakgrunnen, bør dropshadows brukes svært subtilt. I likhet med fargevalgstreker og -grenser anser jeg det veldig for å være et generelt designprinsipp som gjelder for alle brukergrensesnittelementer.
I tillegg til å være en annen liten detalj som kan skille mellom knappene dine fra liknende brukergrensesnittelementer, kan bruk av enkle ikoniske elementer som piler gi litt følelse av handling og et lite råd om hva som skjer når en bruker klikker.
For eksempel kan en pil som peker rett etter teksten på en knapp, gi brukeren litt følelse av å flytte på eller forlate siden. En pil som peker ned kan tyde på at noe innhold vil bli vist nedenfor, eller kanskje en slags meny åpnes.
Hvis du designer et grensesnitt der det er konsekvent mange handlinger og funksjonalitet på skjermen, kan det være viktig å etablere visuelt språk med knappene dine ved å etablere primære, sekundære, tertiære og potensielt flere stiler.
Vurder å reservere den sterkeste og fedeste fargen til primærknappene dine, og bruk gradvis mindre styrke eller metning når du reduserer viktigheten. I tillegg til farge og skygge, bør du vurdere å redusere størrelse, hvite plass, tekststørrelse og utsmykningsgrad for å redusere visuell vekt av knapper som ikke er primære.
Dette er ikke en brainer, men er ofte noe som vurderes mot slutten av designprosessen. Arbeid alltid gjennom kjerne-statene som kreves for knappene dine, for å sikre at de gir brukeren tilstrekkelig tilbakemelding i sin sammenheng. Brukere vil sannsynligvis ha en mental modell av hvordan en knapp fungerer i den virkelige verden som de bruker den gjennom ulike stater. Enkelte enkle CSS-tweaks med skygger, grenser og gradienter og lignende kan gi brukeren litt enkel tilbakemelding og et snev av øye-godteri!
Som designere vil du alle ha din egen prosess du går gjennom. Jeg vil satse mye av tiden som kan innebære at du beveger hodet tilbake fra skjermen, vipper det litt, skvaller og sier 'Ja, det handler om riktig!'. Det er en del av det morsomme med å designe selvfølgelig, og talentfulle designere har en tendens til å få det riktig å gjøre nettopp det, men jeg synes det er alltid godt å kjøre litt intern kommentar, forhør og begrunnelse over designbeslutningene du lager.
Det er ingen skade ved å bruke eller lene seg på forhåndsformede stiler og brukergrensesnittelementer, de kan selvsagt spare mye tid. Det kan også være tilfelle at noen har pixel-perfekt utformet akkurat det du lette etter, og tilbyr det gratis. Imidlertid tror jeg ikke det er noen skade i å ha en dypere forståelse av designprosessen og håndtere det du lager og informere dine designbeslutninger fremover.
Accentsconagua