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

32_視覚的なフレームワーク（visual framework）

どのページでも同じ基本レイアウト、色、スタイル的な要素を用いるが、多様なページのコンテンツを扱えるだけの柔軟性も備えたデザインを行う。例）ヘッダとサイドバーが共通なWebサイト

利用場面

複数ページから成るWebサイトを作っている場合。そのサイトが慎重にデザインされた一体感のあるものにしたい場合。

33_中央ステージ（center stage）

UI上のもっとも重要な部分を、ページやウィンドウ内で一番大きなサブセクションとして配置する。その周囲にそれより小さなパネルを用意し、その中に副次的なツールやコンテンツをまとめる。例）Photoshop

利用場面

文書の編集や、特定のタスクを実行できるようにするる場合。ほとんどのアプリケーションで中央ステージを利用できる。

34_タイトルつきセクション（titled sections）

コンテンツの各セクションに視覚的に強調されたタイトルを付けることで個々のセクションを規定し、ページ内でそれらのセクションをまとめて配置する。例）AdobeのWebサイト

利用場面

ページ内に多くのコンテンツがあっても、ページ全体を見渡しやすく理解しやすいようにしたい場合。コンテンツをグループ化できる場合 。

35_カードのスタック（card stack）

コンテンツの各セクションを別々のパネルまたはカード（タブ）に配置し、一度に1枚だけ見えるように積み重ねる。タブやその他の仕掛けを用いて、ユーザがそれらにアクセスできるようにする。例）アプリケーションの設定画面のタブ

利用場面

ページ内に配置する素材が多すぎる場合。ユーザが一度に複数のセクションを見る必要がない場合。

36_開閉可能パネル（closable panels）

コンテンツの各セクションを別々のパネルに配置し、ユーザがそれぞれ別々に開閉できるようにする。例）Dreamweaverのパネル

利用場面

ページ上に表現すべきものが多すぎるけど、どれも互いにワンクリックで行き来できるようにしたい場合。ユーザが一度に複数のセクションをみたいと考える可能性がある場合。

37_移動可能パネル（movable panels）

異なるツールやコンテンツセクションを別々のパネルに配置し、ユーザがそれらを自由に移動してカスタマイズできるようにする。例）illustrator

利用場面

必ずしも唯一のやり方でレイアウトしなくてもいいような、密接するインターフェースの断片がページ内に複数ある場合。それらがページ内のどこにあってもユーザにはその意味が一目瞭然である場合。カスタマイズして使って欲しい場合。

38_右揃えと左揃え（right/left alignment）

2カラムのフォームやテーブルをデザインする際に、左側のラベルは右揃えとし、右側の項目は左揃えとする。例）フォーム、ダイアログボックス

利用場面

フォームの先頭にテキストラベルがある場合。

39_対角線バランス（diagonal balance）

ページ内要素の左右対称な見せ方で配置するが、左上と右下の両方の隅に視覚的なウェイトをおくことでバランスを保つ。例）ダイアログボックスの、左上のタイトルと右下のボタン

利用場面

タイトルやヘッダが一番上にあり、ボタンが一番下にあるページやダイアログボックスをレイアウトする場合。そのページがスクロールなしで1画面に収まるくらい短い場合。

40_プロパティシート（property sheet）

2カラムまたはフォーム形式のレイアウトを用いて、このページでオブジェクトのプロパティを編集できることをユーザに示す。例）DreamweaverのCSSタブのプロパティシート

利用場面

そのインターフェースが、編集可能なオブジェクトをユーザに提示する場合。

41_反応的な追加表示（responsive disclosure）

ごく最小のUIから始めて、ユーザが各ステップを完了するごとに追加のUIを表示しながら、ユーザが一連のステップを実行できるように導く。例）都道府県を選択すると、それに応じた市区町村が表示されるフォーム

利用場面

ユーザが複雑なタスクをステップバイステップで実行できるようにする必要がある場合。ただし、各ステップごとに1ページづつ進ませるよりは、インターフェース全体を1ページに収めておきたい場合。

42_反応的なイネーブル化（responsive enabling）

大部分がディスエーブル化（コントロールを操作不可の状態にすること。一般的に通常よりも薄く半透明化した表現になる。グレーアウトともいう）されているUIから始めて、各ステップを完了するごとにより多くのUIをイネーブル化しながら、ユーザが一連のステップを実行できるようにする。例）アプリケーションの設定画面のチェックボックス

利用場面

反応的な追加表示のように各ステップで動的にページを再編成するよりも、インターフェースの安定性を優先したい場合。

43_リキッドレイアウト（liquid layout）

ユーザがウィンドウをリサイズしたら、それに合わせてページの内容もリサイズし、常にページが「満たさせている」状態を保つ。例）Webサイトの、左右いっぱいのリキッドレイアウト

利用場面

ページの内容を表示するために、ユーザがより多くの（またはより少しの）スペースを必要とする可能性がある場合。