後半の「デスクトップアプリ編」です。

1. Windows 8デザインガイド
～魅力的なWindowsストアアプリと
デスクトップアプリを作るために～
14-E-3 春日井良隆
八巻雄哉
Developers Summit
2013 Action !

2. デスクトップアプリ編

3. 本日お伝えしたいこと
AGENDA
UXガイドラインを読もう！
Windowsユーザーエクスペリエンスガイドライン
Windows 8時代のデスクトップアプリ
タッチ操作 高精細ディスプレイ
Developers Summit
2013 Action !

4. UXガイドラインを読もう！

5. デスクトップアプリのためのガイドライン
WINDOWS 8 DESKTOP APPLICATION DESIGN GUIDE
Developers Summit
2013 Action !

6. クイズ
QUIZ
• プリンターの設定にある「用紙方向」の選択に
最も適したUIパターン（コントロール）は、
次のうちどれですか？
A B
ドロップダウンリスト リストボックス
C D
ラジオボタン チェックボックス
Developers Summit
2013 Action !

7. 実際のプリンタの設定画面
ACTUAL PRINTER SETTINGS
Developers Summit
2013 Action !

8. 実際のプリンタの設定画面
ACTUAL PRINTER SETTINGS
Developers Summit
2013 Action !

9. 実際のプリンタの設定画面
ACTUAL PRINTER SETTINGS
Developers Summit
2013 Action !

10. プリンターメーカーの標準
THE STANDARD FOR PRINTERS
• 日本で使用しているプリンター
メーカーのほとんどは、
用紙方向を選択するUIとして
C
ラジオボタン
を使用している。
Developers Summit
2013 Action !

11. Microsoft XPS Document Writer 印刷設定
PRINTING PREFERENCES OF MICROSOFT XPS DOCUMENT WRITER
Developers Summit
2013 Action !

12. Windowsストアアプリでの印刷
PRINTING FROM WINDOWS STORE APPS
Developers Summit
2013 Action !

13. マイクロソフトの標準
THE STANDARD FOR MICROSOFT
• マイクロソフトは、
用紙方向を選択するUIとして
A
ドロップダウンリスト
を使用している。
Developers Summit
2013 Action !

14. なぜか？

15. UXガイドライン ラジオボタン
UX GUIDELINE - RADIOBUTTON
Developers Summit
2013 Action !

16. UXガイドライン
ドロップダウンリストとコンボ ボックス
UX GUIDELINE –DROPDOWNLIST AND COMBOBOX
Developers Summit
2013 Action !

17. 用紙方向「横」を使う機会は
どのくらいあるのか？

18. デスクトップアプリのためのガイドライン
WINDOWS 8 DESKTOP APPLICATION DESIGN GUIDE
Developers Summit
2013 Action !

19. Windows 8時代のデスクトップアプリ
Surface
TM

20. ハードウェアの変革
HARDWARE SHIFT
タッチ可能な
デバイスの普及
ディスプレイ
の高精細化
Developers Summit
2013 Action !

21. レガシーサポート
LEGACY SUPPORT
タッチ操作 マップ先 生成されるメッセージ
WM_LBUTTONDOWN
タップ マウスの左クリック
WM_LBUTTONUP
スクロールホイール WM_VSCROLL
パン
の使用 WM_HSCROLL
WM_RBUTTONDOWN
プレスアンドホールド マウスの右クリック
WM_RBUTTONUP
Ctrlキーを押しながら lParam で
マウス ホイールを MK_CONTROLが
ズーム
回転させて 設定された
スクロールする操作 WM_MOUSEWHEEL
Developers Summit
2013 Action !

22. 対応が必要となる操作
AN OPERATION THAT NEEDS TO BE DEALT WITH
Developers Summit
2013 Action !

23. Microsoft Office 2013
MICROSOFT OFFICE 2013
1.32倍 1.78倍
マウスモード タッチモード
Developers Summit
2013 Action !

24. Microsoft Office 2013
MICROSOFT OFFICE 2013
2.5倍
マウスクリック タップ（タッチ）
Developers Summit
2013 Action !

25. Intelの予測：
ノートPCとデスクトップのRetinaディスプレイは2013年に来る
INTEL: RETINA L A P T O P, DESKTOP DISPLAYS COMING IN 2013
Developers Summit
2013 Action !

26. 高精細ディスプレイ搭載Windows 8機
WINDOWS 8 PCS, WHICH HAVE HIGH DPI DISPLAY
ディスプレイ
解像度 ピクセル密度
モデル名 サイズ
（総画素数） （PPI）
（インチ）
Surface for Windows 8 Pro 10.6 1,920×1,080 208
ThinkPad Helix 11.6 1,920×1,080 190
VAIO Duo 11 11.6 1,920×1,080 190
ICONIA W700 11.6 1,920×1,080 190
XPS 12 12.5 1,920×1,080 176
MacBook Pro（Retina） 15.4 2,880×1,800 220
Series 9 WQHD prototype 13.3 2,560x1,440 220
Developers Summit
2013 Action !

27. XGA（1,024×768）のウィンドウ
XGA WINDOW
Developers Summit
2013 Action !

28. 約96PPI 23インチ FHD（1,920×1,080）
ABOUT 96 PPI
Developers Summit
2013 Action !

29. 約128PPI 23インチ WQHD（2,560×1,440）
ABOUT 128 PPI
Developers Summit
2013 Action !

30. 約192PPI 23インチ QFHD（3,840×2,160）
ABOUT 192 PPI
Developers Summit
2013 Action !

31. DPIスケーリング
DPI SCALING
• システムフォントやUIのサイズを
スケールさせる機能
Developers Summit
2013 Action !

32. 100% 200%

33. DPIスケーリング
DPI SCALING
• システムフォントやUIのサイズを
スケールさせる機能
Windows 7以前
ユーザー操作により
既定値は100%
125%等のスケールが可能
Windows 8以降
ディスプレイのピクセル密度により既定値が変化
Developers Summit
2013 Action !

34. Windows 7
WINDOWS 7
Developers Summit
2013 Action !

35. Windows 8
WINDOWS 8
Developers Summit
2013 Action !

36. DPIスケーリング対応
SUPPORT FOR DPI SCALING
• 対応不要
• すべての条件で
ベクター表示による
WPF 適切なスケーリング
• 要確認
Windowsフォーム • 多くの場合
MFC等（Win32） 対応が必要
Silverlight OOB
Developers Summit
2013 Action !

37. Windows 8の
アプリを作る人は
必ず読もう
UXガイドライン
14-E-3 デブサミ2013
Developers Summit
2013 Action !
Action!

38. 参考資料
RESOURCES
• 今さらWPF？いいえ、今こそWPF！
• DPIスケール変更時におけるWPFと
Silverlightの違い - Yuya Yamaki’s blog
• 高 DPI（MSDN ライブラリ）
Developers Summit
2013 Action !