深圳网站设计：设计师，如何管好你的“弹窗”功能？
发布时间 : 2016-07-02 作者 : 博士通 浏览 : 1911当这个用户必须要确认一个关键的操作时，这就是好的，但是在大部分情况下弹窗是不太有必要的，甚至会引起用户反感。
当你将弹窗设计及使用得恰到好处时，它们就会是非常有效的提升企业网站用户体验的功能元素。它们能帮助用户快速且便捷地达成目标。然而当错误使用时，弹窗却会困扰你的用户。学会如何设计弹窗，会帮助你在使用时避免那些可能对用户造成的困扰。
那么，问题来了：什么是弹窗？
弹窗是一个为激起用户的回应而被设计、需要用户去与之交互的浮层。它可以告知用户关键的信息，要求用户去做决定，抑或是涉及到多个操作。弹窗越来越广泛地被应用于软件、网页、以及移动设备中，它可以在不把用户从当前页面带走的情况下，指引用户去完成一个特定的操作。
比如手机银行APP登录后偶尔会出现的“APP版本升级提示”类弹窗；深圳建站公司设计的后台操作“反馈”类弹窗；淘宝、京东等电商网站的“提示”类弹窗，如加入购物车，小米网站的已售罄；还有垃圾博彩网站被搜索安全联盟拦截时的“警示”类弹窗......哦，当然，登录QQ后，出现的新闻提示，电脑桌面右下角的360开机信息等等，都是弹窗，我们活在弹窗的世界...
既然弹窗功能如此重要，那么，有什么设计原则呢？
原则①：减少干扰
由于弹窗会中断操作，要尽可能地少使用弹窗。突然出现的弹窗会强迫用户去停止他们当下正在进行的任务，并转而专注于弹窗中的内容。当这个用户必须要确认一个关键的操作时，这就是好的，但是在大部分情况下弹窗是不太有必要的，甚至会引起用户反感。
那么，什么是最合适的时机呢，需要注意什么问题？
A.需要确认
在你需要用户去互动才可继续时，或当犯一个错误的成本会很高时，使用弹窗是最合适且最合理的。如一些网站会提示，“危险钓鱼网站，是否继续访问？”。
B.不要突然打开弹窗
在用户没有做任何操作时突然打开弹窗，是非常糟糕的设计。许多网站用订阅框来轰炸它们的用户，实在太糟糕了，我们要记住，弹窗的出现应该永远基于用户的某个操作，而且是用户自主想法的操作，如全选，删除，反选，修改，返回等操作。
原则②：弹窗应与现实世界相关连
弹窗应该使用用户的语言（用户熟悉的文字，短语和概念），而不是一些系统特有的专有名词。如下：
A.表述清晰的问题和选项
在弹窗的内容区域，应该使用一个表述清晰的问题或陈述，例如“重填注册信息？”或“删除此条记录？”总之，应该避免使用含有歉意的、模凌两可的、或者是反问式的语气，如“警告！”“你确定要删除吗？”
尽可能不要给用户提供可能产生混淆的选项，而应该使用那些文意清晰的选项。
B.提供重要的信息
一个弹窗不应该把对用户有用的信息说得含糊不清。举个例子，如果一个弹窗要让用户确认删除某些条目，就应该把这些条目都列出来。还有种是类似腾讯新闻推送类的弹窗，那种是要将文章简介写出来，吸引人点击。
另外，避免使用“了解更多”按钮去连接到帮助文档；在弹窗同一页面展开则是更好的选择。如果还需要显示更多的信息，则将其放在进入弹窗之前的页面。
C.提出关键信息的反馈
当一个流程结束时，记得显示一条提示信息（或视觉反馈），让用户知道自己已经完成了所有必要的步骤。
原则③：弹窗界面设计尽量简单化，傻瓜式
别试着把太多东西挤在一个弹窗内。要保持干净和简约。
A.元素与选项的数量
弹窗绝不应该只是部分显示在屏幕上。因此不要使用有滚动控件的弹窗。
B.操作的数量
弹窗不该提供超过两种选项。第三个选项，例如一些弹窗的“了解更多”，有可能会将用户带离此弹窗，如此用户将没有办法完成当前的任务。
C.别将多个步骤放置在一个弹窗内，会给人造成无法完成的错觉，可能实际很简单
原则④：选择适当的弹窗种类
如前文所说，弹窗大致分两个大类。第一大类为吸引用户关注的模态弹窗，强制用户与之交互后才能继续。模式弹窗通常被用在独立、强制的流程中：
A.当不需要上下文就可以决定怎么做的时候。
B.需要明确的“接受”或“取消”动作才能关闭。在点击这种弹窗的外部时，它并不会关闭。
C.当我们不允许此用户的进程处于部分完成状态（即用户必须完成此进程才可做其他任何的操作）。
第二大类则是非模态弹窗，它允许用户通过点击或轻触周围就可关闭。
模式弹窗只在特别重要的交互操作时才须使用，（比如：删除帐户，同意协议）。
原则⑤：视觉设计的一致性
A.弹窗下的背景
当打开一个弹窗时，后面的页面一定要稍微地变暗。它有两个功能，第一它把用户的注意力转移到了浮层上，第二它让用户知道后面的这个页面是不再可用的。
在调节背景深度时要注意了。如果你把它变得太暗，用户就没法看清背景的内容。如果你调得太浅，用户可能会认为这个页面仍然可操作，并且甚至不会注意到弹窗的存在。
B.清晰的关闭选项或关闭提示
在弹窗的右上角应该有一个关闭的选项。许多弹窗会在右上角有一个“x”的按钮，方便用户关闭窗口。
因而让用户通过点击非模态弹窗的背景区域去退出，就是一个更好的方法。
C.避免在弹窗内启动弹窗
应该避免在弹窗内再启动附加的小弹窗，这是因为此举会加深用户所感知到的网站或app的层级深度，从而增大了视觉的复杂性。
深圳网站设计总结：弹窗功能是一个很普遍的功能，但是，正如文中所述，它也是一枚双刃剑，因此，特别要记住，用户体验是为用户而做的设计，从这点出发，就很简单了。
那么，问题来了：什么是弹窗？
弹窗是一个为激起用户的回应而被设计、需要用户去与之交互的浮层。它可以告知用户关键的信息，要求用户去做决定，抑或是涉及到多个操作。弹窗越来越广泛地被应用于软件、网页、以及移动设备中，它可以在不把用户从当前页面带走的情况下，指引用户去完成一个特定的操作。
比如手机银行APP登录后偶尔会出现的“APP版本升级提示”类弹窗；深圳建站公司设计的后台操作“反馈”类弹窗；淘宝、京东等电商网站的“提示”类弹窗，如加入购物车，小米网站的已售罄；还有垃圾博彩网站被搜索安全联盟拦截时的“警示”类弹窗......哦，当然，登录QQ后，出现的新闻提示，电脑桌面右下角的360开机信息等等，都是弹窗，我们活在弹窗的世界...
既然弹窗功能如此重要，那么，有什么设计原则呢？
原则①：减少干扰
由于弹窗会中断操作，要尽可能地少使用弹窗。突然出现的弹窗会强迫用户去停止他们当下正在进行的任务，并转而专注于弹窗中的内容。当这个用户必须要确认一个关键的操作时，这就是好的，但是在大部分情况下弹窗是不太有必要的，甚至会引起用户反感。
那么，什么是最合适的时机呢，需要注意什么问题？
A.需要确认
在你需要用户去互动才可继续时，或当犯一个错误的成本会很高时，使用弹窗是最合适且最合理的。如一些网站会提示，“危险钓鱼网站，是否继续访问？”。
B.不要突然打开弹窗
在用户没有做任何操作时突然打开弹窗，是非常糟糕的设计。许多网站用订阅框来轰炸它们的用户，实在太糟糕了，我们要记住，弹窗的出现应该永远基于用户的某个操作，而且是用户自主想法的操作，如全选，删除，反选，修改，返回等操作。
原则②：弹窗应与现实世界相关连
弹窗应该使用用户的语言（用户熟悉的文字，短语和概念），而不是一些系统特有的专有名词。如下：
A.表述清晰的问题和选项
在弹窗的内容区域，应该使用一个表述清晰的问题或陈述，例如“重填注册信息？”或“删除此条记录？”总之，应该避免使用含有歉意的、模凌两可的、或者是反问式的语气，如“警告！”“你确定要删除吗？”
尽可能不要给用户提供可能产生混淆的选项，而应该使用那些文意清晰的选项。
B.提供重要的信息
一个弹窗不应该把对用户有用的信息说得含糊不清。举个例子，如果一个弹窗要让用户确认删除某些条目，就应该把这些条目都列出来。还有种是类似腾讯新闻推送类的弹窗，那种是要将文章简介写出来，吸引人点击。
另外，避免使用“了解更多”按钮去连接到帮助文档；在弹窗同一页面展开则是更好的选择。如果还需要显示更多的信息，则将其放在进入弹窗之前的页面。
C.提出关键信息的反馈
当一个流程结束时，记得显示一条提示信息（或视觉反馈），让用户知道自己已经完成了所有必要的步骤。
原则③：弹窗界面设计尽量简单化，傻瓜式
别试着把太多东西挤在一个弹窗内。要保持干净和简约。
A.元素与选项的数量
弹窗绝不应该只是部分显示在屏幕上。因此不要使用有滚动控件的弹窗。
B.操作的数量
弹窗不该提供超过两种选项。第三个选项，例如一些弹窗的“了解更多”，有可能会将用户带离此弹窗，如此用户将没有办法完成当前的任务。
C.别将多个步骤放置在一个弹窗内，会给人造成无法完成的错觉，可能实际很简单
原则④：选择适当的弹窗种类
如前文所说，弹窗大致分两个大类。第一大类为吸引用户关注的模态弹窗，强制用户与之交互后才能继续。模式弹窗通常被用在独立、强制的流程中：
A.当不需要上下文就可以决定怎么做的时候。
B.需要明确的“接受”或“取消”动作才能关闭。在点击这种弹窗的外部时，它并不会关闭。
C.当我们不允许此用户的进程处于部分完成状态（即用户必须完成此进程才可做其他任何的操作）。
第二大类则是非模态弹窗，它允许用户通过点击或轻触周围就可关闭。
模式弹窗只在特别重要的交互操作时才须使用，（比如：删除帐户，同意协议）。
原则⑤：视觉设计的一致性
A.弹窗下的背景
当打开一个弹窗时，后面的页面一定要稍微地变暗。它有两个功能，第一它把用户的注意力转移到了浮层上，第二它让用户知道后面的这个页面是不再可用的。
在调节背景深度时要注意了。如果你把它变得太暗，用户就没法看清背景的内容。如果你调得太浅，用户可能会认为这个页面仍然可操作，并且甚至不会注意到弹窗的存在。
B.清晰的关闭选项或关闭提示
在弹窗的右上角应该有一个关闭的选项。许多弹窗会在右上角有一个“x”的按钮，方便用户关闭窗口。
因而让用户通过点击非模态弹窗的背景区域去退出，就是一个更好的方法。
C.避免在弹窗内启动弹窗
应该避免在弹窗内再启动附加的小弹窗，这是因为此举会加深用户所感知到的网站或app的层级深度，从而增大了视觉的复杂性。
深圳网站设计总结：弹窗功能是一个很普遍的功能，但是，正如文中所述，它也是一枚双刃剑，因此，特别要记住，用户体验是为用户而做的设计，从这点出发，就很简单了。
案例推荐
深圳英博达智能科技有限公司
案例热度_51702019-03-07
深圳市同德税务师事务所
案例热度_49912019-03-06
贵港贵和科技有限公司
案例热度_49932019-03-05
其他人还阅读了该篇文章：导致企业网站价值丧失的11个“毒素”
您可能感兴趣的文章：公司网站建设注意事项 | 企业网站建设套餐 | 企业手机网站制作 | 企业网站如何优化 | 企业网站改版收费
人气阅读推荐
- 伪静态网站分享到微信链接打不开报404错误的解决办法 【2015-08-26】
- 企业网站底部（页脚部分）如何设计？ 【2015-10-31】
- 手机网站的域名是m和wap有区别吗？ 【2017-08-15】
- 为什么说场景营销是移动互联时代最佳营销解决方案 【2015-06-23】
- 谷歌正式推出Google Play移动搜索广告! 【2015-08-05】
- 2015最新微信公众号认证完整步骤 【2015-03-23】
- 2015最新天涯博客引流方法，让网站流量飞起来 【2015-09-22】
- 企业网站建设“域名空间”选用原则 【2015-06-09】
- 也不算意料之外的APP推广方法 【2015-06-23】
博士通是一家一站式中小企业网络运营方案提供商，全国统一服务热线 ：0755-89812581 ; 博士通总部位于深圳，业务涵盖域名注册，空间购买，深圳网站建设,网站建设和改版，微信公众号运营，百度竞价托管，网站优化推广引流，手机网站建设，小程序开发，购物网站开发，企业邮箱申请等服务。和传统网络公司不同的是，博士通在网页设计风格上独树一帜，领先行业率先推出宽屏企业网站设计风格，围绕客户需求的同时兼具行业潮流设计网站，让网站在新式设备上获得更好地展示效果；历经14年网站建设企业网站制作经验积累，客户遍及深圳，广州，成都，香港等地，涉及办公，装饰，电子，物流等不同行业...
