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;
 +
-->
 +
}
 +
 
 +
}}
 +
 
 +
Select & get quick output은
 +
 
 +
=== With this pattern, we can solve... ===
 +
app에서
 +
 
 +
*
 +
*
 +
*
 +
 
 +
=== Example : iOS_EyeEm ===
 +
{{#Widget:Vimeo|id=95705895|width=300|height=405|start=4s}}
 +
----
 
== Select one & get quick output ==
 
== Select one & get quick output ==
 +
<div id="sun-col">
 
하나의 옵션을 선택하여, 선택된 옵션에 대해 실시간으로 아웃풋이 적용되어 나온다.
 
하나의 옵션을 선택하여, 선택된 옵션에 대해 실시간으로 아웃풋이 적용되어 나온다.
  
Line 24: Line 95:
 
* 여러 개의 사진필터 중 하나를 골라 사진을 찍는다.
 
* 여러 개의 사진필터 중 하나를 골라 사진을 찍는다.
 
{{#Widget:Vimeo|id=93938689|width=533|height=395}}
 
{{#Widget:Vimeo|id=93938689|width=533|height=395}}
 +
</div>
 +
----
  
 
== Multiple select & get quick output ==
 
== Multiple select & get quick output ==
 
+
<div id="sun-col">
 
하나 이상의 옵션을 선택하여, 선택된 옵션에 대해 실시간으로 아웃풋이 적용되어 나온다.
 
하나 이상의 옵션을 선택하여, 선택된 옵션에 대해 실시간으로 아웃풋이 적용되어 나온다.
  
Line 37: Line 110:
 
* 1개 이상의 아이콘을 선택할 때, 바로 아이콘에 해당하는 음악이 재생되어 결과물을 즉각적으로 확인한다.
 
* 1개 이상의 아이콘을 선택할 때, 바로 아이콘에 해당하는 음악이 재생되어 결과물을 즉각적으로 확인한다.
 
{{#Widget:Vimeo|id=93374933|width=533|height=399}}
 
{{#Widget:Vimeo|id=93374933|width=533|height=399}}
 +
</div>
 +
 
[[category:Make selection from pre-defined values]]
 
[[category:Make selection from pre-defined values]]

Revision as of 22:06, 8 June 2014


Select & get quick output은

With this pattern, we can solve...

app에서

Example : iOS_EyeEm


Select one & get quick output

하나의 옵션을 선택하여, 선택된 옵션에 대해 실시간으로 아웃풋이 적용되어 나온다.

iOS_EyeEm

  • 사진을 찍을 때의 프레임이나 색상의 톤과 같이 미리 세팅되어져 있는 옵션 항목을 변경하고자 할 때 상하 또는 좌우로 drag하여 그 결과를 직접 화면을 통해 확인한다.

iOS_Filter Frame

  • 가로의 롤 형태의 메뉴 근처에서 좌우로 swipe하여 원하는 옵션의 메뉴를 가운데에 위치하여 활성화하면 편집의 대상이 되는 모든 사진에 해당 옵션이 적용된다.

iOS_푸딩카메라

  • 세로로 나열된 항목을 swipe하여 이동하면 옵션이 적용된다.
  • 아래는 세로로 나열된 카메라를 이동하여 가장 아래에 위치시키면 이동과 함께 카메라의 모드가 변경되는 사례이다.

iOS_푸딩카메라

  • 가로로 나열된 항목을 drag 하여 이동하면 옵션이 적용된다.
  • 아래는 가로로 나열된 카메라 필름을 이동하여 왼쪽에 위치한 카메라에 넣으면 필름이 옵션이 적용되는 사례이다.

iOS_Spark

  • 여러 개의 사진필터 중 하나를 골라 사진을 찍는다.


Multiple select & get quick output

하나 이상의 옵션을 선택하여, 선택된 옵션에 대해 실시간으로 아웃풋이 적용되어 나온다.

iOS_Relax Melodies

  • 1개 이상의 아이콘을 tap하여 선택하면, 선택되었다는 표시가 되는 동시에 아이콘에 해당하는 음악이 재생되어 결과물을 즉각적으로 확인한다.
  • 목록이 여러 페이지에 걸쳐 있어, 페이지를 왔다갔다하며 선택할 수 있다.

iOS_Novation Launchpad

  • 1개 이상의 아이콘을 선택할 때, 바로 아이콘에 해당하는 음악이 재생되어 결과물을 즉각적으로 확인한다.