Developers Summit2013 Action !
Windows 8デザインガイド~魅力的なWindowsストアアプリと
デスクトップアプリを作るために~
春日井良隆14-E-3八巻雄哉
デスクトップアプリ編
Developers Summit2013 Action !
UXガイドラインを読もう!
高精細ディスプレイ
Windowsユーザーエクスペリエンスガイドライン
本日お伝えしたいことA G E N D A
タッチ操作
Windows 8時代のデスクトップアプリ
UXガイドラインを読もう!
Developers Summit2013 Action !
デスクトップアプリのためのガイドライン
W I N D O W S 8 D E S K T O P A P P L I C A T I O N D E S I G N G U I D E
Developers Summit2013 Action !
リストボックス
チェックボックス
クイズ
• プリンターの設定にある「用紙方向」の選択に最も適したUIパターン(コントロール)は、次のうちどれですか?
Q U I Z
ラジオボタン
A Bドロップダウンリスト
C D
Developers Summit2013 Action !
実際のプリンタの設定画面A C T U A L P R I N T E R S E T T I N G S
Developers Summit2013 Action !
実際のプリンタの設定画面A C T U A L P R I N T E R S E T T I N G S
Developers Summit2013 Action !
実際のプリンタの設定画面A C T U A L P R I N T E R S E T T I N G S
Developers Summit2013 Action !
プリンターメーカーの標準
• 日本で使用しているプリンターメーカーのほとんどは、用紙方向を選択するUIとして
を使用している。
T H E S T A N D A R D F O R P R I N T E R S
ラジオボタン
C
Developers Summit2013 Action !
Microsoft XPS Document Writer 印刷設定
P R I N T I N G P R E F E R E N C E S O F M I C R O S O F T X P S D O C U M E N T W R I T E R
Developers Summit2013 Action !
Windowsストアアプリでの印刷P R I N T I N G F R O M W I N D O W S S T O R E A P P S
Developers Summit2013 Action !
マイクロソフトの標準
• マイクロソフトは、用紙方向を選択するUIとして
を使用している。
T H E S T A N D A R D F O R M I C R O S O F T
ドロップダウンリスト
A
なぜか?
Developers Summit2013 Action !
UXガイドライン ラジオボタンU X G U I D E L I N E - R A D I O B U T T O N
Developers Summit2013 Action !
UXガイドラインドロップダウンリストとコンボ ボックスU X G U I D E L I N E – D R O P D O W N L I S T A N D C O M B O B O X
用紙方向「横」を使う機会はどのくらいあるのか?
Developers Summit2013 Action !
デスクトップアプリのためのガイドライン
W I N D O W S 8 D E S K T O P A P P L I C A T I O N D E S I G N G U I D E
Windows 8時代のデスクトップアプリ
SurfaceTM
Developers Summit2013 Action !
ハードウェアの変革H A R D W A R E S H I F T
タッチ可能なデバイスの普及
ディスプレイの高精細化
Developers Summit2013 Action !
レガシーサポート
タッチ操作 マップ先 生成されるメッセージ
タップ マウスの左クリックWM_LBUTTONDOWN WM_LBUTTONUP
パンスクロールホイールの使用
WM_VSCROLLWM_HSCROLL
プレスアンドホールド マウスの右クリックWM_RBUTTONDOWNWM_RBUTTONUP
ズーム
Ctrlキーを押しながらマウス ホイールを回転させてスクロールする操作
lParam でMK_CONTROLが設定されたWM_MOUSEWHEEL
L E G A C Y S U P P O R T
Developers Summit2013 Action !
対応が必要となる操作A N O P E R A T I O N T H A T N E E D S T O B E D E A L T W I T H
Developers Summit2013 Action !
Microsoft Office 2013
マウスモード タッチモード
M I C R O S O F T O F F I C E 2 0 1 3
1.32倍 1.78倍
Developers Summit2013 Action !
Microsoft Office 2013
マウスクリック タップ(タッチ)
M I C R O S O F T O F F I C E 2 0 1 3
2.5倍
Developers Summit2013 Action !
Intelの予測:ノートPCとデスクトップのRetinaディスプレイは2013年に来る
I N T E L : R E T I N A L A P T O P , D E S K T O P D I S P L A Y S C O M I N G I N 2 0 1 3
Developers Summit2013 Action !
高精細ディスプレイ搭載Windows 8機
モデル名ディスプレイサイズ(インチ)
解像度(総画素数)
ピクセル密度(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
W I N D O W S 8 P C S , W H I C H H A V E H I G H D P I D I S P L A Y
MacBook Pro(Retina) 15.4 2,880×1,800 220
Series 9 WQHD prototype 13.3 2,560x1,440 220
Developers Summit2013 Action !
XGA(1,024×768)のウィンドウX G A W I N D O W
Developers Summit2013 Action !
約96PPI 23インチ FHD(1,920×1,080)
A B O U T 9 6 P P I
Developers Summit2013 Action !
約128PPI 23インチ WQHD(2,560×1,440)
A B O U T 1 2 8 P P I
Developers Summit2013 Action !
約192PPI 23インチ QFHD(3,840×2,160)
A B O U T 1 9 2 P P I
Developers Summit2013 Action !
DPIスケーリング
• システムフォントやUIのサイズをスケールさせる機能
D P I S C A L I N G
100% 200%
Developers Summit2013 Action !
DPIスケーリング
• システムフォントやUIのサイズをスケールさせる機能
D P I S C A L I N G
Windows 7以前
ユーザー操作により125%等のスケールが可能
既定値は100%
ディスプレイのピクセル密度により既定値が変化
Windows 8以降
Developers Summit2013 Action !
Windows 7W I N D O W S 7
Developers Summit2013 Action !
Windows 8W I N D O W S 8
Developers Summit2013 Action !
DPIスケーリング対応S U P P O R T F O R D P I S C A L I N G
• 要確認
• 多くの場合対応が必要
WindowsフォームMFC等(Win32)Silverlight OOB
• 対応不要
• すべての条件でベクター表示による適切なスケーリングWPF
Developers Summit2013 Action !
Windows 8のアプリを作る人は必ず読もうUXガイドライン
デブサミ2013Action!
14-E-3
Developers Summit2013 Action !
参考資料
• 今さらWPF?いいえ、今こそWPF!
• DPIスケール変更時におけるWPFとSilverlightの違い - Yuya Yamaki’s blog
• 高 DPI(MSDN ライブラリ)
R E S O U R C E S