体验碎周报第287期(2026.7.13)
系统的知识来源于对碎片的整理和思考，为了更好地输出系统知识，记录本周我发现的体验设计和思考，为构建系统知识做准备。
大产品小细节
iOS壁纸景深裁剪动画也太流畅了
在刚发布的 iOS 27 Beta 3 中，苹果进一步升级了系统动画的细腻度。备受瞩目的景深裁剪动画 (Depth Cutout Animation) 带来了更流畅的锁屏与壁纸过渡效果，把壁纸里的人物主体做了一层单独的景深剥离，让人物像是从桌面图标后面一点点立起来，或者是从锁屏界面平滑地退到背景里，产生了一种奇妙的错位立体感。
🔗：https://www.uisdc.com/hunter/0221676083.html
钉钉针对不同的角色润色不同风格的文案
考虑到钉钉里面都是工作方面的沟通，所以钉钉的文本润色可以设置对领导说、对客户说、对同事说，生成不同风格的文字润色效果。 职场沟通往往不是缺少生成文本的能力，而是缺少在特定权力结构下分寸感的拿捏。
🔗：https://www.uisdc.com/hunter/0221675830.html
同样是做搜索，为什么iOS非要把它从Tabbar独立出来？
从iOS 26开始，就在Tabbar之外加入了一个单独的搜索按钮。你知道和之前把搜索按钮放到Tabbar里面有什么区别吗？ 左图把搜索放进 Tab Bar，说明搜索是一个一级页面，和首页、分类、我的平级。它适合内容型产品，搜索页本身能承载热搜、历史记录、推荐内容和筛选结果，用户进入搜索就像进入一个完整频道。 右图把搜索做成独立按钮，说明搜索更像一个快捷动作，不占主导航名额。它适合主 Tab 数量较少，但用户又经常需要临时查找内容的场景。点击后可以弹出搜索页、盖板或全局搜索入口。
🔗：https://www.uisdc.com/hunter/0221676100.html
AI语音输入法 Typeless 2.0 能理解人的表达思路
AI语音润色输入法的首创Typeless升级到2.0。1.0把你杂乱无章的口语润色成一句结构化的话。2.0 更进一步，开始理解你说话时的思路。 就像图里左边这段语音：先说发给谁，再补手机号，又临时想起一本讲习惯的书，接着补充周五出差安排。到了右边，Typeless 2.0 不只是照抄，而是自动识别对象、格式化号码、补全《原子习惯》、把零散事项整理成清单，还能适配邮件、聊天、文档等不同输入场景。
🔗：https://www.uisdc.com/hunter/0221676446.html
航旅纵横开屏广告变Banner
APP的开屏广告展示之后，进入首页一般就不见了。但是航旅纵横这次做了一个神奇的操作，开屏广告展示完并没有消失，而是等比例缩小，无缝平移变成了首页顶部的动态 Banner。 如今用户已经形成了习惯，在开屏广告出现时候就点跳过。用这种跳过之后仍然在首页置顶的方式，确实提升了广告的曝光率。尽管这个效果做的很平滑，但是对于马上需要查看航班的用户而言，还是有明显的干扰。
🔗：https://www.uisdc.com/hunter/0221675842.html
推荐阅读
【视频】关于设计的新动态 — WWDC26 设计更新与 Liquid Glass 官方讲座
苹果开发者官方 16 分钟讲座,专门讲 2026 年各平台设计到底改了哪些具体东西:Liquid Glass 材质的调整、图标做法、还有 iPhone App 怎么适配 iPad 大屏和「iPhone 镜像投屏到 Mac」时的可调整窗口。
🔗：https://www.bilibili.com/video/BV1RHTC6aEFY
【英文】The AI Steering Layer — AI 团队协作中的品牌与规范约束层
Luke Wroblewski 提出的一个概念，专门解决 AI 生成东西太发散、跟品牌和规范对不上的问题。他把「引导层」放在工具和代码库中间，用指令、参考图、设计 token 这些把 AI 的输出「锁」在团队想要的样子上。概念不新，但被讲得特别通透，是那种看完会心一笑「对，我要的就是这个」的文章。
🔗：https://www.lukew.com/ff/entry.asp?2155?
设计语言、设计原则、设计规范的区别和联系
一篇把设计圈老被搞混的三个词讲清楚的科普文。设计语言、设计原则、设计规范，很多人张口就来但真要区分却含糊。作者用「从虚到实、自上而下」的层级模型串起来，还配了科技金融App按钮的例子，从气质到色号一路落地。不算惊艳，但胜在把一件常见的糊涂事讲得干净利落，适合团队里对齐认知用。
🔗：https://mp.weixin.qq.com/s/bqf-7PJiTXiUU55y39XMeQ
微信6年来最大改版——关于微信AI助手小微的15条思考
微信悄悄上线了AI助手「小微」，作者卫夕（广告产品经理）试用一天写下15条观察。核心判断很重：这是微信自2020年做视频号以来6年最大更新，是「硬菜」。牛的地方在于小微真正长在微信里，第一次把支付、运动、社交这些沉睡数据用自然语言盘活了。作为产品分析，信息密度相当高，值得一读。
🔗：https://zhuanlan.zhihu.com/p/2052869154542203398
作为服务设计师体验柜姐生活的那几天
坐在办公室里画用户画像、做客户旅程图，到底靠不靠谱。作者的答案是——不太靠谱，至少不够。她发现同一个品牌，大盒子商场店和核心商圈街边店面对的完全是两拨人，一拨要人帮着搭配、要明确建议，另一拨自己有主见、只在乎设计感，服务标准不该只有一套。
🔗：https://mp.weixin.qq.com/s/y5R0HuxRDPnZ5-FqtU8cbg?scene=1
工具资源
Particle Factory - Figma 粒子动画插件，可导出原生可编辑图层
火焰、雪花、彩带、樱花这些效果都能做，还能实时预览。最狠的一点是导出后不是图片或 GIF，而是原生 Figma Motion——每颗粒子都是独立可编辑图层，带关键帧。
🔗：https://www.figma.com/community/plugin/1651782298707514077/particle-factory-the-particle-animation-studio-for-figma
3D导演台（storyai-3d-director-desk）— 浏览器端 3D 分镜预演工具
现在用 AI 生成视频，你想精确控制角色站在哪、摆什么动作、机位怎么走，光靠文字提示词几乎办不到。这个工具让你先在 3D 里把人物、机位、场景摆好，截出构图当参考图，再去喂给 AI 生成视频。
🔗：https://github.com/jiguang132/storyai-3d-director-desk
CapFrame — 本地视频逐帧截图工具
浏览器里跑的视频拆帧工具，拖进去就能慢放、逐帧看、把关键画面截成一组清晰截图，还能拼成故事板导出。适合做检查动效、拆短片分镜、把录屏整理成图文教程这类活。
🔗：https://capframe.vercel.app/
Vue Bits — Vue 动效组件开源库
Vue Bits 本质是 React Bits 的官方 Vue 移植版，作者是 David Haz（davidhdev），解决的痛点很直接：Vue 社区一直缺一个高颜值、开箱即用的动效组件集合，以前想要这类酷炫效果，要么去 React 阵营眼馋，要么自己啃 GSAP、Three.js 和 WebGL。现在 130 多个组件摊在面前，从 ASCII 文字、故障风 glitch，到极光背景、粒子、液态金属、超空间隧道，分门别类清清楚楚，配套 CLI（走 jsrepo）能直接拉代码进项目。
🔗：https://vue-bits.dev/get-started/index
30X · Web-to-Video Films — 网页转品牌短片的 Claude Code Skill
喂给它一个网页链接，就能生成一支品牌感的短片。
🔗：https://norahe0304-art.github.io/30x-video/
Reicon — 免费开源的手绘 SVG 图标库
主打「手工绘制」没用AI，2700+ 图标全部人工画在 24×24 网格上。React、Vue、Svelte、Figma、VS Code 全都支持，MIT 协议随便商用。
🔗：https://reicon.dev/
A1DesignBattle — 设计对战竞技平台
一个特别耿直的设计对战网站：同样的命题、同样的素材，几个设计师同场PK，然后大家投票选谁做得最好。有排行榜、有段位、还有创作者的直播表演赛，把设计这件事直接做成了竞技游戏。有意思的是它连UI都在贯彻自己的理念——系统字体、纯CSS网格、零追踪脚本，页面轻到不像话。这个产品思路挺讨人喜欢。
🔗：https://designbattle.hubmonster.io/
SHOT.CAFE — 电影剧照检索数据库
一个专给做视觉参考的人用的电影截图库，目前收了 187 部电影加 23 支广告，累计两万四千多张剧照。牛的地方在于它不是按片名找，而是按「场景 + 拍法 + 颜色」找——你想要「夜晚、室内、荧光灯、over-the-shoulder」的画面，直接勾选标签就出来一堆。AI视频、摄影、美术、导演做 moodboard 的人会爱死这个。搞视觉的朋友值得存一个。
🔗：https://shot.cafe/
Film Vibes — 影视广告MV镜头参考AI搜索引擎
做视觉、写分镜、搭Mood Video的人有福了。Film Vibes 把顶级广告、电影、MV里的镜头拆成一个能搜的数据库，400万+镜头随便扒。想找「黄金时段、低角度、推镜、外景」这种具体到骨头的参考画面，以前得靠脑子和收藏夹硬扛，现在一搜一大把。对做treatment和animatic的人来说，属于真·省命工具。
🔗：https://filmvibes.io/
拉片笔记（Lapian Notes）—— 本地运行的 AI 辅助电影拉片工具
拉片是影视创作圈的老功课，一帧一帧看、一段一段拆，费眼费时间。这个工具想解决的就是这个痛点：导入影片后自动按 1 秒抽帧，读内嵌字幕（没有就联网搜），然后把截图加字幕打包，交给 AI 去做结构分析，返回结果自动生成多泳道时间轴和观众情绪曲线，还能把单个段落再打小包深拆到镜头级。
🔗：https://github.com/bkingfilm/lapian-notes
产品发现
QoderWork —— 阿里旗下的AI Agent客户端
整体和CodeX或者腾讯的WorkBuddy很像。都是把「AI 帮你写代码」的那套 Agent 能力，往「AI 帮你干活」扩。你说一句需求，它自己开浏览器、读 Excel、出 PPT，直接交成品。国内大厂 Agent 卷办公场景这一波，阿里算是把姿势摆得比较全的。
🔗：https://qoder.com/zh/qoderwork
NC Bench - Models — 面向小说创作的大模型综合能力排行榜
这是 Novelcrafter 团队搞的一个模型评测榜单，专门测大模型在写作场景下的真实表现。有意思的地方在于它不测数学竞赛那套，而是拆成八个维度：工具调用、创意写作、语言、实用性、推理、文本编辑、规则遵循、幻觉率。榜单更新很勤，把 2026 上半年冒出来的一堆新模型都收进去了，对想选模型写东西的人挺有参考价值。
🔗：https://www.nc-bench.com/models
知乎AI Works — 知乎Vibe Coding展示广场
本质是知乎版的「AI 作品秀场」，特色在于这些Vibe Coding的产品是可以链接知乎的数据能力的。
🔗：https://www.zhihu.com/project/square
Tutti — 多 Agent 实时共享工作空间工具
专治你同时用 Claude Code、Codex、Canvas 时的老毛病：Agent 之间不通气，全靠你手动复制上下文、下载上传文件当传话筒。Tutti 把上下文、文件、任务、应用全打通，Codex 能直接接着 Claude 的活干，还复用你现有的订阅、零额外花钱。用 AI 干活越多的人，越会被这个点戳中。
🔗：https://github.com/tutti-os/tutti/blob/main/README.zh-CN.md
MediaCrawler — 多平台自媒体数据采集工具
一套代码通吃小红书、抖音、快手、B站、微博、贴吧、知乎七大平台。最妙的地方是它不搞传统 JS 逆向，而是用 Playwright 直接开个真浏览器，保留登录态之后拿签名参数，等于绕开了国内平台最恶心的加密对抗。门槛一下降到「会跑 Python 就能用」，这也是它能这么出圈的核心原因。
招聘信息
招聘海外直播UI设计师
5年以上经验，精通Figma，擅长交互与视觉设计，英语可沟通，会3D/AI加分。Base北京
作品集可发邮箱：reyhan.li@jaco.live
阿里云AI创新部招聘AI产品设计师/创意设计师
体验碎周报第287期(2026.7.13)
