Difference between revisions of "Search component"
Navigation menu
From Design pattern
| (2 intermediate revisions by 2 users not shown) | |||
| Line 11: | Line 11: | ||
* Hidden & scrolltop search component는 맨 위로 스크롤하면 화면 위쪽에 숨어있던 검색창이 나타난다. | * Hidden & scrolltop search component는 맨 위로 스크롤하면 화면 위쪽에 숨어있던 검색창이 나타난다. | ||
* Transform search component는 화면에 검색창이 존재하며, tap해서 활성화하면 키보드가 나타나면서 검색창의 위치, 형태나 화면 구조가 변한다. | * Transform search component는 화면에 검색창이 존재하며, tap해서 활성화하면 키보드가 나타나면서 검색창의 위치, 형태나 화면 구조가 변한다. | ||
| + | |||
| + | === Example : iOS_Evernote === | ||
| + | [[File:Search component.png|310px]] | ||
| + | |||
---- | ---- | ||
| − | == Overlay | + | |
| + | == Overlay hidden search component == | ||
===iOS_HuffPost === | ===iOS_HuffPost === | ||
{{#Widget:Vimeo|id=95773844|width=300|height=533}} | {{#Widget:Vimeo|id=95773844|width=300|height=533}} | ||
| Line 29: | Line 34: | ||
{{#Widget:Vimeo|id=95773953|width=300|height=533}} | {{#Widget:Vimeo|id=95773953|width=300|height=533}} | ||
---- | ---- | ||
| − | == Insert | + | == Insert hidden search component == |
=== iOS_ENow=== | === iOS_ENow=== | ||
{{#Widget:Vimeo|id=95771430|width=300|height=533}} | {{#Widget:Vimeo|id=95771430|width=300|height=533}} | ||
| Line 37: | Line 42: | ||
---- | ---- | ||
| − | == Hidden & | + | == Hidden & scrolltop search component == |
===iOS_AlienBlue === | ===iOS_AlienBlue === | ||
{{#Widget:Vimeo|id=95773238|width=300|height=533}} | {{#Widget:Vimeo|id=95773238|width=300|height=533}} | ||
---- | ---- | ||
| − | == Transform | + | == Transform search component == |
=== iOS_JangoRadio=== | === iOS_JangoRadio=== | ||
{{#Widget:Vimeo|id=95776903|width=300|height=533}} | {{#Widget:Vimeo|id=95776903|width=300|height=533}} | ||
| Line 58: | Line 63: | ||
| − | [[Category: | + | [[Category: Navigating tool]] |
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 등 다양하게 나누어 볼 수 있다.
Contents
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
iOS_HuffPost
iOS_FoxNews
iOS_Learnist
iOS_Yummly
iOS_Target
iOS_ENow
iOS_NPRNews
Hidden & scrolltop search component
iOS_AlienBlue
Transform search component
iOS_JangoRadio
iOS_Vine
iOS_Gogle docs
iOS_Gmail