From Design pattern
Jump to: navigation, search
Line 5: Line 5:
 
* Navigation 기능을 갖기도 한다.
 
* Navigation 기능을 갖기도 한다.
  
----
+
=== Example: iOS_Booklip ===
== Examples  ==
+
* swipe 를 이용해 설명을 살펴보는 상황에서 현재 보고있는 위치를 page indicators를 통해 알려준다.
 
+
=== iOS_Booklip ===
+
* swipe 를 이용해 설명을 살펴보는 상황에서 현재 보고있는 위치를 page indicatior를 통해 알려준다.
+
 
{{#Widget:Vimeo|id=93938389|width=300|height=405}}
 
{{#Widget:Vimeo|id=93938389|width=300|height=405}}
  
 +
----
 
===Android_BBC news===
 
===Android_BBC news===
* 각각의 뉴스 컨텐츠를 swipe 를 이용하여 살펴보는 상황에서 현재 보고있는 위치를 page indicatior를 통해 알려준다.
+
* 각각의 뉴스 컨텐츠를 swipe 를 이용하여 살펴보는 상황에서 현재 보고있는 위치를 page indicaiors를 통해 알려준다.
 
{{#Widget:Vimeo|id=93207972|width=300|height=501}}
 
{{#Widget:Vimeo|id=93207972|width=300|height=501}}
  
 
===Android_대한민국 구석구석===
 
===Android_대한민국 구석구석===
* 가로로 나열된 포스팅을 이동하여 살펴보는 상황에서 현재 보고있는 위치를 page indicatior를 통해 알려준다.
+
* 가로로 나열된 포스팅을 이동하여 살펴보는 상황에서 현재 보고있는 위치를 page indicaiors를 통해 알려준다.
 
{{#Widget:Vimeo|id=93208256|width=300|height=501}}
 
{{#Widget:Vimeo|id=93208256|width=300|height=501}}
  
 
===Android_Watcha===
 
===Android_Watcha===
* 영화 컨텐츠 항목을 이동하여 살펴보는 상황에서 현재 보고있는 위치를 page indicatior를 통해 알려준다.
+
* 영화 컨텐츠 항목을 이동하여 살펴보는 상황에서 현재 보고있는 위치를 page indicaiors를 통해 알려준다.
 
* 아래 영상의 각각의 영화 포스터 오른쪽 위부분에 적용되어 있다.
 
* 아래 영상의 각각의 영화 포스터 오른쪽 위부분에 적용되어 있다.
 
{{#Widget:Vimeo|id=93208257|width=300|height=501}}
 
{{#Widget:Vimeo|id=93208257|width=300|height=501}}

Revision as of 16:23, 24 June 2014

Page indicators는 페이지 내에서 항목을 둘러볼 때 컨텐츠가 나뉘어있을 경우 현재 page를 알려주는 패턴이다.

With this pattern, we can solve...

  • Step indicators와 비교하여 볼때, page indicators는 다른 프로세스로 넘어가기 위한 현재 페이지를 보여주는 지표가 아닌, 페이지 내에서 일부 정보들이 넘어가는 페이지는 보여준다.
  • Navigation 기능을 갖기도 한다.

Example: iOS_Booklip

  • swipe 를 이용해 설명을 살펴보는 상황에서 현재 보고있는 위치를 page indicators를 통해 알려준다.


Android_BBC news

  • 각각의 뉴스 컨텐츠를 swipe 를 이용하여 살펴보는 상황에서 현재 보고있는 위치를 page indicaiors를 통해 알려준다.

Android_대한민국 구석구석

  • 가로로 나열된 포스팅을 이동하여 살펴보는 상황에서 현재 보고있는 위치를 page indicaiors를 통해 알려준다.

Android_Watcha

  • 영화 컨텐츠 항목을 이동하여 살펴보는 상황에서 현재 보고있는 위치를 page indicaiors를 통해 알려준다.
  • 아래 영상의 각각의 영화 포스터 오른쪽 위부분에 적용되어 있다.