它的页面类型或者设计，只要在这些基础上发散即可。

将每个数据对象使用卡片的形式展示，对于不需要上下数据进行对比，每个数据对象都是比较独立的个体的话

都要先确定包含的组件数量、类型、权重

模态弹窗：包括大量内容、信息的模态弹窗

表盘：主要展示数据和图表的页面，类似飞机、货轮的仪表盘 列表：用于大量同类数据的条目，包括对它们进行排序和筛选等 表单：主要用于添加、修改数据对象的操作型页面，会包含多个表单控件的处理 详情：用于展示某个数据对象详细内容、数据的页面

表盘

有了这些认识，就可以在项目中创建栅格并完成后续页面的设计了。而完整的响应式和栅格应用知识学习，就要查看我们单独准备的知识库。

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

获得最安全的设计效果，那么就建议使用 1280*720 或 1440*800 的分辨率。并且因为系统和浏览器界面本身会占用一部分显示高度，所以还要减去 80-100 像素高，最终的单屏分辨率约为：

同时，卡片应该做多高通常也不会先定出来再设计里面的内容，而是先用一个较大的高度，然后根据盒模型的逻辑定义内边距，将卡片的高度调整到符合内容+上下内边距的尺寸。

比如要再内容区域制定4列的卡片，那么我们不会直接定义四个卡片的宽度，而是根据内容区域的宽和卡片的间距，来算出卡片最终的宽度。

但 B 端网页显示的系统中 Windows 使用率最高，所以主要推荐使用微软雅黑来进行设计，能和多数用户的显示效果保持一致。 在英文、数字字体的应用中同理，虽然理论上可以在前端开发中嵌入其它字体，但这需要用户第一次打开网页时额外下载字体文件，对于追求效率的B端项目来说是完全没有必要的。 所以如果要应用特殊的英文、数字字体，就可以使用 Arial 或 Helvetical 这些最常见的系统自带字体，而不要追求设计效果使用其它字体，最后无法被还原出来。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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