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

Differences between revisions 1 and 17 (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 1 as of 2010-10-14 06:02:38 → 
  Size: 151
  Editor: shoobe01
  Comment:
+   ← Revision 17 as of 2010-10-14 06:59:54 → ⇥
  Size: 1527
  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}}||<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.||

=== 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.||

=== 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.||

=== 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.||