Designing Interfaces Book Reading #3: Chapter 5

1,677
-1

Published on

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

Published in: Design
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,677
On Slideshare
0
From Embeds
0
Number of Embeds
1
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/
  1. A particular slide catching your eye?

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

×