体验碎周报第277期(2026.4.20)
系统的知识来源于对碎片的整理和思考，为了更好地输出系统知识，记录本周我发现的体验设计和思考，为构建系统知识做准备。
大产品小细节
Dia把「下载」做成了一次小型灯光秀和仪式感交互动效
Dia浏览器为下载文件设计了一个新动效。当你点击网页里的下载按钮，整个网页背景会瞬间压暗，而被下载的文件则带上一层柔和的扩散光晕，顺着抛物线精准地「飞入」侧边栏的下载图标。这个过程通过暂时切断网页干扰、高亮核心元素的方式，让原本微小的下载动作变成了一次充满仪式感且极其清晰的视觉反馈。
这种「背景压暗 + 元素高亮」的组合手法，在交互设计中被称为「临时模态化」。文件飞行的轨迹带有明显的物理惯性，而光晕的设计则增加了元素的「能量感」，让数字文件看起来更像是一个正在移动的实物。
🔗：https://www.uisdc.com/hunter/0221666528.html
微信VS Telegram：谁的删除和撤回交互更优秀？
微信和 Telegram 代表了即时通讯领域对「发错信息」这件事完全不同的处理逻辑。微信把「撤回」和「删除」做成了两套完全隔离的路径：发出的消息在 2 分钟内长按会出现「撤回」，超过时间或对方的消息则只有「删除」。
而 Telegram 则把所有操作都统一在「删除」这一个入口下，通过一个勾选框来让用户决定这个操作的「影响范围」。
当用户处于「发错消息」的紧急状态时，大脑处于高负载状态，此时需要的是最直觉的路径。微信强制用户在「撤回」和「删除」两个词之间做选择，实际上是在挑战人类在压力下的决策效率。而 Telegram 这种「一个按钮解决所有问题，再用复选框确认范围」的逻辑，明显更符合认知心理学中的「一致性」原则。
🔗：https://www.uisdc.com/hunter/0221666385.html
一个把「儿童+锁」合成一枚图标的神级小妙招
特斯拉车上的儿童锁图标设计巧妙。极好地利用了负空间和图形同构。将儿童轮廓与锁的形状融合一体，直观表达儿童安全锁定功能。
在驾驶这种高频、高压且需要高度专注的场景下，冗余的文字说明其实是一种认知负担。与其让驾驶者去阅读并理解「开启儿童锁」这五个字，不如直接用图形的咬合关系来提供直觉式的引导。
🔗：https://www.uisdc.com/hunter/0221666652.html
一个把70周年+校名+地标塞进一枚篆刻风Logo的案例
很多校庆 Logo 习惯在数字「70」上做文章，把线条扭成绸带或者跑道。浙江师范大学 70 周年标识以篆刻为媒，告别了平庸的绸带设计。其高明之处在于正负形的视觉博弈：红底显「浙」，留白成「师」。设计师在「浙」字左侧嵌入巧思，利用线条转折让数字「70」隐现其中，顶端则化作三角形，呼应精神地标「尖峰山」。全图红白交织，将校名、校庆与地标意象完美融合，于方寸间尽显文化韵味。
🔗：https://www.uisdc.com/hunter/0221666172.html
字节的「二等公民」：为什么抖音团购搜不到我想吃的店
在抖音团购搜索框输入「炙友」，结果页查无此店，满屏都是牛头不对马嘴的推荐；非得一字不差地打出「炙友里烤肉铺」，才能搜到。这种在 2000 年代初期才会出现的「关键词精确匹配」逻辑，竟然出现在 2026 年的抖音团购模块里，实在让人大跌眼镜。作为国内最擅长做算法推荐和搜索的公司，字节在团购粗糙得像是个外包项目。
推荐阅读
实测 Claude Design 后，我发现所有自媒体都没夸到重点
这篇其实不是在夸 Claude 画图有多绝，而是在说：Claude Design 把“模糊需求→清晰 Demo”这条链路，产品化得特别干净利落。 文章拆了它从建 Design System、问问题、对齐方向到出首版界面的 10 步流程，重点夸的是：每一步都在帮你澄清自己到底要啥，而不是丢个大输入让 AI 自己瞎猜。对做 AI 工具和做需求梳理的设计师/PM 来说，非常值得细读。
🔗：https://mp.weixin.qq.com/s/xtmZkxOcH38KWhZNgNyHfA
拆开 Claude Design 伪装：全是模板，设计行业进入平庸时代
这篇文章就是把 Claude Design 从「Figma 终结者」的神坛上硬生生拽下来，告诉你：别想多了，它本质就是把 Claude Code 现有能力重新包了一层壳，做成「会生成界面、PPT、单页文档」的模板机。对不懂设计的职场人来说挺香，对专业设计师来说，远远达不到资深水平，甚至有不少视觉细节问题。更狠的一点是：作者认为 AI 的上限就是「行业平均值」，它不会杀死设计师，但会把混日子的那一批慢慢挤出去。
🔗：https://mp.weixin.qq.com/s/bGQCQ2vRATsY2eFEPAxjew
Modal vs. Separate Page: UX Decision Tree — 给你一张“别乱用弹窗”决策图
这篇是 Vitaly + Ryan Neufeld 的一套“模态框 vs 新页面”选型指南，说白了就是帮你搞清楚：什么时候该弹个框，什么时候老老实实跳新页，什么时候干脆别俩都用，用抽屉、非模态、就地展开解决。结论挺克制：页面是默认，模态是“慎用的刹车”，只在你真想打断用户、避免大错时再踩下去。
🔗：https://www.smashingmagazine.com/2026/03/modal-separate-page-ux-decision-tree/
Onboarding is a transaction — 别怕多问，怕的是白问
这篇文章把「新用户引导」从“越短越好”的 KPI 思维里拽出来，说白了就一句话：只追求少几步，反而浪费了这段用户最愿意跟你认真对话的黄金时间。作者用医疗产品的例子说明，只要你把“问什么、图什么”讲清楚，多几道题用户不但不烦，反而更信任你。
🔗：https://www.antonsten.com/articles/onboarding-is-a-transaction/
为什么王者荣耀世界的UI有一股极致廉价感
这篇是从专业游戏/交互视角，痛批《王者荣耀世界》UI有多“塑料感”的长文。作者的核心意思：美术和引擎都砸了钱，UI却停在页游时代，像功能占位原型+PPT模板，既不叙事也不沉浸，完全配不上“旗舰开放世界”这块牌子。它值得看在于：不是简单骂丑，而是一条条拆，什么叫世界观符号、留白、材质、信息层级，都拆给你看。
🔗：https://mp.weixin.qq.com/s/x4kVErDgu036DHExxlC2fw
工具资源
App Store Screenshot Design Inspiration — App Store 截图、上架页和付费墙界面收集
把一大批设计过关、调性在线的 iOS 应用截图按类型、品类整理好：ASO 截图、Onboarding、新手引导、付费墙、图标全都有。你不用一款款去 App Store 截图采集，在这里扫一圈，大致就能知道现在头部应用都怎么讲故事、怎么堆信息、怎么收钱。
🔗：https://before.click/
AI Website Cloner Template — 用 AI 一键把任意网站抄成自己的代码
你丢一个网址，它帮你把页面结构、样式、交互都拆干净，用 Next.js 16 + Tailwind v4 + shadcn/ui 重构成一套规范代码，还支持多家 AI 工具（Claude Code 强推）。对前端和产品来说，这是「把喜欢的网站拆开学习」和「旧站迁移」的快车道，同时也把 AI 代码代理真正变成了可以干重活的工程工具。
🔗：https://github.com/JCodesMore/ai-website-cloner-template
design-dna — 给 AI 从网站/截图学会设计风格
教AI Agent「看懂设计风格」的通用技能：先把网站/截图里的色彩、排版、情绪、动效等拆成一份结构化的 Design DNA JSON，再用这份 DNA 去生成新页面，实现那种「照着这个网站的气质做一个我的落地页」的效果。对经常跟 Cursor、Claude Code 一起写前端、又懒得每次从 0 设计的人来说，很香。
🔗：https://github.com/zanwei/design-dna
Portfolio Audit Skill — 用 AI 给设计师作品集来一次面试官视角体检
作者先把 Dive Club 这个播客 143 期里所有聊“作品集、招聘、候选人亮点/减分项”的段落抓下来，整理成一套打分 rubric，再用 Claude + headless 浏览器，把这个 rubric 产品化成一个命令行技能。你上传作品集，就能让AI分析你作品集做得怎么样。
🔗：https://github.com/hey-stefan/portfolio-audit
产品发现
学生教育优惠项目导航 — 一站式薅遍全球学生折扣
这是一个帮你用学生身份薅遍软件、云服务、AI 和会员优惠的导航站，省钱省时间。
🔗：https://nav.edumails.cn/
Fig.meme — 让任何照片秒变「论文配图」的整活小工具
一键把普通图片套上 Nature/IEEE 那套学术皮，再顺手帮你生图注、引用、放大框、比例尺，还支持 LaTeX 导出、PDF 导出，既能正经投稿配图，也能给猫、面包、朋友圈整一套「假装在发 paper」的梗图。
Dynamic Island for macOS — 把 Mac 顶部刘海变成「信息小中枢」
一款把 Mac 刘海变成 iOS 动态岛的开源小工具，音乐、电量、日历、天气、通知甚至自定义扩展，全都塞进那一条黑色刘海里，让它终于不再只是个丑东西。
🔗：https://dynamicisland.app/
隐形水印实验室 — 教你亲手验证“截图暗水印”真不真
可交互“小实验室”，用两种隐形水印方案让你自己上手：往图片里塞信息、再想办法把它搞坏，从而搞懂“APP 截图暗水印能不能追踪你”这件事。不是危言耸听，而是用工具把抽象的安全焦虑拆开给你看：哪种水印一压就碎，哪种你截图压缩发朋友圈都还在。
🔗：https://numfeel.996.ninja/pages/invisible-watermark
AI Plan Monitor — 一口气看清你家所有 AI 账号还剩多少余量
把 OpenAI/Claude/Gemini 这类官方额度、各种中转站余额，还有 Codex 本地账号，一股脑收拢到系统状态栏里，帮你盯着啥快用完、啥要重置、啥登录过期。对那种订了 N 家服务、到处薅 trial 和中转额度的人来说，非常对症。
🔗：https://github.com/Four-JJJJ/AI-Plan-Monitor
相关资讯
美团外卖第一届黄衣服设计大赛
淘宝闪购和京东外卖都有类似赛车服的新工服，美团联合站酷举办美团外卖工服设计大赛。总奖金池是70 万元，一共 10 组设计作品获奖。第一名20万。
🔗：https://www.zcool.com.cn/events/meituanqishou
有网友评论能不能设计成黄袍加身的样子，美团没理他… …
Claude要求进行人脸验证才能继续使用
国内AI使用者觉得天塌了的新闻，Claude的opus模型确实非常强，经常封国内的号已经很头疼了，现在Claude宣布会逐步分批触发针对少数人进行人脸验证。不是强制所有人，而是在使用高级功能、潜在欺诈滥用、安全合规时开启验证。
听说已经有商家去非洲找黑人兄弟们合作，让其帮忙验证再卖给国内，不得不感叹会做生意的人真的是有效率。
🔗：https://support.claude.com/zh-CN/articles/14328960-claude-上的身份验证
一个蛋糕为何引出7大平台35.97亿元罚单
按道理，我这么一个报道设计相关的公众号是不该发这个事情的。这个事情后面的八卦实在是太令人震惊了：看上去只是说有的外卖店铺是个空壳子，实际上是把自己的订单又外包给了下一层，并不是这么简单的事情。你看总金额罚款这么高，但其中有一家罚款是其他六家的总和，你们可以稍微找找他为什么罚这么多。
🔗：https://mp.weixin.qq.com/s/AuPwKZAYTSVUYoKCTUmrPQ
作者搜索一次“被骗 0.01 元差点每月被扣 99”的完整维权实录
作者为了下个 7‑Zip 压缩软件，顺手用某搜索引擎，点了第一条“广告位”的伪官网，1 分钱开通订阅，差点就被每月自动扣 99。
后面是一套标准“清醒之后”的自救流程：先撤资金、关自动续费，再去某互联网金融公司、12321、12377、浙里办等渠道一路投诉、追问责任主体，甚至顺藤摸瓜打到所谓“风云办公 / 绍兴维鲁斯”的客服电话，全程录音对线，最后才拿回那一分钱退款，但问题显然没被真正解决。
因为本公众号曾经被某公司投诉过2次，为了避免法律问题，本人声明，该条只是针对网络上存在的内容进行客观的简介，并没有持任何反对和支持立场。若此现象有变化，本人非常配合进行澄清和跟进。
🔗：https://www.zhihu.com/question/327241859/answer/2023428404901332069
招聘信息
小红书招聘全栈设计师
要求你既懂产品、又会设计，还能自己运营、上手 AI Coding，把一个 0-1 创新项目从想法一路抬到上线运营。设计岗逐步从「职能支持」向「业务 Owner」过渡。动手画图只是执行环节之一。
🔗：https://job.xiaohongshu.com/social/position/20115
腾讯元宝招聘体验设计师/运营视觉设计师/动效设计师/美学设计师
体验碎周报第277期(2026.4.20)
