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는
 +
 +
=== With this pattern, we can solve... ===
 +
app에서
 +
 +
*
 +
*
 +
*
 +
 +
=== Example : iOS_Melon ===
 +
{{#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 16: Line 87:
 
=== 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">
 
아이콘이나 이름으로 이루어진 항목들 중 하나 이상을 선택하여 입력한다.
 
아이콘이나 이름으로 이루어진 항목들 중 하나 이상을 선택하여 입력한다.
  
Line 39: Line 110:
 
* 버튼을 tap하여 항목 전체를 선택하거나 해제한다.
 
* 버튼을 tap하여 항목 전체를 선택하거나 해제한다.
 
<videoflash type="vimeo">94762384|300|405</videoflash>
 
<videoflash type="vimeo">94762384|300|405</videoflash>
 
+
</div>
 
----
 
----
  
 
== Multiple select with checkbox ==
 
== Multiple select with checkbox ==
 +
<div id="sun-col">
 
체크박스를 tap하여 하나 이상의 항목을 선택하여 입력한다.
 
체크박스를 tap하여 하나 이상의 항목을 선택하여 입력한다.
  
Line 58: Line 130:
 
=== 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">
 
특정 시작점과 끝점 사이에 포함되는 항목을 선택하여 입력한다.
 
특정 시작점과 끝점 사이에 포함되는 항목을 선택하여 입력한다.
  
Line 79: Line 152:
 
=== 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 22:25, 8 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