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

Differences between revisions 15 and 17 (spanning 2 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 15 as of 2010-10-14 06:53:29 → 
  Size: 1611
  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 15:
-||<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;" ^|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.||
-Line 17:
+Line 30:
-||<style="border:none;"> &#149; Position indicator at bottom.||
+||<style="border:none;" ^> &#149; Position indicator at bottom.||
-Line 19:
+Line 32:
-===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.
|}
+=== 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.||