From Design pattern
Jump to: navigation, search
Line 1: Line 1:
{{#css:
 
#mw-content-text h3 span {
 
font-weight: 600;
 
padding-left: 0px;
 
}
 
 
.mw-headline {
 
font-weight: 600;
 
}
 
 
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;
 
-->
 
}
 
 
}}
 
 
 
Multiple select는
 
Multiple select는
  
Line 69: Line 10:
 
=== Example : iOS_Melon ===
 
=== Example : iOS_Melon ===
 
{{#Widget:Vimeo|id=95571592|width=300|height=400|start=4s}}
 
{{#Widget:Vimeo|id=95571592|width=300|height=400|start=4s}}
 +
 
----
 
----
 
== Multiple select from a list ==
 
== Multiple select from a list ==
<div id="sun-col">
 
 
리스트 메뉴에서 하나 이상의 항목을 선택하여 입력한다.
 
리스트 메뉴에서 하나 이상의 항목을 선택하여 입력한다.
  
Line 87: Line 28:
 
=== Android_whatcha ===
 
=== Android_whatcha ===
 
{{#Widget:Vimeo|id=93208930|width=300|height=528}}
 
{{#Widget:Vimeo|id=93208930|width=300|height=528}}
</div>
+
 
 
----
 
----
  
 
== Multiple select from icons ==
 
== Multiple select from icons ==
<div id="sun-col">
 
 
아이콘이나 이름으로 이루어진 항목들 중 하나 이상을 선택하여 입력한다.
 
아이콘이나 이름으로 이루어진 항목들 중 하나 이상을 선택하여 입력한다.
  
 
=== iOS_STEP ===
 
=== iOS_STEP ===
 
* 하단에 있는 리스트에서 선택하고자 하는 아이콘을 1개 이상 tap하여 선택한다.
 
* 하단에 있는 리스트에서 선택하고자 하는 아이콘을 1개 이상 tap하여 선택한다.
<videoflash type="vimeo">93372306|300|405</videoflash>
+
{{#Widget:Vimeo|id=93372306|width=300|height=405}}
  
 
=== iOS_Fab ===
 
=== iOS_Fab ===
Line 102: Line 42:
  
 
=== 606번 사례 ===
 
=== 606번 사례 ===
<videoflash type="vimeo">94621849|300|528</videoflash>
+
{{#Widget:Vimeo|id=94621849|width=300|height=528}}
  
 
=== iOS_Photo ===
 
=== iOS_Photo ===
Line 109: Line 49:
 
=== iOS_Snapfish ===
 
=== iOS_Snapfish ===
 
* 버튼을 tap하여 항목 전체를 선택하거나 해제한다.
 
* 버튼을 tap하여 항목 전체를 선택하거나 해제한다.
<videoflash type="vimeo">94762384|300|405</videoflash>
+
{{#Widget:Vimeo|id=94762384|width=300|height=405}}
</div>
+
 
 
----
 
----
  
 
== Multiple select with checkbox ==
 
== Multiple select with checkbox ==
<div id="sun-col">
 
 
체크박스를 tap하여 하나 이상의 항목을 선택하여 입력한다.
 
체크박스를 tap하여 하나 이상의 항목을 선택하여 입력한다.
  
 
=== 604번 사례 ===
 
=== 604번 사례 ===
<videoflash type="vimeo">94621793|300|528</videoflash>
+
{{#Widget:Vimeo|id=94621793|width=300|height=528}}
  
 
=== iOS_Anylist ===
 
=== iOS_Anylist ===
<videoflash type="vimeo">94762480|300|405</videoflash>
+
{{#Widget:Vimeo|id=94762480|width=300|height=405}}
  
 
=== Android_LG G Pro 2 콜라주===
 
=== Android_LG G Pro 2 콜라주===
Line 130: Line 69:
 
=== iOS_gmail ===
 
=== iOS_gmail ===
 
{{#Widget:Vimeo|id=96423594|width=300|height=400}}
 
{{#Widget:Vimeo|id=96423594|width=300|height=400}}
</div>
+
 
 
----
 
----
  
 
== Multiple select range ==
 
== Multiple select range ==
<div id="sun-col">
 
 
특정 시작점과 끝점 사이에 포함되는 항목을 선택하여 입력한다.
 
특정 시작점과 끝점 사이에 포함되는 항목을 선택하여 입력한다.
 
  
 
=== Android_Etsy ===
 
=== Android_Etsy ===
Line 152: Line 89:
 
=== Android_Expedia ===
 
=== Android_Expedia ===
 
{{#Widget:Vimeo|id=96420812|width=300|height=504}}
 
{{#Widget:Vimeo|id=96420812|width=300|height=504}}
</div>
+
 
  
 
[[Category:Make selection from pre-defined values]]
 
[[Category:Make selection from pre-defined values]]

Revision as of 01:48, 27 June 2014

Multiple select는

With this pattern, we can solve...

app에서

Example : iOS_Melon


Multiple select from a list

리스트 메뉴에서 하나 이상의 항목을 선택하여 입력한다.

iOS_Melon

  • 목록에서 해당하는 것들을 하나씩 탭해서 여러 개를 선택하며 다시 탭하면 그 목록은 선택이 취소된다.

iOS_Bugs

  • 목록에서 해당하는 것들을 하나씩 탭해서 여러 개를 선택한다. 다시 탭하면 그 목록은 선택이 취소된다.

iOS_gmail

Android_whatcha


Multiple select from icons

아이콘이나 이름으로 이루어진 항목들 중 하나 이상을 선택하여 입력한다.

iOS_STEP

  • 하단에 있는 리스트에서 선택하고자 하는 아이콘을 1개 이상 tap하여 선택한다.

iOS_Fab

606번 사례

iOS_Photo

iOS_Snapfish

  • 버튼을 tap하여 항목 전체를 선택하거나 해제한다.


Multiple select with checkbox

체크박스를 tap하여 하나 이상의 항목을 선택하여 입력한다.

604번 사례

iOS_Anylist

Android_LG G Pro 2 콜라주

  • 별도의 사진 편집을 거치지 않고 한 장의 콜라주 사진으로 자동으로 만들때 사진 목록에서 해당 사진이 tap하여 선택 되었음을 체크박스를 통해 안다.
  • 단, 아래 영상의 2분 13초 ~ 2분 45초에 해당한다.

iOS_gmail


Multiple select range

특정 시작점과 끝점 사이에 포함되는 항목을 선택하여 입력한다.

Android_Etsy

iOS_Etsy

iOS_Fab

iOS_Sunrize

Android_Expedia