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