这 15 篇笔记的共同主线是"帮用户在浏览—比较—决策—下单"这条链路上少卡壳、多信任。电商 UX 的本质不是把货摆好看,而是降低用户做选择的认知负担——让对的商品被找到、被看懂、被比较、被信任。
别一篇篇孤立看,它们其实是同一条决策链的不同环节,我按链路重组成 8 块:
(谁在买)购物者分型 + 决策模型 → (怎么逛)商品列表页 PLP → (从哪进)类别页 → (看什么)商品照片 → (多选项怎么呈现)多变体 → (怎么比)比较表 → (信不信)信任与全球化 → (高端特例)奢侈品电商。
几个反复出现、值得先记住的关键词:PLP(Product-Listing Page,商品列表页)/ PDP(Product-Detail Page,商品详情页)/ facets(分面筛选,即左侧那一排可勾选的筛选条件)/ 补偿性 vs 非补偿性决策(先排除还是先权衡)。
一、谁在买:购物者分型 + 两种决策策略
电商不存在"平均用户"。同一个站点同时服务目标明确的人和闲逛的人,设计要素彼此打架,所以先认清"有哪几类人、他们怎么做决定"。
5 类电商购物者(General Ecommerce Shoppers)——心法:别为某一类优化到伤害其他类,而是各给一条顺手的路。
| 类型(EN / 中) | 他们要什么 | 设计要点 | 反例/陷阱 |
|---|---|---|---|
| Product-Focused 目标明确型 | 已做完功课/要补货,只想最快买到 | 强搜索、清晰商品名+高清图、历史订单一键复购、精简结账 | 塞推荐和长描述只会拖慢他 |
| Browsers 浏览型 | 闲逛找灵感、看新品折扣趋势,未必当下买 | "新品/热销/折扣"栏目、相关推荐、易分享(社交传播) | 没有可逛的入口,他逛两下就走 |
| Researchers 研究型 | 目标明确但不急,要深挖+比较 | 详尽描述(并解释术语)、比较功能、用户评论、购物车跨会话保存当收藏夹 | 缺材质/规格信息(StonewallKitchen 餐具没写材质 → 用户离站) |
| Bargain Hunters 折扣型 | 被"省了多少"驱动,可能为凑折扣多买 | 原价+现价+节省百分比并列(Hautelook)、优惠码便捷使用/自动应用、折扣专区 | 把折扣藏起来,等于关掉他的购买动机 |
| One-Time 一次性 | 买礼物/用礼品卡,对站点陌生 | 直观导航、详尽描述、信任信号(退货政策/安全)、访客结账 Guest Checkout 免注册(1-800-Flowers 正例) | 强制注册 = 直接劝退不打算回头的人 |
两种决策策略(Compensatory vs Noncompensatory)——这是整批笔记的"决策内核",决定你该给筛选器还是给比较表:
| 策略 | 含义(行内解释) | 用户何时用 | 该配什么工具 |
|---|---|---|---|
| 非补偿性 Noncompensatory | 用一条硬标准直接排除,不管别的优点多好(预算 $20,000 封顶,贵的一律不看) | 选项太多时先快速缩小范围 | 筛选器/分面 facets——颜色、材质、价格区间一勾就砍掉一批 |
| 补偿性 Compensatory | 综合权衡,优点能补偿缺点(笔记本性能强但重一点也接受) | 选项已减到约 5–7 个时精挑 | 比较表/比较工具——把候选并排看属性 |
心法:真实决策几乎都是"先非补偿再补偿"——先用筛选器把 200 个砍到 6 个(排除),再用比较表在 6 个里挑(权衡)。所以一个成熟 PLP 同时需要"左侧 facets 筛选"+"勾选若干件加入比较"两套机制。 理解用户处在哪一步,就知道该强化哪个工具。
二、怎么逛:商品列表页 PLP 的分页替代方案
PLP(含搜索结果页)是促成购买决策的关键环节。核心矛盾:一次给多少商品、用户怎么往下看更多。三种模式各有适用边界。
| 模式 | 何时用 | 优点 | 坑 |
|---|---|---|---|
| 传统分页 Pagination(下一页/页码) | 商品量庞大(如 Amazon),用户要精确控制定位 | 可达页脚、位置感清晰、能精准跳页 | 多一步点击;小目录用它显得啰嗦 |
| 无限加载 Infinite Loading(滚到底自动追加) | 每页少于 40 件 + 强筛选 + 明示总数 | 连续滚动无需点击、加载快时感知等待短 | 页脚不可达(退货/运费政策被一直推走,Louboutin 反例)、迷失方向(不知看了多少还剩多少) |
| Show More 按钮(看更多/加载更多) | 中小型目录、移动端(用户控流量) | 用户可控加载、页脚可达、不被动消耗流量 | 不给进度信息就等于半残 |
无论用哪种,这几条是硬要求:
- 给商品总数 + 加载进度:Lululemon 移动端写"正在查看 333 件中的 40 件",到底了就让按钮消失;Ann Taylor 用一个会随滚动变深的圆环当进度指示器。理想要告诉三件事:集合总数 / 已加载多少 / 还剩多少。Lowes 旧版连总数都不给 → 用户不知道要加载几次才看全。
- 保存浏览位置 Save the Shopper's Spot:用户从 PDP 用"返回"回到 PLP 时,必须回到原来的滚动位置(桌面、移动都要)。这点在无限滚动和 Show More 里最容易丢——Christian Louboutin 移动端做对了:即便无限滚动,后退仍保留位置(移动端开新标签比桌面麻烦得多,更需要)。
- 判断标准:能不能在"一页里看完整个类别"是合理的?如果一个类别商品少(Tory Burch 69 件),一页全放就行,不必无限滚动;不合理(量太大)就别用无限滚动,回退到传统分页。
心法:无限滚动不是"更现代所以更好",它用"省一次点击"换走了"页脚可达 + 位置感",只在小集合 + 强筛选下划算;商品一多,传统分页的"可控"反而是体验优势。
三、从哪进:传统类别页 vs 混合类别页
类别页(Category Page)是某类商品的"门厅",不直接列全部商品,而是过渡到 PLP:含类别描述、子类别菜单(配图)、该类的促销/推荐。问题是它多了一道中转,用错了就是负担。
| 何时该有类别页 | 何时别强塞 |
|---|---|
| 复杂商品需要教育:电子产品、智能手表——先讲清选购关键特性(Fossil 智能手表类别页解释不同类型;Lululemon 给复杂家用健身产品 MIRROR 单独类别页,但不是所有品类都给) | 简单品类:用户只想直接看货时,类别页是多余步骤(Bonobos 直接从"Pants & Jeans"进 PLP) |
| 大型多层目录需要导航:用图片快速传达子类别,利于国际用户/不熟文字分类的人(REI "Camp & Hike" 给子类别+热门品牌+选购建议) | —— |
两条规矩:
- 别强制用户走类别页:给直达 PLP 的路(全局导航用 Megamenu 放子类别直链;搜索结果直接出商品而非跳类别页)。反例:搜 "Sam Edelman" 被丢到品牌类别页而非商品列表,用户嫌多余。
- 优先考虑混合类别页 Hybrid:把类别页的教育/促销内容塞进 PLP 顶部,感兴趣的人读、不感兴趣的人直接往下看商品——一举两得。实现方式:① 列表页顶部加关键产品信息/营销内容(VRAI 在 PLP 顶放促销+教育内容);② 列表页提供子类别链接(Ann Taylor 在 "Pants" PLP 顶展示 Skinny/Straight 等裤型分类+说明);Lululemon "Women's Leggings" 页上半教育、下半列货。
心法:传统类别页的价值是"教育和导航",代价是"多一跳"。混合页把价值留下、把代价去掉——能用混合就别用传统中转页。
四、看什么:商品列表页的 6 条照片准则
PLP 上用户主要靠图做初筛,照片质量直接影响"扫描—比较—下单"效率。6 条准则(可当首字母清单记):
| # 准则(EN) | 心法 | Do | 反例 |
|---|---|---|---|
| 1 大 Large | 让商品占主体、减背景,移动端尤其 | 大到能辨别具体产品特征(Home Depot) | Helmut Lang 全身模特 + 白背景,图虽大但单品细节看不清(移动端更糟) |
| 2 一致 Consistent | 统一才好扫描比较——统一背景/方向/情境/光线(不是全一样) | Stuart Weitzman 鞋全白底+闪光+侧视,一眼判断跟高;Amazon 给卖家强制图片标准 | 风格各异到无法横向比 |
| 3 相关 Specific | 图要匹配用户的搜索词/筛选条件,增强信任 | 搜"红色凉鞋"返回的缩略图就显红色款(DSW) | 搜"绿色水壶"图却不显绿色版(REI),用户不信结果 |
| 4 动态 Dynamic | 悬停/交互时换图给更多视角,但别闪 | 设合理动画延迟,只在用户明确意图时换图;悬停显背面/材质/另一模特(Lulus) | 快速切换造成闪烁 |
| 5 情境 Contextual | 中小目录优先多样化模特展示上身/使用效果,在 PLP 就能切模特免进 PDP | Tiffany 悬停从戒指特写切到戴在手上 | Mignon Faget 珠宝只给特写不给佩戴效果,缺直观感 |
| 6 包容 Inclusive | 不同年龄/种族/体型的模特,既传价值观又帮用户预期自身效果 | Good American 提供 0/8/16 多尺码模特;Glossier 化妆品显示不同肤色效果 | 单一模特让人怀疑是否适合自己 |
五、多选项怎么呈现:多变体商品(Multiple Variants)
注:本批两篇笔记(《Design Guidelines for Selling Products with Multiple Variants》与《Why So Many Luxury Brands Are Terrible at Ecommerce》第 2 节起)内容高度重叠(同一组 Best Buy/Costco/Arhaus/Burton/Crate&Barrel/Coclico/Article/IKEA/Pottery Barn/Grandin Road 案例),已合并为本节。
第一性问题:这是"两个不同商品"还是"一个商品的两个变体"? 判断标准:
- 只差一个属性(颜色/尺寸/材质)→ 同一商品的变体 → 同一页面用属性选择器呈现。
- 描述显著不同(功能/规格不同)→ 不同商品 → 各自独立页面。
| 变体类型 | 怎么做 | 正例 | 反例 |
|---|---|---|---|
| 简单变体(颜色、尺寸) | 单一 PDP + 属性选择器(色样/尺寸下拉);PLP 上用色样/缩略图明示"有多种可选" | Burton 儿童雪装 PLP 显色样、PDP 选颜色;Article 床架页内切颜色看效果图;Crate&Barrel 半分色样(黑框+白座);IKEA/Pottery Barn 缩略图含多组合 | Arhaus 同款椅按"框架颜色×高度"拆成多个独立页,交错排在 PLP 里,用户以为只有一种颜色一种高度;"+更多"链接被测试者错过 |
| 复杂变体(功能/规格差异大) | 各自独立 PDP,用"相似产品/类似商品"模块互相推荐 | Costco 每个电视系列独立页 + 页底推荐相关系列 | Best Buy 用"系列选择器"下拉混装 CX/NanoCell 81 等差异巨大的型号,信息不足;"有什么区别?"链接藏在下拉下方,弹模态比较图表——测试参与者根本没发现 |
| 小型目录的特例 | 即便变体分散成独立页(目录小、变体并排展示影响不大,如 Coclico),PDP 仍应提供变体切换,别只靠"相关产品"模块 | —— | Coclico 每色独立页且不显其他颜色,只把别的颜色当"相关产品"——用户期望在当前页就能看选,被迫跳页且可能忽略 |
设计要点(综合):① 复杂变体独立列出便于研究比较;② 简单变体整合到单页用选择器;③ PLP 用高对比度的变体指示器(色样/缩略图)别让人错过;④ PDP 集中所有变体,别逼用户回 PLP 找。
心法:展示方式要匹配变体的差异程度——差异小就合并(否则用户错过组合、反复跳页),差异大就拆开(否则无法理解比较)。判断锚点是"用户会不会想横向比较"。
六、怎么比:比较表(Comparison Tables)
比较表是补偿性决策(见 §一)的最佳工具,把分散信息集中、减少翻页。但不是处处都该用。
何时需要 / 何时不需要:
| 该用 | 不该用 |
|---|---|
| 多因素权衡:服务套餐(网络/保险)、会员等级、定价、功能对比、学费、地点;可比同品牌也可比竞品 | 非互斥:可同时买多件(类似连衣裙),Amazon 给"快速加同款"而非比较表 |
| 补偿性决策场景(性能 vs 续航 vs 重量) | 简单商品:咖啡杯只看款式大小;廉价可替代品:纸巾、塑料笔(JetPens 反例);独特难比:艺术品(该给描述/视觉而非属性表) |
静态 vs 动态:
| 类型 | 何时用 | 注意 |
|---|---|---|
| 静态 Static(预先做好) | 选项少(≤5 个)、固定:Apple Watch 型号、会员/价格套餐 | 灵活性差,加新品要手改;在产品菜单旁放链接让人找得到(Apple Watch 二级导航旁挂对比表链接) |
| 动态 Dynamic(用户自选要比哪些) | 选项多(>5 个):Tesla 选车型对比 | 移动端建议用户最多选 3–4 项;选择方式用复选框(Home Depot)或按钮(Lowes);Garmin 的灰色幽灵按钮太淡不易察觉(但 PLP 顶"比较"按钮加入对比而非跳详情页的思路对) |
最佳实践清单:
- ≤5 项:静态最多 5 个,动态建议让用户最多选 3–4 个(移动端屏幕受限)。Apple Mac 对比表把人限制成只能比 2 项(连 3008×1692 大屏也如此)= 反例。
- 保持一致 Consistent:每个选项给相同属性,缺失就废了对比;别在单元格里秀个性(SmugMug 把广告属性写成 Zip/Zero/Zilch/Nada 四种花样,分散用户找差异的注意力)。
- 支持可扫描 Scannability:选项作列、属性作行,行标签在左、列标签在上;列内对齐一致;可用颜色编码(FitBit 给各列勾选不同色),但保对比度和可读性;Williams Sonoma 水平行标题不标准 + 窄段落难扫 = 反例。
- 粘性列标题 Sticky Headers:长属性列表滚动时固定列头(短期记忆有限,易忘哪列对应哪个产品);Adobe 年度计划表无固定列头 = 反例。
- 有意义的属性 Meaningful Attributes:只放用户真正关心的,别把所有元数据倒进去;把技术参数翻译成大白话(Amazon);属性含义用悬停 tooltip 解释而不堆文字(Dropbox)。
- 赋予用户控制 Give Control:允许隐藏无关行、只显"有区别的属性"(Best Buy "突出差异"开关把差异点标黄);提供简版("一目了然")+ 详版(SmugMug 3 套计划给极简表,完整表放另一页)。
- 移动端简化:减少每次显示的选项数;把列转成标签 Tabs 让用户点切(Shopify)——虽不能真正并排,但比滚动/切浏览器标签友好。
黄金法则:比较表的唯一目标是为用户减负、简化决策——直观布局、清晰内容、合理结构,让人轻松比完快速找到答案。
七、信不信 + 全球化:信任信号、模特多样性、尺码、UGC 翻译、社会责任、AR
线上购物比线下更难建立信心(摸不到、试不了),这一块讲怎么用各种手段把"信任"补回来,以及面向全球用户的本地化。
7.1 模特多样性(Diverse Models)——用户认可并赞赏种族/身材/年龄多样性,单一模特让人怀疑是否适合自己。
- 直接展示多样模特(Good American、Savage X Fenty 按尺码看不同模特上身;Glossier 色号对比工具看各肤色效果)。
- 让用户选模特(按体型/肤色):Good American 选相近体型增信心;Walmart "选择我的型号"输身高尺寸。但坑很多:① 兼容性差(并非所有产品支持,同类下不一致让人困惑);② 展示失真(Walmart 把衣服图叠到模特框架上而非实拍 → 误导,小码模特穿的甚至不是该尺码);③ PLP 缩略图不反映所选模特,浏览时用不上。
- 何时用选模特功能:交互成本高,绝大多数产品都支持时才值得;支持的产品少,不如直接在页面展示多模特照片。功能要在类别页和产品页显眼(高对比按钮/图标)。
7.2 国际尺码与产品测量(Size Guides)——尺码是国际购物者最大担忧(退货难/贵),不清晰就转站甚至弃购。
- 本地化站:同时显示本地尺码 + 原始尺码(Yoox 选美国配送后显 "44 (EU)" 对应 "11 (US)")。反例:SSENSE 中文版只给意大利/美国码不给中国码,中国用户得自己查 "IT 48–US 32" 等不等于 "170/72A"。
- 国际站:提供覆盖多地区的全面尺码表(Bloomingdale's 8 国鞋码 + 英寸/厘米长度),但必须说明测量方法(用户问"鞋内长还是外长?",没说明就降低信任)。
- 单表不够时三招:① 品牌特定尺码表(Farfetch:第一列原始品牌码、第二列目的地本地码、第三列其他国家参考)——因不同品牌偏大偏小,统一表(Shopbop)会被质疑;② 每个尺码对应身体测量值(Myntra 列胸/腰/臀,改进点是给范围如 32–34 英寸而非单值);③ Yoho 购给测量方法+产品尺寸。
- 移动端:别让用户左右反复滚(Shopbop 国际码在左中国码在右,来回滚 = 反例);把本地码和原始码放相邻列、可隐藏无关列、自动显示目的地国家本地码(Farfetch 正例)。
7.3 翻译用户生成内容 UGC(Translate User-Generated Content)——评论是决策关键,不翻译会流失销售。
- 缺翻译 = 流失:耐克中国站评论几乎全英文,不懂英语的用户直接弃购转站。
- 逐条翻译效率低:评论多时用户跳过非母语评论;但评论少或评分低时用户想看其他语言。Etsy 给"翻译评论"链接(译文显原文下,标"由 Microsoft 翻译");SHEIN 给每条都加翻译按钮(连本地语言评论也有)→ 易混淆。
- 量大时要"一键翻译全部 Translate All":Amazon 允许一键把所有评论译成英语(标"由亚马逊翻译")> Booking.com 只自动译精选评论、其余仍需逐条。
- 语言筛选:UGC 语言分布均匀或本地内容对他国吸引力有限时,提供语言筛选(Booking.com 可显/隐其他语言评论);但 Weverse 的筛选器可发现性差("全部"标签太模糊)。
7.4 社会责任(Socially Conscious Retailers)——消费者按品牌价值观做决策,能与同价值观用户建立情感联系。
- 三类常见且受欢迎的社会责任:慈善 / 环保 / 倡导(如鼓励投票)。
- 全站融入别只放专页:不是所有人会主动找(Toms 在结账提示"每赚 3 美元捐 1 美元",消除购买负罪感给积极情感;Levi's 用"可持续"蓝图标标可持续材料产品)。
- 谨慎对待争议话题 Polarizing:表态可能流失部分用户,但保持中立 + 积极信息通常可接受(Toms/Glossier 显中立投票提醒并链接选民注册,用户认为只是提醒参与、不带政治倾向,完全 OK)。
- 明确披露可持续实践:Mister Zimi 标可降解包装;Vrai 详述实验室培育钻石的环保优势,甚至给出节省污染物的统计数据增强说服力。
7.5 增强现实 AR(Augmented Reality)——COVID 期间因无法线下试用而实用性提升(Ulta 试妆免接触样品)。
- 最受益的品类:家居家具(确认是否契合空间、减退货,Target 预览台灯)、个性化穿戴(眼镜/化妆品按自身特点选,比模特图更贴合)、大型电器(功能为主但 AR 补搭配信息)。
- 精确性与真实性决定有用性:① "卡通化"渲染不可信(Kendra Scott 耳环试戴放不准、太卡通);② 比例/尺寸校准不准(Best Buy 电视放不准墙上、用户最后放沙发上认为没用);③ 交互性不足(Crate and Barrel 2D 视图免校准即用,但平面不按比例 = 没用)。过往负面体验会拉低用户对新工具的兴趣("操作太麻烦、结果不值得")。
心法:信任和全球化的所有手段,本质都在回答用户一个潜台词——"这东西适合我吗、这家店靠谱吗"。模特/尺码/翻译解决"适合我",社会责任/AR/披露解决"我愿意信"。功能做了一半(选模特不兼容、AR 校准不准、逐条翻译)往往比没做更伤,因为它制造了期待又落空。
八、高端特例:奢侈品电商(Luxury Ecommerce)
注:本批三篇奢侈品笔记构成一个系列(《Why So Many Luxury Brands Are Terrible》侧重多变体已并入 §五;《Luxury Shopping User Groups and Journeys》讲用户与旅程;《Applying Luxury Principles to Ecommerce Design》讲落地原则),本节合并后两篇。
4 类奢侈品购物者(基于 9 人定性研究:访谈 + 可用性测试,任务含买 Jimmy Choo 高跟鞋/Hermès 丝巾/Chanel 手袋等):
| 类型 | 特征 |
|---|---|
| 专业造型师 Professional Stylists | 为客户采购、高效、熟品牌,偏多品牌平台(Farfetch/Net-a-Porter)而非单品牌官网,一次买多件再退部分 |
| 橱窗购物者 Window Shoppers | 喜欢但买不起,多为年轻人,关注品牌动态等未来有能力 |
| 偶尔挥霍者 Occasional Splurgers | 为特殊时刻(婚礼/升职)买经典耐用品当投资/传承,决策谨慎重价格功能匹配 |
| 大手笔消费者 Big Spenders | 频繁购买、对多品牌高忠诚、当爱好,与销售代表建长期关系拿稀有商品 |
购物旅程 4 阶段(偶尔挥霍者 + 大手笔):发现 Discover → 考虑 Consider → 购买 Purchase → 使用 Use。
- 发现:偶尔挥霍者因特定需求主动找;大手笔常偶然遇见(店内/社媒新款)。
- 考虑 Consider 是核心也是奢侈品的软肋:两类人都花大量时间研究是否值得买,但品牌线上常表现差——信息不全(缺规格/材质/多角度图)、界面差(导航难、功能错误)、建议不如线下销售精准。
- 购买:满意度最高时刻(线下贴心服务/开箱体验),网购难完全替代奢华氛围。
- 使用:奢侈品是身份象征——偶尔挥霍者爱显眼 logo(LV),大手笔偏低调可控彰显(Burberry 双面大衣);品牌护理/维修服务巩固关系。
落地原则(Applying Luxury Principles):
| 原则 | 怎么做 | 反例 |
|---|---|---|
| 独家性/稀有 Exclusivity | 即便不在线卖也给完整产品详情(材料/尺寸/图)激发兴趣;给购买指导但别让人困惑;至少显示价格范围(绝大多数客户有预算考量) | Chanel 乐福鞋不在线卖、产品细节太少,没东西吸引顾客;Goyard 无价格无在线购买(但对熟悉品牌的大手笔不是问题) |
| 关注细节 Attention to Detail | 投资专业编辑+翻译;别中途打断(不合时宜的调查弹窗) | 拼写错、店铺定位器失效、打断体验的弹窗 |
| 独特身份风格 Distinctive Identity | 功能(导航/筛选)要清晰直观;用装饰性页面(秀场总结)强化视觉而非妨碍主功能;全站融入品牌历史/价值(Gucci 竹节包故事) | Supreme 导航与调性一致但严重伤体验;Tom Ford 全大写难快速阅读;Rolex 在视觉与易读间找到平衡(正例) |
| 深度个人联系 Deep Connections | 用数字工具增强而非取代人际(Gucci 数字展厅一对一视频重现线下);多沟通方式(视频/即时消息);账号整合活动邀请/护理建议/维修跟踪 | 用工具取代销售代表的人情味 |
心法:奢侈品电商的全部张力在于——既要数字体验高效好用,又不能稀释品牌的稀缺感和人情味。NNGroup 的判断很明确:别在"考虑阶段"省信息(那正是用户最需要支持的地方),激发兴趣、避免干扰、平衡设计与功能、用数字工具深化而非替代人际关系。
源自 NNGroup Topics / Ecommerce - 电子商务(15 篇)。导航/搜索/分面筛选的通用模式见 NNGroup 交互模式·导航与搜索(25 个模式 · 全局导航/本地导航/面包屑/汉堡菜单/上下文菜单/菜单 17 条/标签页/手风琴/页脚/粘性头/目录/页内链接/空间记忆/站内搜索/SERP/筛选/分页/树测试);表单/结账输入见 NNGroup 交互模式·表单与输入控件(19 个模式 · 表单校验/复选框/日期/步进器/参数控件/列表框vs下拉/开关/拆分按钮/取消vs关闭/链接标签/无密码登录/向导/拖放/加速器/计算器测验);说服式设计(社会认同/稀缺性/默认项)见 NNGroup 劝导式设计与行为心理学(说服六原理 · 认知偏差 · 注意力局限 · 信息觅食寻路 · 心智模型 · 信任层级 · 自我决定动机 · 隐私伦理边界 · 26 篇)。图片/视频(Louboutin/Ann Taylor/Tesla 录屏等)与原档保留在 sources。