网页设计是的间隔 第1篇
栅格系统中水槽与边距的变化遵循8n的变化规律，此处n为大于0的正整数，即n=1、2、3…。
用于规范元素间距的8n，n取整当然最佳，但也可以根据业务情况取、。
原因是实际工作中，我们面临的情况是复杂的，这样处理可以让间距的设定适应一些特殊的场景，从而使其更灵活普适。
栅格系统大的层面可以帮助设计者更好的进行版式设计与内容布局，而小的方面可以辅助设计师规范页面内各种元素的对齐与间距的设定。
从用户体验角度来讲，这两者同等重要，从执行层面来讲，我们一般先做版式设计与布局，然后再填充内容、调整细节。
四、Q&A
Q1：当栅格系统中出现无法整除的情况，如何处理?
A1：理论上来说，可以通过调整固定区域如导航的宽度来改变内容区域的大小，使列宽可以整除，且边距和槽宽能被最小原子单位（如8）整除。
但如果仍然出现无法整除的情况，可以优先调整页边距的数值，无需追求完全整除。
栅格化的目的是一致性和效率，偶尔有一些不“完美”的尺寸是完全允许的。
用户使用页面时也看不到我们使用的栅格系统，几乎注意不到几像素的变化。
只要让用户感受到的是页面整体呈现出来的节奏与韵律感，以及一致的视觉语言带给的严谨就足够了。
Q2：盒子模型填充栅格时，盒子对齐的是栅格还是水槽，里面内容的元素也要同等对齐吗？
A2：盒子模型对齐的是栅格而非水槽，而这个盒子里面的内容元素不受栅格的约束。
只要父级模块对齐栅格，子级元素可以不对齐水槽，同时子模块也可以有自己的栅格系统。
Q3：一套栅格搭建完成后，是否全局都要强制对齐栅格？
A3：并不是，栅格用在典型页面工作台、数据概览、卡片页居多，非常规设计时不需要栅格系统。
甚至在特定情况下，我们也可以打破布局栅格设置，来组织页面内容。
打破布局栅格可以使元素突出，吸引视觉焦点（比如：全站横幅，或是市场运营类内容）。
但需注意，对中后台系统而言，过多使用会导致页面凌乱。
五、最后
栅格上篇正式完结撒花啦，敬请期待下篇《栅格在响应式设计中的运用》。
网页设计是的间隔 第2篇
栅格系统的使用是为了解决自适应和响应式问题，从而更好地进行产品设计和产品开发。响应式栅格采用 24 列栅格系统实现，以满足 2，3，4，5，6 分比布局等多种情况。固定宽度 Column，将间隔 Gutter 进行动态缩放。
需要栅格化处理的内容的总宽度=23列（1列=1宽度Column+1间隔Gutter）+1宽度Column=24宽度Column+23间隔Gutter。
谷歌规定模块和结构之间要以 8px 为基准，布局间相对间距可采用 8px 以及 8 的倍数，但一些小组件（按钮、间隔、输入框）可以以 4 为基准。栅格布局是为了辅助设计，灵活运用，不要被它所局限。
网页设计是的间隔 第3篇
用不同颜色和样式展示需要关注的信息。
通知提醒
消息通知和警告信息用通知提醒框，单个消息从页面右侧以抽屉的方式划出，用户可手动关闭，或停留 3s 后自动关闭。
10. 缺省状态
绘制不同类型的情感化插画表示缺省状态，如404、500、暂时没有数据、没有新消息等。
页面需要一个默认的底色，错误文字使用 14px，与情感化插画间距 20px，与按钮间距 30px。
11. 数据可视化
数据可视化部分可能是后台产品中对视觉设计要求较高的部分，使用情境为各类统计图、大屏展示页面等。
功能型页面的数据可视化可以引入图形化设计组件，Echarts、G2、d3等；展示型页面的数据可视化则可以做得更有趣，比如立体的统计图、粒子地球效果、灵活有趣的网络拓扑图等。
考虑到数据可视化可能会需要深色浅色不同的背景，在数据可视化统计图的色彩搭配上要注意颜色的拓展性。
网页设计是的间隔 第4篇
定义主体内容的上下左右边距，定义主体区域内各模块的边距及安全宽度，超出内容区域的部分采用区域内滚动或整屏滚动，视情况固定导航栏。
2. 标准色
颜色分为品牌色、辅助色、中性色。根据不同产品的不同需求，可能也会将统计图、标签等进行统一标准色设定。
品牌色即产品主色，产品主色的设定直接影响产品气质和直观感受，也是产品直接对外的形象。品牌色要根据产品特性、用户使用场景、产品定位等进行选取，尽量做好色彩的延伸性，可支持换肤。品牌色的应用场景包括操作状态、按钮色、可操作图标等。
辅助色用于提示其他场景，比如成功、失败、警告、无效等。
中性色常用于文本、背景、边框、分割线等，需要考虑深色背景和浅色背景的差异，可以选择同一色相控制透明度变化，用来表现不同的层级结构。
其他色如统计图、数据可视化、多个标签的不同配色方案根据项目情况单独设定。
3. 标准字
后台系统常用的字体：windows 系统，中文 Microsoft YaHei，英文 Arial；Mac 字体，中文 PingFang SC，英文 Helvetica；除此之外可以选择的字体还有 segoe UI、思源黑体、Hiragino Sans GB等。
后台系统中常用字体大小为 12px、13px、14px、16px、18px、20px、24px、30px。
行高设定，根据文字大小及使用场景设置行高，一般行高=文字大小+6px/8px。
4. 图标
图标是 UI 设计中重要组成部分，一般分为功能图标和应用图标，以图形的方式传达概念，可以降低理解成本，使得界面更加协调美观。在后台产品中，图标的功能则更偏向辅助性，辅助用户对功能的认识。
除了某些常用的图标，有一些专业性的操作和词汇则需要设计师进行绘制，现在比较高效方便的方法是在 iconfont 提供的图标模板上用 AI 绘制，画板 1024*1024，提供圆形、正方形、矩形形状。图标尺寸按照 8 的倍数进行延展，绘制完成后生成 svg 格式文件，提交到阿里巴巴矢量图标库的项目组里，方便前端调用，调整大小和颜色更为方便，且能够优化系统内存和性能。
5. 按钮
网页设计是的间隔 第5篇
据统计，目前 PC 端用户屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900，以 1440 来设计的话，向上适配或者向下适配误差会比较小。
适配方案：面向多个客户，后台产品设计功能型页面的尺寸统一为 1440*900，按照栅格系统原则向上或向下适配。展示型页面以 1440*900 为主，同时设计出极端情况（宽度为 1280 以及宽度为 1920）的效果图，力求实现前端实现效果和高保真设计图误差最小。面向公司内部的后台系统，由于各个职工电脑屏幕是统一采购、统一尺寸，所以开发适配的分辨率可以统一尺寸进行设计，这个尺寸根据公司内部采购屏幕的尺寸和分辨率选择即可（提前和前端沟通好）。
网页设计是的间隔 第6篇
此外还有最小单位、总宽度、列数三个计算因子。
三、案例——搭建栅格
以下图数据总览页面为例，设计稿尺寸为1440*900px，左侧导航栏常驻，该页面是没有用栅格搭建的。
乍一看问题似乎不大，但是资深的设计师很容易就能看出实则切割混乱，无规律。
另还有一致命的点在于填充内容的容器无法换算成百分比，前端同学无法做自适应，想要适配是很困难的。
那下面将以此页面为案例教大家如何一步步搭建栅格：
1. 确认容器范围
设计师在规划产品用户界面时，首先需要考虑页面的整体布局，以便确认布局栅格的容器。
栅格容器不一定是整个屏幕或界面，需要根据真实场景判断，一般只需要在内容层进行栅格化，约束内容自适应比例。
网页设计是的间隔 第7篇
由于列跟水槽的宽度是以网格作为基本单位来增加或者减小，所以栅格化的重要一步就是需要先定义好栅格的原子单位网格的大小。
中后台中目前最普适易用的就是 8 点网格，我们可以建立 8点为一个单位的网格，使用 8 的倍数来定义模块的间距与元素的尺寸。
在适用性方面，4、6、8、10 这四个数值都是基本可以满足的，在灵活性方面，4pt表现最佳，那为什么不选4而是8呢？
网页设计是的间隔 第8篇
存在常驻的控件，如侧边导航栏一般属于固定占位的控件，不会跟随屏幕尺寸或内容量的变化而变化，属于全局控制层。
其占据的界面区域也不需要用来布局其他功能及内容，所以其不属于栅格区域。有赞的帮助中心同理。
案例属于侧边导航布局，所以案例容器范围=屏幕宽度-侧边导航=1440-侧边导航。
2. 确定列数、水槽值、边距
网页设计是的间隔 第9篇
（1）目前主流桌面设备的屏幕分辨率在竖直与水平方向基本都可以被 8 整除，使用 8 作为最小原子足够普适。
可以确保不同布局之间的视觉一致性，同时可以灵活的适配多种尺寸的设计。
（2）灵活性方面，4pt最佳，8pt次之。
但是使用4pt页面就会被分割的非常细碎，在设计时比较难于把控，它比较适合页面内容信息较多，布局排版比较复杂的产品。
而8pt栅格一般的设计场景都可以很好的满足，比较适合大多数的项目，因此是比较推荐使用的。
（3）开发工程师使用的前端开源组件库比如 Metronic、Antdesign 等也是基于 8 的原子单位来设计。
因此如果设计师也使用以 8 为基本单位的栅格系统，开发与设计师相互对接就会更加方便，开发实现页面时也能更高品质地去还原我们的设计。