Met universal apps draaien je apps op kleine schermen zoals op een telefoon tot hele grote touchscreens met Windows. Universal apps zorgen er voor dat je eenvoudig de code kan delen maar hoe moet je je app designen om om te gaan met al deze verschillende maten en hoe kan je dit eenvoudig in je eigen app implementeren

1. App voor
verschillende
maten
Dave Smits
Windows Platform Development MVP

2. MVP
Windows!
Vliegen
Sparked

3. Agenda

5. Waar moeten we opletten?
Waar en wanneer gebruik je de app?
Verschillende schermen met verschillende eigenschappen
Hoe bedien je de app?
Device capabilities inzetten!

7. App planning
1. Breed concept
2. Best at statement
3. Structuur
http://msdn.microsoft.com/library/windows/apps/hh465427.aspx

8. App planning
Gebruik scenario’s
Denk na welk scenario op welk
device!

9. Layout Assets

10. Layout
Static Layout
- ViewBox
Adaptive Layout
- Gridviews / Listviews

11. Controls
80% exact same XAML 20% custom
Common Optimized Signature
DatePicker
TimePicker
CommandBar
Button
CheckBox
ToggleSwitch
Slider
RadioButton ProgressBar
Hub
Pivot
ListView
GridView
AppBar
SysTray

12. Theming
Dark en Light theme nu ingebouwd in alle controls!
Accent color is nog lastig!

14. Praktijk?

15. bigger screen more pixels more content
Resolutie?
higher dpi more pixels nicer graphics

16. App size kan veranderen
Snapping in Windows
Apps komen naar de desktop met Windows 10

17. App size is belangrijk
40”
30”
24”
18”
14”
10”
8”
4”
6”
to scale

18. App vorm
Is orientatie belangrijk?
wide
tall
square

19. x
y
2x
2y
θ
that’s an eye…

20. ~4” phone at 1 foot ~40” screen at 10 feet
~4” phone at 10 feet
Same angle
of view

21. Effectieve resolutie
~40” screen at 10 feet
Same effective
resolution
~4” phone at 1 foot
Same angle
of view
X × Y effective pixels X × Y effective pixels

23. Assets

24. Assets

25. Genereren van assets
1.
2.
3.
4.
5.

6.
7.

27. Mastering
 Gebruik vectoren
 Anders bitmaps > 400%
 Export ze voor scale factor als nodig
 Vergeet niet na te denken over detail level

29. Trend
Windows 8 bracht uniformiteit
Windows 8.1 update bracht meer variatie op basis van input
device
Windows 10 brengt continuum
https://www.youtube.com/watch?v=F_O-LrGL-YQ

31. Tips
 Test met verschillende input devices
 Gebruik input scopes
 Tabstops
 Controleer pointer type

33. Call to action!
Denk na over de scenario’s van je app!
Gebruik de ruimte nuttig!
Hoe heeft de gebruiker interactie met je device?!
Gebruik device capabilities!