当你将弹窗设计及使用得恰到好处时,它们就会是非常有效的用户界面元素 。它们能帮助用户快速且便捷地达成目标 。然而当错误使用时,弹窗却会困扰你的用户 。学会如何设计弹窗,会帮助你在使用时避免那些可能对用户造成的困扰 。
什么是弹窗?
弹窗是一个为激起用户的回应而被设计、需要用户去与之交互的浮层 。它可以告知用户关键的信息,要求用户去做决定,抑或是涉及到多个操作 。弹窗越来越广泛地被应用于软件、网页、以及移动设备中 , 它可以在不把用户从当前页面带走的情况下,指引用户去完成一个特定的操作 。
现在让我们来看看有哪些优秀的弹窗设计和使用方法 。
原则1,减少干扰
由于弹窗会中断操作,要尽可能地少使用弹窗 。突然出现的弹窗会强迫用户去停止他们当下正在进行的任务,并转而专注于弹窗中的内容 。在继续之前,用户必须要面对这个弹窗,否则将无法对弹窗之下的页面进行操作 。当这个用户必须要确认一个关键的操作时,这就是好的,但是在大部分情况下弹窗是不太有必要的,甚至会引起用户反感 。
Tips:
1.不是每个选择、设置、或细节都有必要中断用户当前的操作 。
2.弹窗的备选方案有菜单以及同框内的扩展,这两种控件都可以保持当前页面的延续 。
3.不要突然跳出弹窗,应该让用户对弹窗的每次出现都有心理预期 。
原则2 , 弹窗应与现实世界相关连
弹窗应该使用用户的语言(用户熟悉的文字,短语和概念),而不是一些系统特有的专有名词 。
Tips:
1.在弹窗中使用语义清晰的问题和选项 。
2.设计促进操作完成后的弹窗 。
3.在操作完成后,提示用户操作已经完成了 。
原则3,讲求极简
别试着把太多东西挤在一个弹窗内 。要保持干净和简约(遵从KISS原则) 。然而极简主义并不意味着被局限住,你提供的所有信息都该是有价值并且与之相关的 。
Tips:
1.如果你发现你在很努力地把许多元素挤进一个弹窗,这通常代表弹窗已经不是最优的设计方案了 。
2.将那些不必要的、不能够帮助用户完成任务的元素或内容从弹窗中去除,以达到简化的目的 。
3.尽量避免在弹窗内安置多个步骤 。
原则4,选择适当的弹窗种类
弹窗大致分两个大类 。第一大类为吸引用户关注的模态弹窗,强制用户与之交互后才能继续 。模式弹窗通常被用在独立、强制的流程中:
1.当不需要上下文就可以决定怎么做的时候 。
【五条基本原则让你玩转弹窗设计】
2.需要明确的“接受”或“取消”动作才能关闭 。在点击这种弹窗的外部时,它并不会关闭 。
3.当我们不允许此用户的进程处于部分完成状态(即用户必须完成此进程才可做其他任何的操作) 。
第二大类则是非模态弹窗,它允许用户通过点击或轻触周围就可关闭 。第一种模式弹窗只在特别重要的交互操作时才须使用,(比如:删除帐户,同意协议) 。
原则5,视觉一致性
Tips:
1.在大部分情景下,都允许用户通过点击或轻触来关闭弹窗(除了模态弹窗) 。
2.应该避免在弹窗内再启动附加的小弹窗(即弹窗中的弹窗) 。
总结
希望这些有关弹窗的使用案例和使用方法还算有趣,并能在你们设计原型时派上用场 。要记住,用户体验是为用户而做的设计,而非为技术 。要想知道什么样的设计最适合你的用户、最适合他们将进行的任务,其实不是一件难事:你只需要模仿那些领先产品的弹窗,然后找到你的用户做一些相关的测试 。