From Design pattern
Jump to: navigation, search
(iOS_Sixpack)
 
(18 intermediate revisions by one user not shown)
Line 1: Line 1:
Search with criteria는 사용자가 지정한 기준에 해당하는 항목만 검색하는 패턴이다.
+
Filter는 사용자가 지정한 기준에 해당하는 항목만 검색하는 패턴이다.
  
 
검색 기준과 결과 항목 리스트가 한 화면에 존재하여 화면에서 바로 검색을 활용하는 방식과 검색창이 별도의 option menu 형식으로 존재하여 보조창을 활용하여  검색 기준을 설정하고, 화면에서 적용하는 방식으로 분류할 수 있다.
 
검색 기준과 결과 항목 리스트가 한 화면에 존재하여 화면에서 바로 검색을 활용하는 방식과 검색창이 별도의 option menu 형식으로 존재하여 보조창을 활용하여  검색 기준을 설정하고, 화면에서 적용하는 방식으로 분류할 수 있다.
 
검색 기준을 설정하는 방법에는 filter가 존재하여, 주어진 항목 중에서 선택하는 방식과, 사용자가 직접 입력하여 입력한 내용에 해당하는 결과값이 나타나는 input text form field가 존재하는 방식으로도 분류가 가능하다. input text form field 방식일 경우, 해당되는 결과를 Auto-complete 패턴을 통해 사용자에게 즉각적으로 보여줄 수 있다.
 
  
 
=== With this pattern, we can solve... ===
 
=== With this pattern, we can solve... ===
한 페이지에서 보여주기에 자료의 양이 많을 때나 사용자가 특정한 기준에 해당하는 자료만을 보고 싶을 경우 Search with criteria 기능이 필요하다. Search with criteria는 사용자가 원하는 항목을 쉽게 찾아낼 수 있게 도와준다.
+
한 페이지에서 보여주기에 자료의 양이 많을 때나 사용자가 특정한 기준에 해당하는 자료만을 보고 싶을 경우 Filter 기능이 필요하다. Filter는 사용자가 원하는 항목을 쉽게 찾아낼 수 있게 도와준다.
 +
 
 +
* Filter은 검색 기준을 입력할 수 있는 화면과 검색 결과가 나타나는 화면으로 구성된다.
 +
* 항목을 검색하는 것이 아닌, 사용자가 활용하고 있는 리스트에서 항목을 특정 기준에 맞춰 배열하거나 카테고리화하려는 목적일 경우 해당하지 않는다.
 +
* 개념적으로 [[Auto-completion]]과 같이 입력한 text에 해당되는 내용이 미리보기 형태로 나타나는 경우 또한 live filter로 볼 수 있지만 해당 사례는 Auto-completion에 적용된다.  
  
*Search with criteria은 검색 기준을 입력할 수 있는 화면과 검색 결과가 나타나는 화면으로 구성된다.
+
=== Example : iOS_Yummly ===
*항목을 검색하는 것이 아닌, 사용자가 활용하고 있는 리스트에서 항목을 특정 기준에 맞춰 배열하거나 카테고리화하려는 목적일 경우 해당하지 않는다.
+
[[File:Filter.jpeg]]
  
 
----
 
----
== Search with criteria (Filter) ==
+
 
 +
== Filter ==
  
 
=== iOS_Yummly ===
 
=== iOS_Yummly ===
Line 21: Line 24:
 
{{#Widget:Vimeo|id=93372822|width=300|height=405}}
 
{{#Widget:Vimeo|id=93372822|width=300|height=405}}
 
{{#Widget:Vimeo|id=93372820|width=300|height=405}}
 
{{#Widget:Vimeo|id=93372820|width=300|height=405}}
 +
 +
=== iOS_Sixpack ===
 +
{{#Widget:Vimeo|id=103218189|width=395|height=525}}
  
 
=== iOS_Fab ===
 
=== iOS_Fab ===
Line 48: Line 54:
  
 
----
 
----
 
== Search with criteria etc. ==
 
 
=== Andriod_Ski Butternut ===
 
* 버튼의 기준에 맞는 경로만이 이미지에 적용되어 나타난다.
 
{{#Widget:Vimeo|id=95585611|width=300|height=542}}
 
 
=== iOS_Anylist ===
 
* 체크리스트에서 체크한 항목을 화면에서 보이거나 사라지게 한다.
 
{{#Widget:Vimeo|id=94762484|width=395|height=527}}
 
 
----
 
 
==  Search with criteria (Input text form field) ==
 
 
=== iOS_InDic ===
 
{{#Widget:Vimeo|id=93373414|width=395|height=527}}
 
 
=== iOS_USA TODAY ===
 
{{#Widget:Vimeo|id=96421846|width=395|height=527}}
 
 
=== Android_Noom Diet Coach ===
 
{{#Widget:Vimeo|id=95683436|width=300|height=480}}
 
 
=== Android_Etsy ===
 
{{#Widget:Vimeo|id=94621848|width=300|height=528}}
 
 
  
 
[[Category:Search]]
 
[[Category:Search]]

Latest revision as of 18:01, 12 August 2014

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

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

With this pattern, we can solve...

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

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

Example : iOS_Yummly

Filter.jpeg


Filter

iOS_Yummly

iOS_Mixology™

iOS_Sixpack

iOS_Fab

Andriod_ASOS

Android_Etsy

iOS_Etsy

iOS_Google Scholar


Search using POI

iOS_Naver Map

iOS_Daum Map