画像のサムネイルを表示するときの表示方法について

Justified Layout
アスペクト比を可能な限り維持し、高さを合わせて表示する方法。Flickr の新UIがこれ。
サイムネイル一行をレンダリングエリアの横幅に収める必要があるので、動的なリサイジング(クロップ)処理が必須。

f:id:Ajido:20120311231013p:plain


Justified Layout (+Non-Cropped View)
Justified Layout に加え、画像を選択した場合などに、元のアスペクト比を維持した、
動的リサイジング前の画像を描写する方法。Google 画像検索などがこれ。

f:id:Ajido:20120311234838p:plain f:id:Ajido:20120311234851p:plain


Masonry Layout
アスペクト比を維持し、横幅を合わせて表示する方法。NEVER 画像検索や jQuery Masonry がこれ。
Justified Layout と異なり、レンダリングエリアに合わせる必要がないのでリサイジングが不要。

f:id:Ajido:20120311231138p:plain


Tile Layout
画像を縮小したあとに、その画像の一部を一定サイズに切り取り、タイル表示させる方法。
iOS の標準カメラアプリや、その他 iOS App の多くが採用している表示方法。

f:id:Ajido:20120311233824p:plain


Tile Layout (+Cropped Large-Photo)
画像を縮小せずに、その画像の一部を一定サイズに切り取り、タイル表示させる方法。
文字が含まれる画面のスクリーンショットなど、縮小させるとデメリットが大きい画像に対して有用。

f:id:Ajido:20120311233831p:plain


Tile Layout (+Non-Cropped View)
基本的な Tile Layout と同じように画像を切り取り、画像全体が見えないサムネイルをタイル表示させるが、
画像を選択した場合などに、元の比率を維持したままサムネイルサイズまで縮小させた「全体が把握できる画像」を描写する方法。

f:id:Ajido:20120311234136p:plain f:id:Ajido:20120311234903p:plain


Multi-Size Layout
大小・縦横比が様々な画像をマージンを添えて並べる方法。
FlickriPhoto、Windows エクスプローラなどがこれ。

f:id:Ajido:20120311232219p:plain


List Layout
TableView、ListView などの各行に、アイコンとして画像サムネイルを表示する方法。
これは画像よりも文字を優先させる場合に使うものだと思うので、サムネイル表示目的では不適切。

f:id:Ajido:20120311232206p:plain


それぞれ勝手にネーミングしました。
正しい呼称があれば教えてください。

広告を非表示にする