From Design pattern
Jump to: navigation, search
(iOS_Sixpack)
 
(49 intermediate revisions by 3 users not shown)
Line 1: Line 1:
{{#css:
+
Filter는 사용자가 지정한 기준에 해당하는 항목만 검색하는 패턴이다.
#mw-content-text h3 span {
+
font-weight: 600;
+
padding-left: 0px;
+
}
+
 
+
.mw-headline {
+
font-weight: 600;
+
}
+
 
+
span.mw-editsection {
+
font-weight: 200;
+
position: relative;
+
float:right;
+
margin-right: 25px
+
}
+
 
+
span.mw-editsection a {
+
font-weight: 200;
+
}
+
 
+
.art-subpage {
+
background: #F7F7F7;
+
}
+
 
+
#mw-content-text p {
+
padding-top: 0px;
+
padding-bottom: 6px;
+
}
+
 
+
.mw-content-ltr ul {
+
margin: 0.3em 0 0 42px;
+
}
+
 
+
 
+
hr {
+
margin-top: 0px;
+
margin-bottom: 0px;
+
margin-left: -31px;
+
width: 720px;
+
border-bottom: 1px solid #E0E0DD;
+
border-left: 0px;
+
border-right: 0px;
+
border-top: 30px solid #F7F7F7;
+
}
+
<!--
+
#sun-col {
+
-webkit-column-count:2; /* Chrome, Safari, Opera */
+
-moz-column-count:2; /* Firefox */
+
column-count:2;
+
}
+
 
+
#sun-col p {
+
padding-left: 0px;
+
 
+
}
+
-->
+
 
+
.thumb {
+
margin: 0px 25px 5px 25px;
+
}
+
 
+
}}
+
Search with criteria는 사용자가 지정한 기준에 해당하는 항목만 검색하는 pattern이다.
+
  
 
검색 기준과 결과 항목 리스트가 한 화면에 존재하여 화면에서 바로 검색을 활용하는 방식과 검색창이 별도의 option menu 형식으로 존재하여 보조창을 활용하여  검색 기준을 설정하고, 화면에서 적용하는 방식으로 분류할 수 있다.
 
검색 기준과 결과 항목 리스트가 한 화면에 존재하여 화면에서 바로 검색을 활용하는 방식과 검색창이 별도의 option menu 형식으로 존재하여 보조창을 활용하여  검색 기준을 설정하고, 화면에서 적용하는 방식으로 분류할 수 있다.
 
검색 기준을 설정하는 방법에는 filter가 존재하여, 주어진 항목 중에서 선택하는 방식과, 사용자가 직접 입력하여 입력한 내용에 해당하는 결과값이 나타나는 input text form field가 존재하는 방식으로도 분류가 가능하다. input text form field 방식일 경우, 해당되는 결과를 Auto-complete pattern을 통해 사용자에게 즉각적으로 보여줄 수 있다.
 
  
 
=== With this pattern, we can solve... ===
 
=== With this pattern, we can solve... ===
한 페이지에서 보여주기에 자료의 양이 많을 때나 사용자가 특정한 기준에 해당하는 자료만을 보고 싶을 경우 Search with criteria 기능이 필요하다. Search with criteria는 사용자가 원하는 항목을 쉽게 찾아낼 수 있게 도와준다.
+
한 페이지에서 보여주기에 자료의 양이 많을 때나 사용자가 특정한 기준에 해당하는 자료만을 보고 싶을 경우 Filter 기능이 필요하다. Filter는 사용자가 원하는 항목을 쉽게 찾아낼 수 있게 도와준다.
  
*Search with criteria은 검색 기준을 입력할 수 있는 화면과 검색 결과가 나타나는 화면으로 구성된다.
+
* Filter은 검색 기준을 입력할 수 있는 화면과 검색 결과가 나타나는 화면으로 구성된다.
 +
* 항목을 검색하는 것이 아닌, 사용자가 활용하고 있는 리스트에서 항목을 특정 기준에 맞춰 배열하거나 카테고리화하려는 목적일 경우 해당하지 않는다.
 +
* 개념적으로 [[Auto-completion]]과 같이 입력한 text에 해당되는 내용이 미리보기 형태로 나타나는 경우 또한 live filter로 볼 수 있지만 해당 사례는 Auto-completion에 적용된다.  
  
*항목을 검색하는 것이 아닌, 사용자가 활용하고 있는 리스트에서 항목을 특정 기준에 맞춰 배열하거나 카테고리화하려는 목적일 경우 해당하지 않는다.
+
=== Example : iOS_Yummly ===
 +
[[File:Filter.jpeg]]
  
 
----
 
----
  
 
== Filter ==
 
== Filter ==
<div id="sun-col">
 
  
 
=== iOS_Yummly ===
 
=== iOS_Yummly ===
Line 87: 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 ===
{{#Widget:Vimeo|id=96422962|width=300|height=405}}
+
{{#Widget:Vimeo|id=96422962|width=395|height=533}}
{{#Widget:Vimeo|id=96422964|width=300|height=405}}
+
{{#Widget:Vimeo|id=96422964|width=395|height=533}}
  
 
=== Andriod_ASOS ===
 
=== Andriod_ASOS ===
Line 99: Line 39:
  
 
=== iOS_Etsy ===
 
=== iOS_Etsy ===
{{#Widget:Vimeo|id=96422618|width=300|height=405}}
+
{{#Widget:Vimeo|id=96422618|width=395|height=533}}
  
=== iOS_Naver Map ===
+
=== iOS_Google Scholar===
{{#Widget:Vimeo|id=95733114|width=300|height=405}}
+
{{#Widget:Vimeo|id=96701050|width=300|height=533}}
 
+
=== Andriod_Ski Butternut ===
+
{{#Widget:Vimeo|id=95585611|width=300|height=542}}
+
 
+
=== iOS_Daum map ===
+
{{#Widget:Vimeo|id=96603479|width=300|height=533}}
+
  
</div>
 
 
----
 
----
==  Input text form field ==
 
<div id="sun-col">
 
=== iOS_InDic ===
 
{{#Widget:Vimeo|id=93373414|width=300|height=405}}
 
  
=== Android_Noom Diet Coach ===
+
== Search using POI ==
{{#Widget:Vimeo|id=95683436|width=300|height=480}}
+
=== iOS_Naver Map ===
 +
{{#Widget:Vimeo|id=95733114|width=395|height=533}}
  
=== Android_Etsy ===
+
=== iOS_Daum Map ===
{{#Widget:Vimeo|id=94621848|width=300|height=528}}
+
{{#Widget:Vimeo|id=96603479|width=395|height=533}}
  
=== iOS_USA TODAY ===
+
----
{{#Widget:Vimeo|id=96421846|width=300|height=405}}
+
</div>
+
  
 
[[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