网页设计技巧：如何利用弹窗设计提高网站的转化?

弹窗，对很多人都并不陌生，无论是网页设计还是APP设计，我们经常都会看到它的身影。虽然弹窗设计一直被评为「史上最糟糕的设计体验」，但不可否认它对网站传递品牌、产品/服务、活动等的贡献。如何利用弹窗设计提高网站的转化?这就需要看设计师如何布局弹窗设计，让它不影响网站用户体验的前提下，让用户更容易接受并操作。

网页设计技巧

为什麽说弹窗设计是「史上最糟糕的用户体验」?

弹窗设计是网站交互与用户操作的核心枢纽，也是用户处理「即使任务」的重要载体，但由於它的出现会中断用户当前操作，容易引起用户对此的不满，因此弹窗设计也被戏称为「史上最糟糕的用户体验」。

虽然弹窗设计的类型有很多，但从交互形式上的区分大致可分为两种：模态弹窗和非模态弹窗。

· 模态弹窗：常见种类主要对话框(Dialog)，警示框(Alter)，浮层(Popover/Popup)和操作栏(Actionbar)等。由於它具有需要即时处理的特性，因此层级往往会比较高，也比较容易吸引用户的注意，同时也会降低用户的操作体验。

· 非模态弹窗：常见的种类有Hud/Toast，提示栏和Snackbar等。非模态弹窗属於一种轻量级的反馈机制，从出现到停留，再到消失的时间都非常短暂，甚至短到用户几乎不需要对它做出反映，因此从特徵上，非模态弹窗与模特弹窗可以说是截然不同的。

网页设计技巧

弹窗设计的基本原则有哪些?

如果你不想你的弹窗影响用户的操作，但同时又需要弹窗帮你与用户实现有效通话，那麽你的弹窗设计必须设计得恰到好处，让它帮用户快速地实现目标。

弹窗设计基本原则一：减少干扰

由於突然出现的弹窗会强迫用户停止目前的操作，转而专注弹窗的内容，因此如果正常情况下，尽量减少使用弹窗，以免引起用户的反感。

弹窗设计基本原则二：使用用户熟悉的语言

弹窗应该尽量使用用户熟悉的语言，而不是系统特有的专有名词。注意内容细节要清晰，如果弹窗是让用户删除某些条目，应全部列出来。另外，语气上应使用表述清晰的问题或陈述，尽量避免使用含有歉意、模棱两可或反问式。

弹窗设计原则三：讲究极简

别尝试将太多内容挤在弹窗内，弹窗的界面应保持乾净和简约，同时弹窗所提供的所有信息应对用户有价值并与之相关。

弹窗设计原则四：选择合适的弹窗种类

弹窗大致分为两大类，一类是吸引用户关注，强制用户与之交互後才能继续的模态弹窗。这类弹窗一般只在特别重要的交互操作中才须使用，如删除帐户，同意协议等，其它情况下使用，需要考虑它对用户体验的影响。

另一类是非模态弹窗，通常用户点击或轻触周围便可关闭。这类弹窗对用户体验的影响相对较少，因此也是最常使用的弹窗类型。

弹窗设计原则五：视觉一致性

为了避免影响用户的正常操作，弹窗出现时页面背景通常会稍微变暗，一来可以让用户的注意力转移到弹窗上，二来让用户知道後面的内容是不可用的。但调节背景明暗度是需要注意，太暗会让用户没法看清背景内容，太浅则会让用户误以为页面仍可继续操作，甚至无法将视线聚焦在弹窗上。

另外弹窗应提供关闭按钮，同时避免在弹窗内启动小弹窗，避免增加网站操作的复杂性。

网页设计技巧

如何利用弹窗设计提高网站的转化?

虽然弹窗会影响网站的用户体验，但它对防止用户流失、促进商品与内容转化等都起到积极作用。当然，要真正留住用户更多地依靠产品内容本身的质量与吸引力，那具体要怎样做呢?

● 利益引诱：通过福利发放、商品优惠等利益刺激手段，吸引用户继续完成对内容/商品的消费，从而降低用户流失。

○ 操作警告：提醒用户退出页面可能带来的影响和後果，让用户判断当前的退出是否正确，同时运用一些「挑衅」得手段，尽可能降低用户流失的风险。

● 增加说服力：围绕商品和内容的性价比、口碑、受欢迎程度等进行展示说明，以此证明商品的质量与真实性，吸引用户的了解。

○ 巧妙的页面设计：主要通过视觉上的设计手段、掩眼法阻止用户流失。

● 引导至其他页面：当用户想退出时，不妨转移方向将用户引导到她感兴趣的地方，这同样是阻止用户流失的好方法。

网页设计技巧

既然现在还有那麽多网页设计和APP设计都使用弹窗，那证明弹窗的确有它的一定价值。当然，要想弹窗的价值发挥到最大，就必须以「用户体验」为主，考虑怎样设计弹窗最适合用户，以及方便他们操作，而这也不是什麽难事，只要多参考其他弹窗设计，找用户做相关测试便可。