Sisältö
- 01. Kokeile Skala-esikatselua
- 02. Räjäytä se läpi DevRocket
- 03. Suunnittelukuvakkeet neliössä
- 04. Käytä Applen kuvakkeen suunnittelumallia
- 05. Suunnittelu iPhone 4: lle ja laajennus
- 06. Muista pikselisi
- 07. K.I.S.S.
- 08. Dynaaminen tyyppi
- 09. iOS 7 -tilapalkki
Suunnittelu iOS: lle on aina tuonut esiin erityisiä haasteita, joihin suunnittelijan on kohdattava. Vaikka aiemmat iOS-versiot keskittyivät suuresti skeuomorfiseen ulkonäköön, iOS 7: n tunnetusti tasainen esteettisyys vaatii erilaista lähestymistapaa ja parhaiden iPhone-sovellusten on yksinkertaisesti sopeuduttava siihen.
Kun näyttää siltä, että koko teollisuus on siirtymässä kohti tasaista muotoilutrendiä, ei ollut mikään todellinen yllätys, kun Jony Iven Apple-suunnittelutiimi otti iOS: n tähän suuntaan viime vuonna. Grafiikka on nyt rohkeampi, värikkäämpi ja keskittynyt enemmän toimintaan kuin muotoon. Joten vaikka tiedät jo sovelluksen luomisen, ota huomioon nämä vinkit ja tekniikat iOS 7 -valmiiden käyttöliittymien suunnittelussa Photoshopissa.
01. Kokeile Skala-esikatselua
Skala Preview on erittäin kätevä työkalu kaikille sovellussuunnittelijoille. Sen avulla voit nähdä muotoilusi - pikseli- ja väri-täydellisen - linkitetyn laitteen näytöllä suoraan Photoshopista. Se poistaa arvaukset ja säästää paljon aikaa.
02. Räjäytä se läpi DevRocket
DevRocket on toinen Photoshop-laajennus, joka sopii erinomaisesti iOS-suunnittelijoille.Sen avulla voit luoda malleja molempiin suuntiin, vaihtaa Retinan ja standardin välillä Photoshopissa ja jopa viedä molemmilla tarkkuuksilla. Olennaista.
03. Suunnittelukuvakkeet neliössä
Saatat ajatella, että koska sovelluskuvakkeet näkyvät pyöristetyillä kulmilla iPhonessa, niin sinun on suunniteltava ne. Ei niin. Ota näkyvä alue huomioon ja merkitse se Photoshopissa suunnitteluoppaaksi. Lähetä neliömäinen kuva App Storeen ja anna Applen tehdä loput.
04. Käytä Applen kuvakkeen suunnittelumallia
On olemassa monia malleja, joiden avulla voit suunnitella kuvakkeen, joka toimii uuden Applen asetteluruudukon kanssa (Löydä yksi täältä ilmaiseksi). Nämä ovat hienoja, koska niiden avulla voit luoda useita kuvakkeita yksinkertaisesti liittämällä grafiikkaa ennalta määrättyihin tasomaskiin.
05. Suunnittelu iPhone 4: lle ja laajennus
Jos sinulla ei ole aikaa luoda räätälöityä käyttöliittymää iPhone 4: lle ja 5: lle, suunnittele iPhone 4: n hieman pienemmälle näytölle ja suurenna sitä. Jos sinulla on aikaa, aseta iPhone 5: n ylimääräinen tila hyvään käyttöön ja anna sovelluksellesi - ja sen ensisijaiselle toiminnalle - tilaa hengittää.
06. Muista pikselisi
Retina-näytön suunnittelu tarkoittaa työskentelyä kahdella tarkkuudella - normaalikokoinen ja kaksinkertainen alkuperäiseen verkkokokoon nähden. Välttääksesi sumeat reunat, kun muotoilua pienennetään, pidä kuvan suhteet tasaisina (ei parittomina) ja valitse Snap to Pixel -valintaruutu Photoshopissa.
07. K.I.S.S.
Älä takerru kaltevuuksiin, kehyksiin ja varjoihin, koska tämä ei sovi yksinkertaisempaan, kirkkaampaan iOS 7 -käyttöjärjestelmään. Jos haluat sovelluksesi näyttävän kotona, jätä runsaasti tyhjää tilaa ja vältä skeuomorfista lähestymistapaa tasaisen suunnittelun hyväksi.
08. Dynaaminen tyyppi
IOS 7: n teksti voidaan skaalata dynaamisesti käyttäjän tarpeiden mukaan. Apple on huolehtinut järjestelmäkirjasimista luettavuuden varmistamiseksi - jos valitset mukautetut fontit, harkitse samaa. Koska reunattomat painikkeet ovat nyt suosittuja, ilmoita interaktiiviset elementit tekstivärillä.
09. iOS 7 -tilapalkki
Kun korostetaan koristeluun liittyviä toimintoja, suunnittelijoiden tulisi saada sisältö ulottumaan koko näytön leveydelle ja korkeudelle. Yksi hyvä esimerkki tästä on Applen Weather-sovellus. Pilvet kelluvat tilarivin takana maksimoimalla koko näytön kiinteistöjen käytön.
Sanat: Dave Brown ja Vicky Roberts
Apposing on mobiili ja digitaalinen luova studio. Perustaja ja toimitusjohtaja Dave työskentelee PR- ja viestintäasiantuntijan Vickyn kanssa asiakkaille suunnatuissa projekteissa, kuten Unilever ja BBC. Tämä artikkeli ilmestyi alun perin Computer Arts -lehdessä 225.
