編輯導(dǎo)語(yǔ)：自疫情以來(lái)，B端這一領(lǐng)域就備受行業(yè)關(guān)注。很多C端UI設(shè)計(jì)師想要來(lái)學(xué)習(xí)B端體驗(yàn)交互設(shè)計(jì)，本篇文章作者分享了B端設(shè)計(jì)新手應(yīng)該如何入局，其中涉及推薦書籍、組件用法、組件落地、頁(yè)面臨摹、前后臺(tái)推導(dǎo)等內(nèi)容，希望對(duì)你有幫助。

最近互聯(lián)網(wǎng)行業(yè)迎來(lái)很多波動(dòng)，企業(yè)在裁員的同時(shí)，也帶來(lái)設(shè)計(jì)趨勢(shì)的變化。

造成了越來(lái)越多C端UI設(shè)計(jì)師想要來(lái)淌B端體驗(yàn)交互設(shè)計(jì)這趟渾水，出現(xiàn)了很多設(shè)計(jì)師在觀望，想要入局？

但又不知道，應(yīng)該如何學(xué)習(xí)？這里推薦五個(gè)快速學(xué)習(xí)的方法，能夠讓你理解B端設(shè)計(jì)入門知識(shí)。

一、閱讀書籍

雖然讀書在很多時(shí)候會(huì)被嘲笑為效率低、內(nèi)容過(guò)時(shí)。

再加上B端設(shè)計(jì)，放眼望去國(guó)內(nèi)真正值得閱讀的書籍其實(shí)并不多。

其原因主要是在國(guó)內(nèi)，界面設(shè)計(jì)的傳播，很大程度上是源自移動(dòng)互聯(lián)網(wǎng)的普及，也就造成了我們對(duì)于桌面端的設(shè)計(jì)理解非常欠缺。

這時(shí)候不妨把視野放大，去看看國(guó)外的設(shè)計(jì)書籍。

這里推薦幾本較為經(jīng)典的書籍，能夠幫助大家快速入局。

1. 《決勝B端》

雖然這本書主要是為產(chǎn)品經(jīng)理寫的一本書，但是里面的很多內(nèi)容也同樣適用于B端設(shè)計(jì)師。

誰(shuí)叫B端設(shè)計(jì)師就是半個(gè)產(chǎn)品經(jīng)理呢？

建議大家可以去閱讀這本書的前五章，書中講清楚了關(guān)于B端與C端的差異。

同時(shí)你可以站在設(shè)計(jì)的角度，去思考他們之間存在的差異。

2. 《WEB界面設(shè)計(jì)》

雖然這本書的 “年事” 已高，但是也不妨礙它里面的內(nèi)容值得大家去閱讀。

正因?yàn)閲?guó)內(nèi)桌面交互設(shè)計(jì)書籍的欠缺。

也就導(dǎo)致了我們只能夠多去看一些國(guó)外書籍。

當(dāng)然里面的案例是非常久遠(yuǎn)的，需要小伙伴們根據(jù)書中內(nèi)容，結(jié)合自身產(chǎn)品去思考對(duì)比。

3. 《WEB表單設(shè)計(jì)》

表單是B端產(chǎn)品當(dāng)中非常重要的一個(gè)環(huán)節(jié)。

因?yàn)楸韱螘?huì)為整個(gè)系統(tǒng)的信息錄入，到整個(gè)系統(tǒng)當(dāng)中的一個(gè)重要環(huán)節(jié)。

如果做過(guò)比較系統(tǒng)的統(tǒng)的小伙伴就會(huì)知道。

一個(gè)系統(tǒng)當(dāng)中如果不包含任何的數(shù)據(jù)，他就如同人們只有外面的軀殼。

而沒(méi)有靈魂。大家可以想一想，你再去試用一個(gè)低端產(chǎn)品的時(shí)候，你根本不知道這款產(chǎn)品的用途究竟是什么。

因此在低端系統(tǒng)當(dāng)中，表單的設(shè)計(jì)非常重要。

如果你設(shè)計(jì)好了表單，也就意味著你的系統(tǒng)已經(jīng)非常成熟。

因此他可以認(rèn)真地閱讀這本書。

去了解表單背后設(shè)計(jì)的邏輯。他不光是簡(jiǎn)單的信息排列組合。

里面會(huì)涉及到不同字段的真正的用途。

上面這些書籍就不做過(guò)多的介紹，都是一些經(jīng)典好書，看名字就知道它究竟是用來(lái)做什么的。

二、組件用法

在你閱讀上面的基礎(chǔ)書籍過(guò)后，便可以深入了解B端產(chǎn)品的組件設(shè)計(jì)。

因?yàn)閺脑釉O(shè)計(jì)的理論來(lái)看，B端產(chǎn)品就是由原子、分子、組織、模板、頁(yè)面所組成。

而組件作為我們?cè)O(shè)計(jì)當(dāng)中的基礎(chǔ)單位，等于說(shuō)我們了解了組件的使用，就知道B端設(shè)計(jì)的基礎(chǔ)原理。

在組件的設(shè)計(jì)過(guò)程當(dāng)中，我們可以通過(guò)目前較為成熟的設(shè)計(jì)系統(tǒng)去窺探一二，這也是建議很多零基礎(chǔ)的小伙伴需要去認(rèn)真閱讀的內(nèi)容。

這里建議初學(xué)者可以多看國(guó)內(nèi)較為出名的三款設(shè)計(jì)系統(tǒng)：Ant Design 、Element、Arco Design。

并且在每一個(gè)設(shè)計(jì)系統(tǒng)里面都有對(duì)應(yīng)的設(shè)計(jì)資源的分享、設(shè)計(jì)組件的解析、以及設(shè)計(jì)原則的確定。

能夠讓你了解到在之后的工作當(dāng)中，我們究竟需要去做哪些設(shè)計(jì)相關(guān)的事情。

當(dāng)然，很多人在了解設(shè)計(jì)系統(tǒng)時(shí)，其實(shí)是較為茫然的。

你可以通過(guò)這樣兩種方法，去對(duì)設(shè)計(jì)系統(tǒng)進(jìn)行簡(jiǎn)單分析：

1. 對(duì)比法：在閱讀不同設(shè)計(jì)系統(tǒng)之間的設(shè)計(jì)組件規(guī)范時(shí)，通常你會(huì)感到非常的迷茫，比如 在設(shè)計(jì)原則上，很多小伙伴不清楚多個(gè)設(shè)計(jì)系統(tǒng)之間的差異，當(dāng)你對(duì)某一類型的規(guī)范產(chǎn)生疑惑時(shí)，這時(shí)候可以打開(kāi) 各大設(shè)計(jì)系統(tǒng)，去對(duì)比他們之間存在的差異，這樣你的理解會(huì)更加的深刻。
2. 思考法：思考為什么他們之間會(huì)存在差異，是服務(wù)對(duì)象不同？還是產(chǎn)品規(guī)模差異？對(duì)于他們的差異，一定要知其所以然。不然簡(jiǎn)單的對(duì)比只是一個(gè)笑話。

當(dāng)然并不是了解了組件，就會(huì)知道應(yīng)該如何設(shè)計(jì)，還記得我們剛才說(shuō)的原子設(shè)計(jì)？我們還需要了解具體組件，如何在頁(yè)面當(dāng)中進(jìn)行使用。

三、組件落地

當(dāng)你了解完組件過(guò)后，你對(duì)整體的設(shè)計(jì)就有了初步認(rèn)識(shí)。

但真實(shí)的工作當(dāng)中，你會(huì)發(fā)現(xiàn)組件只是設(shè)計(jì)當(dāng)中一小部分，除了組件之外，我們還需要去理解整個(gè)組件在頁(yè)面當(dāng)中存在的意義。

這樣你才能夠?qū)M件有一個(gè)全方位的認(rèn)知。

建議大家可以將每一個(gè)組件進(jìn)行截圖，然后在真實(shí)落地的產(chǎn)品當(dāng)中，去尋找一到兩個(gè)案例。

試著通過(guò)頁(yè)面的分析，讓你理解到在這個(gè)產(chǎn)品當(dāng)中，組件究竟存在于哪些頁(yè)面當(dāng)中，它為什么要這樣設(shè)計(jì)？

如果讓你去設(shè)計(jì)會(huì)有其他的設(shè)計(jì)結(jié)果嗎？

通過(guò)組件的頁(yè)面分析，能夠讓你快速理解在真實(shí)的工作當(dāng)中。

這個(gè)組件究竟是如何使用，你可以考慮一下如果是你，你會(huì)怎么去做。

四、頁(yè)面臨摹

頁(yè)面臨摹，一定是設(shè)計(jì)師再熟悉不過(guò)的一種方法。

通過(guò)臨摹，你能夠確定閱讀的具體寬度與內(nèi)容，讓你對(duì)整個(gè)產(chǎn)品的頁(yè)面布局有了初步的認(rèn)知。

就像移動(dòng)端設(shè)計(jì)一樣，我們B端產(chǎn)品的頁(yè)面布局也會(huì)存在一些固定的設(shè)計(jì)模式。

通常情況下B端產(chǎn)品不要去標(biāo)新立異，所以了解頁(yè)面的設(shè)計(jì)模式就顯得尤為重要。

關(guān)于臨摹哪些產(chǎn)品的頁(yè)面，我這里也會(huì)有一定的建議，可以嘗試“Coding、飛蛾”兩款研發(fā)管理的工具產(chǎn)品。

五、前后臺(tái)推導(dǎo)

其實(shí)在我看來(lái)，很多C端轉(zhuǎn)型B端的設(shè)計(jì)師，缺乏的是對(duì)于B端產(chǎn)品的理解。

比如分享一個(gè)我的B端課程當(dāng)中的案例：大家對(duì)站酷這個(gè)網(wǎng)站應(yīng)該非常熟悉吧？

假設(shè)現(xiàn)在讓你去設(shè)計(jì)站酷的后臺(tái)文章管理系統(tǒng)，如果是你，你會(huì)怎么做？

在對(duì)課程的授課當(dāng)中，其實(shí)就會(huì)發(fā)現(xiàn)，很多人能夠合理的運(yùn)用各種各樣的組件。

但是在組件的選擇當(dāng)中，往往缺乏 前后臺(tái)關(guān)聯(lián)的思路。

因?yàn)閷?duì)于一個(gè)B端產(chǎn)品來(lái)說(shuō)，系統(tǒng)當(dāng)中每一個(gè)字段信息都會(huì)有在系統(tǒng)當(dāng)中存在的意義。

而我們B端設(shè)計(jì)，真正目的不在與將幾個(gè)信息聯(lián)合、分組。

如果你不明白這些信息出現(xiàn)的前后關(guān)系，對(duì)于系統(tǒng)而言，是不具備任何價(jià)值的。

由此我們可以通過(guò)前臺(tái)頁(yè)面，嘗試著分析后臺(tái)產(chǎn)品的具體內(nèi)容，這樣能夠幫助你進(jìn)行很多聯(lián)動(dòng)的思考，讓你的設(shè)計(jì)不會(huì)在評(píng)審時(shí)受到多方面的質(zhì)疑。

雖然目前網(wǎng)絡(luò)上信息非常的多，但是很多剛?cè)胄械耐瑢W(xué)切忌好高騖遠(yuǎn)。

先要了解基礎(chǔ)的設(shè)計(jì)模式才好為后續(xù)的設(shè)計(jì)鋪路，關(guān)于基礎(chǔ)的B端設(shè)計(jì)。

后面還會(huì)給大家?guī)?lái)一系列的分享，也希望小伙伴們能夠利用好有限的資源去更好的學(xué)習(xí)。

#專欄作家#

CE青年，微信公眾號(hào)：CE青年，人人都是產(chǎn)品經(jīng)理專欄作家。專注B端設(shè)計(jì)領(lǐng)域，一個(gè)2B行業(yè)的2B設(shè)計(jì)師。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議。