de:code 2016 CLT-002「Windows 10デバイスとUWP完全解説」読み解き(その4) #decode16

投稿者: | 2016年7月1日

個人的に必要なところを勉強を兼ねてピックアップしてみる、の4回目。アプリのUI/UXについて。このあたりは、全てMSDNに「設計とUI」としてまとめられている。色使いやフォント、レイアウト、各種コントロール、などUIにかかわる様々なガイドラインで、一部日本語化されている、というか、本文は結構日本語化されているのに、目次ページが英語版しかないとか実に惜しい。

タイルアセット
MSDNのここのページに、タイルの構成要素やデザイン上のルールが載っている。お役立ちなのは「タイル アセット」項で、タイルサイズに対してのアイコンサイズをどの位にすればいい感じになるかの目安が書いてある。

アセットサイズの一覧表
上記と同じページの「アセットサイズの一覧表」項に同じ表がある。基本の5種類のアイコンと、画面表示の倍率別に用意する場合のピクセル数とかファイル名の規約が載っている。…というのを分かったうえで、このあたりは、セッションスピーカー高橋氏謹製の「UWP Logo Maker」を使えば楽ちんで良さそう。

Optimize your layouts
ここのページにレスポンシブデザインの実装上で想定されるデバイスと仮想ピクセル数について記載がある。320~719epxはスマートフォン、720~1023epxはタブレット/大型スマートフォン、1024px以上がデスクトップ/ラップトップと3サイズ位を想定して作る、とのこと。もちろん必須ではないけど、デバイスに最適なUIを用意しておくとかっこいい。
ここのページにレスポンシブデザインの例として6パターンを提示してくれている。REPOSITION, REFLOW, RESIZE, REVAIL/HIDE, REPLACE, RE-ARCHITECT って全部REで始まるようにしてるのね…といいながら、さっきのページには日本語訳されて載っちゃってる。

他にもいろいろ載ってるので、一通り目を通したい。

リソース
参考となるサイトへのリンク。
Design downloads for UWP apps:PowerPoint、Adobe illustrator/Photoshop用のテンプレートファイルやツール、サンプルが設置されている。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください