UI Design for utviklere: Introduksjon
to
Del
38
Del
Dette Cyber mandag Envato Tuts + Kursene vil bli redusert til bare $ 3. Ikke gå glipp av
Lego vs utviklere -. Det er et argument like gammel som datamaskiner. Sannheten er, men heller ikke kan leve uten den andre. En strålende UI design er like verdiløs uten funksjonalitet som er den beste stykke kode med en stygg, ubrukelig frontend. I dette første innlegget på UI Basics for utviklere, jeg kommer til å prøve og legge ut noen enkle grunnregler som utviklere kan følge for å sørge for at deres programmer, maler og prototyper er like vakker som selve koden -. Og brukbar til boot
Tenk:. første inntrykk er det siste inntrykket
Alignment
Justering refererer til plasseringen eller retningen på et element i forhold til et annet element eller til seg selv. Når vi henviser til to elementer som er innrettet i forhold til hverandre, refererer justering vanligvis til hvilken side av begge elementer er på linje. I sammenheng med teksten, refererer justering til side som teksten er forankret i en rett linje.
Form Design
I bildet ovenfor, den andre eksempel på en enkel form design viser etiketter som er høyrejustert til hverandre med input felt som er venstrejustert. Dette sikrer at sammenhengen mellom hver etikett og dens inntastingsfeltet er klart og brukeren ikke blir forvirret hvis noen etiketter er for små, mens andre er lange
Tenk:. Sørg for at input felt er ikke så langt unna den lengste etiketten. Hvis variasjonen i bredden er liten, kan du prøve å høyre samkjøre etiketter og venstre-samkjøre feltene.
Tekst
For tekst, er det ideelt å bruke venstre-justering når desiging for skjermen. Siden de fleste for-skjermtypen rende metoder er ute av stand til å fordele plass på riktig måte når rettferdiggjør tekst til begge sider, holder venstre justering teksten lesbar og godt organisert. Du kan selvfølgelig bruke sentrum og rett justering der designen krever det, men de er vanligvis forbeholdt spesielle tilfeller og mindre biter av tekst.
Flow
Den primære hensikten med enhver bruker Grensesnittet er å la brukergrensesnittet med programmet. Dette, tro det eller ei, ikke kommer til å være mulig med mindre du fortelle brukeren hva han trenger å gjøre og i hvilken rekkefølge. Siden du ikke vil være der bak hver bruker for å hjelpe dem med dette, må grensesnittet for å gi alle signaler. Her er noen spørsmål å stille når man skal vurdere hvorvidt den planlagte arbeidsflyt er hensiktsmessig:
Hvor avgjørende er det at oppgaven skal utføres i et sett rekkefølge av trinnene
Er det åpenbart for? brukeren hvor du skal begynne og hva de skal gjøre neste
Er det tiltenkte utfallet uttalt eller underforstått -? implisitt, om ikke eksplisitt
La oss ta eksempel av en søkekategori utvalg på iStockphoto. I dette tilfellet, kan jeg enten søke alt eller velge en bestemt kategori for å begrense søkene mine til den type informasjon. Siden den primære loven er å legge inn et søkeord og trykk søk, bør de være ganske innlysende. En mulig skritt i mellom, er å velge en kategori, som kan være en nedtrekkslisten mellom (du gjettet det riktig) i søkefeltet og søkeknappen.
Et annet eksempel er den dialogen inntekter /utgifter innspill i den cashbase app. Feltene er ordnet etter den typiske arbeidsflyten man skal bruke til å logge slik informasjon: oppgi beløpet (som er det viktigste elementet), velge en kategori, legge til et notat om nødvendig, og klikk på Legg til. Sekundær informasjon som vil bli brukt mye sjeldnere - som datoen som standard er i dag, og muligheten til å gjenta eller avbryte - er tilgjengelig, men mye mer subtil
Videre lesning:
.
Design for Flow
Nærhets
Relaterte elementer i et grensesnitt skal grupperes sammen. Dette kan høres ut som sunn fornuft når jeg nevner det, men det er ikke alltid godt forstått. Grunnen alle sidenavigasjonskoblinger på de fleste nettsteder er lagt ut i en enkel horisontal bar, er slik at brukeren kan identifisere forholdet på et øyeblikk, og ta et valg for å samhandle med dem uten forvirring.
La oss se på dette eksempelet fra Gmail - en app som mange av bruk på en jevnlig basis. Dette er verktøylinjen som vises øverst når du åpner en mail. Selv om alle disse knappene utføre en handling på den åpne meldingen, de er videre gruppert sammen basert på hva de gjør - handlinger som man bruker for å bli kvitt den meldingen (arkiv, spam, slette), for å endre betydningen av meldingen (når bruker prioritet innboks), label-relaterte handlinger, og til slutt en drop-down med sekundære alternativer.
Et annet eksempel på god bruk av nærhet er alternativlinjen i Zootool. Verktøylinjen nederst er delt inn i tre sett, som svarer til de tre rutene i app: Listen pakker på venstre, posten vinduet i midten, som inneholder alle dine bokmerker, og detaljruten til høyre Ikke alt i et brukervennlig grensesnitt, eller layout for den saks skyld, bærer samme betydning som alt annet. Hierarki er arrangement av elementer på en måte som betegner det som er høyere i orden, hva som kommer etterpå, og så videre. La oss se på dette eksempelet her og prøve å identifisere hva den rekkefølge er. Siden alt - titler, etiketter og avsnittstekst - ser det samme, man må lese gjennom alt for å gi mening. Hvis det samme grensesnittet ble forskjøvet bare litt som nedenfor, er enorm den samlede virkningen på lesbarhet og i sin tur brukbarheten av grensesnittet. Som en generell regel, siden overskriften skulle være største og mest synlige på skjermen. Dette etterfølges av Overskriftene, undertitler og deretter mindre etiketter. Paragraf tekst kan være mer eller mindre fremtredende avhengig av formålet. Det er heller ikke begrenset til tekst. Primær handlingsknapper kan skilles fra sekundære handlinger ved å gjøre dem lysere, større eller mer avansert. Input felt for obligatoriske innganger kan gjøres tydeligere enn de andre. Jeg kunne gå på, men jeg tror du får ideen. En annen svært viktig faktor når man designer grensesnitt er å sikre klar differensiering mellom elementer. Selvfølgelig, du vil at teksten skal kunne leses på bakgrunnen, men derimot går utover bare å bruke lys tekst på mørk bakgrunn eller vice versa. Overskrifter og avsnitt teksten skal være klart kan skilles. Paneler og navigeringslinjer må holdes adskilt fra hverandre slik at brukeren vet hva som er hva. Listen fortsetter Kontrast kan etableres ved hjelp av ett eller flere av følgende egenskaper:. Dette burde være opplagt, men det er utrolig hvor ofte folk skli på dette punktet. Hvis bakgrunnen er lys, du tydeligvis vil at teksten skal være mørkt for å sikre lesbarhet. Selv om det i teorien gratis farger skal fungere godt sammen, er det ikke alltid så lett. Prøv å plassere lys grønn tekst på rød bakgrunn, og du vil vite hva jeg sier. Mulighetene her er uendelige, så min første anbefaling til alle som ønsker å velge farger er å plukke opp en populær fargepalett fra nettsteder som Adobe Kuler eller ColourLovers. De bidro, evaluert og stemt opp av lidenskapelige brukere som vanligvis kjenner veien rundt farge. Alle grunnleggende fargetilpasning og kontrast er vanligvis tatt vare på, så det er bare et spørsmål om å avgjøre hvilken farge ordningen fungerer i appens sammenheng En liten advarsel om -. Være svært skeptisk til å gå over med farge . Du ønsker ikke dem til å overskygge nytten og brukervennlighet av appen En annen god måte å skille mellom elementer -. Basert på hierarki, kategorisering, eller visuelle flyten - er å bruke forskjellige størrelser. Dette gjelder tekst så mye som den gjør på bilder, bakgrunner og statiske eller interaktive elementer. Det kan være lurt å legge mer vekt på den primære handlingsknapp, for eksempel, og holde de sekundære knapper relativt mindre tilgjengelig. Eller valgfrie meldingene kan være mindre og lettere enn de primære etiketter i et skjema. TeuxDeux app gjør en glimrende jobb med å bruke farger til å skille mellom fortid, nåtid og fremtid dager. Siden oppsettet er rettet mot en arbeidsuke, er forskjellige størrelser av tekst som brukes for å sikre at navnene på dagene er lett å identifisere, mens datoene er relativt mer subtil. Siden det primære formålet med noen brukergrensesnittet er å gi brukerne samhandle med app, er det viktig at elevene intuitivt vet hva de skal gjøre. Som skaperne av grensesnittet, er det veldig lett å glemme at du ikke vil være der for hver bruker for å fortelle dem hva de skal gjøre. Heller ikke brukere har tålmodighet til noe mer for å lese manualer og raske start guider før du stuper uti ved hjelp av en app. Grensesnittet er nødvendig for å gjøre det rikelig klart hvilke deler av den er klikkbare, touchable, flyttbare - kort sagt, interaktiv. Alle vet hvordan å flick en elektrisk bryter, ikke sant? Det som gjør det åpenbart for alle at en bryter må trykkes på et visst punkt å endre tilstand kalles affordance Her er noen eksempler:. Kommer med bryteren eksempel, hvordan vet du om flicking bryteren gjorde hva det var ment å gjøre? Lyset kommer på eller går av, eller i noen tilfeller et lys inne i bryter bidrar til å gjøre det klart om bryteren er på eller av. I et program, kan slike tilbakemeldinger være veldig tydelig i tilfeller der en knapp navigerer til en annen side eller åpner en popup, men hva med situasjoner der alt den gjør er prosess noen data i bakgrunnen - som når du lagrer endringene til brukerinnstillingene? En slags feedback mekanisme er kritisk til å la brukerne få vite deres handlingen var vellykket. Dette kan være så enkelt som en " innstillingene ble reddet " melding, en kort varsel øverst på siden, eller en rask høydepunkt rundt området som ble oppdatert. Når du legger til en ny oppgave i Remember the Milk, det kan enten vises i listen på den samme side, eller bare få lagt til en annen liste i bakgrunnen (hvis du for eksempel, oppgaven er tildelt en annen kategori). Tilbakemeldingene for handlingen er derfor gitt på to nivåer: Teksten i din app -. alt fra logo til titlene, etiketter og kopier - er din primære modusen for kommunikasjon med brukerne. Siden det er hvordan brukerne tilgang til informasjon om app eller gjennom det, hvordan du setter den typen kan bety forskjellen mellom suksess og fiasko. Selvfølgelig titler må være større enn brødteksten og den fine print må være, vel, fint; men en rekke andre avgjørelser også påvirke hvordan brukerne bruker informasjon Trinn en:. definere skrifter. Det overrasker meg hvor mange utviklere rett og slett aldri gidder å endre hva skrift sin tekst blir generert i. Standard fonter endres fra OS til OS og nettleser til nettleser, noe som betyr at med mindre du eksplisitt angi hva skriften du vil bruke, er teksten kommer til å se annerledes ut i hver OS og nettleser kombinasjon. Dessuten Times New Roman - er bare ikke en god font for lesing på skjerm - som mange nettlesere fortsatt bruke som standard skrift. Min første anbefaling er ofte å bruke en sans-serif font, selv om Georgia eller den nye Cambria skrift i Windows 7 ser også bra. Hvis du velger å bruke andre enn de trygge, universelt tilgjengelige seg som Arial /Helvetica, Georgia, Tahoma etc. fonter, sørg for at det er en måte å få dem gjengi samme måte på alle plattformer. Hvis Flash er din utviklingsmiljø av valg, legge dem der det er nødvendig. For HTML /JS baserte apps, bruker @ font-face i CSS eller noen av de web font tjenester som Typekit eller Google Webfonts. Husk imidlertid at disse teknikkene komme med en påminnelse ekstra filstørrelser for innebygde skrifter. Hvis hastigheten og responsen er viktig for deg, stikker til base skrifter er det beste alternativet Disclaimer:. Ja, jeg vet at Arial og Helvetica er ikke akkurat like, men de er like nok for de fleste brukere til ikke merke forskjellen. Hvor mye plass mellom to linjer med tekst er det ledende. Du vil ha den ledende av din avsnittstekst (line-height i CSS tale) å være minst 140% av skriftstørrelsen for å sørge for at det er lett lesbar. Eventuelle mindre og teksten kommer til å være mye vanskeligere å lese og - mer imporantly - for å skanne gjennom Hvis du planlegger å oversette programmet til oither språk -. Og du egentlig burde - det er best å teste grensesnittet tidlig med ulike skript. I det minste, kan mengden plass et bestemt budskap krever variere drastisk på tvers av ulike skript. De østasiatiske skript bruke færre ord på et gjennomsnitt, men trenger en større skriftstørrelse, indisk (indiske) scripts må også være litt større for å være lesbare og Midt-Østen skript (som arabisk) går fra høyre til venstre i stedet for den vanlige venstre -til-rett. Det er om det for nå. Jeg håper disse tipsene dekket nok grunnleggende for deg å begynne å bruke dem i prosjektene dine med en gang. Som med de fleste designrelaterte fag, det er ingen harde og raske regler å følge, og alle har sin egen vri på hvordan ting skal fungere. Så hvis du er uenig med noen av mine forslag ovenfor - eller selv om du er enig med dem, men har et annet perspektiv - la oss høre om dem i kommentarfeltet Neste opp, vil vi ta alt dette visdom og prøve. bruke det på en faktisk grensesnitt. Følg med! Anmeldelser Videre lesning:
Nærhet i Design: Hvorfor jeg ikke kan bruke min bilens A /C
Design Basics: Proximity (Eller hvorfor Skypes " End Call " Button er helt feil)
Hierarki
Contrast
Color
Størrelse
Interaksjon
. På den flate overflaten av en skjerm - desktop, mobil eller på annen måte - kan ulike teknikker benyttes for at brukerne intuitivt klikke på en knapp eller type inne et inntastingsfelt. Når du oppretter teksthyperkoblinger, og legger en understreking for koblingen er den mest brukte standarden, selv om det er mange andre kreative måter å gjøre det
en grønn høydepunkt vises i et par sekunder bak oppgaven i listen for å peke på hvor det har blitt lagt til, og Selge < li> vises en meget fremtredende melding på en gul bakgrunn på toppen av siden la brukeren vet hva som egentlig skjedde
Typografi
Fonts
Ledende
Lokalisering
innpakning opp