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

Differences between revisions 2 and 18 (spanning 16 versions)

Problem

Solution

Variations

Interaction Details

Presentation Details

Antipatterns

Examples

Springboard

		• Many items on screen.
		• Position and skew (perspective) only.
		• Position indicator at bottom.

Amazon

		• Horizontal.
		• Linear.
		• Scaled.
		• No distortion.
		• Scroll indicators below.
		• Bad: No pagination.

S60 Album

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

Playfire

		• Images to either side are badly distorted.
		• Lack of perspective makes this unconvincing.

-  ⇤ ← Revision 2 as of 2010-10-14 06:35:25 → 
  Size: 1645
  Editor: shoobe01
  Comment:
+   ← Revision 18 as of 2010-10-14 07:00:28 → ⇥
  Size: 1527
  Editor: shoobe01
  Comment:
-Deletions are marked like this.
+Additions are marked like this.
 Line 14:
-===Springboard===
{| border="0" cellpadding="5" cellspacing="0"
|-valign="top"
| rowspan=4| [[Image:O-positive.png]]
| rowspan=4  style="width:275px; " | [[Image:springboard.jpg|Border|]]
|-valign="top"
| &#149; Many items on screen.
|-valign="top"
| &#149; Scale and position only.
|-valign="top"
| &#149; Position indicator at bottom.
|}
+=== Springboard ===
||<style="border:none;" ^|3>{{attachment:O-positive.png}}||<style="border:none;" |3>{{attachment:Springboard.jpg}}||<style="border:none;">&#149; Many items on screen.||
||<style="border:none;"> &#149; Position and skew (perspective) only.||
||<style="border:none;" ^> &#149; Position indicator at bottom.||
-Line 27:
+Line 19:
-===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.
|}
+=== Amazon ===
||<style="border:none;" ^|6>{{attachment:O-positive.png}}||<style="border:none;" |6>{{attachment:Amazon-carousel.jpg}}||<style="border:none;">&#149; Horizontal.||
||<style="border:none;"> &#149; Linear.||
||<style="border:none;"> &#149; Scaled.||
||<style="border:none;"> &#149; No distortion.||
||<style="border:none;"> &#149; Scroll indicators below.||
||<style="border:none;" ^> &#149; Bad: No pagination.||
-Line 46:
+Line 27:
-===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.
|}
+=== S60 Album ===
||<style="border:none;" ^|3>{{attachment:O-positive.png}}||<style="border:none;" |3>{{attachment:S60-carousel.jpg}}||<style="border:none;">&#149; Many items on screen.||
||<style="border:none;"> &#149; Scale and position only.||
||<style="border:none;" ^> &#149; Position indicator at bottom.||
-Line 59:
+Line 32:
-===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.
|}
+=== Playfire ===
||<style="border:none;" ^|2>{{attachment:X-negative.png}}||<style="border:none;" |2>{{attachment:Playfire.jpg}}||<style="border:none;">&#149; Images to either side are badly distorted.||
||<style="border:none;" ^> &#149; Lack of perspective makes this unconvincing.||