Easy Vibe 前端实战参考 Apple、Material、Fluent 设计规范用 AI 生成层级清晰的页面与按钮【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe本文基于 easy-vibevibe coding 101课程 Stage 2「前端开发」中的 multi-product-ui 章节讲解如何用 Apple HIG、Material Design、Fluent 2、Atlassian Design System 四套官方设计规范来建立页面层级和按钮层级的判断标准并给出一套可直接复制的 AI 提示词模板。读完后你能把页面要高级一点、按钮要像 Apple 一点这类模糊需求转化为可验证的设计判断和可执行的 AI 生成方案。1. 核心问题到底该参考什么很多团队会说我想让页面更像 Apple 一点按钮想做得更高级一点但真正动手时往往卡在一个问题上到底该参考什么盯着截图模仿学到的只是像不像。但打开 Apple、Google、Microsoft、Atlassian 的官方设计规范你会发现它们真正厉害的地方不是视觉风格而是把设计问题讲清楚页面先突出什么、按钮如何分级、操作怎么强调——这些判断标准才是核心。参考设计规范不是为了做得像谁而是学会别人怎么做判断。这里也澄清一个常见疑问设计规则早已被训练进模型、被设计工具默认吸收甚至贴几张截图 AI 就能学会为什么现在还要学这些规则答案是我们仍然有必要知道这些规则从哪来、为什么这样定——只有理解了规则的来源才能在 AI 生成结果不理想时做有效的迭代修正。2. 先看官方原文团队里那些随口说的词其实都不准如果你以前觉得设计规范不就是讲讲风格吗先看几条官方原文。平时我们在团队里经常会这样说做个下拉框这里放个菜单菜单栏加几个功能这里放两个按钮一个确认一个取消听起来没问题但在大厂规范里这些词都不是模糊概念而是被拆得非常细平时随口说的话官方原文简单说做个菜单Apple HIGA menu reveals its options...Menu是拿来做操作的菜单栏里放功能Apple HIGmenu bar menus contain all the commands...这是应用顶部的命令菜单做个下拉框Apple 文档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 2If you need to collect information from people, try a select, dropdown, or combobox instead.Menu不是拿来选值的菜单也能当导航吧MaterialMenus should not be used as a primary method for navigation within an app.Menu不是主导航按钮随便写个 OK / CancelApple HIGAlways use Cancel to title a button that cancels the alerts action.按钮文字不能随便写上表引文分别来自 Apple Human Interface Guidelines 的 Menus / Alerts 页面、Apple Cocoa 文档的 Managing Pop-Up Buttons and Pull-Down Lists 章节、Fluent 2 的 Menu usage 页、Material 的 Menus 组件页均可在对应官方文档中查证。这就是第一次真正看设计规范时最容易被震到的地方我们平时以为自己在讨论 UI实际上很多时候只是在用一堆含糊词交流。Apple 不会只说做个菜单它会继续区分menu一组命令、选项或状态menu bar menu应用级命令集合pop-up button选择一个值pull-down button在当前上下文里触发命令context menu与当前对象或任务相关的常用动作Fluent 不会只说下拉框它会继续区分menudropdownselectcombobox**这就是设计规范的必要性。**它不是为了让页面显得更专业而是为了让团队在讨论 UI 时不再每个人脑子里都是不同的东西。3. 设计规范为什么能帮你把页面做清楚看完上面的原文你会发现一个关键点设计规范不是锦上添花而是在先把词说准。很多页面不好看不是因为配色不够高级而是因为信息层级混乱。很多按钮不好用也不是因为圆角不对而是因为主按钮太多用户不知道该点哪个危险按钮和普通按钮看起来差不多页面里所有按钮都在抢注意力不同页面里的按钮样式和语义不一致成熟的设计规范恰好就是在解决这些问题。它们通常会定义规范内容它解决什么问题页面层级先看哪里、后看哪里信息怎么组织视觉基础颜色、间距、字体、圆角、阴影怎样统一按钮层级主按钮、次按钮、文字按钮、危险按钮如何区分状态规则hover、focus、disabled、loading 怎么表现交互语义哪个按钮是确认哪个是取消哪个是更多操作所以设计规范真正提供的不是一套皮肤而是一套判断标准。4. 参考四套大厂规范时各自重点看什么4.1 参考 Apple学习定义得足够细Apple 最值得学的不只是视觉上的克制感而是它会把概念定义得非常细。同样是很多团队口中的菜单或下拉框Apple 会继续往下拆见第 2 节五种组件区分。这套区分非常重要因为它会直接影响这个组件是拿来选值还是拿来做动作它属于页面局部还是属于应用级它应该长期显示当前选中值还是只临时展开命令当你开始按这种粒度思考时你设计出来的页面就会一下子清楚很多。4.2 参考 Apple学习页面层级和克制感Apple Human Interface Guidelines 特别适合学习两件事页面如何建立清晰层级、控件如何在不喧宾夺主的前提下保持明确。Apple 强调Hierarchy、Harmony、Consistency三大原则这意味着页面设计时要回答当前页面最重要的信息是什么用户的主要任务是什么哪个操作该最显眼哪个操作应该退后如果你参考 Apple 来设计页面可以重点借鉴首屏信息不要太碎核心内容先聚焦用留白、字号、分组建立秩序而不是靠堆很多边框按钮不要全部高强调只有关键动作才应该最突出4.3 参考 Material学习清晰的页面结构Material Design 很适合学习页面是怎么组织任务流的。它的很多组件和布局规范核心都在帮助你明确页面是浏览型还是执行任务型当前页面是让用户阅读、选择还是提交一个页面里哪些元素应该稳定重复哪些元素应该响应上下文变化如果你参考 Material 来设计页面可以重点借鉴页面区块清楚模块职责明确导航、内容区、操作区分工清晰不同按钮样式对应不同操作优先级4.4 参考 Fluent学习组件边界和按钮层级Fluent 2 很适合后台、工具型产品和复杂表单系统。它最值得学的地方是会直接告诉你不要混用概念——例如它明确写到如果你要collect information就不要继续用menu而应该考虑select、dropdown、combobox。这句话非常重要因为它把很多人脑中的都差不多打碎了。Fluent 2 也很重视操作层级、组件语义边界、密集信息场景下的清晰度。如果你参考 Fluent 来设计按钮可以重点借鉴Primary button用来承接当前最重要的动作Secondary button用来承接支持性动作Subtle、Transparent这类弱强调按钮用于不该抢主流程的操作页面里的按钮数量越多越要控制视觉优先级4.5 参考 Atlassian学习系统化地管理页面和按钮Atlassian Design System 特别适合一个团队做很多页面的情况。它强调foundations是共享基础tokens是统一视觉决策的方法components是被反复复用的交互构件如果你参考 Atlassian 来做页面和按钮最有价值的是把按钮尺寸、颜色、圆角、间距做成统一规则把页面布局的节奏固定下来让不同页面虽然内容不同但结构语言一致5. 设计页面时应该参考规范里的哪些点当你看一个设计系统时不要先问这个页面好不好看而要先问下面几个问题。5.1 页面第一眼主次是不是明确一个页面通常至少要有三层主信息当前页面最重要的内容辅助信息帮助理解或补充的内容次级操作不应该干扰主任务的动作如果三层没有拉开页面就会都重要等于都不重要。5.2 页面布局是不是服务任务而不是堆模块参考规范时可以特别注意标题区有没有明确页面目标主内容区是不是围绕任务组织操作按钮是不是贴近相关内容次要信息有没有被弱化5.3 页面里的操作是不是有优先级很多页面一眼看过去有 6 个按钮结果每个按钮都像 CTA这是典型的层级失控。更合理的方式是一个区域通常只有一个主动作次级动作可以用描边、文字按钮或更弱的样式风险动作不要和主动作长得一样6. 设计按钮时应该参考规范里的哪些点按钮是最容易被随手设计的部分但也是最能暴露系统是否成熟的部分。6.1 按钮先分语义再分样式不要先想蓝色按钮还是黑色按钮先想这个按钮是什么角色。常见按钮角色可以这样分按钮类型作用常见样式策略Primary当前区域最关键动作实心、高对比、最显眼Secondary支持性动作描边或低一级强调Tertiary / Text弱操作文字或低视觉占比Destructive删除、停用、清空等风险操作警示色或明确风险样式Icon button局部工具操作简洁、靠近上下文6.2 一个页面不要有太多 Primary Button这是很多新手最容易踩的坑。如果页面上有 4 个主按钮那么等于没有主按钮——主按钮的意义本来就是告诉用户现在最应该做什么。你可以借鉴很多设计系统的共同做法一个主要区域通常只保留一个主按钮取消、返回、关闭一般不和确认按钮抢同级更多操作放到次级按钮或菜单中6.3 按钮要能表达状态变化设计规范通常会对按钮状态写得很清楚默认态、悬停态、聚焦态、禁用态、加载态、危险态。这很重要因为按钮不是一张静态图而是用户操作过程中最常被触发的控件之一。6.4 按钮文案也属于设计的一部分按钮文案不只是文案问题它直接影响用户理解。例如保存保存更改立即发布删除项目移到回收站这些文案传达的心理预期完全不同。成熟规范通常会要求按钮标签清楚表达动作而不是使用含糊词。7. 一个很实用的页面与按钮设计清单你自己设计页面时可以先快速过一遍这张清单页面清单页面标题是否清楚说明当前任务首屏最重要的信息是否一眼可见页面是不是按任务流程组织而不是按想到什么放什么同一个区域里是否只有一个主要动作次要内容是否被适当弱化按钮清单这个按钮是主动作还是次动作它为什么值得比别的按钮更显眼页面里是不是有太多主按钮危险操作是否被明确标识按钮文案是否足够具体8. 实战怎样用 AI 参考别人的规范来设计页面这一节最实用。很多人让 AI 设计页面时只会说帮我做一个设置页面要高级一点参考苹果风格这类提示词太模糊了AI 最后通常只能模仿白底、圆角、阴影。对新手来说更实用的方式不是自己总结一大段而是直接把规范原文里的关键句贴给 AI。这样做有两个好处你不用自己先翻译一遍设计思想AI 更容易按官方定义去理解页面和按钮8.1 例子一让 AI 参考 Apple 设计一个设置页面先找一句 Apple 原文Apple HIG Overview 页Establish a clear visual hierarchy...你可以直接这样贴给 AI参考 Apple Human Interface Guidelines 里的这句话 Establish a clear visual hierarchy... 帮我设计一个账号安全设置页面。 要求页面层级清楚重要信息放前面分组整齐一点。这样写的重点是不用你自己解释太多直接把 Apple 的原话贴进去。8.2 例子二让 AI 参考 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一个区域不要放太多主按钮。8.3 例子三让 AI 同时参考页面规范和按钮规范你也可以一次贴两句原文让 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... 帮我设计一个项目详情页。 页面包含项目介绍、成员、最近活动和设置入口。 页面层级清楚一点主按钮只保留一个其他按钮弱一点。这种方式特别适合新手因为你只要会复制原文再加两句自己的需求就够了。8.4 只设计按钮直接贴按钮规范原文如果你只想先做按钮也可以直接贴按钮规范原文。例如 Atlassian Design System 对按钮的定义很短Atlassian Button 组件页A button triggers an event or action.你可以这样问 AI参考 Atlassian 的这句话 A button triggers an event or action. 帮我设计一套后台页面按钮样式。 我要有主按钮、次按钮、删除按钮顺便告诉我分别用在什么地方。这类提示词尤其适合新手基本就是贴原文 说需求。9. 在 easy-vibe 课程中的位置与配套用法从课程结构看本章在 easy-vibe 的 Stage 2初中级开发前端模块 中承接 ui-design 章节属于先学 UI 基础、再学用规范做判断的进阶环节。它和课程前后两个章节形成互补与组件库章节配合前一章 modern-component-library 教你用 shadcn/ui、HeroUI、Ant Design、Material UI 等组件库快速搭建界面。本章提供的按钮角色表和单区域单主按钮规则正好可以作为验收标准——组件库能解决样式统一但这个按钮该用 Primary 还是 Secondary这类语义判断仍需靠设计规范。与 Skills 插件章节配合后一章 llm-skills-beautiful 演示了通过 Skills 插件如frontend-designskill让 AI 自动加载专业设计规范。本章的把规范原文关键句贴进提示词是它的轻量前置版本不安装任何插件仅靠贴原文 说需求的提示词模式新手就能获得可复制的收益。两者可以叠加使用——先用本章方法确认 AI 理解了层级规则再用 Skills 固化风格。多语言版本本章同时维护有 中文版与 德文版等多语言文档内容一致可按需选择。10. 小结参考 UI 设计规范设计页面和按钮最重要的不是做得像谁而是学会下面这几件事用层级组织页面而不是把内容堆上去用按钮分级表达操作优先级而不是让所有按钮都一样抢眼用设计规范里的定义、边界和判断标准指导设计让 AI 参考别人规范时参考的是原则和结构而不是只参考皮肤当你这样使用规范时你参考到的就不只是一个风格而是一套成熟的设计思考方式。参考资料以下页面均来自官方设计系统或官方文档可在对应官网按名称检索Apple Human Interface GuidelinesOverview、Menus、Alerts、ButtonsApple 文档库How Menus Work、Managing Pop-Up Buttons and Pull-Down ListsMaterial DesignButtons overview、MenusMicrosoft Fluent 2Start designing、Menu usage、Button usageAtlassian Design SystemFoundations、Button【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考