見出し画像

【読書録】UIデザイン必携


配色パターン

多くの色を使わない、視線が分散してしまう

ベースカラー:メインカラー:アクセントカラー=
7:2:1

結局のところ、「多くの色を使わずに少数の色を中心としてデザインする」ことが大事


例)ボタンに重みをつける
インターフェースにおけるボタンはすべてが等価というわけではない。ボタンにも優先度に従った重みづけが必要。
優先度が高いボタンを認識してもらうには配置(レイアウト)と装飾に注意する。重要なボタンやトリガーとなるボタン(次に進むボタン)は画面の下や右に置く。
装飾の重みは以下の通り。
色付きべた塗り>色付き枠囲い>無彩色の枠囲い>色付きテキストのみ>無彩色テキストのみ

構造と階層

時代の流れに伴って表層は時に大きく変わるが構造はあまり変わらない。

「深く狭く」よりも「浅く広く」
価格ドットコムはすごい。どんなに長くなっても3階層に抑えている。

トップ-一覧-詳細がもっともありふれている。なぜならそれが分かりやすいから。
トップ:サービスの顔。視覚的なインパクトによってユーザーにサービスの印象を決定づける。
一覧:サービスの骨格。これがわかりにくいものは使いづらい。
詳細:サービスの(まずはじめの)ゴール。
※地図、ゲーム、ツールなどそれに特化したものはその限りではない。

現在地の表現

  • パンくずリスト 1>2>3みたいな

  • カレント(現在地)表記 目立たせ

現在地と「ホバー/フォーカス」の区別はつける。あらかじめ別々のものを考えておく。両者の差は微々たるもので構わない。わかればよい。

差別化表現

  • 太さ

  • 大きさ

  • 背景

  • 目印(下に線引くとか)

分からないとは

「場所」「操作」「状態」が分からないこと
つまりはこれがわかるようにすればよい。

インタラクションコスト

インタラクションコスト=アタマの負荷+カラダの負荷
良いインターフェースとはインタラクションコストが少ないインターフェース。

アタマの負荷:考えたり悩んだり判断したりする負担、認知負担(congnitiv load)
 ユーザーに悩ませない、考えさせないことが認知負荷を下げるポイント。
カラダの負荷:指を動かす、繰り返し操作するといったカラダの負担。「使いにくい」というときは大抵はこのカラダの負荷に起因している。

どちらを優先するのか。
⇨利用頻度が少ない場合はアタマの負荷低減を優先する。


この記事が気に入ったらサポートをしてみませんか?