Optimaalinen mukautus suunnittelullesi iPhone X:lle

iPhone X on perustavanlaatuisesti muuttanut sovellusmuotoilua. Sen ainutlaatuisen muodon ja uusien käyttöliittymäelementtien kanssa suunnittelijoiden on näytettävä enemmän joustavuutta ja luovuutta vaikuttavien sovellusten luomiseksi. Tässä oppaassa käydään vaihe vaiheelta läpi, kuinka voit käyttää Sketchiä muokataksesi suunnitteluasi iPhone X:n vaatimusten mukaan.

Tärkeimmät havainnot

• iPhone X:n näytön korkeus on 812 pikseliä, mikä antaa tilaa uusille käyttöliittymäelementeille.
• Navigaatio ja välilehtipalkki ovat korkeampia ja vaativat säätöjä asettelussa.
• On tärkeää huomioida Safe Area varmistaaksesi, ettei sisältöjä päädy näytön pyöristetylle alueelle.
• Koti-indikaattori on uusi käyttöliittymäelementti, joka on otettava huomioon suunnittelussa.

Vaiheittainen opas

Aloita luomalla uusi iPhone X suunnittelu Sketchissä. Paina A lisätäksesi uuden elementin ja napsauta sitten iPhone X -suunnittelua.

Leveys pysyy 375 pikselissä ja korkeus on asetettava 812 pikseliin. Tämä antaa sinulle enemmän tilaa käyttöliittymäsi suunnitteluun. Huomioi, että näytön pyöristetyt kulmat ovat tärkeitä asettelussa.

Kopioi Home Controller ja säädä muotoilua. On suositeltavaa olla käyttämättä oletustietokantoja, vaan käyttää iPhone X -kirjastoa tarkempaa säätämistä varten. Siirry Sketchin asetuksiin ja aktivoi iOS 11 -tietokanta, jos sitä ei ole vielä aktivoitu.

Lisää standardi navigointipalkki tehdäksesi käyttöliittymästä johdonmukaisen. Varmista, että navigointipalkin korkeus on 88 pikseliä verrattuna iPhone 8:n 44 pikseliin.

Etsi statuspalkkia iOS 11 -kirjastosta ja lisää se myös. Sen tulisi olla sijoitettuna näytön yläreunaan.

Väli- ja välilehtipalkille pätee sama: valitse iOS 11 -kirjastosta malli, jossa on kolme välilehteä, ja varmista, että sen korkeus on 83 pikseliä, jotta se sopii hyvin asetteluun.

Huolehdi siitä, että suunnittelussa mikään elementti ei ulotu pyöristettyyn alueeseen. Ohjelmoinnissa tätä kutsutaan Safe Area Layout Guide -ohjeeksi – tämä on tila, jota tarvitset turvallisen näkymän varmistamiseksi.

Lisää koti-indikaattori suunnittelusi olennaiseksi osaksi. Tämä tulisi sijoittaa näytön alaosaan keskelle.

Kun olet lisännyt peruselementit, voit kopioida koko osan ja liittää sen haluamaasi paikkaan. Muista säätää välejä kopioimisen jälkeen.

Toista tämä prosessi Chat Controllerin kohdalla. Luo kopio suunnittelusta ja nimeä se sen mukaan.

Vaihtaaksesi välilehtien kuvakeet ja mukauttaaksesi esitystä, on tärkeää valita oikea symboliikka ja tekstit huolellisesti.

Huomioi välin, erityisesti chat-puhuja-kuplien ja välilehtipalkin välillä. Pidä etäisyys 16 pikselissä varmistaaksesi, että elementit toimivat hyvin yhdessä.

Nämä vaiheet näyttävät, kuinka nopeasti voit muokata suunnitteluasi uuteen muotoon. Jos jokin on epäselvää, suunnittelua voi silti hioa edelleen.

Seuraavassa oppitunnissa opit, kuinka työskennellään lisäefektien kanssa profiilialueella, mukaan lukien kehysvaikutusten käyttö.

Yhteenveto - Tehokas iPhone X Suunnittelu Sketchissä

Suunnitteluasi iPhone X:n mukaan mukauttaminen avaa uusia mahdollisuuksia. Oikean ymmärryksen avulla uusista näyttömuodoista ja käyttöliittymäelementeistä voit luoda vaikuttavia käyttöliittymiä.