Kotinäytön suunnittelu Sketchillä – vaiheittainen opas

Tässä tekstiohjeessa opit askel askeleelta, kuinka voit suunnitella koti näytön sovellukselle Sketch:ssa. Keskitymme perusasioihin ja joihinkin hyväksi todettuihin suunnitteluperiaatteisiin, jotta voit luoda houkuttelevan käyttöliittymän. Huomaat, että prosessi on helppo ja ymmärrettävä, ja voit pian luoda omia suunnitelmiasi.

Tärkeimmät havainnot

• Sketchin käyttö koti-näyttöjen asettelujen luomiseen
• Tärkeät suunnitteluperiaatteet houkutteleville käyttöliittymille
• Värikoodeja ja symboleita käytetään suunnitteluprosessin yksinkertaistamiseksi

Askellus-askelohje

Aloittaaksesi suunnittelusi, avaa Sketch ja luo uusi asiakirja koti näytöllesi.

Ensiksi valitset iPhone 8:n suunnittelukehykseksi. On järkevää aloittaa pienemmästä näytöstä, koska tämä menetelmä helpottaa sopeutumista suurempiin näyttöihin.

Avaa nyt alkuperäinen sovellus tai suunnittelu, jota haluat käyttää mallina. Lisäämme navigoinnin, joka tukee sovelluksesi rakennetta. Aloita valitsemalla navigointielementit.

napsauta piirtopintaa ja nimeä taulu "Koti Taustaväri". Varmistaaksesi, että taustasi ei ole myöhemmin läpinäkyvä, aseta yksinkertainen taustaväri, aluksi valkoinen.

Seuraavassa vaiheessa keskitytään kurssielementin luomiseen. Klikkaa alueelle ja ala suunnitella kurssikorttia. Luot kortin selkeässä, yksinkertaisessa suunnittelussa, joka seuraa litteän suunnittelun periaatteita.

Kortin suunnittelussa taustaväri on tärkeä. Voit käyttää yksinkertaista sinistä saadaksesi heti visuaalisen erottelun. Vaihtoehtoisesti voit kokeilla värigradientteja lisätäksesi syvyyttä ja ulottuvuutta.

Lisää nyt teksti kurssille. Voit säätää tekstikenttää varmistaaksesi, että teksti on keskellä ja helposti luettavissa. Tekstin ympärillä olevat välimatkat ovat ratkaiseva tärkeitä. Varmista, että jätät noin 16 pikseliä tilaa sivuille antaaksesi harmonisen suunnittelun.

Kun olet järjestänyt välimatkat ja tekstikentän, luo kuvaus kurssista. Myös kuvauksen etiketti on tärkeää huomioida koossa. Noin 14 pisteen fonttikoko varmistaa hyvän luettavuuden.

Kun olet toteuttanut peruselementit, voit luoda lisäsymboleita. Ne ovat hyödyllisiä, jos haluat käyttää samanlaisia elementtejä toistuvasti suunnittelussasi. Luo symboli kurssikortille, jotta voit käyttää sitä uudelleen sovelluksesi muilla osilla.

Kun olet luonut symbolisi, se soveltaa muutoksia automaattisesti kaikkiin instansseihin. Nyt voit muokata kurssisi nimeä ja kuvausta ilman, että sinun tarvitsee muuttaa kaikkea manuaalisesti. Käytä yksinkertaisia tekstimerkkijonoja varmistaaksesi selkeä rakenne.

Jotta korttisi näyttävät visuaalisesti houkuttelevilta, lisää varjo. Varmista, että se on hienovarainen, jotta suunnittelua ei ylikuormiteta. Kevyt varjo saa elementit erottumaan ja sopimaan hyvin kokonaisuuteen.

Käytä pyöristettyjä kulmia korteillesi lisäämaksesi visuaalista vetovoimaa. 8 pikselin kulmakerroin antaa modernin ja siistin ulkoasun, joka vastaa Applen suunnitteluohjeita.

Luodaan nyt selkeä otsikko kurssikortin yläpuolelle parantaaksemme käyttäjäpolkua ja jäsentääksemme sisältöä paremmin. Varmista, että korkeus ja etäisyys edellisestä elementistä pysyvät johdonmukaisina.

Viimeiseksi on tärkeää muistaa yhtenäinen suunnittelu. Pidä välimatkat kaikkien elementtien ja reunan kuvaajien välillä tasaisina luodaksesi harmonisen kokonaisuuden.

Yhteenveto - Suunnittele houkutteleva koti-näyttö Sketch:llä

Tänään suoritetut vaiheet ovat näyttäneet sinulle, kuinka voit suunnitella toimivan ja houkuttelevan koti-näyttö Sketch:llä. Soveltamalla yksinkertaisia suunnitteluperiaatteita ja käyttäjäpolkuja voit luoda sovelluksen, joka on sekä visuaalisesti houkutteleva että hyvin toimiva.