C端Consumer指面向消费者、个人用户或终端用户设计的产品直接服务于普通人的日常生活需求帮助其完成个人目标。B端Business则聚焦于商业与企业场景旨在为企业、集团或组织提供工具、平台或解决方案以支持其业务运营和商业目标的实现。在我们的日常生活中绝大多数手机应用都属于C端产品它们通常围绕单一核心需求构建。例如抖音满足内容娱乐需求酷狗音乐提供听歌服务12306用于购票微信则承担社交沟通功能。这些产品拥有明确的核心功能其他附加功能虽能提升体验但并非不可或缺——即使缺失也不会影响其基本使用。而B端产品我常将其比喻为“暗渡陈仓”当个人用户在C端完成某项操作时背后往往牵动着一系列B端系统的响应与运作。比如淘宝卖家后台、饿了么商家版都是典型的BtoC支撑系统。此外还包括面向企业或业务部门的企业级服务系统以及供企业和个人使用的平台级工具产品等。尽管我们日常接触最多的仍是C端应用但B端产品的影响始终潜藏于幕后。C端在明直观地塑造现代生活方式B端在暗默默支撑整个流程的运转实现高效、有序的协同运作并具备多维度的核心功能共同构建起数字化社会的底层逻辑。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 端产品产品经理要具有更强的逻辑思维能力。3. 后台产品常见分类后台产品按其作用可大致分为两类一是支撑前台产品二是管理各种资源。我认为后台产品应当是囊括在 B 端产品的范围之内的常见的类型包括C 端产品的后台产品线如淘宝商家版饿了么商家版对订单和用户进行管理支持 C 端产品的业务进展。平台级工具产品如微信公众平台对文章和读者的数据统计和管理各大互联网公司的开放平台如微博开放平台等。企业级服务产品虚拟主机系统VMware云主机管理系统深信服、xensystem、腾讯云以及各种云SaaS。企业的业务处理平台对内有考勤、报销等 OA办公系统对外有 CRM 客户管理系统ERP 资源及供应链管理系统。后台产品设计思路1. 初识后台产品设计说起后台产品很容易想到复杂、庞大、逻辑缜密而作为设计师则苦于竞品短缺、架构复杂设计的前期工作比设计本身要复杂得多等问题。后台产品不同于普通用户所使用的 APP它在用户初次使用和短暂时间内的认知成本是较高的。当用户用惯了一个音乐类的 app再给他几个其他的音乐 APP用户是可以迅速上手并且轻易解决自己的需求的。而后台产品则不然。对于后台产品来说它并不是随随便便就可以下载使用的即便你在使用的过程中也因角色不同而受到权限限制一般来讲很难像超级管理员一样接触到整体功能其次门槛之高后台产品的使用者一般都是在该行业沉淀了很久所以要对后台产品进行设计就需要同样了解该行业甚至更能洞察该行业业务本身的复杂性质决定了后台产品架构也会比较庞大然后无论是工厂商家的进销存管理还是政府医院的工作流和业务流乃至企业内部的产品除了不同行业都有门槛外对信息和产品也有「保密协议」的使命感所谓「隔行如隔山」在后台产品更是如此最后后台产品设计往往没有固定的功能架构和商业模式对于产品经理的逻辑思维能力要求更高设计师不仅仅是做界面、优化流程也要主动和产品经理沟通交流并对产品进行思考和探索。2. 后台UI设计工作流程后台 UI 设计的工作大体分为三个部分需求分析、设计执行、数据分析。在需求分析阶段要对产品本身和行业本身有一些基本的认知。要了解产品的基本情况比如产品目标、用户人群、产品定位、需求分析、功能模块、主要竞品和产品特色。做这个产品是为了解决什么问题想实现什么目标使用这个系统的用户有哪些不同角色的用户有哪些具体的权限是否需要对每一个用户的行为都生成操作日志产品有哪些主要的功能模块产品的业务流程是怎样的有哪些同类型的产品和他们相比我们的产品有什么特色和特点成功地做出大而全的后台产品是整个设计团队和开发团队能力的体现而对很多小团队来说只能做一些大团队不愿去做的产品或另辟蹊径在某些方面做专做精。在设计执行阶段参照 PM 给出的功能清单做原型和流程的梳理需要关注的有当前版本规划、功能模块、功能类型、功能描述、任务优先级、完成时间等交互原型则伴随着功能描述、规则判定条件、触发条件等内容。原型设计完成开始做 UI 视觉方面的设计而这时后端同步构思需求的实现方案。UI 设计师向前端了解实现框架方便交接和沟通。当界面实现UI 设计师应该是最早进行测试的力求视觉设计和代码实现无误差。在完成设计执行后从信息层级、文字、图标、图片等方面进行设计走查进行多次设计验证与测试。数据分析是产品优化迭代的重要依据。进行多番测试和评审后交付客户或内部使用根据产生的具体问题进行不断迭代且观察产品能否通过准确的数据反映问题、体现能力应虚心接纳使用者的使用建议并严谨思考其合理性用户的使用和反馈是优化产品的重要途径。只有达到了管理和运营的指标后台产品才是真正产生了价值。3. 制定设计规范的作用为后台产品制定设计规范有哪些作用和好处呢简单来说就是对产品好、对自己好、对团队好、对客户好。对产品在项目完成第一版较为稳定的版本时着手制定设计标准统一公司视觉设计规范及某些特定交互设计规范。同一个项目会有多个设计师的参与规范化的设计语言避免因设计控件混乱而影响设计输出。对自己组件化同类元素提高工作效率建立公司产品的组件库以便不同项目的复用及设计延展。在同一个项目中也能更好的把控该项目的视觉规范提高效率。对团队设计规范的制定规范了设计团队的输出同时方便了与开发团队的交接和协作。通过设计规范的制定前端实现也能拥有一套可供复用和扩展的组件库助力上下游交接及团队协作。对客户制定设计规范的同时需要考虑设计延展性为不同客户的定制化需求提供更高效的输出。同时在进行产品迭代时设计规范的组件化调整也大大提高了工作效率。后台产品设计规范以下数值为参考请结合特定产品灵活运用。1. 页面布局统一尺寸据统计目前 PC 端用户屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900以 1440 来设计的话向上适配或者向下适配误差会比较小。适配方案面向多个客户后台产品设计功能型页面的尺寸统一为 1440*900按照栅格系统原则向上或向下适配。展示型页面以 1440*900 为主同时设计出极端情况宽度为 1280 以及宽度为 1920的效果图力求实现前端实现效果和高保真设计图误差最小。面向公司内部的后台系统由于各个职工电脑屏幕是统一采购、统一尺寸所以开发适配的分辨率可以统一尺寸进行设计这个尺寸根据公司内部采购屏幕的尺寸和分辨率选择即可提前和前端沟通好。页面框架页面框架主要分为左右栏布局和上下栏布局还有其他的布局。左右栏布局包括顶部栏、左侧菜单栏、主体内容三大区域其中顶部菜单栏、左侧菜单栏为固定结构右侧主体内容根据分辨率进行动态缩放上下栏布局包括顶部菜单栏和主体内容两大区域其中顶部菜单栏为固定结构主体内容进行动态缩放且需定义主体内容左右两边空白区域最小值左右栏布局时左侧菜单可收缩展开收缩状态下固定宽度。栅格布局栅格系统的使用是为了解决自适应和响应式问题从而更好地进行产品设计和产品开发。响应式栅格采用 24 列栅格系统实现以满足 23456 分比布局等多种情况。固定宽度 Column将间隔 Gutter 进行动态缩放。谷歌规定模块和结构之间要以 8px 为基准布局间相对间距可采用 8px 以及 8 的倍数但一些小组件按钮、间隔、输入框可以以 4 为基准。栅格布局是为了辅助设计灵活运用不要被它所局限。尺寸设定一般在整体区域左上角放置产品 LOGO 及产品名称大部分系统顶部栏高度 488n侧边栏宽度 2008n。我常用的是顶部栏高度 56px侧边栏宽度 200px侧边栏收缩状态宽度 56px右侧的侧浮窗宽度 400px。相对间隔定义主体内容的上下左右边距定义主体区域内各模块的边距及安全宽度超出内容区域的部分采用区域内滚动或整屏滚动视情况固定导航栏。2. 标准色颜色分为品牌色、辅助色、中性色。根据不同产品的不同需求可能也会将统计图、标签等进行统一标准色设定。品牌色即产品主色产品主色的设定直接影响产品气质和直观感受也是产品直接对外的形象。品牌色要根据产品特性、用户使用场景、产品定位等进行选取尽量做好色彩的延伸性可支持换肤。品牌色的应用场景包括操作状态、按钮色、可操作图标等。辅助色用于提示其他场景比如成功、失败、警告、无效等。中性色常用于文本、背景、边框、分割线等需要考虑深色背景和浅色背景的差异可以选择同一色相控制透明度变化用来表现不同的层级结构。其他色如统计图、数据可视化、多个标签的不同配色方案根据项目情况单独设定。3. 标准字后台系统常用的字体windows 系统中文 Microsoft YaHei英文 ArialMac 字体中文 PingFang SC英文 Helvetica除此之外可以选择的字体还有 segoe UI、思源黑体、Hiragino Sans GB等。后台系统中常用字体大小为 12px、13px、14px、16px、18px、20px、24px、30px。行高设定根据文字大小及使用场景设置行高一般行高文字大小6px/8px。4. 图标图标是 UI 设计中重要组成部分一般分为功能图标和应用图标以图形的方式传达概念可以降低理解成本使得界面更加协调美观。在后台产品中图标的功能则更偏向辅助性辅助用户对功能的认识。除了某些常用的图标有一些专业性的操作和词汇则需要设计师进行绘制现在比较高效方便的方法是在 iconfont 提供的图标模板上用 AI 绘制画板 1024*1024提供圆形、正方形、矩形形状。图标尺寸按照 8 的倍数进行延展绘制完成后生成 svg 格式文件提交到阿里巴巴矢量图标库的项目组里方便前端调用调整大小和颜色更为方便且能够优化系统内存和性能。5. 按钮按钮是后台产品进行交互设计是重要元素提供给用户进行点击操作是视觉上最引人注目的控件具有一定的视觉受范性。常用按钮可分为填充按钮、线性按钮、文字按钮。按钮的交互状态包括默认、悬停、点击和不可用。按钮根据需求分为不同尺寸大中小三个级别用在不同的场景一般按照 8 的倍数设定。如高度分别设定为 24、32、40px。规范整理时要规定不同类型按钮的宽高、圆角及文字大小同时还要将按钮的不同状态展现出来。填充按钮之间间距最小为 10px。6. 导航导航的类型有很多种常用的比如顶栏菜单、侧栏菜单、折叠菜单、下拉菜单、面包屑、分页、步骤条、时间轴、tab标签页、胶囊菜单、徽标数等。各类导航中的字体大小可进行统一设定。顶栏菜单多为一级菜单点击切换或作为下拉菜单的父级将子级菜单合理分类。侧栏菜单为垂直导航菜单可以内嵌子菜单。下拉菜单的触发方式一般有鼠标悬停和鼠标点击两种。步骤条引导用户按照流程来完成任务一般步骤不得少于两步。分页的高度设定为 24px、30px、32px根据应用场景适当增减内容比如设定每页展示数据的条数、跳转至指定页等。面包屑用于说明层级结构使用户明确当前所在位置并且可以回到任一上级页面。徽标数用来通知用户当前有未读消息一般出现在图标的右上角或者跟在文字后面。7. 表单表单多由一条或多条列表项组成单一列表项的类型有字段输入框、条件选择器。字段输入框的标题和输入框分布方式包括左右、上下、无标题。左右分布是常见的对齐方式比较适合 PC 端的使用上下分布增加了表单的整体高度视情况选择使用无标题经常应用在登录注册虽然减少了面积但是增加了理解难度。输入框的交互状态包括默认、输入结果、提示错误、禁用、获取焦点。输入框的尺寸可按照8的倍数进行设定比如 24px、32px也可根据系统实际情况进行设定我常用的输入框高度为 30px宽度视情况而定无圆角。上下布局的多个输入框上下间距为 20px有错误提示时候竖向增加 10px 或横向显示在输入框右侧预留出位置。表单中标题文字左对齐输入框左对齐标题文字距离输入框20px多个长度不同的输入框算最长的标题文字右对齐输入框左对齐也是常用的方式。输入框内正文字体 14px文字和左右两边边框的边距 10px。选择器包括单选、多选、时间选择、开关切换、下拉选择、滑块选择、旋钮等。单选框多为圆形复选框多为方形。搜索框和选择框的高度为 30px 或按照 8 的倍数自行设定通常和输入框保持一致。搜索框距离右侧按钮 4px内部文字 14px。单选多选框尺寸 16*16px多个选项横向排列间距 16px纵向排列间距 8px。开关按钮外框 40*20px内部圆形 16*16px。8. 表格表格在后台产品 UI 设计中占比非常大用来展示数据、统一管理、作为详情入口是最清晰、高效的形式之一。在设计规范中需设定表头高度、表格行高、表格列宽范围同时也包括表格中的按钮样式、标签样式。表格主要分为五大区域选择搜索区、操作区、表头、正文、底栏。选择搜索区放置筛选框和搜索框为用户提供按需搜索可以大大提高用户效率操作区指各种对表格内容进行增删改查、批量处理、配置列的动作表头展示列标题一般具有排序功能正文主要展示各种各样的数据要注意行高、对齐、分割、信息层级等要考虑是否提供行内操作底栏显示分页、总数统计等。表格信息一般主要功能为增删改查查看和编辑是最基本的功能表格信息支持筛选、搜索、排序、分页。对可批量操作的表格数据在第一列增加多选框。行高表格行高可设置为表格内字体高度的 2~3 倍主表格会间隔显示不同颜色用于区分不同行数据、加强视觉流引导展开单行的内置表格可采用纯色选中行应有视觉上的反馈。表头要和表格内容有视觉上的区分。表格行高可采用 36、40、48、60 等。行数表格行数太多加载速度会降低延长用户等待时间行数太少会导致用户不断翻页降低使用效率。比较合适的默认表格行数是 20 或 50用户可以根据自己需求选择默认的行数。设定行数之后如果每页行数多于每屏行数可在表格内引入滚动条这时可以固定表头滚动内容。列宽列宽根据内容字段长短需要有不同且合理的默认值使得表格字段有良好的展示效果。列内容的长度固定时列宽应大于固定宽度比如时间、MD5、SHA1列内容不固定时能预判最大宽度的按照最大宽度设定列宽比如IP地址、MAC地址、姓名不能预判最大宽度的设定列宽按照常用宽度多于内容省略以「...」展示鼠标悬停出现完整内容比如详情、描述。列数表格列不应过多列数比较多的情况下应该合理进行合并、隐藏、删除或进行优先级处理。常用的方法有引入配置列用户可自定义展示必需列以外的其他列只展示重要信息下拉展开列查看完整信息在表格中引入横向滚动条根据实际情况选择是否要始终固定基本信息列如第一列是文件名和操作列最后一列的操作。对齐方式表格内的文本应按照文本类型不同进行统一规范如金额类数值保留相同位数小数SHA1 虽然是一串数字但是其实那并不是数据而是一串编码所以可以像文本一样左对齐。根据文本内容不同对齐方式也应灵活调整可采用文本左对齐、数据右对齐、金额小数点对齐的方式。数据前面有标签的将标签前置对齐。类似 IP 地址、MD5、SHA1、域名这样的信息也可以根据产品需要在文本前面增加「复制」图标方便用户调用。详情入口表格内部数据的详情入口将能点击下钻查看详情的内容以不同颜色表示同时在表格行最后一列操作按钮部分放置一个查看按钮。9. 反馈包括弹框、侧滑框、骨架屏、全局提示、警告提示、消息提醒、加载状态等。分为模态框和非模态框区别是是否会打断用户工作流。弹框又称对话框是叠加在应用主窗口上的弹出式窗口以对话的方式使用户参与进来。弹框弹框出现时主题内容增加一层遮罩 #000透明度 50%避免使用双层弹框可同时采用有关闭图标的弹框和无关闭图标的弹框引导用户对内容进行正确操作。如果设定系统内所有弹框均可以点击弹框外区域关闭 则需要为用户新增或编辑内容的弹框弹出二级确认的弹框或者再次进行交互梳理。侧滑框侧滑框又称抽屉出现在右侧固定宽度 400px高度覆盖在主题内容之上点击侧滑框以外的区域则收起侧滑框。骨架屏为某些特定数据提供数据加载等待时的占位图形组合。全局提示建议停留时间 3s可根据文字字数调整停留时间文字内容限制在 30 以内。警告提示用不同颜色和样式展示需要关注的信息。通知提醒消息通知和警告信息用通知提醒框单个消息从页面右侧以抽屉的方式划出用户可手动关闭或停留 3s 后自动关闭。10. 缺省状态绘制不同类型的情感化插画表示缺省状态如404、500、暂时没有数据、没有新消息等。页面需要一个默认的底色错误文字使用 14px与情感化插画间距 20px与按钮间距 30px。11. 数据可视化数据可视化部分可能是后台产品中对视觉设计要求较高的部分使用情境为各类统计图、大屏展示页面等。功能型页面的数据可视化可以引入图形化设计组件Echarts、G2、d3等展示型页面的数据可视化则可以做得更有趣比如立体的统计图、粒子地球效果、灵活有趣的网络拓扑图等。考虑到数据可视化可能会需要深色浅色不同的背景在数据可视化统计图的色彩搭配上要注意颜色的拓展性。总结不管是做 C 端产品还是 B 端产品都是为了实现用户的需求、帮用户解决问题。刚接触后台产品的时候最希望能把产品做的炫酷、美观工作中慢慢地发现项目的背后思考更为重要产出的设计成果也应该有理有据、支撑整个设计体系。网上供大家使用和学习的资源非常多对一些公司来说、专门去制定一套自己的后台设计规范不免显得费时费力合理引入 antdesign 和 element 等开源的设计组件会使得设计师以及前端事半功倍有助于设计师把更多的精力投入到沉淀行业知识、研究产品架构、梳理交互方式和创新视觉表现上。在后台产品的设计过程中更应该把宝贵的时间用在更值得关注的事物上让设计师能够辅助业务挖掘从趋于相同的表象中找到产品独有的闪光点从而切实解决问题和实现价值。