Difference between revisions of "Page indicators/Pagination"

Revision as of 21:44, 28 May 2014

Page indicators/Pagination은 컨텐츠 화면 간 이동할 때 사용하는 pattern이다. 주로 현재 페이지와 유사한 성격의 컨텐츠 간을 이동할 때 사용된다.

전후의 페이지를 이동하는 방식에 따라 구분이 가능한데, 주로 Paper flip 방식이 사용되며, Card flip, Cube flip, Slideshow 방식으로 분류할 수 있다. Page turn/ Page flip을 호출하는 방법은 주로 화면 좌우의 이동버튼이나 flick을 이용하여 동작시킨다.

Page indicators/Pagination은 트랜지션 효과를 통해 전후의 컨텐츠로 이동을 하며, 전후에 다른 컨텐츠가 존재할 것이라는 기대를 주기 위해 시각적 힌트를 주기도 한다.
Page indicators/Pagination 이전에는 Previous/Next button이나 이와 유사한 방식을 사용하였다.

Example : 206번 사례

File drawer

480번 사례

겹쳐저서 보이지 않는 여러개의 창을 위에서 아래로 drag하여 가려진 창의 정보를 본다.

Examples

352번 사례

화면 오른쪽에 일정한 간격으로 점이 나열되어 스크롤바의 역할을 하며, 한 점을 tap하면 그에 해당하는 항목 위치로 이동한다.

451번 사례

좌우로 스크롤을 움직이면 그 부분에 대한 간략한 정보가 보인다.
스크롤을 놓은 후에 그 지점으로 화면이 빠르게 이동한다.

631번 사례

음악이 모여 있는 화면에서 음악의 위치를 알 수 있는 인디케이터를 움직여 음악 목록의 내용을 훑어본다.

Character indicator

610번 사례

iOS_Cacaotalk app

Icon indicator

iOS_날씨

iOS_Duolingo

Android_noom

iOS_Knob lab

iOS_Behance

@@ Line 87: / Line 87: @@
 <videoflash type="vimeo">93368390|300|405</videoflash>
-=== 610번 사례 ===
+=== 451번 사례 ===
-<videoflash type="vimeo">94622272|300|528</videoflash>
+* 좌우로 스크롤을 움직이면 그 부분에 대한 간략한 정보가 보인다.
+* 스크롤을 놓은 후에 그 지점으로 화면이 빠르게 이동한다.
-=== iOS_Cacaotalk app ===
+<videoflash type="vimeo">93045495|300|405</videoflash>
-{{#Widget:Vimeo|id=96695352|width=300|height=533}}
 === 631번 사례 ===
@@ Line 97: / Line 96: @@
 <videoflash type="vimeo">94814137|300|456</videoflash>
-=== 451번 사례 ===
+----
-* 좌우로 스크롤을 움직이면 그 부분에 대한 간략한 정보가 보인다.
+== Character indicator ==
-* 스크롤을 놓은 후에 그 지점으로 화면이 빠르게 이동한다.
+=== 610번 사례 ===
-<videoflash type="vimeo">93045495|300|405</videoflash>
+<videoflash type="vimeo">94622272|300|528</videoflash>
+=== iOS_Cacaotalk app ===
+{{#Widget:Vimeo|id=96695352|width=300|height=533}}
+----
+== Icon indicator ==
 === iOS_날씨 ===
 {{#Widget:Vimeo|id=96693633|width=300|height=533}}

Personal tools