Grammarly · 用户体验
Grammarly 官网的设计语言是「大字号标题加产品动图」，首屏主标题「Think big. We'll take care of the details.」配一句解释性副标题，下面直接是 Sign up It's free 与谷歌一键注册两个按钮，注册摩擦被压到最低。页面往下用五个功能卡片列出 Paragraph rewrites、Tone suggestions、Proofreading、Humanizer agent、AI Detector agent，每一段能力都配一段实际产品操作的内嵌视频，而不是静态截图——抓取时能看到大量「An animation shows...」的无障碍描述文本，说明视频都写了替代文字。信息架构上主站分个人、团队与企业、教育三条主线，辅以按端划分的浏览器、桌面、移动三个安装页和按能力划分的十几个工具页。定价卡片在首页与定价页各出现一次，且首页做了月付年付切换与「Save up to 60%」标签。
首屏的信息传达效率很高。主标题「Think big. We’ll take care of the details.」把产品价值抽象成一句分工声明——你负责想，细节交给我；副标题则落到具体收益：帮你把想法变成清晰、可信、无法忽视的文字。标题下方只放两个动作：一个「Sign up It’s free」主按钮和一个谷歌一键注册，并在按钮下方用小字挂上服务条款、隐私政策和加州居民采集告知的链接。这种「一句话价值加一个免费动作」的组合，把从落地到注册的路径压缩到了一次点击，是它自助注册转化率高的直接原因。相比之下，很多出海独立站首屏堆五六个按钮，结果是用户不知道该点哪个。值得一提的是不同落地页的首屏措辞会随受众切换：企业页首屏用「AI that takes care of business」，教育页用「AI that supports educational excellence」，Authorship 页用「Submit your most transparent work」，多语言页用「Communicate confidently across languages」。同一个产品，对企业讲结果、对学校讲教学、对学生讲透明、对多语用户讲自信，每条线的情绪落点都不同，这种受众分层的文案功力比视觉设计本身更值得学习。
往下滚动的叙事结构是「能力清单加场景演示」。五张能力卡片先给出功能名，随后用三个大段落分别讲「Better writing, better results」「Keep your voice, make it clear」「Get a read on your writing」三个价值主题，每一段都配一段内嵌产品视频。抓取时能看到这些视频的无障碍描述文本，例如「An animation shows Grammarly within a Zendesk text box providing suggestions to follow the brand style guide, and achieve a more confident tone」，说明每一段视频都写了详尽的替代文字。这个细节有两层意义：一是对屏幕阅读器用户友好，二是让搜索引擎和大模型也能理解视频内容。用 Zendesk 工单框做演示场景而不是通用文档，也说明它很清楚客服回复才是企业用户的高频场景，这对做跨境客服的团队是直接的场景共鸣。
导航与信息架构是三横三纵的网格。横向按用户类型分：个人、团队与企业、教育；纵向按接触点分：浏览器插件、桌面客户端、手机键盘。两者交叉之外，还有一层按能力切分的工具页矩阵，包括语法检查、拼写检查、标点检查、抄袭检测、AI 检测、改写、论文检查、引用生成、摘要、求职信生成器、报告生成器、邮件生成器等。企业页做了一个很实用的处理：顶部直接给出「Jump to section」锚点导航，分别跳向 Features For Teams 和 Enterprise Solution 两块，让不同决策角色快速定位。定价页则提供了一张完整的三档对照表，把写作功能、安全功能、团队功能、客户支持四大类逐项打勾，用户群组数在 Pro 档标注为两个、企业档为无限，风格指南和品牌语气也分别标注一个与无限，这种颗粒度对企业采购评估很友好。
交互细节上有几处值得说。第一是定价卡片的月付年付切换器，切到年付时会出现「Save up to 60%」的标签，把三十美元月付与十二美元年付的价差直接可视化；同时 Pro 卡片挂着「Most popular」角标做锚定。第二是试用流程的焦虑消解：定价页在 Pro 档写明「Try for free」「Email reminder 2 days before trial ends」「$0 payment today」「Start 7-day Free Trial」四行文案，把用户最担心的「忘了退订被扣款」提前拆解掉。第三是 Authorship 的启用方式设计成一个指纹图标，这个隐喻既直观又和「证明这是我写的」这个功能语义完美对应。第四是隐私控制的可见性，桌面端页专门有一块「Prioritize privacy」，告诉用户可以在任意应用里单独关闭 Grammarly，这对不放心数据外传的用户是重要的安抚。第五是社会证明的密度控制：首页在定价区之后紧跟七张客户成效卡片，每张只放一个数字加一个人名职位，扫一眼就能获取信息量，不需要点开阅读，这种可快速扫描的证据墙比长篇案例更适合放在决策路径的关键位置上。
存在的体验问题也不少。最突出的是品牌指向混乱：首页底部有一整块「Grammarly is now a part of Superhuman」，企业页把 Enterprise 方案表述为「通过 Superhuman Go 交付」，教育页推 Superhuman Go，关于页说公司已更名 Superhuman，定价页的 Enterprise 档也写「available through Superhuman Go」，但站点主体仍然叫 Grammarly、域名仍是 grammarly.com。一个第一次来的用户很难判断自己到底在买 Grammarly 还是在买 Superhuman，跳到 superhuman.com 之后又是另一套定价体系。其次是定价档位的历史残留：首页的 Enterprise 卡片写着「Everything in Plus, and more」，但站内早已没有名为 Plus 的档位，这是从旧的 Free 加 Premium 加 Business 体系迁移时留下的文案未清理。第三是首页定价区块出现了明显的重复渲染，同一组 Free、Pro、Enterprise 卡片连续出现两遍，顺序还不一致。
对出海卖家的借鉴点很具体。第一，首屏只留一个主行动按钮，把条款链接放到按钮下方小字，这个模式适合独立站的落地页。第二，用产品实操动图替代静态截图，并且给每段动图写清楚的替代文本，既照顾无障碍也照顾机器理解。第三，把用户最大的付费焦虑写在按钮旁边——「今天不扣款」「到期前两天邮件提醒」这类文案，比任何折扣都更能降低试用门槛，跨境独立站做订阅制或会员制时可以直接套用。第四，反面教材是品牌迁移期的信息一致性：如果你做多品牌或改名，务必把所有落地页的档位名称、跳转目标和价格表同步清理干净，否则用户的信任会在这些小矛盾里一点点流失，而信任一旦出现裂缝，前面所有的设计投入都会打折扣。