网站首页
手机版

五条基本原则让你玩转弹窗设计

更新时间:2022-03-23 23:02:32作者:佚名

五条基本原则让你玩转弹窗设计

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

  

  什么是弹窗?

  

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

  

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

  

  原则1,减少干扰

  

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

  

  Tips:

  

  1.不是每个选择、设置、或细节都有必要中断用户当前的操作。

  

  2.弹窗的备选方案有菜单以及同框内的扩展,这两种控件都可以保持当前页面的延续。

  

  3.不要突然跳出弹窗,应该让用户对弹窗的每次出现都有心理预期。

  

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

  

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

  

  Tips:

  

  1.在弹窗中使用语义清晰的问题和选项。

  

  2.设计促进操作完成后的弹窗。

  

  3.在操作完成后,提示用户操作已经完成了。

  

  原则3,讲求极简

  

  别试着把太多东西挤在一个弹窗内。要保持干净和简约(遵从KISS原则)。然而极简主义并不意味着被局限住,你提供的所有信息都该是有价值并且与之相关的。

  

  Tips:

  

  1.如果你发现你在很努力地把许多元素挤进一个弹窗,这通常代表弹窗已经不是最优的设计方案了。

  

  2.将那些不必要的、不能够帮助用户完成任务的元素或内容从弹窗中去除,以达到简化的目的。

  

  3.尽量避免在弹窗内安置多个步骤。

  

  原则4,选择适当的弹窗种类

  

  弹窗大致分两个大类。第一大类为吸引用户关注的模态弹窗,强制用户与之交互后才能继续。模式弹窗通常被用在独立、强制的流程中:

  

  1.当不需要上下文就可以决定怎么做的时候。

  

  2.需要明确的“接受”或“取消”动作才能关闭。在点击这种弹窗的外部时,它并不会关闭。

  

  3.当我们不允许此用户的进程处于部分完成状态(即用户必须完成此进程才可做其他任何的操作)。

  

  第二大类则是非模态弹窗,它允许用户通过点击或轻触周围就可关闭。第一种模式弹窗只在特别重要的交互操作时才须使用,(比如:删除帐户,同意协议)。

  

  原则5,视觉一致性

  

  Tips:

  

  1.在大部分情景下,都允许用户通过点击或轻触来关闭弹窗(除了模态弹窗)。

  

  2.应该避免在弹窗内再启动附加的小弹窗(即弹窗中的弹窗)。

  

  总结

  

  希望这些有关弹窗的使用案例和使用方法还算有趣,并能在你们设计原型时派上用场。要记住,用户体验是为用户而做的设计,而非为技术。要想知道什么样的设计最适合你的用户、最适合他们将进行的任务,其实不是一件难事:你只需要模仿那些领先产品的弹窗,然后找到你的用户做一些相关的测试。


本文标签: 让你  基本原则  玩转  五条  

为您推荐

excel表格怎么大批量筛选(excel表格怎么大批量筛选重复项并快速删除)

1、在选中单元格后,点击排序和筛选。2、在展开的界面中,点击筛选。3、在单元格界面中,点击全部显示。4、在展开的界面中,点击确定即可。

2023-03-21 15:30

Word2007文档水印怎么去除(word2007文档如何去除水印)

Word2007文档水印怎么去除 Word2007文档水印怎么去除 方法一 页面布局-页面背景-水印-删除水印,文档中的水印被删除. 方法二 页面布局-页面背景

2023-03-15 00:31

Word2003文档中的回车符怎么隐藏(怎样隐藏word里的回车符)

Word2003文档中的回车符怎么隐藏 Word2003文档中的回车符怎么隐藏 隐藏回车符 1.单击菜单栏"工具"下的"选项",在打开的窗口中取消勾选"视图"选

2023-03-15 00:30

Word2007自动滚动怎么设置(如何设置word自动滚动)

Word2007自动滚动怎么设置   Word2007自动滚动怎么设置 1.首先打开一篇长篇文档,单击其左上角的"office按钮"在弹出的快捷菜单中选择"Wo

2023-03-15 00:29

Word2013文档中大纲视图如何使用(word2007大纲视图)

Word2013文档中大纲视图如何使用 在Word 2013中,用户可以使用大纲视图来查看并编辑文档的大纲结构,同时可以对正文进行处理.在大纲视图模式下,文档的

2023-03-15 00:29

Word怎么用快捷键快速修改文字格式 word快捷键修改

Word怎么用快捷键快速修改文字格式   Word怎么用快捷键快速修改文字格式 1.电脑上新建word文件,例如命名为"word技巧" 2.双击"word技巧"

2023-03-15 00:27