020-29815005
预约专线时间:09:00-23:59

弹出式窗口设计的基本原则有哪些

新闻来源:优漫教育 日期:2021-07-24
如果您正确地设计和使用弹出框,它们将成为非常有效的用户界面元素。他们可以帮助用户快速轻松的达到目标。然而,如果使用不当,弹出窗口会给用户带来麻烦。UI设计培训学校知道如何设计弹出式窗口将有助于避免使用时可能给用户带来的问题。
 弹出窗口是一种浮动层,其设计目的是激发用户的响应,并要求用户进行交互。可通知用户的关键信息,要求用户做决定,或涉及多个动作。在软件、网页和移动设备上,UI设计培训学校弹出窗口的应用越来越广泛。他们可以指导用户执行特定的操作,而不需要让用户离开当前页面。

  下面我们来看几种出色的弹出设计和使用方法。

  由于弹出窗口会中断操作,因此使用的弹出窗口要尽可能少。弹出窗口迫使用户停止任务并将注意力集中在弹出窗口的内容上。下一步之前,用户必须面对弹出窗口,否则弹出窗口下的页面无法操作。这样做可以让用户确认键操作,但是在大多数情况下,不需要弹出窗口,甚至会引起用户的反感。

  如果你需要用户交互,然后再继续,或者当错误的代价很高时,弹出窗口是适当且合理的。

  在用户无所事事的时候弹出弹出窗口是一种很糟糕的设计。很多站点通过订阅框轰炸用户,如下所示:

  弹出窗口应该总是基于用户的特定操作。这个动作可以是单击按钮、输入链接或者选择选项。

  弹出窗口应使用用户的语言(用户熟悉的词汇、词组和概念),而非特定系统的特定术语。

  对于弹出窗口的内容区域,你应该用一个清晰描述的问题或陈述,如“清除存档?”或“删除帐户?”简单地说,我们应该避免使用道歉、模棱两可或修辞的语调,比如“警告!”你确定吗?

  避免给用户提供混乱的选择,而要使用一些清晰的选项。多数情况下,用户应该可以通过弹出标题和按钮来了解自己的选择。

  反面:按钮上的文字“否”的确回答了弹出窗口中的问题,但是它不会直接告诉用户点击后的结果。

  改作:肯定行动文本“放弃”清楚地表明了选择该选择的后果。

  弹出窗口不应该隐藏对用户有用的信息。举例来说,如果一个弹出窗口想让用户确认删除某些项目,应该列出所有项目。

  另外,不要使用“了解更多”按钮来连接帮助文档;在同一个弹出页面上展开是更好的选择。如需显示更多信息,请将它放到页面上,然后进入弹出窗口。

  最后,记得显示提示(或视觉反馈),让用户知道他们已经完成了所有必要的步骤。


UI设计培训学校


  别在弹出窗口里塞太多东西。简单易行(遵循亲吻的原则)。但是极简主义并不意味着限制。您所提供的所有信息都应是有价值的。

  弹出窗口不应该仅仅是屏幕的一部分。不使用具有滚动控制项的弹出窗口。

  反例:巴克莱银行的支付处理弹出窗口包含许多选项和元素,其中一些选项和元素只在滚动之后才可见(尤其对于屏幕较小的移动设备而言)

  举个例子:stripe使用一个简单又智能的弹出窗口,它只显示基本信息,因此在桌面和手机屏幕上都很好看。

  弹出窗口不应该提供超过两个选项。第3种选择,如下图中的“进一步了解”,可能会让用户离开这个弹出窗口,让用户无法完成当前任务。

  将一项复杂的工作分成几步是一个不错的想法。然而,它同时也向用户发出了一个信号:该任务过于复杂,不能在另一个弹出界面上完成。

  当交互非常复杂时,可以采取几个步骤来完成(如下面的例子所示),那么就需要使用一个单独的页面(而非弹出窗口)。

  弹出式窗口大致有两种。类别是弹出式模式,它能吸引用户的注意,并强制用户与其交互。通常对独立的强制过程使用模式弹出窗口:

  另一种类型是无模式弹出窗口,允许用户点击或触摸关闭。

  一个弹出式窗口只用于特别重要的交互(如删除账户、同意协议)。

  另外,移动系统的弹出窗口通常是模态的,包括下列基本要素:内容、动作和标题。

  当打开弹出窗口时,您必须稍微调暗背面。具有两种功能。第一,它把用户的注意力转移到浮动层。第二,它告诉用户以下的网页不再可用。

  请注意调整背景深度。否则使用者将看不见背景。设定得太低,用户可能会以为页面还在运行,甚至没有注意到弹出窗口。

  应该在弹出窗口的右上角设置一个关闭选项。在弹出窗口的右上角有一个“X”按钮,方便用户关闭窗口。然而,对普通用户而言,“X”按钮并非明显的退出渠道。因为"X"按钮通常很小,并且要求用户精确地定位,以便用户能够成功地退出,而这个过程通常非常困难。

  所以,点击无模式弹出窗口的背景区域是用户退出的最好方式。

  应避免在弹出窗口中启动附加弹出窗口,因为这样会加深用户所感知的站点或应用的层次,增加视觉上的复杂性。

  但愿有关弹出窗口的这些用例和方法能够有趣且有用地设计原型。切记,用户体验是为用户而非为技术而设计的。UI设计培训学校很容易知道什么设计适合你的用户,他们会执行什么任务:你只需要模仿高级产品的弹出式窗口,然后找到你的用户,进行相关的测试。