导航栏大多情况下是不需要参与响应的

格线宽 = (页面宽 – 总页边距 – 格线总间距) / 格线数 格线列数设置上，通常使用 12 或者 24 列，这样可以被 2、3、4、6 整除，格线间距通常应用 8-16 范围内的数值，页边距则根据项目想要的左右留白来决定，主要在 16-64之间。

在栅格系统中，主要包含列数、格线间距、页边距、格线宽四个参数

基础元素，就可以构建更复杂的功能模块 —— 组件。组件的种类多种多样，但在B端领域有相当一部分通用的组件类型，如表格、筛选模块、导航栏、菜单栏等等

由一些最基础的文字、图形和交互控件组成

B 端产品，是面向企业用户的产品，用户通过它进行日常的商业活动

C 端产品，是面向终端消费用户的产品，对与使用者而言主要是用来满足自己的日常生活实践需求

B端管理系统度的应用价值，说到底就四个字 —— 增删改查，即针对数据进行的交互和操作过程。不管业务有多复杂，页面有多少，字段有多少，目的都围绕这四者展开。 同理，视觉界面作为用户使用的载体，也是围绕增删改查而设计。常见的页面类型包含四种： 表盘：主要展示数据和图表的页面，类似飞机、货轮的仪表盘 列表：用于大量同类数据的条目，包括对它们进行排序和筛选等 表单：主要用于添加、修改数据对象的操作型页面，会包含多个表单控件的处理 详情：用于展示某个数据对象详细内容、数据的页面 表盘 列表 表单 详情 虽然它们是B端最核心的页面类型，但要成为一个完整的系统，就还有一些次要的页面类型需要补充，比如下面这些： 登录/注册页：进入系统前进行身份验证的页面 成功/错误页：完成对应操作后用一个独立页面来反馈操作结果的页面 异常/空页面：对系统错误、为空的状态用特殊的页面 登录/注册页 成功/错误提示页 异常/空白页 除了特殊的页面外，还有一些较为特殊，需要在设计软件内使用单独画布呈现的组件，比如： 新手/任务引导：对用户进行特殊信息解释、操作引导的页面 模态弹窗：包括大量内容、信息的模态弹窗 侧边抽屉：侧边展开的包含信息、表单的抽屉 新手/任务引导 模态弹窗 侧边抽屉 虽然B端页面类型能做出区分，但不同页面之间是包含通用的元素，即全局组件。而布局的核心根据导航的方向决定，包括导航在左侧，导航在顶端，侧边顶端混合型三种。 正常项目的设计，就是先规划好全局组件的布局形式，然后再在内容区域绘制对应的页面。而我们掌握不同页面的设计思路、框架，就是了解在内容区域的不同表现形式而已。

卡片列表的设计首先要根据响应式的断点决定在不同宽下应该放置几列卡片，然后再对卡片的内部信息进行设计和排版。

一般列表就是字面意思，最基础的纵向排列一行一条的列表模式。很多人会把列表和表格搞混，因为很多表格设计中并没有把单元格全部画出来，所以看起来很像。区分两者最简单的方法，就是看有没有表头，有表头是表格，没表头的就是列表。

一般列表就是字面意思，最基础的纵向排列一行一条的列表模式。很多人会把列表和表格搞混，因为很多表格设计中并没有把单元格全部画出来，所以看起来很像。区分两者最简单的方法，就是看有没有表头，有表头是表格，没表头的就是列表。

不是单纯的表盘聚合页，而是会包含大量不同的信息和模块，对于内容的权重表现和布局比例要求较高。 除了表盘和表格外，还包括信息列表、轮播图、公告、日历、留言板之类特殊的模块，需要花较多的时间来处理版式，尤其是面对作品集输出需要关注美观度，不同模块样式的差异性和设计感。

表盘页是数据、信息集合的页面，包含的组件类型很多，但最核心的两类组件，就是图表和表格。任何表盘类页面设计前，都要先确定包含的组件数量、类型、权重，然后再开始对内容区域进行划分和布局。

全局框架的样式和布局并不只有上面列举的这些，还有很多可以发挥的空间，这就需要设计师进行有目的性的积累和总结，才能应用到自己的真实项目中。 建议在看到优秀的案例时，将它们截图并移除内容只保留全局框架，收集到对应的灵感画板中，可以更好的分析全局框架的做法。

值得注意的是，如果我们的项目使用侧边导航，那导航栏大多情况下是不需要参与响应的，你们可以看看自己电脑桌面端安装的同类布局得软件，拖动软件窗口左侧栏目的宽度基本都不会变化，是因为它们参与响应带来的收益远低于不参与的做法。 所以，B端项目中的栅格往往不是全屏覆盖的，而是减去左侧的导航区域。

这个调整过程是需要设计师去制定规则的，而不是只输出一个设计稿剩下的让开发自己脑补完成。对于 B 端界面来说，这种规则的制定非常的复杂，就算做好了，开发成本也很高不会被完整实现出来。

但在响应式设计中有一个非常基本的特性，就是界面往大适配容易，往小却很困难。因为往大适配可以只增加组件尺寸、内容空间，但是往小适配会触及内容显示空间的极限所以需要调整布局。

但在响应式设计中有一个非常基本的特性，就是界面往大适配容易，往小却很困难。因为往大适配可以只增加组件尺寸、内容空间，但是往小适配会触及内容显示空间的极限所以需要调整布局。

网页为了充分利用显示空间，就需要自动适应视图区域分辨率的变化，这种显示模式就叫做响应式布局。

界面设计中避免使用

低于300好高于700的字重在B端项目中都具有较强的风格属性，适合应用在一些设计感较强的品牌官网、C端站点，但不适用于B端系统。

注释英文、数字：9-11px 注释、小段文本：13px 正文、小标题：14-16px 大标题和大数字：16-20px

切换模块操作比较低频，

切换模块操作比较低频，

登录/注册页：进入系统前进行身份验证的页面

增删改查

CSS盒模型

4的倍数进行