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

1. 下北沢オープンソース Cafe
デザイニング・インターフェース勉強会
第3回 5章 - リストで表現する
マクラケン直子 (@naokomc)
https://www.facebook.com/groups/di2e.study/

2. デザイニング・インターフェース 第2版
パターンによる実践的インタラクションデザイン
http://amzn.to/LfZuHZ

3. 今日の発表について
@naokomc
現: ハピネス・エンジニア / 元: デザイナー
勉強会詳細は Facebook グループで ↓
https://www.facebook.com/groups/di2e.study/

4. 5章に書いてあること
「インタラクティブな状況で、
リスト項目をいかに表示するか」

5. 5章に書いていないこと
• メニュー（6章）
• リスト項目内の複雑なデータ（7章）
• リンクやナビゲーション（3章）
• モバイルでのリスト（10章）

6. リストを使う場所
• 全体の概要を表示
• 項目をひとつずつブラウジング
• 特定の項目を検索
• 項目の移動/追加/削除/再カテゴライズ

7. 情報アーキテクチャ再考
• 長さ
• 順序
• グループ化
• 項目のタイプ
• インタラクション
• 動的なふるまい

8. 2パネルのセレクタ / Two-Panel Selector
Picasa デスクトップアプリ
他の例: Finder、Windows エクスプローラー、
メールクライアントなど

9. 1ウィンドウでのドリルダウン / One-Window Drilldown
WordPress.org フォーラム
他の例: iPhone メールアプリ、Ravelry フォーラム、
Picasa アプリなど

10. リストのインレイ / List Inlay
Twitter.com
他の例: Kayak.com (航空チケット検索)、Google リーダー、
Amazon モバイルサイトなど

11. サムネイルのグリッド / Thumbnail Grid
SideWinder for WordPress - Dynamic Grid Portfolio

12. カルーセル / Carousel
Beautiful Creative Portfolio - 3D Carousel
Book Store Magento Theme

13. 行のストライプ配色 / Row Striping
Converse - Premium Support Theme for Vanilla Forums

14. ページネーション / Pagination
ThemeForest
Avenue Continuum Book Store
Kayak.com Google

15. 項目へのジャンプ / Jump to Item
“s” とタイプすると一致する項目に移動する

16. アルファベット式スクローラー / Alphabet Scroller

17. カスケーディングリスト / Cascading List
Evernote デスクトップアプリ

18. ツリー表示テーブル / Tree Table
Chrome ブックマーク管理

19. 新規項目の入力行 / New-Item Row
BaseCamp
Remember The Milk

20. パターンライブラリいろいろ
http://ui-patterns.com/
http://developer.yahoo.com/ypatterns/
http://welie.com/patterns/
http://quince.infragistics.com/html/AllPatterns.aspx
http://patternry.com/