From Design pattern
Jump to: navigation, search
Line 1: Line 1:
{{#css:
 
#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;
 
}
 
 
}}
 
 
Change view into variety mode는 데이터를 다양한 방식으로 전환하여 보여주고자 할때 사용하는 패턴으로 여러가지 종류의 데이터를 시각화하거나 음성데이터, 색상 등으로 변환하여 보여준다.
 
Change view into variety mode는 데이터를 다양한 방식으로 전환하여 보여주고자 할때 사용하는 패턴으로 여러가지 종류의 데이터를 시각화하거나 음성데이터, 색상 등으로 변환하여 보여준다.
  
Line 67: Line 4:
  
 
=== With this pattern, we can solve... ===
 
=== With this pattern, we can solve... ===
생산성 app과 같이 사용자에게 특별한 기능을 제공하는 app의 경우, 데이터를 사용자가 쉽게 이해, 분석, 해석하거나 다른 관점으로 볼 수 있게 하기 위해 다른 형태로 변환하여 보여주기 위한 pattern이 필요하다. Change view into variety mode는 각각의 기능에 맞게 사용자가 입력한 데이터나 혹은 app이 제공하고자 하는 데이터를 변환하거나 가공하여 보여주는 기능을 말한다.
+
생산성 앱과 같이 사용자에게 특별한 기능을 제공하는 앱의 경우, 데이터를 사용자가 쉽게 이해, 분석, 해석하거나 다른 관점으로 볼 수 있게 하기 위해 다른 형태로 변환하여 보여주기 위한 pattern이 필요하다. Change view into variety mode는 각각의 기능에 맞게 사용자가 입력한 데이터나 혹은 앱이 제공하고자 하는 데이터를 변환하거나 가공하여 보여주는 기능을 말한다.
  
 
* 그래프나 비율 등으로 정보를 가공하여 보여준다.
 
* 그래프나 비율 등으로 정보를 가공하여 보여준다.
Line 76: Line 13:
  
 
== Change view into variety mode (Graph mode) ==
 
== Change view into variety mode (Graph mode) ==
<div id="sun-col">
+
 
 
=== iOS_STEP ===
 
=== iOS_STEP ===
 
{{#Widget:Vimeo|id=93372312|width=300|height=405}}
 
{{#Widget:Vimeo|id=93372312|width=300|height=405}}
Line 93: Line 30:
 
=== iOS_Yahoo! weather ===
 
=== iOS_Yahoo! weather ===
 
{{#Widget:Vimeo|id=96665365|width=300|height=533}}
 
{{#Widget:Vimeo|id=96665365|width=300|height=533}}
</div>
+
 
 
----
 
----
 
== Change view into variety mode (Language conversion mode) ==
 
== Change view into variety mode (Language conversion mode) ==
<div id="sun-col">
+
 
 
=== iOS_Offline Magazine ===
 
=== iOS_Offline Magazine ===
 
* 버튼을 눌러 읽던 책을 소리로 듣는 기능을 작동시킨다.  
 
* 버튼을 눌러 읽던 책을 소리로 듣는 기능을 작동시킨다.  
Line 113: Line 50:
 
* 코드를 완성해보고 작동을 눌러 실행된 결과를 보여준다.
 
* 코드를 완성해보고 작동을 눌러 실행된 결과를 보여준다.
 
{{#Widget:Vimeo|id=96193131|width=300|height=533}}
 
{{#Widget:Vimeo|id=96193131|width=300|height=533}}
</div>
+
 
  
  
 
[[Category:Change data view]]
 
[[Category:Change data view]]

Revision as of 11:30, 17 June 2014

Change view into variety mode는 데이터를 다양한 방식으로 전환하여 보여주고자 할때 사용하는 패턴으로 여러가지 종류의 데이터를 시각화하거나 음성데이터, 색상 등으로 변환하여 보여준다.

정량적인 데이터의 형태를 가지고 있을 경우 주로 자동으로 그래프나 비율 등으로 변환하여 보여주며, Continuous한 데이터의 형태를 가지고 있을 경우 시간의 흐름에 따른 데이타의 변화 등을 표시해 준다. 청각/시각 장애인을 위한 데이터의 수화 및 음성데이터의 변화 또한 Change view into variety mode에 해당한다.

With this pattern, we can solve...

생산성 앱과 같이 사용자에게 특별한 기능을 제공하는 앱의 경우, 데이터를 사용자가 쉽게 이해, 분석, 해석하거나 다른 관점으로 볼 수 있게 하기 위해 다른 형태로 변환하여 보여주기 위한 pattern이 필요하다. Change view into variety mode는 각각의 기능에 맞게 사용자가 입력한 데이터나 혹은 앱이 제공하고자 하는 데이터를 변환하거나 가공하여 보여주는 기능을 말한다.

  • 그래프나 비율 등으로 정보를 가공하여 보여준다.
  • 수화, 음성데이터의 문자화 등 데이터의 형식을 변화하여 제공한다.
  • 필터값에 따라 동일한 데이터를 다른 방식으로 정렬하거나, 데이터가 텍스트에서 아이콘으로 변하는 등의 단순한 정보 표현방식의 변화는 해당하지 않는다. 단순한 조작을 통해 데이터가 다차원으로 변환되는 것에 한한다.

Change view into variety mode (Graph mode)

iOS_STEP

iOS_moneyDIET

Jawbone UP Fitness Band

  • 기기를 착용한 상태로 수면 시, 사람의 움직임을 기기가 감지하여 수면 정보(깊은잠, 얕은잠)를 기록하여 그래프로 나타낸다.
  • 단, 아래 영상의 5분 30초~6분 9초에 해당한다.

iOS_Superb Player

iOS_Yahoo! weather


Change view into variety mode (Language conversion mode)

iOS_Offline Magazine

  • 버튼을 눌러 읽던 책을 소리로 듣는 기능을 작동시킨다.

iOS_Vlingo

  • 정보를 문자로 전달 또는 음성 그 자체로 전달하기 전, 확인을 위해 보여준다.
  • 단, 동영상은 1분 5초~ 1분 36초 사이를 보세요.

Android_Arab Deaf Sign Interpreter

  • 청각 장애인과의 수화를 하기 위하여 단어를 수화로 번역하여 보여준다.

iOS_Codecademy

  • 코드를 완성해보고 작동을 눌러 실행된 결과를 보여준다.