easy-vibe 前端实战参照 Apple HIG、Material、Fluent、Atlassian 设计规范为页面与按钮建立清晰决策标准并驱动 AI 生成高质量 UI【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe本篇文章是 easy-vibe 课程 Stage 2 前端模块的核心方法课主题是在动手设计页面与按钮之前先学会参照 Apple、GoogleMaterial、MicrosoftFluent 2、Atlassian 四大设计系统把模糊的 UI 需求转化为精确的术语、层级与判断标准并把这些官方准则原样喂给 AI让 AI 生成层级清晰、按钮语义正确的页面。读完本文你将掌握页面层级五问按钮五级语义两套可直接套用的设计决策框架以及 4 组可直接复制到 AI IDE如 Trae中的设计规范引用型 Prompt。参照设计规范的目的从来不是做得像谁而是学习别人是如何做决策的。1. 为什么设计规范能让页面变清晰先学会说对术语很多人在描述界面需求时习惯说帮我做一个下拉菜单这里放个菜单在菜单栏里加几个功能这里放两个按钮一个确认一个取消。听起来没问题但在 Apple、Google、Microsoft 这些大厂的设计规范里这些词并不是模糊概念而是被拆分得极其精确。先看一组日常口语 vs 官方定义的对照引用原文见 docs/fr-fr/stage-2/frontend/multi-product-ui/index.md日常说法官方引用出处一句话总结做个菜单Apple HIG《Menus》「A menu reveals its options...」menu用于执行动作把功能放到菜单栏Apple HIG《Menus》「menu bar menus contain all the commands...」那是应用顶层的命令菜单做个下拉菜单Apple 归档文档《Managing Pop-Up Buttons and Pull-Down Lists》「A pop-up list lets the user choose one option among several.」pop-up用于从列表中选择一个选项再做个下拉菜单Apple 归档文档「A pull-down list is generally used for selecting commands in a specific context.」pull-down用于在当前上下文触发命令菜单也能用来筛选Fluent 2《Menu usage》「If you need to collect information from people, try a select, dropdown, or combobox instead.」menu不用于收集/选择数值菜单可以当导航用Material Design《Menus》「Menus should not be used as a primary method for navigation within an app.」menu不是应用内的主要导航方式按钮就写 OK / 取消Apple HIG《Alerts》「Always use Cancel to title a button that cancels the alerts action.」按钮文案不能随便写这就是第一次认真读设计规范时最震撼的发现当我们以为自己在讨论 UI 时大多数时候只是在用一堆模糊的词汇进行沟通。Apple 不会只说做个菜单它会继续区分menu一组命令/选项/状态、menu bar menu应用级命令集合、pop-up button选择值、pull-down button在当前上下文触发命令、context menu与当前对象/任务相关的常用动作。Fluent 也不会只说下拉框它会区分menu、dropdown、select、combobox。这种区分的价值在于它直接决定了三件事这个组件是用来选值还是执行动作它属于页面局部还是应用级它应该常驻显示选中值还是临时展开执行命令。当团队讨论 UI 时每个人脑中的概念一致了页面自然就清晰了。2. 大厂设计规范各自的重点四种参照视角easy-vibe 课程并不要求你读完每一份规范而是按参照目的取用它们的强项2.1 参照 Apple学习把概念定义得足够细Apple 最有价值的不是视觉上的克制而是对概念的精确切分。同样是菜单Apple 会明确区分menu、menu bar menu、pop-up button、pull-down button、context menu五种形态并分别说明它们选值还是执行动作属于页面还是应用级常驻还是临时。当你开始用这种粒度思考页面结构会立刻清晰很多。2.2 参照 Apple学习页面层级与克制Apple Human Interface Guidelines 特别适合学习两件事如何在页面中建立清晰的层级如何让控件保持明确又不抢戏。Apple 反复强调Hierarchy、Harmony、Consistency三个关键词落到页面上就是回答三个问题当前页面最重要的信息是什么用户的核心任务是什么哪个动作应当最显眼哪个动作应当退后具体可借鉴的做法包括首屏之上不要过度切碎信息、优先聚焦核心内容用留白、字号与分组建立秩序而不是堆边框不要把所有按钮都做成强强调只有关键动作最显眼。2.3 参照 Material学习清晰的页面结构Material Design 非常适合学习页面如何组织任务流。它的组件与布局规范核心是帮助你确认页面属于导航型还是任务执行型当前页面是让用户阅读、选择还是提交页面上哪些元素要稳定重复、哪些要随上下文变化。借鉴点页面分块清晰、模块职责明确导航区、内容区、操作区划分清楚不同按钮样式对应不同的动作优先级。2.4 参照 Fluent学习组件边界与按钮层级Fluent 2 非常适合后台管理、工具类产品与复杂表单系统它最珍贵的地方是直接告诉你不要混淆概念——比如明确写道如果你要收集信息不要再使用menu而应考虑select、dropdown、combobox。这句话打破了很多人差不多就行的观念。Fluent 2 还非常强调动作层级与组件语义边界设计按钮时可借鉴Primary button区域内最重要的动作Secondary button辅助性动作低强调的Subtle、Transparent按钮用于不应打扰主流程的动作页面里按钮越多越要控制视觉优先级。2.5 参照 Atlassian学习系统地管理页面与按钮Atlassian Design System 适合一个团队要维护大量页面的场景。它强调foundations基础作为共享底座tokens设计令牌作为统一视觉决策的方法components组件作为可复用的交互元素。对页面与按钮最实用的启示是为按钮的尺寸、颜色、圆角、间距制定统一规则固定布局节奏让内容不同的页面共享同一套结构语言。3. 设计页面时对照规范的哪些要点查看一个设计系统时不要先问这页面美不美而要先问下面几个问题。3.1 第一眼优先级是否清晰一个页面通常至少有三层信息主信息当前页面最重要的内容、次级信息帮助理解与补充的内容、次要动作不应打扰主任务的动作。如果三层没有拉开页面就会什么都重要而什么都重要等于什么都不重要。3.2 布局是否服务于任务而不是堆砌模块对照规范时重点检查标题区是否清楚交代了页面目标主内容区是否围绕任务组织操作按钮是否靠近关联内容次要信息是否被弱化。3.3 页面里的动作是否有优先级很多页面一次性摆出 6 个按钮且每个都像 CTA这是层级失控的典型症状。更合理的做法是一个区域通常只保留一个主动作次要动作可以使用描边、文字或更低调的样式有风险的动作不能长得像主动作。4. 设计按钮时对照规范的哪些要点按钮是最容易被随手设计、也最能暴露系统成熟度的部分。4.1 先定语义再定样式不要先想蓝按钮还是黑按钮先问这个按钮扮演什么角色。常用按钮角色可按下表归类按钮类型角色常见样式策略Primary区域内最关键的决策动作实心、高对比、最显眼Secondary辅助性动作描边或低一级强调Tertiary / Text弱动作纯文字或极低视觉存在感Destructive删除、停用、清空等有风险的动作警示色或明确的风险样式Icon button局部工具性动作简洁、贴近上下文4.2 页面里不要有太多 Primary 按钮这是新手最容易踩的坑页面上有 4 个主按钮等于没有主按钮。主按钮的意义恰恰是告诉用户现在该做什么。通用做法是一个主区域只保留一个主按钮取消、返回、关闭一般不应与确认按钮同级额外操作放进次级按钮或菜单里。4.3 按钮要能表达状态变化规范通常会精确定义按钮的多种状态默认态、悬停态hover、聚焦态focus、禁用态disabled、加载态loading、危险态。因为按钮不是静态图片而是用户最高频点击的控件之一。4.4 按钮文案也是设计的一部分保存、保存修改、立即发布、删除项目、移到回收站——这些文案传递的预期完全不同。成熟规范通常要求按钮标签明确表达动作而不是使用含糊词汇。5. 页面与按钮设计 Checklist自己设计页面时可以快速过一遍这份清单页面 Checklist页面标题是否清楚说明当前任务首屏最重要的信息是否一眼可见页面是否按任务流组织而不是按想到什么堆什么每个区域是否只有一个主动作次要内容是否被适度弱化按钮 Checklist这个按钮是主动作还是次动作它凭什么比其他按钮更显眼页面里主按钮是否过多危险动作是否被明确标识按钮文案是否足够具体6. 让 AI 参照大厂规范生成页面三组实战 Prompt这是最实操的部分。很多人让 AI 设计页面时只会说帮我做个设置页高级一点Apple 风格——这种 Prompt 太模糊AI 通常只能模仿出白底、圆角、阴影。对初学者最实用的做法不是自己总结长篇大论而是把设计规范官方原文中的关键句子直接粘给 AI。好处有两个你不需要自己翻译设计思想AI 更容易按官方定义理解页面与按钮。以下示例的引用原文均取自 docs/fr-fr/stage-2/frontend/multi-product-ui/index.md 第 6 节可直接在 Trae 等 AI IDE 中复制使用。6.1 示例一让 AI 参照 Apple 设计设置页先找一句 Apple 的官方引用Apple HIG 概述「Establish a clear visual hierarchy...」建立清晰的视觉层级。然后直接粘给 AIRéférencez cette phrase des Apple Human Interface Guidelines : Establish a clear visual hierarchy... Aidez-moi à concevoir une page de paramètres de sécurité du compte. La hiérarchie de la page doit être claire, les informations importantes en premier, les groupes bien ordonnés.等效中文 Prompt参照 Apple HIG 的这句话Establish a clear visual hierarchy...帮我设计一个账号安全设置页页面层级清晰重要信息优先分组有序。这段写法的关键是你不需要解释太多直接把 Apple 的原话贴进去即可。6.2 示例二让 AI 参照 Fluent 设计后台按钮先找一句 Fluent 的官方引用Fluent 2《Button usage》「Only use one primary button in a layout...」一个布局中只使用一个主按钮。然后直接粘给 AI参照 Fluent 2 的这句话Only use one primary button in a layout... 帮我设计一个团队管理后台的按钮组添加成员按钮最显眼导出、筛选和更多操作按钮更低调删除按钮单独突出。这句话特别适合初学者因为它直接告诉 AI一个区域内不要放太多主按钮。6.3 示例三同时引用页面规范与按钮规范你也可以同时贴两句引用让 AI 同时参照页面与按钮两套准则Apple「Establish a clear visual hierarchy...」 Fluent「Only use one primary button in a layout...」然后直接写参照下面两句设计规范 Apple : Establish a clear visual hierarchy... Fluent : Only use one primary button in a layout... 帮我设计一个项目详情页包含项目介绍、成员、近期动态和设置入口。 页面层级要清晰只保留一个主按钮其余按钮更低调。这种做法的门槛极低你只需要会复制官方原文再加两句需求描述。7. 让 AI 参照按钮规范直接生成按钮如果只想先把按钮做好也可以直接把按钮规范的官方原文贴给 AI。例如 Atlassian 对按钮的定义非常简短「A button triggers an event or action.」按钮触发一个事件或动作可以向 AI 提问参照 Atlassian 的这句话A button triggers an event or action. 帮我设计一套后台管理按钮样式一个主按钮、一个次按钮、一个删除按钮并分别告诉我它们各自的使用场景。这种 Prompt 的范式就是贴官方原文 表达需求非常适合初学者。8. 总结参照设计规范来设计页面与按钮不是模仿某家厂商而是学习四件事用层级组织页面而不是堆砌内容用按钮级别表达动作优先级而不是让所有按钮同样抢眼用规范中的定义、边界与判断标准来指导设计让 AI 参照他人规范时参照的是原则与结构而不只是外包装。当你用这种方式使用规范时参照的就不只是一种风格而是一套成熟的设计思维方式。本教程在 easy-vibe 课程体系中位于 docs/fr-fr/stage-2/index.md 的 Stage 2 前端模块与 UI 设计基础、现代组件库、从设计稿到代码 等章节构成完整链路后续在 现代落地页项目 等实战作业中你会反复用到本文的页面层级五问与按钮五级语义。仓库 examples 目录下的 AI IDE 示例如 trae-linear-dashboard、trae-3d-block-game也演示了如何通过清晰 Prompt 让 AI 生成结构化界面可与本文的 Prompt 方法结合使用。参考来源以下引用均来自各官方设计系统的公开文档原文出处见 docs/fr-fr/stage-2/frontend/multi-product-ui/index.md 的Références一节Apple Human Interface GuidelinesOverview / Menus / Alerts / ButtonsApple ArchiveHow Menus WorkManaging Pop-Up Buttons and Pull-Down ListsMaterial DesignButtons overviewMenusMicrosoft Fluent 2Start designingMenu usageButton usageAtlassian Design SystemFoundationsButton【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考