Smashing Magazine

RSS: https://www.smashingmagazine.com/feed/

Smashing Magazine，知名前端开发与设计在线杂志，覆盖 CSS、JavaScript、UX 与可访问性。

在秋日的魅惑下（2026年10月壁纸版）

Smashing Magazine 月度壁纸栏目，征集全球设计师/艺术家创作的10月主题桌面壁纸，包含万圣节元素，多种分辨率免费下载，已持续15年以上。

收藏6 小时前

作者以个人视角切入：自己一开始并不理解 CSS 容器查询（container queries）相对传统媒体查询的价值，但发现它现在浏览器支持率约 94%，而 State of CSS 调查显示 86% 开发者知道它、仅 41.4% 实际在用。文章核心主张是：容器查询不是媒体查询的替代或补充，而是不同维度的响应式手段——它根据组件实际容器宽度而非视口来响应，更适合组件化、复用化 UI。文中会给出容器查询与传统媒体查询在判断对象、适用范围、可组合性上的差异，并强调不要把 container queries 当成“换汤不换药的 media query”，否则就浪费了它解决组件自适应布局的能力。属于有明确技术判断和争议点的开发实践文，对前端工程师有信息增量。

收藏14 天前

打造能通过董事会审核的UX投资回报论证

UX设计师必须用CFO能理解的方式证明设计对业务线的实际价值，而非只靠用户感受说话。文章通过Meridian这家B2B SaaS公司的完整案例，展示了如何把设计投入转化为可量化的业务结果，核心方法是先理解组织自身的价值定义和度量方式，再建立设计行动与领导层关注结果之间的可信因果链。

收藏19 天前

为双屏和折叠设备构建 Web 布局

CSS 新增 viewport segments 媒体查询和 env 变量，让开发者无需学习新 API 即可适配折叠屏设备布局。horizontal-viewport-segments 和 vertical-viewport-segments 可检测设备折叠方向，配合 CSS Grid 实现内容避开铰链的自适应排版。当 Canvas2D/WebGL 场景无法用 CSS 时，window.visualViewport.segments 提供 JavaScript 检测方案。

收藏20 天前

按钮的终结：为何最好的界面是没有界面

自从图形用户界面商业化以来，像并因原版而广为流传软件高度依赖点选交互。如果你想预订行程、买一双鞋或研究健康症状，你就得在复杂的用户界面中穿梭。 你要点击菜单、调整范围滑块、填写多步骤表单、处理Cookie弹窗，甚至打开数十个浏览器标签页来交叉核对基本信息。我们已经习惯于花更多时间管理软件而不是真正实现我们的目标。该合同正式改变。在人工智能和大型语言模型的推动下，新一代网络工具开创了一种激进的理念：意图驱动设计.这些平台不指望用户学习复杂的菜单和点击复杂的销售漏斗，而是通过捕捉高层次的人类目标，并在后台默默执行繁重工作来运作。这一愿景建立在长期存在的人机交互理念之上，如以及.现代网页设计的终极目标不再是打造更漂亮的按钮或炫目的动画;而是彻底消除界面。至少根据我们目前的经验，这是这样理解的。用户体验设计师必须了解我们所经历的变化，甚至重新评估我们的角色，将我们的注意力从这里转移开来设计可见界面引导透明，意图驱动的人工智能体验.“10点击”工艺的终结要理解网页设计的发展方向，我们首先得看看几十年来我们一直接受为“正常”的摩擦。以传统的在线购票流程为例。用户体验有意高度互动：<ol> <li>访问旅游聚合平台或航空公司网站。</li> <li>从下拉菜单中选择“往返”。</li> <li>输入原城，等待自动补全。</li> <li>输入目的地城市，等待自动补全。</li> <li>点击日历模式，切…</li></ol>

收藏21 天前

2026年9月桌面壁纸合集

Smashing Magazine 发布 2026 年 9 月社区壁纸合集，所有设计由全球设计师投稿，提供多种分辨率免费下载。

收藏30 天前

重新思考数据可视化：真正驱动决策的仪表盘 UX 设计方法

在当今的组织中，数据从未如此容易获得。几乎所有职能——销售、产品、市场、运营——都有仪表盘和绩效展示板，而构建它们的工具从未如此容易获得。 然而，在每周的单口会和季度回顾中，同样的事情总是发生：有人分享数据，房间里的人点头，会议就这样结束了，没有判决或明确方向.当这种情况发生时，通常会被数据承担责任。数据不够细致，数据集不完整，我们需要更多信息才能采取行动。但数据几乎从来不是问题所在。 现实是，没有人设计它来提供洞见。这张图表是基于现有资料构建的，而不是基于需要回答的问题。观众是被假设而非理解，而看到这些数据后实际应当改变什么——那个问题——根本没有被提出过。数据可视化与用户体验他们都在解决同一个根本问题：两者都试图以改变某些东西的方式，将正确的信息传递给正确的人。词汇不同，但根本挑战是一样的，一旦你把它们当作互补的学科对待，仪表盘就不再是被动的图表集合，而是开始做点什么的功能性.对于从事数据工作的设计师、向非技术人员展示的分析师，以及需要数据来不仅仅是在幻灯片上展示的市场营销人员来说，这本书适合你。图表从来不是全部1973年，统计学家（PDF）发表了一篇论文，提出了一个低调但澄清的观点。他构建了四个统计上相同的数据集：均值相同、方差相同、相关系数相同、回归线相同。 把它们的数字算一下，结果完全一样。只要描绘它们，它们就截然不同。安斯科姆给统计学家的教训是关于诊断的：可…

收藏35 天前

你的网站为什么应该永远保持变化

本文由赞助每一家公司的网站，在上线的那一天都处于最佳状态。主干分支合并完毕，站点按设计原貌正式上线，那一刻它近乎完美。而这样的状态再也不会重现。并非因为出了什么故障——网站依然在正常运行。只是市场在变化，品牌调性在调整，竞争对手推出了新功能，于是你精心打造的产品，渐渐与它所代表的企业形象不再匹配。 一年之后，它就成了某种时代印记——并非“坏掉”，而是落后了。每个团队都清楚这种渐进式的衰退，几乎所有人都把它当作一种自然规律。但事情本不必如此。网站在上线后完全可以持续优化，而不是与最初的巅峰状态渐行渐远，在幕后默默自我完善，而开发团队则可以腾出手去做别的事情。想象一下这样的场景：当你熟睡时，一个智能代理发现上周的设计系统变更并未同步到定价页，并自动予以修复；另一个代理检测到某次匆忙发布的版本中有一组图片未压缩，便将其优化；还有的代理会标记出某个新组件引入的可访问性回归问题，要么自行修复，要么留待你复核。 等你醒来时，网站已经比你离开时有了切实的提升，而那些需要你亲自把关的少数决策也已列成简短清单。这才是一款真正值得拥有的版本。然而，一旦你认真对待这一愿景，就会遇到一个与技术无关的问题：<blockquote>几乎没有人真的希望自己的网站完全自主地发生变化。</blockquote>为什么“让它彻底自治”并不是正确的目标一旦拥有了足够强大的智能代理，最直观的做法就是把整个网站交到它们手中：让它们编写、编辑、优化并发布内容，然后你退居…

收藏36 天前

时序图：SMIL 动画的蓝图

SVG SMIL 动画时序图规划比纯 CSS 更灵活。SVG 圆比 HTML/CSS 圆适用场景更广，CSS 动画在 SVG 中可用，但部分属性如 viewBox 尚无对应。

收藏41 天前

欧盟新规：AI生成内容强制标注，全球公司均受影响

欧盟从2026年8月2日起要求AI生成内容必须标注，适用于所有向欧盟公民提供服务的全球公司。该规定与欧洲无障碍法案类似，不限于欧盟本土企业，只要AI输出被欧盟用户消费即需遵守。

收藏48 天前

用 Lottie 打造触觉 UX：尊重有意为之的设计

Isadora Agency 团队开发数字解压玩具 Stress Release 时，原本计划用 Matter.js 等物理引擎实现点击形变反馈，最终改用 Lottie 动画方案。物理引擎在 Web 端性能开销大、实现复杂；Lottie 通过预渲染动画配合交互触发，能在保证流畅度的同时实现类似的触觉反馈体验。

收藏50 天前

用 Baseline 帮你减少 JavaScript 打包体积

很多 npm 依赖（日期格式化、HTTP 请求、模态框等）现在已被浏览器原生支持，典型中型应用可减少 60-90KB 体积。Baseline 是 MDN 推出的工具，帮助开发者判断哪些 API 已具备跨浏览器兼容性，可以放心替换第三方库。

收藏54 天前

2026年8月桌面壁纸精选：社区创作者的夏日合集

Smashing Magazine 每月惯例的社区壁纸合集，8月版本收录全球设计师和艺术家提交的免费桌面壁纸，支持多种分辨率下载。

收藏61 天前

AI时代的数字设计：牛市与熊市的双重考量

数字设计在AI时代面临机遇与挑战。设计团队常被夹在产品与工程之间，既要解决复杂问题又要应对资源限制。AI可能改变设计流程，但也带来新的依赖风险。文章探讨如何平衡自动化与创意价值，提出设计师需重新定义角色以适应技术变革。

收藏63 天前

Thinking Outside The Box: Digital Design In The AI Era

This article is a sponsored by MacPaw The phrase “artificial intelligence” has many excited, especially those in tech. But for those of us in creative fields like digital art and design, AI can be mor...