| 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 display option은 데이터의 표현 방식이나 화면의 배열 구성(layout)을 변화하는 기능의 pattern이다. 데이터는 여러가지 방법으로 표현되어질 수 있으며, 사용자가 편의에 따라 자유롭게 옵션을 변경하여 데이터를 볼 수 있다. | ||
| + | |||
| + | 옵션이 2가지가 있을 경우, dedicated button이나 switch를 활용하며, 화면의 일부나 전체를 dedicated button을 대체하여 활용하기도 한다. 옵션이 3가지 이상이 될 경우 option menu를 불러오거나 tap bars나 각기 다른 옵션을 담당하는 button을 활용한다. | ||
| + | |||
| + | === With this pattern, we can solve... === | ||
| + | 편집과 편집한 내용물을 볼 수 있는 두 가지 기능을 가진 노트 app, 미리보기, 큰 아이콘, 자세히 등의 다양한 보기 방식을 가지고 있는 사진 app, 편집의 형태가 다양하여 그 중 특정한 유형을 선택할 수 있도록 하는 사진편집 혹은 프레젠테이션 app과 마찬가지로 어떠한 정보는 정보의 깊이를 유지한 상태에서 다양한 방식으로 보여질 수 있으며, 기능이나 편의에 따라 보여지는 방식에는 차이가 있을 수 있다. Change display option은 button이나 menu 등의 component를 활용하여 사용자가 데이터의 유형이나 배열 구성을 바꿀 수 있도록 기능을 제공한다. | ||
| + | |||
| + | * Change display option을 조정하여 데이터의 표현 방식 및 배열 구성을 바꾸는 과정은 화면 내에서 쉽게 이루어진다, 언제라도 원래 옵션으로 돌아가거나 다른 옵션으로 이동할 수 있도록 한다. | ||
| + | * 데이터의 표현방식은 동일하나, 화면의 배열 구성이 변하는 경우, 데이터의 표현방식은 변화하였지만 화면의 배열 구성이 그대로인 경우, 데이터의 표현방식도 동일하지 않으며 배열구성 또한 변하는 경우는 모두 해당한다. | ||
| + | * 새로운 정보나 지식을 얻을 수 있도록 데이터를 재가공한 2차 정보로의 표현방식의 변화는 해당하지 않는다. | ||
| + | |||
| + | ---- | ||
| + | |||
| + | == Arranging method == | ||
| + | <div id="sun-col"> | ||
| + | === iPad_조선일보 === | ||
| + | {{#Widget:Vimeo|id=93939255|width=533|height=395}} | ||
| + | |||
| + | === iPad_Snapfish === | ||
| + | {{#Widget:Vimeo|id=94762172|width=300|height=405}} | ||
| + | |||
| + | === iPad_Microsoft Onenote === | ||
| + | {{#Widget:Vimeo|id=93372593|width=300|height=405}} | ||
| + | </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]] | ||
Change display option은 데이터의 표현 방식이나 화면의 배열 구성(layout)을 변화하는 기능의 pattern이다. 데이터는 여러가지 방법으로 표현되어질 수 있으며, 사용자가 편의에 따라 자유롭게 옵션을 변경하여 데이터를 볼 수 있다.
옵션이 2가지가 있을 경우, dedicated button이나 switch를 활용하며, 화면의 일부나 전체를 dedicated button을 대체하여 활용하기도 한다. 옵션이 3가지 이상이 될 경우 option menu를 불러오거나 tap bars나 각기 다른 옵션을 담당하는 button을 활용한다.
편집과 편집한 내용물을 볼 수 있는 두 가지 기능을 가진 노트 app, 미리보기, 큰 아이콘, 자세히 등의 다양한 보기 방식을 가지고 있는 사진 app, 편집의 형태가 다양하여 그 중 특정한 유형을 선택할 수 있도록 하는 사진편집 혹은 프레젠테이션 app과 마찬가지로 어떠한 정보는 정보의 깊이를 유지한 상태에서 다양한 방식으로 보여질 수 있으며, 기능이나 편의에 따라 보여지는 방식에는 차이가 있을 수 있다. Change display option은 button이나 menu 등의 component를 활용하여 사용자가 데이터의 유형이나 배열 구성을 바꿀 수 있도록 기능을 제공한다.