体验碎周报第 249 期(2025.9.8)
系统的知识来源于对碎片的整理和思考,为了更好地输出系统知识,记录本周我发现的体验设计和思考,为构建系统知识做准备。
大产品小细节
仿真之美:天气App中的雾气模糊效果与体验设计
界面设计是否应该与现实环境产生共鸣? ColorOS天气应用做了一个很有趣的视觉处理,整个界面保持了基本的深色调设计,各个天气指标分别显示在圆角矩形卡片中,但唯独能见度这一项,文字边缘有明显的模糊效果,就像真的在雾天中看东西一样。这种处理方式既没有影响信息的传达,也没有破坏整体的设计美感。 这种设计增加了信息获取的趣味性和记忆点。想象一下,当你看到模糊的「0.1千米」时,会立刻联想到窗外的雾霾天气,这种视觉暗示比单纯的数字更能让人产生「哦,原来外面真的看不清东西」的直观感受。
🔗:https://www.uisdc.com/hunter/0221639187.html
美团外卖:场景化加购图标设计与情感联结
仔细观察美团外卖的加购图标设计,我们会发现它采用了完全不同的视觉策略。每个加购图标,都有一个身穿黄色工服、头戴头盔的「外卖小哥」IP形象,但是不同的商品类型又不一样。在餐饮类商品页面,加购按钮旁边显示的是一个卡通化的外卖小哥形象,他双手稳稳托举着橙色的保温箱,传递出专业送餐的服务感。切换到超市频道,图标立刻变成了经典的购物篮造型,篮子里还能看到一些商品的轮廓。水果生鲜区域则展示着装满各色水果的编织篮,苹果、香蕉等水果清晰可辨。而在鲜花板块,图标变成了精美的手捧花束,花瓣层次分明,充满浪漫气息。 不同的图标瞬间建立起了心理预期和情感联系。一个有温度、有亲和力的视觉元素,远比一个冰冷的logo更能拉近与用户的距离。
🔗:https://www.uisdc.com/hunter/0221639184.html
美团下拉刷新:从功能操作到”开盲盒”体验
美团外卖的下拉刷新并未出现传统的加载图标,而是采用了红包元素作为核心动画。随着下拉距离的增加,一只代表美团品牌的黄色小袋鼠,会顺着一根绳子从福袋上缓缓滑下,整个过程充满了动态的物理隐喻。当用户松手后,福袋会「嘭」地一下掉落并展开,瞬间切换为一个全屏的红包优惠券领取页面,上面清晰地标注着等福利信息,整个动效流畅、惊喜且目的明确。 将一个纯粹的功能性操作(刷新数据)转变为一次充满期待感的「开盲盒」体验。
🔗:https://www.uisdc.com/hunter/0221639292.html
推荐阅读
别忽略“出错时刻”!做好这几点,用户体验直接升级
用户体验常被忽略的 “出错时刻”,设计师应重视。通过 “微设计” 手段(微交互、微文本、微视觉),有效化解用户的焦虑和不安。文章分享了预防和补救错误的 13 个设计技巧,帮助用户在面对错误时能轻松应对,从而提升用户对产品的信任和满意度。
🔗:https://mp.weixin.qq.com/s/PieVUFEbNFCmkL27fLut-g
实验分享 | Vibe Coding+设计系统
本文记录了 Vibe Coding + 设计系统的一系列 AI 实验过程,包含 5 个小视频。通过不同的方法,展示了如何利用 AI 生成设计系统的页面和元素。视频中涉及的内容和思路都在实验中逐步探索,适合设计师和开发者参考。无论是初学者还是有经验的设计师,都可以从中获取灵感,体验 AI 在设计中的无限可能性。
🔗:https://mp.weixin.qq.com/s/ytFQ1ZjWCOZMcHW9Q5m18w
AI应用案例:用AI抵御禀赋效应
禀赋效应导致二手市场价格失衡,AI 通过分析历史数据,提供可视化的价格趋势,帮助买卖双方快速达成共识。闲鱼的 “行情” 功能展示实时成交均价及热度,减少信息不对称,促成更透明、高效的交易。借助数据、AI 解读和用户参与,未来的交易将变得更简单和智能。
🔗:https://mp.weixin.qq.com/s/H-iW0-knAa6jul_uEFgLZg
【英文】界面是人与技术的桥梁
界面不仅是技术与用户之间的桥梁,更是表达自我的空间。随着技术的发展,界面形式不断演变,从文本命令到图形界面,再到如今的多模态交互,设计者的角色也在改变。我们不再仅仅关注静态界面,而是需要创造能够灵活适应用户需求的智能系统。未来,界面将更加无缝地融合不同交互方式,提升用户体验,同时保留个性化与创意,让技术与人类之间的连接更具人性化。
🔗:https://www.doc.cc/syntax/interface
工具资源
100个Nano Banana生成图像和提示词精选合集
通过展示这些由先进模型生成的视觉作品,我们希望能够激发创作者的灵感和创意。同时,文档也包含了与 GPT-4o 的对比,展现了两个模型在相同提示下的不同效果。
🔗:https://github.com/JimmyLv/awesome-nano-banana?tab=readme-ov-file
Free AI Prompt to Vector Tool——AI 将文本转为SVG
LottieFiles 的 AI Prompt to Vector 工具为用户提供了一个便捷的平台,可以将简单的文本描述转化为高质量的 SVG 矢量图形、图标和插图,完全不需要设计技能。
🔗:https://lottiefiles.com/tools/prompt-to-vector
Text Wrap——让文本环绕图片的Figma插件
只需将图片与文本块重叠,选择它们并运行插件,即可轻松实现文档风格的文本环绕效果。该插件能够智能识别图片位置,并生成可编辑的新文本框,帮助设计师更高效地完成工作。
🔗:https://www.figma.com/community/plugin/1545327756236946454/text-wrap
Logoipsum——免费 SVG 占位符 logo 供设计使用
提供多达 170 种不同风格的 SVG 占位符 logo。这些 logo 适用于各种设计项目和样机,帮助设计师在创作过程中快速找到合适的视觉元素。平台上的 logo 包括圆形、几何、插图、标志等多种风格,用户可以根据需求自由选择。
Pattern Craft ——CSS 背景样式库
拥有超过 100 种精心设计的 CSS 背景样式,适用于各种网站和应用程序。所有的背景图案和渐变效果均可免费使用,且支持与 Tailwind 的无缝集成,让开发者能够轻松地复制并粘贴代码到自己的项目中。
产品发现
Lid Angle Sensor——MacBook 的开盖角度传感器查看
你知道你的 MacBook 有 lid 角度传感器吗?这个传感器能检测笔记本电脑盖子的开合角度,并且你可以通过一个小工具来查看这一角度。这款工具还可以在你缓慢调整盖子时播放木门吱吱作响的声音。
🔗:https://github.com/samhenrigold/LidAngleSensor
Karina Oh 的产品设计作品集
很有意思把网站做成了macOS桌面的样式
Cork——macOS 的Homebrew 图形界面
Cork 是 macOS 上最好的 Homebrew 图形用户界面,旨在为用户提供简单易用的体验。无论是安装、卸载软件包,还是查看包和 Tap 的信息,Cork 都能够高效完成。用户只需轻松点击,即可快速安装各种 Formulae 和 Casks,支持添加自定义 Tap 以扩展可用包的范围。Cork 还具备管理缓存的功能,帮助用户清理系统空间。
相关资讯
视频网站的前“80 秒广告”实为 84 秒
多家视频平台如优酷和芒果的前贴片广告播放时间超出标示,优酷广告实际为 84 秒,芒果则为 123 秒,均超出原定时间。律师指出,这种虚标行为违反了广告法和消费者权益保护法,损害了用户的知情权和公平交易权,可能构成虚假宣传。此问题引发了对视频平台广告透明度和消费者保护的广泛关注。
🔗:https://www.ithome.com/0/881/073.htm
Arc、Dia浏览器被Atlassian收购
科技媒体 TechCrunch 报道,企业协作软件巨头 Atlassian 以 6.1 亿美元收购浏览器开发商 The Browser Company,预计交易将在 2026 财年第二季度完成。The Browser Company 拥有 Arc 和新推出的 AI 优先浏览器 Dia,收购旨在为知识工作者打造一个专门优化的浏览器体验。Atlassian 联合创始人兼 CEO Mike Cannon-Brookes 表示,当前的浏览器更适合浏览而非工作,而这次收购将为知识工作者创造一个 AI 驱动的浏览器,重塑他们的在线工作方式。The Browser Company CEO Josh Miller 确认,公司将在 Atlassian 的支持下保持独立,继续开发 Dia 浏览器,同时加速人才招聘和功能开发,支持多平台扩展计划。The Browser Company 曾在去年以 5.5 亿美元估值完成 5000 万美元融资,吸引了多位知名投资者。此次收购不仅增强了 Atlassian 的产品线,也为未来的浏览器技术奠定了基础。
体验碎周报第 249 期(2025.9.8)