designing interfaces book reading #3: chapter 5

下北沢オープンソース Cafe

デザイニングインターフェース勉強会第3回　5章 - リストで表現する

マクラケン直子 (naokomc)httpswwwfacebookcomgroupsdi2estudy

デザイニングインターフェース 第2版

パターンによる実践的インタラクションデザインhttpamzntoLfZuHZ

naokomc現 ハピネスエンジニア 元 デザイナー

勉強会詳細は Facebook グループで darrhttpswwwfacebookcomgroupsdi2estudy

今日の発表について

5章に書いてあること

「インタラクティブな状況でリスト項目をいかに表示するか」

5章に書いていないこと

bullメニュー（6章）bullリスト項目内の複雑なデータ（7章）bullリンクやナビゲーション（3章）bullモバイルでのリスト（10章）

リストを使う場所

bull全体の概要を表示bull項目をひとつずつブラウジングbull特定の項目を検索bull項目の移動追加削除再カテゴライズ

情報アーキテクチャ再考

bull長さbull順序bullグループ化bull項目のタイプbullインタラクションbull動的なふるまい

2パネルのセレクタ Two-Panel Selector

Picasa デスクトップアプリ

他の例 FinderWindows エクスプローラーメールクライアントなど

1ウィンドウでのドリルダウン One-Window Drilldown

WordPressorg フォーラム

他の例 iPhone メールアプリRavelry フォーラムPicasa アプリなど

リストのインレイ List Inlay

Twittercom

他の例 Kayakcom (航空チケット検索)Google リーダーAmazon モバイルサイトなど

サムネイルのグリッド Thumbnail Grid

SideWinder for WordPress - Dynamic Grid Portfolio

カルーセル Carousel

Beautiful Creative Portfolio - 3D Carousel

Book Store Magento Theme

行のストライプ配色 Row Striping

Converse - Premium Support Theme for Vanilla Forums

ページネーション Pagination

Avenue Continuum Book Store

ThemeForest

Kayakcom Google

項目へのジャンプ Jump to Item

ldquosrdquo とタイプすると一致する項目に移動する

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

カスケーディングリスト Cascading List

Evernote デスクトップアプリ

ツリー表示テーブル Tree Table

Chrome ブックマーク管理

新規項目の入力行 New-Item Row

BaseCamp

Remember The Milk

パターンライブラリいろいろ

httpui-patternscomhttpdeveloperyahoocomypatterns

httpweliecompatternshttpquinceinfragisticscomhtmlAllPatternsaspx

httppatternrycom