B端設(shè)計(jì)是依附于B端企業(yè)服務(wù)的UI設(shè)計(jì)類型，繼承了B端涵蓋行業(yè)廣泛且碎片化的難題，導(dǎo)致自身要掌握的技能和知識(shí)也非常多樣和晦澀，新人很難理清B端入行學(xué)習(xí)的方法和路線。

所以今天做個(gè)匯總型的系統(tǒng)輸出，關(guān)于零基礎(chǔ)外行怎么入門B端設(shè)計(jì)的說明建議，來解答完全零基礎(chǔ)同學(xué)關(guān)于職業(yè)入行的相關(guān)疑問。

一、B端入門的基本框架

想要零基礎(chǔ)入門就要先確定入門的標(biāo)準(zhǔn)，而我對(duì)B端設(shè)計(jì)入門的定義如下：

能夠根據(jù)普通項(xiàng)目的產(chǎn)品需求· 輸出可用的界面設(shè)計(jì)方案 · 并完成交付。

這個(gè)標(biāo)準(zhǔn)有三個(gè)要點(diǎn)，第一點(diǎn)是對(duì)項(xiàng)目的定位，B端有一些相對(duì)標(biāo)準(zhǔn)化且常見的項(xiàng)目類型，比如客戶管理CRM、企業(yè)辦公 OA、產(chǎn)品后臺(tái)CMS等等，同時(shí)也有很多非主流且小眾的項(xiàng)目，比如工業(yè)產(chǎn)線管理、核電水電站管理、石油勘測標(biāo)注工具等等。

這些小眾的項(xiàng)目本身離我們的日常生活就很遠(yuǎn)，加上業(yè)務(wù)形式特殊，每個(gè)行業(yè)都會(huì)有自己的設(shè)計(jì)要求和交互特點(diǎn)。所以作為新人要先從基礎(chǔ)開始，將精力集中在常見的通用項(xiàng)目上，掌握理解和駕馭它們的能力以后，就可以更有效地理解復(fù)雜的項(xiàng)目類型。

第二點(diǎn)界面設(shè)計(jì)方案，即項(xiàng)目所需的所有界面設(shè)計(jì)要素。因?yàn)轫?xiàng)目中只提供界面設(shè)計(jì)效果是遠(yuǎn)遠(yuǎn)不夠的，還要提供規(guī)范、組件庫、圖標(biāo)、動(dòng)效等內(nèi)容。設(shè)計(jì)方案除了通過團(tuán)隊(duì)的評(píng)審?fù)?，還要具備可被開發(fā)和實(shí)現(xiàn)的標(biāo)準(zhǔn)。

第三點(diǎn)交付，就是將設(shè)計(jì)方案以特定的標(biāo)準(zhǔn)提供給對(duì)接人員，就像室內(nèi)設(shè)計(jì)師除了出室內(nèi)3D渲染圖外，還要提供施工圖和標(biāo)注文檔。UI設(shè)計(jì)師也需要進(jìn)行類似的準(zhǔn)備，來確保程序員能按正確的方式完成界面開發(fā)。

以上三點(diǎn)就是對(duì)B端設(shè)計(jì)師入門最基本的要求，能制作達(dá)到入行標(biāo)準(zhǔn)的作品集，以及能勉強(qiáng)完成基礎(chǔ)崗位的日常工作。而不是掌握Figma，能用軟件臨摹做出一些簡單的B端界面就叫入門了。

所以要達(dá)到這個(gè)標(biāo)準(zhǔn)，就需要對(duì)學(xué)習(xí)內(nèi)容做一遍整理，我們可以將它們先劃分成知識(shí)和技能兩個(gè)部分，知識(shí)即需要了解的專業(yè)常識(shí)、規(guī)則、理論，用于指導(dǎo)實(shí)踐的思路。而技能則是具體動(dòng)手實(shí)操的能力，包含從工具的使用到具體的設(shè)計(jì)對(duì)象的輸出。

下面我們根據(jù)入門學(xué)習(xí)的不同階段，來解讀它們分別需要掌握哪些知識(shí)和技能。

這里面我將入門拆成了6個(gè)階段，每個(gè)階段都是不可或缺的，它們即是上一步的延續(xù)也是對(duì)下一步的準(zhǔn)備。而有了這個(gè)大致的學(xué)習(xí)順序和內(nèi)容以后，下面我們就分別進(jìn)行簡單的說明。

階段1：初步接觸階段

1. 階段定義：初步接觸階段就是作為完全外行零基礎(chǔ)要開始學(xué)習(xí)B端設(shè)計(jì)的階段。
2. 階段目標(biāo)：在這個(gè)階段的主要目標(biāo)是建立對(duì)B端產(chǎn)品的整體認(rèn)識(shí)，以及了解B端設(shè)計(jì)的主要內(nèi)容和樣式。
3. 時(shí)長建議：控制在1-2周內(nèi)即可

知識(shí)掌握

這個(gè)階段優(yōu)先要掌握的知識(shí)就是B端概念的定義以及和C端的區(qū)別，這個(gè)網(wǎng)上信息很多而且介紹得很詳細(xì)，查查就明白了。但光了解概念還不夠，須要更具體的理解B端常見產(chǎn)品類型和應(yīng)用場景，比如CRM、OA、ERP等產(chǎn)品有什么功能，分別應(yīng)用在哪些場景中，能實(shí)現(xiàn)什么樣的效果。

這需要我們查閱大量的掃盲和科普文章，確保我們能建立對(duì)B端產(chǎn)品究竟是什么、有什么用的清晰概念。除此之外，還需要盡可能去查找可以注冊(cè)和使用的相關(guān)SaaS類產(chǎn)品，通過自己的試用來更直觀的感受B端產(chǎn)品的作用和界面表現(xiàn)。

這是 B 端初學(xué)最重要的一步，只要花幾天的時(shí)間就能建立起大概的認(rèn)識(shí)。而很多新手在連設(shè)計(jì)的對(duì)象是什么、用起來是什么樣都不知道的情況下就在學(xué)習(xí)設(shè)計(jì)理論或軟件是非常大的誤區(qū)。

除了了解 B 端的產(chǎn)品外，還有個(gè)對(duì)B端設(shè)計(jì)來說非常重要的內(nèi)容，就是B端的前端開源框架，比如 AntDesign、ArcoDesing、TDesign 等，它們是由第三方團(tuán)隊(duì)開發(fā)出來讓其它企業(yè)可以快速套用的前端源代碼，包含了豐富的組件樣式和交互效果。

這些前端開源框架對(duì)B端的設(shè)計(jì)和前端開發(fā)都產(chǎn)生了深遠(yuǎn)的影響，是我們絕對(duì)不能忽視的東西，可以自己查找它們更具體的使用介紹和價(jià)值解析。同時(shí)它們?cè)诠倬W(wǎng)都提供了非常豐富的設(shè)計(jì)解釋文檔和組件說明，可以幫助我們快速完成對(duì)B端界面內(nèi)容的掃盲，是最好的才入門掃盲讀物，仔細(xì)看完一套框架的設(shè)計(jì)說明文檔是有絕對(duì)必要的。

可以查看下方的鏈接：

1. AntDesign設(shè)計(jì)規(guī)范說明：https://ant.design/docs/spec/colors-cn
2. AntDesign組件使用說明：https://ant.design/components/overview-cn/

技能掌握

除了知識(shí)的學(xué)習(xí)外，初期要掌握的技能就只有 Figma 了，而學(xué)習(xí) Figma 絕對(duì)不是建議大家在這個(gè)階段奔著“精通”去的，因?yàn)榇蠖噙M(jìn)階功能缺乏使用價(jià)值，在這個(gè)階段也完全沒有用武之地。

所以建議你們先快速過一遍教程，了解一遍 Figma 的大致功能模塊和操作技巧，然后跟著實(shí)操案例完成幾個(gè)基本頁面設(shè)計(jì)的操作即可。要提前強(qiáng)調(diào)，進(jìn)階功能對(duì)輸出界面幾乎沒有任何影響，而 Figma 的掌握程度對(duì)你能不能把界面做好也基本沒有關(guān)系。

階段2：上手實(shí)操階段

1. 階段定義：不再是學(xué)習(xí)軟件，而是針對(duì)B端界面進(jìn)行具體的實(shí)操訓(xùn)練
2. 階段目標(biāo)：掌握B端界面設(shè)計(jì)的基本規(guī)范和要求，起碼能通過臨摹做出正確的界面設(shè)計(jì)
3. 時(shí)長建議：大概需要2周時(shí)間

知識(shí)掌握

這個(gè)階段要掌握的知識(shí)就是更具體的B端設(shè)計(jì)知識(shí)了，尤其是設(shè)計(jì)規(guī)范相關(guān)的信息，比如應(yīng)該使用什么字體，按鈕、輸入框、圓角的大小等，以及網(wǎng)頁設(shè)計(jì)如何使用柵格等知識(shí)。

雖然前面看的前端框架說明已經(jīng)包含了不少相關(guān)內(nèi)容，但那個(gè)階段的目標(biāo)主要是了解前端框架本身是什么，同時(shí)它們也有自己的局限性，需要我們跳出到整個(gè)網(wǎng)頁設(shè)計(jì)的層面來重新理解設(shè)計(jì)要求和底層規(guī)范，這些內(nèi)容要靠自己去搜索相關(guān)說明進(jìn)行掃盲。

除了網(wǎng)頁規(guī)范外，還要了解一個(gè)概念就是項(xiàng)目規(guī)范。項(xiàng)目規(guī)范和網(wǎng)頁規(guī)范、框架規(guī)范不同，是每個(gè)獨(dú)立設(shè)計(jì)項(xiàng)目要?jiǎng)?chuàng)建出來的專用規(guī)范。而你們要做的事情就是在這個(gè)階段去理解它是什么，會(huì)要?jiǎng)?chuàng)建哪些內(nèi)容，能明確區(qū)分這些現(xiàn)在看起來眼花繚亂的規(guī)范都是什么，而不用動(dòng)手去實(shí)操。

技能訓(xùn)練

這個(gè)階段技能的訓(xùn)練就要開始有針對(duì)性地放在對(duì)具體設(shè)計(jì)內(nèi)容的訓(xùn)練，而不是“軟件操作”上了。最重要也最基礎(chǔ)的兩個(gè)設(shè)計(jì)訓(xùn)練對(duì)象，就是界面和圖標(biāo)。

B端常見的基礎(chǔ)界面類型其實(shí)不多，就登錄、表盤、表格、列表、詳情、表單等，而訓(xùn)練的方式就是針對(duì)每個(gè)頁面類型找到專業(yè)的案例結(jié)合前面了解的規(guī)范進(jìn)行臨摹，一方面要快速掌握它們的設(shè)計(jì)模式和思路，另一方面要深刻記憶規(guī)范的知識(shí)并將它們內(nèi)化。

除了界面外，還有另一個(gè)一定要訓(xùn)練的方向就是圖標(biāo)的設(shè)計(jì)。和C端不同的是，B端更傾向使用簡潔的線性或面性圖標(biāo)，不需要添加夸張復(fù)雜的視覺效果。雖然視覺復(fù)雜度的要求不高，但不代表這種簡單的圖標(biāo)就好畫。

圖標(biāo)的學(xué)習(xí)就像學(xué)寫字的過程，需要在掌握初步的繪制技巧后進(jìn)行大量的訓(xùn)練，就像英文字母這么簡單的文字，想要寫好也要我們做出不少努力。所以這里建議至少要臨摹10組以上的線性或面性圖標(biāo)，才能達(dá)到入門的水平。

階段3：上手實(shí)操階段

1. 階段定義：開始進(jìn)階輸出完整的B端項(xiàng)目界面
2. 階段目標(biāo)：脫離孤立的界面訓(xùn)練，轉(zhuǎn)向理解和嘗試更復(fù)雜的整體設(shè)計(jì)
3. 時(shí)長建議：大概需要1-2個(gè)月時(shí)間

知識(shí)掌握

項(xiàng)目設(shè)計(jì)就是難度遠(yuǎn)遠(yuǎn)比單一界面臨摹和設(shè)計(jì)更復(fù)雜的實(shí)踐了，而要完成這種就需要了解更多項(xiàng)目相關(guān)的知識(shí)，它們就不再只是單純的設(shè)計(jì)知識(shí)，而是會(huì)涉及不同領(lǐng)域的復(fù)合型知識(shí)。其中最重要的兩個(gè)方向，就是項(xiàng)目設(shè)計(jì)的流程和體驗(yàn)設(shè)計(jì)的流程。

這兩個(gè)流程聽起來會(huì)非常接近，但實(shí)際上差異巨大。項(xiàng)目設(shè)計(jì)流程的知識(shí)是完成一個(gè)項(xiàng)目的基本設(shè)計(jì)過程，我們會(huì)在這里面了解設(shè)計(jì)師的任務(wù)是怎么來的，以及完成工作的順序，和后續(xù)交付設(shè)計(jì)的不同階段之間的關(guān)聯(lián)。簡單來說就是了解真實(shí)項(xiàng)目中真實(shí)項(xiàng)目中B端設(shè)計(jì)師的工作方式。

而體驗(yàn)設(shè)計(jì)流程，則是基于體驗(yàn)為目標(biāo)來分析項(xiàng)目再完成項(xiàng)目的過程，這里我們主要要理解的就是體驗(yàn)設(shè)計(jì)包含了哪些工作步驟，如數(shù)據(jù)分析、用戶研究、可用測試等等，同樣是為了建立一個(gè)大的認(rèn)知框架，而不是直接開始實(shí)踐。

先有了這些認(rèn)識(shí)才會(huì)盡可能促進(jìn)我們?cè)谇捌诘捻?xiàng)目設(shè)計(jì)練習(xí)中進(jìn)行更深入的思考，理解“項(xiàng)目分析”到底是什么，為什么光輸出界面不夠。

技能訓(xùn)練

這個(gè)階段主要的實(shí)踐訓(xùn)練就是輸出完整的項(xiàng)目了，即選擇一個(gè)項(xiàng)目主題，然后完成它主要頁面和相關(guān)流程的設(shè)計(jì)。

這里首先會(huì)有一個(gè)應(yīng)該設(shè)計(jì)什么項(xiàng)目的疑問，B端不像C端可以隨便構(gòu)思一套項(xiàng)目完成設(shè)計(jì)，所以我建議可以先挑選一套線上操作過且熟悉的項(xiàng)目，對(duì)它進(jìn)行重構(gòu)。

完成這個(gè)訓(xùn)練會(huì)發(fā)現(xiàn)的問題有非常多，對(duì)前面界面設(shè)計(jì)掌握程度的檢查，以及對(duì)項(xiàng)目視覺風(fēng)格、一致性的嘗試等。可以把這個(gè)階段的訓(xùn)練當(dāng)成一個(gè)能力的自查過程，所以你發(fā)現(xiàn)的問題都可以成為后續(xù)要補(bǔ)充、復(fù)習(xí)的地方去進(jìn)一步學(xué)習(xí)。

項(xiàng)目的輸出練習(xí)可以持續(xù)比較長的時(shí)間，而這個(gè)階段也可以以產(chǎn)出作品集為目標(biāo)來選擇并輸出項(xiàng)目作品。

階段4：細(xì)化深入階段

1. 階段定義：開始進(jìn)入項(xiàng)目設(shè)計(jì)更細(xì)致的交互和流程的設(shè)計(jì)過程
2. 階段目標(biāo)：開始熟悉B端設(shè)計(jì)中最重要也最注重細(xì)節(jié)的交互設(shè)計(jì)內(nèi)容
3. 時(shí)長建議：大概需要1個(gè)月時(shí)間

知識(shí)掌握

這個(gè)階段要掌握的知識(shí)就是體驗(yàn)和交互有關(guān)理論性知識(shí)，可以看一些推薦的書籍掃盲。

其中最重要的一點(diǎn)是，交互和體驗(yàn)的書面知識(shí)大多就只是知識(shí)，很難真正轉(zhuǎn)化成實(shí)踐方法和指導(dǎo)。我們了解這些知識(shí)的目的僅僅是對(duì)這兩個(gè)專業(yè)領(lǐng)域有更深一點(diǎn)的理解，但真實(shí)的實(shí)踐就完全是一回事。

所以在這個(gè)階段中，了解理論知識(shí)就沒有前面幾個(gè)步驟權(quán)重那么高，更是作為一種輔助性的步驟，不需要過多占用實(shí)踐練習(xí)的時(shí)間。

技能訓(xùn)練

交互設(shè)計(jì)是非常注重實(shí)踐的技能，所以最好的交互提升方法就是動(dòng)手去做。所以在了解完交互的定義和輸出標(biāo)準(zhǔn)以后，就要直接開展相應(yīng)的練習(xí)。

而主要的練習(xí)對(duì)象分為兩個(gè)階段，第一個(gè)階段依舊是臨摹，從你使用過的產(chǎn)品中截取一個(gè)簡單的操作流程，把這個(gè)操作流程用原型圖完整復(fù)現(xiàn)一遍，并寫上相應(yīng)的交互邏輯。第二個(gè)階段，還是選出一個(gè)操作流程，然后理解它的目標(biāo)邏輯以后自己做一個(gè)新的版本出來。

這是交互設(shè)計(jì)中最有用、最可靠、最簡單的方式，甚至可以說是真實(shí)項(xiàng)目外唯一的訓(xùn)練方式。只要愿意投入時(shí)間進(jìn)來，肯定就能在一個(gè)月內(nèi)快速入門交互而不是看一大堆書和視頻依舊不知道怎么動(dòng)手。

階段5：收尾方式學(xué)習(xí)

1. 階段定義：集中在學(xué)習(xí)如何交付已經(jīng)完成的項(xiàng)目設(shè)計(jì)方案
2. 階段目標(biāo)：理解并入門項(xiàng)目設(shè)計(jì)中 UI 要交付的內(nèi)容和標(biāo)準(zhǔn)
3. 時(shí)長建議：大概需要1周時(shí)間

知識(shí)掌握

想要理解項(xiàng)目的交付，我強(qiáng)烈建議一定要學(xué)習(xí) Html+CSS 這兩個(gè)前端語言并自己動(dòng)手做一些自己設(shè)計(jì)的頁面。這兩個(gè)前端語言只最基本的標(biāo)記語言和腳本，并不是編程，學(xué)起來非常簡單。而我們學(xué)習(xí)它們的原因就是要親身感受界面是怎么被開發(fā)出來的，這對(duì)標(biāo)注和交付的認(rèn)識(shí)會(huì)產(chǎn)生巨大的影響。

同時(shí)，我們的本職工作并不是做前端，所以即使這兩個(gè)語言的應(yīng)用并不復(fù)雜，我們也無需太深入去學(xué)習(xí)，只要花一定的時(shí)間學(xué)習(xí)和嘗試，搞明白它們的作用和邏輯即可。

然后就是對(duì)項(xiàng)目中標(biāo)注切圖的工作認(rèn)識(shí)了，到這里就只能看不同的科普文章，以及結(jié)合對(duì)前端入門的實(shí)踐來理解標(biāo)注和交付的具體內(nèi)容了。

技能訓(xùn)練

標(biāo)注和切圖要學(xué)的技能就不多了，主要的應(yīng)用只有兩個(gè)方面，要不然直接使用  Figma 結(jié)合開發(fā)模式完成標(biāo)注切圖的交付，或者使用藍(lán)湖這種第三方工具來實(shí)現(xiàn)。而第三方標(biāo)注切圖工具大同小異，只要用過藍(lán)湖其它的也能無縫上手。

其中，切圖并不是必須得使用外部工具才能完成，有了前端的基本操作經(jīng)驗(yàn)，就應(yīng)該知道前端要的切圖應(yīng)該是什么樣的，要有自己獨(dú)立完成成套項(xiàng)目切圖導(dǎo)出的能力。

階段6：輸出總結(jié)階段

1. 階段定義：是對(duì)非工作實(shí)戰(zhàn)的設(shè)計(jì)師作品集和項(xiàng)目展示方式進(jìn)行學(xué)習(xí)
2. 階段目標(biāo)：能輸出目前市場需要的作品集和對(duì)應(yīng)質(zhì)量
3. 時(shí)長建議：需要1-2月

知識(shí)掌握

最后這個(gè)階段，就是了解作品集輸出的相關(guān)知識(shí)了。很多人以為作品集只要有個(gè)方向直接開始做就行了，但這么做出來的結(jié)果大概率慘不忍睹。建議使用至少半個(gè)月（從前面就可以開始）去網(wǎng)上查找優(yōu)秀的作品集案例，以及關(guān)注招聘網(wǎng)站中的職業(yè) JD要求，以及咨詢?cè)诼毜脑O(shè)計(jì)師喜歡什么樣的作品集。

然后再去分析項(xiàng)目應(yīng)該怎么展示合適，大廠那些復(fù)盤和展示文章是怎么寫的，去分析它們的編寫結(jié)構(gòu)和邏輯。這可以非常好的幫助我們建立項(xiàng)目包裝的概念，并且為你提供必要的作品說明編寫靈感。

如果沒形成自己的認(rèn)識(shí)，只靠簡單照抄或者套模板的話，那是沒辦法在今天的招聘市場中脫穎而出的。

技能掌握

作品集輸出除了前面作品本身設(shè)計(jì)以外，還包含兩個(gè)技能類型：

1. 說明文案編寫
2. 平面圖文排版

這兩個(gè)能力都是需要先鍛煉實(shí)踐，再正式去輸出作品集的，而不是簡單了解個(gè)大概就以為自己能直接上手就做了。

說明為難編寫的掌握，不需要等到做作品集的時(shí)候才用的上，你可以創(chuàng)建任意空文檔，直接在里面編寫你對(duì)自己項(xiàng)目設(shè)計(jì)的說明或復(fù)盤。當(dāng)然，這些內(nèi)容可以是圖文結(jié)合的，而前面參考大廠的文章作用就會(huì)在這里體現(xiàn)出來，只要稍加練習(xí)很快就能找到訣竅。

另一部分就是平面圖文的排版技能，也可以理解成是一種設(shè)計(jì)PPT的能力。這種能力只靠看和案例積累是遠(yuǎn)遠(yuǎn)不夠的，必須有目的性的進(jìn)行訓(xùn)練。可以多去找平面排版設(shè)計(jì)的教學(xué)和跟練案例，進(jìn)行基礎(chǔ)的排版訓(xùn)練（很好玩的）。

平面排版練習(xí)會(huì)消耗的時(shí)間其實(shí)不會(huì)太多，因?yàn)榕虐婢毩?xí)不需要做樣式和填色，比做原型還容易。我們可以通過一兩周的專項(xiàng)練習(xí)快速提升這種能力，而提升排版這種最基礎(chǔ)的能力，除了作用在作品集外，還會(huì)對(duì)我們進(jìn)行的任何其它設(shè)計(jì)都起到極大的幫助。

所以可以理解成借輸出作品集的機(jī)會(huì)，來學(xué)習(xí)從一開始就該掌握的設(shè)計(jì)基礎(chǔ)技能。有了這些積累以后，再正式展開作品集的設(shè)計(jì)，那么最終輸出的結(jié)果也會(huì)大大優(yōu)于原先，甚至還能比原來的做法更快做完。

完成這些內(nèi)容的學(xué)習(xí)并且最終輸出完整且“合格”的作品集以后，就達(dá)到了真正入門的水平。

結(jié)尾

職業(yè)技能的入門是有門檻的要再次重申一下，不是隨便看兩個(gè)視頻和練習(xí)就結(jié)束了，遵照上面的路線開展其實(shí)需要的時(shí)間也不會(huì)太長，幾個(gè)月的時(shí)間就夠了。所以你們可以自己決定是要展開幾個(gè)月有質(zhì)量系統(tǒng)的推進(jìn)還是幾個(gè)月無所事事漫無目的地亂學(xué)~

當(dāng)然，還有很多很細(xì)小的問題沒辦法全部列舉，就要大家自己學(xué)習(xí)的時(shí)候去發(fā)現(xiàn)了。

我們下篇再賤~

作者：超人的電話亭