1 / 28

Luku 6 – Käyttöliittymäsuunnittelu tarkemmin

Luku 6 – Käyttöliittymäsuunnittelu tarkemmin. 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.

clovis
Download Presentation

Luku 6 – Käyttöliittymäsuunnittelu tarkemmin

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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.

More Related