Designing Interfaces Book Reading #3: Chapter 5
-
Upload
naoko-takano-mccracken -
Category
Design
-
view
1.540 -
download
3
description
Transcript of Designing Interfaces Book Reading #3: Chapter 5
![Page 1: Designing Interfaces Book Reading #3: Chapter 5](https://reader033.fdocument.pub/reader033/viewer/2022051616/5551315db4c905325d8b4e55/html5/thumbnails/1.jpg)
下北沢オープンソース 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
![Page 2: Designing Interfaces Book Reading #3: Chapter 5](https://reader033.fdocument.pub/reader033/viewer/2022051616/5551315db4c905325d8b4e55/html5/thumbnails/2.jpg)
デザイニングインターフェース 第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
![Page 3: Designing Interfaces Book Reading #3: Chapter 5](https://reader033.fdocument.pub/reader033/viewer/2022051616/5551315db4c905325d8b4e55/html5/thumbnails/3.jpg)
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
![Page 4: Designing Interfaces Book Reading #3: Chapter 5](https://reader033.fdocument.pub/reader033/viewer/2022051616/5551315db4c905325d8b4e55/html5/thumbnails/4.jpg)
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
![Page 5: Designing Interfaces Book Reading #3: Chapter 5](https://reader033.fdocument.pub/reader033/viewer/2022051616/5551315db4c905325d8b4e55/html5/thumbnails/5.jpg)
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
![Page 6: Designing Interfaces Book Reading #3: Chapter 5](https://reader033.fdocument.pub/reader033/viewer/2022051616/5551315db4c905325d8b4e55/html5/thumbnails/6.jpg)
リストを使う場所
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
![Page 7: Designing Interfaces Book Reading #3: Chapter 5](https://reader033.fdocument.pub/reader033/viewer/2022051616/5551315db4c905325d8b4e55/html5/thumbnails/7.jpg)
情報アーキテクチャ再考
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
![Page 8: Designing Interfaces Book Reading #3: Chapter 5](https://reader033.fdocument.pub/reader033/viewer/2022051616/5551315db4c905325d8b4e55/html5/thumbnails/8.jpg)
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
![Page 9: Designing Interfaces Book Reading #3: Chapter 5](https://reader033.fdocument.pub/reader033/viewer/2022051616/5551315db4c905325d8b4e55/html5/thumbnails/9.jpg)
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
![Page 10: Designing Interfaces Book Reading #3: Chapter 5](https://reader033.fdocument.pub/reader033/viewer/2022051616/5551315db4c905325d8b4e55/html5/thumbnails/10.jpg)
リストのインレイ 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
![Page 11: Designing Interfaces Book Reading #3: Chapter 5](https://reader033.fdocument.pub/reader033/viewer/2022051616/5551315db4c905325d8b4e55/html5/thumbnails/11.jpg)
サムネイルのグリッド 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
![Page 12: Designing Interfaces Book Reading #3: Chapter 5](https://reader033.fdocument.pub/reader033/viewer/2022051616/5551315db4c905325d8b4e55/html5/thumbnails/12.jpg)
カルーセル 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
![Page 13: Designing Interfaces Book Reading #3: Chapter 5](https://reader033.fdocument.pub/reader033/viewer/2022051616/5551315db4c905325d8b4e55/html5/thumbnails/13.jpg)
行のストライプ配色 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
![Page 14: Designing Interfaces Book Reading #3: Chapter 5](https://reader033.fdocument.pub/reader033/viewer/2022051616/5551315db4c905325d8b4e55/html5/thumbnails/14.jpg)
ページネーション 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
![Page 15: Designing Interfaces Book Reading #3: Chapter 5](https://reader033.fdocument.pub/reader033/viewer/2022051616/5551315db4c905325d8b4e55/html5/thumbnails/15.jpg)
項目へのジャンプ Jump to Item
ldquosrdquo とタイプすると一致する項目に移動する
アルファベット式スクローラー Alphabet Scroller
カスケーディングリスト Cascading List
Evernote デスクトップアプリ
ツリー表示テーブル Tree Table
Chrome ブックマーク管理
新規項目の入力行 New-Item Row
BaseCamp
Remember The Milk
パターンライブラリいろいろ
httpui-patternscomhttpdeveloperyahoocomypatterns
httpweliecompatternshttpquinceinfragisticscomhtmlAllPatternsaspx
httppatternrycom
![Page 16: Designing Interfaces Book Reading #3: Chapter 5](https://reader033.fdocument.pub/reader033/viewer/2022051616/5551315db4c905325d8b4e55/html5/thumbnails/16.jpg)
アルファベット式スクローラー Alphabet Scroller
カスケーディングリスト Cascading List
Evernote デスクトップアプリ
ツリー表示テーブル Tree Table
Chrome ブックマーク管理
新規項目の入力行 New-Item Row
BaseCamp
Remember The Milk
パターンライブラリいろいろ
httpui-patternscomhttpdeveloperyahoocomypatterns
httpweliecompatternshttpquinceinfragisticscomhtmlAllPatternsaspx
httppatternrycom
![Page 17: Designing Interfaces Book Reading #3: Chapter 5](https://reader033.fdocument.pub/reader033/viewer/2022051616/5551315db4c905325d8b4e55/html5/thumbnails/17.jpg)
カスケーディングリスト Cascading List
Evernote デスクトップアプリ
ツリー表示テーブル Tree Table
Chrome ブックマーク管理
新規項目の入力行 New-Item Row
BaseCamp
Remember The Milk
パターンライブラリいろいろ
httpui-patternscomhttpdeveloperyahoocomypatterns
httpweliecompatternshttpquinceinfragisticscomhtmlAllPatternsaspx
httppatternrycom
![Page 18: Designing Interfaces Book Reading #3: Chapter 5](https://reader033.fdocument.pub/reader033/viewer/2022051616/5551315db4c905325d8b4e55/html5/thumbnails/18.jpg)
ツリー表示テーブル Tree Table
Chrome ブックマーク管理
新規項目の入力行 New-Item Row
BaseCamp
Remember The Milk
パターンライブラリいろいろ
httpui-patternscomhttpdeveloperyahoocomypatterns
httpweliecompatternshttpquinceinfragisticscomhtmlAllPatternsaspx
httppatternrycom
![Page 19: Designing Interfaces Book Reading #3: Chapter 5](https://reader033.fdocument.pub/reader033/viewer/2022051616/5551315db4c905325d8b4e55/html5/thumbnails/19.jpg)
新規項目の入力行 New-Item Row
BaseCamp
Remember The Milk
パターンライブラリいろいろ
httpui-patternscomhttpdeveloperyahoocomypatterns
httpweliecompatternshttpquinceinfragisticscomhtmlAllPatternsaspx
httppatternrycom
![Page 20: Designing Interfaces Book Reading #3: Chapter 5](https://reader033.fdocument.pub/reader033/viewer/2022051616/5551315db4c905325d8b4e55/html5/thumbnails/20.jpg)
パターンライブラリいろいろ
httpui-patternscomhttpdeveloperyahoocomypatterns
httpweliecompatternshttpquinceinfragisticscomhtmlAllPatternsaspx
httppatternrycom