From Design pattern
Jump to: navigation, search
(iOS_Prezi)
 
(12 intermediate revisions by one user not shown)
Line 1: Line 1:
Filling up progress wheel은 원을 그리듯 작업의 진행정도를 시각화 하는 패턴이다.
+
Filling up progress Wheel 은 작업의 진행상태와 진행정도를 알려주는 인터랙션 패턴이다. 진행상태를 나타내기 위해 wheel에 색상을 채워서 보여주거나 진행정도를 퍼센트(%) 숫자로 표시해서 알려주기도 한다.
 
+
 
+
작업의 진행상태와 진행정도등을 wheel을 이용하여 실시간으로 알려준다. Filling up progress wheel은 원을 그리듯 작업의 진행정도를 시각화 하는 방식으로 Filling up progress bar에 비하여 비교적 빨리 진행이 완료되는 경우에 사용된다.  Circulating progress bar/wheel이 진행이 완료될때까지 원을 그리는 피드백이 반복되는 것과 달리 하나의 원이 그려지면 진행이 완료된다.
+
  
 
=== With this pattern, we can solve... ===
 
=== With this pattern, we can solve... ===
Progress bar는 진행정도에 따라 bar가 채워지거나 전체 작업을 퍼센트 개념으로 시각화 하는 등 다양한 표현방식을 통해 기다려야 하는 정도를 알려준다.
+
* [[Circulating progress wheel]] 패턴과는 달리 wheel가 순환되는 형식으로 무한반복하여 채워지는 것이 아니라, wheel이 한번 채워지면 다음 프로세스가 진행된다.
Circulating progress bar/wheel 패턴과는 달리 bar가 looped 형식으로 무한반복하여 채워지는 것이 아니라, 한번 채워지면면 다음 프로세스가 진행된다.
+
* Bar 형태보다  Wheel 형태가 비교적 빨리 진행완료가 되는 경우에 사용된다.
 +
* 다음 프로세스가 진행되기 까지 사용자가 얼마나 기다려야 하는지에 대해 bar/Wheel 의 채워진 색상의 면이나 퍼센트(%)로 알려주기 때문에 실시간으로 진행정도를 확인할 수 있다.
 +
* 앱을 다운로드 받거나 앱을 실행하는 초기화면 등에 자주 사용된다.
 +
 
 +
=== Example==
 +
[[file: Wheel.gif|665px]]
 +
https://www.behance.net/gallery/8490779/Progress-bar
  
 
----
 
----
== Example ==
+
 
 
=== iOS_Prezi ===
 
=== iOS_Prezi ===
 
* 한 프레임에 들어가는 이미지의 다운로드 진행 상태를 원형의 점선의 색깔이 변화하는 형태로 알려준다.
 
* 한 프레임에 들어가는 이미지의 다운로드 진행 상태를 원형의 점선의 색깔이 변화하는 형태로 알려준다.
 
{{#Widget:Vimeo|id=94762485|width=533|height=395}}
 
{{#Widget:Vimeo|id=94762485|width=533|height=395}}
  
 +
=== iOS_Sixpack ===
 +
{{#Widget:Vimeo|id=103219260|width=395|height=524}}
  
 
[[Category:Show_progress_state]]
 
[[Category:Show_progress_state]]

Latest revision as of 18:10, 12 August 2014

Filling up progress Wheel 은 작업의 진행상태와 진행정도를 알려주는 인터랙션 패턴이다. 진행상태를 나타내기 위해 wheel에 색상을 채워서 보여주거나 진행정도를 퍼센트(%) 숫자로 표시해서 알려주기도 한다.

With this pattern, we can solve...

  • Circulating progress wheel 패턴과는 달리 wheel가 순환되는 형식으로 무한반복하여 채워지는 것이 아니라, wheel이 한번 채워지면 다음 프로세스가 진행된다.
  • Bar 형태보다 Wheel 형태가 비교적 빨리 진행완료가 되는 경우에 사용된다.
  • 다음 프로세스가 진행되기 까지 사용자가 얼마나 기다려야 하는지에 대해 bar/Wheel 의 채워진 색상의 면이나 퍼센트(%)로 알려주기 때문에 실시간으로 진행정도를 확인할 수 있다.
  • 앱을 다운로드 받거나 앱을 실행하는 초기화면 등에 자주 사용된다.

= Example

Wheel.gif https://www.behance.net/gallery/8490779/Progress-bar


iOS_Prezi

  • 한 프레임에 들어가는 이미지의 다운로드 진행 상태를 원형의 점선의 색깔이 변화하는 형태로 알려준다.

iOS_Sixpack