B端后端产品的UI设计总结，总结了一些常见问题、解决方案以及我自己的经验。 希望本文的梳理能给大家带来更多的帮助！
写在上面
作为新时代的全方位杂务，日常工作包括联通终端、PC终端UI设计以及各种图形视觉设计，其中自然少不了“光头”的B端后台产品设计。
毕业后三年一直从事B端产品的UI设计。 我参与的后端产品设计的主要客户包括公司、各大企业和政府机构。 在工作和学习的过程中，我走过了很多弯路，在不同的项目中不断反思和总结。 分享自己的一些看法和经验，总结工作中遇到的问题和解决的方法，记录自己的思考和理解过程。 也希望对正式或者目前从事B端后端产品设计的你们有一点启发或者帮助。
希望在以后的工作和学习中，不断通过实践建立对B端后台产品的理解。
目录
1.明秀栈道C、暗陈仓B
2. 背景产品设计思路
3. 背景产品设计规范
4. 经验观点和设计资源
文本
1.明秀栈道C、暗陈仓B
1.1 初遇B端产品和C端产品
按照C端产品和B端产品的术语来看，C端Consumer是指为消费者、个人用户或最终用户而设计，直接向普通用户提供服务，帮助其实现个人需求。 B端商务，面向企业、企业，是旨在帮助企业集团实现业务目标的软件、工具或平台。
在我们的日常生活中，C端产品大部分用在手机上。 单一的C端产品一般是满足单一的需求，比如看网红的抖音、听音乐的酷我、买票的12306、社交媒体等。 陌陌等，这个产品有自己的核心功能，其他功能是附加的。 如果没有这样的附加功能，即使用户体验会降低，也不会影响产品的核心功能。
至于B端产品，我个人称之为“暗仓”。 当个人用户形成一系列动作来实现个人需求时，往往伴随需求的另一端也会反馈一系列动作，即C端产品的后台产品。 线下（BtoC），如天猫买家平台、饿了么店铺版等。此外，还有面向店铺、企业、业务部门的企业级服务产品，以及面向企业或个人的平台级工具产品。
虽然我们日常使用的C端产品较多，但B端产品对我们的影响却一直存在。 C端产品处于开放状态，逐渐改变现代人的生活方式，B端产品处于暗处，间接服务于用户，让所有流程井然有序，并且具有多个主要功能。
- “ToB 还是 ToC？这就是问题……”
——“不管ToB还是ToC，最终还是ToP（人）。”
1.2 B端和C端产品的区别
在我看来，C端产品主要是消费互联网，B端产品主要是工业互联网，C端更感性，B端更理性。
从用户的角度来看——
C端产品关键词包括免费使用、快速上手、体验为王，你让我做什么；
B端产品的关键词是付费订阅、易用性、效率优先、你能为我做什么。
从发展的角度来看——
C端周期短，B端周期长；
C端用户多，B端用户少；
C端逻辑简单，B端逻辑复杂；
C端竞品较多，B端竞品较少；
C端主战场是中国联通，B端是PC端；
C端以用户体验驱动，B端以解决问题驱动；
C端产品的使用决策权在用户手中，B端产品的使用决策权在客户手中（B端客户不一定是用户）；
C端产品不仅仅注重产品体验，更要让产品更美观、让活动更有趣、让用户更舒适。 产品总监具有很强的同理心。 B端产品实用性大于美观性，能专注于解决问题。 ，配置资源的B端产品才是好的B端产品，产品总监必须有更强的逻辑思维能力。
1.3 后台产品常见类别
后台产品按照功能大致可以分为两类，一类是支持前端产品的，一类是管理各种资源的。 我认为后台产品应该属于B端产品的范围。 常见类型包括：
2. 背景产品设计思路
2.1 初识后台产品设计
说到后端产品，很容易想到复杂、庞大、深思熟虑的逻辑，但作为设计师，苦于竞品过多、架构复杂，设计的前期工作比实际要复杂得多。设计本身。
后台产品与普通用户使用的APP不同，用户首次、短时间内使用时认知成本相对较高。 当用户习惯了一个音乐应用后，再给他几个其他的音乐应用，用户就可以快速上手，轻松解决需求。 后端产品则不然。
对于后台产品来说，首先可看的东西很少，不能随便下载使用，即使使用，也会因为角色不同而受到权限的限制，管理员也可以访问整体功能； 其次，门槛较高，后台产品的用户通常都在这个行业积累了很长时间，所以要设计后台产品，需要对行业有同样的了解，甚至更好的洞察行业，其复杂性业务本身的性质决定了后台产品结构会比较大； 之后，无论是鞋厂、店面的进销存管理，还是政府诊所的工作流程和业务流程，甚至企业内部的产品，不仅不同行业有门槛，而且还存在着一定的门槛。对信息和产品的“保密合同”的使命感。 所谓“隔行如隔山”，尤其是后端产品； 最后，后端产品设计往往没有固定的功能框架和业务模型。 对能力要求较高。 设计师不仅制作界面、优化流程，还积极与产品总监沟通，对产品进行思考和探索。
这可能是与背景产品相关的资源较少且设计难度较高的部分原因。
2.2 后台UI设计工作流程
后台UI设计的工作大致分为三个部分：需求分析-设计执行-数据分析。
在需求分析阶段，需要对产品本身、行业本身有一些基本的了解。 了解产品的基本情况，如产品目标、用户群体、产品定位、需求分析、功能模块、主要竞品及产品特点等。 这个产品解决什么问题？ 您想实现什么目标？ 该系统的用户有哪些？ 不同角色的用户有哪些具体的权限？ 是否有必要为每个用户的行为生成操作日志？ 产品主要功能模块有哪些？ 产品的业务流程是怎样的？ 类似的产品还有哪些？ 与他们相比，我们的产品有哪些特点和特点？ 成功制作大型综合后端产品是整个设计团队和开发团队能力的体现。 对于很多小团队来说，只能做出大团队不愿意做的产品，或者寻找其他方式，在个别方面进行专门精炼。
在设计执行阶段，参考PM给出的功能清单，梳理原型和流程。 需要关注的是当前的版本规划、功能模块、功能类型、功能描述、任务优先级、完成时间等。交互原型是伴随着功能的。 描述、规则判断条件、触发条件等。原型设计完成后，开始UI视觉的设计，此时前端同步构思需求的实现方案。 UI设计人员从后端了解实现框架，方便交接和沟通。 界面实现时，UI设计师应该首先进行测试，力求做到视觉设计和代码实现上不出现偏差。 设计执行完成后，从信息层面、文字、图标、图片等方面进行设计演练，并进行多次设计验证和测试。
数据分析是产品优化迭代的重要基础。 经过多次测试和审核后，交付给客户（或内部）使用，并根据形成的具体问题进行迭代，观察产品能够通过准确的数据反映问题、展示能力。 应真诚接受用户的建议并认真考虑。 合理地，用户的使用和反馈是优化产品的重要途径。 只有达到管理运营指标，后端产品才能真正形成价值。
2.3 制定设计规范的作用
制定后端产品设计规范的作用和好处是什么？ 简单来说，就是对产品有利，对自己有利，对团队有利，对客户有利。
对于产品——当第一个版本的项目相对稳定时，开始制定设计标准，统一公司的视觉设计规范和个人具体的交互设计规范。 多个设计师将参与同一个项目，标准化的设计语言将防止设计控制混乱而影响设计输出；
为自己——将相似的元素组件化，提升工作效率，完善公司产品的组件库，方便不同项目的复用和设计扩展； 在同一个项目中，您可以更好地控制项目的视觉规格，提高效率；
对于团队——设计规范的制定，规范设计团队的输出，同时方便与开发团队的交接和协作。 通过设计规范的制定，后端实现也可以拥有一套可复用和扩展的组件库，促进上下游交接和团队协作；
对于客户——制定设计规范时必须考虑设计的可扩展性，以便为不同客户的多样化需求提供更高效的输出。 同时，在产品迭代过程中，设计规范的组件化调整也大大提高了工作效率。
3. 背景产品设计规范
*以下内容仅供参考和交流，图片内容不代表真实规格，请结合具体产品灵活使用。
3.1 页面布局
统一规格——据统计，目前PC用户屏幕帧率排名前三的分别是：1920*1080、1366*768、1440*900。 如果按照1440来设计，向下适配或者向上适配偏差会更小。
适配方案——针对多个客户，后台产品设计功能页面规格统一为1440*900，并根据网格系统原理向下或向上适配； 显示类型页面以1440*900为主，同时设计极端情况的疗效图（长度1280和长度1920），力求达到疗效与高保真设计偏差最小图表在后端。 对于公司内部后台系统，由于每个员工的笔记本屏幕都是统一采购、统一规格的，所以开发适配的码率可以采用统一规格来设计。 这个规格可以根据公司内部采购屏的规格和帧率来选择（后端沟通良好）。
页框——页框主要分为左右栏布局、上下栏布局以及其他布局。 左右栏布局包括三个主要区域：底部栏、左侧菜单栏和主要内容。 底部菜单栏和左侧菜单栏为固定结构，两侧主要内容根据码率动态缩放； 上下栏布局包括底部菜单栏和两个主要内容区域。 底部菜单栏是固定结构。 主要内容动态缩放，需要定义主要内容左右两侧空白区域的最小值。 当左右栏排列好后，左侧菜单可以收缩和展开，收缩状态下长度固定。
网格布局——网格系统用于解决自适应和响应式问题，从而更好地进行产品设计和产品开发。 响应式网格采用24列网格系统实现，满足2、3、4、5、6比例布局等多种情况。 固定长度的Column，间隔Gutter是动态缩放的。 待栅格化内容的总长度 = 23 列（1 列 = 1 长度 Column + 1 间隔 Gutter）+ 1 长度 Column = 24 长度 Column + 23 间隔 Gutter。 微软规定模块和结构之间应该以8px为基准，布局之间的相对宽度可以使用8px和8的倍数，但一些小组件（按钮、间隔、输入框）可以以4为基准。网格布局是辅助设计的，灵活运用，不要受其限制。
规格设置——一般将产品LOGO和产品名称放置在整体区域的左上角，大多数系统的底栏高度为48+8nelementui 下拉按钮，侧边栏长度为200+8n。 我通常使用的是底部栏的高度为56px，侧边栏的长度为200px，收缩状态下侧边栏的长度为56px，两侧侧边浮窗的长度为400px。
相对间距——定义主要内容的上、下、左、右行距，定义主区域内各模块的行距和安全间距，超出区域的部分使用区域内或整个屏幕的滚动内容区域，并根据需要修复导航栏。
3.2 标准颜色
颜色分为品牌色、辅助色和中性色。 根据不同产品的不同需求，统计图表、标签等也可以设置统一的标准颜色。
品牌色是产品的主色调。 产品主色调的设置直接影响产品的知性、直观体验，也是产品的直接外在形象。 品牌颜色应根据产品特性、用户使用场景、产品定位等来选择，并尽量使颜色具有可扩展性，以支持皮肤变化。 品牌颜色的应用场景包括操作状态、按钮颜色、可操作图标等。
辅助颜色用于指示其他场景，例如成功、失败、警告、无效等。
中性色常用于文字、背景、边框、分割线等，需要考虑蓝色背景和黑色背景的区别。 您可以选择相同的色调来控制透明度的变化，并用它来表达不同的层次结构。
其他颜色如统计图表、数据可视化、多个标签的不同配色方案等根据项目情况单独设置。
3.3 标准字符
后台系统常用字体：Windows系统、英文MicrosoftYaHei、英文Arial； Mac字体，英文PingFangSC，英文Helvetica； 另外，可以选择的字体还有segoeUI、思源宋、HiraginoSansGB等。
后台系统中常用的字体大小有12px、13px、14px、16px、18px、20px、24px、30px。
列宽设置，根据文字大小和使用场景设置列宽，通常列宽=文字大小+6px/8px。
3.4 图标
图标是UI设计的重要组成部分。 通常分为功能图标和应用程序图标。 以图形方式传达概念，可以降低理解成本，让界面更加和谐美观。 在后台产品中，图标的作用更多的是辅助性的，帮助用户了解功能。
不仅是一些常用的图标，还有一些专业的操作和词汇都需要设计师来勾勒出来。 现在更高效、便捷的方式是使用AI在iconfont提供的图标模板上进行绘制。 画板尺寸为1024*1024，提供正方形、正圆、矩形形状（文末提供下载）。 图标规范按照8的倍数进行扩展elementui 下拉按钮，轮廓完成后，生成svg格式文件，提交给阿里巴巴矢量图标库项目组。 。
我想分享一下我个人经常使用的一个使用AI的小习惯。 我不使用ctrl+q和ctrl+w作为退出和关闭，但有时我会颤抖，在保存时不小心点击关闭，所以我很无情。 我制作了ctrl+q、ctrl+w快捷键来扩展、扩大外观……体验还不错。
3.5键
按钮是后台产品交互设计中的重要元素。 提供给用户点击操作。 它是最具视觉冲击力的控件，具有一定的视觉接受度。 常用的按钮可分为填充按钮、线性按钮、文本按钮。
按钮的交互状态包括默认、悬停、点击、不可用。
按钮根据需要分为不同的规格。 大、中、小三个级别用于不同的场景，通常按照8的倍数设置。例如高度分别设置为24、32、40px。
标准化时，需要指定不同类型按钮的宽度、高度、圆角、文字大小，同时解释按钮的不同状态。
填充键的最小宽度为 10px。
3.6 导航
导航的类型有很多种，例如顶栏菜单、侧栏菜单、折叠菜单、下拉菜单、面包屑、分页、步骤栏、时间线、标签页、胶囊菜单、徽标编号等。
各种导航中的字体大小可以统一设置。
顶栏大部分菜单为一级菜单，点击即可切换，或者作为下拉菜单的父级，对子级菜单进行合理分类。
侧边栏菜单是一个垂直导航菜单，可以嵌入子菜单。
下拉菜单的触发形式通常有两种：键盘悬停和键盘点击。
步骤栏引导用户按照流程完成任务，通常不超过两步。
页面高度设置为24px、30px、32px，内容可以根据应用场景适当增减，比如设置每页显示的数据条数、跳转到指定页面等。
用蛋糕屑来说明层次结构，以便用户可以清楚地了解当前所在位置，并可以返回到任何父页面。
徽标编号用于通知用户当前有未读消息，通常出现在图标的右上角或文本旁边。
3.7 表格
一个表单由一个或多个列表项组成，单个列表项的类型包括数组输入框和条件选择器。
数组输入框的标题以及输入框的分布形式有左右、上下、无标题等。 左右分布是常见的对齐方式，比较适合在PC端使用； 上下分布降低了窗体的整体高度，因此根据情况选择使用； untitled常用于登录注册，即使它缩小了面积，降低了理解难度。
输入框的交互状态包括默认、输入结果、错误提示、禁用、焦点等。
输入框的规格可以按照8的倍数来设置，比如24px、32px，也可以根据系统的实际情况来设置。 我通常使用的输入框高度是30px，长度根据情况而定，没有圆角。 垂直布局中多个输入框的上下宽度均为20px。 当有错误提示时，会垂直降低10px或垂直显示在输入框左侧（预留空间）。
表单中，标题文本左对齐，输入框左对齐，标题文本距输入框20px（多个不同宽度的输入框均视为最长）； 标题文本右对齐，输入框左对齐，这也是常用的形式。 输入框中的文字字体为14px，文字及左右边框的分辨率为10px。
选择器包括单选、多选、时间选择、开关切换、下拉选择、滑块选择、旋钮等。单选按钮多为方形，复选框多为矩形。
搜索框和选择框的高度为30px或自行设置8的倍数，一般与输入框一致。 搜索框距两侧按钮4px，内部文字14px。
单选多选框的尺寸为16*16px，多个选项的垂直排列宽度为16px，水平排列宽度为8px。
开关按钮的外框为40*20px，内框为16*16px。
3.8 表格
表格在后台产品的UI设计中发挥着特别大的作用。 它是显示数据、统一管理数据并作为细节使用的最清晰、最有效的方式之一。 在设计规范中，需要设置表头高度、表格列宽、表格行间距范围，还包括表格中的按钮样式和标签样式。
表格主要分为五个区域：选择搜索区、操作区、表头、正文、底栏。 选择搜索区域放置过滤框和搜索框，为用户提供按需搜索，可以大大提升用户效率； 操作区是指对表内容进行增删改查、批量处理、配置列等各种操作； header显示列标题，通常具有排序功能； 文字主要展示各种数据，注意列宽、对齐、分割、信息层次等，并考虑是否提供内联操作； 底栏显示分页、总计统计信息等。
通常，表信息的主要功能是增、删、改、查。 查看和编辑是最基本的功能。 表格信息支持过滤、搜索、排序、分页。 对于可以批量操作的表格数据，勾选第一列的复选框。
列宽——表格的列宽可以设置为表格中字体高度的2~3倍。 主表会间隔显示不同的颜色，以区分不同行的数据，加强视觉流程引导。 单行的外部表可以是黑色的，选定的行应该有视觉反馈。 表头应在视觉上与表内容区分开。 表格列宽可以是 36、40、48、60 等。
行数——表中的行数过多会增加加载率并延长用户等待时间； 行数太少会导致用户不断翻页，提高使用效率。 比较合适的默认表行数是20或50，用户可以根据需要选择默认行数。 设置行数后，如果每页行数超过每屏行数，可以在表格中引入滚动条，此时可以固定表头的滚动内容。
行间距——列宽度需要根据内容数组的长度有不同的、合理的默认值，使表格数组有良好的显示效果。 当列内容宽度固定时，行距应小于固定长度（如时间、MD5、SHA1）； 当列内容不固定时，可以预测最大长度，并根据最大长度设置行距（如IP地址、MAC地址、名称）。 无法预测最大长度的设定行距是根据常用长度。 如果小于内容，则会显示“...”，键盘悬停时会出现完整的内容（如详细信息、描述）。
列数——表中不应有太多列。 如果列过多，应合理合并、隐藏、删除或优先级排序。 常用的技术包括引入配置栏目，用户可以自定义显示除所需栏目之外的其他栏目； 只显示重要信息，下拉展开栏目可查看完整信息； 表格中引入垂直滚动条，根据实际情况选择是否始终固定基本信息栏（如第一栏为文件名）和操作栏（最后一栏的操作）。
对齐方法——表格中的文字应根据不同的文字类型进行统一规范。 例如，金额的值保留相同的小数位数。 SHA1实际上是一串数字，看起来它不是数据而是一串代码，所以它可以像文本一样左对齐。 根据文本内容的不同，对齐方式也应灵活调整，如文本左对齐、数据右对齐、金额小数点对齐等。 如果数据上有标签，标签将后对齐。 对于IP地址、MD5、SHA1、域名等信息，还可以根据产品需要将“复制”图标放在文字后面，方便用户调用。
明细条目——表格内部数据的明细条目，可点击下钻查看明细的内容会以不同的颜色显示，最后的操作按钮部分会放置一个查看按钮表行的列。
