Difference between revisions of "Filter"
Navigation menu
From Design pattern
(→iOS_Sixpack) |
|||
| (63 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
| − | + | Filter는 사용자가 지정한 기준에 해당하는 항목만 검색하는 패턴이다. | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | . | + | 검색 기준과 결과 항목 리스트가 한 화면에 존재하여 화면에서 바로 검색을 활용하는 방식과 검색창이 별도의 option menu 형식으로 존재하여 보조창을 활용하여 검색 기준을 설정하고, 화면에서 적용하는 방식으로 분류할 수 있다. |
| − | + | ||
| − | + | ||
| − | + | === With this pattern, we can solve... === | |
| − | + | 한 페이지에서 보여주기에 자료의 양이 많을 때나 사용자가 특정한 기준에 해당하는 자료만을 보고 싶을 경우 Filter 기능이 필요하다. Filter는 사용자가 원하는 항목을 쉽게 찾아낼 수 있게 도와준다. | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | * Filter은 검색 기준을 입력할 수 있는 화면과 검색 결과가 나타나는 화면으로 구성된다. | |
| − | + | * 항목을 검색하는 것이 아닌, 사용자가 활용하고 있는 리스트에서 항목을 특정 기준에 맞춰 배열하거나 카테고리화하려는 목적일 경우 해당하지 않는다. | |
| − | + | * 개념적으로 [[Auto-completion]]과 같이 입력한 text에 해당되는 내용이 미리보기 형태로 나타나는 경우 또한 live filter로 볼 수 있지만 해당 사례는 Auto-completion에 적용된다. | |
| − | + | === Example : iOS_Yummly === | |
| − | + | [[File:Filter.jpeg]] | |
| − | + | ||
| − | + | ---- | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | == Filter == | |
| − | + | ||
| − | + | ||
| + | === iOS_Yummly === | ||
| + | {{#Widget:Vimeo|id=95774408|width=300|height=533}} | ||
| + | {{#Widget:Vimeo|id=95774331|width=300|height=533}} | ||
| − | + | === iOS_Mixology™ === | |
| − | + | {{#Widget:Vimeo|id=93372822|width=300|height=405}} | |
| − | + | {{#Widget:Vimeo|id=93372820|width=300|height=405}} | |
| − | + | ||
| − | width | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | } | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | } | + | |
| − | + | === iOS_Sixpack === | |
| − | + | {{#Widget:Vimeo|id=103218189|width=395|height=525}} | |
| − | } | + | === iOS_Fab === |
| − | + | {{#Widget:Vimeo|id=96422962|width=395|height=533}} | |
| + | {{#Widget:Vimeo|id=96422964|width=395|height=533}} | ||
| − | + | === Andriod_ASOS === | |
| − | + | {{#Widget:Vimeo|id=95491274|width=300|height=542}} | |
| − | } | + | |
| − | }} | + | === Android_Etsy === |
| − | + | {{#Widget:Vimeo|id=96420806|width=300|height=542}} | |
| − | + | === iOS_Etsy === | |
| + | {{#Widget:Vimeo|id=96422618|width=395|height=533}} | ||
| − | + | === iOS_Google Scholar=== | |
| − | + | {{#Widget:Vimeo|id=96701050|width=300|height=533}} | |
| − | === | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
---- | ---- | ||
| − | == | + | == Search using POI == |
| − | + | === iOS_Naver Map === | |
| − | + | {{#Widget:Vimeo|id=95733114|width=395|height=533}} | |
| − | == | + | |
| − | {{#Widget:Vimeo|id= | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | === | + | === iOS_Daum Map === |
| − | {{#Widget:Vimeo|id= | + | {{#Widget:Vimeo|id=96603479|width=395|height=533}} |
| − | |||
| − | |||
| − | |||
---- | ---- | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
[[Category:Search]] | [[Category:Search]] | ||
Latest revision as of 18:01, 12 August 2014
Filter는 사용자가 지정한 기준에 해당하는 항목만 검색하는 패턴이다.
검색 기준과 결과 항목 리스트가 한 화면에 존재하여 화면에서 바로 검색을 활용하는 방식과 검색창이 별도의 option menu 형식으로 존재하여 보조창을 활용하여 검색 기준을 설정하고, 화면에서 적용하는 방식으로 분류할 수 있다.
Contents
With this pattern, we can solve...
한 페이지에서 보여주기에 자료의 양이 많을 때나 사용자가 특정한 기준에 해당하는 자료만을 보고 싶을 경우 Filter 기능이 필요하다. Filter는 사용자가 원하는 항목을 쉽게 찾아낼 수 있게 도와준다.
- Filter은 검색 기준을 입력할 수 있는 화면과 검색 결과가 나타나는 화면으로 구성된다.
- 항목을 검색하는 것이 아닌, 사용자가 활용하고 있는 리스트에서 항목을 특정 기준에 맞춰 배열하거나 카테고리화하려는 목적일 경우 해당하지 않는다.
- 개념적으로 Auto-completion과 같이 입력한 text에 해당되는 내용이 미리보기 형태로 나타나는 경우 또한 live filter로 볼 수 있지만 해당 사례는 Auto-completion에 적용된다.
Example : iOS_Yummly
Filter
iOS_Yummly
iOS_Mixology™
iOS_Sixpack
iOS_Fab
Andriod_ASOS
Android_Etsy
iOS_Etsy
iOS_Google Scholar
Search using POI
iOS_Daum Map