Luku 6 – Käyttöliittymäsuunnittelu tarkemmin

Esitys aiheesta: "Luku 6 – Käyttöliittymäsuunnittelu tarkemmin"— Esityksen transkriptio:

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 Experience Guidelines -dokumentti
Microsoft on koonnut Windows 8 -sovellusten käyttöliittymäohjeistuksen n. 300-sivuiseen kirjaan nimeltä ” Windows 8 User Experience Guidelines” 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. grid system), jossa laitteen ruutu jaetaan yksiköihin (engl. unit) ja edelleen aliyksiköihin (engl. sub-unit)

8 Windows 8 -ruudukko

9 Ruutujen koot Yksikkö (unit) Aliyksikkö (sub-unit) Pikseli (pixel)
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. touch first) 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. event driven) 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. event handler) 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. application bar)

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> <StackPanel Grid.Column="1“ HorizontalAlignment="Right“ Orientation="Horizontal"> <AppBarButton HorizontalAlignment="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 TextBlock TextBox Button CheckBox RadioButton
Komponentti Kuva Kuvaus TextBlock Tämän komponentin avulla voit esittää tekstiä ruudulla haluamallasi fontilla ja koolla. Haluttu teksti määritellään komponentin Text-ominaisuuteen. Usein tällainen komponentti tunnetaan myös nimellä Label. TextBox TextBox-komponentti antaa käyttäjän syöttää tekstiä. Ohjelmakoodissa voit lukea tekstin helposti komponentin Text-ominaisuuden kautta. Button Button-komponentin avulla luot painikkeita erilaisiin tilanteisiin. Oletusarvoisesti painikkeet ovat suorakaiteen muotoisia, mutta esimerkiksi sovelluspalkissa painikkeista tehdään pyöreitä. Painikkeita käytetään myös viesti-ikkunoissa (message dialog). CheckBox Valintaruutu-komponentti tarjoaa käyttäjälle helpon tavan valita kyllä–ei -tyyppisiä valintoja. CheckBox-komponentti on parhaimmillaan kun valintoja on enintään muutamia. RadioButton RadioButton-komponentti toimii samoin kuin CheckBox-komponentti, mutta yksittäisten, useiden valintojen sijaan käyttäjä valitsee yhden pienestä joukosta valintoja.

22 Komponentteja 2/2 ComboBox DatePicker TimePicker Slider ToggleSwitch
ComboBox-komponentti tarjoaa käyttäjälle mahdollisuuden valita yhden joukosta valintoja. ComboBox-komponentin etuna esimerkiksi RadioButton-komponenttiin nähden on, että se mahtuu pieneen tilaan. DatePicker Tämän komponentin avulla tarjoat käyttäjälle helpon tavan valita päivämäärän. On parempi käyttää DatePicker-komponenttia päivämäärän kysymiseen, kun tarjota pelkkä TextBox-komponentti päivämäärän syöttämiseen. TimePicker TimePickerin ajatus on sama kuin DatePicker-komponentilla, mutta päivämäärän sijaan kysytään kellonaikaa. Slider Slider-komponentti on näppärä tapa antaa käyttäjälle mahdollisuus valita jokin luku halutulta arvoväliltä, kuten vaikkapa prosenttiluku nollasta sataan. Komponentin avulla haluttua lukua voi kuitenkin olla hankalaa valita tarkasti, joten ehdotonta tarkkuutta vaativissa tilanteissa luvun kysyminen numeroina on parempi vaihtoehto. ToggleSwitch ToggleSwitch-komponentti sopii tilanteisiin, jossa jokin asetus pitää asettaa päälle tai pois. Käyttäjä olettaa, että uusi asetus on voimassa välittömästi, kuten vaikkapa silloin, jos ToggleSwitch-komponentilla voisi kytkeä tabletin WiFi-yhteyden päälle tai pois.

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 Experience Guidelines -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 erilaiset Windows 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.