デザイニング・インターフェース—-パターンによる実践的インタラクションデザイン」を元に、自分自身が理解しやすいような形で要約メモしておきたいと思います。

88_深みのある背景(deep background)

画像またはグラデーションカラーを、前面にある要素より奥まって見えるページ背景として配置する。例)Mac OS X の、デフォルトのデスクトップピクチャ

利用場面

そのページをくっきりと魅力的に見せたい場合。ページの背景として、単調な白やグレイよりも面白みのある要素を利用したい場合。

89_少色相・多明度(few hues, many values)

インターフェース上で用いる色相として、1つか2つ、多くても3つを選び出す。それらの少数の色相の中からさまざまな値(明度)の組み合わせを選んで、カラーパレットを作成する。例)デザインがうるさく煩雑ではないインターフェース

利用場面

アプリケーションまたはサイト向けのカラースキームを決定する場合。見た目がけばけばしく極彩色になるのは避けたいものの、インターフェースに何らかの特色を持たせたい場合。

90_コーナー処理(corner treatments)

インターフェース上のボックスのコーナーを普通の直角にする代わりに、斜線、曲線、切り抜きなどを用いる。このようなコーナー処理を、インターフェース全体で一貫して行う。例)角丸のコーナー

利用場面

インターフェース上で、ボックス、ボタン、タブなどの矩形の要素を用いる場合。

91_フォントを反映したボーダー(borders that echo fonts)

ボーダーやその他の線を描く際に、その線の色、太さ、曲がり具合を、デザイン内で主に用いるフォントのいずれかと同じにする。例)写真の周りの罫線と、写真内のフォントの太さが同じ

利用場面

デザイン内に、見出し、タイトル、ロゴタイプに使われるフォントなど、視覚的効果を考えて選び抜かれたフォントが含まれている場合。

92_ヘアライン(hairlines)

1ピクセル幅の線を、ボーダー、水平線、テクスチャとして利用する。例)1ピクセルのテクスチャ

利用場面

インターフェースの概観を、洗練された格調のあるものにしたい場合。

93_フォントウェイトのコントラスト(contrasting font weights)

対照的な2種類のフォント(一方は薄くて軽く、もう一方は濃くて重い)を用いて、レベルが異なる情報を区別し、見た目に味わいを増す。例)太さのコントラストを利用したタイポグラフィ

利用場面

テキストがそのページ内で重要な要素となっており、ひと目見ればそのページの構成がはっきりと分かるようにしたい場合。そのページを印象的に見せたい場合。

94_スキン(skins)

アプリケーションが採用しているルックアンドフィールのアーキテクチャを公開し、ユーザが独自のグラフィックやスタイルをデザインできるようにする。例)スキンを変更できるアプリケーション

利用場面

ユーザ層の大部分が、そのインターフェースをよく理解している人々で占められている場合。必ずしもすべての要素を標準的に見せなくてよい場合。さらには、そのようなユーザがインターフェースをいじり回すのを好む場合。スタイルを重視し、ソフトウェアの設定を自分好みに調整したがる場合。

最後までお読みいただきありがとうございます!よろしければフォローお願いします!

もしお役に立てる情報がありましたら、そのお気持ちを Bitcoin や PayPal で送金していただけると、とても嬉しく思います!

他にも、Amazonのほしい物リストからお選びいただくこともできます。

こちらの関連記事もあわせてどうぞ!