Diff for "Carousel" - 4ourth Mobile Design Pattern Library

Differences between revisions 1 and 11 (spanning 10 versions)

Problem

Solution

Variations

Interaction Details

Presentation Details

Antipatterns

Examples

Springboard

		• Many items on screen.
		• Scale and position only.
		• Position indicator at bottom.

===Amazon=== {| border="0" cellpadding="5" cellspacing="0" |-valign="top" | rowspan=7| Image:O-positive.png | rowspan=7 style="width:275px; " | Name |-valign="top" | • Horizontal. |-valign="top" | • Linear. |-valign="top" | • Scaled. |-valign="top" | • No distortion. |-valign="top" | • Scroll indicators below. |-valign="top" | • Bad: No pagination. |}

===S60 Album=== {| border="0" cellpadding="5" cellspacing="0" |-valign="top" | rowspan=4| Image:O-positive.png | rowspan=4 style="width:275px; " | Name |-valign="top" | • Many items on screen. |-valign="top" | • Scale and position only. |-valign="top" | • Position indicator at bottom. |}

===Playfire=== {| border="0" cellpadding="5" cellspacing="0" |-valign="top" | rowspan=3| Image:X-negative.png | rowspan=3 style="width:275px; " | Name |-valign="top" | • Images to either side are badly distorted. |-valign="top" | • Lack of perspective makes this unconvincing. |}

-  ⇤ ← Revision 1 as of 2010-10-14 06:02:38 → 
  Size: 151
  Editor: shoobe01
  Comment:
+   ← Revision 11 as of 2010-10-14 06:49:40 → ⇥
  Size: 1524
  Editor: shoobe01
  Comment:
-Deletions are marked like this.
+Additions are marked like this.
 Line 13:
-== Examples==
+== Examples ==
=== Springboard ===
||<style="border:none;" |3>{{attachment:O-positive.png}}||<|3>{{attachment:Springboard.jpg}}|| &#149; Many items on screen.||
|| &#149; Scale and position only.||
|| &#149; Position indicator at bottom.||


===Amazon===
{| border="0" cellpadding="5" cellspacing="0"
|-valign="top"
| rowspan=7| [[Image:O-positive.png]]
| rowspan=7 style="width:275px; " | [[Image:amazon-carousel.jpg|Name|Border]]
|-valign="top"
| &#149; Horizontal.
|-valign="top"
| &#149; Linear.
|-valign="top"
| &#149; Scaled.
|-valign="top"
| &#149; No distortion.
|-valign="top"
| &#149; Scroll indicators below.
|-valign="top"
| &#149; Bad: No pagination.
|}

===S60 Album===
{| border="0" cellpadding="5" cellspacing="0"
|-valign="top"
| rowspan=4| [[Image:O-positive.png]]
| rowspan=4  style="width:275px; "  | [[Image:S60-carousel.jpg|Name|Border]]
|-valign="top"
| &#149; Many items on screen.
|-valign="top"
| &#149; Scale and position only.
|-valign="top"
| &#149; Position indicator at bottom.
|}

===Playfire===
{| border="0" cellpadding="5" cellspacing="0"
|-valign="top"
| rowspan=3| [[Image:X-negative.png]]
| rowspan=3  style="width:275px; "  | [[Image:Playfire.jpg|Name|Border]]
|-valign="top"
| &#149; Images to either side are badly distorted.
|-valign="top"
| &#149; Lack of perspective makes this unconvincing.
|}