B端新手必看！提高10倍效率的零基础自学路线

B端设计是依附于B端企业服务的UI设计类型，继承了B端涵盖行业广泛且碎片化的难题，导致自身要掌握的技能和知识也非常多样和晦涩，新人很难理清B端入行学习的方法和路线。

所以今天做个汇总型的系统输出，关于零基础外行怎么入门B端设计的说明建议，来解答完全零基础同学关于职业入行的相关疑问。

一、B端入门的基本框架

想要零基础入门就要先确定入门的标准，而我对B端设计入门的定义如下：

能够根据普通项目的产品需求· 输出可用的界面设计方案 · 并完成交付。

这个标准有三个要点，第一点是对项目的定位，B端有一些相对标准化且常见的项目类型，比如客户管理CRM、企业办公 OA、产品后台CMS等等，同时也有很多非主流且小众的项目，比如工业产线管理、核电水电站管理、石油勘测标注工具等等。

这些小众的项目本身离我们的日常生活就很远，加上业务形式特殊，每个行业都会有自己的设计要求和交互特点。所以作为新人要先从基础开始，将精力集中在常见的通用项目上，掌握理解和驾驭它们的能力以后，就可以更有效地理解复杂的项目类型。

第二点界面设计方案，即项目所需的所有界面设计要素。因为项目中只提供界面设计效果是远远不够的，还要提供规范、组件库、图标、动效等内容。设计方案除了通过团队的评审外，还要具备可被开发和实现的标准。

第三点交付，就是将设计方案以特定的标准提供给对接人员，就像室内设计师除了出室内3D渲染图外，还要提供施工图和标注文档。UI设计师也需要进行类似的准备，来确保程序员能按正确的方式完成界面开发。

以上三点就是对B端设计师入门最基本的要求，能制作达到入行标准的作品集，以及能勉强完成基础岗位的日常工作。而不是掌握Figma，能用软件临摹做出一些简单的B端界面就叫入门了。

所以要达到这个标准，就需要对学习内容做一遍整理，我们可以将它们先划分成知识和技能两个部分，知识即需要了解的专业常识、规则、理论，用于指导实践的思路。而技能则是具体动手实操的能力，包含从工具的使用到具体的设计对象的输出。

下面我们根据入门学习的不同阶段，来解读它们分别需要掌握哪些知识和技能。

这里面我将入门拆成了6个阶段，每个阶段都是不可或缺的，它们即是上一步的延续也是对下一步的准备。而有了这个大致的学习顺序和内容以后，下面我们就分别进行简单的说明。

阶段1：初步接触阶段

1. 阶段定义：初步接触阶段就是作为完全外行零基础要开始学习B端设计的阶段。
2. 阶段目标：在这个阶段的主要目标是建立对B端产品的整体认识，以及了解B端设计的主要内容和样式。
3. 时长建议：控制在1-2周内即可

知识掌握

这个阶段优先要掌握的知识就是B端概念的定义以及和C端的区别，这个网上信息很多而且介绍得很详细，查查就明白了。但光了解概念还不够，须要更具体的理解B端常见产品类型和应用场景，比如CRM、OA、ERP等产品有什么功能，分别应用在哪些场景中，能实现什么样的效果。

这需要我们查阅大量的扫盲和科普文章，确保我们能建立对B端产品究竟是什么、有什么用的清晰概念。除此之外，还需要尽可能去查找可以注册和使用的相关SaaS类产品，通过自己的试用来更直观的感受B端产品的作用和界面表现。

这是 B 端初学最重要的一步，只要花几天的时间就能建立起大概的认识。而很多新手在连设计的对象是什么、用起来是什么样都不知道的情况下就在学习设计理论或软件是非常大的误区。

除了了解 B 端的产品外，还有个对B端设计来说非常重要的内容，就是B端的前端开源框架，比如 AntDesign、ArcoDesing、TDesign 等，它们是由第三方团队开发出来让其它企业可以快速套用的前端源代码，包含了丰富的组件样式和交互效果。

这些前端开源框架对B端的设计和前端开发都产生了深远的影响，是我们绝对不能忽视的东西，可以自己查找它们更具体的使用介绍和价值解析。同时它们在官网都提供了非常丰富的设计解释文档和组件说明，可以帮助我们快速完成对B端界面内容的扫盲，是最好的才入门扫盲读物，仔细看完一套框架的设计说明文档是有绝对必要的。

可以查看下方的链接：

1. AntDesign设计规范说明：https://ant.design/docs/spec/colors-cn
2. AntDesign组件使用说明：https://ant.design/components/overview-cn/

技能掌握

除了知识的学习外，初期要掌握的技能就只有 Figma 了，而学习 Figma 绝对不是建议大家在这个阶段奔着“精通”去的，因为大多进阶功能缺乏使用价值，在这个阶段也完全没有用武之地。

所以建议你们先快速过一遍教程，了解一遍 Figma 的大致功能模块和操作技巧，然后跟着实操案例完成几个基本页面设计的操作即可。要提前强调，进阶功能对输出界面几乎没有任何影响，而 Figma 的掌握程度对你能不能把界面做好也基本没有关系。

阶段2：上手实操阶段

1. 阶段定义：不再是学习软件，而是针对B端界面进行具体的实操训练
2. 阶段目标：掌握B端界面设计的基本规范和要求，起码能通过临摹做出正确的界面设计
3. 时长建议：大概需要2周时间

知识掌握

这个阶段要掌握的知识就是更具体的B端设计知识了，尤其是设计规范相关的信息，比如应该使用什么字体，按钮、输入框、圆角的大小等，以及网页设计如何使用栅格等知识。

虽然前面看的前端框架说明已经包含了不少相关内容，但那个阶段的目标主要是了解前端框架本身是什么，同时它们也有自己的局限性，需要我们跳出到整个网页设计的层面来重新理解设计要求和底层规范，这些内容要靠自己去搜索相关说明进行扫盲。

除了网页规范外，还要了解一个概念就是项目规范。项目规范和网页规范、框架规范不同，是每个独立设计项目要创建出来的专用规范。而你们要做的事情就是在这个阶段去理解它是什么，会要创建哪些内容，能明确区分这些现在看起来眼花缭乱的规范都是什么，而不用动手去实操。

技能训练

这个阶段技能的训练就要开始有针对性地放在对具体设计内容的训练，而不是“软件操作”上了。最重要也最基础的两个设计训练对象，就是界面和图标。

B端常见的基础界面类型其实不多，就登录、表盘、表格、列表、详情、表单等，而训练的方式就是针对每个页面类型找到专业的案例结合前面了解的规范进行临摹，一方面要快速掌握它们的设计模式和思路，另一方面要深刻记忆规范的知识并将它们内化。

除了界面外，还有另一个一定要训练的方向就是图标的设计。和C端不同的是，B端更倾向使用简洁的线性或面性图标，不需要添加夸张复杂的视觉效果。虽然视觉复杂度的要求不高，但不代表这种简单的图标就好画。

图标的学习就像学写字的过程，需要在掌握初步的绘制技巧后进行大量的训练，就像英文字母这么简单的文字，想要写好也要我们做出不少努力。所以这里建议至少要临摹10组以上的线性或面性图标，才能达到入门的水平。

阶段3：上手实操阶段

1. 阶段定义：开始进阶输出完整的B端项目界面
2. 阶段目标：脱离孤立的界面训练，转向理解和尝试更复杂的整体设计
3. 时长建议：大概需要1-2个月时间

知识掌握

项目设计就是难度远远比单一界面临摹和设计更复杂的实践了，而要完成这种就需要了解更多项目相关的知识，它们就不再只是单纯的设计知识，而是会涉及不同领域的复合型知识。其中最重要的两个方向，就是项目设计的流程和体验设计的流程。

这两个流程听起来会非常接近，但实际上差异巨大。项目设计流程的知识是完成一个项目的基本设计过程，我们会在这里面了解设计师的任务是怎么来的，以及完成工作的顺序，和后续交付设计的不同阶段之间的关联。简单来说就是了解真实项目中真实项目中B端设计师的工作方式。

而体验设计流程，则是基于体验为目标来分析项目再完成项目的过程，这里我们主要要理解的就是体验设计包含了哪些工作步骤，如数据分析、用户研究、可用测试等等，同样是为了建立一个大的认知框架，而不是直接开始实践。

先有了这些认识才会尽可能促进我们在前期的项目设计练习中进行更深入的思考，理解“项目分析”到底是什么，为什么光输出界面不够。

技能训练

这个阶段主要的实践训练就是输出完整的项目了，即选择一个项目主题，然后完成它主要页面和相关流程的设计。

这里首先会有一个应该设计什么项目的疑问，B端不像C端可以随便构思一套项目完成设计，所以我建议可以先挑选一套线上操作过且熟悉的项目，对它进行重构。

完成这个训练会发现的问题有非常多，对前面界面设计掌握程度的检查，以及对项目视觉风格、一致性的尝试等。可以把这个阶段的训练当成一个能力的自查过程，所以你发现的问题都可以成为后续要补充、复习的地方去进一步学习。

项目的输出练习可以持续比较长的时间，而这个阶段也可以以产出作品集为目标来选择并输出项目作品。

阶段4：细化深入阶段

1. 阶段定义：开始进入项目设计更细致的交互和流程的设计过程
2. 阶段目标：开始熟悉B端设计中最重要也最注重细节的交互设计内容
3. 时长建议：大概需要1个月时间

知识掌握

这个阶段要掌握的知识就是体验和交互有关理论性知识，可以看一些推荐的书籍扫盲。

其中最重要的一点是，交互和体验的书面知识大多就只是知识，很难真正转化成实践方法和指导。我们了解这些知识的目的仅仅是对这两个专业领域有更深一点的理解，但真实的实践就完全是一回事。

所以在这个阶段中，了解理论知识就没有前面几个步骤权重那么高，更是作为一种辅助性的步骤，不需要过多占用实践练习的时间。

技能训练

交互设计是非常注重实践的技能，所以最好的交互提升方法就是动手去做。所以在了解完交互的定义和输出标准以后，就要直接开展相应的练习。

而主要的练习对象分为两个阶段，第一个阶段依旧是临摹，从你使用过的产品中截取一个简单的操作流程，把这个操作流程用原型图完整复现一遍，并写上相应的交互逻辑。第二个阶段，还是选出一个操作流程，然后理解它的目标逻辑以后自己做一个新的版本出来。

这是交互设计中最有用、最可靠、最简单的方式，甚至可以说是真实项目外唯一的训练方式。只要愿意投入时间进来，肯定就能在一个月内快速入门交互而不是看一大堆书和视频依旧不知道怎么动手。

阶段5：收尾方式学习

1. 阶段定义：集中在学习如何交付已经完成的项目设计方案
2. 阶段目标：理解并入门项目设计中 UI 要交付的内容和标准
3. 时长建议：大概需要1周时间

知识掌握

想要理解项目的交付，我强烈建议一定要学习 Html+CSS 这两个前端语言并自己动手做一些自己设计的页面。这两个前端语言只最基本的标记语言和脚本，并不是编程，学起来非常简单。而我们学习它们的原因就是要亲身感受界面是怎么被开发出来的，这对标注和交付的认识会产生巨大的影响。

同时，我们的本职工作并不是做前端，所以即使这两个语言的应用并不复杂，我们也无需太深入去学习，只要花一定的时间学习和尝试，搞明白它们的作用和逻辑即可。

然后就是对项目中标注切图的工作认识了，到这里就只能看不同的科普文章，以及结合对前端入门的实践来理解标注和交付的具体内容了。

技能训练

标注和切图要学的技能就不多了，主要的应用只有两个方面，要不然直接使用  Figma 结合开发模式完成标注切图的交付，或者使用蓝湖这种第三方工具来实现。而第三方标注切图工具大同小异，只要用过蓝湖其它的也能无缝上手。

其中，切图并不是必须得使用外部工具才能完成，有了前端的基本操作经验，就应该知道前端要的切图应该是什么样的，要有自己独立完成成套项目切图导出的能力。

阶段6：输出总结阶段

1. 阶段定义：是对非工作实战的设计师作品集和项目展示方式进行学习
2. 阶段目标：能输出目前市场需要的作品集和对应质量
3. 时长建议：需要1-2月

知识掌握

最后这个阶段，就是了解作品集输出的相关知识了。很多人以为作品集只要有个方向直接开始做就行了，但这么做出来的结果大概率惨不忍睹。建议使用至少半个月（从前面就可以开始）去网上查找优秀的作品集案例，以及关注招聘网站中的职业 JD要求，以及咨询在职的设计师喜欢什么样的作品集。

然后再去分析项目应该怎么展示合适，大厂那些复盘和展示文章是怎么写的，去分析它们的编写结构和逻辑。这可以非常好的帮助我们建立项目包装的概念，并且为你提供必要的作品说明编写灵感。

如果没形成自己的认识，只靠简单照抄或者套模板的话，那是没办法在今天的招聘市场中脱颖而出的。

技能掌握

作品集输出除了前面作品本身设计以外，还包含两个技能类型：

1. 说明文案编写
2. 平面图文排版

这两个能力都是需要先锻炼实践，再正式去输出作品集的，而不是简单了解个大概就以为自己能直接上手就做了。

说明为难编写的掌握，不需要等到做作品集的时候才用的上，你可以创建任意空文档，直接在里面编写你对自己项目设计的说明或复盘。当然，这些内容可以是图文结合的，而前面参考大厂的文章作用就会在这里体现出来，只要稍加练习很快就能找到诀窍。

另一部分就是平面图文的排版技能，也可以理解成是一种设计PPT的能力。这种能力只靠看和案例积累是远远不够的，必须有目的性的进行训练。可以多去找平面排版设计的教学和跟练案例，进行基础的排版训练（很好玩的）。

平面排版练习会消耗的时间其实不会太多，因为排版练习不需要做样式和填色，比做原型还容易。我们可以通过一两周的专项练习快速提升这种能力，而提升排版这种最基础的能力，除了作用在作品集外，还会对我们进行的任何其它设计都起到极大的帮助。

所以可以理解成借输出作品集的机会，来学习从一开始就该掌握的设计基础技能。有了这些积累以后，再正式展开作品集的设计，那么最终输出的结果也会大大优于原先，甚至还能比原来的做法更快做完。

完成这些内容的学习并且最终输出完整且“合格”的作品集以后，就达到了真正入门的水平。

结尾

职业技能的入门是有门槛的要再次重申一下，不是随便看两个视频和练习就结束了，遵照上面的路线开展其实需要的时间也不会太长，几个月的时间就够了。所以你们可以自己决定是要展开几个月有质量系统的推进还是几个月无所事事漫无目的地乱学~

当然，还有很多很细小的问题没办法全部列举，就要大家自己学习的时候去发现了。

我们下篇再贱~

作者：超人的电话亭