Share
I dagens veiledning skal vi gå gjennom hvordan du lager ditt eget enkle brukergrensesnitt fra grunnen av. Vi lager de grunnleggende byggeblokkene du kan bruke i omtrent alle webprosjekter, inkludert: tekstfelter, fokusfelt, velg felt, rullestenger, lastebokser, avmerkingsboks og radioknapper. Nyt!
Å lage et enkelt UI-sett er en fin måte å øke designkvaliteten når du jobber med et stort prosjekt. Hvis du har mange sider for å mocke opp, har du et arsenal av klare elementer som er laget spesielt for det prosjektet, slik at du får raskere å hamre ut disse sidene. I dag har vi en video og en skriftlig opplæring - følg en eller begge deler!
For de av dere som vil ha litt mer veiledning enn videoen, gir jeg også en komplett trinnvis skriftlig opplæring. La oss dykke inn!
Å lage tekstfelt er den enkleste delen av hele prosessen, men fordi disse elementene trolig blir brukt mest, er det viktig å få det riktig første gang. I vårt tilfelle har jeg tegnet enkle 300px x 30px avrundede rektangler med en 2px radius. Juster din egen for å passe dine egne behov. Store, saftige, ekstra avrundede felt kan også være morsomt! Hårde kanter felt er for den mer seriøse publikum.
Uansett, lag en som er perfekt - legg til et slag som matcher merket ditt (# bdd9a7 for demoen), og dupliser laget to ganger (Ctrl + J), flytt det ned hver gang.
Disse tre lagene vil danne grunnlaget for vårt brukergrensesnitt - når vi trenger å opprette et nytt felt eller en knapp, er sjansene gode at vi vil starte her, slik at vi kan duplisere samme grunnhøyde og avstand.
Deretter legger du til litt tekst over hvert lag. Bruk hvilken som helst skrifttype du vil ha, men det er best å beholde det til trygge skrifttyper? spesielt med skjemafelter der skriftutskifting ikke er ditt beste alternativ. Jeg har brukt Helvetica # 407a16, 12pt - men du kan bruke Arial, Georgia, Times, etc.
La oss nå legge til en enkel ytre glød til vårt "fokusfelt". Dette vil hjelpe folk å identifisere det når de bruker det. Vår glød er ganske subtil, men du kan gjøre det så lyst som du vil. Legg merke til at jeg også har lagt til en veldig subtil indre skygge - det er helt valgfritt, men det viser deg hvordan du legger til subtile effekter for å få feltet til å føle seg aktivt.
Deretter la vi kopiere det avrundede rektangelet som vi skal bruke til "rullegardinmenyen" og maske det av ved hjelp av Marquee-verktøyet og bruke en lagmaske. Dette skaper "knappen" for menyen, alt vi trenger å gjøre er å legge til en subtil gradient for å få det til å føles mer som en knapp - # d9edca til # f0f9e9.
Dette trinnet er super viktig fordi for nesten alle fremtidige lagerelementer (knapper, kryssbokser, etc.), kopierer vi denne lagestilen og limer den over tomme figurer. Ta et øyeblikk for å få det perfekt før du går videre, fordi det vil stille tonen til hele brukergrensesnittet.
Som jeg nettopp nevnte, lager vi våre knapper ved å bruke det samme grunnleggende avrundet rektangel fra før, og Kopier / Limer lagestilen fra Dropdown-menyen. Teksten vi bruker, bør være en fet variant av skrifttypen som brukes i tekstfeltene, bare legg til en enkel "lys" dropshadow (Drop Shadow, 75%, White, Screen, 1px Distance, 0 Size) for å fullføre pressbar tekst.
For å opprette den nedtrykte versjonen av knappen, vri bare gradienten ved å velge "Reverse" fra Gradient-menyen.
Ned-pilen er opprettet ved hjelp av "Custom Shape" -knappen og velge nedpilen fra biblioteket med elementer som kommer i lager i Photoshop. Du kan også lage din egen hvis du vil? formen er helt opp til deg.
Bare opprett pilen din, sett fyllfarge til "merkevarefarge" (vår er # 68b232) og bruk en enkel Inner Shadow (12% opacity, Distance 2, Size 3) for å få det til å føles litt innsett. Du kan selvfølgelig tinker med disse innstillingene - den blå versjonen i videoen vil vise deg en annen variant.
Til slutt kan du legge til en valgfri belysnings effekt ved å bruke en enkel 120px børste (0% Opacity) på et tomt lag. Plasser "børstet flekkmerke" forsiktig over toppen av knappen - masker du bare den børstede flekken over knappen (velg et utvalg av knappformen og bruk det nye valget som en lagmaske over den børste effekten). Still blandemodus til mykt eller hardt lys for å fullføre effekten.
Du må kanskje tinker litt med dette siste trinnet basert på fargene du bruker. Trinnene vil alltid være omtrent det samme skjønt:
Dette neste trinnet er super enkelt - bare lag 12px avrundede rektangler (firkanter for å være nøyaktig). Hvorfor 12px? Fordi det er den generiske punktstørrelsen for de fleste tekst på internett. Du kan gå større eller mindre i henhold til din egen skriftstørrelse.
Husk, vi kopierer / limer lagstiler fra den Dropdown Menu-knappen? Dette gjør tingene raske og ensartede.
Den samme prosessen går for radioknappene, bortsett fra denne gangen lager vi 12px sirkler i stedet for rektangler.
"D-Pad" er opprettet ved å duplisere og rotere pilen fra rullegardinmenyen med 90 grader noen ganger. Disse retningspilene er flotte når du trenger å lage en trekkspill-meny, jquery-glidebryter osv.
En enkel lastestang som dette er en fin måte å utvide allsidigheten til brukergrensesnittet ditt. Du kan ikke bruke det hele tiden, men det vil spare deg for mye tid for de få tilfellene du trenger det pronto! Lastebaren består av noen få skritt.
Bakgrunnsgrunnlaget for bakgrunnen er som følger:
Du kan lage basen av det aktive feltet på noen forskjellige måter, men her er hvordan den grønne ble bygget.
Deretter legger vi til de diagonale linjene som vil bli maskert over lastelinjen:
Belysningseffekten er bare litt av en bonus hvis du vil ha det. Jeg har opprettet den ved hjelp av en 120px børste (0% hardhet), så jeg har laget et nytt lag og klikket ned på musen en gang, og lagde en enkelt blott på siden. Deretter har jeg satt lagestilen til Soft Light og satt den til å maske over knappen. Du kan gjøre dette siste trinnet på noen måter - i eksemplet er det enkelt å lage et valg fra det aktive feltet (Hold Cntrl og Klikk på formen), og deretter påført den formen som en lagmaske.
Okay, vi er på strekningen nå! Rullefeltet er ganske enkelt å lage, men la meg gjøre noen få tips:
Her er bildene:
Et ofte oversett trinn for å lage et grunnleggende brukergrensesnitt er å legge til noen grunnleggende merkevarebygging og annen dokumentasjon i filen din. Visst, kan du legge til denne typen ting i et tekstdokument som følger med filen din? men da måtte folk åpne den opp. På den måten blir all grunnleggende informasjon (klientnavn, designer, versjon, type fil etc.) alle vist i filen, så det er ikke noe rom for forvirring.
Endelig kan du tilpasse dette til ditt hjertes innhold? bruk dine egne farger, fonter, lagstiler, etc. Legg til nye elementer som tagger, åpnet rullegardinmenyer, etc. Grensen til hvor langt du kan ta dette er helt opp til deg, så gå og ha det gøy med det!
Accentsconagua