From Design pattern
Jump to: navigation, search
(419번 사례)
Line 1: Line 1:
{{#css:
+
Filling up progress bar는 작업의 진행상태와 진행정도 등을 bar 나 숫자 %를 이용하여 실시간으로 알려주는 패턴이다.
#mw-content-text h3 span {
+
font-weight: 600;
+
padding-left: 0px;
+
}
+
  
.mw-headline {
+
=== With this pattern, we can solve... ===
font-weight: 600;
+
* Progress bar는 진행정도에 따라 bar가 채워지거나 전체 작업을 퍼센트 개념으로 시각화 하는 등 다양한 표현방식을 통해 기다려야 하는 정도를 알려준다.
}
+
 
+
span.mw-editsection {
+
font-weight: 200;
+
position: relative;
+
float:right;
+
margin-right: 25px
+
}
+
 
+
span.mw-editsection a {
+
font-weight: 200;
+
}
+
 
+
.art-subpage {
+
background: #F7F7F7;
+
}
+
 
+
#mw-content-text p {
+
padding-top: 0px;
+
padding-bottom: 6px;
+
}
+
 
+
.mw-content-ltr ul {
+
margin: 0.3em 0 0 42px;
+
}
+
 
+
 
+
hr {
+
margin-top: 0px;
+
margin-bottom: 0px;
+
margin-left: -31px;
+
width: 720px;
+
border-bottom: 1px solid #E0E0DD;
+
border-left: 0px;
+
border-right: 0px;
+
border-top: 30px solid #F7F7F7;
+
}
+
<!--
+
#sun-col {
+
-webkit-column-count:2; /* Chrome, Safari, Opera */
+
-moz-column-count:2; /* Firefox */
+
column-count:2;
+
}
+
 
+
#sun-col p {
+
padding-left: 0px;
+
-->
+
}
+
 
+
}}
+
 
+
작업의 진행상태와 진행정도등을 bar를 이용하여 실시간으로 알려준다. Progress bar는 진행정도에 따라 bar가 채워지거나 전체 작업을 퍼센트 개념으로 시각화 하는 등 다양한 표현방식을 통해 기다려야 하는 정도를 알려준다.
+
  
 +
----
 
== Examples ==
 
== Examples ==
 
=== iOS_ Safari===
 
=== iOS_ Safari===
 
* 프로세스의 진행상태를 채워지는 바 형태로 알려준다.
 
* 프로세스의 진행상태를 채워지는 바 형태로 알려준다.
 
{{#Widget:Vimeo|id=95629311|width=300|height=400}}
 
{{#Widget:Vimeo|id=95629311|width=300|height=400}}
 +
 +
=== iOS_Between ===
 +
* 의도한 사진이나 그림등의 파일을 올리고 있는 중임을 아이콘과 진행 바를 통해 알려준다.
 +
{{#Widget:Vimeo|id=93373410|width=300|height=405}}
  
 
=== Android_App download===
 
=== Android_App download===
 
* 사례 설명 입력 예정
 
* 사례 설명 입력 예정
 
{{#Widget:Vimeo|id=94622276|width=300|height=528}}
 
{{#Widget:Vimeo|id=94622276|width=300|height=528}}
 
=== iOS_Between ===
 
* 의도한 사진이나 그림등의 파일을 올리고 있는 중임을 아이콘과 진행 바를 통해 알려준다.
 
{{#Widget:Vimeo|id=93373410|width=300|height=405}}
 
  
 
=== Android_App download ===
 
=== Android_App download ===

Revision as of 13:13, 24 June 2014

Filling up progress bar는 작업의 진행상태와 진행정도 등을 bar 나 숫자 %를 이용하여 실시간으로 알려주는 패턴이다.

With this pattern, we can solve...

  • Progress bar는 진행정도에 따라 bar가 채워지거나 전체 작업을 퍼센트 개념으로 시각화 하는 등 다양한 표현방식을 통해 기다려야 하는 정도를 알려준다.

Examples

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 형태로 시각화하여 사용자에게 알려준다