惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

美团技术团队
Y
Y Combinator Blog
宝玉的分享
宝玉的分享
S
Secure Thoughts
The Cloudflare Blog
P
Proofpoint News Feed
腾讯CDC
Latest news
Latest news
AWS News Blog
AWS News Blog
The Hacker News
The Hacker News
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
IT之家
IT之家
T
The Exploit Database - CXSecurity.com
T
Threat Research - Cisco Blogs
C
Cybersecurity and Infrastructure Security Agency CISA
V
Vulnerabilities – Threatpost
Hugging Face - Blog
Hugging Face - Blog
博客园 - 聂微东
小众软件
小众软件
L
Lohrmann on Cybersecurity
Apple Machine Learning Research
Apple Machine Learning Research
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
L
LINUX DO - 热门话题
博客园_首页
Hacker News - Newest:
Hacker News - Newest: "LLM"
Google Online Security Blog
Google Online Security Blog
T
Threatpost
Project Zero
Project Zero
Cyberwarzone
Cyberwarzone
月光博客
月光博客
G
GRAHAM CLULEY
P
Palo Alto Networks Blog
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
Help Net Security
Help Net Security
K
Kaspersky official blog
A
Arctic Wolf
D
Darknet – Hacking Tools, Hacker News & Cyber Security
C
Cyber Attacks, Cyber Crime and Cyber Security
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
T
Troy Hunt's Blog
Webroot Blog
Webroot Blog
SecWiki News
SecWiki News
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
H
Heimdal Security Blog
N
News | PayPal Newsroom
C
Cisco Blogs
博客园 - 叶小钗
C
CXSECURITY Database RSS Feed - CXSecurity.com
WordPress大学
WordPress大学
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed

人人都是产品经理

为什么你的产品找不到差异化?90%的失败都卡在第一步上(下) – 人人都是产品经理, 3年从30万到1300万用户、获2200万美元融资,这个AI教育产品用“抽卡”破解了获客难题 – 人人都是产品经理, 园区招商系统怎么做才能真正帮到去化?我加了这一个功能,推广链接转发400次阅读过万 – 人人都是产品经理, AI大事件:OpenAI发完网络安全模型又搞药物研发,小鹏汽车要抓”DeepSeek时刻” – 人人都是产品经理, 电商不是卖货,是一场更残酷的产品经理实战 – 人人都是产品经理, 没想到,活动营销又回来了! – 人人都是产品经理, 为何All-in海外KOC:一场关于AI时代窗口期的豪赌 – 人人都是产品经理, 重新理解企业的内部协作 – 人人都是产品经理, 苹果的 AI 战略到底是什么? – 人人都是产品经理, 医疗智能体·第2讲——合规护城河:等保、PIPL与HIPAA的架构实战 – 人人都是产品经理, 向量知识库五步法:从“答非所问”到“精准回复” – 人人都是产品经理, 鸿蒙PC三方库构建总指挥HPKBUILD(sha)库为例 – 人人都是产品经理, 何时该用LLM?AI产品经理的LLM设计指南 – 人人都是产品经理, 医疗信息领域的需求方、决策方、准入方以及关注点(二) – 人人都是产品经理, 即梦涨价:一场被误读的「傲慢」 – 人人都是产品经理, 面试AI PM必答题:Hermes和OpenClaw的区别,如何讲清楚业务价值 – 人人都是产品经理, AI的下一张船票:世界模型——AI产品经理必须理解的技术拐点 – 人人都是产品经理, 小红书做GEO,怎么让AI信你?记住这 3 个重要信息 – 人人都是产品经理, 5 家印度 AI 初创公司,看看印度 AI 再做什么 – 人人都是产品经理, AI项目跨团队协作:产品技术业务如何不打架 – 人人都是产品经理, Agentic Workflow(智能体工作流):让AI从”答案生成器”变成”数字员工” – 人人都是产品经理, lycium_plusplus 项目全景解读:OpenHarmony 三方库构建的“大管家” – 人人都是产品经理, 从爆单救火到前置履约:两套预采策略,把生鲜大促履约效率拉满 – 人人都是产品经理, 什么时候该补货?我用一轮数据做了一个决定 – 人人都是产品经理, 从“机械兜底”到“动态分流”:AI客服重复进线治理的4大底层逻辑 – 人人都是产品经理, 抖音拼效率,红书拼洞察 – 人人都是产品经理, 全民狂欢与退潮——为什么龙虾这波热潮冷却得如此之快? – 人人都是产品经理, Stripe押注!MPP重塑全球支付 – 人人都是产品经理, 小红书GEO:AI引用你的内容,不是因为你对,而是因为你看起来可信 – 人人都是产品经理, 前百度副总裁押注办公Agent,日韩付费爆发,Manus迎来强劲对手 – 人人都是产品经理, 企事业单位数字化的业务供需本质 – 人人都是产品经理, 医疗智能体·第1讲——医疗信息化重构:从“辅助软件”到“自主智能体”的范式转移 – 人人都是产品经理, 粉丝量就是空气!!! – 人人都是产品经理, 用户说“薯片碎了”,机器回“要买吗?”:意图识别的翻车与破局 – 人人都是产品经理, RAG召回准确率从75到90 我做对了这三件事 – 人人都是产品经理, AI大事件:Anthropic改收费、OpenAI发安全版、手术机器人纳入医保、阿里发布”秒悟” – 人人都是产品经理, Chrome 推出 Skills 新功能,Agent 重塑上网方式 – 人人都是产品经理, GitHub前创始人拿了a16z的1700万美元,做Agent时代的Git – 人人都是产品经理 拷贝或克隆其他 Flutter OH 项目到本地后无法运行 – 人人都是产品经理, 优惠券设计:优惠券创建 – 人人都是产品经理, 不用死磕文档!AI 助手 1 小时搞定飞书 CLI 安装 + 配置 + 知识库 – 人人都是产品经理, 用小龙虾做竞品分析报告:从2天到20分钟,我是怎么做到的 – 人人都是产品经理 用小龙虾做市场分析报告:搞懂这3个公式,市场规模不再靠猜 – 人人都是产品经理, 你早就在做 Harness 工程,只是不知道它叫这个名字 – 人人都是产品经理, Think Long就够?你可能想多了! – 人人都是产品经理, 货代SRM实战:供应商准入怎么做,才能让资源池不是通讯录而是可交付网络? – 人人都是产品经理, 如何做好用户调研?详解基本技巧 – 人人都是产品经理, 木鸟、途家、美团对打,平台春天行动开“卷” – 人人都是产品经理, 入职才发现公司不靠谱?小红书从业者求职避坑指南 – 人人都是产品经理, 美国 AI 三巨头联手封堵,中国 AI 突围之路在何方 – 人人都是产品经理, 小红书,放在需求对面的镜子 – 人人都是产品经理, AI 会带来大规模失业吗? – 人人都是产品经理, 从出单到补货前,我第一次犹豫:该不该放大? – 人人都是产品经理, Flutter 三方库鸿蒙化适配:5 种高效检查方式,快速判断是否需要适配 – 人人都是产品经理, 从做产品进阶拿结果:医美机构产品经理转岗科室运营经理 – 人人都是产品经理, 阿里HappyHorse,一场关于“Token经济”的阳谋 – 人人都是产品经理, To B AI:客户留存落地的观察与思考 – 人人都是产品经理, AI产品的“生命线”——数据采集、标注、清洗的产品化设计 – 人人都是产品经理, 谈谈AI Agent(二):当“孩子”能自己“体验世界”时,你该学什么? – 人人都是产品经理, UI/UX设计师的3层能力进阶,前两层让你活下来,第三层…才是真正的分水岭 – 人人都是产品经理, 2分钟 → 30秒,效率提升75%:B端产品经理如何用「规则枷锁」驯服AI幻觉? – 人人都是产品经理, 还没来得及学OpenClaw,来了个更猛的:Hermes Agent – 人人都是产品经理, AI日报:宇树机器人跑出10m/s刷新世界纪录 – 人人都是产品经理, 一文说透基金互金如何用情绪价值引导用户决策做转化 – 人人都是产品经理, 当浏览器开始替你”看”网页:AI 浏览器正在亲手拆掉它脚下的那张网 – 人人都是产品经理, 0代码,一天时间我Vibe Coding了个网站 – 人人都是产品经理, Hermes 和 OpenClaw 之争,Agent 的能力应该“装上去”还是“长出来”? – 人人都是产品经理 视频生成的“桌子”,字节Seedance 2掀完,阿里快乐马掀 – 人人都是产品经理, 从听不懂到完全信任:我的 Codex 深度产品体验 – 人人都是产品经理, 当虚拟偶像有了北京户口,与真人偶像还有什么区别? – 人人都是产品经理, 会说,远远比会做更重要 —— 对 SBTI 爆火现象的五层观察 – 人人都是产品经理, AI产品经理必看:当“搭环境”比“选模型”更重要,你的认知还在2024年吗? – 人人都是产品经理, 2026年AI产品商业化核心逻辑:从功能demo到规模化营收的3个必破卡点 – 人人都是产品经理, 京东围绕供应链,卷起裤腿下场的那些事儿 – 人人都是产品经理, SBTI一夜刷屏:它赢在了“太会说人话” – 人人都是产品经理, 折扣零售的真相:不是便宜,而是价值感! – 人人都是产品经理, 和甲方吵了一架,最后加钱做了——我学到的ToB产品经理生存法则 – 人人都是产品经理, 和几位小红书操盘手聊了8小时,干货全在这 – 人人都是产品经理, 智谱GLM-5.1登场,开源模型首超Opus4.6!!! – 人人都是产品经理 Anthropic收入凭什么反超OpenAI,终于有人把这事说清楚了 – 人人都是产品经理, 史上最有故事感的技术报告——Claude最强模型Mythos 7个极其精彩的细节 – 人人都是产品经理, 模型不是壁垒,Harness 也不是 – 人人都是产品经理, 抖音本地生活业务思考21 – 人人都是产品经理, Superpowers:145k Star的AI编码框架,到底是什么来头? Superpowers:145k Star的AI编码框架,到底是什么来头? – 人人都是产品经理, OpenAI 的路走错了,Anthropic Harness 解法启示:模型需要实践专科生 – 人人都是产品经理, 画原型图的前一步:设计站点地图 – 人人都是产品经理, 给 DeepSeek 的最后一封催更信 – 人人都是产品经理, 手把手教你用 Claude Code 搭建 AI 营销团队:5 个 Agent、12 项技能,独立完成研究、写作、设计全流程 – 人人都是产品经理, 你以为大模型在学语言?不,它在重新发明语言学 – 人人都是产品经理 所谓Skill,不过是AI时代的工业垃圾 – 人人都是产品经理, 聊一聊内容传播的几个方法 – 人人都是产品经理, 当平台开始吃掉生态:从 OpenClaw 被封杀,读懂 Anthropic 的这盘棋 – 人人都是产品经理, 你装了 10 个 AI 插件,Obsidian 还是一个文件夹 – 人人都是产品经理 关于AI智能体架构演进的系统性思考:从单体试水到多体协同的重构 – 人人都是产品经理, 当“人”变成Skill,我们又该何去何从? – 人人都是产品经理 Mythos 事件:前沿 AI 治理的意外实验 – 人人都是产品经理, 货代CRM:信用与风险管理怎么做,才能把坏账风险拦在放货之前? – 人人都是产品经理, 从HR收集自拍照到员工自助录入——我见证了园区人脸识别从”不可用”到”真好用”的全过程 – 人人都是产品经理 千问闯关AI混沌期:阿里画靶,吴嘉张弓,马云射箭? – 人人都是产品经理,
如何选择弹窗、抽屉或页面
愚者秦 · 2024-11-20 · via 人人都是产品经理

为了满足需求,通常可以使用不同的方法、手段来实现。如果结合用户的使用场景,必然有一个最优解。那么,如何在众多选择中找到最适合的选项?这篇文章,作者给到的方法可以参考。

一、类型介绍

在PC端项目中,用户触发了某个操作,当需要向用户展示新的内容时,有很多交互方式,弹窗、抽屉、页面就是其中典型的3种。下面来分析下3种交互方式的优势、劣势和使用场景。

1.1 弹窗

定义:分为模态和非模态对话框2种,常用的为模态对话框。

优势:在不离开当前页面的前提下完成操作,之前的内容不丢失。

劣势:弹窗空间有限,承载的信息量太少。

适用场景:

  • 展示简单内容,没有复杂操作。
  • 不丢失信息焦点,或者需要连续性处理信息的场景。
  • 更为详细的辅助说明,是对当前内容的快速扩展。

1.2 抽屉

定义:屏幕边缘滑出的浮层面板,分为模态和非模态抽屉2种。

优势:在不离开当前页面的前提下完成操作,之前的内容不丢失。

劣势:由于信息集中在一侧,导致视觉焦点不稳定。

适用场景:

  • 展示中等信息量的内容,如弹窗内无法承载的长表单。
  • 不丢失信息焦点,或者需要连续性处理信息的场景。
  • 在当前任务流中插入临时任务,创建或预览附加内容,如协议条款。

1.3 页面

定义:分为页面刷新、新开页面和覆盖式全屏弹窗3种。操作后,页面刷新会在当面页面进行刷新加载,加载结束后展示新内容;新开页面时会在保留原有页面,新的内容在新页面中呈现;覆盖式全屏弹窗也会保留原有页面,但会以全屏弹窗的形式覆盖在原有页面上方,关闭全屏弹窗时不会触发原有页面的数据刷新。

优势:页面刷新时用户的注意力不容易分散,更加顺畅的理解发生了什么;新开页面能够保留原有页面内容不丢失,便于多个页面的信息进行比较对照;覆盖式全屏弹窗也能够保留原有页面内容,且不会使用户丢失焦点。

劣势:页面刷新后,无法保留之前的内容;新开页面容易使用户丢失焦点,注意力分散,且交互存在不统一的问题(因为系统中大部分的操作在同一个页面中完成);覆盖式全屏弹窗需要提供明显的返回或关闭按钮,样式上会有其他页面存在明显差异。

适用场景:

页面刷新

  • 偏流程性的功能页面,前后操作存在关联和影响。如:下单—支付。
  • 同一层级间的内容切换,如:Tab页切换。
  • 用户具有明确目的性的操作,跳转页有利于锁定用户注意力。

覆盖式全屏弹窗

  • 需要保留当前页的操作不丢失。如:筛选过滤后的结果。
  • 需要对文件进行高清预览操作。如:Excel、PDF。
  • 需要对某类数据进行下钻分析。

新开页面

  • 页面内容没有关联性,且从逻辑上没有从属关系,相对独立。如:外链。
  • 存在多页面「比较」的场景,需要经常切换页面。如:淘宝商品详情。
  • 需要参照一些文档来帮助用户完成当前操作。如:帮助文档,规则说明等。

在我们日常设计中,常常抉择于:弹窗、抽屉、页面之间,总觉得使用某一种交互形式会更好,但是却说不出其中的原因,犹豫究竟应该使用那种展现形式,这需要我们通过具体的要素方法进行相应的衡量分析。

二、参考衡量因素

2.1 页面内容量

页面内容量决定呈现形式。

无论是弹窗、抽屉还是页面,究其本身就是一个信息内容的载体,因此选择如何使用,很大程度上取决展现内容量的多少。

内容量:通常包含页面当中文字、图片、视频、表格、以及各种复杂的交互,从内容承载量的角度来看,页面 > 抽屉 > 弹窗

但是不能从一个维度去思考页面内容量的多少,内容的宽度以及深度都是需要去分析。

  • 内容较深(表单为主):抽屉 > 页面 > 弹窗
  • 内容较宽(图片、视频为主):弹窗 > 页面 > 抽屉
  • 内容较深较宽:页面 > 抽屉 > 弹窗

综合来看,页面适合较多内容信息的承载,抽屉其次,弹窗最弱,但是在实际工作中还需要结合以下两点进行综合考量。

2.2 页面连贯性

页面连贯性直接决定用户的使用体验。

当浏览器新开一个标签进行展示时,页面的连贯性是最弱的,因为用户需要进行相对困难的操作才能返回到前页面,同时你也可以理解新开页面是较为独立的,不会受到前页面的干扰,而要决定页面连贯性的核心,还是以自身业务流程出发。

  • 流程变化连贯性:页面刷新 = 覆盖式全屏弹窗 > 抽屉 = 弹窗 > 新开页面
  • 拓展信息连贯性:抽屉 = 弹窗 > 页面刷新 = 覆盖式全屏弹窗 > 新开页面
  • 信息对比连贯性:抽屉 > 新开页面 > 弹窗 > 页面刷新 = 覆盖式全屏弹窗

综合来看,页面刷新或覆盖式全屏弹窗更适合体现流程变化,弹窗和抽屉更适合展示与当前页相关的拓展信息,抽屉更适合在当前页内做信息对比。

2.3 页面切换成本

页面切换成本决定用户使用效率。

当一个二级页面使用频率过高时,就证明用户需要在A与B页面之间进行来回切换,这时候考虑页面反复出现是否流畅,是否有切换成本的产生。

在微信APP中,因为用户需要经常切换,之前用户难以在几个页面来回跳转,而浮窗的出现,刚好能够解决这一问题,减少了页面间的切换成本。

而B端产品效率至上的原则,更需要思考用户怎样切换成本更低。

下面我们借用几个B端案例来解释参考衡量因素。

我举一个简单例子,现在你需要去设计一个客户详情页,但是因为客户详情页需要展示大量信息以及表格,同时还会有各种各样的交互行为:“点击、录入、甚至拖拽”,这时候你会怎么选择?

带着疑问,我们看看市面上不同的产品给出了完全不同的解决办法,当然他们每个产品的侧重点不同,导致最后的结果不同。

小满CRM — 抽屉形式,方便用户切换

小满是一款客户管理平台,在它的客户模块中,用户可以在当前页去设置不同的字段,所以每个详情会存在快捷操作等一系列方便用户的需求,导致抽屉的选择大于其他交互形式。其次在内容量上,可以从截图上看出,内容大多以文字记录为主,不会存在大段文字以及大图的情况,因此不会存在内容过宽的情况。

只是在字段数量上会有所增多,导致字段的高度会随之增加,因此满足上面要求的交互控件只有抽屉和页面。最后在连贯性与切换成本上,明显用户需要经常来回切换去对比客户信息以及销售的更进状态,因此只有抽屉能够满足让用户进行连贯的用户体验,因此抽屉最为合适。

Hubspot — 页面刷新及全屏弹窗形式,查看全量信息

Hubspot是国外一款非常出名的CRM,而且Hubspot是属于国外产品传入中国,因此在使用习惯上,更偏向于专注去做一件事,比如Hubspot上,在其客户详情页能够直接进行添加日程、拨打电话、发送邮件等几十项操作,并且一切围绕着Marketing、Sales展开,因此使得页面需要更加专注,需要看到更加全量的信息,再次国外Saas用户也是对完整流程的操作更加青睐(一个操作只干一件事),而国内喜欢有很多快捷操作,因此造成Hubspot都采取页面跳转的形式查看数据。

此外,Hubspot为了防止筛选场景下使用页面跳转导致原页面的筛选条件失效,也额外采用了不少覆盖式全屏弹窗的交互(可以理解为页面跳转的一种,但覆盖在原页面上方,不会销毁原页面)。

基于以上2个例子,我们会发现在交互选用上,往往会收到场景诉求、国内外用户习惯、操作成本等多因素影响,因此我们需要进一步的具体问题具体分析,在能够满足绝大多数用户场景诉求的前提下选用统一的交互方案。

三、选用判断思路

下图是基于通用场景和参考衡量因素整理的一些选用思路图。

看不清楚的请点击本链接跳转Figma >

专栏作家

愚者秦,微信公众号:feather-wit,人人都是产品经理专栏作家。先后任职于爱奇艺、字节跳动的一枚体验设计师,同时是兼职写小说的斜杠青年,善于总结和抽象设计方法,热衷于探索不同用户场景下的产品策略。

本文原创发布于人人都是产品经理,未经许可,禁止转载

题图来自 Pixabay,基于CC0协议