Windows 11 启动后,在全新 Intel Ultra 9 搭配 32GB 内存的机器上内存占用已达 77%。文中将其与纯 Win32 程序对比,指出现代应用普遍基于浏览器框架导致资源浪费,背离了早期轻量优化的桌面软件传统。
怀念 Win32 API
Windows 11
Windows 11 启动后,在全新 Intel Ultra 9 搭配 32GB 内存的机器上内存占用已达 77%。文中将其与纯 Win32 程序对比,指出现代应用普遍基于浏览器框架导致资源浪费,背离了早期轻量优化的桌面软件传统。
Windows 11
指 Spotify 的 Encore 系统,文章指出该系统将字体排版视为核心而非副业,专门聘用全职字体设计师 Bianca 负责维护、bug 修复及创新,避免仅由产品设计师兼职处理,从而提升产品中文字表现的意图性与出色程度。
Design System
Spotify Encore 是 Spotify 的设计系统,内部对其字体质量要求极高,专门聘请排版专家进行日常维护、bug 修复与创新探索,而非将其当作副业。该系统已推出覆盖 74 种语言的定制字体,强调在产品中实现更具表现力和文化相关性的排版效果。
Spotify Encore
本文定位Windows 11为代理操作系统,将集成MCP以支持生成式AI应用执行用户操作。微软为其设计了包含代理中介通信、工具级授权、中央注册表和运行时隔离的安全架构,强制执行用户控制与最小权限原则。所有MCP服务器需满足代码签名、权限声明等基线要求后才能进入Windows注册表,开发者预览版即将推出。
Windows 11
本文把 Material Design 作为外部设计系统的例子,指出当颜色由此类系统定义时,开发者难以预先提供配套文本色,contrast-color() 或其 RCS 模拟方案可提供合理默认值。
Material Design
文章将 Tailwind 列为外部设计系统的典型代表,其预定义颜色可能超出开发者控制,因此需要自动计算对比文本色以降低组件使用门槛并减少耦合。
Tailwind CSS
文章将 Open Props 列为外部设计系统的典型例子,其提供的颜色变量常超出作者控制范围。作者指出,使用这类系统时,若能自动计算出可读文本色,可避免为每个颜色额外定义文本和背景两套变量,从而提升组件可用性。这直接对应文中“颜色不由作者控制”的核心痛点。
Open Props
Atlassian Design System 在本文中是新导航组件的演进目标,当前导航已基于其设计令牌和原语构建,支持无障碍与RTL语言。未来将收敛为更简洁的组件集并纳入该系统,实现一次修改全产品生效。
Atlassian Design System
文章描述团队将间距 tokens 直接嵌入可展开菜单项组件,实现层级缩进的可视化表达。测试中发现原 26px 缩进导致文字截断后,通过单次 tokens 更新调整为更紧凑的 12px 值,同时保持层级清晰与全尺寸屏幕可读性。tokens 的系统级特性让全局修改变得高效,避免了逐个组件的重复劳动。
Design Tokens
本文中 Atlassian 新导航基于设计系统原语构建,实现了跨产品的一致体验并减少了数百个自定义组件带来的碎片化问题。团队通过组件库和 Figma 规范模板推动采用,最终计划在 Atlassian Design System 中提供更简洁的组件规则。设计系统支持快速迭代与规模化演进,成为导航统一的核心技术基础。
Design System
Wade Convay 现任 Google Design UX 主管,撰写了 Material 未来展望章节。他认为 Material 已重塑用户对界面的期待,正迈向超个性化时代,Material You 将设计权交还用户,支持通过 AI 实时感知情绪并调整界面。章节还提及手势、语音及 AR/VR 等新交互形态,强调未来系统将更细腻、贴心且按需渲染。
Wade Convay
Google Design 是本文发布方与 Material 相关内容的策源地,文中其 UX 负责人 Wade Convay 展望了系统未来。Google Design 参与 Material、Google Fonts 等产品,推动设计系统从共享词汇转向超个性化与 AI 实时响应,支持虚拟现实等新形态交互。
Google Design
Noa Dolberg 是 Material Design 的 UX 经理,撰写了 Material 3(2021–2024)章节。她指出 Material 系统建立在 Google、内部外部创作者与终端用户三方合作基础上,Material 3 核心驱动力包括多样形状、大胆色彩、活泼动态和可变字体,旨在提升表达力与灵活性。她认为赋予创作者更多控制权可能带来不确定性,但这正是系统成长与进化的必要过程。
Noa Dolberg
Matías Duarte 2014 年担任 Google 设计副总裁,将 Christian Robertson 指派为 Material 项目可能首位成员。他推动了 Material 1 的物理纸张隐喻与运动规则建立,强调设计需兼顾现实约束与量子魔法的创造自由,为后续统一 Android 与网页生态奠定基础。
Matías Duarte
Material You 是 Material Design 的最新形态,把个性化控制权交还用户。用户可通过色彩、排版、动效表达个人风格,系统还能借助 AI 根据实时情绪动态调整界面,实现真正意义上的超个性化体验。
Material You
Material Design 是 Google 的开源设计系统,本文聚焦其十年来从 Material 1 到 Material 3 的演进。Material 1 以纸张物理和运动意义建立现实约束,Material 2 扩展到 20 多个可实现组件并强化无障碍,Material 3 则强调灵活形状、色彩与表达,支持外部开发者叠加品牌。系统将设计哲学转向本体论,帮助统一 Google 各平台产品体验。
Material Design
Quantum Paper 是 Material Design 诞生前的内部代号,由 Christian Robertson 命名。它把“魔法”概念融入设计系统,在物理纸张约束下允许界面元素以不可思议的方式出现、变形与消失,体现了量子时代的奇幻想象。
Quantum Paper
Lynn Jepsen担任Material 2工程经理,推动设计与工程团队建立共同语言,将组件数量从约20个扩展至更多实现。她强调无障碍测试如键盘导航与色彩对比,并将系统比作乐高积木,允许外部开发者在统一基础上应用品牌定制,平衡一致性与灵活性。
Lynn Jepsen
本文建议使用设计系统来确保标签控件在行为和视觉上的一致性,使页内标签与导航标签各自内部保持统一。文章强调当同一体验中同时使用两种标签时,设计系统有助于通过视觉区分传达它们的不同行为。
Design System
文章指出,随着 Design System 普及,组件成为设计核心工作,属性面板因此将变体、实例等组件控制选项优先级提升至颜色、尺寸之上。这一调整反映了设计师日常任务中组件使用占比增加的现实,UI3 通过界面优先级重排来提升相关操作效率。
Design System
本文提到苹果 Aqua 设计系统中反向移动条纹的进度条设计,能使用户感觉等待时间缩短约 11%。作者以此为例说明,在 10 秒至 1 分钟的间隔中,通过视觉增强可优化时间感知,从而提高界面的时间密度和用户体验价值。
Aqua Design System
Vercel 内部 Design System 的组件由 Design Engineer 团队维护,覆盖 Vercel.com、Vercel Toolbar 及 Next.js 文档等场景。其文档站点提供交互式 playground,供全公司工程师参考使用。团队持续打磨系统以支撑高质量产品交付。
Design System
作者不会CSS,通过阅读Bootstrap文档并询问Gemini后抄示例,用其编排网页布局,使网站虽简陋但可被屏幕阅读器使用,适合盲人操作。
Bootstrap
本文记录多场演讲与文章讨论Atomic Design,如《Smashing Conf: Is Atomic Design Dead?》和《An Event Apart: Atomic Design》。作者持续关注该设计方法在不同时期的演变与应用。
Atomic Design
本文将设计令牌定义为描述颜色、字体、间距等视觉元素的可复用代码片段,强调其命名对设计系统的可维护性、清晰度和协作效率至关重要。文章详细分析了基于类别、组件和修饰符的命名模式,并指出良好命名能减少混淆、支持长期扩展。
Design Tokens
本文作者 Zara Soltani 在 UX Collective 发表此文,基于自身在多个设计系统中的实践经验,系统梳理了设计令牌的命名模式、原则与大小写风格。她强调清晰、一致的命名对可维护性、团队协作及系统扩展的重要性,并提供了正反例与实用建议。
Zara Soltani
本文多次提及Open UI项目,它已整理出常见UI组件矩阵,覆盖多家流行设计系统。作者建议全球设计系统可与其协作,借助其现有研究成果推进组件标准化。
Open UI
文章指出设计系统通过设计令牌实现视觉元素的一致管理,良好命名能提升系统的可导航性、减少错误并促进设计与开发团队协作。命名原则包括描述性、上下文相关、简洁和一致性,以支持系统扩展而非局限于单一组件。
Design System
文章回顾了 Design System 在过去 10-15 年间的发展,它帮助组织减少为多个产品重复设计相同 UI 的低效问题。目前各组织独立构建的设计系统仍存在大量重复工作,形成元层面的浪费。Global Design System 被定位为这些组织级系统的上层补充。
Design System
本文引用 Josh Clark 的观点,指出设计系统应承担基础组件的 boring 工作,从而让设计师和开发者专注于创新问题。该引用支撑了全球设计系统能释放人类创造力的核心主张。
Josh Clark
本文作者 Brad Frost 呼吁创建 Global Design System,以解决当前各组织设计系统重复劳动的问题。他分析了设计系统从组织内到全球层面的演进历程,并提出通过集中维护常见组件来改善网页可访问性和开发效率。文章包含他对实现路径、参与方和技术选型的初步思考。
Brad Frost
本文中 Big Medium 是作者 Brad Frost 所在的公司,主要帮助客户处理设计系统在组织流程、产品层面和跨团队协作等高层议题,而非仅聚焦组件构建。
Big Medium
作者认为W3C最适合托管全球设计系统,因其使命与无障碍、国际化等原则高度契合。W3C可作为中立机构协调各方,推动组件库成为Web标准补充层。
W3C
文中将 Material Design 列为现有第三方库的例子,指出其由特定组织创建,带有默认视觉风格且优先考虑自身目标,不适合全球通用场景。
Material Design
本文提出建立 Global Design System 的倡议,旨在为全球网页设计师和开发者提供一套通用的 UI 组件库。该系统可减少各组织重复构建相同组件的工作,提升网页质量与无障碍水平,并释放人力投入更有价值的任务。它计划采用 Web Components 技术,实现跨技术栈互操作,同时作为 HTML 之上的预制组件层。
Global Design System
文章提及 Bootstrap 作为已广泛使用的 UI 库,但强调这类工具通常携带组织特定审美,主题化能力有限,难以满足全球多样化品牌需求。
Bootstrap
设计团队构建了包含描述、示例和模板的全球统一工具包,作为Design System来测试创意在不同尺寸、语言和媒介下的表现。该系统允许灵活调整元素强度,既保持动态趣味,又确保世界各地团队能一致执行。
Design System
本文中,Figma Variables 是设计系统同步的核心工具。Supabase 通过自定义 pipeline 将其导出为可直接用于 TailwindCSS 的设计令牌,实现 Figma 文件与生产环境颜色、间距等属性的实时一致。团队借此避免了手动维护双端 token 的重复工作,支持快速迭代与统一视觉规范。
Figma Variables
文章在参考资料中列出Material Design 2与3的导航过渡与运动模式文档,作为过渡动画设计的外部延伸阅读,补充本文六条原则的官方实践案例。
Material Design
文章链接指向 m3.material.io 域名,表明本次 Google Fonts 改版与 Material 3 设计体系存在关联,属于该体系下的资源更新内容。
Material 3
本文发布于 Material Design 官方网站,内容聚焦 Google Fonts 的更新,体现其与设计系统生态的紧密关联。文章主题围绕字体与图标工具的优化展开。
Material Design
Microsoft Fluent 是微软统一的设计语言框架,本文将其作为 Visual Studio UI 刷新的核心依据。该框架已在 Microsoft 365 等产品中应用,强调生产力、一致性和可访问性。文章表示通过引入 Fluent 原则,Visual Studio 将与操作系统及其他微软产品实现更无缝的视觉与交互体验。
Microsoft Fluent
本文正文未涉及 DesignOps,该实体仅出现在页面底部的相关文章链接标题中,指向另一篇对 Taylor Oliva 的访谈。
DesignOps
本文作者Brad Frost分析了AI工具兴起对设计系统的影响,指出AI可加速原型制作和组件生成,却无法取代人类在批判性思维、伦理判断与问题解决方面的作用。他强调设计系统核心在于释放人力去处理更有价值的任务,并提醒从业者需培养系统性与协调能力以应对自动化浪潮。
Brad Frost
Josh Clark在文中被引用,指出最令人兴奋的设计系统往往是“无聊”的,因为它承担了重复组件工作,从而让团队专注于创新问题。文章以此说明设计系统的核心价值在于提升效率,AI的介入将进一步放大这一优势,但人类的判断仍不可或缺。
Josh Clark
文中示例通过提示词让AI使用success、error等design token变体来定义徽章组件的背景色,说明设计令牌是AI理解和生成组件样式的基础。
Design Tokens
本文将Design System定位为单一事实来源,通过标准化常见界面组件来确保一致性并大幅提升团队效率。它承担重复性UI构建任务,让设计师和开发者专注于解决新问题。文章重点探讨AI如何将其作为消费对象,通过提示快速生成原型,同时也能辅助创建组件样板,但仍需人工参与关键决策与精炼。
Design System
本文将Bootstrap式UI作为AI生成基础界面的典型例子,指出若AI能创作逼真肖像与奇幻世界,便能轻松输出这类常见组件与布局。文章强调这体现了AI在设计系统消费端的潜力,可快速搭建原型以提升效率,但仍需人类参与细化与问题解决。
Bootstrap
Airbnb被提及作为早期案例:他们利用机器学习对设计系统中的150个组件进行分类识别,验证了训练AI理解组件库的可行性。文章以此支持“训练AI掌握设计系统属性”的步骤,展示AI辅助设计系统消费的实际先例。
Airbnb
文章指出 Bootstrap 曾是作者学习响应式设计的起点,但其固定断点与容器 max-width 机制限制了空间利用。作者认为依赖框架的思维已过时,现代响应式应转向流体布局与容器查询,而非框架预设的三栏断点。
Bootstrap
本文是 Material Design 2022 年度总结,列举了该设计系统过去一年的顶级时刻与关键进展。文章来自官方站点,聚焦设计创新和用户体验的年度亮点。
Material Design
Material 3 对应 m3.material.io 站点,本文通过该平台发布 2022 年 Material Design 的最佳时刻回顾,体现其最新版本的年度更新方向。
Material 3
文章指出设计系统虽能加速设计与开发、提升一致性,但若运行不当会限制新探索;新产品初期不宜过早建立系统,以免束缚对独特问题的思考。
Design System
文章指出Hartmut Esslinger为Apple制定Snow White设计语言,这是其早期产品的重要设计体系。该语言与Bauhaus风格的融合,间接影响了Stowa限量款的设计思路,与Metropolitan表盘的历史呼应。
Snow White Design Language
文中指出,Figma 通过精密的设计系统,让团队能以多人协作方式设计交互式移动和网页应用。该系统是 Figma 核心能力之一,与多玩家工作流及开发者生态共同构成其平台优势。Adobe 收购 Figma 后,计划将此能力与自身成像、矢量等技术结合,进一步推动产品设计领域的协作创新。
Design System
本文引用其著作观点,指出网页端全局导航应始终固定出现,以便用户确认位置并在迷失时返回主路径。文章对比移动端与网页端差异,认为该理由在 App 内已不成立。
Mike Atherton
本文指出其规范允许页面滚动时隐藏底部导航栏,以节省屏幕空间。文章将其与国内 App 隐藏二级页面导航的实践对比,说明占用空间仍是设计难题。
Material Design
本文中Material Design的日期选择器示例展示了通过添加明确标签和分隔符来区分月、日、年字段,能有效减少用户输入错误,提升跨文化场景下的可用性。该示例强调了界面元素清晰化对国际化日期录入的重要性,符合“为大概率场景设计、为可能场景提供支持”的原则。
Material Design
Design Tokens Format Module(DTFM)是本文采用的中间 token 规范,用于将语义 token 导出为 JSON 文件,再生成 Web 的 CSS、移动端的 Swift/XML 等目标输出。该格式帮助 Figma 与其他产品兼容,并支持多主题迭代。团队先用 DTFM 存储各主题的颜色定义,再通过流水线自动同步到设计系统与代码库。
Design Tokens Format Module
本文中,Semantic Tokens 是指反映 UI 元素语义角色而非字面颜色的 CSS 自定义变量,用于支持 Figma 深色模式与未来主题切换。团队定义了包含 Type、UI Element、Color role、Prominence 和 Interaction 的命名 schema,共约 350 个 token,区分背景与前景、常暗元素(如菜单)与可切换面板。它们取代了原有 PostCSS 变量,实现了运行时动态赋值,并通过 DTFM 规范导出多平台文件。
Semantic Tokens
TinyPilot 网站原使用 Bootstrap 框架,DesignAgency 提出用 5 周、38 小时、6100 美元替换为自定义主题,以加速后续开发,但实际进度远超预期,造成额外成本和延期。
Bootstrap
本文中 Ant Design 指 Figma 社区开源组件库文件,用作主要测试文件(30.4MB,261951 个图层)。该文件被导入即时设计、MasterGo 和 Pixso 三款工具,测试其对复杂组件库的兼容性、导入速度与完整性。结果显示三家均能完整保留组件,但存在排序或细节小问题。
Ant Design
本文将IBM的Carbon列为设计系统代表,展示其如何帮助大型组织在快速迭代中维持产品一致性。它与HIG、Material Design、Polaris一同被用来论证设计系统能减少重复劳动、加速问题解决,并让跨职能团队更容易遵循统一规范。
Carbon Design System
本文中,动态色彩是 Google Material You 系统的核心功能,通过用户上传的背景照片提取颜色值,自动生成并应用到界面各处,如将《呐喊》图片转为蓝黄橙色调的 UI。它依托设计令牌实现系统化个性化,同时严格遵守色彩对比无障碍标准,避免牺牲可用性。这一机制体现了设计系统从标准化走向个性化表达的趋势,让设计师能借助自动化工具创造更具个人特色的体验,而非仅依赖模板。
动态色彩
本文将苹果的HIG列为典型设计系统示例,用于指导团队构建跨产品的一致体验。它与Material Design、Carbon等系统共同展示了设计系统如何通过标准化组件和指南来提升效率并确保无障碍合规。文章指出这类系统让更多贡献者能快速采用已验证的设计决策。
HIG
本文底部资源链接中多次出现Material Design相关UI Kit与组件示例,如Material You与Material Design System,展示徽章在该设计体系下的实现。
Material Design
本文提及谷歌Material Design作为设计系统案例,作者本人参与该团队工作。它通过设计令牌将颜色、字体等样式信息编码并分发到产品各处,最新Material You版本还支持根据用户背景图动态生成个性化界面,同时保持无障碍标准。文章用其说明设计系统如何兼顾规模化与个性化。
Material Design
本文指出设计系统由共享指南和可复用组件库构成,帮助团队在产品规模扩大时保持品牌、可用性和无障碍标准的一致性。它通过减少重复工作、快速提供现成解决方案,让设计决策得以标准化并跨团队传播。文章强调这类系统是设计师从执行者转向系统架构师的关键工具,同时也推动设计民主化。
Design System
文章在讨论Badge圆角样式时引用IBM Carbon Design System,作为采用方形徽章的典型例子。用于说明不同设计系统对Badge形状的差异化选择。
Carbon Design System
本文把Shopify的Polaris作为设计系统实例,说明其通过可复用组件和指南支持团队快速构建一致且无障碍的产品体验。它与其它系统共同证明设计系统已成为规模化设计的核心基础设施,让设计师能把精力转向更高阶的策略与用户倡导工作。
Polaris
Google Material Design系统的最新更新,支持根据用户上传的背景照片动态提取颜色,系统化地应用到整个设备界面,同时保持无障碍色彩对比标准,实现个性化与一致性的平衡。
Material You
本文解释设计令牌将颜色、字体等样式信息编码后自动分发到设计文件与产品中,进一步推动设计决策的标准化。它不仅能让工程团队独立解决小问题,还支持动态个性化,如Material You根据用户壁纸生成界面配色。文章强调令牌是设计系统实现规模化与可维护性的重要技术手段。
Design Tokens
Windows 11 在本文中作为新 Fluent 表情符号的默认平台,默认采用 2D 设计。3D 版本仅在特定支持的应用中才会显示,不会作为系统级默认选项。该规则明确了表情符号在该操作系统中的实际应用范围。
Windows 11
Microsoft 在本文中确认了新版 Fluent 表情符号的显示规则,指出 3D 设计仅在支持的应用内出现,而默认在 Windows 11 上使用 2D 版本。该澄清针对其新推出的 2D 与 3D 表情符号在系统中的实际呈现位置进行了说明。
Microsoft
Fluent Emoji 指 Microsoft 新推出的 2D 与 3D 表情符号设计。本文中明确 3D 版本仅限支持的应用使用,2D 则为 Windows 11 的默认选择。这些新设计旨在根据应用兼容性提供不同视觉呈现。
Fluent Emoji
设计系统指阿里云盘 A Design System,团队在 Figma 中搭建全局组件框架,让前端设计师据此生成业务组件,后端设计师负责规范维护。Figma 的组件与实时协作特性使设计规范的自由演绎与严格遵守变得清晰可执行,直接推动系统逐步成长。
Design System
Startup 被描述为基于 Bootstrap 5 的无代码网站构建器。它提供 150 多个预设计块,用户通过拖拽即可生成响应式页面,无需手写代码。文章指出该工具可导出纯 HTML,适合需要快速搭建 Bootstrap 风格个人网站或落地页的场景。
Bootstrap
本文指出CIELAB(又称Lab*)是1976年CIE定义的感知均匀色彩空间,其Lightness分量更贴合人眼感知,能覆盖全部可见色域。文章对比HSL,说明它解决了颜色明度不一致的问题,可用于构建可靠的色彩系统。文中还提到a和b轴分别对应绿-红与蓝-黄对立色。
CIELAB Color Space
文章以 Google Material Design 为灵感,通过 Accessible Palette 生成替代色板,保留原品牌色相与明度层级,同时实现可预测的对比度。
Material Design
Wildbit是本文发布方,其团队在重构Postmark配色系统时,发现HSL模型缺陷并开发Accessible Palette工具。他们通过内部使用和公开分享,将该工具作为Labs项目推出,旨在帮助设计师构建一致且符合无障碍标准的色彩系统。
Wildbit