体验碎周报第 255 期（2025.10.27）
系统的知识来源于对碎片的整理和思考，为了更好地输出系统知识，记录本周我发现的体验设计和思考，为构建系统知识做准备。
大产品小细节
苹果液态玻璃效果：设计美感与可读性的平衡之道
iOS 26 引入的液态玻璃效果确实是视觉设计的一次大胆突破。这种效果通过高度透明的毛玻璃材质，配合动态模糊和光影渲染，让界面元素仿佛漂浮在屏幕上，呈现出流动般的质感。 但问题也随之而来：当透明度过高时，图标和文字与背景的对比度急剧下降。苹果将这个选择权交给了用户，提供了两种模式：「透明」模式追求极致的视觉效果，但文字可读性明显不足；「色调」模式则降低透明度，增加不透明度和对比度，让文字更容易识别。
🔗：https://www.uisdc.com/hunter/0221646626.html
Atlas 窗口拖动的焦散光影效果
当你拖动Atlas窗口时，桌面背景上对应窗口移动的轨迹，会实时出现一片动态、闪烁的光斑。这个效果并非简单的提亮或阴影，而是模拟了光线穿过一个透明介质（窗口）后，在背景上形成的「焦散」现象，光影会随着窗口的移动速度和方向而自然地流动、变化，仿佛窗口变成了一块透镜，在桌布上聚焦出了阳光。整个交互过程极其流畅，光影效果与手势操作无缝衔接，让数字界面产生了一种逼真的物理质感。
🔗：https://www.uisdc.com/hunter/0221646458.html
BOSS直聘左右分栏布局：效率提升与用户困惑的权衡
BOSS直聘把搜索结果页右侧50%的屏幕空间，用超大的版式分配给了「详情页」，而搜索结果列表反而被挤到了左边一小条。 如果你不仔细看，一开始可能根本没意识到右边就是左边选中职位的详情。整个页面看上去有点割裂，左右两边的信息流没有很好地融合在一起。 好的地方是，它确实尝试让用户在一个页面里就能看到列表和详情，省去了频繁跳转的麻烦，这符合现在大家”少点击、少等待”的习惯。对于那些明确知道自己要找什么、并且习惯了这种布局的用户来说，可能效率还挺高。但缺点也很明显，就是首次使用的用户会觉得很困惑，不知道右边的大块内容是干嘛的，很容易就忽略了它的作用。
🔗：https://www.uisdc.com/hunter/0221646255.html
推荐阅读
TRAE 设计团队如何玩转 Vibe Coding
TRAE 设计团队利用 Vibe Coding 探索和实践高效的网站及产品页面生成方法，助力设计师从传统设计流程转向更高效的 AI 辅助开发模式。文章分为上下两篇，首篇介绍了高美感官网及产品页面的搭建案例，强调通过现代开发工具和设计系统实现设计与开发的无缝衔接。内容涵盖了从环境搭建、设计系统桥接到交互动效的具体流程，展示了如何在确保美感和一致性的同时提高设计效率，缩短开发周期。借助此方法，设计师能够独立完成从 0 到 1 的项目落地，打破传统研发瓶颈。
🔗上篇：https://mp.weixin.qq.com/s/ZqkKqEb-WZXhd8NIOyDbsA
🔗下篇：https://mp.weixin.qq.com/s/4lio-Vt0wO1vs8z8rtCW7w
69分文章中漂亮的生态系统示意图如何绘制？
本文介绍了如何使用 Adobe Illustrator (Ai) 创建美观的生态系统示意图，旨在帮助科研工作者提高图形绘制能力。文章首先讲解了创建画布和草稿的基本步骤，然后详细描述了图形元件的绘制方法，包括河流、草地和山体的设计，以及如何添加阴影和透明度效果。接着，作者展示了如何绘制箭头标签和文本框，最终实现完整的科研插图效果。通过此教程，读者能够掌握实用的绘图技巧，提升科学传播的视觉效果。
🔗：https://mp.weixin.qq.com/s/FPP8dAocGvGc-n1MUPjXdg
TemPad Dev：设计与实现
TemPad Dev 是一个实用的浏览器扩展，帮助用户在 Figma 只读页面查看和复制设计元素的样式（不付费实现Dev模式的部分效果）。由于 Figma 的 Inspect 面板被限制，TemPad Dev 的作者通过 API 调用和创新的交互设计，提升了设计交付的效率。用户可以直接在扩展中获取所需的 CSS 样式和 JavaScript 对象，带来流畅的使用体验。
🔗：https://zhuanlan.zhihu.com/p/1963402310572054336?s_r=0
我拆解了百万博主Dan Koe的AI内容系统：一套可复制的高效创作框架！附创作提示词
Dan Koe 分享了他的 AI 内容创作系统，帮助自媒体人实现高产出和持续创作。通过 “内容飞轮” 机制，他每日产出短文和长篇通讯，再逐步将优质内容转化为图文、视频等多种形式。同时，运用 AI 作为分析师和创作伙伴，提升创作效率和质量。此系统通过市场验证，实现内容放大和高效创作，值得每位自媒体人学习和借鉴。
🔗：https://mp.weixin.qq.com/s/DiT8caoJD4MA4Vib8jX_nw
工具资源
AUTO FLOW——创建用户流程和设计说明文档的Figma插件
与简单连线的插件不同,这个插件会在界面外生成一个新 Frame,自动添加流程标题、页面标题、流程线和注释说明等元素。使用它可以直接生成设计说明文档(也叫交互设计说明文档)。
🔗：https://www.figma.com/community/plugin/1559827973002891171/auto-flow-arrows-connectors-annotations
MindMap Pro——在Figma里绘制思维导图的插件
拥有丰富的自定义选项，包括四种节点形状、八种专业主题和二十多种颜色。用户可以轻松创建和编辑节点，使用模板快速构建思维导图。同时，智能连接和自动布局功能确保节点间的关系清晰可见，用户可以方便地展开或折叠节点。
🔗：https://www.figma.com/community/widget/1563085532429601427
Ad Builder Pro——广告设计素材库
设计广告用的素材库，超过1000个素材，渐变背景、按钮、图标、机模、版式等都有。
🔗：https://www.figma.com/community/file/1560600056402167963
PalmUI——Figma 和 Framer 的网站模板库
拥有数千个响应式设计，旨在让网站构建变得快速而简单。用户只需复制、粘贴和自定义，即可利用丰富的模板、组件和主题，从而显著节省设计时间和精力。PalmUI 提供的资源涵盖了各种网站部分，包括焦点图、价格页、团队介绍、FAQ、博客索引等，确保设计师可以根据需求灵活选择。
Vgen——自动生成颜色变量的 Figma 插件
能够快速扫描选定的颜色并自动生成有序的颜色变量、集合和模式。它采用智能命名规则，避免重复名称，能自动检测与已删除变量绑定的颜色，并提供一键安全恢复功能，确保你的颜色系统保持一致且随时可用。
🔗：https://www.figma.com/community/plugin/1554386127470501305/vgen-variable-generator
Text & String Extractor——一键提取设计稿文案的Figma插件
轻松将设计中的文本一键导出为开发者友好的格式。此工具支持智能提取文本节点，自动过滤空字符串，并提供数组和键值两种导出格式，适合开发、内容创作和本地化团队使用。
🔗：https://www.figma.com/community/plugin/1561623110379305244/text-string-extractor
产品发现
100 种已灭绝物种
提升公众对动物灭绝和保护问题认识的项目，通过沉浸式教育体验让人们更直观地理解生物多样性的重要性。该项目展示了 100 种已经灭绝或濒临灭绝的物种，揭示了它们在生态系统中的关键角色和对人类生活的影响。网站互动效果做得很棒。
🔗：https://www.100lostspecies.com/
相关资讯
Sketch 测试版推出液态玻璃界面
最新 Beta 测试版中，Sketch 采用液态玻璃风格的全新界面设计，特别是顶部的工具栏，从传统的一体式横幅转变为独立的「悬浮岛屿」，让界面更加开阔与透气。工具栏具有半透明的磨砂效果，增强了空间层次感，设计师的注意力得以集中在创作核心。此外，新功能如堆叠自动换行（Stack Wrap）等，提升了布局灵活性。
🔗：https://www.uisdc.com/hunter/0221647053.html
招聘信息
微信招聘产品体验设计师和实习生
🔗：https://mp.weixin.qq.com/s/WPnSfQa85nI1WQmowoxprQ
网商银行招聘体验设计
体验碎周报第 255 期（2025.10.27）
