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

造成了越來越多的 C 端 UI 設(shè)計(jì)師想要來淌 B 端體驗(yàn)交互設(shè)計(jì)這趟渾水，出現(xiàn)了很多設(shè)計(jì)師在觀望，想要入局？但又不知道，應(yīng)該如何學(xué)習(xí)？這里推薦五個快速學(xué)習(xí)的方法，能夠讓你理解 B 端設(shè)計(jì)入門知識。

閱讀書籍

雖然讀書在很多時候會被嘲笑為效率低、內(nèi)容過時。再加上 B 端設(shè)計(jì)，放眼望去國內(nèi)真正值得閱讀的書籍其實(shí)并不多。其原因主要是在國內(nèi)，界面設(shè)計(jì)的傳播，很大程度上是源自移動互聯(lián)網(wǎng)的普及，也就造成了我們對于桌面端的設(shè)計(jì)理解非常欠缺。這時候不妨把視野放大，去看看國外的設(shè)計(jì)書籍。這里推薦幾本較為經(jīng)典的書籍，能夠幫助大家快速入局。

《決勝 B 端》

雖然這本書主要是為產(chǎn)品經(jīng)理寫的一本書，但是里面的很多內(nèi)容也同樣適用于 B 端設(shè)計(jì)師。誰叫 B 端設(shè)計(jì)師就是半個產(chǎn)品經(jīng)理呢？建議大家可以去閱讀這本書的前五章，書中講清楚了關(guān)于 B 端與 C 端的差異，同時你可以站在設(shè)計(jì)的角度，去思考他們之間存在的差異

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

雖然這本書的 “年事” 已高，但是也不妨礙它里面的內(nèi)容值得大家去閱讀。正因?yàn)閲鴥?nèi)桌面交互設(shè)計(jì)書籍的欠缺。也就導(dǎo)致了我們只能夠多去看一些國外書籍。當(dāng)然里面的案例是非常久遠(yuǎn)的，需要小伙伴們根據(jù)書中內(nèi)容，結(jié)合自身產(chǎn)品去思考對比。

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

表單是 B 端產(chǎn)品當(dāng)中非常重要的一個環(huán)節(jié)。如果做過比較系統(tǒng)的小伙伴就會知道。一個系統(tǒng)當(dāng)中如果不包含任何的數(shù)據(jù)，他就如同人們只有外面的軀殼。而沒有靈魂。

大家可以想一想，你再去試用一個低端產(chǎn)品的時候，你根本不知道這款產(chǎn)品的用途究竟是什么。因此在低端系統(tǒng)當(dāng)中，表單的設(shè)計(jì)非常重要。如果你設(shè)計(jì)好了表單，也就意味著你的系統(tǒng)已經(jīng)非常成熟。因此他可以認(rèn)真的閱讀這本書。去了解表單背后設(shè)計(jì)的邏輯。他不光是簡單的信息排列組合。里面會涉及到不同字段的真正的用途。

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

組件用法

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

因?yàn)閺脑釉O(shè)計(jì)的理論來看，B 端產(chǎn)品就是由原子、分子、組織、模板、頁面所組成，而組件作為我們設(shè)計(jì)當(dāng)中的基礎(chǔ)單位，等于說我們了解了組件的使用，就知道 B 端設(shè)計(jì)的基礎(chǔ)原理。

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

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

并且在每一個設(shè)計(jì)系統(tǒng)里面都有對應(yīng)的設(shè)計(jì)資源的分享、設(shè)計(jì)組件的解析、以及設(shè)計(jì)原則的確定，能夠讓你了解到在之后的工作當(dāng)中，我們究竟需要去做哪些設(shè)計(jì)相關(guān)的事情。

當(dāng)然，很多人在了解設(shè)計(jì)系統(tǒng)時，其實(shí)是較為茫然的，你可以通過這樣兩種方法，去對設(shè)計(jì)系統(tǒng)進(jìn)行簡單分析：

對比法：在閱讀不同設(shè)計(jì)系統(tǒng)之間的設(shè)計(jì)組件規(guī)范時，通常你會感到非常的迷茫，比如在設(shè)計(jì)原則上，很多小伙伴不清楚多個設(shè)計(jì)系統(tǒng)之間的差異，當(dāng)你對某一類型的規(guī)范產(chǎn)生疑惑時，這時候可以打開各大設(shè)計(jì)系統(tǒng)，去對比他們之間存在的差異，這樣你的理解會更加的深刻。

思考法：思考為什么他們之間會存在差異，是服務(wù)對象不同？還是產(chǎn)品規(guī)模差異？對于他們的差異，一定要知其所以然。不然簡單的對比只是一個笑話。

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

組件落地

當(dāng)你了解完組件過后，你對整體的設(shè)計(jì)就有了初步認(rèn)識，但真實(shí)的工作當(dāng)中，你會發(fā)現(xiàn)組件只是設(shè)計(jì)當(dāng)中一小部分，除了組件之外，我們還需要去理解整個組件在頁面當(dāng)中存在的意義，這樣你才能夠?qū)M件有一個全方位的認(rèn)知。

建議大家可以將每一個組件進(jìn)行截圖，然后在真實(shí)落地的產(chǎn)品當(dāng)中，去尋找一到兩個案例。試著通過頁面的分析，讓你理解到在這個產(chǎn)品當(dāng)中，組件究竟存在于哪些頁面當(dāng)中，它為什么要這樣設(shè)計(jì)？如果讓你去設(shè)計(jì)會有其他的設(shè)計(jì)結(jié)果嗎？

通過組件的頁面分析，能夠讓你快速理解在真實(shí)的工作當(dāng)中，這個組件究竟是如何使用，你可以考慮一下如果是你，你會怎么去做。

頁面臨摹

頁面臨摹，一定是設(shè)計(jì)師再熟悉不過的一種方法。通過臨摹，你能夠確定閱讀的具體寬度與內(nèi)容，讓你對整個產(chǎn)品的頁面布局有初步的認(rèn)知。就像移動端設(shè)計(jì)一樣，我們 B 端產(chǎn)品的頁面布局也會存在一些固定的設(shè)計(jì)模式，通常情況下 B 端產(chǎn)品不要去標(biāo)新立異，所以了解頁面的設(shè)計(jì)模式就顯得尤為重要。

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

關(guān)于兩款產(chǎn)品的截圖，已經(jīng)為大家提供了截圖版本，感興趣的小伙伴可以附件下載 “測試產(chǎn)品截圖” 。

前后臺推導(dǎo)

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

分享一個案例：

大家對站酷這個網(wǎng)站應(yīng)該非常熟悉吧？假設(shè)現(xiàn)在讓你去設(shè)計(jì)站酷的后臺文章管理系統(tǒng)，如果是你，你會怎么做？

在對課程的授課當(dāng)中，其實(shí)就會發(fā)現(xiàn)，很多人能夠合理的運(yùn)用各種各樣的組件，但是在組件的選擇當(dāng)中，往往缺乏前后臺關(guān)聯(lián)的思路。因?yàn)閷τ谝粋€ B 端產(chǎn)品來說，系統(tǒng)當(dāng)中每一個字段信息都會有在系統(tǒng)當(dāng)中存在的意義。而我們 B 端設(shè)計(jì)，真正目的不在于將幾個信息聯(lián)合、分組。

如果你不明白這些信息出現(xiàn)的前后關(guān)系，對于系統(tǒng)而言，是不具備任何價值的。由此我們可以通過前臺頁面，嘗試著分析后臺產(chǎn)品的具體內(nèi)容，這樣能夠幫助你進(jìn)行很多聯(lián)動的思考，讓你的設(shè)計(jì)不會在評審時受到多方面的質(zhì)疑。

最后說說

雖然目前網(wǎng)絡(luò)上信息非常的多，但是很多剛?cè)胄械耐瑢W(xué)切忌好高騖遠(yuǎn)，先要了解基礎(chǔ)的設(shè)計(jì)模式才好為后續(xù)的設(shè)計(jì)鋪路，關(guān)于基礎(chǔ)的 B 端設(shè)計(jì)，后面還會給大家?guī)硪幌盗械姆窒恚蚕Ｍ』锇閭兡軌蚶煤糜邢薜馁Y源去更好的學(xué)習(xí)。

我是 CE 青年，一個 2B 行業(yè) 的 2 B 設(shè)計(jì)師

歡迎關(guān)注作者的微信公眾號：CE青年交互設(shè)計(jì)