From Design pattern
Jump to: navigation, search
(Example : iOS_Etsy)
 
(50 intermediate revisions by 5 users not shown)
Line 1: Line 1:
{{#css:
+
Auto-completion은 Text input field에서 입력을 할 때, 자동으로 완성된 자연어를 제공하여 빠른 입력을 도와주는 패턴이다. 제안하는 자연어의 목록은 Drop down list를 통해 보여지며 이중 하나를 선택하였을 때 Text input field에 작성 중인 내용을 대체한다. Drop down list는 back key를 누르거나 선택하지 않음으로써 어느 때나 무시될 수 있다.
#mw-content-text h3 span {
+
font-weight: 600;
+
padding-left: 0px;
+
}
+
  
.mw-headline {
+
=== With this pattern, we can solve... ===
font-weight: 600;
+
앱에서 검색 혹은 문장을 입력할때 Auto-completion 기능이 없는 경우 사용자가 입력하고자 하는 단어나 문장을 전부 입력해야 한다. 자연어 입력의 편의성을 높이기 위하여 입력중인 단어와 연관성이 있는 자연어나 자주 입력하는 자연어를 자동으로 제공한다.
}
+
  
span.mw-editsection {
+
* Auto-completion은 입력하고자 하는 자연어를 사용자들의 기록을 통해 예측하여 제공한다.
font-weight: 200;
+
* Text input field에 자연어를 입력 하지 않고 tap하였을 경우 사용자가 사용했던 자연어 히스토리를 보여 준다.
position: relative;
+
* Auto-completion은 단어를 정확하고 빨리 입력하는 기능에서 나아가 입력 중인 자연어와 연관된 내용을 제공한다.
float:right;
+
margin-right: 25px
+
}
+
  
span.mw-editsection a {
+
=== Example : iOS_Etsy ===
font-weight: 200;
+
[[File:Autocom2.jpg]]
}
+
  
.art-subpage {
+
----
background: #F7F7F7;
+
}
+
  
#mw-content-text p {
+
=== iOS_InDic ===
padding-top: 0px;
+
{{#Widget:Vimeo|id=93373414|width=395|height=533}}
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;
+
-->
+
}
+
 
+
}}
+
 
+
Auto-completion은 사용자가 편집가능한 텍스트뷰에서 타이핑을 할 때, 자동으로 완성된 단어나 문장을 제안하여 빠른 입력을 도와주는 pattern이다. 제안하는 단어나 문장의 목록은 Drop down menu를 통해 보여지며 이중 하나를 선택하였을 때 텍스트뷰에서 작성 중인 내용을 대체한다.
+
 
+
최근들어 사용자의 히스토리를 보여주는 등, 다양한 방식으로 적용되기도 한다.
+
 
+
드롭다운된 목록은 back key를 누르거나 선택하지 않음으로써 어느 때나 무시될 수 있다.
+
 
+
=== What Problem Does This Solve? ===
+
* 자동완성 기능이전에는 사용자가 찾고자하는 단어나 문장을 전부입력해야했다. 입력의 편의성이 고려되며 이를 향상 시키기 위해 자주 입력하는 단어를 찾아 자동으로 제안하였다. 사용자가 입력하고자 하는 단어나 문장을 이전 사용자들의 기록을 통해 예측하여 제안한다.
+
 
+
* Enter by auto-completion 패턴은 드롭다운 형식을 통해 나타나며, 단어를 정확하고 빨리 입력하는 기능에서 나아가 입력 중인 내용과 관련한 내용을 제안하여 편의성을 높인다.
+
 
+
=== Example : iPad ===
+
{{#Widget:Vimeo|id=93373414|width=300|height=405|start=4s}}
+
  
 
=== Android_Noom Diet Coach ===
 
=== Android_Noom Diet Coach ===
{{#Widget:Vimeo|id=95683436|width=300|height=405|start=4s}}
+
{{#Widget:Vimeo|id=95683436|width=300|height=480}}
  
 
=== Android_Etsy ===
 
=== Android_Etsy ===
<videoflash type="vimeo">94621848|300|528</videoflash>
+
{{#Widget:Vimeo|id=94621848|width=300|height=533}}
  
 +
=== iOS_USA TODAY ===
 +
{{#Widget:Vimeo|id=96421846|width=395|height=533}}
 +
 +
=== iOS_Sunrise Calendar ===
 +
{{#Widget:Vimeo|id=96423723|width=395|height=533}}
  
 
[[Category:Enter text/image]]
 
[[Category:Enter text/image]]
<!--
 
=== 265번 사례 ===
 
//* 일부 문자를 입력하면 해당 문자로 시작되는 가능한 결과물을 자동으로 완성하여 보여준다.
 
<videoflash type="vimeo">93373414|300|405</videoflash>
 
 
=== 274번 사례 ===
 
//* 일부 문자를 입력하면 해당 문자가 포함된 결과물을 자동으로 보여준다.
 
<videoflash type="vimeo">95683436|300|455</videoflash>
 
 
=== 605번 사례 ===
 
//* 사례 설명 입력 예정
 
<videoflash type="vimeo">94621848|300|528</videoflash>
 
-->
 

Latest revision as of 23:16, 24 July 2014

Auto-completion은 Text input field에서 입력을 할 때, 자동으로 완성된 자연어를 제공하여 빠른 입력을 도와주는 패턴이다. 제안하는 자연어의 목록은 Drop down list를 통해 보여지며 이중 하나를 선택하였을 때 Text input field에 작성 중인 내용을 대체한다. Drop down list는 back key를 누르거나 선택하지 않음으로써 어느 때나 무시될 수 있다.

With this pattern, we can solve...

앱에서 검색 혹은 문장을 입력할때 Auto-completion 기능이 없는 경우 사용자가 입력하고자 하는 단어나 문장을 전부 입력해야 한다. 자연어 입력의 편의성을 높이기 위하여 입력중인 단어와 연관성이 있는 자연어나 자주 입력하는 자연어를 자동으로 제공한다.

  • Auto-completion은 입력하고자 하는 자연어를 사용자들의 기록을 통해 예측하여 제공한다.
  • Text input field에 자연어를 입력 하지 않고 tap하였을 경우 사용자가 사용했던 자연어 히스토리를 보여 준다.
  • Auto-completion은 단어를 정확하고 빨리 입력하는 기능에서 나아가 입력 중인 자연어와 연관된 내용을 제공한다.

Example : iOS_Etsy

Autocom2.jpg


iOS_InDic

Android_Noom Diet Coach

Android_Etsy

iOS_USA TODAY

iOS_Sunrise Calendar