1. 页面设计不是“画图”而是信息优先级的空间编排很多人第一次接触页面设计脑子里冒出来的第一个念头是“我该用什么颜色”“配什么字体”“要不要加个渐变”。这种思路不能说错但顺序完全反了。页面设计的本质不是装饰而是信息优先级的空间编排——你先得想清楚这一屏里什么东西最重要、什么东西次要、什么东西可以藏起来然后才轮到颜色和字体去服务这个结构。我见过太多前端项目功能都跑通了但页面一打开就让人不知道该看哪里。按钮和标题一样大错误提示和正常文案一个颜色主操作和次要操作挤在一起。这不是审美问题是层级缺失。用户的眼睛在页面上需要一个明确的“入口”你得用尺寸、颜色、间距、位置这四个杠杆把信息的重要性翻译成视觉上的差异。举个最朴素的例子一个登录页。最重要的信息是什么是“登录”这个动作。那输入框和按钮就应该占据视觉重心品牌 Logo 可以大但颜色要弱辅助链接忘记密码、注册要小且颜色淡。如果你把“忘记密码”做得和“登录”按钮一样醒目用户就会犹豫甚至点错。这就是层级编排的价值。从工程角度看页面设计其实是一套约束系统。你定好了间距的基数比如 4px 或 8px 的倍数、字号的阶梯比如 12/14/16/20/24/32、颜色的语义主色、成功、警告、危险、中性剩下的工作就是在这个约束里做排列组合。没有约束的设计改一处崩三处维护成本极高。所以这一篇不打算跟你聊“怎么做出好看的效果”而是想把这套约束系统怎么搭、层级怎么定、常见页面类型怎么套从头到尾捋一遍。不管你是刚入行的前端还是写了几年业务代码但一直对设计没底的后端转全栈看完至少能自己独立把页面撑起来不用每次都等设计稿。2. 先定间距和字号再谈颜色和圆角2.1 为什么间距系统比配色方案更值得先花时间配色可以后期调间距一旦乱了整个页面就像没对齐的瓷砖怎么补都别扭。间距系统的核心是基数。业界最常用的是 4px 和 8px 两种基数。4px 更细腻适合信息密度高的后台系统8px 更粗放适合移动端和展示型页面。我的建议是统一用 8px 作为主基数4px 作为半档补充。也就是说所有间距都从 {4, 8, 16, 24, 32, 48, 64} 这个集合里取。为什么是这几个数因为它们之间是倍数关系视觉上能形成稳定的节奏。你随手写个margin: 13px在单页里可能看不出问题但十个页面拼在一起节奏就散了。具体怎么落地在 CSS 里定义一组变量:root { --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px; }然后规定组件内部元素间距用--space-1或--space-2组件与组件之间用--space-3或--space-4区块与区块之间用--space-5以上。这条规则一旦定下来页面就不会出现“这里挤那里空”的随机感。提示不要用margin同时控制上下间距容易发生外边距合并。统一用父容器的gap或者单向margin-bottom排查问题时省一半时间。2.2 字号阶梯别超过五档且必须拉开差距字号最忌讳的是“差不多大”。14px 和 15px 放在一起用户分不清谁是重点视觉上还显得脏。字号阶梯的原则是相邻两档至少差 2px且用途唯一。一套够用的字号系统大概是这样层级字号行高用途页面主标题28-32px1.3每个页面只有一个区块标题20-24px1.4卡片标题、模块标题正文强调16px1.6关键正文、按钮文字正文14px1.6绝大多数内容辅助文字12px1.5时间戳、说明、标签行高这个参数经常被忽略。正文行高低于 1.5长段落读起来会累高于 1.8段落又显得松散。1.6 是个比较稳的中间值。标题行高可以压到 1.3 左右因为标题通常只有一两行紧凑一点更有力量感。2.3 颜色只做三件事区分层级、表达状态、传递品牌颜色系统最容易失控。新手常犯的错是“这个蓝色好看那个绿色也不错”最后页面里出现七八种颜色像打翻的调色盘。正确的做法是把颜色分成三类每类只留必要的数量。第一类是中性色负责文字、背景、边框。文字至少要有三档主文字接近黑如 #1a1a1a、次文字灰如 #666、占位文字浅灰如 #999。背景两档页面底色#f5f5f5 或纯白、卡片底色纯白或极浅灰。边框一档就够#e0e0e0。第二类是语义色负责状态表达成功绿、警告橙、危险红、信息蓝。每个状态只需要一个主色不要搞深浅两套除非你有明确的 hover 需求。第三类是品牌色通常就是主操作按钮的颜色。一个页面里品牌色出现的面积不应该超过 10%它是用来“点睛”的不是用来铺底的。:root { --text-primary: #1a1a1a; --text-secondary: #666666; --text-placeholder: #999999; --bg-page: #f5f5f5; --bg-card: #ffffff; --border: #e0e0e0; --brand: #2563eb; --success: #16a34a; --warning: #d97706; --danger: #dc2626; }这套变量定下来页面里所有颜色都从这里取改主题的时候只动这一处。这就是约束系统的威力。3. 常见页面类型的骨架拆解列表、详情、表单、仪表盘3.1 列表页搜索区、操作区、表格区三段式列表页是后台系统里出现频率最高的页面类型。它的骨架其实非常固定顶部搜索筛选区、中部操作按钮区、下部数据表格区。这三段之间的间距用--space-4段内元素用--space-2。搜索区通常放 3 到 5 个筛选项超过 5 个就要考虑折叠。为什么是 5 个因为一行放 4 到 5 个输入框在 1440px 宽度下刚好不换行超过就会挤成两行视觉上很碎。筛选项的标签和输入框要对齐标签宽度固定比如 80px输入框自适应。操作区放“新建”“批量删除”“导出”这类按钮。这里有个经验主操作放最左或最右但不要和危险操作挨着。“新建”和“批量删除”如果并排用户很容易误点。中间用间距或者一个分隔线隔开。表格区是重头戏。列宽不要平均分配按内容重要性来核心字段名称、状态给宽一点时间、ID 这类给窄一点。状态列用带颜色的标签Tag而不是纯文字一眼就能扫出哪些是异常。表格行高控制在 48px 到 56px 之间太矮了挤太高了翻页累。注意表格里的操作列编辑、删除不要超过三个。超过三个就收进“更多”下拉菜单否则表格右侧会非常臃肿。3.2 详情页信息分组比信息罗列重要详情页最容易做成“字段堆砌”——把所有属性从上到下排一遍用户看完也不知道重点在哪。正确的做法是按业务语义分组。比如一个订单详情可以分成“订单基本信息”“收货信息”“商品明细”“支付信息”四组每组用一张卡片包起来卡片之间用--space-4隔开。每组内部的字段用“标签 值”的形式排列标签用次文字色值用主文字色。一行放两个字段还是三个字段取决于字段内容的长度。如果值可能很长比如地址就让它独占一行。详情页的顶部通常需要一个摘要区把最关键的信息状态、金额、时间用大字号突出出来。这个摘要区是用户打开页面第一眼要看的东西不能省。3.3 表单页标签位置决定填写效率表单的标签位置有三种左对齐、右对齐、顶部对齐。左对齐适合字段少、标签短的场景右对齐适合字段多、需要快速扫视标签的场景顶部对齐适合移动端和字段名较长的场景。在后台系统里我一般推荐右对齐标签 固定标签宽度。因为右对齐让标签和输入框之间的距离最短眼睛移动路径短填写效率高。标签宽度根据最长的标签来定比如 100px所有标签都右对齐到这个宽度。表单的字段顺序也有讲究先易后难先必填后选填。把简单的、必填的放前面用户填了几个之后会有“已经开始了”的心理惯性不容易中途放弃。选填字段可以折叠起来默认不展示。校验提示要放在输入框下方用危险色字号 12px。不要用弹窗提示校验错误弹窗会打断填写节奏用户关掉弹窗还得重新找是哪个字段错了。3.4 仪表盘卡片网格 图表分区仪表盘的核心是“一眼看全局”。布局上用卡片网格每个卡片承载一个指标或一个图表。网格的列数根据屏幕宽度自适应大屏 4 列中屏 2 列小屏 1 列。卡片内部的结构是标题小字号、次文字色 核心数值大字号、主文字色 辅助说明小字号、次文字色。核心数值要足够大至少 28px让用户扫一眼就能抓住。图表区域要注意不要在一屏里放超过 4 个图表。图表太多每个都变小反而看不清趋势。如果指标确实多用 Tab 切换或者分页。仪表盘的颜色使用要克制。图表可以用品牌色的不同透明度来区分系列不要每个图表换一种颜色。整个仪表盘的主色调应该统一否则看起来像拼凑的。4. 响应式不是媒体查询堆砌而是断点策略4.1 断点怎么定跟着内容走别跟着设备走很多人定断点是照着设备来的768px 是平板375px 是手机。但设备尺寸千变万化照着设备定断点永远追不上。正确的做法是跟着内容走——当内容开始挤、开始换行难看的时候就是断点该出现的地方。实际操作中我会先定三个核心断点1200px 以上桌面宽屏多列布局768px 到 1200px桌面窄屏或平板减少列数768px 以下移动端单列布局这三个断点覆盖了绝大多数场景。如果某个页面在 900px 左右特别难看再加一个 900px 的断点但不要为了每个设备都加断点。4.2 用 Grid 和 Flex 做自适应少写媒体查询媒体查询写多了维护起来是噩梦。能用grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))解决的事情就不要写三个媒体查询。这行代码的意思是每列最小 280px能放几列放几列剩余空间平均分。卡片列表、图片墙用这个方案一行代码搞定响应式。Flex 布局里flex-wrap: wrap配合min-width也能实现类似效果。关键是给子元素一个合理的最小宽度让它在该换行的时候自然换行。.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }4.3 移动端要做的减法隐藏、折叠、堆叠移动端不是把桌面端缩小而是做减法。桌面上并排的三个筛选框移动端要堆叠成三行桌面上表格的八列移动端要隐藏次要列只留核心两三列桌面上侧边栏展开的菜单移动端要收进抽屉。具体策略隐藏非核心的辅助信息如创建时间、操作人在移动端可以隐藏点进详情再看。折叠筛选项超过三个就折叠默认只展示一个搜索框。堆叠横向排列的按钮组改成纵向排列或者只保留主操作次要操作收进“更多”。移动端的点击区域至少 44px x 44px这是手指能准确点击的最小尺寸。按钮、链接、图标都要满足这个标准否则用户会频繁点错。5. 设计稿之外的功夫状态、空态、加载态5.1 一个页面至少有四种状态别只做“有数据”那一种新手做页面通常只做“数据正常展示”这一种状态。但真实世界里页面至少有四种状态加载中、有数据、无数据、出错。这四种状态缺一个用户就会在某个时刻看到一片空白然后不知道发生了什么。加载态用骨架屏Skeleton比转圈圈体验好。骨架屏让用户感知到“内容正在来”而不是“卡住了”。骨架屏的形状要跟真实内容一致列表就画几行灰条卡片就画几个灰块。空态要给出下一步动作。“暂无数据”是废话用户需要知道为什么没有数据、怎么才能有数据。比如“还没有创建项目点击下方按钮创建第一个项目”配一个按钮这才是有用的空态。出错态要区分网络错误和业务错误。网络错误提示“网络异常请稍后重试”业务错误提示具体的业务原因。不要所有错误都弹一个“操作失败”用户排查不了。5.2 按钮的加载态和禁用态是防重复提交的第一道防线提交按钮点击后要立刻进入加载态转圈 禁用防止用户连点。这个细节看起来小但在弱网环境下能避免大量重复数据。加载态的文字可以改成“提交中...”让用户知道系统在干活。禁用态和加载态要区分开禁用态是灰色不可点加载态是保持原色但带转圈。用户看到灰色按钮知道“现在不能点”看到转圈知道“正在处理”语义不同。5.3 表单校验的时机失焦校验提交时汇总校验时机很影响体验。实时校验每输入一个字符就校验太吵用户还没输完就报错很烦。提交时校验又太晚用户填了十个字段提交后才发现第一个就错了。折中方案是失焦校验用户离开某个输入框时校验这个字段错了立刻提示。提交时再汇总校验一遍如果有错滚动到第一个错误字段并聚焦。这样既不会太吵也不会太晚。6. 从设计稿到代码还原度与可维护性的平衡6.1 像素级还原是个陷阱结构还原才是目标很多团队追求“像素级还原”设计稿上 16px 的间距代码里必须也是 16px。这个目标在单页里可行但页面一多维护成本极高。设计稿改一版代码要跟着改几十处。更务实的做法是结构还原布局结构、层级关系、间距节奏跟设计稿一致但具体数值允许在约束系统内浮动。设计稿写 15px你用 16px只要整体节奏对视觉上几乎看不出差别但代码可维护性高很多。6.2 组件抽象重复三次以上的东西就该抽出来页面做多了会发现很多结构是重复的卡片、表格、表单行、状态标签。同一个结构在三个页面里出现过就应该抽成组件。抽组件的标准不是“看起来一样”而是“行为逻辑一样”。比如一个状态标签不同页面用不同颜色但结构都是“圆角背景 文字”。那就抽成一个组件颜色通过 props 传入。这样改样式的时候只改一处所有页面生效。function StatusTag({ type, children }) { const colorMap { success: var(--success), warning: var(--warning), danger: var(--danger), }; return ( span style{{ color: colorMap[type], background: ${colorMap[type]}15, padding: 2px 8px, borderRadius: 4px, fontSize: 12px, }} {children} /span ); }6.3 样式隔离BEM 也好CSS Modules 也好关键是别全局污染页面多了之后样式冲突是高频问题。A 页面的.title和 B 页面的.title打架改一个崩一个。解决方案有几种BEM 命名法.order-list__title、CSS Modules、Scoped CSS。选哪种看团队习惯但必须选一种不能裸写全局类名。我个人的偏好是 CSS Modules因为它在编译层面就隔离了不用靠命名约定来约束团队新人也不容易写错。Vue 项目里用style scoped也能达到类似效果但要注意深度选择器的使用。7. 几个我踩过的坑和对应的解法7.1 长文本溢出省略号不是万能的列表里的长文本最常见的处理是text-overflow: ellipsis。但这个方案有个前提容器必须有固定宽度且white-space: nowrap。在 Flex 布局里如果父容器没有min-width: 0省略号是不生效的。这个坑我踩过不止一次排查半天才发现是 Flex 子项默认min-width: auto导致的。.flex-item { min-width: 0; /* 关键 */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }如果是多行文本要省略用-webkit-line-clamp.multi-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }7.2 表格列宽抖动用table-layout: fixed表格数据加载后列宽突然变化是因为浏览器在根据内容自动计算列宽。用table-layout: fixed可以让列宽在渲染前就确定避免抖动。代价是列宽必须显式指定不能靠内容撑开。table { table-layout: fixed; width: 100%; }配合colgroup指定每列宽度效果最稳。7.3 弹窗里的表单滚动锁定背景滚动弹窗打开时背景页面还能滚动体验很差。解决方案是弹窗打开时给body加overflow: hidden关闭时移除。但要注意如果弹窗内容本身需要滚动滚动容器应该是弹窗内部而不是body。function openModal() { document.body.style.overflow hidden; } function closeModal() { document.body.style.overflow ; }移动端还要处理position: fixed导致的滚动位置丢失问题可以在打开弹窗前记录scrollTop关闭后恢复。7.4 图标和文字对齐vertical-align不如 Flex图标和文字并排时用vertical-align: middle经常对不齐因为图标的基线位置和文字不同。更稳的方案是用 Flex.icon-text { display: inline-flex; align-items: center; gap: 4px; }这样图标和文字在垂直方向上是居中对齐的不受基线影响。8. 页面设计的自检清单每次做完一个页面我会过一遍这个清单。清单不长但能拦住大部分低级问题。检查项合格标准间距所有间距来自约束系统没有随手写的数值字号不超过五档相邻档位差距明显颜色所有颜色来自变量没有硬编码的色值层级页面有一个明确的视觉重心用户知道先看哪状态加载、空、错、有数据四种状态都做了响应式在 1440px、1024px、768px、375px 下都不崩长文本溢出有省略号或换行处理没有撑破容器点击区域移动端按钮和链接至少 44px 高表单校验失焦校验提交时汇总错误定位到字段重复提交提交按钮有加载态和禁用态这个清单不需要每次全过但至少过一遍能省掉大量返工。9. 关于设计能力这件事我的真实体会页面设计这件事说到底不是天赋是约束意识。你不需要会画画不需要懂色彩理论只需要把间距、字号、颜色、层级这四件事用一套规则管起来页面就不会难看。我见过很多前端技术很强但页面做出来就是“不对劲”问题几乎都出在没有约束系统上——每个页面都凭感觉写写十个页面就有十套规则拼在一起自然乱。另一个体会是多看别人的页面但不要抄样式要抄结构。看到一个舒服的页面别急着扒它的颜色和字体先看它的间距是怎么分的、层级是怎么拉的、状态是怎么处理的。结构学到了换一套颜色和字体你也能做出同样舒服的页面。最后说一个很实际的经验页面做完之后隔一天再看。当天做完的时候你的眼睛已经适应了看不出问题。隔一天再看第一眼觉得别扭的地方就是真正的问题。这个习惯帮我改掉了很多“当时觉得挺好”的设计。