Easy-Vibe开发篇阅读笔记（三）——前端开发之UI设计规范与多产品界面

码途漫谈

562人浏览 · 2026-04-25 19:47:54

码途漫谈 · 2026-04-25 19:47:54 发布

阅读原文：参考 UI 设计规范设计页面和按钮

一、本章核心学习目标

理解设计规范的核心价值，搞懂为什么要参考大厂的 UI 规范，而不是自己瞎做
学会从 Apple、Material、Fluent、Atlassian 这些大厂规范里，提取最有价值的设计思路
掌握页面层级和按钮层级的设计方法，让页面清晰、好用
学会怎么让 AI 参考这些设计规范，生成专业的页面和按钮，不用自己啃完所有规范

二、为什么要参考 UI 设计规范？

很多人觉得，设计规范不就是讲讲风格吗？其实不是，它真正解决的是「模糊沟通」的问题：

我们平时讨论 UI 的时候，经常会说「做个下拉框」「加个菜单」，但每个人脑子里的东西都不一样。而大厂的设计规范，会把这些概念拆得非常细，让团队里所有人对同一个词的理解完全一致。

比如同样是「下拉」，Apple 会拆成：

pop-up list：用来选一个值
pull-down list：用来触发当前上下文的命令

同样是「菜单」，Fluent 会明确告诉你：

要收集信息，用 select/dropdown，不要用 menu
menu 不能用来做导航，也不能用来选值

这就是设计规范的价值：它不是给你一套皮肤，而是给你一套判断标准，帮你解决：

页面信息层级混乱的问题
按钮优先级乱，用户不知道点哪个的问题
不同页面组件语义不一致的问题

平时随口说的话	大厂规范的精准定义
“做个菜单”	Apple: “A menu reveals its options...”，用来做操作
“菜单栏里放功能”	Apple: “menu bar menus contain all the commands...”，应用级命令集合
“做个下拉框”	Apple: “A pop-up list lets the user choose one option among several.”，用来选值
“也做个下拉框”	Apple: “A pull-down list is generally used for selecting commands in a specific context.”，用来触发命令
“菜单也能拿来筛选吧”	Fluent: “If you need to collect information from people, try a select, dropdown, or combobox instead.”，筛选不能用 menu
“菜单也能当导航吧”	Material: “Menus should not be used as a primary method for navigation within an app.”，导航不能用 menu
“按钮随便写个 OK / Cancel”	Apple: “Always use 'Cancel' to title a button that cancels the alert’s action.”，按钮文字不能随便写

三、大厂规范里，重点看什么？

不同的大厂规范，有不同的侧重点，不用全学，按需参考就行：

2.1 参考 Apple：学习「定义得足够细」

Apple 最厉害的，是把每个组件的定义拆到极致，比如同样是下拉 / 菜单，它会拆出 5 种不同的类型，告诉你每个的用途：

menu：一组命令、选项或状态
menu bar menu：应用级的命令集合
pop-up button：用来选一个值
pull-down button：当前上下文的命令
context menu：和当前对象相关的常用动作

同时它还教你做页面的克制感：

首屏信息不要太碎，核心内容先聚焦
用留白、字号、分组建立秩序，不是堆边框
按钮不要全部高强调，只有关键动作才突出

2.2 参考 Material：学习清晰的页面结构

Material Design 最适合学「页面怎么组织任务流」，它会帮你明确：

页面是浏览型，还是执行任务型
当前页面是让用户阅读、选择，还是提交
导航、内容区、操作区的分工

它的组件和布局，都是围绕任务来的，模块职责非常清晰，适合做功能型产品。

2.3 参考 Fluent：学习组件边界和按钮层级

Fluent 2 最适合后台、工具型产品，它最核心的是帮你打破「都差不多」的误区：

明确告诉你不同组件的边界，比如 menu 不能用来选值
按钮的层级非常清晰：Primary 是最重要的动作，Secondary 是支持性的，弱按钮用来放不重要的操作
密集信息场景下，怎么保证清晰度

2.4 参考 Atlassian：学习系统化管理

Atlassian 的规范，最适合团队做多个页面的场景，它教你：

把颜色、尺寸、间距做成统一的规则，所有页面都复用
把组件做成可复用的构件，不同页面的按钮、输入框都一致
让不同页面虽然内容不同，但结构语言完全统一

四、设计页面时，要参考哪些点？

看设计规范的时候，不要先看好不好看，先问自己这几个问题：

3.1 页面第一眼，主次是不是明确？

一个页面必须有三层信息，不能都一样重要：

主信息：当前页面最重要的内容，用户第一眼就要看到
辅助信息：帮助理解的补充内容，要弱化一点
次级操作：不干扰主任务的动作，要退到后面

如果三层没拉开，就会变成「都重要 = 都不重要」，用户进来不知道该干嘛。

3.2 页面布局，是不是服务任务？

不要堆模块，要围绕用户的任务来组织：

标题区有没有明确页面的目标？
主内容区是不是围绕任务来组织？
操作按钮是不是贴近相关的内容？
次要信息有没有被弱化？

3.3 页面里的操作，是不是有优先级？

很多新手会做一堆按钮，每个都像主按钮，这就是层级失控。
正确的做法是：

一个区域通常只有一个主动作
次级动作用描边、文字按钮弱化
风险操作（比如删除）不要和主动作长得一样

五、设计按钮时，要参考哪些点？

按钮是最容易随手做的，但也是最能暴露系统是否成熟的地方。

4.1 按钮先分「语义」，再分「样式」

不要先想「蓝色还是黑色」，先想这个按钮是什么角色：

按钮类型	作用	样式策略
Primary	当前区域最关键的动作	实心、高对比、最显眼
Secondary	支持性的次要动作	描边、低一级的强调
Tertiary / Text	弱操作	纯文字、低视觉占比
Destructive	删除、清空这类风险操作	警示色、明确的风险标识
Icon button	局部的工具操作	简洁、靠近上下文

4.2 一个页面不要有太多 Primary Button

这是新手最容易踩的坑：如果页面有 4 个主按钮，等于没有主按钮。
主按钮的意义，就是告诉用户「现在最该做什么」，所以：

一个主要区域，通常只保留一个主按钮
取消、返回这类操作，不要和确认抢同级
更多操作，放到次级按钮或者菜单里

4.3 按钮要能表达状态变化

按钮不是静态图，它要告诉用户当前的状态：

默认态、悬停态、聚焦态
禁用态、加载态、危险态
这些状态都要有明确的视觉区分，让用户知道自己能不能点，点了之后有没有反应。

4.4 按钮文案，也是设计的一部分

按钮的文字，直接影响用户的理解，不能随便写：

不要写模糊的「OK」，要写具体的「保存更改」「立即发布」
危险操作要写清楚「删除项目」「移到回收站」，让用户有心理预期
文案要直接表达动作，不要用含糊词

六、实用的设计自检清单

你自己做页面的时候，先过一遍这个清单，就能避开大部分坑：

页面清单

页面标题是不是清楚说明了当前任务？
首屏最重要的信息，是不是一眼就能看到？
页面是不是按任务流程组织，不是想到什么放什么？
同一个区域里，是不是只有一个主要动作？
次要内容，是不是被适当弱化了？

按钮清单

这个按钮是主动作还是次动作？
它为什么值得比别的按钮更显眼？
页面里是不是有太多主按钮？
危险操作，是不是被明确标识出来了？
按钮文案是不是足够具体？

七、怎么让 AI 参考这些规范来设计？

很多人让 AI 做页面，只会说「帮我做个设置页，要苹果风格」，结果 AI 只会模仿白底圆角，根本没学到核心。

正确的做法是：直接把大厂规范的原文贴给 AI，不用你自己翻译，AI 能看懂。

例子 1：参考 Apple 做设置页

参考 Apple Human Interface Guidelines 里的这句话：
"Establish a clear visual hierarchy..."

帮我设计一个账号安全设置页面。
要求页面层级清楚，重要信息放前面，分组整齐一点。

例子 2：参考 Fluent 做后台按钮

参考 Fluent 2 里的这句话：
"Only use one primary button in a layout..."

帮我设计一个团队管理后台的按钮。
添加成员按钮最明显，导出、筛选、更多操作弱一点，删除按钮单独突出。

例子 3：同时参考页面和按钮规范

参考下面两句设计规范原文：
Apple: "Establish a clear visual hierarchy..."
Fluent: "Only use one primary button in a layout..."

帮我设计一个项目详情页。
页面包含项目介绍、成员、最近活动和设置入口。
页面层级清楚一点，主按钮只保留一个，其他按钮弱一点。

这种方式对新手特别友好，你只要复制一句规范原文，再加自己的需求，AI 就能做出专业的设计，不用你自己啃完所有规范。