From Design pattern
Jump to: navigation, search
(→‎iPod4)
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;
 +
-->
 +
}
 +
 +
}}
 +
 
Slider는 스피커 볼륨이나 화면의 밝기와 같은 어플리케이션에 적용될 수 있는 값을 조정하는 패턴이다. 주로 Slider 이미지의 값의 위치와 바로 적용되어 보여지는 값이 함께 변화한다. 사용자는 최소값과 최대값이 정해진 연속된 범위의 값 사이에서 현재값을 나타내며 값을 변경할 수 있는 값 조절점을 움직이는 형태로 Slider를 조작한다.  
 
Slider는 스피커 볼륨이나 화면의 밝기와 같은 어플리케이션에 적용될 수 있는 값을 조정하는 패턴이다. 주로 Slider 이미지의 값의 위치와 바로 적용되어 보여지는 값이 함께 변화한다. 사용자는 최소값과 최대값이 정해진 연속된 범위의 값 사이에서 현재값을 나타내며 값을 변경할 수 있는 값 조절점을 움직이는 형태로 Slider를 조작한다.  
  
−
변화하고자 하는 값의 메타포에 따라 수평형, 수직형, 원형이 존재한다.
+
변화하고자 하는 값의 메타포에 따라 구분이 가능한데, 주로 Slider bar방식이 사용되며, Slider bar의 경우 수평형, 수직형, 원형 및 보이지 않는 형태가 존재한다.
  
−
=== What Problem Does This Solve? ===  
+
=== With this pattern, we can solve... ===
−
*Slider 패턴은 부드럽게 연속된 값을 조절할 수 있다.
+
app이 점점 개
  
 +
*Slider 패턴은 부드럽게 연속된 값을 조절할 수 있다.
 
*Slider 패턴을 통해서 특정 범위안의 현재값을 상대적으로 파악할 수 있다.
 
*Slider 패턴을 통해서 특정 범위안의 현재값을 상대적으로 파악할 수 있다.
−
 
 
*Slider 패턴은 간단한 동작을 통해 원하는 값을 설정할 수 있다.
 
*Slider 패턴은 간단한 동작을 통해 원하는 값을 설정할 수 있다.
  
 +
디지털기기의 스크린이 발전함에 따라 이미지작업을 하거나 필기를 할 때 원하는 색을 선택하기 위한 pattern이 필요하다. Color palette는 원하는 색을 쉽게 보고 선택할 수 있는 기능을 제공한다.
 +
 +
* Color palette는 원하는 색을 입력하기 위하여 색을 보고 선택할 수 있는 공간을 가지고 있다.
 +
* 사용자가 입력을 위해 선택한 색을 화면에서 표시해줌으로, 입력될 색에 대한 정보를 제공한다.
 +
* Color palette는 기존의 데스크탑에서 사용되던 일러스트툴과 유사한 방식을 사용하였다.
 +
 +
=== Example : 495번 사례 ===
 +
{{#Widget:Vimeo|id=93374681|width=533|height=395|start=4s}}
 +
----
 
=== Example : iPhone_Tune Player ===
 
=== Example : iPhone_Tune Player ===
 
* Slider bar의 조절점을 좌우로 drag하여, 앱에서 재생중인 음원의 메인 볼륨과 다른 음원의 배경볼륨을 각각 설정한다.
 
* Slider bar의 조절점을 좌우로 drag하여, 앱에서 재생중인 음원의 메인 볼륨과 다른 음원의 배경볼륨을 각각 설정한다.
Line 65: Line 134:
 
* 터치휠이 위치한 부분을 시계반대방향 혹은 시계방향으로 drag하여 해당 항목의 위아래에 위치한 항목으로 활성영역을 변경하거나 음량을 조절한다.
 
* 터치휠이 위치한 부분을 시계반대방향 혹은 시계방향으로 drag하여 해당 항목의 위아래에 위치한 항목으로 활성영역을 변경하거나 음량을 조절한다.
 
<videoflash type="vimeo">95703750|300|533</videoflash>
 
<videoflash type="vimeo">95703750|300|533</videoflash>
 +
 +
 +
== Color palette ==
 +
<div id="sun-col">
 +
 +
=== 496번 사례 ===
 +
* 원형의 색채 메뉴와 색깔 띠 형태의 명도 메뉴, 슬라이더 형태의 채도 메뉴에서 원하는 위치를 tap하여 색채, 명도, 채도의 조합에 따라 원하는 색깔을 선택한다. drag를 할 경우 색깔의 변화를 점진적으로 본다.
 +
{{#Widget:Vimeo|id=93374683|width=533|height=395}}
 +
 +
=== 280번 사례 ===
 +
{{#Widget:Vimeo|id=95488541|width=300|height=380}}
 +
 +
=== 382번 사례 ===
 +
* 기존 색상이 있는 팔레트에 다른 색상을 올려 시계반대방향으로 돌리는 정도에 따라 두 색상이 섞인다.
 +
{{#Widget:Vimeo|id=93373874|width=533|height=395}}
 +
</div>
  
  
  
 
[[Category:Enter a continuous value]]
 
[[Category:Enter a continuous value]]

Revision as of 17:10, 27 May 2014


Slider는 스피커 볼륨이나 화면의 밝기와 같은 어플리케이션에 적용될 수 있는 값을 조정하는 패턴이다. 주로 Slider 이미지의 값의 위치와 바로 적용되어 보여지는 값이 함께 변화한다. 사용자는 최소값과 최대값이 정해진 연속된 범위의 값 사이에서 현재값을 나타내며 값을 변경할 수 있는 값 조절점을 움직이는 형태로 Slider를 조작한다.

변화하고자 하는 값의 메타포에 따라 구분이 가능한데, 주로 Slider bar방식이 사용되며, Slider bar의 경우 수평형, 수직형, 원형 및 보이지 않는 형태가 존재한다.

With this pattern, we can solve...

app이 점점 개

  • Slider 패턴은 부드럽게 연속된 값을 조절할 수 있다.
  • Slider 패턴을 통해서 특정 범위안의 현재값을 상대적으로 파악할 수 있다.
  • Slider 패턴은 간단한 동작을 통해 원하는 값을 설정할 수 있다.

디지털기기의 스크린이 발전함에 따라 이미지작업을 하거나 필기를 할 때 원하는 색을 선택하기 위한 pattern이 필요하다. Color palette는 원하는 색을 쉽게 보고 선택할 수 있는 기능을 제공한다.

  • Color palette는 원하는 색을 입력하기 위하여 색을 보고 선택할 수 있는 공간을 가지고 있다.
  • 사용자가 입력을 위해 선택한 색을 화면에서 표시해줌으로, 입력될 색에 대한 정보를 제공한다.
  • Color palette는 기존의 데스크탑에서 사용되던 일러스트툴과 유사한 방식을 사용하였다.

Example : 495번 사례

Example : iPhone_Tune Player

  • Slider bar의 조절점을 좌우로 drag하여, 앱에서 재생중인 음원의 메인 볼륨과 다른 음원의 배경볼륨을 각각 설정한다.

Horizontal Slider

Android_Noom Diet Coach

  • 슬라이드 바의 조절점을 가로로 drag하여 목표 걸음 수를 입력한다.

iPhone_Korailtalk

  • 승차인원을 선택하는 화면에서, 어른, 어린이, 경로의 각 항목별로 Bar 위에서 좌우로 drag하면 해당하는 숫자만큼의 사람 아이콘이 나온다.

iPad_Booklip

  • 랭킹점수를 조절하면 점수에 맞는 추천글을 선택하여 책 추천도를 입력한다.

Andriod_ARTPOP

  • 3차원 객체의 표면에 관련된 색상, 재질 등 다양한 효과의 항목이 쓰여진 Slider 위 아이콘을 좌우로 Drag하여 조절한다.

Andriod_ARTPOP

  • 3차원 객체의 겉모양에 관련된 다양한 항목이 쓰여진 Slider 위 아이콘을 좌우로 Drag하여 조절한다.

iPhone_My Wonderful Days

  • Slider bar의 조절점을 좌우로 drag하여, 감정상태를 입력한다.

iPad_Adobe Photoshop Express

  • Slider bar의 조절점을 좌우로 drag하여 사진의 밝기,명도,대비 등을 입력한다.

Vertical Slider

Android_Candy Camera

  • 화면의 슬라이드 바를 세로로 drag하여 카메라 렌즈로 들어 오는 빛의 양을 조절한다.

Samsung's Transparent Smart Window with virtual blinds

  • 유리창을 위아래로 drag 하면, 위로 올릴때 버티칼이 열리고 아래로 내리면 버티칼리 내려가며 태양광을 조절한다.

Apple CarPlay

  • slide bar를 drag하여 차량 내부온도를 조절하다

Bmw scolling.jpeg

Circle Slider

iPhone_Alarmmon

  • circle slider의 조절점을 drag하여 알람시간을 설정한다.

iPod 4th

  • 터치휠이 위치한 부분을 시계반대방향 혹은 시계방향으로 drag하여 해당 항목의 위아래에 위치한 항목으로 활성영역을 변경하거나 음량을 조절한다.

Color palette

496번 사례

  • 원형의 색채 메뉴와 색깔 띠 형태의 명도 메뉴, 슬라이더 형태의 채도 메뉴에서 원하는 위치를 tap하여 색채, 명도, 채도의 조합에 따라 원하는 색깔을 선택한다. drag를 할 경우 색깔의 변화를 점진적으로 본다.

280번 사례

382번 사례

  • 기존 색상이 있는 팔레트에 다른 색상을 올려 시계반대방향으로 돌리는 정도에 따라 두 색상이 섞인다.

Retrieved from "http://www.ixpatterns.com/index.php?title=Slider&oldid=101698"