From Design pattern
Jump to: navigation, search
(Example : iOS_Memo)
 
(20 intermediate revisions by 3 users not shown)
Line 1: Line 1:
{{#css:
+
On-Screen keyboard/Soft keyboard는 화면 상에 자판이 나타나 touch를 통해 문자를 입력하는 인터랙션 패턴이다. 주로 Text input field가 활성화되면서 자판이 함께 나타난다. 별도의 물리적 장치 없이 프로그램으로 자판을 제공하는 Soft keyboard의 대표적인 방식이다.
#mw-content-text h3 span {
+
font-weight: 600;
+
padding-left: 0px;
+
}
+
  
.mw-headline {
+
자판의 구성에 따라 QWERTY 방식과 10 Key 방식으로 나눌 수 있다.
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;
+
 
+
}
+
-->
+
 
+
.thumb {
+
margin: 0px 25px 5px 25px;
+
}
+
 
+
}}
+
On-Screen keyboard는 화면 상에 자판이 나타나 touch를 통해 문자를 입력하는 인터랙션 pattern이다. 주로 Text input field가 활성화되면서 자판이 함께 나타난다. 별도의 물리적 장치 없이 프로그램으로 자판을 제공하는 Soft keyboard(Software keyboard)의 대표적인 방식이다.
+
 
+
자판이 나타나면서 Text input field와 화면 구성이 어떻게 바뀌는가 따라 구분이 가능한데, 화면 전체가 바뀌는 방식과 자판만 밑에서 올라와 맥락을 계속 보여주는 방식으로 나눌 수 있다.(아직 분류기준은 미확정)
+
  
 
=== With this pattern, we can solve... ===
 
=== With this pattern, we can solve... ===
Line 73: Line 10:
  
 
=== Example : iOS_Memo ===
 
=== Example : iOS_Memo ===
{{#Widget:Vimeo|id=97082960|width=300|height=533}}
+
[[File:Softkey2.jpg]]
 +
 
  
 
----
 
----
<!--
 
== On-Screen Keyboard (Pan & Scan)  ==
 
== On-Screen Keyboard (Extract)  ==
 
-->
 
<div id="sun-col">
 
  
 +
== QWERTY ==
 +
 +
=== iOS_Memo ===
 +
{{#Widget:Vimeo|id=97082960|width=300|height=533}}
 +
 +
===iOS_Message===
 +
{{#Widget:Vimeo|id=97191036|width=300|height=533}}
  
 
=== iOS_InDic ===
 
=== iOS_InDic ===
{{#Widget:Vimeo|id=93373414|width=300|height=405}}
+
{{#Widget:Vimeo|id=93373414|width=395|height=533}}
  
=== Android_Noom Diet Coach ===
+
=== Android_Arab Deaf Sign Interpreter<!-- (المترجم الاشاري العربي للصم)--> ===
<videoflash type="vimeo">95683436|300|480</videoflash>
+
{{#Widget:Vimeo|id=93361936|width=300|height=480}}
  
=== Android_Arab Deaf Sign Interpreter (المترجم الاشاري العربي للصم) ===
+
===iOS_Sunrise Calendar ===
<videoflash type="vimeo">93361936|300|480</videoflash>
+
{{#Widget:Vimeo|id=93939015|width=533|height=395}}
 
+
===iOS_Calendar ===
+
<videoflash type="vimeo">93939015|533|395</videoflash>
+
</div>
+
  
 
----
 
----
== Key Magnifier ==
 
* 패턴 설명과 사례가 보완되면 새로운 패턴으로 분류하도록 하겠습니다.
 
  
=== iOS_Message ===
+
== 10 keys ==
* 키보드에 표시되지 않은 글자를 hold하여 활성화 하고, hold 상태에서 drag 하여 선택한다.
+
 
{{#Widget:Vimeo|id=94744835|width=300|height=533}}
+
===iOS_Message===
 +
{{#Widget:Vimeo|id=97191035|width=300|height=533}}
 +
 
 +
=== Android_Noom Diet Coach ===
 +
{{#Widget:Vimeo|id=95683436|width=300|height=480}}
  
===iOS_Memo ===
 
* 영어 입력 시 나타나는 Key Magnifier
 
{{#Widget:Vimeo|id=97083503|width=300|height=533}}
 
  
 
[[Category:Enter text/image]]
 
[[Category:Enter text/image]]

Latest revision as of 23:37, 24 July 2014

On-Screen keyboard/Soft keyboard는 화면 상에 자판이 나타나 touch를 통해 문자를 입력하는 인터랙션 패턴이다. 주로 Text input field가 활성화되면서 자판이 함께 나타난다. 별도의 물리적 장치 없이 프로그램으로 자판을 제공하는 Soft keyboard의 대표적인 방식이다.

자판의 구성에 따라 QWERTY 방식과 10 Key 방식으로 나눌 수 있다.

With this pattern, we can solve...

점점 기기 자체의 크기를 줄이면서도 화면 공간을 늘리고 복잡한 요소를 제거하려는 추세에 따라, 별도의 장치없이도 사용할 수 있는 입력 기능이 필요해졌다. On-Screen keyboard는 사용자에게 익숙한 입력 방식을 사용하면서도, 필요할 때만 나타나 화면 공간을 효율적으로 사용할 수 있게 한다.

  • 자판의 구성이나 컨텐츠의 대부분이 기존의 hardware keyboard의 양식을 따르고 있어서 사용자에게 익숙하다.
  • 자판의 구성은 기존과 동일하나, 기기의 크기에 따라 기존에 양손을 정해진 위치의 키보드 자판 위에 올려놓고 타자를 치던 경우와 다르게 한 손가락이나 두 손가락, 터치펜 등을 활용하여 문자가 있는 버튼을 하나씩 선택하여 입력한다.

Example : iOS_Memo

Softkey2.jpg



QWERTY

iOS_Memo

iOS_Message

iOS_InDic

Android_Arab Deaf Sign Interpreter

iOS_Sunrise Calendar


10 keys

iOS_Message

Android_Noom Diet Coach