|
|
(40 intermediate revisions by 4 users not shown) |
Line 1: |
Line 1: |
| + | Wheel은 숫자를 입력하거나 항목을 선택 할 때 사용되며, 주로 날짜와 시간의 숫치를 입력할 때 사용되는 패턴이다. Pickers라고도 불려지며, 화면의 Wheel을 상하로 움직여 원하는 수치를 찾아 입력한다. |
| | | |
− | {{#css:
| + | === With this pattern, we can solve... === |
− | #mw-content-text h3 span {
| + | |
− | font-weight: 600;
| + | |
− | padding-left: 0px;
| + | |
− | }
| + | |
| | | |
− | .mw-headline { | + | 앱에서 특정한 숫자나 항목을 입력하기 위한 패턴이 필요하다. Wheel은 원하는 숫자나 항목을 쉽게 보고 입력할 수 있는 기능을 제공한다. 입력가능한 범위나 항목에 한계를 가지고 있어 사용자가 부적절한 값을 입력할 가능성이 없다. |
− | font-weight: 600;
| + | |
− | }
| + | |
| | | |
− | span.mw-editsection {
| + | * Wheel은 원하는 숫자나 항목을 입력할 때, 선택된 숫자나 항목의 이전과 이후의 정보를 제공한다. |
− | font-weight: 200;
| + | * 각 입력란에 대하여 상하로 Drag하여 Wheel을 회전 시켜 원하는 숫자나 항목을 입력한다. |
− | position: relative;
| + | |
− | float:right;
| + | |
− | margin-right: 25px
| + | |
− | }
| + | |
| | | |
− | span.mw-editsection a {
| |
− | font-weight: 200;
| |
− | }
| |
| | | |
− | .art-subpage {
| + | === Example : iOS_TIME Alarm=== |
− | background: #F7F7F7;
| + | [[File:Wheel3.jpg]] |
− | }
| + | |
| | | |
− | #mw-content-text p {
| + | ---- |
− | padding-top: 0px;
| + | |
− | padding-bottom: 6px;
| + | |
− | }
| + | |
| | | |
− | .mw-content-ltr ul {
| + | == Date and time pickers == |
− | margin: 0.3em 0 0 42px;
| + | |
− | }
| + | |
| | | |
| + | === iOS_Map my run=== |
| + | {{#Widget:Vimeo|id=95776842|width=300|height=533}} |
| | | |
− | hr {
| + | === iOS_My fitness pal === |
− | margin-top: 0px;
| + | {{#Widget:Vimeo|id=95776747|width=300|height=533}} |
− | 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 { | + | === iOS_TIME Alarm === |
− | padding-left: 0px;
| + | {{#Widget:Vimeo|id=96496729|width=300|height=533}} |
− | -->
| + | |
− | } | + | |
| | | |
− | }} | + | === iOS_Smart Alarm === |
| + | {{#Widget:Vimeo|id=93367959|width=300|height=533}} |
| | | |
− | Wheel은 숫자를 입력하거나 항목을 선택 할 때 사용하는 pattern이다. 주로 날짜와 시간을 입력할 때 사용된다.
| + | === iOS_Evernote === |
| + | {{#Widget:Vimeo|id=96605484|width=300|height=541}} |
| | | |
− | 색을 선택하는 Palette의 종류에 따라 구분이 가능한데, 주로 대표색을 선택하고 대표색에 해당하는 Palette에서 Tab을 통해서 특정 위치의 색을 선택하는 방식이 사용되며, 색을 선택한 뒤 그 색에 대한 그라데이션 바가 나타나고 Drag를 통해서 원하는 위치의 색을 선택하는 방식도 사용된다.
| + | === iOS_지하철 === |
| + | {{#Widget:Vimeo|id=93367655|width=395|height=533}} |
| | | |
− | === With this pattern, we can solve... === | + | === iOS_Sunrise Calendar === |
| + | {{#Widget:Vimeo|id=93939088|width=533|height=395}} |
| | | |
− | 디지털기기의 스크린이 발전함에 따라 이미지작업을 하거나 필기를 할 때 원하는 색을 선택하기 위한 pattern이 필요하다. Color palette는 원하는 색을 쉽게 보고 선택할 수 있는 기능을 제공한다.
| + | === Android_Calendar === |
| + | {{#Widget:Vimeo|id=96420713|width=300|height=541}} |
| | | |
− | * Color palette는 원하는 색을 입력하기 위하여 색을 보고 선택할 수 있는 공간을 가지고 있다.
| |
− | * 사용자가 입력을 위해 선택한 색을 화면에서 표시해줌으로, 입력될 색에 대한 정보를 제공한다.
| |
− | * Color palette는 기존의 데스크탑에서 사용되던 일러스트툴과 유사한 방식을 사용하였다.
| |
− |
| |
− | === Example : 495번 사례 ===
| |
− | {{#Widget:Vimeo|id=93374681|width=533|height=395|start=4s}}
| |
| ---- | | ---- |
| | | |
− | == Color palette == | + | == Etc == |
− | <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]]
| + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | wheel 형태의 목록을 drag해서 원하는 값을 입력한다.
| + | |
− | | + | |
− | == Example ==
| + | |
− | == Pickers ==
| + | |
− | | + | |
− | === IOS_TIME Alarm===
| + | |
− | {{#Widget:Vimeo|id=96496729|width=300|height=533}}
| + | |
− | | + | |
− | === 37번 사례 ===
| + | |
− | * 지하철 이동 시간을 볼 때, 열차의 시간이 나열된 wheel을 위아래로 drag하여 확인하고자 하는 시간을 입력한다.
| + | |
− | <videoflash type="vimeo">93367655|300|405</videoflash>
| + | |
− | | + | |
− | === 345번 사례 ===
| + | |
− | * 알람을 맞출 때, 시와 분의 휠을 각각 drag하여 시간을 맞춘다.
| + | |
− | <videoflash type="vimeo">93367959|300|405</videoflash>
| + | |
| | | |
− | === 215번 사례 === | + | === Android_Noom === |
− | * 사례 설명 입력 예정
| + | {{#Widget:Vimeo|id=96421017|width=300|height=541}} |
− | <videoflash type="vimeo">93372820|300|405</videoflash>
| + | |
| | | |
− | === 579번 사례 === | + | === iOS_Mixology™ === |
− | * 달력에 세부일정을 넣기 위해 spinner 에서 시간을 선택한다.
| + | {{#Widget:Vimeo|id=93372820|width=395|height=533}} |
− | <videoflash type="vimeo">93939088|533|395</videoflash>
| + | |
| | | |
− | [[Category:Enter a continuous value]] | + | [[Category:Enter continuous values]] |
Wheel은 숫자를 입력하거나 항목을 선택 할 때 사용되며, 주로 날짜와 시간의 숫치를 입력할 때 사용되는 패턴이다. Pickers라고도 불려지며, 화면의 Wheel을 상하로 움직여 원하는 수치를 찾아 입력한다.
앱에서 특정한 숫자나 항목을 입력하기 위한 패턴이 필요하다. Wheel은 원하는 숫자나 항목을 쉽게 보고 입력할 수 있는 기능을 제공한다. 입력가능한 범위나 항목에 한계를 가지고 있어 사용자가 부적절한 값을 입력할 가능성이 없다.