寫(xiě)在前面

 

B端產(chǎn)品和C端產(chǎn)品作為兩種很不一樣的產(chǎn)品形態(tài)一直服務(wù)著廣大的用戶。它們各有各的作用，有很多B端產(chǎn)品還是一個(gè)非常龐大的系統(tǒng)工程，甚至有很多的公司就是專注于開(kāi)發(fā)B端產(chǎn)品，我從業(yè)以來(lái)曾經(jīng)參與過(guò)很多的（兩位數(shù)）B端產(chǎn)品項(xiàng)目，有的是從0到1的開(kāi)發(fā)，也有的是在原基礎(chǔ)上更新優(yōu)化，下面就從我個(gè)人的設(shè)計(jì)經(jīng)驗(yàn)整理出一些觀點(diǎn)。

 

什么是B端和C端產(chǎn)品

概念：B端面向商家和公司，組織；C端面向普通的大眾用戶； 

B端是指：business--泛指生意，商業(yè)，公司和組織； To B即是面向商家和公司，組織，是給專職專業(yè)的用戶使用的產(chǎn)品，例如微信公眾平臺(tái)給制定的公眾號(hào)持有人使用，某公司的指揮調(diào)度系統(tǒng)，某停車管理系統(tǒng)，以及相關(guān)的后臺(tái)管理系統(tǒng)等。C端是指：consumer--消費(fèi)者，顧客，用戶，是指被設(shè)計(jì)為能給普通大眾使用的產(chǎn)品；To C即是面向普通的老百姓用戶，例如微博，QQ，微信，新聞客戶端，淘寶等；

  

幾乎男女老少都會(huì)使用的微信

面向?qū)Ｂ殟徫蝗藛T使用的后臺(tái)管理系統(tǒng)

兩者的不同點(diǎn)

C端產(chǎn)品追求極致的體驗(yàn)，；B端產(chǎn)品追求簡(jiǎn)約、高效的完成工作 

C端產(chǎn)品是為了滿足用戶某一主要的、固定 的核心需求，因此設(shè)計(jì)的目標(biāo)是圍繞著這個(gè)核心需求，簡(jiǎn)單直接解決用戶的需求，追求的是極致的用戶體驗(yàn)，因?yàn)閷?duì)C端產(chǎn)品而言，產(chǎn)品不好用，體驗(yàn)不好，用戶就流失了，也就沒(méi)有盈利的可能了。

B端產(chǎn)品的目標(biāo)是幫助用戶把大量的復(fù)雜的工作，整理歸納，使得他們能高效便捷的完成工作，追求的是產(chǎn)品的簡(jiǎn)約實(shí)用，提高效率，能很好的處理工作，有時(shí)候?yàn)榱诉_(dá)成業(yè)務(wù)目標(biāo)，甚至不惜犧牲部分用戶體驗(yàn)。

To B端界面的設(shè)計(jì)應(yīng)該要重點(diǎn)注意什么

很多新手設(shè)計(jì)師在接到新的需求的時(shí)候會(huì)沒(méi)有頭緒，不知道如何開(kāi)展工作，在不了解業(yè)務(wù)的前提下很多時(shí)候被產(chǎn)品牽著鼻子走。那么問(wèn)題來(lái)了，是拿到產(chǎn)品給過(guò)來(lái)的原型之后就開(kāi)始設(shè)計(jì)了嗎？又或者沒(méi)有原型只有一些簡(jiǎn)單的描述，又該如何開(kāi)展呢。以下是我的幾個(gè)建議

1，要了解業(yè)務(wù)

因?yàn)锽類產(chǎn)品不同于C類產(chǎn)品，并不是大多數(shù)人日常都會(huì)很普及用到的，所以就需要設(shè)計(jì)師主動(dòng)的去了解行業(yè)，了解業(yè)務(wù)需求，不同的行業(yè)有不同流程和規(guī)則，甚至是一些特殊的需求；啟動(dòng)用戶群體調(diào)研和用戶使用場(chǎng)景調(diào)研，有條件的可以開(kāi)展用戶問(wèn)卷調(diào)研甚至面對(duì)面訪談，整理出用戶的使用流程，調(diào)研后要求設(shè)計(jì)師自己能非常清楚這個(gè)產(chǎn)品的作用、用戶人群、和在特定的使用場(chǎng)景下的使用目標(biāo)、和不同情境下的操作流程等。

 

2，交互流程設(shè)計(jì)

B端產(chǎn)品往往包含了比較復(fù)雜的業(yè)務(wù)，那在復(fù)雜的業(yè)務(wù)背景下如何通過(guò)設(shè)計(jì)來(lái)提高用戶的工作效率，這就對(duì)設(shè)計(jì)師有比較高的要求。在交互流程上要整理出一些操作路徑，要考慮它們的層級(jí)關(guān)系，先后順序，行業(yè)習(xí)慣等。通過(guò)操作體驗(yàn)給用戶留下明確的印象，可以降低用戶的學(xué)習(xí)成本，提高產(chǎn)品的易用性。

 

To B端界面的視覺(jué)設(shè)計(jì)

①、界面布局，分固定的和自適應(yīng)的分辨率兩種，一般來(lái)說(shuō)自適應(yīng)的布局比較適合操作和展示內(nèi)容比較多的系統(tǒng)，固定的寬度的分辨率的布局一般多用1200px以適應(yīng)適配更多低分辨率的顯示器，現(xiàn)在的大屏幕設(shè)備非常普及了，很多系統(tǒng)轉(zhuǎn)為以1400px的寬度來(lái)設(shè)計(jì)，至于用哪一種的布局要取決于產(chǎn)品的功能了。

界面布局視覺(jué)上的區(qū)分；當(dāng)我們?cè)O(shè)計(jì)一個(gè)系統(tǒng)的主頁(yè)到時(shí)候，B端產(chǎn)品通常會(huì)分為很多功能模塊，即便產(chǎn)品經(jīng)理會(huì)提供原型給UI設(shè)計(jì)師，他們有時(shí)候往往會(huì)在原型按照他們的想法來(lái)布局，這時(shí)候設(shè)計(jì)師需要主動(dòng)地去了解業(yè)務(wù)去弄清楚各個(gè)模塊的主次之分。通過(guò)調(diào)研后，整理歸類任務(wù)模塊，按照業(yè)務(wù)流程和規(guī)則來(lái)區(qū)分模塊優(yōu)先級(jí)。（圖例）

②、顏色，B端系統(tǒng)的界面顏色也非?？季?，按照系統(tǒng)的功能特性來(lái)定，一般常規(guī)的系統(tǒng)界面都是以白色底色配以一種主色調(diào)的顏色來(lái)搭配的；第二深色的底色界面，深色界面能起到一種很好的襯托界面內(nèi)容（如大量文字，數(shù)據(jù)，圖形，視頻等）的作用，深色界面再附以一些點(diǎn)線面和光的元素就能營(yíng)造出一種炫酷的科技感。三是現(xiàn)在流行漸變色，漸變色和純色會(huì)給人一種繽紛，輕松愉悅，有活力的年輕的感覺(jué)，所以大家在設(shè)計(jì)不同的B端系統(tǒng)界面的時(shí)候要考慮產(chǎn)品的功能性質(zhì)來(lái)選擇用顏色。

③、導(dǎo)航，導(dǎo)航可以解決用戶在訪問(wèn)頁(yè)面時(shí)：在哪里，去哪里，怎樣去的問(wèn)題。一般導(dǎo)航會(huì)有「?jìng)?cè)欄導(dǎo)航」和「頂部導(dǎo)航」2 種類型。一：側(cè)欄導(dǎo)航：可將導(dǎo)航欄固定在左側(cè)，提高導(dǎo)航可見(jiàn)性，方便頁(yè)面之間切換；頂部可放置常用工具，如搜索條、幫助按鈕、通知按鈕等。適用于復(fù)雜的、功能多的中后臺(tái)的管理型、工具型網(wǎng)站。二：頂部導(dǎo)航，順應(yīng)了從上至下的正常瀏覽順序，方便瀏覽信息；頂部寬度限制了導(dǎo)航的數(shù)量和文本長(zhǎng)度

④、按鈕，通常B端產(chǎn)品分為較多的功能模塊，也對(duì)應(yīng)有很多不同的按鈕，在設(shè)計(jì)按鈕的時(shí)候，我們第一要分清楚哪些按鈕對(duì)應(yīng)哪些功能，在設(shè)計(jì)上要做出區(qū)分。

⑤、表格，表格的設(shè)計(jì)遵循簡(jiǎn)潔和易讀性為主，表里面的文字內(nèi)容是主要的設(shè)計(jì)重點(diǎn)，例如信息層次的明確、對(duì)齊的原則等。

⑥、彈窗，不僅有操作反饋的作用，同時(shí)又是一個(gè)承載更多的操作功能的容器，彈窗的設(shè)計(jì)要有規(guī)范性，組件化。

視覺(jué)設(shè)計(jì)方面除了常規(guī)的設(shè)計(jì)流程，我想說(shuō)的是綜合考慮和相關(guān)的系統(tǒng)銜接，體驗(yàn)的一致，視覺(jué)風(fēng)格的統(tǒng)一和品牌的建設(shè)。

 

設(shè)計(jì)師還能做些什么

雖然設(shè)計(jì)師和產(chǎn)品經(jīng)理以及開(kāi)發(fā)已經(jīng)溝通過(guò)相關(guān)的業(yè)務(wù)需求，但設(shè)計(jì)師一定要懂得切換角度來(lái)看待問(wèn)題，一方面設(shè)計(jì)師的視角相對(duì)注重視覺(jué)上和交互上的設(shè)計(jì)細(xì)節(jié)；第二我們也要懂得站在開(kāi)發(fā)和產(chǎn)品的角度考慮，哪些效果能不能實(shí)現(xiàn)，也是需要我們和開(kāi)發(fā)同事密切配合的；另一方面要更加注重代入用戶的角度來(lái)思考，這樣才能做出合理適用的設(shè)計(jì)，甚至能挖掘新的需求，提出一些很好的建議，給產(chǎn)品和項(xiàng)目帶來(lái)加分和利好。

總結(jié)

因?yàn)锽端產(chǎn)品業(yè)務(wù)需求，用戶目標(biāo)，使用場(chǎng)景和用戶群體都不相同，所以設(shè)計(jì)師接到B端產(chǎn)品的設(shè)計(jì)需求時(shí)一定要先了解清楚業(yè)務(wù)，做好前期調(diào)研，其次要多站在用戶的角度來(lái)看待和設(shè)計(jì)產(chǎn)品。其實(shí)C端和B端產(chǎn)品，它們都要求要簡(jiǎn)單實(shí)用和有效準(zhǔn)確，都是為了更好的滿足用戶的需求，解決用戶的痛點(diǎn)。做好了以上這些關(guān)鍵點(diǎn)，無(wú)論遇到多么復(fù)雜的B端產(chǎn)品，我相信所有問(wèn)題都會(huì)迎刃而解。