体验碎周报第 236 期(2025.6.9)
系统的知识来源于对碎片的整理和思考,为了更好地输出系统知识,记录本周我发现的体验设计和思考,为构建系统知识做准备。
大产品小细节
【亮点】弧形Banner提升支付宝端午活动视觉体验
支付宝首页的端午主题 Banner 采用清新蓝色为底色,与上方快捷功能区完全统一,通过色彩延续自然消除了模块边界,形成了统一的视觉整体。其弧形底部边缘(区别于传统矩形直角)进一步软化了过渡效果,使 Banner 与下方功能区完美衔接,避免了视觉割裂感。 通过色彩与形状的无缝融合,有效降低了用户对界面模块的感知,提升了浏览流畅度,营造出「无边界」的沉浸体验。这样的设计让用户更容易将注意力集中在 Banner 内容上,突出了重点信息,提升了用户的关注度和点击意愿。 这种独特的弧形 Banner 设计已成为支付宝品牌视觉形象的重要组成部分,有效提升品牌辨识度,让用户能在众多 APP 中轻松识别并记住支付宝,加深品牌印象。
详情分析:https://www.uisdc.com/hunter/0221520621.html
【亮点】拼多多透过「已提前发货」降低用户等待焦虑
拼多多用了一个特别聪明的设计手法来缓解这种焦虑。商家若提前发货,会在订单页面上以醒目的绿色文字显示「已提前发货」。这个设计直接展示了商家对消费者的承诺,并通过绿色的视觉效果增强了「提前发货」的积极情绪。图中通过清晰的时间标注(例如:商家已在10小时内发货)使得信息更加明确。
详情分析:https://www.uisdc.com/hunter/0221627016.html
来自 Jaffe
【亮点】哈啰骑行高考期间静音
我们已经习惯了骑行共享单车时的语音反馈,尤其是在解锁和关锁时,它提醒我们操作是否成功。这种看似贴心的即时反馈,在一些特定的时段或场景中,比如高考这一关乎数百万考生命运的时刻,周围的环境噪音对考生的影响尤为敏感。在这样的情况下,单车的语音提示可能成了额外的干扰,甚至让考生的情绪和状态受到影响。因此,如何在设计中平衡效率与社会责任感,成为了一个值得探讨的问题。
详情分析:https://www.uisdc.com/hunter/0221627051.html
来自 小羊不迷糊
【亮点】X(推特)将 GIF 转换为视频格式以提升体验
每当我们精心制作了一个完美的GIF动图,兴冲冲地想要在社交媒体上分享时,却发现上传后的效果与预期相去甚远——加载缓慢、画质模糊、在某些设备上甚至无法正常播放。这种落差感让无数内容创作者和设计师倍感挫败。 更令人头疼的是,作为平台运营者,面对海量的GIF文件上传,服务器存储成本飞涨,带宽压力巨大,用户体验却依然不尽人意。 X(推特)采用了一套智能的文件格式转换机制:当用户上传GIF格式的动图时,系统会自动识别并将其转换为视频格式(通常是MP4)后再进行发布。这个转换过程对用户完全透明,用户界面上没有任何额外的操作步骤或复杂的格式选择。
详情分析:https://www.uisdc.com/hunter/0221627019.html
推荐阅读
如何做出好产品
链接:https://mp.weixin.qq.com/s/s0hk-0nwtkdk-Dq1eeedAw
作者在一次与张一鸣的交流中,他深刻阐述了做出好产品的关键:用户使用产品的收益必须大于操作成本(俞军也表达过类似的观点)。这一理念强调了产品设计的简洁性,复杂的设计往往会导致用户流失,而简化操作、降低用户使用的门槛是成功的必要条件。张一鸣还指出,信息获取的问题可以通过推荐系统来有效解决,避免用户在操作中感到困惑和负担。此外,他强调了在产品创新过程中,保持简洁的重要性,设计者需具备高超的判断力和品味,以便去除不必要的复杂性。只有在追求简化的过程中,才能设计出真正吸引用户、满足他们需求的优秀产品。这些观点对于产品经理来说,具有重要的指导意义。
【英文】数据、发现与洞察在 UX 研究中的重要区别及应用
链接:https://www.smashingmagazine.com/2025/05/data-vs-findings-vs-insights-ux/
在 UX 设计中,数据、发现和洞察的区别至关重要。数据是原始观察,发现是数据中出现的模式,而洞察则是基于发现的业务机会。有效的 UX 研究不仅需要从数据中提炼出有价值的洞察,还需要通过统计显著性来支撑决策。将发现转化为洞察的过程能够为业务提供可行的建议,从而避免成本高昂的错误。理解这些概念,将帮助 UX 设计师在沟通成果时更具说服力,确保利益相关者关注真正的商业价值。
【英文】模板陷阱:模板文化如何降低用户体验
链接:https://www.nngroup.com/articles/template-trap/
过度依赖模板、框架和清单的趋势正在引发关注。这种现象使设计师在解决复杂问题时,倾向于将模板视为万应灵药,而非灵活的起点。这种做法削弱了批判性思维,导致设计工作缺乏深度与创新。新入行的从业者常常盲目接受社交媒体上的 “热门” 模板,忽视了设计的复杂性和情境性。因此,建议设计师在使用模板之前,首先明确自己的目标,评估工具的适用性,参考成功的实际案例,并进行有意识的修改,以适应具体的项目需求。只有通过这种方式,才能真正提高用户体验设计的专业性和有效性,避免陷入模板的陷阱。
【视频】苹果那些失败设计
链接:www.bilibili.com/video/BV1cV4y1m7ot/
苹果公司的一些失败设计,包括手机返回设计、信号问题、鼠标设计以及Touch Bar。苹果手机的返回设计在理念上先进,但实际操作复杂,信号问题导致“天线门”事件,鼠标设计虽然美观但实用性不足,Touch Bar虽然旨在提高效率,但在实际使用中软件适配不足,导致效率降低。这些案例展示了苹果在设计过程中对美学与实用性之间的矛盾。
工具资源
即梦3.0——保持参考图片主体精髓不变生成图片
链接:https://jimeng.jianying.com
字节跳动的即梦AI的图片3.0上线了智能参考,可以基于你的图片生成任何你想要生成的内容,并且保持你原图的主体精髓不变。具体可以看看歸藏的测试 ( https://mp.weixin.qq.com/s/_kt9OLylR95sG7U37wseSw )
FLUX Kontext——保持参考图片主体精髓不变生成图片
链接:https://playground.bfl.ai/image/edit
和即梦3.0效果差不多,国外的模型。直接替代了很多原来需要 PS (美图秀秀、醒图)才能做的需求,原来需要吭哧瘪肚 P 很久的图,现在说句话就行。
具体也可以看看歸藏的测试( https://mp.weixin.qq.com/s/HPBzQqfg4npYAuh9zJHVVw )
Jaaz——开源的设计 AI Agent
链接:https://github.com/11cafe/jaaz
是 Lovart 的本地替代品。它能够设计、编辑和生成图像、海报和故事板,支持多种本地和在线模型,如 Stable Diffusion 和 OpenAI。通过智能提示生成和批量创建,用户还可以使用无限画布自由创作。即将推出的视频生成能力将进一步扩展其功能,适用于 macOS 和 Windows 平台,支持免费使用。
Figma-Context-MCP——提供 Figma 文件访问的 MCP 服务器
链接:https://github.com/GLips/Figma-Context-MCP
专为 Cursor 等 AI 编码工具设计的 Model Context Protocol 服务器,它提供 Figma 文件的访问权限。通过此服务器,Cursor 可以从 Figma 获取设计数据,准确实现设计,而不再依赖截图等低效方法。只需粘贴 Figma 文件链接,Cursor 即可执行相关操作。这种方法不仅提高了代码生成的准确性,还简化了 AI 获取上下文信息的过程,极大提升了响应的相关性。
PSD Import——将 PSD 文件导入 Figma,保留图层和效果的Figma插件
链接:https://www.figma.com/community/plugin/1508934764816811652/psd-import
将 PSD Photoshop 文件导入 Figma,同时保持文件的层级结构、效果(如阴影和边框)、文本及字体样式,以及透明度支持的图像。
everywhere tools——开源设计工具集合
涵盖了字体、网站构建器、生成艺术等多个领域。无论是需要创建作品集的网站,还是想要探索字体生成和图形工具,平台都提供了丰富的资源和实验工具。
Meta Horizon OS UI Set——元宇宙UI套件
链接:https://www.figma.com/community/file/1509641173090552632
自动AI出来,错把元宇宙当宝押的Meta就没什么声音了,这个Figma文件是Meta的元宇宙操作系统Horizon OS的UI套件。
Sketch 2025 更新:全新布局工具 Stacks 和Frames系统
链接:https://www.sketch.com/changelog/athens/
引入了全新的布局工具 Stacks,允许设计师创建自适应的按钮和界面布局,灵活调整以适应内容。推出了 Frames,一个新的容器类型,旨在取代传统的画板,为 UI 设计提供更多可能性。Frames 支持嵌套、样式调整和布局选项,使得设计过程更加顺畅。此外,Sketch 的 Command Bar 也经历了重大的改进,简化了组件的查找和插入,提供了更高效的工作体验。
很好,2025年Sketch把Figma2023年的功能给做了,那等Sketch出AI功能,是不是要2026年了?
产品发现
Copy-n-Paste——让任意网站支持从剪贴板上传图片的浏览器扩展
链接:https://github.com/kazcfz/Copy-n-Paste
许多网站支持直接从剪贴板粘贴图片,但部分网站仅允许通过文件选择上传。这款 Chrome 扩展可以让所有网站的图片上传功能都支持剪贴板粘贴和文件拖拽上传。缺点是网页所有上传图片的入口点开都会多这么个浮窗,如果你不希望从剪贴板上传,那就得多点一下才能打开文件选择器。
我找类似功能的插件找了好久,之前用Opera就自带类似的功能,叫EasyFiles。据说是因为浏览器安全限制,禁止JS直接访问电脑的数据,Opera是自己从底层开发了一套技术才绕过限制,我找了好久,才发现有开发者能曲线救国让其他浏览器通过扩展实现类似功能,
(Not Boring) Camera——iOS专业摄影App
链接:https://apps.apple.com/cn/app/not-boring-camera/id6737783441?platform=iphone
这个App背后的团队曾拿过苹果设计大奖,设计风格独树一帜。这个摄影App也一样。可以自定义相机界面,使用专业的 3D LUTs 进行色彩分级,实现独特的电影效果。独特的 SUPERRAW™处理技术,能够快速捕捉照片,避免 AI 处理带来的伪影,呈现出自然的颗粒感和更清晰的图像。可以将 RAW 文件保存为 DNG 格式,以便在其他软件(如 Darkroom、Lightroom 或 Photoshop)中处理。
相关资讯
2025 年 Apple 设计大奖获奖和入围作品一览
链接:https://developer.apple.com/cn/design/awards/
2025 年 Apple 设计大奖隆重揭晓,表彰了在设计和用户体验方面表现突出的 App 和游戏。获奖作品涵盖多个类别。中国开发者首次在 Apple Design Awards 中实现多领域获奖:淘宝(Vision Pro 版)凭借高精度 3D 商品模型和沉浸式空间交互,荣获”出色互动”类别大奖;无限暖暖凭借细腻的视觉设计和叙事,获得”视觉图像”类别奖项;而 CapWords 则以其趣味化的单词记忆方式,摘得”乐趣横生”类别最佳应用。
令人惊讶的是,淘宝(Vision Pro 版)和无限暖暖背后都有数千人的庞大开发团队,而 CapWords 却仅由一个不到 10 人的小团队设计开发完成。CapWords的界面设计分析可以看看我之前写的文章( https://mp.weixin.qq.com/s/f2-t-gEV_dwSmaKkgIhHsA )。
招聘信息
京东招聘UI视觉设计师
九方智投设计中心招聘创意视觉设计师
百度招聘创意视觉设计师
体验碎周报第 236 期(2025.6.9)