Developers Summit 2013【14-E-3】Windows 8デザインガイド

Developers Summit2013 Action !

Windows 8デザインガイド～魅力的なWindowsストアアプリと

デスクトップアプリを作るために～

春日井良隆14-E-3八巻雄哉

デスクトップアプリ編


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

高精細ディスプレイ

Windowsユーザーエクスペリエンスガイドライン

本日お伝えしたいことA G E N D A

タッチ操作

Windows 8時代のデスクトップアプリ

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


デスクトップアプリのためのガイドライン

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

http://msdn.microsoft.com/ja-jp/library/aa511258.aspx


リストボックス

チェックボックス

クイズ

• プリンターの設定にある「用紙方向」の選択に最も適したUIパターン（コントロール）は、次のうちどれですか？

Q U I Z

ラジオボタン

A Bドロップダウンリスト

C D


実際のプリンタの設定画面A C T U A L P R I N T E R S E T T I N G S


プリンターメーカーの標準

• 日本で使用しているプリンターメーカーのほとんどは、用紙方向を選択するUIとして

を使用している。

T H E S T A N D A R D F O R P R I N T E R S

ラジオボタン

C


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


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


マイクロソフトの標準

• マイクロソフトは、用紙方向を選択する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

なぜか？


UXガイドラインラジオボタンU X G U I D E L I N E - R A D I O B U T T O N


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

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


デスクトップアプリのためのガイドライン

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

http://msdn.microsoft.com/ja-jp/library/aa511258.aspx

Windows 8時代のデスクトップアプリ

SurfaceTM


ハードウェアの変革H A R D W A R E S H I F T

タッチ可能なデバイスの普及

ディスプレイの高精細化


レガシーサポート

タッチ操作マップ先生成されるメッセージ

タップマウスの左クリック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


対応が必要となる操作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


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倍


Microsoft Office 2013

マウスクリックタップ（タッチ）

M I C R O S O F T O F F I C E 2 0 1 3

2.5倍


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

http://liliputing.com/2012/04/intel-retina-laptop-desktop-displays-coming-in-2013.html


高精細ディスプレイ搭載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


XGA（1,024×768）のウィンドウX G A W I N D O W


約96PPI 23インチ FHD（1,920×1,080）

A B O U T 9 6 P P I


約128PPI 23インチ WQHD（2,560×1,440）

A B O U T 1 2 8 P P I


約192PPI 23インチ QFHD（3,840×2,160）

A B O U T 1 9 2 P P I


DPIスケーリング

• システムフォントやUIのサイズをスケールさせる機能

D P I S C A L I N G

100% 200%


DPIスケーリング

• システムフォントやUIのサイズをスケールさせる機能

D P I S C A L I N G

Windows 7以前

ユーザー操作により125%等のスケールが可能

既定値は100%

ディスプレイのピクセル密度により既定値が変化

Windows 8以降


Windows 7W I N D O W S 7


Windows 8W I N D O W S 8


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


Windows 8のアプリを作る人は必ず読もうUXガイドライン

デブサミ2013Action!

14-E-3


参考資料

• 今さらWPF？いいえ、今こそWPF！

• DPIスケール変更時におけるWPFとSilverlightの違い - Yuya Yamaki’s blog

• 高 DPI（MSDN ライブラリ）

R E S O U R C E S

http://www.slideshare.net/Yamaki/wpfwpf

http://d.hatena.ne.jp/Yamaki/20111109/1320903755

ttp://msdn.microsoft.com/ja-jp/library/dd940516.aspx

Developers Summit 2013【14-E-3】Windows 8デザインガイド

Documents

Transcript of Developers Summit 2013【14-E-3】Windows 8デザインガイド