6
%
从零开始学B端设计
最后更新于 2024-07-23
#B端设计#知识库
B端设计,通常指的是面向企业级用户或者专业用户的界面设计,其核心目标是提高工作效率、优化业务流程、辅助决策制定。
开始学习
知识库概述

在本知识库中主要分享 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端设计来说更简单、容易。而在学习配色的方法之前,首先要理解的是色彩的模式。 色彩模式是一种用来描述、记录色彩的方法,而不同场景,方法就不一样。因为不同的场景中组成色彩的要素不同,如果不做区分,就会造成颜色...
推荐笔记
Piven
2024-09-23
toB和toC
2C 或 2B,也就是我们所说C端和B端
UX小学生
2024-09-03
无论是 PS 还是 Figma、Sketch。如果出现色彩不一致的情况,就是色彩配置文件没有保持一致。
无论是 PS 还是 Figma、Sketch。如果出现色彩不一致的情况,就是色彩配置文件没有保持一致。
筱筱乐
2024-08-29
侧边导航分两类:单列、双列
即导航在左侧的做法,包含两种模式,一种是单列导航,一种是双列导航。双列导航可以兼容更多的导航层级(3级以上),能更好的突出下级导航选项。
UX小学生
2024-08-24
区分两者最简单的方法,就是看有没有表头,有表头是表格,没表头的就是列表。
区分两者最简单的方法,就是看有没有表头,有表头是表格,没表头的就是列表。
UX小学生
2024-08-21
催更啦啦啦
UX小学生
2024-08-19
侧边导航大多情况下是不需要参与响应
值得注意的是,如果我们的项目使用侧边导航,那导航栏大多情况下是不需要参与响应的,你们可以看看自己电脑桌面端安装的同类布局得软件,拖动软件窗口左侧栏目的宽度基本都不会变化,是因为它们参与响应带来的收益远低于不参与的做法。 所以,B端项目中的栅格往往不是全屏覆盖的,而是减去左侧的导航区域。在设计软件中可以通过 “右对齐” 的设置来实现,不过这种做法就必须要手动定义栅格宽度了,大家可以根据下面的案例自己在软件中尝试。
zznznzn
2024-08-19
统计中也没有1280这个尺寸,这个是从哪里来的?
1280*720
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 的设计方法,不要把它当成一种特殊的软件界面类型看待。
akai
2024-08-02
咋没了
吴雨
2024-07-14
侧边导航拿下
UX小学生
2024-07-11
根据场景而定没有绝对的数值,具体看内容区宽度计算
比如要再内容区域制定4列的卡片,那么我们不会直接定义四个卡片的宽度,而是根据内容区域的宽和卡片的间距,来算出卡片最终的宽度。
15618771130
2024-07-01
字重
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 这些最常见的系统自带字体,而不要追求设计效果使用其它字体,最后无法被还原出来。
paidx6061
2024-06-05
不错不错
paidx6061
2024-05-28
+1
15900910001
2024-05-26
的目标是通过掌握通用的界面、交互设计方法,
鲨鱼辣椒
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
列表是对于罗列同类数据进行展示的统称。
列表是对于罗列同类数据进行展示的统称,实际上包含多种列表类型,包括表格、卡片、封面、标题信息等。
木可杨
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
根据内容及边距,再来布局卡片高度。
同时,卡片应该做多高通常也不会先定出来再设计里面的内容,而是先用一个较大的高度,然后根据盒模型的逻辑定义内边距,将卡片的高度调整到符合内容+上下内边距的尺寸。