From Design pattern
Jump to: navigation, search
(Example)
 
(49 intermediate revisions by 4 users not shown)
Line 1: Line 1:
{{#css:
+
Change display option은 데이터의 표현 방식이나 화면의 배열 구성(layout)을 변화하는 기능의 패턴이다. 데이터는 여러가지 방법으로 표현되어질 수 있으며, 사용자가 편의에 따라 자유롭게 옵션을 변경하여 데이터를 이해하기 쉬운 형식으로 볼 수 있다.
#mw-content-text h3 span {
+
font-weight: 600;
+
padding-left: 0px;
+
}
+
  
.mw-headline {
+
옵션이 2가지가 있을 경우, toggle button이나 switch를 활용하며, 화면의 일부나 전체를 toggle button을 대체하여 활용하기도 한다. 옵션이 3가지 이상이 될 경우 option menu를 불러오거나 tap bar나 각기 다른 옵션을 담당하는 버튼을 활용할 수 있다.
font-weight: 600;
+
}
+
  
span.mw-editsection {
+
=== With this pattern, we can solve... ===
font-weight: 200;
+
편집과 편집한 내용물을 볼 수 있는 두 가지 기능을 가진 노트 앱, 미리보기, 큰 아이콘, 자세히 등의 다양한 보기 방식을 가지고 있는 사진 앱, 편집의 형태가 다양하여 그 중 특정한 유형을 선택할 수 있도록 하는 사진편집 혹은 프레젠테이션 앱과 마찬가지로 어떠한 정보는 정보의 깊이를 유지한 상태에서 다양한 방식으로 보여질 수 있으며, 기능이나 편의에 따라 보여지는 방식에는 차이가 있을 수 있다. Change display option은 button이나 menu 등의 컴포넌트를 활용하여 사용자가 데이터의 유형이나 배열 구성을 바꿀 수 있도록 기능을 제공한다.
position: relative;
+
float:right;
+
margin-right: 25px
+
}
+
  
span.mw-editsection a {
+
* Change display option을 조정하여 데이터의 표현 방식 및 배열 구성을 바꾸는 과정은 화면 내에서 쉽게 이루어진다, 언제라도 원래 옵션으로 돌아가거나 다른 옵션으로 이동할 수 있도록 한다.
font-weight: 200;
+
* 데이터의 표현방식은 동일하나, 화면의 배열 구성이 변하는 경우, 데이터의 표현방식은 변화하였지만 화면의 배열 구성이 그대로인 경우, 데이터의 표현방식도 동일하지 않으며 배열구성 또한 변하는 경우는 모두 해당한다.
}
+
* 새로운 정보나 지식을 얻을 수 있도록 데이터를 재가공한 2차 정보로의 표현방식의 변화는 [[Change view into variety mode]]에서 찾을 수 있다.
 +
* 이미 사용자의 편의에 따라 그룹핑된 항목에 대해 풀어보기, 묶어보기, 큰 사이즈로 보기 등으로 자유롭게 보여지는 것은 표현방식 및 배열 구성의 변화로 Change display option에 속하지만, 항목을 특정한 기준에 따라 묶어 정렬하는 기능은 [[Sort by condition]]에 속한다.
  
.art-subpage {
+
=== Example : iOS_조선일보 ===
background: #F7F7F7;
+
[[File:Change display option.jpeg]]
}
+
  
#mw-content-text p {
+
----
padding-top: 0px;
+
padding-bottom: 6px;
+
}
+
  
.mw-content-ltr ul {
+
== Change arranging method ==
margin: 0.3em 0 0 42px;
+
}
+
  
 +
=== iOS_조선일보 ===
 +
{{#Widget:Vimeo|id=93939255|width=533|height=399}}
  
hr {
+
=== iOS_Photo ===
margin-top: 0px;
+
{{#Widget:Vimeo|id=93939536|width=533|height=395}}
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 {
+
=== iOS_Snapfish ===
padding-left: 0px;
+
{{#Widget:Vimeo|id=94762172|width=395|height=527}}
  
}
+
=== iOS_Google Docs ===
-->
+
{{#Widget:Vimeo|id=95772926|width=300|height=533}}
  
.thumb {
+
=== iOS_somnote ===
margin: 0px 25px 5px 25px;
+
{{#Widget:Vimeo|id=96605831|width=300|height=533}}
}
+
  
}}
+
=== iOS_Sunrise Calendar===
 +
{{#Widget:Vimeo|id=95778928|width=300|height=533}}
  
Change display option은 데이터의 표현 방식이나 화면의 배열 구성(layout)을 변화하는 기능의 pattern이다. 데이터는 여러가지 방법으로 표현되어질 수 있으며, 사용자가 편의에 따라 자유롭게 옵션을 변경하여 데이터를 볼 수 있다.
+
----
  
옵션이 2가지가 있을 경우, dedicated button이나 switch를 활용하며, 화면의 일부나 전체를 dedicated button을 대체하여 활용하기도 한다. 옵션이 3가지 이상이 될 경우 option menu를 불러오거나 tap bars나 각기 다른 옵션을 담당하는 button을 활용한다.
+
== Change screen function ==
  
=== With this pattern, we can solve... ===
+
=== iOS_Microsoft Onenote ===
편집과 편집한 내용물을 볼 수 있는 두 가지 기능을 가진 노트 app, 미리보기, 큰 아이콘, 자세히 등의 다양한 보기 방식을 가지고 있는 사진 app, 편집의 형태가 다양하여 그 중 특정한 유형을 선택할 수 있도록 하는 사진편집 혹은 프레젠테이션 app과 마찬가지로 어떠한 정보는 정보의 깊이를 유지한 상태에서 다양한 방식으로 보여질 수 있으며, 기능이나 편의에 따라 보여지는 방식에는 차이가 있을 수 있다. Change display option은 button이나 menu 등의 component를 활용하여 사용자가 데이터의 유형이나 배열 구성을 바꿀 수 있도록 기능을 제공한다.
+
* 이와 같이 전체화면, 부분화면의 전환은 Fullscreen toggle이라고도 불린다.
 +
{{#Widget:Vimeo|id=93372593|width=395|height=503}}
  
* Change display option을 조정하여 데이터의 표현 방식 및 배열 구성을 바꾸는 과정은 화면 내에서 쉽게 이루어진다, 언제라도 원래 옵션으로 돌아가거나 다른 옵션으로 이동할 수 있도록 한다.
+
=== iOS_Calendar ===
* 데이터의 표현방식은 동일하나, 화면의 배열 구성이 변하는 경우, 데이터의 표현방식은 변화하였지만 화면의 배열 구성이 그대로인 경우, 데이터의 표현방식도 동일하지 않으며 배열구성 또한 변하는 경우는 모두 해당한다.
+
{{#Widget:Vimeo|id=94740401|width=665|height=374}}
* 새로운 정보나 지식을 얻을 수 있도록 데이터를 재가공한 2차 정보로의 표현방식의 변화는 해당하지 않는다.
+
  
 
----
 
----
  
== Arranging method ==
+
== Change expression of contents ==
<div id="sun-col">
+
=== iPad_조선일보 ===
+
{{#Widget:Vimeo|id=93939255|width=533|height=395}}
+
  
=== iPad_Snapfish ===
+
=== iOS_STEP ===
{{#Widget:Vimeo|id=94762172|width=300|height=405}}
+
{{#Widget:Vimeo|id=95703747|width=395|height=527}}
  
=== iPad_Microsoft Onenote ===
+
=== iOS_Clock ===
{{#Widget:Vimeo|id=93372593|width=300|height=405}}
+
{{#Widget:Vimeo|id=96424094|width=300|height=533}}
</div>
+
----
+
== Expression Conversion ==
+
<div id="sun-col">
+
=== iPhone_STEP ===
+
* 날짜에 입력된 정보를 텍스트의 형태에서 아이콘의 형태로, 혹은 그 반대로 전환하여 본다.
+
{{#Widget:Vimeo|id=95703747|width=300|height=405}}
+
  
=== 674번 사례. iPhone_Clock ===
 
* 세계 시간을 보여주는 화면에서, 목록이 있는 부분을 tap하면 목록 우측에 있는 아날로그 시계모양의 아이콘이 글자로 바뀐다. 한번 더 tap하면 다시 아이콘으로 바뀐다.
 
{{#Widget:Vimeo|id=96424094|width=300|height=533}}
 
</div>
 
  
 
[[Category:Change data view]]
 
[[Category:Change data view]]

Latest revision as of 17:07, 29 July 2014

Change display option은 데이터의 표현 방식이나 화면의 배열 구성(layout)을 변화하는 기능의 패턴이다. 데이터는 여러가지 방법으로 표현되어질 수 있으며, 사용자가 편의에 따라 자유롭게 옵션을 변경하여 데이터를 이해하기 쉬운 형식으로 볼 수 있다.

옵션이 2가지가 있을 경우, toggle button이나 switch를 활용하며, 화면의 일부나 전체를 toggle button을 대체하여 활용하기도 한다. 옵션이 3가지 이상이 될 경우 option menu를 불러오거나 tap bar나 각기 다른 옵션을 담당하는 버튼을 활용할 수 있다.

With this pattern, we can solve...

편집과 편집한 내용물을 볼 수 있는 두 가지 기능을 가진 노트 앱, 미리보기, 큰 아이콘, 자세히 등의 다양한 보기 방식을 가지고 있는 사진 앱, 편집의 형태가 다양하여 그 중 특정한 유형을 선택할 수 있도록 하는 사진편집 혹은 프레젠테이션 앱과 마찬가지로 어떠한 정보는 정보의 깊이를 유지한 상태에서 다양한 방식으로 보여질 수 있으며, 기능이나 편의에 따라 보여지는 방식에는 차이가 있을 수 있다. Change display option은 button이나 menu 등의 컴포넌트를 활용하여 사용자가 데이터의 유형이나 배열 구성을 바꿀 수 있도록 기능을 제공한다.

  • Change display option을 조정하여 데이터의 표현 방식 및 배열 구성을 바꾸는 과정은 화면 내에서 쉽게 이루어진다, 언제라도 원래 옵션으로 돌아가거나 다른 옵션으로 이동할 수 있도록 한다.
  • 데이터의 표현방식은 동일하나, 화면의 배열 구성이 변하는 경우, 데이터의 표현방식은 변화하였지만 화면의 배열 구성이 그대로인 경우, 데이터의 표현방식도 동일하지 않으며 배열구성 또한 변하는 경우는 모두 해당한다.
  • 새로운 정보나 지식을 얻을 수 있도록 데이터를 재가공한 2차 정보로의 표현방식의 변화는 Change view into variety mode에서 찾을 수 있다.
  • 이미 사용자의 편의에 따라 그룹핑된 항목에 대해 풀어보기, 묶어보기, 큰 사이즈로 보기 등으로 자유롭게 보여지는 것은 표현방식 및 배열 구성의 변화로 Change display option에 속하지만, 항목을 특정한 기준에 따라 묶어 정렬하는 기능은 Sort by condition에 속한다.

Example : iOS_조선일보

Change display option.jpeg


Change arranging method

iOS_조선일보

iOS_Photo

iOS_Snapfish

iOS_Google Docs

iOS_somnote

iOS_Sunrise Calendar


Change screen function

iOS_Microsoft Onenote

  • 이와 같이 전체화면, 부분화면의 전환은 Fullscreen toggle이라고도 불린다.

iOS_Calendar


Change expression of contents

iOS_STEP

iOS_Clock