Yksi kilpailija näyttää viimeistellyltä joka näytöllä. Toinen näyttää ahtaalta ja vanhanaikaiselta, vaikka molemmat myyvät samanlaisia palveluja. Ero johtuu yleensä mobiilisovelluksen suunnittelusta ja sen takana olevista tavoista. Huomaat eron heti, vaikka et osaisi vielä nimetä jokaista sääntöä.
Mobiilisovelluksen suunnittelussa korostuvat peukalon ulottuma-alueet, yksinkertainen navigointi ja offline-tilat. Tässä luvussa kerrotaan selkeästi, mitä se tarkoittaa, miksi se vaikuttaa verkkosivustoosi ja markkinointiisi ja miten sitä sovelletaan ilman jargonia. Näet myös, miten mobile first -suunnittelu liittyy samaan kokonaisuuteen. Edetään vaihe vaiheelta.
Mobiilisovelluksen suunnittelun ydinajatukset
Mobiilisovelluksen suunnittelussa korostuvat peukalon ulottuma-alueet, yksinkertainen navigointi ja offline-tilat.
Mobiilisovelluksen suunnittelun mallit ohjaavat myös mobiiliystävällisten verkkosivustojen tekoa.
Mobile first -suunnittelussa sama painotus pätee pienillä näytöillä.
Käytäntöön
Pidä tärkeimmät toiminnot helposti peukalon ulottuvilla puhelinasetteluissa.
Tutustu lukuihin verkkosivuston käyttökokemuksen parantaminen ja verkkosivuston käytettävyys, niin yhdistät tämän aiheen moduulin muuhun sisältöön.
Pienet johdonmukaiset parannukset voittavat satunnaiset täysuudistukset, kun vasta opettelet.
Käytännön tarkistuslista tälle päivälle
Pidä tärkeimmät toiminnot helposti peukalon ulottuvilla puhelinasetteluissa.
Kun käyt sivua läpi, kysy, näkyykö mobiilisovelluksen suunnittelu jo ensimmäisellä vierityksellä mobiilissa. Jos ei, vaihda osioiden järjestystä, ennen kuin viimeistelet yksityiskohtia.
Ota kuvakaappaukset ennen muutoksia ja niiden jälkeen, niin näet, mikä auttoi mobiilisovelluksen suunnittelussa sivustollasi.
Jaa lista jokaiselle, joka päivittää sivustoasi, jotta mobile first -suunnittelu pysyy yhtenäisenä uusilla sivuilla.
Valitse yksi mittari seurattavaksi tässä kuussa, esimerkiksi sivulla vietetty aika tai lomakkeen aloitukset. Näin suunnittelumuutokset kytkeytyvät liiketoiminnan tuloksiin, eivät pelkkään makuun.
Miten tämä aihe liittyy koko brändiisi
Visuaaliset valinnat eivät tavallisesti jää yhdelle sivulle. Mobile first -suunnittelussa sama painotus pätee pienillä näytöillä.
Somejulkaisujesi, sähköpostiesi ja painettujen materiaalien tulisi toistaa samaa hierarkiaa, värejä ja kirjasinsääntöjä kuin verkossa.
Kun brändin visuaalinen ilme alkaa hajota, asiakkaat aistivat hienoisen epäsuhdan, vaikka eivät osaisi selittää sitä.
Käytä lukua suunnittelun johdonmukaisuus vertaillaksesi muistiinpanoja tämän moduulin toiseen lukuun.
Mobiilisovelluksen suunnittelun mallit ohjaavat myös mobiiliystävällisten verkkosivustojen tekoa.
Kysymykset, jotka usein sivuutetaan
Lisätermit, kuten mobile first -suunnittelu ja mitä on ui, auttavat löytämään syvempiä esimerkkejä ja vertaamaan työtäsi yleisiin standardeihin.
Mobile first -suunnittelussa sama painotus pätee pienillä näytöillä.
Kirjoita ylös yksi ennen ja jälkeen -muutos, jonka testaat toimivalla sivulla tällä viikolla. Pienet mitatut muutokset voittavat epämääräiset suunnitelmat.
Yhteinen sanasto mobiilisovelluksen suunnittelusta vähentää korjauskierroksia suunnittelijoiden ja toimistojen kanssa.
Työkalut, jotka helpottavat visuaalisia päivityksiä
Monen asettelu- ja tyyliongelman korjaaminen ei vaadi omaa koodia. Visuaalisella editorilla säädät välit, värit ja typografian ja esikatselet samalla mobiili- ja työpöytänäkymät.
WEMASYn Sivustonrakentajassa on visuaalinen muokkaus, joten voit julkaista muutokset odottamatta kehittäjää jokaisen säädön kohdalla. Avaa Sivustonrakentaja, kun haluat ottaa oppimasi käyttöön.
Kun julkaiset päivityksiä, tarkista uudelleen luvut verkkosivuston käyttökokemuksen parantaminen ja verkkosivuston käytettävyys, jotta moduuli pysyy mielessäsi yhtenäisenä.
Sinulla on nyt toimiva näkökulma mobiilisovelluksen suunnitteluun. Käytä sitä, kun käyt läpi sivustoasi, hyväksyt markkinointimateriaalia tai briefaat suunnittelijaa. Jatka lukuihin verkkosivuston käytettävyys ja suunnittelun johdonmukaisuus, niin vauhti säilyy tässä moduulissa.
Mobiilisovelluksen suunnittelu on taito, joka kehittyy vähitellen. Palaa tähän lukuun, kun olet julkaissut yhden parannuksen, jotta ideat siirtyvät lukemisesta tavaksi. Pienet toistuvat tarkistukset toimivat paremmin kuin kaikkien sääntöjen ahtaminen päähän kerralla. Kirjaa ylös, mikä toimi yleisöllesi, niin seuraava päivitys käy nopeammin.
Usein kysytyt kysymykset
Kuinka kauan mobiilisovelluksen suunnittelun parantaminen kestää?
Useimmat pienyritykset näkevät selkeämpiä sivuja muutaman keskittyneen jakson jälkeen, kun soveltavat tämän luvun perusteita. Aloita etusivusta ja vie samat säännöt sitten palvelu- ja yhteystietosivuille.
Tarvitsetko suunnittelijan mobiilisovelluksen suunnitteluun?
Suunnittelijasta on apua monimutkaisissa brändiuudistuksissa, mutta moni mobiilisovelluksen suunnitteluun liittyvä korjaus onnistuu itse, kun tiedät, mitä etsiä. Käytä lukua verkkosivuston käyttökokemuksen parantaminen tämän luvun rinnalla.
Voiko WEMASY auttaa mobiilisovelluksen suunnittelun soveltamisessa verkkosivustollasi?
WEMASYn Sivustonrakentajassa on visuaalinen editori, jolla säädät asettelua, värejä ja typografiaa ilman koodia. Avaa Sivustonrakentaja, niin voit päivittää mallit ja esikatsella muutokset mobiilissa.
Mikä on yleisin virhe mobiilisovelluksen suunnittelussa?
Ihmiset yrittävät korjata kaiken kerralla sen sijaan, että etenisivät yksi sivu kerrallaan. Valitse yksi ykkösasia, kuten luettavuus tai kontrasti, ja katso sitten seuraavaa parannusta varten lukua verkkosivuston käytettävyys.
Miten mobiilisovelluksen suunnittelu liittyy SEO:hon?
Selkeä visuaalinen hierarkia ja luettava teksti pitävät kävijät sivulla pidempään, mikä tukee hakukoneiden seuraamia sitoutumissignaaleja. Yhdistä suunnittelukorjaukset hyvään sisältörakenteeseen, niin tulokset ovat parhaat.
Mitä kannattaa opiskella seuraavaksi mobiilisovelluksen suunnittelun jälkeen?
Jatka lukuihin verkkosivuston käyttökokemuksen parantaminen ja verkkosivuston käytettävyys tässä kirjassa, niin rakennat brändillesi kokonaisen visuaalisen järjestelmän verkkoon.