首页 
从零开始学B端设计
知识点 0/9 · 6%
0. 概述
6
%
从零开始学B端设计
最后更新于 2024-07-23
#B端设计#知识库
B端设计，通常指的是面向企业级用户或者专业用户的界面设计，其核心目标是提高工作效率、优化业务流程、辅助决策制定。
开始学习16
文章数
20.3K
总字数
9
知识点数
17.5K
学习人数
666
学完次数
63
精选笔记
知识库概述
在本知识库中主要分享 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小学生
5天前
无论是 PS 还是 Figma、Sketch。如果出现色彩不一致的情况，就是色彩配置文件没有保持一致。
无论是 PS 还是 Figma、Sketch。如果出现色彩不一致的情况，就是色彩配置文件没有保持一致。
筱筱乐
2024-08-29
侧边导航分两类：单列、双列
即导航在左侧的做法，包含两种模式，一种是单列导航，一种是双列导航。双列导航可以兼容更多的导航层级（3级以上），能更好的突出下级导航选项。
UX小学生
2024-08-19
侧边导航大多情况下是不需要参与响应
值得注意的是，如果我们的项目使用侧边导航，那导航栏大多情况下是不需要参与响应的，你们可以看看自己电脑桌面端安装的同类布局得软件，拖动软件窗口左侧栏目的宽度基本都不会变化，是因为它们参与响应带来的收益远低于不参与的做法。 所以，B端项目中的栅格往往不是全屏覆盖的，而是减去左侧的导航区域。在设计软件中可以通过 “右对齐” 的设置来实现，不过这种做法就必须要手动定义栅格宽度了，大家可以根据下面的案例自己在软件中尝试。
UX小学生
2024-08-15
没有明确的想法要做多大的尺寸，那么就可以通过4的倍数去“试”出来而不是用 “1” 做递增或抵减，比如从24开始做到36包含4个尺寸，我们可以通过直观的对比来选择出合适的对象。
在一些简单的、常用的控件或组件设计中，参数往往是非常固定的，所以有经验的设计师可以直接设置它们的尺寸，再做后续排版。 而尺寸的设置中会尽量以4的倍数进行设置，虽然背后有一套复杂的原因和逻辑，但它对设计师的最大的帮助，就是在尺寸设置中可以按一个较大的数值进行递增或递减，以找到合适的数值。 如上面的按钮，如果我们一开始没有明确的想法要做多大的尺寸，那么就可以通过4的倍数去“试”出来而不是用 “1” 做递增或抵减，比如从24开始做到36包含4个尺寸，我们可以通过直观的对比来选择出合适的对象。
UX小学生
2024-08-14
网页视图区域大小受到多个方面的影响，主要是浏览器界面、浏览器窗口、设备分辨率等。
网页视图区域大小受到多个方面的影响，主要是浏览器界面、浏览器窗口、设备分辨率等。 浏览器界面即浏览器本身的 UI 元素，如标签、收藏、操作、菜单栏等，不同软件和不同设置都会影响视图区域的大小。
UX小学生
2024-08-08
SaaS 是运行模式的定义
SaaS 是运行模式的定义，是和业务类型定义不同的纬度，ERP产品中即有 SaaS的也有本地的，就像一个人即可以是大学生也可以是女性，两者没有重叠关系。 同理，SaaS可以是任何软件，没有专门面向 SaaS 的设计方法，不要把它当成一种特殊的软件界面类型看待。
UX小学生
2024-07-11
根据场景而定没有绝对的数值，具体看内容区宽度计算
比如要再内容区域制定4列的卡片，那么我们不会直接定义四个卡片的宽度，而是根据内容区域的宽和卡片的间距，来算出卡片最终的宽度。
桥
2024-06-12
1280*640 1440*800
想要获得最安全的设计效果，那么就建议使用 1280*720 或 1440*900 的分辨率。并且因为系统和浏览器界面本身会占用一部分显示高度，所以还要减去 80-100 像素高，最终的单屏分辨率约为：
桥
2024-06-12
本公司的开发也是采用低配模式，以免承担调整布局的工作量
这个调整过程是需要设计师去制定规则的，而不是只输出一个设计稿剩下的让开发自己脑补完成。对于 B 端界面来说，这种规则的制定非常的复杂，就算做好了，开发成本也很高不会被完整实现出来。 大多数 B 端项目的响应式都是使用低配模式，简单的实现内容空间的尺寸变化，但并不支持布局的调整或切换不同的样式。
桥
2024-06-12
b端网页字体选择：重点在于保证大多数用户的显示，而不是字体是否可以商用
而用户使用的系统以及自己安装的字体各不相同，所以网页的开发过程会调用系统默认的字体（指定的也是），在不同设备、系统中就注定会用不同的字体渲染。比如苹果使用苹方、Windows 使用雅黑、安卓平板使用思源黑。 但 B 端网页显示的系统中 Windows 使用率最高，所以主要推荐使用微软雅黑来进行设计，能和多数用户的显示效果保持一致。 在英文、数字字体的应用中同理，虽然理论上可以在前端开发中嵌入其它字体，但这需要用户第一次打开网页时额外下载字体文件，对于追求效率的B端项目来说是完全没有必要的。 所以如果要应用特殊的英文、数字字体，就可以使用 Arial 或 Helvetical 这些最常见的系统自带字体，而不要追求设计效果使用其它字体，最后无法被还原出来。
鲨鱼辣椒
2024-05-23
B端定义
B2C 全称是 Business-to-Consumer 即企业到客户的服务，B2B 全称是 Business-to-Business 即企业对企业的服务
Zoe
2024-05-17
HubSpot：https://www.hubspot.com/
Saleforce：https://www.salesforce.com/
Zendesk Sell：https://www.zendesk.com
Insightly：https://www.insightly.com
Monday：https://monday.com/crm/features/
Pipeline：https://www.pipedrive.com
简道云：https://www.jiandaoyun.com
爱客：https://www.ikcrm.com/
Zoho：https://www.zoho.com.cn/crm/
简信：https://www.crm.cc
网易七鱼：https://qi.163.com/
悟空：https://www.72crm.com
天衣云：https://www.tysoft.com/
可试用的CRM产品
Zoe
2024-05-17
Fusion：https://fusion.design/pc/?themeid=2
iview：https://www.iviewui.com/
Xconsole：http://xconsole.cloud/
SemiDesign：https://semi.design/zh-CN/
ClarityDesign：https://clarity.design/
ZanDesign：https://design.youzan.com/
NutUI：https://nutui.jd.com/#/
常见的前端组件库：
木可杨
2024-04-28
不同字体对字重的命名不同
不同字体对字重的命名不同，所以网页前端的字重统一使用 100-900 的整百数值表示，每个数值会自动匹配对应的字重，下面就是前端字重设置和字重名的对照表。 100- Thin 200- Extra Light 300- Light 400- Regular, Normal, Book, 500- Medium 600- Semi Bold, Demi Bold 700- Bold 800- Extra Bold(Ultra Bold) 900- Black(Heavy)
木可杨
2024-04-28
区分表格和列表
很多人会把列表和表格搞混，因为很多表格设计中并没有把单元格全部画出来，所以看起来很像。区分两者最简单的方法，就是看有没有表头，有表头是表格，没表头的就是列表。
木可杨
2024-04-28
安全设计尺寸
想要获得最安全的设计效果，那么就建议使用 1280*720 或 1440*900 的分辨率。并且因为系统和浏览器界面本身会占用一部分显示高度，所以还要减去 80-100 像素高
木可杨
2024-04-11
ERP是实业领域必备的系统
ERP 是对企业所拥有、调动的资源进行统一管理的平台，包括商品的供应链，销售审计，库存管理，成本核算等等，是今天实业领域必备的系统。
源源
2024-04-05
网页的构成
网页本身由 HTML + CSS + Javascript 语言构成，HTML 控制页面的内容类型、架构、格式，CSS 控制页面的排版、样式，Javascript 则完成逻辑处理的进阶操作。
酸酸
2024-03-25
根据内容及边距，再来布局卡片高度。
同时，卡片应该做多高通常也不会先定出来再设计里面的内容，而是先用一个较大的高度，然后根据盒模型的逻辑定义内边距，将卡片的高度调整到符合内容+上下内边距的尺寸。