UI デザイン必携を読んでみた

入力手段による異なる適したUI

ポインティング（PC)
直接入力（スマートフォン・タブレット）
フォーカス操作（TV)

カルーセル

・ポインティング（PC)
スワイプが出来ない為、最後にページング用のボタンを設置する

・直接入力 (スマートフォン・タブレット）
見切れさせて、続くことを示唆

・フォーカス操作（TV)
フォーカスを移動させる

プルダウン

・ポインティング（PC)
小さく配置。見出しタイトルは、テキスト全体でレイアウト

・直接入力 (スマートフォン・タブレット）
タップしやすいように大きく。全てが大きくなることを防ぐために、
見出しタイトルをアイコンにする。

・フォーカス操作（TV)
プルダウンを展開させる手間がめんどくさいから、展開させておく。
「選択中の項目」と「フォーカス項目」は異なる見せ方をする。

インターフェースデザインの収斂

人が使いやすいようにデザインされたインターフェースは全て似たようなものになる。

・ポインティング（PC)
細かいパーツでもOK
制約が少なく自由度が高い
ホバーを織り込んだデザイン

・直接入力 (スマートフォン・タブレット）
大きめの要素
ゆったりとしたレイアウト
多用されるアイコン
見た目で判断がつく明快なデザイン

・フォーカス操作（TV)
連続的な配置
大きめな要素
明示的なフォーカス表現

インタラクション

理解としての動き

現実世界ではいきなり色が変化したりすることはありえない！
その為、変化の過程の動きををつける必要がある。

マイクロインタラクション

気づかれることがないような、さり気ない最小単位のインタラクションのことで（いいねなど）小さいが、必須。

情報区分の強さ

（弱い）隙間＜罫線＜背景色<囲い（強い）
囲いを使った情報区分はよっぽどの時のみにする。！

スクロールの向き

スクロールの向きを的確に決める

関係する要素は
・画面の形
・要素の形、要素同士の隙間、要素末端の見切れ
・テキストの有無

画面の形
画面の形が四角形なのは前提だが、スクロールは画面の長い方に向かおうとする。（画面の変化量が少ないから）
横長→横スクロール
縦長→縦スクロール

要素の形
要素が横長→縦スクロール
要素が縦長→横スクロール　（本棚の本と同じ原理）

要素同士の隙間
隙間が広いほど、その方向に向かおうとする。

行の隙間がある→縦スクロール
列の隙間がある→横スクロール　

要素末端の見切れ
わざと見切れることで、その方向にスクロールを感じる。

テキストの有無
テキストは上から下にいく性質を持っているため、
テキストがあると縦スクリーンになる。