From Design pattern
Jump to: navigation, search
(→‎186번 사례)
(→‎iOS_Sixpack)
 
(81 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
설정한 조건에 해당하는 항목을 검색한다.
+
Filter는 사용자가 지정한 기준에 해당하는 항목만 검색하는 패턴이다.
  
 +
검색 기준과 결과 항목 리스트가 한 화면에 존재하여 화면에서 바로 검색을 활용하는 방식과 검색창이 별도의 option menu 형식으로 존재하여 보조창을 활용하여  검색 기준을 설정하고, 화면에서 적용하는 방식으로 분류할 수 있다.
  
−
== Examples ==
+
=== With this pattern, we can solve... ===
−
=== 40번 사례 ===
+
한 페이지에서 보여주기에 자료의 양이 많을 때나 사용자가 특정한 기준에 해당하는 자료만을 보고 싶을 경우 Filter 기능이 필요하다. Filter는 사용자가 원하는 항목을 쉽게 찾아낼 수 있게 도와준다.
−
* 지도 화면에서 보기 옵션 설정을 연 뒤, 교통상황, 자전거길, cctv 등 지도에서 같이 볼 정보들을 각각 tap해서 선택하면, 선택한 데이터만 지도에 보인다.
+
−
<videoflash type="vimeo">95733114|300|405</videoflash>
+
  
−
=== 216번 사례 ===
+
* Filter은 검색 기준을 입력할 수 있는 화면과 검색 결과가 나타나는 화면으로 구성된다.
−
* 조합을 입력하면 조합을 포함하는 모든 자료를 검색하여 보여준다.
+
* 항목을 검색하는 것이 아닌, 사용자가 활용하고 있는 리스트에서 항목을 특정 기준에 맞춰 배열하거나 카테고리화하려는 목적일 경우 해당하지 않는다.
−
<videoflash type="vimeo">93372822|300|405</videoflash>
+
* 개념적으로 [[Auto-completion]]과 같이 입력한 text에 해당되는 내용이 미리보기 형태로 나타나는 경우 또한 live filter로 볼 수 있지만 해당 사례는 Auto-completion에 적용된다.
  
−
=== 186번 사례 ===
+
=== Example : iOS_Yummly ===
−
* 검색필터를 추가하거나 넣는 것을 선택하여 필터에 맞는 항목으로 검색된 내용을 보여준다.
+
[[File:Filter.jpeg]]
−
<videoflash type="vimeo">95491274|300|502</videoflash>
+
  
−
=== 215번 사례 ===
+
----
−
* 고정 항목과 랜덤 항목을 구분하여 입력하면, 해당 조건으로 나타날 수 있는 조합을 검색하여 랜덤으로 보여준다.
+
−
<videoflash type="vimeo">93372820|300|405</videoflash>
+
  
−
=== 265번 사례 ===
+
== Filter ==
−
* 이미 입력된 문자를 기반으로 해당 문자로 시작되는 가능한 결과를 검색하여 보여준다.
+
−
<videoflash type="vimeo">93373414|300|405</videoflash>
+
  
−
=== 326번 사례 ===
+
=== iOS_Yummly ===
−
* 경로를 선택하여 Tap하면 버튼의 경로에 해당하는 스키슬로프를 서로 다른 색상으로 보여준다.
+
{{#Widget:Vimeo|id=95774408|width=300|height=533}}
−
<videoflash type=ʺvimeoʺ>95585611|300|541</videoflash>
+
{{#Widget:Vimeo|id=95774331|width=300|height=533}}
  
−
=== 597번 사례 ===
+
=== iOS_Mixology™ ===
−
* 리스트에 있는 항목 중 체크된 항목을 리스트에서 보여주거나 보이지 않게 한다.
+
{{#Widget:Vimeo|id=93372822|width=300|height=405}}
−
<videoflash type="vimeo">94762484|300|405</videoflash>
+
{{#Widget:Vimeo|id=93372820|width=300|height=405}}
  
 +
=== 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}}
 +
 +
=== iOS_Daum Map ===
 +
{{#Widget:Vimeo|id=96603479|width=395|height=533}}
 +
 +
----
  
 
[[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

Retrieved from "http://www.ixpatterns.com/index.php?title=Filter&oldid=109633"