Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing Interfaces Book Reading #3: Chapter 5

2,346 views

Published on

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

Published in: Design

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/

×