<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>优涩控 &#187; 对话框</title>
	<atom:link href="http://www.userkon.com/tag/%e5%af%b9%e8%af%9d%e6%a1%86/feed" rel="self" type="application/rss+xml" />
	<link>http://www.userkon.com</link>
	<description>一群对用户脑残的家伙</description>
	<lastBuildDate>Tue, 11 Oct 2011 13:49:37 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.1</generator>
		<item>
		<title>WEB应用对话框思考</title>
		<link>http://www.userkon.com/tolyer/about_web_app_daillog_box.html</link>
		<comments>http://www.userkon.com/tolyer/about_web_app_daillog_box.html#comments</comments>
		<pubDate>Thu, 22 Oct 2009 11:16:31 +0000</pubDate>
		<dc:creator>大脸</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[对话框]]></category>
		<category><![CDATA[窗口]]></category>

		<guid isPermaLink="false">http://www.userkon.com/tolyer/web%e5%ba%94%e7%94%a8%e5%af%b9%e8%af%9d%e6%80%9d%e8%80%83.html</guid>
		<description><![CDATA[浏览器窗口的中国特色？ 浏览器对话框与通用对话框皆为模式对话框。但因为其被用于一些恶意行为（如添加收藏夹，设为首页，无限确认）一些国内的浏览器已经开始屏蔽其独占性。 这些浏览器包括，傲游，世界之窗，搜狗浏览器，360安全浏览器。而主流的IE，FF，Chrome，Oprea，Safari都未进行屏蔽。 同样，弹出窗（Popup Windows）因为常被用于广告，大部分浏览器也存在了对其屏蔽了功能。导致在国内的web应用中极少出现此类窗口，大多数处理方式是直接在框架内嵌入。 但随着国内互联网的成熟，以及弹出窗在Miscrosoft Vista以上系统的轻量级呈现和其本身的良好体验，可以考虑提供弹出窗（Popup Windows）。 关于Web中窗口的深度及其搭配？ 理论上，web应用上的所有窗口都可以采用内建对话框的形式。 Web应用缺乏像Windows系统那样一个提供窗口管理以及切换的任务栏，且因为开发难度的问题，web应用也无法向Windows那样提供窗口与窗口的纵深感。 因此，当需要对窗口进行纵深感的呈现时，通常会采用不同类型的对话窗口在进行区分。而常用的做法就是将内建对话框作为其他对话框的父级窗口。 举个例子，大附件面板（这里采用QQ邮箱为例） 当添加文件时，窗口的搭配是这样的。通用对话框在内建对话框前端显示，且为模式对话框。 通用对话框层叠内建对话框 当对高危操作进行二次确认的时候，他们的搭配是这样的。浏览器的对话框位于内建对话框前端。且为模式对话框。 浏览器对话框层叠内建对话框 从中我们可以看到，当出现内建对话框时，为了对窗口进行区分，不得不采用浏览器对话框来对高危操作进行二次确认，同时，为了保持系统内部的一致性，所以也建议，所有的高危操作的二次确认都采用浏览器对话框来呈现。如清空回收站，彻底删除某邮件。 “确定、取消”还是“是、否”？ 对话框，意思就是，看起来就像对话一样，在需要用户作出判断的时候，主标题说明与按钮的标题能够被认为是一段对话。 注意对话模型 相反，像这样的对话框就有点令人难以琢磨。 主标题说明与按钮无法达成对话 QQ邮箱的对话框问答则较为合理。 QQ较好的对话模型 到底是“确定、取消”还是“是、否”？一般而言，确定用于对一个已经执行的命令进行下一步的确定，而“是”“否”则用于是否开始一个命令或进入某个页面和流程。 具体来说没有这么复杂，用户对对话框的扫描一般只是主标题说明的前几个字而已，因此我们只需要记住这样的对话模型就好了。 “您确定……？” 确定，取消 “您是否要……？” 是，否，取消（可考虑增加） 当然，我们还有更好的解决方案，更直接的回答。如： 用“立即插入”代替确定，更加明白 提示：不修改“取消”标题，免得让用户误解。 除此之外，我们依然还需要留意按钮标题的达意。如下图： “关闭”明白表示其操作 最后，我们需要关注标题，按钮标题，与内建对话框的的文字的呼应以及相关性。]]></description>
			<content:encoded><![CDATA[<h3>浏览器窗口的中国特色？</h3>
<p>浏览器对话框与通用对话框皆为模式对话框。但因为其被用于一些恶意行为（如添加收藏夹，设为首页，无限确认）一些国内的浏览器已经开始屏蔽其独占性。</p>
<p>这些浏览器包括，傲游，世界之窗，搜狗浏览器，360安全浏览器。而主流的IE，FF，Chrome，Oprea，Safari都未进行屏蔽。</p>
<p>同样，弹出窗（Popup Windows）因为常被用于广告，大部分浏览器也存在了对其屏蔽了功能。导致在国内的web应用中极少出现此类窗口，大多数处理方式是直接在框架内嵌入。</p>
<p>但随着国内互联网的成熟，以及弹出窗在Miscrosoft Vista以上系统的轻量级呈现和其本身的良好体验，可以考虑提供弹出窗（Popup Windows）。</p>
<h3>关于Web中窗口的深度及其搭配？</h3>
<p>理论上，web应用上的所有窗口都可以采用内建对话框的形式。</p>
<p>Web应用缺乏像Windows系统那样一个提供窗口管理以及切换的任务栏，且因为开发难度的问题，web应用也无法向Windows那样提供窗口与窗口的纵深感。</p>
<p>因此，当需要对窗口进行纵深感的呈现时，通常会采用不同类型的对话窗口在进行区分。而常用的做法就是将内建对话框作为其他对话框的父级窗口。</p>
<p>举个例子，大附件面板（这里采用QQ邮箱为例）</p>
<p>当添加文件时，窗口的搭配是这样的。通用对话框在内建对话框前端显示，且为模式对话框。<br />
<span id="more-122"></span><br />
<a title="通用对话框层叠内建对话框.png" href="http://www.flickr.com/photos/41128764@N02/4033841805/"><img src="http://69.147.90.215/2735/4033841805_c8d5c1cfa2.jpg" border="0" alt="通用对话框层叠内建对话框.png" hspace="0" /></a></p>
<p><strong>通用对话框层叠内建对话框</strong></p>
<p>当对高危操作进行二次确认的时候，他们的搭配是这样的。浏览器的对话框位于内建对话框前端。且为模式对话框。</p>
<p><strong> </strong></p>
<p><a title="浏览器对话框层叠内建对话框.png" href="http://www.flickr.com/photos/41128764@N02/4033841665/"><img src="http://69.147.90.215/2787/4033841665_3a8cfdeeec.jpg" border="0" alt="浏览器对话框层叠内建对话框.png" hspace="0" /></a></p>
<p><strong>浏览器对话框层叠内建对话框</strong></p>
<p>从中我们可以看到，当出现内建对话框时，为了对窗口进行区分，不得不采用浏览器对话框来对高危操作进行二次确认，同时，为了保持系统内部的一致性，所以也建议，所有的高危操作的二次确认都采用浏览器对话框来呈现。如清空回收站，彻底删除某邮件。</p>
<h3>“确定、取消”还是“是、否”？</h3>
<p>对话框，意思就是，看起来就像对话一样，在需要用户作出判断的时候，主标题说明与按钮的标题能够被认为是一段对话。</p>
<p><a title="注意对话模型.png" href="http://www.flickr.com/photos/41128764@N02/4034596360/"><img src="http://69.147.90.215/2503/4034596360_28a524e099.jpg" border="0" alt="注意对话模型.png" hspace="0" /></a></p>
<p><strong>注意对话模型</strong></p>
<p>相反，像这样的对话框就有点令人难以琢磨。</p>
<p><a title="主标题说明与按钮无法达成对话.png" href="http://www.flickr.com/photos/41128764@N02/4034596118/"><img src="http://69.147.90.215/2761/4034596118_94028d7464.jpg" border="0" alt="主标题说明与按钮无法达成对话.png" hspace="0" /></a></p>
<p><strong>主标题说明与按钮无法达成对话</strong></p>
<p>QQ邮箱的对话框问答则较为合理。</p>
<p><a title="QQ较好的对话模型.png" href="http://www.flickr.com/photos/41128764@N02/4033841531/"><img src="http://69.147.90.215/2533/4033841531_82f7b2aefd.jpg" border="0" alt="QQ较好的对话模型.png" hspace="0" /></a></p>
<p><strong>QQ</strong><strong>较好的对话模型</strong></p>
<p>到底是“确定、取消”还是“是、否”？一般而言，确定用于对一个已经执行的命令进行下一步的确定，而“是”“否”则用于是否开始一个命令或进入某个页面和流程。</p>
<p>具体来说没有这么复杂，用户对对话框的扫描一般只是主标题说明的前几个字而已，因此我们只需要记住这样的对话模型就好了。</p>
<p><strong>“您确定……？”</strong></p>
<p><strong>确定，取消</strong></p>
<p><strong>“您是否要……？”</strong></p>
<p><strong>是，否，取消（可考虑增加）</strong></p>
<p>当然，我们还有更好的解决方案，更直接的回答。如：</p>
<p><a title="用“立即插入”代替确定，更加明白.png" href="http://www.flickr.com/photos/41128764@N02/4034596038/"><img src="http://69.147.90.215/2775/4034596038_9389baf8a3.jpg" border="0" alt="用“立即插入”代替确定，更加明白.png" hspace="0" /></a></p>
<p><strong>用“立即插入”代替确定，更加明白</strong></p>
<p><strong>提示：</strong>不修改“取消”标题，免得让用户误解。</p>
<p>除此之外，我们依然还需要留意按钮标题的达意。如下图：</p>
<p><a title="“关闭”明白表示其操作.png" href="http://www.flickr.com/photos/41128764@N02/4033841413/"><img src="http://69.147.90.215/2638/4033841413_0c038e514d.jpg" border="0" alt="“关闭”明白表示其操作.png" hspace="0" /></a></p>
<p><strong>“关闭”明白表示其操作</strong></p>
<p>最后，我们需要关注标题，按钮标题，与内建对话框的的文字的呼应以及相关性。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.userkon.com/tolyer/about_web_app_daillog_box.html/feed</wfw:commentRss>
		<slash:comments>78</slash:comments>
		</item>
	</channel>
</rss>

