confirm弹窗确定按钮换文字_弹窗设计的5条基本原则（转载）

此文为转载，原译文出处【点融设计中心DDC】。

当你将弹窗设计及使用得恰到好处时，它们就会是非常有效的用户界面元素。它们能帮助用户快速且便捷地达成目标。然而当错误使用时，弹窗却会困扰你的用户。知晓如何设计弹窗，会帮助你在使用时避免那些可能对用户造成的困扰。

什么是弹窗？

弹窗是一个为激起用户的回应而被设计、需要用户去与之交互的浮层。它可以告知用户关键的信息，要求用户去做决定，抑或是涉及到多个操作。弹窗越来越广泛地被应用于软件、网页、以及移动设备中，它可以在不把用户从当前页面带走的情况下，指引用户去完成一个特定的操作。

图1，会话过期弹窗

现在让我们来看看有哪些优秀的弹窗设计和使用方法。

原则1. 减少干扰

由于弹窗会中断操作，要尽可能地少使用弹窗。突然出现的弹窗会强迫用户去停止他们当下正在进行的任务，并转而专注于弹窗中的内容。在继续之前，用户必须要面对这个弹窗，否则将无法对弹窗之下的页面进行操作。当这个用户必须要确认一个关键的操作时，这就是好的，但是在大部分情况下弹窗是不太有必要的，甚至会引起用户反感。

需要确认

在你需要用户去互动才可继续时，或当犯一个错误的成本会很高时，使用弹窗是最合适且最合理的。

图2，这里告知了用户一个情况，需要用户确认

不要突然打开弹窗

在用户没有做任何操作时突然打开弹窗，是非常糟糕的设计。许多网站用订阅框来轰炸它们的用户，就如下面的例子：

图3，诸如此类的弹窗给没有键盘的用户造成了数不清的麻烦

弹窗的出现应该永远基于用户的某个操作。这个操作也许是点击了一个按钮，也许是进入了一个链接，也可能是选择了某个选项。

小结

不是每个选择、设置、或细节都有必要中断用户当前的操作。
弹窗的备选方案有菜单以及同框内的扩展，这两种控件都可以保持当前页面的延续。
可不要突然跳出弹窗，应该让用户对弹窗的每次出现都有心理预期。

原则2. 弹窗应与现实世界相关连

弹窗应该使用用户的语言（用户熟悉的文字，短语和概念），而不是一些系统特有的专有名词。

表述清晰的问题和选项

在弹窗的内容区域，应该使用一个表述清晰的问题或陈述，例如“清除您的存档？”或“删除您的账户？”总之，应该避免使用含有歉意的、模凌两可的、或者是反问式的语气，如“警告！”“你确定吗？”

图4，左边的弹窗提出了一个很模凌两可的问题，并且这个操作可能影响的范围并不明确；右边的弹窗提出的问题相当明确，它解释了此次操作对用户的影响，并且提供了指向清晰的选项

尽可能不要给用户提供可能产生混淆的选项，而应该使用那些文意清晰的选项。大部分情况下，用户应该能够只通过弹窗的标题和按钮，就了解他们有哪些选项。

反例：这个按钮的文字“不”的确回答了弹窗内的问题，但是并没有直接告诉用户点击后会发生什么。

confirm弹窗确定按钮换文字_弹窗设计的5条基本原则（转载）相关推荐

confirm弹窗确定按钮换文字_第二章（第9节）：弹窗处理
在 WebDriver 中处理 JavaScript 所生成的 alert.confirm 以及 prompt 十分简单,具体做法是使用 switch_to.alert 方法定位到 alert/con ...
c语言编写弹窗提示是否确认退出_弹窗设计的5条基本原则
当你将弹窗设计及使用得恰到好处时,它们就会是非常有效的用户界面元素.它们能帮助用户快速且便捷地达成目标.然而当错误使用时,弹窗却会困扰你的用户. 知晓如何设计弹窗,会帮助你在使用时避免那些可能对用户造 ...
confirm修改按钮文字_条码设计软件如何调整条形码与条码文字之间的距离
在条码设计软件中设计条形码的时候,我们可以发现条形码和条码文字之间的距离有些紧密,为了美观,我们可以调整一下条形码与条码文字的间距,具体操作如下: 1.打开条码设计软件,新建标签之后,点击软件左侧的& ...
js倒计时代码最简单的_代码设计开发-6大基本原则解读(最简单扼要的理解)
前言相信做过编程开发的都应该听说过设计模式,设计模式是历史上的编程大牛经过不断的探索,总结出来的一整套经验的总和.他们总结出来这23种设计模式,告诉我们编程按照这些编程的设计模式可以让我们代码的可重 ...
修改vant 弹窗Dialog组件调用是确认按钮与取消按钮的文字
文章目录修改vant 弹窗Dialog组件调用是确认按钮与取消按钮的文字效果图 · 示例: 重要代码如下(部分): 代码使用 · 注意事项: 官方文档参数定义 · 注意事项: 文章阅读: 修改va ...
toast弹窗_弹窗实用素材模板|UI设计中的弹窗设计技巧，快get
模态阻断分为: (1)浮层弹窗/浮出框(Popover/Popup)-页面顶部含义:英意为弹出窗口,浮动于顶层窗口,气泡解读:当用户点击某个控件或者某个区域时浮出的半透明或者不透明的弹窗窗口,不会 ...
火绒弹窗拦截_弹窗广告的克星：火绒安全软件图文使用教程
现在很少有人说电脑中病毒但是经常有人发唠叨说弹窗广告太过烦人,特别是 FF 新鲜事.FF 新推荐.今日热点(搜狐微门户)等的弹窗广告更是烦不胜烦,哪怕是删除相关进程或文件也不行. 那么是不是我们对这些 ...
python画布按钮颜色随机切换_我想让每次点换颜色按钮换一个随机色，该怎么写？...
源自:4-1 编程挑战我想让每次点换颜色按钮换一个随机色,该怎么写? javascript body{font-size:12px;} #txt{ height:400px; width:600px ...
【easyUI】easyUI Confirm使用方法及配置文字以及回调以及【更改源码】扩展功能修改按钮文字；
[easyUI]easyUI Confirm使用方法及配置文字以及回调以及[更改源码]扩展功能修改按钮文字: 基本使用 $.messager.confirm(title,msg,fn) param: ...

confirm弹窗确定按钮换文字_弹窗设计的5条基本原则（转载）

confirm弹窗确定按钮换文字_弹窗设计的5条基本原则（转载）相关推荐

最新文章

热门文章