Innhold
- Innfødt app
- 01. Brukere forventer kjente brukergrensesnittkontroller
- 02. Berøringsinngang endrer alt
- 03. High res tar over
- 04. Tiden er knapp
- 05. Eiendommen er liten
- 06. Brukere hater å skrive
- 07. Biblioteker og rammer kan hjelpe
- 08. Kontekst er alt
- 09. Hvite rom blir mørke rom
- 10. Wireframing er viktig
- Som dette? Les disse!
Linjen mellom et nettsted og en app for smarttelefonen din har blitt uskarpe de siste årene, ettersom HTML5 og CSS3, kombinert med JavaScript, har muliggjort mange skrivebordslignende interaksjoner innen nettsteder og webapper. Etter hvert som verktøy har forbedret seg, og smarttelefonmarkedsmetningen økte, blir mulighetene for webdesignere til å bruke sine ferdigheter til å designe apper.
Det er to grunnleggende tilnærminger for å designe en app ved hjelp av dine webdesign ferdigheter. Den første er å lage en webapp - et mobilorientert nettsted i det vesentlige. Du kan legge til HTML5-spesifikke funksjoner for å gjøre innhold tilgjengelig offline, men for alle praktiske formål er en webapp ikke noe mer komplisert enn et vanlig nettsted med et design som er orientert mot bruk på en smarttelefon eller et nettbrett.
Innfødt app
Den andre tilnærmingen er å bruke et rammeverk for å pakke inn nettstedet ditt i en innfødt app. Dette bruker samme kjernetilnærming for å bygge en app, men lar deg kompilere innholdet slik at det distribueres og installeres fra en appbutikk i stedet for via en nettadresse.
Begge metodene er mye brukt og har sine egne fordeler og ulemper. Men uansett om du designer en innfødt app eller en webapp, og du lager den for deg selv eller en klient, er mange av ferdighetene du har som webdesigner direkte overførbare til appdesign. Mye av den beste fremgangsmåten du har opplevd på nettet, gjelder også design av en app, men det er noen gyldne regler og ting du trenger å vite om appdesign - sjekk ut listen nedenfor, og legg til dine egne i kommentarer!
- Les alle artiklene våre relatert til appdesign her
01. Brukere forventer kjente brukergrensesnittkontroller
Akkurat som det er en språklig tilnærming til design av brukergrensesnitt (UI) på nettet, gjelder det samme for appdesign. Selv om det ikke er noe som hindrer deg i å lage et helt nytt grensesnittparadigme, trenger du en ganske god grunn til ikke å bruke de samme brukergrensesnittkontrollene som brukerne dine allerede vil være kjent med. Dette hjelper til med å gi god skilting innen appdesignet ditt, og får brukeren til å føle seg umiddelbart hjemme ved å bruke appen din.
Det finnes mange biblioteker på nettet som automatisk genererer brukergrensesnittelementer for å matche systemets standarder, i henhold til enheten som brukes til å vise webappen din. Ta en titt på Sencha Touch og jQuery Mobile for to eksempler.
02. Berøringsinngang endrer alt
Det høres kanskje opplagt ut, men når du designer for apper, er den primære inndatametoden ikke en mus og et tastatur, men en finger. Dette betyr at du må glemme å lage museovergangseffekter, og i stedet vurdere hvordan du kan gi en meningsfylt brukeropplevelse med passende tilbakemelding og skilting når innholdet ditt blir manipulert av (og skjult med) en finger eller fingre.
En vanlig feil gjort av webdesignere er å stole på en musemarkering for å gyte en undermeny fra en navigasjonslinje. Mens mobile nettlesere prøver å ta hensyn til dette, er det bedre å utforme på en slik måte at grensesnittet ditt er optimalisert for berøring.
03. High res tar over
Da Apple opprettet iPhone 4, introduserte de en skjerm med høy oppløsning kalt Retina-skjermen. Dette gir et høyere antall piksler per kvadratmeter, slik at tekst og bilder ser skarpere ut. Høyoppløselige skjermer blir nå vanlige på tvers av produsenter, men de presenterer et interessant problem for designere. Når du designer brukergrensesnittelementer, må du vurdere oppløsningen til enheten som brukes for å vise dette grensesnittet.
For eksempel vil en knapp som er designet med en størrelse på 100 px vises halvparten av størrelsen (en fjerdedel av området) på en Retina-skjerm som den vil på en standardskjerm. Det er måter å tvinge skjermer med høy oppløsning til å doble opp pikslene sine, slik at grensesnittelementer med lav oppløsning blir gjengitt i samme størrelse uavhengig av skjermoppløsningen, men en vanlig tilnærming er å lage to versjoner av hvert element i en app - en for skjermer med høy oppløsning og en for skjermer med lavere oppløsning. På denne måten kan du dra nytte av de skarpe høyoppløselige skjermene mens du fortsetter å støtte eldre enheter.
04. Tiden er knapp
En av egenskapene til mobile enheter er at de pleier å brukes i korte spurter. I stedet for å sette seg ned foran en skjerm, forventer brukere av smarttelefoner og nettbrett at de raskt kan komme til innholdet, tjenesten eller funksjonaliteten de er ute etter.
Av denne grunn er det viktig å vurdere hvert element i grensesnittdesignet og presentasjonen for å sikre at du får informasjon, spill eller kjøpsknapp på brukerens skjerm så raskt som mulig. Det betyr ingen komplekse navigasjonsruter, og en lett forståelig struktur til appen din som gjør det klart hva du finner, hvor. (Selvfølgelig bør denne regelen også gjelde for webdesign, men det er verdt å revidere!)
05. Eiendommen er liten
Apper blir vanligvis sett på små skjermer, med begrenset skjerm fast eiendom. I tillegg til den lille skjermen, er det andre aspekter ved maskinvaren du må ta i betraktning når du designer et app-grensesnitt. Tenk for eksempel på hvor enkelt eller vanskelig det vil være å trykke på en knapp i designet. Knappene må ha en minimumsstørrelse som ligner en fingerspiss, uavhengig av oppløsningen til enheten som brukes.
På nettet er det vanlig å plassere knapper eller verktøylinjer helt øverst i nettleservinduet. På en mobilenhet vil det alltid være vanskeligere å treffe knappene på kanten av skjermen nøyaktig med fingeren, spesielt hvis brukeren har et tettsittende etui til telefonen eller nettbrettet. Prøv å gi et godt skille fra kanten av skjermen for brukerinteraktive elementer i designet ditt, og sørg for at du får plass til folk med tykke fingre og små telefoner!
06. Brukere hater å skrive
La oss innse det, å skrive på en moderne smarttelefon er ikke akkurat morsomt. Det er mye bedre enn å bruke et numerisk tastatur for å trykke ord, men det er fortsatt en potensielt veldig frustrerende prosess. Hvis du presenterer et skjema som krever brukerinntasting, kan du prøve å holde det så enkelt som mulig og minimere mengden tekstinput som kreves.
Ved å bruke noen av de moderne HTML5-skjemaelementene kan dette hjelpe, ved å be enheten om å presentere et passende tastatur når du for eksempel bruker inngangstype = "e-post" />, men hvor som helst ber du brukerne om å skrive inn mer enn et par ord du bør vurdere om du hindrer brukervennligheten til appen din, og risikerer opprørende eller verre å slå av brukerne.
07. Biblioteker og rammer kan hjelpe
Du trenger ikke holde deg til en webapp! Hvis du allerede har ferdigheter i HTML, CSS og JavaScript, kan du bruke disse til å lage innfødte apper for distribusjon i alle de populære appbutikkene ved å dra nytte av et av det økende antall rammer og biblioteker som er tilgjengelige.
Disse rammene gir et skall som standard webkoden din gjengis i, og skaper effektivt en hybridapp som installeres naturlig på brukerens enhet, men utnytter dine eksisterende ferdigheter. Ta en titt på PhoneGap, Sencha, Corona Labs og Appcelerator for å få en følelse av hvor enkelt det er å lage en innfødt app.
08. Kontekst er alt
Noe som webdesignere vanligvis ikke trenger å vurdere er brukskontekst. Historisk har nettsteder blitt åpnet fra stasjonære datamaskiner eller bærbare datamaskiner, og er derfor i stand til å tilby alle detaljer og tjenester til den besøkende. I appverdenen er imidlertid kontekst ekstremt viktig.
Hvis du designer en app for en restaurant, vil informasjonen brukerne vanligvis vil ha være hvordan de kommer til restauranten, hva som er tilgjengelig å spise og hvordan du bestiller. Dette er sant fordi appbrukere ofte er mobile - hvis de satt ved skrivebordet sitt, ville de ringe opp restaurantens nettside, der du har råd til å gå i detalj om innredningen, eierens kjæledyr og så videre.
Når du designer apper, blir bruksscenariet diktert av konteksten, og dette bør informere din designtilnærming (både fra et arkitektonisk / informasjonsmessig og et estetisk synspunkt).
09. Hvite rom blir mørke rom
Hvis du er trykker eller nettdesigner, har du kommet over ideen om at 'hvite rom' er bra. Å gi elementer i designrommet ditt for å puste kan bidra til at layoutet ditt føles mer profesjonelt, lettere å bruke og mindre anstrengende for øyet.
Det samme gjelder appdesign, men vanligvis må hvite rom være 'mørkt rom'. Dette er fordi brukerinngang har en tendens til å bli uthevet med lysere felt på mobile enheter, noe som gjør dem lettere å få øye på mot typisk mørkere eller lysere bakgrunn. Vurder dette skillet mellom de to mediene når du designer for apper.
10. Wireframing er viktig
Det er fullt mulig at du som webdesigner allerede har trådramming av nettstedene dine. Wireframing er en veldig nyttig måte å spotte brukeropplevelsen før du går ned til det morsomme med å designe knapper, lage typografien din og velge bilder.
Desto viktigere er det i appdesign fordi det blir en nyttig måte å beskrive sofistikerte brukerinteraksjoner uten å måtte kode opp fungerende design. Pidoco, justinmind og iPhoneMockup er tre gode onlineverktøy for å få trådrammene dine i gang - for mer sjekk ut vår liste over de beste wireframing-verktøyene.
Ord: Sam Hampton-Smith
Som dette? Les disse!
- Lag et perfekt humørbrett med disse pro-tipsene
- De beste Photoshop-pluginene
- Den ultimate guiden for å designe de beste logoene
Savnet vi noen viktige ting nettdesignere trenger å vite om appdesign? Gi oss beskjed i kommentarene nedenfor!
