下北沢オープンソース Cafe

デザイニング・インターフェース勉強会第4回　4章 - ページを構成する

安川 要平 / @yasulabhttps://www.facebook.com/groups/di2e.study/

デザイニング・インターフェース 第2版

パターンによる実践的インタラクションデザインhttp://amzn.to/LfZuHZ

@yasulabUIデザインを勉強したいエンジニア

勉強会詳細は Facebook グループで ↓https://www.facebook.com/groups/di2e.study/

今日の発表について

4章に書いてあること

「ページの意味や操作を伝達するために、　 ページ内でユーザの注意をいかに操るか」

4章に書いていないこと

•ページの意味や操作方法をどう定義するか？(1~2)•レイアウトを決めた後、各セクションにどんなコンテンツを入れるべきか？(5~11)

ユーザの注意を操るために,ページレイアウトの基礎を学ぶ.

ユーザの注意を操るための,デザインパターンを知る.

ユーザの注意を操るために,ページレイアウトの基礎を学ぶ.

ユーザの注意を操るための,デザインパターンを知る.

ページレイアウトの基礎

1. 何が重要なのか？→ページ要素の相対的な重要度

2. 何が関係しているのか？→ページ要素の要素間の関係

3. 次は何を見ればいいのか？→視覚的な流れ（Path Layout）

1. 何が重要なのか？

“今デザインしているページで最も重要なものは何か？”P.132

重要度を表現する例：視覚的なウェイト

1. 何が重要なのか？重要度を表現する一般的な方法1. 密度

Positive space : Negative space の比率2. 背景色コントラストの強弱

3. 位置とサイズページの上部/中央/下部の位置

4. リズム繰り返しの回数

1. 何が重要なのか？

他、重要度を表現する方法／落とし穴1. 人物の顔写真人物の目と、目線の先に誘導されやすい。

2. Ad blindness広告っぽい要素は見落とされやすい。

2. 何が関係しているのか？

「一貫性を保つデザイン vs. 他と異なるデザイン」を使い分けて、ページ要素間の関係を表現する。

“ある項目だけが、その仲間よりも’特殊’ならばどうするべきか？”P.134

2. 何が関係しているのか？

ページ要素間の関係を表現する方法1. グループ化

2. レイアウト

3. 配色

4. 順序・整列

2. 何が関係しているのか？

他、ページ要素間の関係を表現する方法・Caption & Comment

image, subtext, comment

・包含親子関係を表現

3. 次は何を見ればいいのか？

注目点から，より重要度の低い情報へと視線を導く.

“ユーザはまずどこに目を向けたくなるのか、それはなぜか?”P.138

視覚的な流れの作り方：

3. 次は何を見ればいいのか？

他、視覚的な流れの作り方1. 流れの中から外す

2. 流れの最後に”これでおしまい”を置く.

3. 次は何を見ればいいのか？

例: 注目点 (Focal Point) を設置しすぎると...

ページレイアウトの基礎

1. 何が重要なのか？→ページ要素の相対的な重要度

2. 何が関係しているのか？→ページ要素の要素間の関係

3. 次は何を見ればいいのか？→視覚的な流れ（Path Layout）

ページレイアウトの参考文献

ユーザの注意を操るために,ページレイアウトの基礎を学ぶ.

ユーザの注意を操るための,デザインパターンを知る.

ユーザの注意を操るために,ページレイアウトの基礎を学ぶ.

ユーザの注意を操るための,デザインパターンを知る.

1. Visual Framework

2. Center Stage

3. Grid of Equals

4. Titled Sections

5. Module Tabs

6. Accordion

7. Collapsible Panels

8. Movable Panels

9. Right/Left Alignment

10. Diagonal Balance

11. Responsive Disclosure

12. Responsive Enabling

13. Liquid Layout

ユーザの注意を操るためのデザインパターン

1. Visual Framework

2. Center Stage

3. Grid of Equals

4. Titled Sections

5. Module Tabs

6. Accordion

7. Collapsible Panels

8. Movable Panels

9. Right/Left Alignment

10. Diagonal Balance

11. Responsive Disclosure

12. Responsive Enabling

13. Liquid Layout

ユーザの注意を操るためのデザインパターン

1. Visual Framework / 視覚的なフレームワーク

JAQK

色・フォント・文体と言葉遣いを全体を通して共通化する

2. Center Stage / 中央ステージ

Newfangled（ブログ）

他の例: Google Docs, Flash Editor,

3. Grid of Equals / 等分グリッド

Nike

他の例: Hulu, CNN, MapQuest, IBM fotter

1. Visual Framework

2. Center Stage

3. Grid of Equals

4. Titled Sections

5. Module Tabs

6. Accordion

7. Collapsible Panels

8. Movable Panels

9. Right/Left Alignment

10. Diagonal Balance

11. Responsive Disclosure

12. Responsive Enabling

13. Liquid Layout

ユーザの注意を操るためのデザインパターン

4. Titled Sections / タイトル付きセクション

JetBlue

他の例: Amazon account setting, iPhone Utility

　5. Module Tabs / モジュール別タブ

MapQuest

他の例: Windows 7 Excel - Ribon, iWeb, SourceForge

6. Accordion / アコーディオン

CNN のサイドバー

他の例: Wordのパレット, Picasaサイドバー, Chrome Inspector,Yahoo! Developer Netowrk

7. Collapsible Panels / 開閉可能パネル

Googleマップ

他の例: MSNBCコメント、Firefox Bookmark Sidebar、YouTube

8. Movable Panels / 移動可能パネル

iGoogle

他の例:MyYahoo!, MATLAB, Photoshop

1. Visual Framework

2. Center Stage

3. Grid of Equals

4. Titled Sections

5. Module Tabs

6. Accordion

7. Collapsible Panels

8. Movable Panels

9. Right/Left Alignment

10. Diagonal Balance

11. Responsive Disclosure

12. Responsive Enabling

13. Liquid Layout

ユーザの注意を操るためのデザインパターン

9. Right/Left Alignment / 右揃えと左揃え

Mac OS のアドレスブック

他の例: Mac OSのシステム環境設定

10. Diagonal Balance / 対角線バランス

Starbucks のWiFi画面

他の例: Windows 7 のコントロールパネル, Mini Cooper のウェブサイト(2005)

1. Visual Framework

2. Center Stage

3. Grid of Equals

4. Titled Sections

5. Module Tabs

6. Accordion

7. Collapsible Panels

8. Movable Panels

9. Right/Left Alignment

10. Diagonal Balance

11. Responsive Disclosure

12. Responsive Enabling

13. Liquid Layout

ユーザの注意を操るためのデザインパターン

11. Responsive Disclosure / 反応的な追加表示

AutoTrader

他の例: Kayakなどの航空券販売サイト,Google Docs のフォーム作成画面

12. Responsive Enabling / 反応的なイネーブル化

TurboTax

他の例: Mac OSのシステム環境設定,Lexusのナビシステム

13. Liquid Layout / リキッドレイアウト

Drupal.org

他の例: Mac OS のダイアログ,Google Docsのスライドショー

1. Visual Framework

2. Center Stage

3. Grid of Equals

4. Titled Sections

5. Module Tabs

6. Accordion

7. Collapsible Panels

8. Movable Panels

9. Right/Left Alignment

10. Diagonal Balance

11. Responsive Disclosure

12. Responsive Enabling

13. Liquid Layout

ユーザの注意を操るためのデザインパターン

ユーザの注意を操るために,ページレイアウトの基礎を学ぶ.

ユーザの注意を操るための,デザインパターンを知る.

4章に書いてあること

「ページの意味や操作を伝達するために、　 ページ内でユーザの注意をいかに操るか」

@yasulabUIデザインを勉強したいエンジニア

勉強会詳細は Facebook グループで ↓https://www.facebook.com/groups/di2e.study/

今日の発表について

下北沢オープンソース Cafe

デザイニング・インターフェース勉強会第4回　4章 - ページを構成する

安川 要平 / @yasulabhttps://www.facebook.com/groups/di2e.study/