From Design pattern
Jump to: navigation, search
 
(63 intermediate revisions by 7 users not shown)
Line 1: Line 1:
 +
More details는 세부 정보를 더 보여주는 인터랙션 패턴이다.
 +
화면의 변화에 따라 세부 페이지로 화면 전환, 세부 정보 팝업, 그 외 화면 일부만 변하는 방식 등으로 나누어진다.
  
== Examples ==
 
  
=== 577번 사례 ===
+
----
* 옵션메뉴를 눌러 숨겨진 세부정보를 불러온다.
+
== 화면 전환 ==
<videoflash type="vimeo">93938909|533|395</videoflash>
+
=== Examples: iOS_Sunrise Calendar ===
 +
{{#Widget:Vimeo|id=93938909|width=533|height=399}}
  
=== 17번 사례 ===
+
=== iOS_Calendar ===
* 날짜를 선택하면 날짜에 해당하는 입력 정보를 아이콘이나 텍스트의 형태로 보여준다.
+
* 기기를 회전시키면 화면에 표시되는 구성이 변경된다.  
<videoflash type="vimeo">93372313|300|405</videoflash>
+
{{#Widget:Vimeo|id=94740401|width=665|height=374}}
 +
----
  
=== 501번 사례 ===
+
== 팝업 ==
 +
=== iOS_Calendar ===
 
* 캘린더의 특정 이벤트를 tap하여 이벤트에 대한 정보를 팝업의 형태로 본다.
 
* 캘린더의 특정 이벤트를 tap하여 이벤트에 대한 정보를 팝업의 형태로 본다.
<videoflash type="vimeo">93374930|300|405</videoflash>
+
{{#Widget:Vimeo|id=93374930|width=399|height=533}}
  
=== 391번 사례 ===
+
=== Android_Kakaotalk ===
 +
* 종이가 접어진 모양의 버튼을 tap하여 접어져있던 공지글을 펼쳐본다.
 +
{{#Widget:Vimeo|id=93362822|width=300||height=487}}
 +
 
 +
=== LG Smart TV ===
 +
* 손을 좌우로 흔들어 화면의 숨겨져있던 상제정보를 보여준다
 +
* #00:42-00:50
 +
{{#Widget:Youtube|id=900PY_JWSq0|width=665|height=374}}
 +
 
 +
=== Xbox_Kinect Adventures ===
 +
* 팔을 45도 각도로 들어올려 화면 왼쪽 모서리를 향하고 있으면 팝업창이 나타난다.
 +
{{#Widget:Vimeo|id=94742456|width=665|height=374}}
 +
 
 +
== Light box ==
 +
=== Wang Theatre Touch Screen Information Kiosk===
 
* 대형 터치스크린에서 화면을 tap하면 숨겨져있던 이미지를 보여준다.
 
* 대형 터치스크린에서 화면을 tap하면 숨겨져있던 이미지를 보여준다.
* 단, 아래 영상의 24초 ~ 26초에 해당한다.
+
* #00:23-00:27
<videoflash type="vimeo">36790650|665|374</videoflash>
+
{{#Widget:Vimeo|id=36790650|width=665|height=374}}
  
=== 485번 사례 ===
+
=== 립모션_뉴욕타임즈 ===  
* 종이가 접어진 모양의 버튼을 tap하여 접어져있던 공지글을 펼쳐본다
+
* 손가락으로 화면을 1초간 가리키고 있으면 지목한 기사를 자세히 본다.
<videoflash type="vimeo">93362822|300|528</videoflash>
+
{{#Widget:Vimeo|id=93326761|width=665|height=374}}
  
=== 47번 사례 ===
+
=== Wang Theatre Touch Screen Information Kiosk ===
* 손을 좌우로 흔들어 화면의 숨겨져있던 상제정보를 보여준다
+
* 대형 터치스크린에서 화면을 tap하면 숨겨져있던 상세정보를 보여준다.
* 42~50
+
* #00:21-00:23
<videoflash>900PY_JWSq0|665|374</videoflash>
+
{{#Widget:Vimeo|id=36790650|width=665|height=374}}
 +
 
 +
----
 +
 
 +
== 기타 / 화면 일부분만 전환 ==
 +
=== iOS_STEP ===
 +
* 날짜를 선택하면 날짜에 해당하는 입력 정보를 아이콘이나 텍스트의 형태로 보여준다.
 +
{{#Widget:Vimeo|id=93372313|width=300|height=405}}
 +
 
 +
=== iPhone_Sunrise ===
 +
{{#Widget:Vimeo|id=95778902|width=300|height=533}}
 +
{{#Widget:Vimeo|id=95778873|width=300|height=533}}
 +
 
 +
=== iOS_ENow ===
 +
{{#Widget:Vimeo|id=95771333|width=300|height=533}}
 +
 
 +
=== iOS_CGV ===
 +
* 목록을 좌우로 swipe해서 움직이며, 도착지점에 해당하는 항목에 대한 세부 정보가 같이 나타난다.
 +
{{#Widget:Vimeo|id=93045496|width=399|height=533}}
 +
 
 +
=== IOS_Accuweather ===
 +
* 날씨 정보를 보여주는 화면에서, 위의 날씨 모양의 아이콘을 점선에 따라 좌우로 drag하여 확인하고자 하는 시간대로 조절한다.
 +
{{#Widget:Vimeo|id=96422614|width=395|height=533}}
  
== stretch ==
+
=== iOS_Appstore ===
 +
* 상세내용이 숨겨져 있는 화면에서 "더보기" 버튼을 눌러 숨겨진 내용을 본다.
 +
{{#Widget:Vimeo|id=93935345|width=533|height=399}}
  
=== 267번 사례 ===
+
=== IOS_Message ===
* 화면의 일부분을 drag하여 숨겨진 정보를 본다.
+
* 상대방과 주고받은 문자메세지를 볼 때, 화면을 왼쪽으로 drag하면 오른쪽에서 각각의 메세지가 전송된 시간이 나온다. drag한 상태에서 손을 떼면 다시 들어간다.
<videoflash type="vimeo">93373544|533|395</videoflash>
+
{{#Widget:Vimeo|id=96424092|width=300|height=533}}
  
 
[[Category:Move in hierarchy]]
 
[[Category:Move in hierarchy]]

Latest revision as of 11:05, 28 July 2014

More details는 세부 정보를 더 보여주는 인터랙션 패턴이다. 화면의 변화에 따라 세부 페이지로 화면 전환, 세부 정보 팝업, 그 외 화면 일부만 변하는 방식 등으로 나누어진다.



화면 전환

Examples: iOS_Sunrise Calendar

iOS_Calendar

  • 기기를 회전시키면 화면에 표시되는 구성이 변경된다.


팝업

iOS_Calendar

  • 캘린더의 특정 이벤트를 tap하여 이벤트에 대한 정보를 팝업의 형태로 본다.

Android_Kakaotalk

  • 종이가 접어진 모양의 버튼을 tap하여 접어져있던 공지글을 펼쳐본다.

LG Smart TV

  • 손을 좌우로 흔들어 화면의 숨겨져있던 상제정보를 보여준다
  • #00:42-00:50

""

Xbox_Kinect Adventures

  • 팔을 45도 각도로 들어올려 화면 왼쪽 모서리를 향하고 있으면 팝업창이 나타난다.

Light box

Wang Theatre Touch Screen Information Kiosk

  • 대형 터치스크린에서 화면을 tap하면 숨겨져있던 이미지를 보여준다.
  • #00:23-00:27

립모션_뉴욕타임즈

  • 손가락으로 화면을 1초간 가리키고 있으면 지목한 기사를 자세히 본다.

Wang Theatre Touch Screen Information Kiosk

  • 대형 터치스크린에서 화면을 tap하면 숨겨져있던 상세정보를 보여준다.
  • #00:21-00:23


기타 / 화면 일부분만 전환

iOS_STEP

  • 날짜를 선택하면 날짜에 해당하는 입력 정보를 아이콘이나 텍스트의 형태로 보여준다.

iPhone_Sunrise

iOS_ENow

iOS_CGV

  • 목록을 좌우로 swipe해서 움직이며, 도착지점에 해당하는 항목에 대한 세부 정보가 같이 나타난다.

IOS_Accuweather

  • 날씨 정보를 보여주는 화면에서, 위의 날씨 모양의 아이콘을 점선에 따라 좌우로 drag하여 확인하고자 하는 시간대로 조절한다.

iOS_Appstore

  • 상세내용이 숨겨져 있는 화면에서 "더보기" 버튼을 눌러 숨겨진 내용을 본다.

IOS_Message

  • 상대방과 주고받은 문자메세지를 볼 때, 화면을 왼쪽으로 drag하면 오른쪽에서 각각의 메세지가 전송된 시간이 나온다. drag한 상태에서 손을 떼면 다시 들어간다.