这 15 篇出自 NNGroup『设计模式』栏目里关心"该不该做、对谁做、在哪做、用新介质怎么做"的那一类——不是讲某个组件怎么画,而是讲设计的价值观与场景边界。按主题重组成五簇:
一、设计伦理与欺骗模式(暗黑模式怎么识别、自己怎么不踩、危险并置怎么避) → 二、包容性与用户自主性(为多样人群设计、把选择权还给用户) → 三、全球化与跨文化(翻译还是本地化、语言切换、尺码、全渠道协作) → 四、新兴交互(VR / AR / GenAI 提示控件) → 五、UX 文案与推荐内容(文案长度、推荐引擎、明确区分选项)。
每节给核心心法 + Why + 反例。读者当产品经理看,术语第一次出现就地解释。
一、设计伦理与欺骗模式:别用"有效但缺德"的设计
这一簇是全篇的价值底座。三篇文章(欺骗模式总论 / 潜入 / 危险 UX)讲的是同一件事的不同切面:当公司目标和用户利益冲突时,设计师站哪一边。
1.1 什么是欺骗模式(Deceptive Patterns / Dark Patterns 黑暗模式)
定义:通过误导、干扰或情绪操纵,引导用户做出不符合自身利益、却让公司获益的行为。概念由设计师 Harry Brignull 于 2010 年提出,灵感来自"设计模式(design pattern,界面里反复出现的常见做法)"——黑暗模式就是被滥用的设计模式。
为什么会泛滥:① A/B 测试(把两版设计各给一半用户看、比转化率)流行,公司为冲转化率不断优化,部分设计过度盯转化而牺牲用户利益;② 模仿设计——抄竞品虽帮助标准化了一些模式,也让黑暗模式扩散。
一个近亲概念——妨碍设计 Sludge(可译"泥沼"):人为设置障碍,阻止用户拿到对自己最好的结果。典型就是复杂的 Cookie 同意弹窗——同意一键搞定,拒绝却要翻好几页逐项关掉。
5 类常见手法(产品经理记这张表,看到就警觉):
| 手法(中/EN) | 怎么坑用户 | 真实反例 |
|---|---|---|
| 阻碍 Obstruction | 故意加操作步骤,让某动作变难 | 亚马逊曾因 Prime 会员难以取消被起诉 |
| 视觉/文字陷阱 | 利用认知偏差或打破常见模式误导 | 双重否定文案;把"关闭"按钮挪到不常见位置 |
| 反复干扰 Nagging | 一遍遍弹同一个请求,直到用户屈服同意 | 反复请求某项授权 |
| 情感操控 Confirmshaming | 用恐吓/羞辱/内疚逼用户选 | 折扣弹窗的拒绝按钮写"我不喜欢省钱" |
| 偷偷添加/预选 | 自动往购物车加东西、默认勾选额外项,要用户手动取消 | (见下文"潜入") |
法律风险不是吓唬:随着监管加强,这类模式在多国已被禁止。欧盟 GDPR 要求明确用户同意;加州 CPRA(California Privacy Rights Act) 直接把"黑暗模式"定义为"损害用户自主权的界面设计"。也就是说,这不只是道德问题,是合规问题。
1.2 劝导 vs 欺骗:界线在"信息是否真实 + 是否藏了不利信息"
设计师最难的是区分劝导性设计(persuasive,合理)和欺骗性设计(deceptive,越界)。NNGroup 给的判据:
- 正例(劝导):LinkedIn Premium 注册页用社交证明(social proof,展示"你的好友也在用")+ 锚定效应(anchoring,划掉原价突出免费试用)——只要信息真实,就是劝导不是欺骗。
- 轻度越界:Booking.com 用稀缺性 + 社交证明,但把负面评价藏起来(默认只显示好评,要点"阅读更多"才看到完整评价)——给人"房间全是好评"的错觉,带轻微误导性。
判断方法——改良版认知走查(cognitive walkthrough,逐步代入用户视角过一遍流程),自问 9 题:
- 用户会不会无意中多花钱或多泄露信息?
- 用户为换取功能/体验付出的代价,公平合理吗?
- 每个选项的描述准确吗?
- 选项的呈现方式会不会被误解?
- 重要信息会不会被忽略?
- 用户能快速查看并选择所有选项吗?
- 用户的选择有没有被不必要的步骤阻碍?
- 用户是不是被迫仓促决策?
- 用户会不会因为拒绝某选项而感到羞愧/内疚?
心法:把这 9 题和最易受影响的用户画像(数字素养低、老人、急于完成任务的人)绑在一起审,因为黑暗模式的伤害往往集中落在弱势用户身上。怎么验证:用户测试能抓出明显的欺骗(用户会当场不满),但轻度欺骗用户常察觉不到,所以设计师必须主动自查,不能只靠测试兜底。
1.3 潜入 Sneaking:让用户"在不知情中同意"的三种型
潜入是 5 类手法里"偷偷预选"那一类的展开,核心是牺牲透明度换短期销量/订阅。三种型 + 配套正反例:
| 型(中/EN) | 怎么潜入 | 反例(坏) | 正例(好) |
|---|---|---|---|
| 强制续订 Forced Continuity | 试用/订阅后不明确提醒就自动续费 | Spotify 高亮免费试用、续费写在小字副标题;首个付费月后才出账单、后续扣费不通知(社区有 235 票帖子质疑"是不是故意让人忘记取消") | Apple iCloud+ 每月发邮件交易通知,让用户能重新评估去留 |
| 隐藏费用 Hidden Costs | 税费/服务费等拖到结账才显示 | Ticketmaster 首次下单结账时才看到手续费;Airbnb 先显示不含税初始价、结账才加清洁费+服务费 | United 联合航空从选航班那一刻起就显示含税总价 |
| 偷偷入篮 Sneak into Basket | 未经同意把商品/选项加进去 | GoDaddy 默认给两年域名注册(用户只要一年);LinkedIn"轻松申请"里预勾选"关注该公司"复选框,导致用户被动收到大量更新 | —— |
为什么长期是亏的:潜入短期能拉销量,但长期损害品牌信誉和用户忠诚度。指望用户"仔细检查设置"来自保是不现实的——多数人没时间没耐心。所以责任在设计方。
1.4 危险 UX:高危操作别贴着无害操作放
这是一类不一定有恶意、但后果同样严重的问题:把"破坏性操作"(删除、清空、归档、丢弃更改)和"无害操作"放得又近又像,用户手一滑就出事。
核心心法:预防错误 > 帮用户改错。哪怕撤销再方便,设计目标也应该是"让用户根本不出错"。因为用户在任务中途犯错,得打断当前任务去补救,即使只花几秒,也在消耗宝贵的认知资源(cognitive resources)。
反例(都是真实产品):
- Firefox 拼写检查菜单:"添加到字典"紧挨"修正拼写",用户可能把错拼永久存进字典。
- Ubiquiti UniFi:"添加类别"和"清除类别"位置相邻、视觉几乎一致,误点清除会丢大量数据。
- ThinkorSwim 炒股 App:"删除"和"确认并发送"相邻,误点直接影响交易。
- Trello 移动端:溢出菜单里"关注"和"归档卡片"挨着,误操作把卡片归档了。
三种防误操作手法:
| 手法 | 原理 | 典型做法 |
|---|---|---|
| 1. 形状编码 Shape Coding | 用物理形状/触感无意识区分(源自二战:Alphonse Chapanis 发现 B-17 轰炸机起落架和襟翼控制杆形状相同,飞行员紧张时混淆,改了形状就少出错) | 数字界面没法做触感,退而求其次靠下面两条 |
| 2. 视觉信号 | 用颜色、图标、文字大小、对齐区分功能 | Grammarly 把"拼写建议"和"添加到字典"用颜色+图标+对齐区分开 |
| 3. 拉开距离 | 给高危操作和其他选项之间加间距 | Sonos iOS 在"转移系统所有权""忘记当前系统"等高危项间加额外空白 |
Why 拉距离有用:Fitts 定律(Fitts' Law)——目标越远/越小,点中所需时间越长。给高危按钮多加几毫秒的"够到成本",就能显著降低误触概率。这是把可用性原理(通常用来"让按钮更好点")反向用——故意让危险按钮更难点。
二、包容性与用户自主性:为多样的人设计、把选择权还给用户
这一簇两篇:包容性设计是"考虑到不同的人",用户自主性是"让每个人按自己的方式用"。
2.1 包容性设计 Inclusive Design,先分清三个易混词
| 概念(中/EN) | 目标 | 范围 | 何时用 |
|---|---|---|---|
| 无障碍设计 Accessibility | 让有听觉/认知/身体/视觉障碍的人能用 | 窄,以 WCAG(网络内容无障碍指南)等标准为依据 | 是底线、最低要求,不是终点 |
| 通用设计 Universal Design | 用单一体验满足尽可能多的人 | 适配多样化成本高 | 更适合物理环境(造一个东西所有人都能用) |
| 包容性设计 Inclusive Design | 用多样化设计适配不同需求,营造归属感 | 涵盖无障碍+年龄+文化+经济+教育+性别+地理+语言+种族 | 更适合数字产品(按需调整成本低) |
一句话区分:无障碍是"残障可用"(法定底线),通用设计是"一套通吃",包容性设计是"理解差异、分别照顾"。数字产品里包容性设计更常用,因为调整界面比改造物理世界便宜。
5 类包容性设计模式:
| 模式 | 做法 | 反例对照 |
|---|---|---|
| 老年用户可读性 | 提供字体放大、暗模式 | 81 岁参与者在《环球邮报》因文字太密、行距紧,反复找不到读到哪;《华盛顿邮报》提供文章字体放大控件 |
| 全球姓氏输入 | 允许连字符/特殊字符/重音 | TaxSlayer 受美国国税局(IRS)格式限制无法识别;Facebook 设帮助页让无法用真名注册的人申诉 |
| 多样身份选项 | 性别/种族/性取向给包容选项;种族用多选框代替单选、加"两种或更多种族" | Tinder 提供 30 多种自定义性别身份 |
| 包容筛选 | 按真实需求维度筛 | Pinterest 按发型类型(卷发/直发)筛;Sephora 按年龄段筛护肤品 |
| 多元插图 | 插图反映用户群多样性 | 过度简化的"无肤色"插图反而强化排斥;Airbnb、Atlassian 都改过插图风格 |
心法:别用自己的视角设计("我的产品适合所有人"是危险假设)。三条实践建议:① 用户研究招募保证样本多样性;② 教育利益相关者,带他们参与研究、看真实用户反馈;③ 主动识别排斥因素(连插图风格单一都可能传达排斥)。
2.2 用户自主性 User Autonomy:别把用户当赶进牛栏的牛
核心命题:自主权(能按个人偏好使用界面)是人的基本需求。强迫用户走固定流程,会让人感到被束缚——文章用了个生动比喻:像被赶进牛栏(cattle chute)的牛,只能往一个方向走。注意 CPRA 直接把"损害用户自主权"列为黑暗模式判据,所以这一节和第一簇是连着的。
三种提升自主性的方法:
| 方法(中/EN) | 怎么做 | 注意/反例 |
|---|---|---|
| 定制化 Customization | 表层定制(改主题色,不动工作流,带愉悦感,如 Facebook Messenger 改对话主题——但字体布局保持一致护品牌);任务相关定制(Google Drive 列表/图标视图切换、Chrome 缩放);深层定制(加速器 accelerators / 自定义快捷键,适合复杂应用) | 多数用户不会花时间定制,所以别把产品的好用建立在"用户会去定制"上 |
| 可扫描性 Scannability | 用信息丰富的标题/小标题让用户快速判断要不要读(眼动研究:用户在线时间短,靠扫描决定深读) | 正例 Morning Brew 简报每段加粗标题+表情符号;反例:整段无标题,逼用户全读才知道有没有兴趣。难扫描=没自主权(要么全读要么走) |
| 时机与顺序 Timing & Sequence | 让用户自选何时、按什么顺序交互 | Grammarly 允许推迟初始个性化(不强制);Khan Academy 让用户自选课程顺序(动词/代词/修饰语先学哪个);反例 Cappella 大学强制先填个人信息才给项目详情(典型牛栏) |
强制教程通常无效:NNGroup 研究显示强制性 tutorial 一般不提高效率,反而增加任务难度。
平衡自主性的两条提示(自主≠选项越多越好):① 坚持几个选项——人的思维有限,给几个有意义的选择就好,别 overwhelm;② 提供有意义的默认值(meaningful defaults)——为主要用户群设好默认,同时允许灵活改。一个范例:支付小费界面给"无/15%/20%/25%"快捷选项很好,但额外加一个"自定义金额"入口,就能既保留建议、又把完全自主权还给想给其他比例的人——"增加自主性不是增加选项数量,而是在关键处给选择"。
三、全球化与跨文化:翻译还是本地化、语言切换、尺码、全渠道协作
这一簇四篇,讲产品走出本国市场要处理的事。
3.1 翻译 Translation vs 本地化 Localization:两档调整力度
| 方式 | 改什么 | 成本 | 例子 |
|---|---|---|---|
| 翻译 Translation | 只换界面语言,视觉设计不动 | 低 | Shekou Woman 多语言站,中英版几乎一样 |
| 本地化 Localization | 视觉呈现 + 内容策略都贴合目标文化 | 高(要研究员/设计师/内容编辑协调) | Pharmacy Online 中英版导航结构、视觉都不同;H&M 中美版相似但模特和促销本地化(美版推新系列、中版强调春节) |
决定本地化力度的 5 个因素:
- 受众异质性——同语言≠同文化(法国 vs 加拿大法语用户习惯不同;Apple 法/加法语站内容完全不同)。某文化群体占比高,就该为其做本地化版本。
- 一般文化差异——用霍夫斯泰德文化维度(Hofstede's Cultural Dimensions) 6 个维度量化(见下表)。
- 文化差异对产品使用的影响——看使用频率(低频不必高度本地化,但若违背本地心智模型则低频也会频繁出错)、场景、多人协作(协作类比单人休闲类更需本地化)、本地竞品差异(中国流行微信/支付宝登录,邮箱注册少用)。
- 品牌形象——适当"异国风情"能加强高端形象(Bose 中文站低信息密度让中国参与者觉得它是奢侈品牌);本地化元素如微信公众号二维码能增强信任(Amcal 案例)。
- 目标市场潜在价值——本地化耗资源,要算 ROI(投资回报率),优先做最值钱的市场和组件。
霍夫斯泰德 6 维度(判断两个文化差多大,差越大越要本地化):
| 维度(中/EN) | 含义 | 高分文化 vs 低分文化 |
|---|---|---|
| 权力距离 Power Distance | 是否接受权力不平等分配 | 高(墨西哥/印度,尊重权威) vs 低(丹麦/瑞典,讲平等) |
| 个人主义 vs 集体主义 | 重个人利益还是群体利益 | 个人(美/英) vs 集体(中/日,群体>个人) |
| 男性化 vs 女性化 | 重竞争成就还是关系生活质量 | 男性化(日/德,重成就财富) vs 女性化(瑞典/挪威,重关系平等) |
| 不确定性规避 Uncertainty Avoidance | 对模糊/不确定的容忍度 | 高(希腊/葡萄牙,要严格规则) vs 低(新加坡/丹麦,接受新变化) |
| 长期 vs 短期导向 | 重未来还是重当下传统 | 长期(中/韩,节俭储蓄) vs 短期(美/墨,重即时结果) |
| 放纵 vs 克制 Indulgence vs Restraint | 对享乐的态度 | 放纵(美/澳,自由满足欲望) vs 克制(俄/印,抑制满足) |
心法:不管本地化到什么程度,"自己不是用户(you are not the user)"始终成立——要靠实地研究(情境访谈)+ 国际用户可用性测试验证假设。资源有限的小公司:先做覆盖多数国际用户的语言版本(主要靠翻译)、减少文化特定元素走通用惯例(电商用图像引导)、再为最值钱市场做本地化。
3.2 语言切换器 Language Switcher:电商出海的 6 条技巧
先分清两种切换器:
- 语言切换器 Language Switcher:服务所有讲同一语言的人,不分国别(Kidsroom 的英文版美英澳通用)。
- 国家切换器 Country Switcher:为特定国家做本地化(语言+货币+内容),多见于大型跨国企业(Look Fantastic)。
6 条技巧:
| # | 技巧 | 要点/反例 |
|---|---|---|
| 1 | 默认匹配浏览器语言 | 自动检测省去手动切换(Net-A-Porter 按浏览器自动显中文+人民币);检测不到时让用户在首页自选国家/地区(Zara 的做法,且每国版本提供多语言照顾外国游客) |
| 2 | 桌面端放顶部角落 | 用户先找右上角、找不到转左上角;反例 Feelunique 把国家切换器放页面底部,中国参与者完全没发现有中文站 |
| 3 | 移动端放首屏可见处或导航菜单内 | 屏幕小,藏深了发现不了(Amcal+ 桌面放顶部、移动放菜单内) |
| 4 | 用该语言本身的名字显示 | 写 Español 而非 Spanish、Deutsch 而非 German、Français 而非 French(Burberry 移动站做对);Airbnb 还列国名+对应语言并按浏览器/历史给建议 |
| 5 | 用符号组合表示切换 | 国旗+货币符号+语言标签组合更易识别;反例 ASOS 只用一个比购物车还小的旗帜图标(默认香港),很多人认不出是旗帜;正例 Selfridges 用地区旗+货币+语言名组合 |
| 6 | 允许语言/国家/货币分别独立设置 | 有些国际购物者想分开调(AliExpress 允许独立选发货国、货币、显示语言) |
一个底层洞察:中国电商研究里,用户进外语站会先找中文版,尤其品类术语不熟时(想买鱼油的用户怕看错药品术语,看到澳洲药房有中文版很高兴)。提供中文版/中国站对国际品牌是加分项。
3.3 国际尺码 Size Guides:本地码 + 原码 + 身体维度
国际购物者最大的焦虑是尺码不符(退货还难)。帮用户选对尺码能提销量、降退货率、减客服。
| 场景 | 该怎么做 | 反例 |
|---|---|---|
| 本地化站点 | 产品页默认同时显示本地码 + 原始码 | Yoox 检测到美国用户就显美码+原码(免得被欧码 44 吓到);反例 SSENSE 中文站只给 IT 48 – US 32 无中国码,用户困惑 |
| 国际站点 | 提供覆盖更多地区的全面尺码表 | Bloomingdales 鞋码含美/欧/中码+鞋长,但没说明测量标准,用户不知怎么量 |
| 单一尺码表不够用时 | 给品牌特定尺码表(各品牌尺码偏大偏小不同) | Shopbop 所有品牌共用一张表(不准);Farfetch 每商品给品牌专属指南、可切换他国码 |
| 给身体维度 | 列各尺码对应胸围/腰围/臀围 | 印度 Myntra 这么做,用户按自己尺寸选;Yoho Buy 还给测量方法+产品尺寸 |
| 移动端 | 让尺码表在手机上好看,别左右滚 | Shopbop 移动端国际码和中国码分列左右两侧,用户反复横滚很烦;Farfetch 移动端按用户所在地优先显本地码 |
心法:本地化站点直接在产品页显本地码,减少用户去翻尺码表的步骤;国际站点给全面表并优化移动端(移动流量大时尤其重要)。
3.4 全渠道协作 Collaboration:让"不相关的设备"配合干活
先给背景:NNGroup 认为高质量全渠道(Omnichannel)体验有 5 个要素——一致性 Consistent / 上下文优化 Optimized for context / 无缝 Seamless / 协调 Orchestrated / 协作 Collaborative。本篇专讲第 5 个。
定义:协作 = 让两个或多个通常不相关的设备/渠道协同工作以达成目标。注意它是 5 要素里唯一非必备的——没有协作不影响基本体验,但用好了能加分。
两大用途:
| 用途 | 原理 | 例子 |
|---|---|---|
| 降低互动成本 Reducing Interaction Cost | 互动成本 = 用户为达目标付出的心理+物理努力总和;借另一个辅助渠道的资源来降目标渠道的成本 | 微信扫码登录(手机帮桌面省去输密码);Dropbox 扫码快速装+同步;TurboTax SmartLook 让税务专家直接进工具帮你报税;Keynote 媒体菜单"拍照/加草图"自动蓝牙调附近手机 |
| 丰富现有互动 Enriching | 加第二个渠道让体验更丰富,常靠"第二屏体验 Second-Screen" | Netflix 手机加观看列表→电视快速访问;华盛顿奇才队"虚拟比赛日"让在家球迷用手机看球员阵容/统计/实时聊天;Anova 低温烹饪锅手机监控进度;博物馆 App 给现场游客补充内容;Giant 超市"SCAN IT"自助扫码免排队结账 |
数据:据 Facebook 研究,94% 的电视观众看电视时会用手机——这就是"第二屏社交(second-screen social)"的行为基础,电视节目和营销方已在利用它。
心法:① 别为协作而协作(强行加会被当成"不必要的花招");② 第二屏方案必须让用户看得见(用户不知道有这功能就享受不到)。通过任务分析和上下文调研找痛点和"用户已经在用多设备凑合"的场景,再用品牌方案接管。
四、新兴交互:VR / AR / GenAI 提示控件
老原则在新介质里大多还成立,但落地手法要变。
4.1 VR 虚拟现实:十大可用性启发式照样适用
Alita Joyce 把 Jakob Nielsen 的十大可用性启发式(完整 10 条见 NNGroup 可用性测试与十大可用性启发式(10 条启发式完整表 · 复杂应用应用 · 用户愉悦层级 · 测试方法 5 人法则/招募/远程/任务场景/分步任务/态度vs行为/4步分析/小样本误差/竞争性评估))套到 VR(以 Oculus Quest 平台为例)。结论先行:VR 虽是独特介质,10 条原则仍然适用。逐条要点:
| # 启发式 | VR 里的正例 | VR 里的反例 |
|---|---|---|
| 1 系统状态可见性 | Oculus Quest 导航菜单显头盔/手柄电量(悬停看精确百分比);Bogo 用心形图标显刷牙任务进度 | —— |
| 2 与真实世界一致 | Immersed 虚拟会议室的白板/锁图标模仿现实功能;Bogo 遵循真实互动逻辑 | —— |
| 3 用户控制与自由 | Beat Saber 定制头像时有取消/返回 | ESPN 选电视提供商界面缺返回键,用户只能退出重启 |
| 4 一致性与标准 | Oculus 设置用标准开关设计 | Gravity Sketch 滑块内部一致但不遵行业标准开关,增加交互成本 |
| 5 错误预防 | Oculus "Guardian"边界预警防物理碰撞;Nat Geo VR 离开未完成活动前确认 | —— |
| 6 识别优于回忆 | Nat Geo VR 摄像功能直接显按钮标签 | Oculus 无标签图标要悬停才知道,加记忆负担 |
| 7 灵活性与效率 | Beat Saber 可自定义并保存偏好;Firefox Reality 可调浏览器窗口大小 | —— |
| 8 美学与简约 | YouTube VR 主界面简洁聚焦 | Pokerstars VR 菜单杂乱干扰 |
| 9 帮助从错误恢复 | —— | Firefox Reality 语音错误只说"请重试"无具体方案;Pokerstars VR 给手势替代法但不解释为何失败 |
| 10 帮助与文档 | Immersed 多渠道支持(视频/FAQ/实时);Nat Geo VR 任务中实时帮助 | —— |
4.2 AR 增强现实:基于 11 人测试,核心问题是"发现不了、看不清、滥用"
这是 AR 用户体验三部曲的收官篇(前两篇讲用户引导和校准),对 11 名参与者做可用性测试。
用户现状:多数人对 AR 不熟,甚至和 VR 混淆;有游戏经验的人上手快(DinosAR 案例:游戏老玩家立刻看懂图标和右下角操纵杆,其他人不行);大家对潜力兴奋,但质疑某些应用是否真需要 AR。
最好的 AR 体验是沉浸+互动+教育:用户尤其喜欢教育类(Kinfolk 教历史人物、ARLOOPA 适合儿童教育、Gettysburg AR 历史沉浸、Civilization AR 可交互可了解)。
AR 不该滥用(AR Should Not Be Gratuitous):必须增加实际价值,否则负体验。反例:Google Arts & Culture 在客厅里看名画《摩西与十诫》的 AR 模式对用户毫无帮助甚至不适;没资源做高质量 AR 就干脆不做。
提升 AR 体验的建议:
| 建议 | 要点 | 反例 |
|---|---|---|
| 提升可发现性 | 电商里 AR 功能要明确视觉标记+筛选,别用模糊图标、加清晰标签 | Etsy 产品列表不标哪些支持 AR,用户得逐个点进详情页查;Bob's Furniture 的 AR 筛选图标对比度低+不熟悉,用户花约 1 分钟才发现 |
| 适应用户环境/限制 | 考虑情境,提供非接触交互(语音/手势);注意眼镜等因素 | Ulta 虚拟试妆:参与者戴眼镜挡住眼影滤镜,摘了眼镜又看不清手机屏 |
| 清晰指令与标识 signifiers | 多数人无 AR 经验,指令要显眼清晰 | 亚马逊用鲜明颜色+简明指令逐步引导(成功);Mars 任务 App 给简单分步说明(好);Best Buy 用户按说明移动 AR 物体却很困难(坏) |
| 文本/控件跨背景可见 | 复杂背景下加实色底确保清晰 | JigSpace 白字可见度差;Civilization AR 白字在浅背景上难读 |
| AR 功能自给自足 | 让用户在 AR 内调尺寸/颜色,减少重新校准 | 亚马逊允许在 AR 内换沙发颜色、用尺子看尺寸,不用退回产品页 |
| UI 别干扰 AR | 减少控件占用空间 | 亚马逊覆盖层挡住 AR 场景,用户很晚才发现能下滑最小化 |
| 考虑音频讲解 | 设备远时也能传指令,且提升沉浸感 | Gettysburg 音频讲解深化历史体验;JigSpace 用户更想要音频而非书面叙述好专注视觉 |
4.3 GenAI 提示控件 Prompt Controls:给聊天框加"按钮",别只让用户硬打字
定义:提示控件(Prompt Controls)是围绕 AI 聊天输入框的 UI 组件(按钮、工具提示、切换、卡片、菜单),用来加速和补充文本输入,帮用户快速生成提示、澄清歧义、获得灵感——把纯文本框升级成"混合 UI(hybrid UI)"。
4 大用途:
| 用途 | 解决什么 | 例子 |
|---|---|---|
| 1 提高功能可发现性 | 用户不知道机器人能干啥/支持什么输入 | 反例 ChatGPT 支持多种文件类型但用户得问系统才知道;正例百度文心一言悬停上传图标显支持文件类型和大小限制 |
| 2 教育用户+提供灵感 | 新用户不知从何问起 | SparkDesk 在输入框上方列插件(如智能 PPT 生成);Claude 提供对话开场白卡片;ChatGLM 提供提示库侧边栏可点可改 |
| 3 设定对话约束 | 限定范围/指定输出格式 | Perplexity "Focus"功能把搜索范围缩到 Reddit/YouTube/学术;文心一言 Treemap 插件指定图表类型 |
| 4 促进后续交互 | 研究显示约一半对话含后续操作 | 编辑提示/朗读/复制/重新生成/反馈/换模型;ChatGLM 可"引用"上条答案片段;Gemini "修改响应"给"更简短"等一键后续;Perplexity 推荐后续问题 |
最佳实践(踩坑点产品经理重点看):
| 实践 | 正例 | 反例 |
|---|---|---|
| 用标准图标 + 文字标签/工具提示 | ChatGLM 回复底部图标简明、悬停有 tooltip | 文心一言移动端魔法棒图标让所有参与者困惑(其实是提示示例);旧版 Bing 用扫帚图标表"开新对话"无标签难懂,新版改成带加号的语音气泡+"新主题"标签 |
| 清晰命名功能,别模糊/品牌化 | —— | 文心一言插件叫"Think Carefully(仔细思考)"让人不懂干啥 |
| 按功能分组提示控件 | Perplexity 把"Focus"和"Attach"用简洁标签分开 | 文心一言插件中心一堆插件无分层,找不到也发现不了 |
| 遵循交互惯例 | ChatGPT 移动端长按提示出标准上下文菜单(选文本/复制/编辑) | ChatGLM 移动端长按劫持了常规复制操作,用户没法只复制片段 |
| 错误信息放在注意力焦点附近 | —— | 文心一言"文件过大"错误显示在屏幕顶部小覆盖层,而用户刚操作的上传按钮在底部,离得太远 |
这条和第 4.1/4.2 一脉相承:无标签图标是 VR/AR/GenAI 三处反复出现的同一个错——见 NNGroup 可用性测试与十大可用性启发式(10 条启发式完整表 · 复杂应用应用 · 用户愉悦层级 · 测试方法 5 人法则/招募/远程/任务场景/分步任务/态度vs行为/4步分析/小样本误差/竞争性评估) 第 6 条"识别优于回忆"。
五、UX 文案与推荐内容:写多长、怎么推、怎么把选项讲清楚
5.1 文案长度:长 / 短 / 微三档怎么选
先分清两个词:内容 Content = 界面里一切信息(含音视频、用户生成内容 UGC、图片);文案 Copy = 内容的子集,特指组织撰写的文字(不含用户生成的,如亚马逊评论、社交留言)。文案按长度分三档:
| 类型(中/EN) | 定义 | 何时用 | 示例 |
|---|---|---|---|
| 长文案 Long-Form | 3 段以上,连贯完整单元 | 传达复杂信息、提供上下文、提升 SEO、用户高度关注时(简短反而降信任) | 政策、技术文档、帮助页、报告/案例研究、产品页、关于我们、提案书 |
| 短文案 Short-Form | 2–3 段,围绕一个核心观点 | 快速传达一个主要信息点;拆解长文案 | 用户引导、稍长摘要、产品描述、精炼使命陈述(红十字会用卡片+短文案介绍献血类型,取代旧长文) |
| 微文案 Microcopy | 少于 3 句 | 快速提示、引导操作、传达关键信息;构成界面大部分文字 | 链接/按钮标签、表单提示、控件名、页标题与元描述、错误提示、工具提示(IBM 首页几乎全是微文案) |
心法/Why:三档互相依赖,不能单用。长文案虽不易吸引注意,但多步骤流程/技术问题只有它能讲全;长文案内部会嵌标题(微)、FAQ 折叠栏(短)优化结构。短文案是当今主流(用户注意力低),但替代不了复杂主题的长文案、也替代不了执行操作时的微文案指引。微文案数量最多,但独立撑不起完整体验——它的作用是"协助完成任务",不是信息核心。长文案还利好 SEO(自然嵌关键词、延长停留、支持内链;医院骨科着陆页嵌"马里兰/华盛顿特区/弗吉尼亚"提可见度)。
5.2 推荐内容 Recommended Content:推荐引擎的 5 条准则
好的推荐能帮用户快速找到感兴趣的东西又不信息过载,提升参与度和忠诚度。
| # 准则 | 心法 | 正例 vs 反例 |
|---|---|---|
| 1 个性化推荐置顶 | 用户更爱"和自己相关"的内容,别埋在页面底部;且应贯穿整站不只首页 | 正:Amazon/Eventbrite 首页顶部显个性化推荐;反:Sephora "为你推荐"在首页很低位置,要翻到底 |
| 2 标明数据来源 | 让用户知道推荐依据(历史行为/偏好),增可信度;用简短具体描述 | 正:Netflix "因为你看过某某";反:Amazon Video "基于您观看过的内容和更多"——"更多"含义不明令人困惑 |
| 3 推荐分明确类别 | 别杂乱堆叠;具体分类比宽泛推荐更受欢迎 | 正:Spotify 按音乐类型分的"每日混音"比综合"每周发现"更受用;反:Eventbrite 把职业活动和个人活动混着推、Amazon Kindle 书籍推荐太杂难管理 |
| 4 提供反馈机制 | 给点赞/点踩/编辑历史的入口,提升参与感和个性化 | 正:Amazon 可查/编辑浏览历史、Netflix 可移除观看记录并说明不再用于推荐;反:Spotify Discover Weekly 部分用户无法对不喜欢的歌点踩,推荐无法优化 |
| 5 快速更新推荐 | 用户反馈后系统应立即反映,给即时反馈增信任 | 正:Pinterest 隐藏广告后立即用占位消息替换无需刷新;反:Hulu 用户给低评分后推荐不即时更新,打击积极性 |
5.3 明确区分选项 Explicitly State the Difference:别让用户猜两个选项差在哪
核心对照:
- 明确区分 Explicit Differentiation:差异被清楚解释,无需用户猜。范例标"Blue Circle"和"Pink Square"——一眼知道差在颜色和形状。
- 隐含区分 Implicit Differentiation:差异没解释,用户得自己观察假设。反例标"Shape One"和"Shape Two"——没揭示颜色形状差异,得额外思考。
Why 重要:差异表达不清→用户选错→退回修改增加交互成本→挫败感、时间和金钱损失→损害网站声誉、用户流失。
明确性 4 条原则:
| 原则 | 做法 | 正例 vs 反例 |
|---|---|---|
| 1 突出差异 | 用比较表/列表清晰呈现 | 正:Amazon Breville 咖啡机比较表展示 6 个关键功能(内置研磨器、3 秒预热等)的有无;反:Fastpens 笔类比较表列 11 个因素但大多相同,只"刻字 vs 数字印刷"不同却没突出 |
| 2 突出重点 | 差异多但只有少数关键,重点展示关键项,次要的用逐步披露 progressive disclosure | 正:Great Clips 用发型图片+描述("经典""灵活"),点"了解更多"才给维护细节 |
| 3 用明确描述性文案 | 清楚传达差异、用用户熟悉的语言 | 正:Le Creuset 炖锅"容量+对应人数"("2 夸脱 适合 1-2 人")免猜 |
| 4 SERP 也要明确 | 搜索结果页标题/描述直接表明核心信息;同类产品要差异化描述 | 反:Furbo 摄像头搜"无订阅"却显示需订阅型号且不区分功能价格 |
反例(隐含设计):西弗吉尼亚大学学费表用"州内/州外学费"术语但不解释,首次浏览的青少年看不懂。正例(明确设计):UC San Diego 学费表不仅列州内外差异,还拆解费用组成(学费/住宿/书本)并按居住方式(住校/与父母同住)给估算值,文字+视觉高亮关键差异。
怎么保证明确性:① 别假设(设计师熟悉系统,觉得"显而易见"的对外部用户未必);② 测试用户理解(尤其新用户群);③ 重视细节,特别是成本相关信息(学费、附加费)。
源自 NNGroup Topics / Design Patterns - 设计模式(伦理·全球·新兴子集,15 个模式)。可用性启发式完整 10 条与测试方法见 NNGroup 可用性测试与十大可用性启发式(10 条启发式完整表 · 复杂应用应用 · 用户愉悦层级 · 测试方法 5 人法则/招募/远程/任务场景/分步任务/态度vs行为/4步分析/小样本误差/竞争性评估);导航与搜索类模式见 NNGroup 交互模式·导航与搜索(25 个模式 · 全局导航/本地导航/面包屑/汉堡菜单/上下文菜单/菜单 17 条/标签页/手风琴/页脚/粘性头/目录/页内链接/空间记忆/站内搜索/SERP/筛选/分页/树测试);无障碍专题见 NNGroup 可访问性 / 无障碍设计(5 篇 · 包容性设计三辨析 · 深色模式科学与 8 大坑 · 屏幕阅读器用户研究 · 电话语音树 16 准则);AI 界面更多见 NNGroup AI 产品与对话式界面设计(20 篇 · 对话6类型/拟人化4度/谄媚sycophancy/智能优先于类人/可解释AI引用与免责声明/少废话直奔答案截断金字塔/提示建议3类·CARE框架·提示控件4用途/GenUI vs Vibe Coding·按钮复选框回归·Promptframe·用提示设计界面/AI助手4角色·创意伙伴宝洁776人实验·ChatGPT Agent初评·Google AI Mode·为何在GenAI与搜索间切换)。图片/原档保留在 sources。
来源与关联资料
- NNGroup 交互模式·导航与搜索(25 个模式 · 全局导航/本地导航/面包屑/汉堡菜单/上下文菜单/菜单 17 条/标签页/手风琴/页脚/粘性头/目录/页内链接/空间记忆/站内搜索/SERP/筛选/分页/树测试)
- NNGroup 可访问性 / 无障碍设计(5 篇 · 包容性设计三辨析 · 深色模式科学与 8 大坑 · 屏幕阅读器用户研究 · 电话语音树 16 准则)
- NNGroup AI 产品与对话式界面设计(20 篇 · 对话6类型/拟人化4度/谄媚sycophancy/智能优先于类人/可解释AI引用与免责声明/少废话直奔答案截断金字塔/提示建议3类·CARE框架·提示控件4用途/GenUI vs Vibe Coding·按钮复选框回归·Promptframe·用提示设计界面/AI助手4角色·创意伙伴宝洁776人实验·ChatGPT Agent初评·Google AI Mode·为何在GenAI与搜索间切换)
- NNGroup 可用性测试与十大可用性启发式(10 条启发式完整表 · 复杂应用应用 · 用户愉悦层级 · 测试方法 5 人法则/招募/远程/任务场景/分步任务/态度vs行为/4步分析/小样本误差/竞争性评估)