From Design pattern
Jump to: navigation, search
 
(30 intermediate revisions by 3 users not shown)
Line 1: Line 1:
{{#css:
+
Tab bar는 현재 컨텐츠와 이동 가능한 컨텐츠 제목으로 이루어진 bar 메뉴로, 컨텐츠 간 이동을 돕는 인터랙션 패턴이다. 보통 유사한 성격의 페이지들로 이루어져 있으며, 현재 위치한 tab이 highlight 되어있다.
#mw-content-text h3 span {
+
font-weight: 600;
+
padding-left: 0px;
+
}
+
  
.mw-headline {
+
기본적으로 Tab bar에 있는 페이지 제목을 tap하여 지정된 컨텐츠로 이동하며(basic), 좀 더 발전된 형태로 좌우로 swipe해서도 tab간 이동이 가능한 방식도 있다(slidable).
font-weight: 600;
+
}
+
  
span.mw-editsection {
+
=== With this pattern, we can solve... ===
font-weight: 200;
+
많은 양의 컨텐츠를 효과적으로 보기 위해 데이터 간 이동을 간소화하는 패턴이 필요하다. Tab bar는 따로 이동 메뉴를 불러올 필요 없이 화면에서 항상 메뉴가 제공되어, 다른 컨텐츠로 바로 이동할 수 있다. 반복적으로 왔다갔다 하기에 용이하며, 현재 위치를 파악할 수 있는 기능을 제공한다.
position: relative;
+
float:right;
+
margin-right: 25px
+
}
+
  
span.mw-editsection a {
+
* Tab bar는 현재의 컨텐츠를 표시해주며, 다른 컨텐츠가 존재할 것이라는 시각적 힌트를 제공한다.
font-weight: 200;
+
* 다른 페이지로 이동한 뒤에도 원래 페이지는 초기화되지 않고 그대로 유지된다.
}
+
* Tab bar는 다른 종류의 데이터 및 카테고리로 되어있으며, 동일한 데이터를 가지고 이를 분류하는 방식에 따라 구성을 바꾸거나 필터링 하는 것은 [[Segmented control]]에 해당한다.
  
.art-subpage {
+
=== Example : Android_Phone ===
background: #F7F7F7;
+
[[File:Android Phone Tab bar.png|310px]]
}
+
----
 +
== basic ==
 +
=== Android_Phone ===
 +
{{#Widget:Vimeo|id=96705186|width=300|height=541}}
  
#mw-content-text p {
+
=== iOS_NPRNews ===
padding-top: 0px;
+
{{#Widget:Vimeo|id=95773337|width=300|height=533}}
padding-bottom: 6px;
+
}
+
  
.mw-content-ltr ul {
+
=== iOS_JetSetter ===
margin: 0.3em 0 0 42px;
+
{{#Widget:Vimeo|id=95772063|width=300|height=533}}
}
+
  
 
+
=== Android_Tumblr ===
hr {
+
{{#Widget:Vimeo|id=96703412|width=300|height=541}}
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;
+
-->
+
}
+
 
+
}}
+
Tabs은  컨텐츠 화면 간 이동할 때 사용하는 pattern이다. 주로 현재 페이지와 유사한 성격의 컨텐츠 간을 이동할 때 사용된다.
+
 
+
전후의 페이지를 이동하는 방식에 따라 구분이 가능한데, 주로 Paper flip 방식이 사용되며, Card flip, Cube flip, Slideshow 방식으로 분류할 수 있다. Page turn/ Page flip을 호출하는 방법은 주로 화면 좌우의 이동버튼이나 flick을 이용하여 동작시킨다.
+
 
+
=== With this pattern, we can solve... ===
+
저장 공간이 충분해 지면서 디지털기기의 컨텐츠 양이 기하급수적으로 증가하여, 많은 양의 컨텐츠를 효과적으로 보기 위한 pattern이 필요하다. Page turn/ Page flip은 많은 양의 컨텐츠를 쉽게 볼 수 있는 기능을 제공한다.
+
 
+
* Tabs은 트랜지션 효과를 통해 전후의 컨텐츠로 이동을 하며, 전후에 다른 컨텐츠가 존재할 것이라는 기대를 주기 위해 시각적 힌트를 주기도 한다.
+
* Tabs 이전에는 Previous/Next button이나 이와 유사한 방식을 사용하였다.
+
 
+
=== Example : iOS_Microsoft Onenote ===
+
{{#Widget:Vimeo|id=93372590|width=300|height=405}}
+
 
+
=== Android ===
+
{{#Widget:Vimeo|id=96705188|width=300|height=541}}
+
 
+
=== Android_Phone ===
+
{{#Widget:Vimeo|id=96705186|width=300|height=541}}
+
  
 
=== Android_GoNFC ===
 
=== Android_GoNFC ===
Line 85: Line 35:
 
{{#Widget:Vimeo|id=96703410|width=300|height=541}}
 
{{#Widget:Vimeo|id=96703410|width=300|height=541}}
  
=== Android_TED ===
+
=== iOS_ipad appstore ===
{{#Widget:Vimeo|id=96703411|width=300|height=541}}
+
* 하단의 Tab bar를 이용하여 화면을 이동한다.
 +
{{#Widget:Vimeo|id=93940735|width=533|height=399}}
 +
 
 +
=== iOS_Microsoft Onenote ===
 +
<!--원본이 처음부터 위아래가 잘린 상태로 사이즈는 지금 설정한게 맞음-->
 +
{{#Widget:Vimeo|id=93372590|width=395|height=510}}
  
=== Android_Tumblr ===
 
{{#Widget:Vimeo|id=96703412|width=300|height=541}}
 
 
----
 
----
 +
== slidable ==
 +
=== Android_TMON ===
 +
{{#Widget:Vimeo|id=96421171|width=300|height=541}}
  
== Tabs ==
+
=== iOS_Bloomberg ===
<div id="sun-col">
+
{{#Widget:Vimeo|id=95773983|width=300|height=533}}
</div>
+
  
 +
=== iOS_Groupon ===
 +
{{#Widget:Vimeo|id=95772840|width=300|height=533}}
  
[[Category:Move in same level]]
+
=== iOS_Naver ===
 +
{{#Widget:Vimeo|id=95810432|width=395|height=533}}
 +
 
 +
=== iOS_ ipad 조선일보===
 +
{{#Widget:Vimeo|id=93939470|width=533|height=395}}
 +
 
 +
----
 +
[[Category:Move between same level]]

Latest revision as of 21:51, 17 September 2014

Tab bar는 현재 컨텐츠와 이동 가능한 컨텐츠 제목으로 이루어진 bar 메뉴로, 컨텐츠 간 이동을 돕는 인터랙션 패턴이다. 보통 유사한 성격의 페이지들로 이루어져 있으며, 현재 위치한 tab이 highlight 되어있다.

기본적으로 Tab bar에 있는 페이지 제목을 tap하여 지정된 컨텐츠로 이동하며(basic), 좀 더 발전된 형태로 좌우로 swipe해서도 tab간 이동이 가능한 방식도 있다(slidable).

With this pattern, we can solve...

많은 양의 컨텐츠를 효과적으로 보기 위해 데이터 간 이동을 간소화하는 패턴이 필요하다. Tab bar는 따로 이동 메뉴를 불러올 필요 없이 화면에서 항상 메뉴가 제공되어, 다른 컨텐츠로 바로 이동할 수 있다. 반복적으로 왔다갔다 하기에 용이하며, 현재 위치를 파악할 수 있는 기능을 제공한다.

  • Tab bar는 현재의 컨텐츠를 표시해주며, 다른 컨텐츠가 존재할 것이라는 시각적 힌트를 제공한다.
  • 다른 페이지로 이동한 뒤에도 원래 페이지는 초기화되지 않고 그대로 유지된다.
  • Tab bar는 다른 종류의 데이터 및 카테고리로 되어있으며, 동일한 데이터를 가지고 이를 분류하는 방식에 따라 구성을 바꾸거나 필터링 하는 것은 Segmented control에 해당한다.

Example : Android_Phone

Android Phone Tab bar.png


basic

Android_Phone

iOS_NPRNews

iOS_JetSetter

Android_Tumblr

Android_GoNFC

Android_Auction

Android_PlayStore

iOS_ipad appstore

  • 하단의 Tab bar를 이용하여 화면을 이동한다.

iOS_Microsoft Onenote


slidable

Android_TMON

iOS_Bloomberg

iOS_Groupon

iOS_Naver

iOS_ ipad 조선일보