読者です 読者をやめる 読者になる 読者になる

Windows8標準ファイナンスアプリに見るWindows ストア アプリのデザインポイント

Windows Store App

Windows8をインストールするとデフォルトでインストールされているファイナンスというアプリがあります。MicrosoftさんのWindows ストア アプリの開発セミナーでファイナンスアプリを例にWindowsストアアプリのデザインのポイントを聞きました。当たり前のこともありますが、デザインの素人からするとわかりやすかったので纏めます。

 

 

【Windows ストア アプリのデザイン原則】

・シンプルなデザインでコンテンツに集中させる

・統一された直感的なデザイン

 

【ライブタイル】

日経平均、ダウ、TOPIXと放っておくとタイルの内容が変わっていきます。アプリを開くことなく情報を見れるのが一つポイントです。

f:id:yomon8:20130523203458p:plain

 

 

 【画面端の見切れ】

画面端に故意に見切れを作ることで、「続きがある」ことをユーザに認識させる。

f:id:yomon8:20130523203505p:plain

これとかも。

f:id:yomon8:20130523203509p:plain

 

 

 

【統一的なUIデザイン】

プラスマーク・矢印マークなど標準コンテンツを利用する。

f:id:yomon8:20130523203511p:plain

 

 

【タイルの配置】

タイルでデザインするときは整然と配置する。

f:id:yomon8:20130523203520p:plain

 

【フォントの有効活用】

タイトルと内容のフォントを分けて、フォントに意味を持たせる。

f:id:yomon8:20130523203523p:plain

 

f:id:yomon8:20130523212009p:plain

推奨フォントはSegoe UIとMeiryo UIだが英語・日本語混在の場合はMeiryo UIを推奨。

Segoe UIに日本語が無いので、日本語部分だけ代替フォントのMeiryoになってしまう。

 

 

【色々なスクリーンの状態に対応】

スクリーンの状態は以下の4種類

  1. ・横置きフルスクリーン(FullScreenLandscape)
  2. ・スナップしている(Snapped)
  3. ・スナップされている(Filled)
  4. ・縦置き(FullScreenPortrait)

これはファイナンスのスナップしている(Snapped)の例です。

f:id:yomon8:20130523203812p:plain

 

デザインって難しいですね。