下北沢オープンソース Cafeデザイニング・インターフェース勉強会   第3回 5章 - リストで表現する        マクラケン直子 (@naokomc)   https://www.facebook.com/groups/di2e.stu...
デザイニング・インターフェース 第2版  パターンによる実践的インタラクションデザイン        http://amzn.to/LfZuHZ
今日の発表について                @naokomc現: ハピネス・エンジニア / 元: デザイナー 勉強会詳細は Facebook グループで ↓ https://www.facebook.com/groups/di2e.stu...
5章に書いてあること「インタラクティブな状況で、リスト項目をいかに表示するか」
5章に書いていないこと•   メニュー(6章)•   リスト項目内の複雑なデータ(7章)•   リンクやナビゲーション(3章)•   モバイルでのリスト(10章)
リストを使う場所•   全体の概要を表示•   項目をひとつずつブラウジング•   特定の項目を検索•   項目の移動/追加/削除/再カテゴライズ
情報アーキテクチャ再考 •   長さ •   順序 •   グループ化 •   項目のタイプ •   インタラクション •   動的なふるまい
2パネルのセレクタ / Two-Panel Selector       Picasa デスクトップアプリ    他の例: Finder、Windows エクスプローラー、          メールクライアントなど
1ウィンドウでのドリルダウン / One-Window Drilldown             WordPress.org フォーラム       他の例: iPhone メールアプリ、Ravelry フォーラム、             ...
リストのインレイ / List Inlay              Twitter.com他の例: Kayak.com (航空チケット検索)、Google リーダー、         Amazon モバイルサイトなど
サムネイルのグリッド / Thumbnail Grid    SideWinder for WordPress - Dynamic Grid Portfolio
カルーセル / CarouselBeautiful Creative Portfolio - 3D Carousel     Book Store Magento Theme
行のストライプ配色 / Row Striping  Converse - Premium Support Theme for Vanilla Forums
ページネーション / Pagination                        ThemeForestAvenue                Continuum                Book Store         ...
項目へのジャンプ / Jump to Item “s” とタイプすると一致する項目に移動する
アルファベット式スクローラー / Alphabet Scroller
カスケーディングリスト / Cascading List      Evernote デスクトップアプリ
ツリー表示テーブル / Tree Table    Chrome ブックマーク管理
新規項目の入力行 / New-Item Row         BaseCamp      Remember The Milk
パターンライブラリいろいろ              http://ui-patterns.com/      http://developer.yahoo.com/ypatterns/            http://welie.com/...
Upcoming SlideShare
Loading in …5
×

Designing Interfaces Book Reading #3: Chapter 5

1,906 views

Published on

第3回デザイニング・インターフェース勉強会
録画: http://www.ustream.tv/recorded/23415252

Published in: Design
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total views
1,906
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
7
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

Designing Interfaces Book Reading #3: Chapter 5

  1. 1. 下北沢オープンソース Cafeデザイニング・インターフェース勉強会 第3回 5章 - リストで表現する マクラケン直子 (@naokomc) https://www.facebook.com/groups/di2e.study/
  2. 2. デザイニング・インターフェース 第2版 パターンによる実践的インタラクションデザイン http://amzn.to/LfZuHZ
  3. 3. 今日の発表について @naokomc現: ハピネス・エンジニア / 元: デザイナー 勉強会詳細は Facebook グループで ↓ https://www.facebook.com/groups/di2e.study/
  4. 4. 5章に書いてあること「インタラクティブな状況で、リスト項目をいかに表示するか」
  5. 5. 5章に書いていないこと• メニュー(6章)• リスト項目内の複雑なデータ(7章)• リンクやナビゲーション(3章)• モバイルでのリスト(10章)
  6. 6. リストを使う場所• 全体の概要を表示• 項目をひとつずつブラウジング• 特定の項目を検索• 項目の移動/追加/削除/再カテゴライズ
  7. 7. 情報アーキテクチャ再考 • 長さ • 順序 • グループ化 • 項目のタイプ • インタラクション • 動的なふるまい
  8. 8. 2パネルのセレクタ / Two-Panel Selector Picasa デスクトップアプリ 他の例: Finder、Windows エクスプローラー、 メールクライアントなど
  9. 9. 1ウィンドウでのドリルダウン / One-Window Drilldown WordPress.org フォーラム 他の例: iPhone メールアプリ、Ravelry フォーラム、 Picasa アプリなど
  10. 10. リストのインレイ / List Inlay Twitter.com他の例: Kayak.com (航空チケット検索)、Google リーダー、 Amazon モバイルサイトなど
  11. 11. サムネイルのグリッド / Thumbnail Grid SideWinder for WordPress - Dynamic Grid Portfolio
  12. 12. カルーセル / CarouselBeautiful Creative Portfolio - 3D Carousel Book Store Magento Theme
  13. 13. 行のストライプ配色 / Row Striping Converse - Premium Support Theme for Vanilla Forums
  14. 14. ページネーション / Pagination ThemeForestAvenue Continuum Book Store Kayak.com Google
  15. 15. 項目へのジャンプ / Jump to Item “s” とタイプすると一致する項目に移動する
  16. 16. アルファベット式スクローラー / Alphabet Scroller
  17. 17. カスケーディングリスト / Cascading List Evernote デスクトップアプリ
  18. 18. ツリー表示テーブル / Tree Table Chrome ブックマーク管理
  19. 19. 新規項目の入力行 / New-Item Row BaseCamp Remember The Milk
  20. 20. パターンライブラリいろいろ http://ui-patterns.com/ http://developer.yahoo.com/ypatterns/ http://welie.com/patterns/http://quince.infragistics.com/html/AllPatterns.aspx http://patternry.com/

×