做网站的公司术语一文搞懂，拒绝需求拖延

改个按钮颜色，建站公司拖一周才动窝？这种憋屈事儿，很多前端新人刚入行时都遇到过。你以为对方是在摸鱼，其实大概率是你们在沟通“黑话”时出现了断层。今天咱们不聊虚的，直接一文搞懂【做网站的公司术语】里那些坑人的词儿，把设计规范里的底层逻辑扒干净，让你以后对接需求时，能像老手一样精准输出，不再被“风格不对”“感觉差点”这种模糊评价卡脖子。

设计原则与职责边界：别越界，但要懂

很多前端初学者刚进公司，最大的困惑不是代码写不出来，而是不知道自己的活儿到底干到哪一步。在正规的设计规范流程里，UI设计师和前端开发的职责边界，就像工地上的砌墙师傅和粉刷师傅，分得很清，但又必须配合。

UI设计师的职责，核心是“视觉输出”和“规范制定”。他们负责产出高保真图（Hi-Fi），定义颜色值、字号、间距、圆角半径。比如，设计师说“这里留白要舒适”，他脑子里想的是 16px 或 24px 的栅格系统，而不是让你凭感觉去猜。如果设计师只给了一张图，没有标注切图规范、交互状态（Hover、Active、Focus），那这个交付是不合格的。

前端开发的职责，核心是“还原实现”和“体验优化”。你的任务不是“画图”，而是用 HTML/CSS/JS 把设计稿“翻译”成代码。这里有个常见的误区：很多新人觉得“像素级还原”就是看哪像哪改哪。错！真正的还原，是基于设计系统（Design System）的组件化实现。

举个实战例子。设计师给了一个卡片组件，里面包含标题、正文、按钮。

错误做法：你盯着图，量了标题距离顶部 10px，左边 12px，然后写死 margin-top: 10px; margin-left: 12px;。
正确做法：你查看设计规范文档，发现全局卡片内边距（Padding）定义为 24px，标题与正文间距（Gutter）定义为 8px。你应该写 padding: 24px;，并在标题和正文之间使用 margin-bottom: 8px; 或者 Flexbox 的 gap: 8px;。

为什么这么强调？因为一旦后续需要适配不同屏幕，或者设计师调整全局间距时，写死像素值的代码会像噩梦一样难维护。

晋升与职业发展路径在这一环节体现得很明显。初级前端（P3/P4）通常只关注“能不能跑”，中级前端（P5/P6）开始关注“好不好维护”和“是否符合规范”，高级前端（P7+）则要参与制定设计规范，甚至推动设计系统的前端落地。如果你还在纠结“这个颜色该用 #333 还是 #000”，那你可能还停留在执行层；如果你能告诉设计师“这个色值在暗色模式下对比度不够，建议改用 #A0A0A0”，那你已经具备了架构师的潜质。

关于报考学历与工作年限要求，虽然行业看重实战，但在大厂和规范严格的甲方公司，学历依然是门槛。通常本科计算机相关专业是起步线，硕士则有更多机会进入核心研发岗。工作年限方面，1-3年是打杂和熟悉流程的阶段，3-5年是独立负责模块并参与规范制定的黄金期。别看不起那些“死板”的规范，那是无数前人踩坑后总结出的效率工具。

布局与间距规范：栅格系统是骨架

说到【做网站的公司术语】，绕不开一个词：栅格系统（Grid System）。这是布局的灵魂，也是新手最容易忽视的地方。很多外包公司或者小团队，布局全靠 margin 和 padding 硬凑，导致页面稍微改动一点，下面全部错位。

正规的设计规范，通常会采用 12 列或 24 列栅格。为什么是 12 或 24？因为它们有最多的因数，方便分割。比如 12 列，你可以 1+11，2+10，3+9，4+8，6+6 等等组合，灵活性极高。

**间距的“8点网格原则”**是业界通用的黄金法则。什么意思？所有的间距、尺寸，尽量是 8 的倍数，或者 4 的倍数（在密集小元素时）。

大区块间距：32px, 48px, 64px
组件内部间距：8px, 16px, 24px
极小间距：4px（如图标与文字之间）

为什么要这样？因为视觉节奏感。如果间距忽大忽小，用户眼睛看着会累，觉得页面“脏”。统一使用 8 的倍数，能让页面产生一种隐性的秩序感。

在 CSS 实现中，我们强烈建议不要写死具体的 px 值，而是使用 CSS 变量或 Sass 变量来管理间距。

:root {--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;
}.card {padding: var(--space-lg); /* 24px */margin-bottom: var(--space-xl); /* 32px */
}.card-title {margin-bottom: var(--space-sm); /* 8px */
}

这样做的最大好处是，当老板突然说“我们要整体风格紧凑一点”时，你只需要修改 :root 里的变量值，全站瞬间生效。这就是规范的力量。

另外，**响应式断点（Breakpoints）**也是布局规范的核心。常见的断点有：

Mobile: < 768px
Tablet: 768px - 1024px
Desktop: > 1024px

在撰写需求文档或代码注释时，必须明确标注每个断点下的布局变化。比如，“在 Tablet 模式下，导航栏折叠为汉堡菜单，卡片由 3 列变为 2 列”。这种明确的描述，能减少 80% 的沟通成本。

色彩与字体：不只是好看，更是信息层级

颜色不是用来“装饰”的，是用来“分层”的。在【做网站的公司术语】中，**设计令牌（Design Tokens）**是个高频词。它是指将设计决策（颜色、字体、阴影等）抽象成可编程的值。

色彩体系通常分为：

品牌色（Brand Color）：代表公司形象，用于主按钮、Logo 等。
功能色（Functional Color）：
- 成功（Success）：绿色，表示操作成功。
- 警告（Warning）：黄色/橙色，表示注意。
- 错误（Error）：红色，表示报错。
- 信息（Info）：蓝色，表示提示。
中性色（Neutral Color）：文字、背景、边框、分割线。这是页面占比最大的颜色，通常是一套灰阶（Gray Scale），从 #FFFFFF 到 #000000，中间要有 5-9 个层级。

关键陷阱：很多新人喜欢用纯黑 #000000 做正文。错！纯黑在白色背景上对比度过高，长时间阅读会刺眼。建议正文使用 #333333 或 #444444，次要文字使用 #666666 或 #999999。

字体规范同样重要。

字体家族（Font Family）：优先使用系统字体栈（System Font Stack），如 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, ...，加载速度最快，体验最好。除非品牌有特殊要求，否则不要随意引入 Web Font。
字号阶梯（Type Scale）：不要随便用 13px、14px、15px 这种散乱的值。建议建立字号阶梯，比如 12px (Caption), 14px (Body), 16px (Subheading), 18px (Heading 3), 24px (Heading 2), 32px (Heading 1)。
行高（Line Height）：正文行高建议 1.5 - 1.6，标题行高建议 1.2 - 1.3。行高过小，文字拥挤；行高过大，段落松散。

这里引用一个权威细节：根据**中国互联网络信息中心(CNNIC)**发布的《中国互联网络发展状况统计报告》，移动互联网用户在碎片化时间阅读网页时，对文字的可读性（Readability）要求极高。模糊的字号和糟糕的行高，会直接导致用户跳出率上升。所以，字体规范不是美学问题，是转化率问题。

在代码层面，我们建议将字体规范封装为 Mixin 或 Utility Class。

/* _typography.scss */
$font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
$line-height-body: 1.6;h1, h2, h3, h4 {font-family: $font-stack;line-height: 1.3;margin-bottom: 1rem;
}p, li {font-family: $font-stack;font-size: 1rem; /* 16px */line-height: $line-height-body;color: var(--text-primary);
}.text-small {font-size: 0.875rem; /* 14px */color: var(--text-secondary);
}

组件设计与交互状态：细节决定专业度

组件是前端的积木。在【做网站的公司术语】中，**组件状态（Component States）**是衡量前端专业度的试金石。一个按钮，不仅仅是静态的一张图，它有至少 5 种状态：

Default：默认状态。
Hover：鼠标悬停。
Active/Pressed：鼠标按下。
Focus：键盘 Tab 键聚焦（无障碍访问 A11y 的关键！）。
Disabled：禁用状态。

很多新手只写了 Default，忽略了其他状态。结果用户点击按钮时，没有任何反馈，或者键盘操作时看不到焦点在哪里，体验极差。

**阴影（Shadow）**也是组件设计的重要部分。阴影不是随便加个 box-shadow 就行的。通常分为 L1（轻微，用于卡片悬浮）、L2（中等，用于模态框）、L3（重度，用于 Popover）。阴影的透明度、模糊半径、偏移量，都要在设计规范中明确定义。

**圆角（Border Radius）**同理。小元素（如 Tag）用 4px，中元素（如 Input）用 6px 或 8px，大元素（如 Modal）用 12px 或 16px。保持圆角的一致性，能让界面看起来更统一。

交互反馈方面，遵循“即时性”原则。用户操作后，系统应在 100ms 内给予视觉反馈（如按钮变色、加载图标出现）。如果操作耗时超过 300ms，必须显示 Loading 状态。如果超过 1 秒，最好提供进度条或文案提示。

这里分享一个实战技巧：在代码中，尽量使用伪类选择器来处理状态，而不是用 JS 切换 class。

.btn {background-color: var(--primary-color);color: white;border: none;padding: 10px 20px;border-radius: var(--radius-md);cursor: pointer;transition: all 0.2s ease;
}.btn:hover {background-color: var(--primary-dark);transform: translateY(-1px);box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}.btn:active {transform: translateY(0);box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}.btn:focus-visible {outline: 2px solid var(--primary-color);outline-offset: 2px;
}.btn:disabled {background-color: var(--neutral-300);color: var(--neutral-500);cursor: not-allowed;opacity: 0.7;
}

注意 :focus-visible，这是现代浏览器支持的伪类，只在键盘聚焦时显示轮廓，鼠标点击时不显示，完美平衡了美观和无障碍。

前端实现与代码落地：规范即代码

最后，聊聊【做网站的公司术语】中最硬核的部分：代码落地。规范如果只停留在 Figma 或 Sketch 里，那就是废纸。必须转化为代码，才能发挥价值。

目前业界主流的方案有两种：

CSS 预处理器 + 变量：Sass/Less 定义全局变量，CSS 中引用。简单直接，适合中小型项目。
Design Tokens 工具链：使用 Style Dictionary 等工具，将 JSON 格式的 Tokens 自动转换为 CSS、iOS、Android 等平台的代码。适合大型多端项目。

对于初学者，推荐从 Sass 变量入手。建立 _variables.scss，集中管理颜色、字体、间距、断点。

/* _variables.scss */
// Colors
$primary: #007bff;
$primary-dark: #0056b3;
$neutral-100: #f8f9fa;
$neutral-900: #212529;// Typography
$font-base: 16px;
$font-small: 14px;// Spacing
$spacing-unit: 8px;// Breakpoints
$breakpoint-md: 768px;

然后在组件中引用：

.card {background: $neutral-100;border: 1px solid $neutral-100;padding: $spacing-unit * 3; // 24pxborder-radius: 8px;@media (min-width: $breakpoint-md) {padding: $spacing-unit * 4; // 32px}
}

**代码审查（Code Review）**是保证规范执行的关键环节。在 Code Review 时，重点检查：