Share
Mens verden går bonkers for touch-kontrollerte grensesnitt, vil denne artikkelen fokusere på den mer tradisjonelle input-metoden til musen. Jeg foreslår en tilnærming til progressiv forbedring for håndtering av interaksjonsdesign; mer spesifikt en oversikt over CSS markør regel.
Mobil designstrategi blir stadig viktigere hver dag. Samfunnets forgang til lydhør webdesign er å forme og definere utformingen av brukerinteraksjoner og kontroller da de blir mer og mer optimalisert for berøringsinngang. Imidlertid går den veletablerte, presisjonsmåten til musen ikke når som helst snart. Dette faktum, i takt med den universelle naturen på nettet, støtter at tradisjonelle og berøringsinndataoptimaliseringer skal støttes fullt ut i webgrensesnittdesign.
De fleste programvare, fra stasjonære applikasjoner til operativsystemer til enkle nettsteder, bruker en rekke nyttige GUI-pekere. Disse pekepunktene hjelper brukerinteraksjonen ved å foreslå brukeren hvilken oppgave de kan oppnå på det spesifikke punktet i programmets koordinater på skjermen.
Vil du skrive inn eller manipulere tekst? Du vet at du kan når du ser en "i-stråle" -markør. Vil du endre størrelsen på et vindu? Du vet at du kan (og i hvilken retning) når du ser en endringsstørrelse markør. I eksemplet ovenfor kan du se hvordan resize-markøren visuelt foreslår de mulige retningene vinduet kan endres på.
Ved å manipulere markør grafikken i sammenheng med grensesnittets kontrollfunksjon, instruerer du brukeren om når, hvor og hvordan de kan manipulere programvaren.
Et virkelig godt eksempel på bruk av markørdesign for å kommunisere funksjon finnes i Adobes Creative Suite.
Verktøyikonene i Adobe-pakken reflekterer grafisk deres medfødte funksjonalitet. I mange tilfeller når et bestemt verktøy er valgt, reflekterer markøren nøyaktig eller gjenspeiler verktøyets ikon. Dette enkle brukergrensesnittet er veldig kraftig i å visuelt kommunisere formålet og funksjonen til hvert verktøy i programmets ekspansive verktøysett.
De mer veletablerte inngangsmetoder som mus, pekepinn og tastatur gir en ekstra form for visuell tilbakemelding som ikke er tilgjengelig for berøring av enheter: svever. Bevegelsesinteraksjoner gir brukerne mulighet til å utforske og lære om applikasjonen gjennom tilknyttede hover-UI-elementer. Disse elementene hjelper med å kommunisere til brukeren hvilke objekter som er interaktive og hvordan de kan manipuleres.
Naturen på nettet krever universalitet og tilgjengelighet ... denne typen all-inclusive, input-agnostic tilnærming presenterer en unik designutfordring
Imidlertid ble sveveinteraksjoner (for eksempel verktøytips) designet for å løse brukerproblemer spesielt for musen. De blir uvirkelige når de implementeres på berøringsskjerm enheter. Fordi webens natur krever universalitet og tilgjengelighet, må webapplikasjoner være utformet for å fungere for både berørings- og ikke-berøringsenheter. Denne typen all-inclusive, input-agnostic tilnærming gir en unik designutfordring. Brukergrensesnittene må stå for berøring og ikke-berøringsenheter.
Denne web-sentriske designutfordringen med å omfavne en rekke inngangsmetoder krever en tilnærming til progressiv forbedring (som forresten har vært fortalte for en tid).
Selv om netttrafikken i økende grad blir tatt over av mobile enheter (og dermed berøringsskjerm enheter), CSS markør regelen er langt fra foreldet. Du kan designe et nettsted eller en applikasjonsgrensesnitt med en inngangs-agnositc-tilnærming som vil fungere på tvers av en rekke enheter. Enten disse enhetene styres med en berøringsskjerm eller en mus, vil CSS-markørregelen fungere som en ekstra (men ikke viktig) forbedring av brukergrensesnittet i visuell tilbakemelding for støttede enheter.
Som nevnt kan CSS-markører brukes til å gi hint til brukeren om hvilken funksjon musen kan utføre. Det finnes en rekke markørtyper du kan velge mellom som er innebygd i nettleseren eller operativsystemet til brukerens datamaskin (du kan se en liste over dem på quirksmode.org). De innebygde markørene er fine, men du må huske at de er eksklusive til brukerens nettleser / operativsystem. Derfor kan kontrollene variere fra en datamaskin eller nettleser til en annen. Her er et eksempel på hvordan du endrer markøren:
.elementClass cursor: move;
Hvis du trenger en markør som ikke er inkludert som standard, eller ikke støttes på alle nettlesere, har du muligheten til å inkludere et egendefinert markørbilde. Dette kan defineres på samme måte som font-family regelen, hvor du gir tilbakebetaling i tilfelle den egendefinerte markøren ikke lastes inn.
Accentsconagua
.elementClass cursor: url ('path / to / cursor.png'), flytte; Du kan til og med definere posisjonen til markøren (punktet der klikk er registrert). Disse er X- og Y-verdier som er i forhold til standardpunktet '0, 0'; øverst til venstre for ditt egendefinerte markørbilde. I eksemplet nedenfor flytter vi markøren 10 piksler fra venstre og 5 piksler fra toppen.
.elementClass cursor: url ('path / to / cursor.png') 10 5, flytt; Dessverre er ikke nettleserstøtte for egendefinerte markører like enkelt som reglene som er definert ovenfor. Det er noen hangups for å få markører til å fungere ordentlig over nettlesere.
Internet Explorer 7 og 8 støtter bare .CUR-filer. CUR-filer er som ICO-filer, bortsett fra at du kan definere markørens "hotspot" fra selve filen. Du må oppgi en .CUR-fil hvis du planlegger å støtte IE 7 og 8.
Opprette din egen .CUR-fil er utenfor rammen av denne artikkelen. Du kan imidlertid prøve å ta en titt på dette Photoshop-plugin som en god start.
Alle nettlesere vil tolke den egendefinerte markørens URL som relativ til plasseringen av stilarket (ifølge W3Cs anbefaling). Imidlertid vil Internet Explorer (7-9) tolke nettadressen i forhold til HTML-roten.
Så, la oss si jeg starter et nytt prosjekt. Den har "index.html" i roten, sammen med mapper for bilder, stilark og eventuelle tilpassede markører. Det ville se slik ut:
Som du kan se er mine stilark og tilpassede markører helt skilt fra hverandre.
I dette tilfellet må jeg skrive markørregelen med fallbacks for å støtte moderne nettlesere med .PNG-markører samt IE med .CUR-filer:
.elementClass cursor: url (... /cursors/cursor.png), / * Moderne - i forhold til dokumentet * / url (cursors / cursor.cur), / * IE - i forhold til roten * / default; / * Innebygd tilbakebetaling * /
Alternativt kan du bruke absolutte baner i CSS, selv om du fortsatt må gi tilbakebetaling for eventuelle. CUR-filer:
.elementClass cursor: url (/cursors/cursor.png), / * Moderne * / url (/cursors/cursor.cur), / * IE * / default; / * Innebygd tilbakebetaling * /
Hvis du vil vite mer om de dypgående detaljene og hangups for implementering av CSS-markører på tvers av nettleseren, kan du se på useragentman.com. Husk at hvis du støtter berøringsenheter, kan CSS-markører være en progressiv forbedringsfunksjon. Det betyr at det ikke nødvendigvis krever støtte for IE (fordi brukere på berøringsskjermene ikke ser den egendefinerte markøren heller).
Hvis du implementerer CSS-markører som et aspekt av progressiv forbedring, kan det være nyttig å se nøyaktig hvordan hver innebygd markør skal vises på tvers av nettlesere og plattformer. Dette gjør at du kan ta informerte beslutninger om hvordan du utformer grensesnittet. Her finner du en god referanse for å se hvordan markørene ser på tvers av operativsystemene:
Nettlesere testet
Nettlesere testet
Nettlesere testet
Som du kan se, er det forskjellige subtile forskjeller som kanskje ikke påvirker utformingen av grensesnittet ditt. Ta en titt på det komplette diagrammet for å sammenligne markører over nettlesere og plattformer.
Som du kan se, er markørregelen i CSS et ekstra verktøy du kan bruke til å hjelpe brukerinteraksjon med nettstedet ditt eller applikasjonen. Men du har sikkert lagt merke til hvor forskjellig og variert hver markør kan være, avhengig av brukerens nettleser og operativsystem.
Disse bemerkelsesverdige forskjellene i markører, i tillegg til den økende bruken av berøringsskjerm enheter, har forvist markør Styre til en tilleggsrolle i å hjelpe UI-samhandling, men det gjør det ikke forældet. Det er mye bedre å forsiktig bruke markøren som en funksjon av progressiv forbedring enn det er å helt se bort fra det. Og nå som du vet hvordan du bruker den, gå og skape noe fantastisk!
