|
|
| Line 1: |
Line 1: |
| − | Filling up progress bar는 작업의 진행상태와 진행정도를 Bar형태의 색상을 채워서 보여주거나 숫자 퍼센테이지를 표시해서 알려주는 패턴이다. 사용자가 어떠한 행동을 시작할 수 있도록 진행상태나 진행정도를 알려주는 인터랙션 패턴이다. | + | Filling up progress bar는 작업의 진행상태와 진행정도를 알려주는 인터랙션 패턴이다. 진행상태를 나타내기 위해 bar에 색상을 채워서 보여주거나 진행정도를 퍼센트(%) 숫자로 표시해서 알려주기도 한다. |
| | | | |
| | === With this pattern, we can solve... === | | === With this pattern, we can solve... === |
| − | * [[Circulating progress bar/wheel]] 패턴과는 달리 bar가 looped 형식으로 무한반복하여 채워지는 것이 아니라, 한번 채워지면면 다음 프로세스가 진행된다. | + | * [[Circulating progress bar/wheel]] 패턴과는 달리 bar가 순환되는 형식으로 무한반복하여 채워지는 것이 아니라, 한번 끝까지 채워지면 다음 프로세스로 넘어간다. |
| | + | * 다음 프로세스가 진행되기 까지 사용자가 얼마나 기다려야 하는지 bar의 채워진 면이나 퍼센트(%)로 알려주기 때문에 실시간으로 진행정도를 확인할 수 있다. |
| | + | * 앱을 다운로드 받거나 앱을 실행하는 초기화면 등에 자주 사용된다. |
| | | | |
| | === Example: iOS_ Safari=== | | === Example: iOS_ Safari=== |
Revision as of 14:12, 1 July 2014
Filling up progress bar는 작업의 진행상태와 진행정도를 알려주는 인터랙션 패턴이다. 진행상태를 나타내기 위해 bar에 색상을 채워서 보여주거나 진행정도를 퍼센트(%) 숫자로 표시해서 알려주기도 한다.
With this pattern, we can solve...
- Circulating progress bar/wheel 패턴과는 달리 bar가 순환되는 형식으로 무한반복하여 채워지는 것이 아니라, 한번 끝까지 채워지면 다음 프로세스로 넘어간다.
- 다음 프로세스가 진행되기 까지 사용자가 얼마나 기다려야 하는지 bar의 채워진 면이나 퍼센트(%)로 알려주기 때문에 실시간으로 진행정도를 확인할 수 있다.
- 앱을 다운로드 받거나 앱을 실행하는 초기화면 등에 자주 사용된다.
Example: iOS_ Safari
- 프로세스의 진행상태를 채워지는 바 형태로 알려준다.
iOS_Between
- 의도한 사진이나 그림등의 파일을 올리고 있는 중임을 아이콘과 진행 바를 통해 알려준다.
Android_App download
Android_App download
- 다운로드 상황을 progress bar 형태로 시각화하여 사용자에게 알려준다.
Android _ Galaxy update
- App의 업데이트 진행 상황을 progress bar 형태로 시각화하여 사용자에게 알려준다.
Android _ Google play store instal
- App의 설치 진행상황을 progress bar 형태로 시각화하여 사용자에게 알려준다.
Android _ 리본공예 배우기 update
- App의 업데이트 진행상황을 progress bar와 wheel 두가지 형태로 시각화하여 사용자에게 알려준다
Android _ 올레네비 update
- App의 업데이트 진행상황을 progress bar 형태로 시각화하여 사용자에게 알려준다
Wii_Wii Fit
- 시계방향으로 색이 변하던 원 모양이 사방으로 퍼지는 이미지를 통해 로딩 시간이 끝나고 곧이어 사용자의 동작이 인식되어 하고자 하는 일에 반영될 것임을 알려준다.