From Design pattern
Jump to: navigation, search
(With this pattern, we can solve...)
Line 1: Line 1:
 
Filter는 사용자가 지정한 기준에 해당하는 항목만 검색하는 패턴이다.
 
Filter는 사용자가 지정한 기준에 해당하는 항목만 검색하는 패턴이다.
  
검색 기준과 결과 항목 리스트가 한 화면에 존재하여 화면에서 바로 검색을 활용하는 방식과 검색창이 별도의 option menu 형식으로 존재하여 보조창을 활용하여 검색 기준을 설정하고, 화면에서 적용하는 방식으로 분류할 수 있다.
+
검색 기준과 결과 항목 리스트가 한 화면에 존재하여 화면에서 바로 검색을 활용하는 방식과 검색창이 별도의 option menu 형식으로 존재하여 보조창을 활용하여 검색 기준을 설정하고, 화면에서 적용하는 방식으로 분류할 수 있다.
  
 
=== With this pattern, we can solve... ===
 
=== With this pattern, we can solve... ===
Line 8: Line 8:
 
* Filter은 검색 기준을 입력할 수 있는 화면과 검색 결과가 나타나는 화면으로 구성된다.
 
* Filter은 검색 기준을 입력할 수 있는 화면과 검색 결과가 나타나는 화면으로 구성된다.
 
* 항목을 검색하는 것이 아닌, 사용자가 활용하고 있는 리스트에서 항목을 특정 기준에 맞춰 배열하거나 카테고리화하려는 목적일 경우 해당하지 않는다.
 
* 항목을 검색하는 것이 아닌, 사용자가 활용하고 있는 리스트에서 항목을 특정 기준에 맞춰 배열하거나 카테고리화하려는 목적일 경우 해당하지 않는다.
* 입력한 텍스트에 해당되는 내용이 미리보기 형태로 나타나는 경우인 자동완성은 개념적으로 live filter로 filter에도 속하지만, 이에 해당하는 사례는 [[Auto-completion]]에 적용한다.
+
* 개념적으로 [[Auto-completion]]과 같이 입력한 text에 해당되는 내용이 미리보기 형태로 나타나는 경우 또한 live filter로 볼 수 있지만 해당 사례는 Auto-completion에 적용된다.  
  
 
=== Example ===
 
=== Example ===
Line 43: Line 43:
 
----
 
----
  
== Search using POI(Point of Interest) ==
+
== Search using POI ==
 
=== iOS_Naver Map ===
 
=== iOS_Naver Map ===
 
{{#Widget:Vimeo|id=95733114|width=395|height=533}}
 
{{#Widget:Vimeo|id=95733114|width=395|height=533}}

Revision as of 15:54, 17 July 2014

Filter는 사용자가 지정한 기준에 해당하는 항목만 검색하는 패턴이다.

검색 기준과 결과 항목 리스트가 한 화면에 존재하여 화면에서 바로 검색을 활용하는 방식과 검색창이 별도의 option menu 형식으로 존재하여 보조창을 활용하여 검색 기준을 설정하고, 화면에서 적용하는 방식으로 분류할 수 있다.

With this pattern, we can solve...

한 페이지에서 보여주기에 자료의 양이 많을 때나 사용자가 특정한 기준에 해당하는 자료만을 보고 싶을 경우 Filter 기능이 필요하다. Filter는 사용자가 원하는 항목을 쉽게 찾아낼 수 있게 도와준다.

  • Filter은 검색 기준을 입력할 수 있는 화면과 검색 결과가 나타나는 화면으로 구성된다.
  • 항목을 검색하는 것이 아닌, 사용자가 활용하고 있는 리스트에서 항목을 특정 기준에 맞춰 배열하거나 카테고리화하려는 목적일 경우 해당하지 않는다.
  • 개념적으로 Auto-completion과 같이 입력한 text에 해당되는 내용이 미리보기 형태로 나타나는 경우 또한 live filter로 볼 수 있지만 해당 사례는 Auto-completion에 적용된다.

Example


Filter

iOS_Yummly

iOS_Mixology™

iOS_Fab

Andriod_ASOS

Android_Etsy

iOS_Etsy

iOS_Google Scholar


Search using POI

iOS_Naver Map

iOS_Daum Map