做C端界面时,很多人靠感觉也能把页面拼得挺好看;一转到B端,同样的方法立刻失灵——表格行高到底给多少、一个后台页面塞七八个操作按钮怎么排、筛选条件展开后遮住内容怎么办,这些都不是审美问题,而是规则问题。这门课针对的就是这个断层。

先说清楚:它不解决什么问题

如果你还没搞明白图层、蒙版、组件这些基础操作,这门课不会从零教你软件。它的起点是"你已经能画出一个界面,但不确定画得对不对"。同样,它也不讲品牌视觉、运营banner、C4D这类偏表现的内容——B端设计的美感来自秩序和效率,不是视觉冲击力,这门课从头到尾都在这个前提下展开。

课前预习部分从图标这类最基础的单元切入,包括线性图标、磨砂质感图标、图片与文字的混排处理。这部分看似是C端也会用的技能,但放在B端语境下要求完全不同:图标要能在16px下辨认清楚,要能成套统一,要经得起在密集列表里反复出现。如果你之前画图标全凭手感、没有网格和对齐意识,这一段会暴露问题。

真正的分水岭在布局和组件

B端设计和C端最大的差别,不在单个页面好不好看,而在于页面背后的结构能不能复用。同一个后台,几十个列表页、表单页、详情页,如果每个都单独设计,交付和维护都会崩。课程里占比重最大的部分,是页面布局的拆解和组件化思路:栅格怎么定、内容区宽度区间怎么划、卡片和表格如何承载不同密度的信息。

这部分学完,你应该能回答几个很具体的问题:一个包含搜索、筛选、批量操作和分页的列表页,从上到下的信息层级该怎么排?表单字段多到需要分步时,什么情况下用步骤条、什么情况下用分组折叠?这些不是靠灵感能拍出来的,背后是大量真实项目沉淀下来的判断。

交互文档:很多人卡在这里

B端项目里,设计师和前端吵架的高频原因,是状态没写清楚。空数据什么样、加载中什么样、报错提示放哪、按钮禁用态灰到什么程度、超长文本截断还是换行——这些在静态稿里往往被忽略,到了开发阶段就变成来回扯皮。课程专门讲交互文档的写法,本质上是在训练你把一个界面的所有分支状态提前想完。

如果你是转岗过来的,或者一直在小团队里"设计开发一肩挑"、没写过正式文档,这部分可能是最需要补的。它不浪漫,但直接决定你在团队里的专业度。

学完之后,拿什么检验自己

  • 给你一个从没接触过的后台需求,你能不能在半天内搭出结构合理、状态完整的页面框架,而不是先纠结配色?
  • 你做的表格,能不能在不看说明的情况下,让开发明白排序、筛选、分页、空态各自的触发条件?
  • 同一套图标,缩到最小尺寸后是否依然清晰可辨、风格统一?
  • 你能否说清楚自己每一个间距、每一个层级背后的理由,而不是"感觉这样舒服"?

如果这几个问题你现在答不上来,说明缺口正在这门课覆盖的范围内。它适合的是已经在做界面、但想把B端这块做扎实的人——带着自己手头的项目来对照着看,比单纯跟着做一遍案例有用得多。

牛MO王B端UI设计系统突破班2期

B端UI设计实战突破

编辑点评

系统深入B端UI设计,涵盖图标、页面布局、交互文档等实战技能,适合有志于B端UI设计领域的学习者。

⭐ 编辑推荐

全面解析B端UI设计,实战案例丰富,助你快速提升设计能力。

课程亮点

• B端UI设计实战
• 系统化学习路径
• 丰富案例解析

课程目录

– └──第一章_课前预习
– | ├──1-10_App界面设计实战之图标设计-UI_UX设计系列课~1.mp4 174.00M
– | ├──1-11_App界面设计实战之磨砂玻璃图标-UI_UX设计系列课~1.mp4 188.18M
– | ├──1-12_App界面设计实战之线性图标-UI_UX设计系列课~1.mp4 91.48M
– | ├──1-13_App界面设计实战之图片文排版-UI_UX设计系列课~1.mp4 108.22M
– | ├──1-1_UI基础知识UI的起源与历史演变-UI_UX设计系列课~1.mp4 159.09M
– | ├──1-2_UI专业术语认知-UI_UX设计系列课~1.mp4 70.96M
– | ├──1-3_UI的设计工具-UI_UX设计系列课~1.mp4 117.42M
– | ├──1-4_UI的适配和规范-UI_UX设计系列课~1.mp4 236.90M
– | ├──1-5_UE_UX用户体验设计基础认知-UI_UX设计系列课~1.mp4 134.57M
– | ├──1-6_App界面设计实战之准备工作-UI_UX设计系列课~1.mp4 266.27M
– | ├──1-7_App界面设计实战之登录页面-UI_UX设计系列课~1.mp4 272.37M
– | ├──1-8_App界面设计实战之钢笔和锚点-UI_UX设计系列课~1.mp4 126.18M
– | └──1-9_App界面设计实战之首页布局-UI_UX设计系列课~1.mp4 150.75M
– ├──第二章_B端产品思维
– | ├──2-1_1.B端产品概述_产品种类及规划方向~1.mp4 1.02G
– | ├──2-2_ _2_.B端产品思维_体验设计流程与方法.mp4 668.69M
– | ├──2-3_ _3_.B端产品思维_用户研究与方案评估.mp4 1.07G
– | ├──2-4_4.B端产品思维_交互文档及原型设计~1.mp4 1.61G
– | └──2-5_5.录播-章节复盘~1.mp4 338.77M
– ├──第三章_B端产品执行
– | ├──3-1_6._BS后台系统界面实操一_主页设计及组件库建立~1.mp4 1.52G
– | ├──3-2_7._BS后台系统界面实操二_数据图表及表单表格~1.mp4 1.50G
– | ├──3-3_8._BS后台系统界面实操三_图标设计规范及自动布局~1.mp4 1.05G
– | ├──3-4_ _9._BS后台系统界面实操四_项目一设计评审.mp4 939.57M
– | ├──3-5_ _10.CS后台系统界面实操一_设计目标与设计策略.mp4 702.90M
– | ├──3-6_11.CS后台系统界面实操二_业务模块设计策略~1.mp4 1.41G
– | ├──3-7_12.CS后台系统界面实操三_情感场景插画设计~1.mp4 1.15G
– | ├──3-8_13._CS后台系统界面实操四_阶段作业复盘拆解~1.mp4 1.39G
– | └──3-9_14.录播-章节复盘~1.mp4 310.71M
– ├──第四章_B端产品输出
– | ├──4-1_15.B端产品输出_设计评审与产品走查~1.mp4 1.05G
– | ├──4-2_16.B端产品输出_体验度量与B端情感体验~1.mp4 954.93M
– | ├──4-3_17.B端产品输出可用性测试与项目复盘~1.mp4 1.01G
– | ├──4-4_18.B端产品输出专业的展示产品设计及排版~1.mp4 1.14G
– | └──4-5_19.录播-结课复盘~1.zip 251.77M

适合人群

  • UI设计师
  • 产品经理
  • 设计爱好者

学习收获

掌握B端UI设计流程
提升设计实战能力
打造专业UI作品

祝您学习愉快!

学有所成,前程似锦!