• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
第4回デザイニング・インターフェイス勉強会「ページレイアウト」
 

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

on

  • 1,092 views

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

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

Statistics

Views

Total Views
1,092
Views on SlideShare
1,090
Embed Views
2

Actions

Likes
3
Downloads
5
Comments
0

1 Embed 2

http://pinterest.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 下北沢オープンソース Cafeデザイニング・インターフェース勉強会 第4回 4章 - ページを構成する 安川 要平 / @yasulab https://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. 何が関係しているのか?“ある項目だけが、その仲間よりも’特殊’ならばどうするべきか?” 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 Equals 10. Diagonal Balance 4. Titled Sections 11. Responsive Disclosure 5. Module Tabs 12. Responsive Enabling 6. Accordion 13. Liquid Layout 7. Collapsible Panels
    • ユーザの注意を操るためのデザインパターン 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
    • 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 Equals 10. Diagonal Balance 4. Titled Sections 11. Responsive Disclosure 5. Module Tabs 12. Responsive Enabling 6. Accordion 13. Liquid Layout 7. Collapsible Panels
    • 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 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
    • 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 Equals 10. Diagonal Balance4. Titled Sections 11. Responsive Disclosure5. Module Tabs 12. Responsive Enabling6. Accordion 13. Liquid Layout7. Collapsible Panels
    • 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 Equals 10. Diagonal Balance 4. Titled Sections 11. Responsive Disclosure 5. Module Tabs 12. Responsive Enabling 6. Accordion 13. Liquid Layout 7. Collapsible Panels
    • ユーザの注意を操るために,ページレイアウトの基礎を学ぶ. ユーザの注意を操るための, デザインパターンを知る.
    • 4章に書いてあること 「ページの意味や操作を伝達するために、  ページ内でユーザの注意をいかに操るか」
    • 今日の発表について @yasulabUIデザインを勉強したいエンジニア勉強会詳細は Facebook グループで ↓https://www.facebook.com/groups/di2e.study/
    • 下北沢オープンソース Cafeデザイニング・インターフェース勉強会 第4回 4章 - ページを構成する 安川 要平 / @yasulab https://www.facebook.com/groups/di2e.study/