Luonnosopas - tule UI- ja UX-suunnittelijaksi

Prototypointi Mobility Appista helposti Sketchissä

Kaikki oppaan videot Piirustusohje - tule UI- ja UX-suunnittelijaksi

Olet haasteen edessä luoda houkutteleva Prototyping Mobility-App:lle. Tämä ei koske vain suunnittelua; kyse on käyttäjäkokemuksen tehokkaasta muotoilusta alusta alkaen, jotta se auttaa käyttäjää navigoimaan intuitiivisesti sovelluksessa. Tässä opetusohjelmassa sinut ohjataan askel askeleelta prototyypin luomisprosessissa Sketch:ssa. Aloitetaan tämä jännittävä matka suunnittelun maailmaan!

Tärkeimmät havainnot

  • Prototyping on ratkaisevan tärkeä askel sovelluksen kehittämisessä.
  • Sketchissä voit aloittaa yksinkertaisilla muodoilla ja suunnitelmilla.
  • Selkeä rakenne ja käyttäjäohjaus ovat välttämättömiä sovelluksesi menestykselle.

Askel-askeleelta-ohjeet

Aloita luomalla sovelluksesi perusrakenne Sketchissä. Voit käyttää sivellintyökalua ottaaksesi ensimmäiset suunnitteluelementit esiin. Siirry vain sivellintyökaluun tai paina "P" näppäintä sen valitsemiseksi.

Prototyyppaus Mobility App:sta helposti Sketchissä

Luo suorakulmio, joka edustaa sovelluksesi näyttöä. Pidä "Alt"-näppäintä painettuna samalla kun vedät hiirellä suorakulmion. Tämä varmistaa, että suorakulmio pysyy suhteessa. Se näyttää jo aika hyvältä.

Prototypointi Mobility App yksinkertaisesti Sketchissä

Seuraavaksi suunnitellaan sovelluksen ensimmäinen sivu. Aloita alhaalta Tab-palkista. Käytä jälleen sivellintyökalua ja vedä suora viiva pitäen Shift-näppäintä painettuna varmistaaksesi, että saat suoran viivan.

Kun olet suunnitellut Tab-palkin, lisää kolme kuvaketta, jotka edustavat sovelluksen päätoimintoja. ALT-näppäimen avulla voit helposti monistaa elementit vetämällä ne oikeaan paikkaan.

Nyt siirrytään ylhäiseen navigointipalkkiin. Pidä jälleen ALT-näppäintä painettuna samalla kun vedät toista suorakulmaista aluetta navigointipalkkia varten.

Chat-pallot ovat seuraava osa sovellustasi, jonka haluamme suunnitella. Käytä sivellintyökalua piirtääksesi chat-pallon. Tämä näkyy käyttäjälle heti tervetulotoivotuksena. Lisää lyhyt teksti, joka puhuu käyttäjälle, kuten "Hei ja tervetuloa Mobility App:iin!"

Varmistaaksesi, että kaikki näyttää houkuttelevalta, voit kopioida ja säätää palloja. Valitse pallot ja vedä niitä ALT-näppäintä painettuna alaspäin, lisätäksesi toisen tervetulotekstin, kuten "Aloita ensimmäisellä Mobility session sisällä".

Seuraavaksi lisää video-painike, jonka avulla käyttäjät voivat toistaa oppituntejaan. Piirrä pyöreä painike sivellintyökalulla ja yhdistä se kolmioon, jotta esitys ja toiminta ovat selkeitä.

Kopioi nyt kaikki tärkeät UI-elementit – kuten ylhäiset ja alhaiset navigointipalkit – seuraavalle sivulle varmistaaksesi suunnittelun johdonmukaisuuden. Voit vain vetää näytönkuvan ALT-näppäintä painettuna monistaaksesi elementit seuraavalle sivulle.

Uudella näytöllä, jonka olet luonut, muodosta valintamahdollisuudet kursseille. Tässä sinun tulisi tehdä yksinkertainen yleiskatsaus saatavilla olevista kursseista, joita käyttäjä voi valita.

Mobility-sovelluksen prototypointi helposti Sketchissä

Profiilinäkymässä voit luoda paikan profiilikuvaa, käyttäjänimeä ja suoritettujen kurssituntien määrää varten. On tärkeää esittää tiedot selkeästi ja ymmärrettävästi.

Prototyypin tekeminen Mobility-sovelluksesta helposti Sketchissä

Suunnitellessasi kurssi- ja oppituntivalintoja, luo yleiskatsaus oppitunneista ja lisää sulkemispainike, jotta käyttäjä voi sulkea valinnan milloin tahansa.

Perusprototyyppi Mobility App:llesi on nyt valmis. Sinulla on nyt houkutteleva suunnittelu, joka selvästi rakentaa käyttäjäohjausta ja samalla auttaa sinua suunnittelijana visualisoimaan sovelluksen vision selkeästi.

Yhteenveto – Prototyping Mobility App:ista Sketchissä

Tämän opetusohjelman aikana olet oppinut askel askeleelta, kuinka prototyypata Mobility App Sketchissä. Ensimmäisestä ideasta viimeisiin suunnitteluelementteihin olet pystynyt laajentamaan tietämystäsi ja luomaan käyttökelpoisen työkalun sovelluksesi jatkokehittämiseen.

Usein kysytyt kysymykset

Kuinka aloitan suunnittelun Sketchissä?Valitse sivellintyökalu (P) ja aloita ensimmäisten elementtien luominen.

Kuinka voin monistaa elementtejä tehokkaasti?Pidä ALT-näppäintä painettuna samalla kun vedät elementtiä hiirellä.

Mitä teen, jos en ole tyytyväinen suunnitteluun?Voit milloin tahansa mukauttaa tai suunnitella uudelleen olemassa olevia elementtejä saadaksesi halutun lopputuloksen.

Kuinka varmistan, että käyttäjäohjaus on selkeä?Varmista, että kaikki toiminnot ovat loogisessa järjestyksessä ja että käyttäjä voi navigoida intuitiivisesti.

Voinko suunnitella Sketchissä myös mobiililaitteille?Kyllä, voit säätää elementtien tyyppiä ja kokoa mobiililaitteiden näyttökokoon sopivaksi.