Om du är en formgivare är den goda nyheterna om mobilapputrymmet det här: designen är allting. Oavsett om du bygger ett verktyg eller ett spel har utseendet en stor inverkan på både popularitet och användbarhet. Rubbade eller oorganiserade appar är svåra att förstå och svår att använda. Detta är inte att säga att ett "allvarligt verktyg" ska vara utsmyckat med en överdriven GUI. En bra appdesign är en som balanserar utseende med funktion.
När det gäller funktion finns det säkert vissa områden för apputveckling som inte är "designerens jobb" i sig, men har fortfarande stor inverkan på konceptet och i kreativ riktning. Om du arbetar på en app, och dessa jobb inte fylls, hitta någon som har dessa färdigheter att göra det eller prova själv. Hoppa över dessa steg kan leda dig till en dyr väg för revideringar när dina användare upptäcker att din app saknar funktionalitet eller har smärtsamma konstruktionsfel.
När en idé för en app har skett i allmänhet, är det dags att begränsa programmets funktionalitet till kärnan i vad appen gör. De populäraste programmen etablerar och underhåller fokus på en primär uppgift. För att göra detta måste du bestämma vad den primära uppgiften är genom att skapa en kortfattad förklaring av ditt programs huvudsyfte och dess avsedda publik, även känd som en produktdefinitionsförklaring.
Jag vet att det låter geekigt och meningslöst, men det här är den fras du borde ha tackat på din vägg hela tiden du arbetar med designen. Det är kärnan i vad appen handlar om. Så välj de få funktioner som kommer att bli de mest använda av de flesta av dina användare och är mest lämpliga för mobil sammanhang. Ett snabbt sätt att göra detta är att fylla i dessa ämnen för den ansökan du jobbar på:
(Din differentiator) (Din lösning) för (Din publik).
Här är ett exempel på iPhone: s "Foton" -app:
(Enkel att använda) (digital bilddelning) för (casual iPhone-användare).
Marknadsundersökning kan låta som en annan av de * gjorda * uppgifterna, men att hoppa över det här steget är ... dumt. Om du inte vill göra det, hyr någon annan som blir upphetsad över den här typen av arbete. Falla inte i fällan av "ingen annan har gjort det här" och "denna idé är helt original" eller "Jag vill hålla min idé ren, skyddad mot yttre inflytande." Om du köper in i dessa idéer kommer din app att vara perfekt, men bara för dig.
Det bästa sättet att korsa referens och dokumentera er alla är att klistra in det i ett kalkylblad eller ett ordbehandlingsdokument. Du kan skapa din egen, ELLER jag har skapat en på Google Dokument du kan använda: Kalkylark för mobilappsforskning. Jag har lagt in exempel som är relevanta för den app som vi ska arbeta med i den här artikeln. Byt bara ut dessa data med din egen! Detta gör det snyggt och enkelt att korsa referens till alla funktioner, fördelar och teknik som andra produkter erbjuder.
Jag säger "befintliga lösningar" snarare än "konkurrens" eftersom inte alla relaterade produkter kommer att konkurrera på din mobilmarknad. Vissa kan vara webbapps, stationära applikationer eller till och med offline källor i samma intressefält. Det bästa sättet att hitta befintliga produkter är att söka efter alla olika nyckelord relaterade till din ansökan på:
Under marknadsundersökningen vara beredd att avslöja tekniska begränsningar som du inte förväntade dig. Som designer kan du säga, "Vem bryr sig? Det är utvecklarens jobb! "Kanske så, men du skulle bli förvånad över hur många tekniska genomförbarhetsdiskussioner som hamnar på verkande design! Tro mig, du vill vara en del av den diskussionen.
Exempel på tekniska begränsningar kan vara: Vad händer om du vill skapa en app som låter dig blockera samtal från ett visst nummer? Uh, iPhone SDK stöder inte den funktionen. Alternativt kan vi säga att jag ville skapa en app som låter dig hitta närmaste kafé? Bättre tänk på hur många träffar din app kan få, eftersom Google och Yahoo! båda startar laddning när du överstiger en viss daglig volym sökförfrågningar i din app!
Det här är väldigt viktigt. När du blir avskräckt genom att lära sig om alla saker som inte är möjliga idag, goda nyheter - du kan fortfarande planera för dem i din design! Hade den första iPhone en videokamera? Nej, men utvecklare som hade sitt spel en gång började tänka på möjligheter i det området som oundvikligen skulle öppna sig i framtiden.
En annan anledning att planera för framtida funktionalitet är att applikationerna kan skala eller växa. Samma som webbplatser, går apps ofta genom tillväxtspurtar av ett slag eller annat. Ibland betyder det att lägga till funktioner eller innehåll, ibland betyder det att peeling saker bort! Tänk på hur du kan upprätthålla en balans mellan kreativitet och modularitet. Låter bitar enkelt och enkelt anslutas från en layoutsynpunkt och du får mycket mindre huvudvärk på vägen!
Att veta din målgrupp är mycket viktigt för att definiera en designstil, typografi och layout. Appellerar din app till revisorer eller 18-25 år gamla spelare? Att ha denna information och dyka ännu djupare för att utveckla "personas" är avgörande för att förstå vad demografiken vill se och det sammanhang där de ska använda appen.
Till exempel är Mike Todd en 18-årig högskolestudent i New York City. Detta berättar mycket mer om Mike. Han är i college, runt andra studenter i sin ålder, mest med liknande scheman. Mike kanske vill ha ett spel med 2-spelare interaktion. Skulle vi ha tänkt på 2-spelare interaktion om vi bara visste Mikes ålder? Beroende på appen, kanske eller kanske inte. Oavsett att utdragen personas ger rikedom till din brainstorming och hjälper till att dra nytta av funktionalitet som är viktigt för din målgrupp, och viktigt för designen.
När personas har definierats måste karaktärerna placeras i relevanta, sanna att de är "mobila" omständigheterna. Var är användarna som använder appen? Är de till fots, med bil eller tåg?
Fyrtio-tre år gammal Bill kör till ett möte i centrala London och vill sluta med en kopp kaffe. Ska appen kräva att räkningen knackar på skärmen flera gånger innan han hittar sin kafé? Absolut om din bror äger en kroppshop! Tänker genom de olika omständigheterna användarna befinner sig i och ringer in i scenarier där viss funktionalitet upprepas är nyckeln till att definiera vilka skärmar du ska utforma.
Sitemaps för mobil är kritiska för design. Att utforma ett flöde som är intuitivt, ger ett sätt att utforma enkla och användbara kontroller för att förstå innehållet i innehållet till annat innehåll. Sitemaps för mobilappar skiljer sig från webbplatsens webbplatskartor eftersom mobila appar inte borde presentera användaren med flera sätt att komma till ett ställe. En dörr till ett rum: det är det. Mobilanvändare har inte tid att göra fel, sedan gå "tillbaka" och försök hitta rätt väg.
Data som samlas in från användningsscenarierna definierar innehållet och kontrollerna som måste vara närvarande på de skärmar som definieras i webbplatskartan. Därifrån måste du utforma en preliminär layout som tar hänsyn till var och en av dessa designelement. Definiera ett rutnät och fastställa vikten av information med hjälp av färg, form och storlek på designelement.
Ergonomiskt sett håller användarna pekskärms mobila enheter på ett sådant sätt att tumpositionen vanligtvis pekar mot mitten av skärmen. Så, om du vill navigera användare runt appen snabbt, ge dem kontroller som gör det möjligt för dem att flytta runt med enheten med bara en hand!
Tänk också på hur många olika sätt innehållet kan gå på och av skärmen. Mobila lakan är till exempel ett bra sätt att dölja handlingsbara kontroller tills användaren är redo att använda dem.
Tänk på hur du kan minimera användarinmatning. Vem vill bli boggad med att skriva in en massa text? Ge användarna ett pickerbord så att de kan välja ett val från en meny istället.
I mobildesign kommer pappersprototyper att spara mycket tid. I likhet med alla design- eller illustrationsprocesser, med att ha iterationer av din design kan du utforska en större mängd olika designalternativ i en djupare grad. Och med pappersprototyper är det mindre "risk", mindre koppling till ett pappersskrot än en polerad Photoshop-fil. Till exempel är det viktigt att arbeta med postnoteringar är att kunna ordna om, lägga till eller ta bort skärmar tills flödet är rätt. Se den här Tumblr-tråden för en bra samling mobila trådramar.
När du har finjusterat dina pappersprototyper är det dags att föra dessa skisser till liv i Photoshop. Om du inte redan har hoppa tillbaka till mitt tidigare inlägg på iPhone Design Mallar och ta några att komma igång. I den artikeln hittar du också specifikationer för hur du konfigurerar dina filer med rätt storlek och upplösning. Om du har turen att arbeta med en utvecklare som kan skära ut bilder till dig, var snäll och beordra din fil med mappar.
Detta är förvisso en förkortad version av varje steg i den mobila designprocessen, så var god och lämna mig en kommentar nedan och låt mig veta vilket område du vill att jag ska förklara på!
Jen Gordon är en frilansdesigner som gick hårt för mobil 2008. Sedan dess har hon utformat dussintals gränssnitt för både iPhone och iPad. När hon inte är upptagen med att trycka på pixlar tycker hon om att skriva om design och skapa tillgångar för andra designers och utvecklare att använda. Nedan är en fantastisk iPhone Design Bundle som hon har monterat specifikt för MobileTuts-läsare!