Difference between revisions of "Search component"

Latest revision as of 22:10, 17 September 2014

Search component는 화면에 검색 도구를 불러오는 인터랙션 패턴으로, 검색창과 On-Screen keyboard/Soft keyboard로 구성되어 있다. 주로 검색 버튼을 tap하거나 검색창을 활성화시켜서 숨어있던 검색 요소를 불러온다.

검색 요소가 나타나는 시각적 방식에 따라 overlay hidden search component, insert hidden search component, hidden & scrolltop search component, transform search component 등 다양하게 나누어 볼 수 있다.

Overlay hidden search component는 기존 화면 위를 검색창과 키보드로 이루어진 화면으로 완전히 덮는 것을 말한다. 주로 검색창과 키보드 사이의 여백에 Auto-completion이 나타난다.
Insert hidden search component는 기존 화면 위로 검색창과 키보드만 나타나며, 그 사이로 기존 화면은 계속 보여진다. 기존 화면이 보여지는 부분을 tap하면 다시 돌아온다.
Hidden & scrolltop search component는 맨 위로 스크롤하면 화면 위쪽에 숨어있던 검색창이 나타난다.
Transform search component는 화면에 검색창이 존재하며, tap해서 활성화하면 키보드가 나타나면서 검색창의 위치, 형태나 화면 구조가 변한다.

Example : iOS_Evernote

Overlay hidden search component

iOS_HuffPost

iOS_FoxNews

iOS_Learnist

iOS_Yummly

iOS_Target

Insert hidden search component

iOS_ENow

iOS_NPRNews

Hidden & scrolltop search component

iOS_AlienBlue

Transform search component

iOS_JangoRadio

iOS_Vine

iOS_Gogle docs

iOS_Gmail

@@ Line 1: / Line 1: @@
-Call search component는 화면에 검색창과 [[soft keyboard]]를 불러오는 인터랙션 패턴이다.
+Search component는 화면에 검색 도구를 불러오는 인터랙션 패턴으로, 검색창과 [[On-Screen keyboard/Soft keyboard]]로 구성되어 있다. 주로 검색 버튼을 tap하거나 검색창을 활성화시켜서 숨어있던 검색 요소를 불러온다.
-===With this pattern, we can solve...===
+검색 요소가 나타나는 시각적 방식에 따라 overlay hidden search component, insert hidden search component, hidden & scrolltop search component, transform search component 등 다양하게 나누어 볼 수 있다.
+=== With this pattern, we can solve...===
+검색을 통해, 앱/응용프로그램 내의 특정 컨텐츠로 빠르게 이동할 수 있다.
+* Overlay hidden search component는 기존 화면 위를 검색창과 키보드로 이루어진 화면으로 완전히 덮는 것을 말한다. 주로 검색창과 키보드 사이의 여백에 [[Auto-completion]]이 나타난다.
+* Insert hidden search component는 기존 화면 위로 검색창과 키보드만 나타나며, 그 사이로 기존 화면은 계속 보여진다. 기존 화면이 보여지는 부분을 tap하면 다시 돌아온다.
+* Hidden & scrolltop search component는 맨 위로 스크롤하면 화면 위쪽에 숨어있던 검색창이 나타난다.
+* Transform search component는 화면에 검색창이 존재하며, tap해서 활성화하면 키보드가 나타나면서 검색창의 위치, 형태나 화면 구조가 변한다.
+=== Example : iOS_Evernote ===
+[[File:Search component.png|310px]]
-*
-*
 ----
-== Overlay Hidden Search component ==
+== Overlay hidden search component ==
 ===iOS_HuffPost ===
 {{#Widget:Vimeo|id=95773844|width=300|height=533}}
@@ Line 23: / Line 34: @@
 {{#Widget:Vimeo|id=95773953|width=300|height=533}}
 ----
-== Insert Hidden Search component ==
+== Insert hidden search component ==
-* 기존 화면을 남겨두고 그 위에 들어감. 반투명하게 기존 화면이 보이는 경우는 overlay로 봄.
 === iOS_ENow===
 {{#Widget:Vimeo|id=95771430|width=300|height=533}}
@@ Line 31: / Line 41: @@
 {{#Widget:Vimeo|id=95773302|width=300|height=533}}
-== Hidden & Scrolltop Search component ==
+----
-* 스크롤을 맨 위로 올리면 숨어있던 바가 나타남
+== Hidden & scrolltop search component ==
 ===iOS_AlienBlue ===
 {{#Widget:Vimeo|id=95773238|width=300|height=533}}
 ----
-== Transform Search Component ==
+== Transform search component ==
-* 화면에 검색창이 있었는데, tap하면 키보드가 나타나면서 위치나 형태가 바뀜
 === iOS_JangoRadio===
 {{#Widget:Vimeo|id=95776903|width=300|height=533}}
@@ Line 54: / Line 63: @@
-[[Category: Navigation etc]]
+[[Category: Navigating tool]]

Personal tools