From Design pattern
Jump to: navigation, search
 
(18 intermediate revisions by 3 users not shown)
Line 1: Line 1:
{{#css:
+
Pop up dialog는 사용자가 선택한 기능의 진행 상황에 대한 주의와 확인을 요하기 위해 팝업창을 통해 내용을 알려주고 확인하는 패턴이다. Pop up dialog는 [[Light box]]라고 불리는 GUI 효과를 동반하며 Modal Dialog(Modal Window)나 Pop up view(Pop over view)라고 불리기도 한다.
#mw-content-text h3 span {
+
font-weight: 600;
+
padding-left: 0px;
+
}
+
  
.mw-headline {
+
=== With this pattern, we can solve... ===
font-weight: 600;
+
* [[Light box]]는 팝업창이 뜰 때 백그라운드 화면이 어두워지거나 밝아지면서 컨트롤이 불가능해지는 스크린에 적용된 인터랙션 패턴이다.
}
+
* Pop up dialog는 사용자에게 시각적으로 [[Light box]] 효과를 통해 강조된 대화 상자에 집중해야 함을 알려준다.
 +
* [[Toast message]]와는 달리 pop up 으로 뜬 메시지를 해제하지 않고는 배경의 요소와 인터랙션할 수 없다.
  
span.mw-editsection {
+
===Example===
font-weight: 200;
+
[[file:Popup_dialog.JPG|310px]]
position: relative;
+
float:right;
+
margin-right: 25px
+
}
+
  
span.mw-editsection a {
+
----
font-weight: 200;
+
=== iOS_Path===
}
+
{{#Widget:Vimeo|id=96677646|width=300|height=533}}
  
.art-subpage {
+
== Pop up dialog ==
background: #F7F7F7;
+
}
+
  
#mw-content-text p {
+
===iOS_Weekend Read===
padding-top: 0px;
+
{{#Widget:Vimeo|id=96677736|width=300|height=533}}
padding-bottom: 6px;
+
}
+
  
.mw-content-ltr ul {
+
=== Android ===
margin: 0.3em 0 0 42px;
+
{{#Widget:Vimeo|id=94622274|width=300|height=541}}
}
+
  
 +
=== Android_Etsy ===
 +
{{#Widget:Vimeo|id=96420760|width=300|height=541}}
  
hr {
+
=== Android_Soundcloud ===
margin-top: 0px;
+
{{#Widget:Vimeo|id=96421129|width=300|height=541}}
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 {
+
=== Android_Evernote ===
padding-left: 0px;
+
{{#Widget:Vimeo|id=94622273|width=300|height=541}}
-->
+
}
+
  
}}
+
[[category:Deliver message]]
현재 시스템이 진행 상황에 대한 주의와 확인을 요하기 위해 팝업창을 통해 내용을 알려주고 확인한다.
+
 
+
== Examples ==
+
=== 612번 사례 ===
+
* 어플리케이션을 휴지통에 drag하면 정말 삭제할 것인지 확인하는 팝업이 발생한다.
+
{{#Widget:Vimeo|id=94622274|width=300|height=528}}
+
 
+
=== 611번 사례 ===
+
* 사례 설명 입력 예정
+
{{#Widget:Vimeo|id=94622273|width=300|height=528}}
+
 
+
 
+
 
+
 
+
[[category:Deliver system message]]
+

Latest revision as of 15:03, 15 July 2014

Pop up dialog는 사용자가 선택한 기능의 진행 상황에 대한 주의와 확인을 요하기 위해 팝업창을 통해 내용을 알려주고 확인하는 패턴이다. Pop up dialog는 Light box라고 불리는 GUI 효과를 동반하며 Modal Dialog(Modal Window)나 Pop up view(Pop over view)라고 불리기도 한다.

With this pattern, we can solve...

  • Light box는 팝업창이 뜰 때 백그라운드 화면이 어두워지거나 밝아지면서 컨트롤이 불가능해지는 스크린에 적용된 인터랙션 패턴이다.
  • Pop up dialog는 사용자에게 시각적으로 Light box 효과를 통해 강조된 대화 상자에 집중해야 함을 알려준다.
  • Toast message와는 달리 pop up 으로 뜬 메시지를 해제하지 않고는 배경의 요소와 인터랙션할 수 없다.

Example

Popup dialog.JPG


iOS_Path

Pop up dialog

iOS_Weekend Read

Android

Android_Etsy

Android_Soundcloud

Android_Evernote