体验碎周报第278期(2026.4.27)
系统的知识来源于对碎片的整理和思考，为了更好地输出系统知识，记录本周我发现的体验设计和思考，为构建系统知识做准备。
大产品小细节
提升转化率的UI小细节，京东详情页的重点笔记模式干货
京东这次在详情页里玩起了「重点笔记」模式。不管是头部的硬参数，还是底部的买家评价，关键信息都像是被班长用荧光笔涂过一样。 另外把金牌会员、Plus 会员以及「本店买过 2 次以上」的评价顶在前面，是在通过阶层符号和复购行为建立权威感。
🔗：https://www.uisdc.com/hunter/0221667223.html
Codex通过拖拽交互大幅缩短macOS权限开启路径
macOS 上获取系统权限一般就是：弹窗告诉你需要权限→点按钮跳转到系统设置→在一堆列表里找到那个开关→输密码确认。Codex 直接把这套流程压缩成了一个动作——弹出一个浮窗，你把 App 图标拖进系统权限面板，完事了。拖拽本身就是 macOS 用户最熟悉的交互范式（拖文件、拖应用到 Applications 文件夹），用户不需要学任何新东西，整个过程甚至比传统流程还更符合 Mac 的操作直觉。
🔗：https://www.uisdc.com/hunter/0221667030.html
用官网直接“演示”产品的演示工具
Faces 是个把演示文稿变成交互网页的工具。他们喊出口号说传统的 PPT 已经没有力量了，得用 Web 的交互来做。绝就绝在，他们直接把自己的官网做成了一份交互式的在线幻灯片。左边是导航缩略图，右边是主舞台，甚至还能跟里面的图表和动效直接互动。点进这个网页的瞬间我就被打动了，你不需要看任何冗长的功能罗列，光是顺着缩略图滑两下，就已经完整体验了它的核心卖点。
🔗：https://www.uisdc.com/hunter/0221667085.html
来自 Hal_lee
懂车帝双主按钮让操作逻辑打架了
进到懂车帝的发帖选图界面，你会发现屏幕上下两端各蹲着一个「主按钮」。上面写着「发布」，下面写着「完成」。当你正全神贯注地筛选照片，大脑的直觉系统会自动寻找那个代表「确认/下一步」的品牌色色块。由于上下两个按钮在颜色、形状、甚至视觉权重上几乎完全一致，于是就出错点了完成，图还没传上去，帖子就发出去了。 一致性不仅是品牌色的一致，更是逻辑层级的一致。在选图这个临时容器（Modal）里，真正的全局出口（发布）应当被暂时剥夺最高优先级，甚至应当被降级为非高亮态。
🔗：https://www.uisdc.com/hunter/0221667608.html
推荐阅读
教你把AI生成的UI图变成可交互原型！GPT-Image-2加Claude Design顶级组合，设计师越级玩法来了
GPT‑Image 2 负责从一个小小的「优设小鸡立牌」扩展出整套 UI 视觉系统（颜色、组件、卡片、Banner 一应俱全），然后把这张大图丢进 Claude Design，让后者按风格自动搭页面结构、还原布局和信息层级，生成真正可交互的原型页面，再往后还能导出交给 Claude Code，继续写前端代码。
🔗：https://mp.weixin.qq.com/s/zfL5AabBDhaCArr0riYcog
【英文】发现意图：设计人工智能用户体验
来自可用性原则提出人尼尔森的文章，他的核心判断是：交互范式在从“命令式”（你一步步点）变成“意图驱动”（你说要什么，AI 自己想怎么做），人的角色从 operator 变成 supervisor——你不再亲自干活，而是管理“数字司机”。这意味着传统那套“学得快、点得少、不迷路”式可用性指标，都得重写。
他提出了一整套新范式：意图层 + 编排层 + 直接操作层的新架构，新的可用性指标（比如“意图捕获率”“校对效率”“信任校准”），还谈了慢 AI、故意加摩擦、探索 latent space 等。
🔗：https://jakobnielsenphd.substack.com/p/intent-ux
为电脑上的所有 Agent，统一一套 Skill 库
电脑上开着 Claude Code、Cursor、OpenClaw、Trae 这些 Agent，各自有一套 Skills，装一次 Skill 要重复好几遍，版本还经常不同步，最后谁是最新版自己都不知道。文章的核心解法很工程师：用软链接做一个中央 Skill 文件夹，让所有 Agent 的 skills 目录都指向同一个地方。只要维护这一份中央库，所有工具即时跟随更新；新 Skill 也会自动归档到这个「中枢」，再配合 Git 做版本管理和多设备同步，Skill 直接变成个人的长期资产，而不是散落在各个软件里的临时配置。
🔗：https://mp.weixin.qq.com/s/cAlFvs79xtdniFLHufB_FA
工具资源
awesome-gpt-image-2-prompts — GPT‑Image‑2 的实战图库+咒语词典
把 X 上那些最好用的 GPT‑Image‑2 提示词系统整理成「可复用模板」的仓库，从人像、海报到 UI、电商图都有，一共 4 个大分类，至少 170+ 个案例，直接抄、稍微改就能上手出片。
🔗：https://github.com/EvoLinkAI/awesome-gpt-image-2-prompts
Mockdown — 用纯文本画线框，专门喂给 AI 的原型工具
你在网页里拖拖拽拽，拼出按钮、表单、表格、导航这些组件，最后一键导出成结构清晰的 Markdown，把它塞进 Claude Code、Cursor 或 Copilot 里，让模型照着“ASCII 线框图”写代码。作者的假设很直接：AI比起你啰里啰嗦地描述“左边一个搜索框、下面一张表、右下一个分页”，其实更擅长读结构化文本。
🔗：https://www.mockdown.design/about
Ian Handdrawn PPT — 把技术内容变成中文手绘整页图的 Skill
一套给 Codex / AI Agent 用的「画图说明书」，专门把文章、课程大纲这类文字内容，变成一组风格统一的中文手绘技术解释图：21:9 做封面，16:9 做正文，每一页都是一整张 PNG，而不是给你一份可编辑的 PPTX。
🔗：https://github.com/helloianneo/ian-handdrawn-ppt
Pica — 让 Mac 管字体，像相册一样顺手的工具
把原本藏在系统里、装多了就乱成一锅粥的字体，用更“可视化”和“收藏夹式”的方式管起来。特色功能有 Logo 预览、颜色主题、完整 OpenType 支持、自定义合集、一键激活、监控文件夹。
🔗：https://pica.joshpuckett.me/
产品发现
墨探— 一键把网页转成 Markdown
因为 AI 读 Markdown 最方便，所以 Markdown 这个格式现在越来越看重。这是个命令行小工具，专门帮你把各种网站文章抽干净，直接导成 Markdown，给写公众号、做笔记、喂 AI 的人省掉一大半整理时间。
🔗：https://github.com/caol64/omni-article-markdown
sipsip.ai — 把视频转成结构化摘要
你订了一堆 YouTube 频道、播客、PDF 报告，但真正点开看的那一刻少得可怜。它的主线能力很清晰：给它一个入口（YouTube / 播客 / 本地音视频 / PDF / 文章 URL），它帮你搞定转录、结构化摘要、要点提炼，然后再用「Daily Brief」每天早上推一份你关注源的更新浓缩版，让你不用完整看/听，也能抓住信息主线。
🔗：https://sipsip.ai/
WhatsTheWeb— 一眼看清网站流量和技术栈的浏览器扩展
在当前页面直接打开侧边栏，把几个常用的站点情报整合到一个视图里。它会给你看估算访问量、流量来源、SEO 基础体检（标题、description、H 标签、canonical、robots、sitemap、图片 alt、内外链结构），顺便探测这站有没有接 AdSense、Publisher ID 是谁、同一 ID 下面还有哪些域名，再加上技术栈探测（框架、CMS、统计、前端库等）。
🔗：https://chromewebstore.google.com/detail/whatstheweb-website-traff/dmdbpmhalempefopiaiphpnohhmahgmi
相关资讯
Google图标设计风格的转变
以前 Google 强迫所有图标都要凑齐红、黄、蓝、绿四种颜色，结果导致大家长得都一样。新的图标从扁平的线条回到了更具深度感的渐变与玻璃拟态风格。这种细腻的流体渐变可能是在呼应 Gemini AI 的视觉语言，暗示这些工具现在都深度集成了 AI 能力。
不过话说回来，这就和Material Design的扁平化风格就不符合了，可能下一次设计语言也得换个说法圆回来。
招聘信息
荣耀招聘UI视觉设计师
Keeta 招聘体验设计师
体验碎周报第278期(2026.4.27)
