From Design pattern
Jump to: navigation, search
 
(16 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{#css:
+
Step indicators는 여러 항목의 데이터를 입력해서 어플을 사용할 경우, 그 입력단계를 구분하여 각 단계별 진행상황을 보여주는 패턴이다. 순차적으로 데이터를 입력해야만 다음 단계로 진행할 수 있다는 특징이 있다. 입력한 데이터가 잘못 입력된 경우 이전 단계로 이동하여 수정할 수 있다.
#mw-content-text h3 span {
+
font-weight: 600;
+
padding-left: 0px;
+
}
+
  
.mw-headline {
+
=== With this pattern, we can solve... ===
font-weight: 600;
+
* 데이터를 기입하는 순서와 행동을 보여주며 이 중 현재 어느 정도 진행했고, 앞으로 어떤 것이 있는지에 대해 확인할 수 있도록 모형이나 문자를 이용하여 알려준다.
}
+
* [[Page indicatros]]와 유사하게 현재 진행정도를 나타내 준다.
 +
* Navigation 기능을 갖기도 한다.
  
span.mw-editsection {
+
===Example ===
font-weight: 200;
+
[[file:Step_indicator.JPG|310px]]
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;
+
-->
+
}
+
 
+
}}
+
데이터를 기입하는 순서와 행동을 보여주며 이 중 현재 어느 정도 진행했고, 앞으로 어떤 것이 있는지에 대해 확인할 수 있도록 모형이나 문자를 이용하여 알려준다.
+
 
+
 
+
== Examples ==
+
=== 331번 사례 ===
+
* 데이터를 입력하고 여러 단계를 거치는 동안 프로세스의 진행 정도를 확인한다.
+
촬영불가자료_이미지로대체
+
  
 
=== iOS_MyFitnessPal ===
 
=== iOS_MyFitnessPal ===
Line 72: Line 18:
  
  
[[Category:Show_progress_state]]
+
[[Category:Indicate position]]

Latest revision as of 13:06, 21 July 2014

Step indicators는 여러 항목의 데이터를 입력해서 어플을 사용할 경우, 그 입력단계를 구분하여 각 단계별 진행상황을 보여주는 패턴이다. 순차적으로 데이터를 입력해야만 다음 단계로 진행할 수 있다는 특징이 있다. 입력한 데이터가 잘못 입력된 경우 이전 단계로 이동하여 수정할 수 있다.

With this pattern, we can solve...

  • 데이터를 기입하는 순서와 행동을 보여주며 이 중 현재 어느 정도 진행했고, 앞으로 어떤 것이 있는지에 대해 확인할 수 있도록 모형이나 문자를 이용하여 알려준다.
  • Page indicatros와 유사하게 현재 진행정도를 나타내 준다.
  • Navigation 기능을 갖기도 한다.

Example

Step indicator.JPG


iOS_MyFitnessPal

iOS_Uber