网格与版式系统

栅格系统是用规则的纵向参考线把版面切分成可预测的模块，让元素摆放有依据、页面之间有秩序。三个核心概念：列是内容区的等分单位，桌面端常用十二列，因为十二能被二三四六整除，组合灵活；水槽是列与列之间的间隙，形成呼吸感并天然分隔内容，元素通常不跨进水槽；边距是内容区到屏幕两侧的安全距离，保证内容不贴边，移动端常最小十六像素。此外还有流式与固定栅格之分，网页常用基于百分比的响应式栅格。栅格的价值一是效率，设计师按列摆放不用逐个算坐标；二是一致性，多页面多成员产出风格统一；三是协作，与前端共享同一套断点与列定义能大幅降低沟通成本。使用要点是栅格服务设计而非相反，允许元素合理出血与跨列，避免页面显得像表格。

移动设计以一倍图指以逻辑像素为单位的基准画板，主流做法是以三百七十五乘八百一十二或三百九十乘八百四十四的逻辑分辨率起稿，输出时由系统按设备像素密度放大到二倍三倍图。逻辑像素剥离了物理像素密度差异，让同一份设计在不同密度屏幕上占据相似视觉大小，这是 iOS 的点与安卓的密度无关像素共同的思路。安全区分两类：一类是系统级危险区，顶部状态栏与刘海、底部手势条区域不能放关键信息与可点元素，需要预留系统规定的上下边距；另一类是业务安全区，如拇指热区原则把高频按钮放在屏幕下半部分。此外左右边距保证内容在曲屏与投影屏上不被裁切。设计师应建立组件级的边界意识，把安全区写进设计系统的布局规范，避免每个页面各自踩坑。

响应式设计的核心是同一套内容在不同屏宽下重排而非重做。断点规划上，常见基线是移动四百八十以下、平板竖屏约七百六十八、平板横屏约一千零二十四、桌面一千二百八十以上，具体数值应依据实际用户设备分布与栅格方案微调，而非死记数值。每个断点要回答三个问题：栅格多少列、边距多少、组件用手机版还是桌面版形态。内容优先级调整的思路是移动端做减法，先明确任务的唯一主路径，次要内容折叠或下沉；桌面端做并置，利用横向空间把移动端的纵向流程变成多栏布局，比如列表加详情的左右分栏。组件层面，导航从抽屉变为横向标签，表格从整表变为卡片或首列冻结。设计流程建议从最小屏开始设计内容骨架，再向上增强，避免桌面稿硬塞到手机上。断点是设计系统的资产，要与前端共同维护。

间距系统是把界面上所有间距限定为一组预设值（通常是四的倍数如四、八、十二、十六、二十四、三十二、四十八），组件内外、元素之间的距离必须从这组值里取。推荐四与八倍数的原因有三：一是视觉节奏，等差或有律的间距形成可感知的秩序，任意间距会让页面松散无韵律；二是与设备像素对齐，屏幕密度换算时偶数间距能整除缩放，避免半像素发虚；三是协作效率，设计Token 化后前端用同一组变量，设计与实现的偏差趋近于零，走查成本大幅降低。建立方法是把间距语义化，例如元素内间距四与八、组件内十二与十六、组件间二十四、区块间四十以上，写成规范并封装成工具变量。注意间距系统要配合密度场景，管理后台可以整体收紧一档，内容社区可以放宽。面试时能把间距讲成系统而不是感觉，是成熟度标志。

留白不是浪费而是设计材料，通常分四类。一是宏观留白，页面级的大空白，如首屏四周与区块之间的大间距，作用是划分章节、营造高级感与呼吸感，奢侈品牌官网是极端案例。二是区块留白，组件与卡片之间的中观间距，作用是分组，利用接近性原则让用户理解哪些内容同属一组，间距本身就是信息结构。三是微观留白，元素内部如文字行间距、字间距、图标与文字的间隙，作用是保证可读性与精致度，标题紧排正文松排就是微观留白的典型运用。四是主动留白，为强调而围出的空白，让核心元素周围空出来，比加颜色更高级的强调手法。使用原则是留白要有语义，同层级间距一致，不同层级间距有明显跳跃。检验方法是只看灰度结构图，分组与层级依然清晰。能把留白分类并说明作用，说明版式思维已经结构化。