Your SlideShare is downloading. ×
0
下北沢オープンソース Cafeデザイニング・インターフェース勉強会   第4回 4章 - ページを構成する            安川 要平 / @yasulab   https://www.facebook.com/groups/di2e.s...
デザイニング・インターフェース 第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. 何が関係しているのか?“ある項目だけが、その仲間よりも’特殊’ならばどうするべきか?”                             P.134「一貫性を保つデザイン vs. 他と異なるデザイン」を使い分けて、ページ要素間の関係...
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     8. Movable Panels 2. Center Stage         9. Right/Left Alignment 3. Grid of ...
ユーザの注意を操るためのデザインパターン 1. Visual Framework     8. Movable Panels 2. Center Stage         9. Right/Left Alignment 3. Grid of ...
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     8. Movable Panels 2. Center Stage         9. Right/Left Alignment 3. Grid of ...
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 ...
7. Collapsible Panels / 開閉可能パネル                 Googleマップ他の例: MSNBCコメント、Firefox Bookmark Sidebar、YouTube
8. Movable Panels / 移動可能パネル               iGoogle    他の例:MyYahoo!, MATLAB, Photoshop
ユーザの注意を操るためのデザインパターン1. Visual Framework     8. Movable Panels2. Center Stage         9. Right/Left Alignment3. Grid of Equ...
9. Right/Left Alignment / 右 えと左 え       Mac OS のアドレスブック       他の例: Mac OSのシステム環境設定
10. Diagonal Balance / 対角線バランス        Starbucks のWiFi画面    他の例: Windows 7 のコントロールパネル,      Mini Cooper のウェブサイト(2005)
ユーザの注意を操るためのデザインパターン1. Visual Framework     8. Movable Panels2. Center Stage         9. Right/Left Alignment3. Grid of Equ...
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     8. Movable Panels 2. Center Stage         9. Right/Left Alignment 3. Grid of ...
ユーザの注意を操るために,ページレイアウトの基礎を学ぶ. ユーザの注意を操るための, デザインパターンを知る.
4章に書いてあること    「ページの意味や操作を伝達するために、     ページ内でユーザの注意をいかに操るか」
今日の発表について                @yasulabUIデザインを勉強したいエンジニア勉強会詳細は Facebook グループで ↓https://www.facebook.com/groups/di2e.study/
下北沢オープンソース Cafeデザイニング・インターフェース勉強会   第4回 4章 - ページを構成する            安川 要平 / @yasulab   https://www.facebook.com/groups/di2e.s...
Upcoming SlideShare
Loading in...5
×

第4回デザイニング・インターフェイス勉強会「ページレイアウト」

985

Published on

Designing Interface (2e) Study Group http://www.facebook.com/groups/di2e.study/

Published in: Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
985
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "第4回デザイニング・インターフェイス勉強会「ページレイアウト」"

  1. 1. 下北沢オープンソース Cafeデザイニング・インターフェース勉強会 第4回 4章 - ページを構成する 安川 要平 / @yasulab https://www.facebook.com/groups/di2e.study/
  2. 2. デザイニング・インターフェース 第2版 パターンによる実践的インタラクションデザイン http://amzn.to/LfZuHZ
  3. 3. 今日の発表について @yasulabUIデザインを勉強したいエンジニア勉強会詳細は Facebook グループで ↓https://www.facebook.com/groups/di2e.study/
  4. 4. 4章に書いてあること 「ページの意味や操作を伝達するために、  ページ内でユーザの注意をいかに操るか」
  5. 5. 4章に書いていないこと• ページの意味や操作方法をどう定義するか?(1~2)• レイアウトを決めた後、各セクションに どんなコンテンツを入れるべきか?(5~11)
  6. 6. ユーザの注意を操るために,ページレイアウトの基礎を学ぶ. ユーザの注意を操るための, デザインパターンを知る.
  7. 7. ユーザの注意を操るために,ページレイアウトの基礎を学ぶ. ユーザの注意を操るための, デザインパターンを知る.
  8. 8. ページレイアウトの基礎1. 何が重要なのか? →ページ要素の相対的な重要度2. 何が関係しているのか? →ページ要素の要素間の関係3. 次は何を見ればいいのか? →視覚的な流れ(Path Layout)
  9. 9. 1. 何が重要なのか?“今デザインしているページで最も重要なものは何か?” P.132 重要度を表現する例:視覚的なウェイト
  10. 10. 1. 何が重要なのか?重要度を表現する一般的な方法1. 密度 Positive space : Negative space の比率2. 背景色 コントラストの強弱3. 位置とサイズ ページの上部/中央/下部の位置4. リズム 繰り返しの回数
  11. 11. 1. 何が重要なのか?他、重要度を表現する方法/落とし穴1. 人物の顔写真 人物の目と、目線の先に誘導されやすい。2. Ad blindness 広告っぽい要素は見落とされやすい。
  12. 12. 2. 何が関係しているのか?“ある項目だけが、その仲間よりも’特殊’ならばどうするべきか?” P.134「一貫性を保つデザイン vs. 他と異なるデザイン」を使い分けて、ページ要素間の関係を表現する。
  13. 13. 2. 何が関係しているのか?ページ要素間の関係を表現する方法1. グループ化2. レイアウト3. 配色4. 順序・整列
  14. 14. 2. 何が関係しているのか?他、ページ要素間の関係を表現する方法・Caption & Comment image, subtext, comment・包含 親子関係を表現
  15. 15. 3. 次は何を見ればいいのか? “ユーザはまずどこに目を向けたくなるのか、それはなぜか?” P.138視覚的な流れの作り方:注目点から,より重要度の低い情報へと視線を導く.
  16. 16. 3. 次は何を見ればいいのか?他、視覚的な流れの作り方1. 流れの中から外す2. 流れの最後に”これでおしまい”を置く.
  17. 17. 3. 次は何を見ればいいのか?例: 注目点 (Focal Point) を設置しすぎると...
  18. 18. ページレイアウトの基礎1. 何が重要なのか? →ページ要素の相対的な重要度2. 何が関係しているのか? →ページ要素の要素間の関係3. 次は何を見ればいいのか? →視覚的な流れ(Path Layout)
  19. 19. ページレイアウトの参考文献
  20. 20. ユーザの注意を操るために,ページレイアウトの基礎を学ぶ. ユーザの注意を操るための, デザインパターンを知る.
  21. 21. ユーザの注意を操るために,ページレイアウトの基礎を学ぶ. ユーザの注意を操るための, デザインパターンを知る.
  22. 22. ユーザの注意を操るためのデザインパターン 1. Visual Framework 8. Movable Panels 2. Center Stage 9. Right/Left Alignment 3. Grid of Equals 10. Diagonal Balance 4. Titled Sections 11. Responsive Disclosure 5. Module Tabs 12. Responsive Enabling 6. Accordion 13. Liquid Layout 7. Collapsible Panels
  23. 23. ユーザの注意を操るためのデザインパターン 1. Visual Framework 8. Movable Panels 2. Center Stage 9. Right/Left Alignment 3. Grid of Equals 10. Diagonal Balance 4. Titled Sections 11. Responsive Disclosure 5. Module Tabs 12. Responsive Enabling 6. Accordion 13. Liquid Layout 7. Collapsible Panels
  24. 24. 1. Visual Framework / 視覚的なフレームワーク JAQK 色・フォント・文体と言葉遣いを全体を通して共通化する
  25. 25. 2. Center Stage / 中央ステージ Newfangled(ブログ) 他の例: Google Docs, Flash Editor,
  26. 26. 3. Grid of Equals / 等分グリッド Nike 他の例: Hulu, CNN, MapQuest, IBM fotter
  27. 27. ユーザの注意を操るためのデザインパターン 1. Visual Framework 8. Movable Panels 2. Center Stage 9. Right/Left Alignment 3. Grid of Equals 10. Diagonal Balance 4. Titled Sections 11. Responsive Disclosure 5. Module Tabs 12. Responsive Enabling 6. Accordion 13. Liquid Layout 7. Collapsible Panels
  28. 28. 4. Titled Sections / タイトル付きセクション JetBlue 他の例: Amazon account setting, iPhone Utility
  29. 29.  5. Module Tabs / モジュール別タブ MapQuest 他の例: Windows 7 Excel - Ribon, iWeb, SourceForge
  30. 30. 6. Accordion / アコーディオン CNN のサイドバー他の例: Wordのパレット, Picasaサイドバー, Chrome Inspector, Yahoo! Developer Netowrk
  31. 31. 7. Collapsible Panels / 開閉可能パネル Googleマップ他の例: MSNBCコメント、Firefox Bookmark Sidebar、YouTube
  32. 32. 8. Movable Panels / 移動可能パネル iGoogle 他の例:MyYahoo!, MATLAB, Photoshop
  33. 33. ユーザの注意を操るためのデザインパターン1. Visual Framework 8. Movable Panels2. Center Stage 9. Right/Left Alignment3. Grid of Equals 10. Diagonal Balance4. Titled Sections 11. Responsive Disclosure5. Module Tabs 12. Responsive Enabling6. Accordion 13. Liquid Layout7. Collapsible Panels
  34. 34. 9. Right/Left Alignment / 右 えと左 え Mac OS のアドレスブック 他の例: Mac OSのシステム環境設定
  35. 35. 10. Diagonal Balance / 対角線バランス Starbucks のWiFi画面 他の例: Windows 7 のコントロールパネル, Mini Cooper のウェブサイト(2005)
  36. 36. ユーザの注意を操るためのデザインパターン1. Visual Framework 8. Movable Panels2. Center Stage 9. Right/Left Alignment3. Grid of Equals 10. Diagonal Balance4. Titled Sections 11. Responsive Disclosure5. Module Tabs 12. Responsive Enabling6. Accordion 13. Liquid Layout7. Collapsible Panels
  37. 37. 11. Responsive Disclosure / 反応的な追加表示 AutoTrader 他の例: Kayakなどの航空券販売サイト, Google Docs のフォーム作成画面
  38. 38. 12. Responsive Enabling / 反応的なイネーブル化 TurboTax 他の例: Mac OSのシステム環境設定, Lexusのナビシステム
  39. 39. 13. Liquid Layout / リキッドレイアウト Drupal.org 他の例: Mac OS のダイアログ, Google Docsのスライドショー
  40. 40. ユーザの注意を操るためのデザインパターン 1. Visual Framework 8. Movable Panels 2. Center Stage 9. Right/Left Alignment 3. Grid of Equals 10. Diagonal Balance 4. Titled Sections 11. Responsive Disclosure 5. Module Tabs 12. Responsive Enabling 6. Accordion 13. Liquid Layout 7. Collapsible Panels
  41. 41. ユーザの注意を操るために,ページレイアウトの基礎を学ぶ. ユーザの注意を操るための, デザインパターンを知る.
  42. 42. 4章に書いてあること 「ページの意味や操作を伝達するために、  ページ内でユーザの注意をいかに操るか」
  43. 43. 今日の発表について @yasulabUIデザインを勉強したいエンジニア勉強会詳細は Facebook グループで ↓https://www.facebook.com/groups/di2e.study/
  44. 44. 下北沢オープンソース Cafeデザイニング・インターフェース勉強会 第4回 4章 - ページを構成する 安川 要平 / @yasulab https://www.facebook.com/groups/di2e.study/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×