Luku 6 – Käyttöliittymäsuunnittelu tarkemmin

1. Luku 6 – Käyttöliittymäsuunnittelu tarkemmin

2. Sisältö ❷❸ • Millainen on hyvän Windows 8 -sovelluksen käyttöliittymä? • Windows 8 -sovellusten suunnitteluun vaikuttavia asioita • Ruudukko-järjestelmä ja pikselit • Valmiit käyttöliittymäkomponentit • Tehtäviä • Kysymyksiä ja vastauksia

3. Millainen on hyvä käyttöliittymä? • Hyvä käyttöliittymä koostuu monesta yksityiskohdasta, tärkeää on olla huolellinen • Tärkeimmän asian voi tiivistää yhteen lauseeseen: hyvän käyttöliittymän omaksuu vaivatta • Windows 8 -sovellukset noudattavat pelkistettyä linjaa sekä käyttöliittymissä että sisällössä

4. Esimerkki käyttöliittymästä

5. Windows 8 User ExperienceGuidelines -dokumentti • Microsoft on koonnut Windows 8 -sovellusten käyttöliittymäohjeistuksen n. 300-sivuiseen kirjaan nimeltä ” Windows 8 User ExperienceGuidelines” • Suomeksi puhutaan käyttökokemusohjeista • Ohjeet on tarkoitettu ensisijaisesti tavallisille XAML-sovelluksille eli hyötyohjelmille • Kuitenkin ne osuudet ohjeista jotka käsittelevät sovellusten käytettävyyttä (engl. usability) ovat tärkeitä myös peleissä

6. Suunnitteluun vaikuttavia asioita • Jotta voisit suunnitella hyviä ja toimivia Windows 8 -sovelluksia, sinun täytyy tuntea muutamia keskeisiä käyttöliittymien suunnitteluun liittyviä asioita • Seuraavassa on käsitelty esimerkiksi näyttötarkkuuksiin, asetteluihin, käyttöliittymäkontrolleihin ja animaatioihin liittyviä asioita

7. Ruudukko-järjestelmä • Windows 8 -sovelluksia voidaan ajaa monenlaisissa erilaisissa laitteissa aina perinteisistä pc-koneista pieniin tabletteihin • Ruudulla näkyvin pienin elementti on pikseli (engl. pixel), mutta käyttöliittymien suunnittelua varten tämä on liian pieni yksikkö • Windows 8 -sovellusten yhteydessä käytetään ruudukko-järjestelmää (engl. gridsystem), jossa laitteen ruutu jaetaan yksiköihin (engl. unit) ja edelleen aliyksiköihin (engl. sub-unit)

8. Windows 8 -ruudukko

9. Ruutujen koot • Yksikkö (unit) • Koko on 20 × 20 pikseliä • Aliyksikkö (sub-unit) • Koko on 5× 5 pikseliä • Yhteen yksikköön mahtuu 4 × 4 = 16 aliyksikköä • Pikseli (pixel) • Ruudun fyysinen pikseli, jonka koko riippuu merkittävästi käytetystä laitteesta

10. Windows 8 -näyttötarkkuudet • Pienin näyttötarkkuus, jota Windows 8 -sovellukset tukevat on 1366 × 768 pikseliä • Tällaiseen ruutuun mahtuu n. 63 × 38 yksikköä • Suurimmillaan tarkkuudet ovat tällä hetkellä jo 4K-tasoisia • Tällaisen näytön tarkkuus on tyypillisesti 3840 × 2160 pikseliä, eli ruudulle mahtuu neljä Full HD -videoita yhtä aikaa • Tyypillinen tarkkuus Windows 8 -laitteissa on täys-HD-tarkkuus, eli 1920 × 1080 pikseliä • Tunne myös käsite dpi • Englanninkielisistä sanoista dots per inch, pistettä tuumalla • Mitä suurempi dpi-arvo, sitä tarkemmalta kuva näyttää

11. Ruudun tilankäyttö ja dpi-arvot • Kehittäjänä voit valita, haluatko näyttää suurempien tarkkuuksien näytöillä • Enemmän tietoa (vaikkapa uutisotsikoita), vai • Haluatko pitää ruudulla näkyvien elementtien määrän samana, mutta kasvattaa ruudulla näkyvien elementtien kokoa • Windows 8 mahdollistaa myös grafiikan automaattisen valinnan sen mukaan, millainen on näytön dpi-arvo • Näin tarkemmilla näytöillä voidaan esittää parempilaatuisia kuvia ilman muutoksia ohjelmakoodiin

12. Kosketusohjauksen suunnittelu • Windows 8 -sovellukset tulisi suunnitella siten, että lähtökohtaisesti niitä käytetään kosketuksella (engl. touchfirst) • Kun sovelluksesi toimii hyvin kosketuksella, se on myös automaattisesti käytettävissä muillakin ohjauslaitteilla • Näitä ovat tyypillisesti näppäimistö ja hiiri, joissakin laitteissa myös kosketusherkkä kynä eli stylus

13. Tapahtumapohjaisuus • Windows 8 -sovellukset toimivat tapahtumapohjaisesti (engl. eventdriven) • Tämä tarkoittaa, että käyttöjärjestelmä ilmoittaa sovelluksille tapahtumien (engl.events) avulla, kun jotain merkittävää tapahtuu • Tapahtumia ovat esimerkiksi ruudun kosketus, näppäimen painallus tai laitteen kääntäminen vaaka-asennosta pystyyn

14. Tapahtumankäsittelijä • Kaikkiin tällaisiin tapahtumiin voidaan kirjoittaa niin sanottu käsittelijä (engl. eventhandler) • Käsittelijä suorittaa pätkän ohjelmakoodia sen mukaan, millaisesta tapahtumasta on kyse • Tapahtumankäsittelijöiden määritys voidaan tehdä Visual Studion Properties-ikkunan kautta

15. Tapahtumat Visual Studiossa Napsauta salama-ikonia nähdäksesi valitun komponentin tapahtumat

16. Komentojen esittäminen ruudulla • Windows 8:n minimalistinen muotoilu tarkoittaa, että sovelluksissa ei ole näkyvissä mitään komentoja • Koko ruudun tila on pyhitetty varsinaiselle sisällölle • Komentoja kuitenkin tarvitaan, ja sovelluksesta riippuen tarpeellisia komentoja voi olla kymmenittäin • Komentojen esittämistä varten Windows 8 -käyttöjärjestelmä tarjoaa useita vaihtoehtoja • Keskeisin tapa esittää komentoja on sovelluspalkki (engl. applicationbar)

17. Sovelluspalkki

18. Sovelluspalkin toiminallisuus • Sovelluspalkit ovat vaakasuuntaisia alueita, jotka käyttäjä voi tuoda näkyviin pyyhkäisemällä ruudun reunaa • Palkin saa myös näkyviin napsauttamalla hiiren oikealla painikkeella sovelluksen päällä, tai näppäinyhdistelmällä Win+Z • Kehittäjänä voit sijoittaa sovelluspalkin ruudun ylä- tai alareunaan • Alareuna on tyypillisempi valinta, ja sinne tulisi sijoittaa yleisimmät sovelluksen tarjoamat komennot • Sovelluspalkin komennot sijoitetaan joko vasempaan tai oikeaan reunaan, muttei keskelle kosketuskäyttöä helpottamaan (kahden käden ote)

19. Esimerkki <Page.BottomAppBar> <AppBar x:Name="alapalkki"> <Grid> <StackPanelGrid.Column="1“ HorizontalAlignment="Right“ Orientation="Horizontal"> <AppBarButtonHorizontalAlignment="Left“ Label="Päivitä" VerticalAlignment="Top" Icon="Refresh"/> </StackPanel> </Grid> </AppBar> </Page.BottomAppBar>

20. Valmiit käyttöliittymäkomponentit • Windows 8 -sovellusten käytettävissä on noin 40 valmista komponenttia • Kaikki löytyvät Visual Studion Toolbox-ikkunasta • Yksinkertaisessa sovelluksessa selvitään ehkä n. kymmenellä erilaisella komponentilla • Yleisimpiä komponentteja on listattu seuraavassa • Muista, että komponentteja voidaan lisätä ruudulle myös sovelluksen suorituksen aikana

21. Komponentteja 1/2

22. Komponentteja 2/2

23. Sovelluksen ruudulta varaama tila • Lähtökohtaisesti jokainen Windows 8 -sovellus täyttää laitteen koko ruudun • Käyttäjä voi kuitenkin siirtää sovelluksen syrjään niin, että kaksi tai useampi sovellus voi olla ruudulla yhtä aikaa • Windows 8.1 -käyttöjärjestelmässä voidaan näyttää rinnakkain enintään neljä sovellusta • Jokaisen sovelluksen leveys on vähintään 320 pikseliä

24. Esimerkki

25. Ohjelmakoodissa • Ohjelmakoodissa voit helposti selvittää käytössä olevan tilan ruudulla • Esimerkiksi näin (leveys; korkeus = Bounds.Height): int width = (int)Window.Current.Bounds.Width; screenSizeTextBlock.Text= "Current screen width is " + width + " pixels.";

26. Tehtäviä • Selvitä, mikä on tällä hetkellä Windows 8 -koneiden suosituin näyttöresoluutio. • Pohdi, voidaanko kaikki markkinoiden Windows 8 -sovellukset toteuttaa Visual Studion mukana tulevilla käyttöliittymäkomponenteilla? Jos ulkopuolisia komponentteja tarvitaan, mistä niitä saa? • Tutustu Windows 8 -käyttöliittymäohjeistuksiin ja selvitä, mitä tarkoitetaan käsitteellä adaptiivinen asemointi (engl. adaptive layout).

27. Kysymyksiä ja vastauksia 1 Visual Studio tarjoaa minulle monia erilaisia käyttöliittymäkomponentteja. Mistä tiedän, mitä niistä minun kuuluisi käyttää milloinkin? • Jokainen komponentti on tarkoitettu tiettyyn käyttötarkoitukseen. Esimerkiksi kyllä–ei -valintoja voidaan esittää ainakin kolmella eri komponentilla, mutta tilanteesta riippuen vain jokin näistä kolmesta komponentista on hyvä valinta. • Aina valinnan tekeminen ei kuitenkaan ole valintaa oikean ja väärän välillä, vaan pikemminkin hyvän ja paremman. Parhaiten tutustut komponenttien valintaohjeisiin seuraamalla Microsoftin omia suosituksia, esimerkiksi Windows 8 -sovellusten User ExperienceGuidelines -dokumenttia (ks. kuva 6.2). • Voit myös tutustua nimekkäisiin, hyviä arvosteluita saaneisiin kauppapaikan sovelluksiin ja katsoa, millaisia komponenttivalintoja niissä on käytetty.

28. Kysymyksiä ja vastauksia 2 Haluaisin testata sovellustani monilla erilaisilla laitteilla, mutta minulla on vain yksi kannettava tietokone. Miten voin kokeilla sovellukseni toimintaa ilman, että ostaisin kaikki erilaisetWindows 8 -laitteet? • Helpoin keino kokeilla sovelluksen toimintaa esimerkiksi erikokoisilla näyttötarkkuuksilla on käyttää Visual Studion mukana tulevaa simulaattoria. • Simulaattorin avulla voit kokeilla erilaisia näyttötarkkuuksia ja näytön asentoja (pysty- tai vaaka-asento) esimerkiksi tablet-laitteita ajatellen. • Toisinaan saattaa tarjoutua myös mahdollisuuksia testata sovellustasi aivan oikeilla laitteilla. Siksi kannattaa seurata Microsoftin tapahtumia Suomessa, sillä silloin tällöin järjestetään erityisiä työpajoja, joissa sovelluksiaan voi testata erilasilla laitteilla.