设计弹窗的一点思路
时间：2023-07-22 13:36:01 | 来源：网站运营
时间：2023-07-22 13:36:01 来源：网站运营
设计弹窗的一点思路：
本文说什么？
由于弹窗设计形式丰富多彩，本文将会聊到“泛弹窗”的设计思路。“泛弹窗”包括不局限于：小浮层、侧拉层、插入式面板、替换式面板、对话框等。也会提到新页面或弹窗的选择。
什么时候会用弹窗？
当用户对内容进行探索时，行为由“浏览多个”改变为“就某个查看更多、编辑、新增、删除等”。因此，设计师会需要使用不同类型的弹窗来匹配场景的切换。
如何抉择？从如下两点出发试试？
能承载多少内容，弹窗作为一个容器，义不容辞。因此，结合设计的功能内容，
从而设定：大小。在用户行为场景发生改变时的会考量使用弹窗，将影响或限制用户行为，从而引导或提示用户完成任务。因此，需考量前后场景的关系，
从而设定出现和关闭的形式，是否能匹配恰当的顿挫感。举几个栗子？那些常见场景....
No.1：“看看更多”，对页面某点想进一步了解。
上网看内容，互联网使命之一，从小浮层、到插入式面板、到侧拉面板、到新页面等等等等，各种“看”的场景和弹窗设计只有想不到，没有做不到。
具体场景举例：用户浏览列表页面，对某个内容概述感兴趣，然后想查看它的完整内容。对比淘宝和本站的交互，
就算相同场景，设计上也有差异化。淘宝：查看搜索宝贝结果，对某个宝贝感兴趣。此时，打开了浏览器新页面，查看宝贝详情。
淘宝－宝贝列表页淘宝－宝贝详情页本站：查看首页问答列表，对某个问答感兴趣，此时，某答案模块展开，阅读全文。
本站－问答列表页本站－问答列表页－某个答案全文将浏览器新标签页（淘宝栗子）和当前模块展开收起（本站栗子）的交互提炼后（如下图），从内容量和顿挫感进行分析。
浏览器新标签页vs当前模块展开收起内容量：淘宝单个宝贝详情：通常内容量相当大（包括视频、n多图），用新页面承载丰富内容格式相对稳定，扩展性相对高。
本站单个答案详情：偶尔内容较多（图文结合），偶尔内容较少（长文字），当前页面展开收起承载即可。但当列表页过长时，分段加载的交互会由于网络因素，偶尔出现卡顿的情况；
顿挫感：浏览器新标签页：顿挫感强（由于从列表页到详情页，是新开或刷新整个页面内容，关闭时通用关闭或刷新整个页面内容，因此视觉冲击力较强）；
当前模块展开收起：顿挫感弱，且对多次查看列表页面不同模块的行为流的引导性较强（由于单个内容详情页是插入到当前位置，用户可收起也可不收起，对当前页面其他内容没有影响）；
总的，对于查看详情的功能。淘宝由于宝贝详情页内容量相当大，选择了内容承载性高，顿挫感较强的新页面交互；本站由于单个答案内容量有多有少，选择了内容承载性较弱，顿挫感较弱的展开收起的交互，但对多次查看列表内容的行为有正向引导。
No.2：“确认要删除吗？”逆向操作的二次提示。
再看个相当相当常见的交互，类似于下图手淘上删除订单的设计....
内容量：一句提示+确认+取消，小浮层即可承载。
顿挫感：从页面中心出现一个浮层且半蒙下方内容，制造出强烈的视觉焦点，其次，关闭操作局限于“确认”“取消”两个按钮区，页面其他位置点触无效，制造出强迫的操作引导。
手淘-删除订单然而，此类设计适用于所有的删除场景吗？
删除场景真的都需要给用户强烈的顿挫感，从而打断当前的用户行为流吗？是不是个好问题？又看手淘购物车中的删除功能（如下图），如此悄然无声的删除，不需二次确认，甚至连toast“删除成功”反馈也没有。为什么？因为它真的不太需要。往购物车中加宝贝一键添加，那删宝贝也一键删除。（不管你们购物车满不满，反正我购物车一年四季都很容易满）购物车删除操作似乎具有更多正向意义，为了能放入当下更多想要的，删了那些老早加入的现在不想要的。
Tips:设计弹窗前务必想想用户的行为场景，此时此刻真的需要顿挫感吗？为什么？如果真的必要，需要多重？
No.3：“写想法、发微博、发照片、写文章”，总之不想看了，有料要表达。
最后聊个较少却很重要的场景，内容输出。
相比浏览和编辑，新内容的创造相对需要花更多的精力。但这也恰好是很多产品期望用户干的事，越多的用户创造内容，对产品粘性、活跃度都是相当有帮助的。
猜下本站“写下你的问题”所用弹窗是否必须通过关闭结束流程？点击黑色蒙层能退出吗？
本站-写下你的问题同类场景的设计，本站的设计是可以的，单击叉或黑色蒙层，都能轻松结束创建。就这么让用户做了一半不做了？不需要提示用户内容写了一半的内容还要不要？
设计弹窗的顿挫感确实能起到对用户行为的引导和限制，但这不是我们要胁用户必须做某件事的手段。很多时候我们不小心就会落入这样的迷思：“我很想让用户这样做，所以要这样设计”。这时候，要么换个思路？如何让用户更轻松的去做我想要的？
因此，本站在这个功能上做了记忆能力。关闭弹窗后再打开，依旧能记住用户上次问了一半的问题，刷新浏览器，也还是在的。
Tips：让用户很愿意达成我们的期待。
最最重要的最后再提下：
- 结合的“前后用户行为场景关系”和“产品功能内容”，设计弹窗的内容量和顿挫感。
- 设计弹窗前务必想想用户的行为场景，此时此刻真的需要顿挫感吗？为什么？如果真的必要，需要多重？
- 设计弹窗的顿挫感确实能起到对用户行为的引导和限制，但这不是我们要胁用户必须做某件事的手段。让用户很愿意达成我们的期待。
好了，搁笔～
在线咨询
