首页 
从零开始学B端设计
知识点 0/9 · 6%
0. 概述
6
%
从零开始学B端设计
最后更新于 2024-07-23
#B端设计#知识库
B端设计，通常指的是面向企业级用户或者专业用户的界面设计，其核心目标是提高工作效率、优化业务流程、辅助决策制定。
开始学习16
文章数
20.3K
总字数
9
知识点数
36.3K
学习人数
1.2K
学完次数
146
精选笔记
知识库概述
在本知识库中主要分享 web 端为主的系统后台知识，帮助入门新手可以在 B 端行业达到正确扫盲的作用，可以顺利开展后续进一步技能提升。
本套课程面向的对象：从零开始学习B端设计/想要转行B端设计/产品经理/开发了解 UI 设计思路，可以从零到一让同学入门，配套B站免费的原子核课程，可以更上一层楼！
B端的基本认识
已学会 0/6 · 知识点 0/2
什么是B端界面设计
在国内，互联网行业习惯将软件产品划分成 B2C、B2B 两个大类，B2C 全称是 Business-to-Consumer 即企业到客户的服务，B2B 全称是 Business-to-Business 即企业对企业的服务。 进一步缩写即 2C 或 2B，也就是我们所说C端和B端。 C 端产品，是面向...
B端业务类型解析
现实世界的商业活动是纷繁复杂的，小到地摊叫卖、夫妻小店，大到远洋航运、芯片制造，都有各自的运营模式和实践特征。 理论上 B 端产品的开发要具体到特定的商业活动场景中，比如客户买水果的称重结算，或汽车生产线的数字化管理等。但不管这些场景种类有多庞大，其中一些场景出现、应用的频率非常高，于是就有了特定的...
什么是SaaS产品
SaaS 全称 Software-as-a-Service，主流翻译叫 “软件即服务”，即提供基于云服务器的软件功能、服务的商业软件。 早期企业搭建联网的程序，需要购买服务器并创建相应的服务器运行环境，如系统安装、网络部署等，然后再编写相应的程序安装到服务器上运行。这个过程即复杂又不安全，且伴随着极...
初级B端设计师所需技能
B端设计师也是UI设计师的一种，但和C端设计师面向的设计对象不同、场景不同，所以需要学习和掌握的对象也会有一定的差异。 如果想要实现优秀的B端界面设计，就需要具备以下几种能力： UI软件的使用 网页设计规范认识 主流B端框架规范认识 主流的控件、组件掌握 专业的表格设计 专业的表单设计 数据图表的设...
主流的B端开源框架介绍
现代软件开发行业中，非常提倡效率，而重复造轮子是从业者最不希望看到的局面之一。所以就有了很多优秀的程序员、开发团体发布了免费、开源的程序代码，供其它程序员使用。 在 B 端领域中，使用开源代码是非常普遍且正常的现象，尤其是在视觉界面、交互部分的开源代码，帮助开发团队节省更多的时间用于开发业务功能。 ...
可访问SaaS网站记录
B端和C端不同的是，多数系统、程序是私密的不对外开放，所以我们很难像查看C端产品一样直接访应网址或从应用商店下载 APP这么简单。 万幸的是市面上还有很多 SaaS有对外开放注册或提供免费的Demo，所以在这边整理对应可以访问的B端产品供大家借鉴和学习。 特别注意：以下产品都是试用过的，只需要邮箱/...
基础规范
已学会 0/8 · 知识点 0/7
网页设计的基本规范
本套知识库中，我们主要面向的是 B 端网页端界面的设计，本质上也是网页设计的一种。所以我们首先要定义 —— 什么是网页？ 网页就是显示在浏览器中的页面的称呼，是构成网站的基本元素之一。 而网页本身由 HTML + CSS + Javascript 语言构成，HTML 控制页面的内容类型、架构、格式，...
B端画布定义的规范
前面说过，B 端的网页往往会支持响应式布局，适配不同的浏览器窗口尺寸。但响应式是结果，设计时画布应该做多大，是让绝大多数新人都头疼的问题。 B 端界面的设计和平面不同，设计的对象不是固定的物料有唯一的、具体的尺寸参数，而是一个灵活响应、变化的动态视觉体系，手应用的需求、场景影响，在不同项目中就会有不...
B端栅格系统的定义逻辑
在网页的设计中，栅格系统是用于页面动态布局的重要工具之一。简单解释，就是用一定的规则在动态画布上画出若干的格线，这些格线会随画布的缩放而动态适配，比如下图的案例。 然后界面的一级模块、组件以这些格线为宽度标准进行设置，让它们跟随格线的变化而变化。即窗口缩放导致格线尺寸的变动，格线的变动导致模块尺寸的...
B端页面的基本结构解析
表盘
B端页面全局框架解析
页面包含全局框架和内容区域两个部分，全局框架包含全局组件以及对内容区域的规划，全局组件主要包含导航、顶栏、页签三个核心组件。常见的组件形式包括下面这些： 1.1 侧边导航 即导航在左侧的做法，包含两种模式，一种是单列导航，一种是双列导航。双列导航可以兼容更多的导航层级（3级以上），能更好的突出下级导...
B端主流页面布局框架
B端设计除了界面类型数量不多以外，同类型页面形成了相对统一的布局框架标准，即使没有太多设计经验的新手，只要掌握并跟着这些布局框架的方式设计，也能输出专业的B端项目出来。 下面，我们分别解释表盘、列表、表单、详情、登录等主流页面类型的布局框架。 1. 表盘页 表盘页是数据、信息集合的页面，包含的组件类...
网页中的字体属性认识
认识网页字体的相关规范就要了解字体包含哪些基础属性，我们可以从UI设计软件的文字属性面板入手。 UI的基本文字属性，主要包含两个部分： 文本属性：字体、字号、字重、字色、样式 排版属性：文本区域、对齐模式、字间距、行高、段间距 我们在下面会分别对它们进行解释，以及对应的网页设置规范。 1. 文本属性...
UI中的色彩模式认识
虽然配色是一门很复杂的学问，但B端行业的特定决定了界面的配色以简约、实用为主要的基调，所以相对C端设计来说更简单、容易。而在学习配色的方法之前，首先要理解的是色彩的模式。 色彩模式是一种用来描述、记录色彩的方法，而不同场景，方法就不一样。因为不同的场景中组成色彩的要素不同，如果不做区分，就会造成颜色...
推荐笔记
UX小学生
2025-03-10
表格和列表的区分
一般列表就是字面意思，最基础的纵向排列一行一条的列表模式。很多人会把列表和表格搞混，因为很多表格设计中并没有把单元格全部画出来，所以看起来很像。区分两者最简单的方法，就是看有没有表头，有表头是表格，没表头的就是列表。
UX小学生
2025-03-10
表格和列表的区分
一般列表就是字面意思，最基础的纵向排列一行一条的列表模式。很多人会把列表和表格搞混，因为很多表格设计中并没有把单元格全部画出来，所以看起来很像。区分两者最简单的方法，就是看有没有表头，有表头是表格，没表头的就是列表。
UX小学生
2025-03-10
主页型表盘页
不是单纯的表盘聚合页，而是会包含大量不同的信息和模块，对于内容的权重表现和布局比例要求较高。 除了表盘和表格外，还包括信息列表、轮播图、公告、日历、留言板之类特殊的模块，需要花较多的时间来处理版式，尤其是面对作品集输出需要关注美观度，不同模块样式的差异性和设计感。
UX小学生
2025-03-10
自上而下
表盘页是数据、信息集合的页面，包含的组件类型很多，但最核心的两类组件，就是图表和表格。任何表盘类页面设计前，都要先确定包含的组件数量、类型、权重，然后再开始对内容区域进行划分和布局。
UX小学生
2025-03-10
积累和总结 如全局框架 风格稿 组件 好看的视觉等
全局框架的样式和布局并不只有上面列举的这些，还有很多可以发挥的空间，这就需要设计师进行有目的性的积累和总结，才能应用到自己的真实项目中。 建议在看到优秀的案例时，将它们截图并移除内容只保留全局框架，收集到对应的灵感画板中，可以更好的分析全局框架的做法。
UX小学生
2025-03-10
注意
值得注意的是，如果我们的项目使用侧边导航，那导航栏大多情况下是不需要参与响应的，你们可以看看自己电脑桌面端安装的同类布局得软件，拖动软件窗口左侧栏目的宽度基本都不会变化，是因为它们参与响应带来的收益远低于不参与的做法。 所以，B端项目中的栅格往往不是全屏覆盖的，而是减去左侧的导航区域。
UX小学生
2025-03-10
要和开发等人员有效沟通，保障设计稿被有效开发出来
这个调整过程是需要设计师去制定规则的，而不是只输出一个设计稿剩下的让开发自己脑补完成。对于 B 端界面来说，这种规则的制定非常的复杂，就算做好了，开发成本也很高不会被完整实现出来。
UX小学生
2025-03-10
响应式设计的特性
但在响应式设计中有一个非常基本的特性，就是界面往大适配容易，往小却很困难。因为往大适配可以只增加组件尺寸、内容空间，但是往小适配会触及内容显示空间的极限所以需要调整布局。
UX小学生
2025-03-10
响应式设计的特性
但在响应式设计中有一个非常基本的特性，就是界面往大适配容易，往小却很困难。因为往大适配可以只增加组件尺寸、内容空间，但是往小适配会触及内容显示空间的极限所以需要调整布局。
UX小学生
2025-01-12
B端一般不用低于300高于700的字重
低于300好高于700的字重在B端项目中都具有较强的风格属性，适合应用在一些设计感较强的品牌官网、C端站点，但不适用于B端系统。
UX小学生
2025-01-12
B端导航：侧边；顶部、混合导航
核心：增删改查
主要页面：表盘（数据展示）、列表、表单、详情
辅助页面：注册、登录、空白、错误页、成功、失败、模态弹窗、抽屉、
登录/注册页：进入系统前进行身份验证的页面
UX小学生
2025-01-08
内容区(content)、内边距(padding)、边框(border)和外边距(margin)。
组成部分
内容区（Content）：这是盒子模型的中心，包含元素的实际内容，如文本或图像。可以通过width和height属性来指定其大小。
内边距（Padding）：内容区和边框之间的区域，用于控制内容与边框之间的距离。内边距会影响元素的占地尺寸，但不会影响内容本身的大小。
边框（Border）：围绕在内边距和内容外的边界，用于界定元素的边界。可以通过border属性来设置边框的样式、宽度和颜色。
外边距（Margin）：边框和相邻元素之间的空白区域，用于控制元素与其他元素之间的距离。外边距不会影响元素的占地尺寸，但会影响其与其他元素的位置关系。
CSS盒模型
UX小学生
2024-11-22
表格用于查看和操作数据，表单用于往系统中创建输入数据等时候
表格用于查看和操作数据，而当我们要往系统中创建、输入数据的时候，就需要用到表单，这也是B端项目中高频使用的模块之一。
UX小学生
2024-11-22
Ant Design、腾讯的Tdesign、字节的ArcoDesign等
蚂蚁的AntDesign、腾讯的 TDesign、字节的ArcoDesign等。
UX小学生
2024-11-22
需要掌握网页设计规范，主流B端框架规范认识，主流控件，组件，专业的表格设计，表单设计，数据图表设计
UI软件的使用 网页设计规范认识 主流B端框架规范认识 主流的控件、组件掌握 专业的表格设计 专业的表单设计 数据图表的设计
UX小学生
2024-11-21
SaaS是运行模式的定义，和业务类型纬度不同
SaaS 是运行模式的定义，是和业务类型定义不同的纬度，ERP产品中即有 SaaS的也有本地的，就像一个人即可以是大学生也可以是女性，两者没有重叠关系。