很多人覺(jué)得toB產(chǎn)品跟toC產(chǎn)品在設(shè)計(jì)上有本質(zhì)上的差異，但其實(shí)不然，設(shè)計(jì)是一門通學(xué)，基本設(shè)計(jì)法則都是通用的。但是在設(shè)計(jì)時(shí)的確有需要特別考量的部分，而這相異之處在于著重點(diǎn)不同。品牌設(shè)計(jì)本質(zhì)是作為用戶對(duì)產(chǎn)品產(chǎn)生認(rèn)知的初步渠道，用戶從建立認(rèn)知，產(chǎn)生購(gòu)買到產(chǎn)生忠誠(chéng)是一條漫長(zhǎng)的過(guò)程，而運(yùn)營(yíng)設(shè)計(jì)即在此刻產(chǎn)生價(jià)值。結(jié)合場(chǎng)景，透過(guò)不同觸點(diǎn)及物料幫助用戶逐步構(gòu)建用戶對(duì)產(chǎn)品的認(rèn)知，或是推動(dòng)進(jìn)行下一步行為。

既然目標(biāo)是相同的，那差異之處在哪呢？ 差異在于服務(wù)的對(duì)象不同。

傳統(tǒng)上toC產(chǎn)品的品牌設(shè)計(jì)面向的是使用者，購(gòu)買決策更著重于產(chǎn)品的核心體驗(yàn)及功能是否能滿足需求。這時(shí)我們會(huì)更著重于透過(guò)多元的手法去吸引用戶，調(diào)用情感產(chǎn)生共鳴。toB產(chǎn)品的品牌設(shè)計(jì)面對(duì)的更多是決策者，作為偏向理性的購(gòu)買群體，更關(guān)注的是品牌的權(quán)威性以及能夠產(chǎn)生的價(jià)值。這時(shí)我們更著重于透過(guò)概念化的手法引導(dǎo)用戶產(chǎn)生信賴感。

隨著展示的對(duì)象不同，品牌設(shè)計(jì)的策略產(chǎn)生了差異。

那么在這次官網(wǎng)的需求當(dāng)中，設(shè)計(jì)如何起到幫助呢？結(jié)合對(duì)于展示對(duì)象的理解，可以從兩個(gè)方向著手，視覺(jué)-獨(dú)特的視覺(jué)語(yǔ)言提升識(shí)別度，以及排版-清晰的信息關(guān)系提升理解效率。

騰訊企點(diǎn)是一款社交化CRM套件，包含企點(diǎn)客服，企點(diǎn)營(yíng)銷，企點(diǎn)協(xié)同等多款子產(chǎn)品集，助力企業(yè)市場(chǎng)、銷售、客服部門在客戶全生命周期升級(jí)體驗(yàn)，并提升企業(yè)從獲客、待客到留客復(fù)購(gòu)的效能。

品牌核心關(guān)鍵詞與應(yīng)用

企點(diǎn)定義了三個(gè)想透過(guò)設(shè)計(jì)語(yǔ)言傳達(dá)的關(guān)鍵字-輕快，高效，親和。透過(guò)banner的欄位，有別于大多數(shù)競(jìng)品使用位圖作為背景，我們決定以各產(chǎn)品子Logo作為主體展示，結(jié)合關(guān)鍵字做出差異化并強(qiáng)化瀏覽者對(duì)于產(chǎn)品的印象。這里以企點(diǎn)客服產(chǎn)品作為示例，基礎(chǔ)圖形為象徵對(duì)話的氣泡。

Banner作為進(jìn)入產(chǎn)品介紹頁(yè)的第一屏，需要明確三件事情：依據(jù)直觀的標(biāo)題，引導(dǎo)轉(zhuǎn)化的CTA，以及渲染氛圍的圖像。依照制定的設(shè)計(jì)方針嘗試先發(fā)散的不同風(fēng)格，后期收斂幾個(gè)較合適的方向發(fā)展。參閱大量參考之后發(fā)現(xiàn)位圖除了常規(guī)的處理之外，還可以試試看讓人物與物件搭配，例如可以利用物件製造空間感，或是利用物件與人物組合製造場(chǎng)景。

Zendesk以Logo形狀作為主體

透過(guò)人物與其互動(dòng)加深Logo在閱覽者中的印象

Slack則是利用周邊的元素製造了一個(gè)代表性的場(chǎng)景

騰訊企點(diǎn)是怎么做結(jié)合的呢？

相較于傳統(tǒng)的體現(xiàn)智能時(shí)會(huì)用的高光及厚重科技感，我們更傾向于凸顯我們產(chǎn)品是建立toB和toC的關(guān)系，其實(shí)是更好服務(wù)toC，為了幫助產(chǎn)品建立起親和優(yōu)質(zhì)的服務(wù)形象。最終的方案我們使用親和，輕快的風(fēng)格，對(duì)標(biāo)使用我們產(chǎn)品的體驗(yàn)愉悅高效的情緒，并利用子產(chǎn)品的圖標(biāo)與用戶的人物形象構(gòu)建虛擬的工作場(chǎng)景，增強(qiáng)用戶的帶入感并深化品牌形象。

"判斷不同區(qū)塊的投入比 做有亮點(diǎn)的設(shè)計(jì)"

一個(gè)官網(wǎng)會(huì)有非常多的頁(yè)面，但是每個(gè)頁(yè)面的訪問(wèn)量及重要程度并不均等，面對(duì)有限的時(shí)間與資源，我們應(yīng)該考慮如何把我們的設(shè)計(jì)投入效益最大化，最好的方式是找到用戶訪問(wèn)官網(wǎng)頁(yè)面的核心路徑，將每個(gè)頁(yè)面量化出資源與時(shí)間投入的分配比，針對(duì)重點(diǎn)頁(yè)面進(jìn)行更深入的設(shè)計(jì)探索，并減少將時(shí)間投入在簡(jiǎn)單或是訪問(wèn)量少的頁(yè)面。當(dāng)然對(duì)有亮點(diǎn)的設(shè)計(jì)會(huì)起到影響的不只在于重點(diǎn)頁(yè)面的分配上，在設(shè)計(jì)流程上也要設(shè)定好不同階段的時(shí)間占比，避免探索不足就投入設(shè)計(jì)執(zhí)行，導(dǎo)致做到后期發(fā)現(xiàn)還有更好的方案已經(jīng)來(lái)不及，或是探索太久壓縮到實(shí)際設(shè)計(jì)的時(shí)間，導(dǎo)致設(shè)計(jì)成果不如預(yù)期，還有與開(kāi)發(fā)的溝對(duì)以及走查等時(shí)間也要合理預(yù)留好時(shí)間。

頁(yè)面分析與構(gòu)成

以下將以產(chǎn)品頁(yè)面及行業(yè)解決方案頁(yè)面為各位闡述設(shè)計(jì)思路。

當(dāng)閱覽者愿意從導(dǎo)航進(jìn)入產(chǎn)品頁(yè)，表示他對(duì)于這個(gè)產(chǎn)品有興趣但還不了解，因而從建立初步認(rèn)識(shí)，建立認(rèn)知到形成決策的行為，是一個(gè)推動(dòng)的過(guò)程。我們對(duì)于產(chǎn)品頁(yè)的核心目標(biāo)是潛在用戶轉(zhuǎn)化，因此首要的便是在建立認(rèn)知的過(guò)程中逐步遞增購(gòu)買興趣，引導(dǎo)閱覽者申請(qǐng)?bào)w驗(yàn)。

1. 層遞式的插圖具象程度

目標(biāo)在于簡(jiǎn)化插圖的同時(shí)不丟失每張插圖想傳達(dá)的主概念信息。依照頁(yè)面的深度搭配不同信息密度的插圖，配合用戶的意向程度將想傳達(dá)的概念步進(jìn)式的抽象化與巨象化，幫助用戶循序漸進(jìn)的理解產(chǎn)品的核心能力及使用體驗(yàn)。

首頁(yè)作為第一層入口，利用抽象化的插圖廣泛的闡述產(chǎn)品能力及優(yōu)勢(shì)。產(chǎn)品頁(yè) 利用輕界面展示最每個(gè)功能最關(guān)鍵的步驟，在產(chǎn)品頁(yè)表達(dá)更深層的產(chǎn)品認(rèn)知。詳情頁(yè) 如果閱覽者想要了解更多細(xì)節(jié)，可以點(diǎn)擊詳細(xì)功能頁(yè)觀看具體界面。

2. 圖片界面的抽象化 

展示界面主要的目的在于闡述產(chǎn)產(chǎn)品能力及效果，并非具體操作指南，因此設(shè)計(jì)時(shí)需要對(duì)內(nèi)容進(jìn)行提煉，因?yàn)殚営[者對(duì)于產(chǎn)品并不熟悉，所以展示實(shí)際的界面并不能幫助他更快速的理解。經(jīng)過(guò)優(yōu)化的界面只展示必要的內(nèi)容，利用最少的版面讓人理解想表達(dá)的信息，具體可以五個(gè)方向下手-簡(jiǎn)潔，精煉，差異，從優(yōu)，共鳴。

簡(jiǎn)潔 界面在展示的時(shí)候必須去除任何不相關(guān)的元素，讓閱覽者重點(diǎn)關(guān)注核心信息。

精煉 提煉出能夠表意的最小顆粒度，盡量用更少的版面完成信息的表達(dá)。

差異 利用反例或常例凸顯正向結(jié)果。

從優(yōu) 正常范圍內(nèi)選擇更好的結(jié)果進(jìn)行展示。

共鳴 內(nèi)容需要符合行業(yè)的使用情境，讓閱覽者自然產(chǎn)生帶入感。

"把復(fù)雜的概念簡(jiǎn)單表述  做有價(jià)值的設(shè)計(jì)"

降低用戶理解門檻，助力擴(kuò)大潛在用戶基數(shù)是視覺(jué)設(shè)計(jì)為toB產(chǎn)品服務(wù)時(shí)能產(chǎn)生的最大效益，也是設(shè)計(jì)助力商業(yè)的體現(xiàn)。眾所周知，toB產(chǎn)品本質(zhì)上是商業(yè)工具，本身會(huì)有復(fù)雜的商業(yè)背景及產(chǎn)品功能矩陣，面對(duì)這些復(fù)雜的概念，我們可以思考如何讓設(shè)計(jì)不僅只是展示，還能幫助復(fù)雜的信息用更簡(jiǎn)單有效率的方式進(jìn)行展示，讓每個(gè)設(shè)計(jì)承載更多價(jià)值。

3.文案與圖標(biāo)的組合 

產(chǎn)品頁(yè)的信息非常密集，為了滿足信息的暴露與閱讀效率的平衡，以及避免視線來(lái)回移動(dòng)導(dǎo)致的反復(fù)，我們?cè)谠O(shè)計(jì)時(shí)也做了多種嘗試，以下展示其中兩種，最終選擇了二種，盡量減少版面上的模塊數(shù)量及視覺(jué)動(dòng)線的反復(fù)，提升閱讀效率。

嘗試一 將圖標(biāo)獨(dú)立出來(lái)并排列放置于每個(gè)段落的底部，引導(dǎo)用戶先快速的了解每個(gè)段落會(huì)介紹到的功能，有興趣再詳細(xì)閱讀。

嘗試二 將圖標(biāo)與對(duì)應(yīng)的文案排布在一起，簡(jiǎn)化群組關(guān)系。

4.色彩設(shè)定與比例

試著在心中構(gòu)建一個(gè)無(wú)色彩的世界，然而我們身處在一個(gè)信息滿載的社會(huì)當(dāng)中，如果缺少了色彩的標(biāo)示那會(huì)是何等的無(wú)聊與失序。色彩無(wú)形的輔助著圖形或文字表述語(yǔ)意，強(qiáng)化信息停留在我們腦中的深度，這是色彩對(duì)于我們產(chǎn)生的記憶效應(yīng)。每個(gè)色彩在社會(huì)發(fā)展的過(guò)程中逐漸有了約定俗成的寓意，這些自帶的寓意潛移默化的影響著我們對(duì)于該信息的直觀判斷。

這回歸到我們想對(duì)外呈現(xiàn)哪種品牌氣質(zhì)呢？

色彩語(yǔ)意 企點(diǎn)藍(lán)在藍(lán)色里加了一點(diǎn)紫色，藍(lán)色表意權(quán)威與安全，紫色在古代是稀有色表意高端，我們希望能透?jìng)鞒鰠^(qū)別于競(jìng)品且值得信賴的品牌形象。利用企點(diǎn)藍(lán)作為主色提升品牌認(rèn)知，定義三個(gè)子產(chǎn)品的專色以及全色彩的規(guī)范給與引導(dǎo)，同時(shí)在頁(yè)面使用時(shí)整體利用大面積白色提供清新專業(yè)的視覺(jué)體驗(yàn)。

需要注意的是現(xiàn)在非常流行明度及飽和度高的色彩，但是過(guò)于大面積的使用會(huì)降低其他信息的辨識(shí)度，尤其是低價(jià)的筆記本色偏嚴(yán)重，綠色會(huì)很容易變成螢光色異常刺眼，應(yīng)該謹(jǐn)慎運(yùn)用，可以看到競(jìng)品對(duì)于色彩比例的應(yīng)用是以白色為主，大面積背景會(huì)用淡色呈現(xiàn)，只在少部分重點(diǎn)區(qū)域使用高亮的色彩。

串連信息 同時(shí)色彩的運(yùn)用不只在于品牌傳達(dá)，同時(shí)具有引導(dǎo)性。例如在首頁(yè)的介紹版面以及頂部導(dǎo)航就以子產(chǎn)品的三種顏色明確區(qū)分，用戶可以依照自己感興趣的子產(chǎn)品了解，所有配圖內(nèi)的元素也都會(huì)優(yōu)先考慮帶入子產(chǎn)品的顏色，潛移默化的幫助用戶對(duì)信息進(jìn)行歸納。

"分析用戶畫(huà)像及瀏覽習(xí)慣 做懂用戶的設(shè)計(jì)"

一個(gè)高分辨率與色彩準(zhǔn)確的屏幕可能是每個(gè)設(shè)計(jì)師的標(biāo)配，但是這卻可能離使用者很遠(yuǎn)。經(jīng)過(guò)實(shí)際走訪用戶的經(jīng)驗(yàn)，以及官網(wǎng)的訪問(wèn)數(shù)據(jù)可以得知，低分辨率的屏幕以及老舊的瀏覽器版本還是占了大多數(shù)的比例。如果我們只用最理想的情況設(shè)計(jì)的話，用戶會(huì)接觸到的可能是頁(yè)面破碎并加載緩慢的瀏覽體驗(yàn)。如果我們時(shí)刻將用戶的使用場(chǎng)景銘記在心的話，我們便會(huì)有意識(shí)的避免使用對(duì)比太低的色彩搭配，并對(duì)于展示的技術(shù)與開(kāi)發(fā)討論進(jìn)行適配。時(shí)刻記得誰(shuí)在看，看什么，怎么看永遠(yuǎn)都是綁定在一起的設(shè)計(jì)思考。

解決方案頁(yè)面

產(chǎn)品頁(yè)是在闡述產(chǎn)品能力，因?yàn)槲覀兊漠a(chǎn)品足夠強(qiáng)大，所以你可以信任我們。而解決方案頁(yè)更多的是在闡述我們對(duì)于其行業(yè)的了解，因?yàn)槲覀儗?duì)你足夠的了解，所以我們知道可以如何幫助你。因此在開(kāi)始會(huì)先展始該行業(yè)的傳統(tǒng)流程與優(yōu)化后流程的對(duì)比，再闡述其中使用哪些企點(diǎn)的功能，中間用實(shí)際的客戶引言及數(shù)據(jù)提升信賴感，最后同樣引導(dǎo)閱覽者申請(qǐng)?bào)w驗(yàn)。

"注重設(shè)計(jì)與功能性的平衡 做能持續(xù)的設(shè)計(jì)"

原本在初期只有兩三個(gè)的行業(yè)案例，過(guò)了一陣子會(huì)快速的變成二三十個(gè)，面對(duì)持續(xù)迭代演化的內(nèi)容，除了在設(shè)計(jì)上追求亮點(diǎn)之外，設(shè)計(jì)時(shí)也應(yīng)將模版化納入考慮，哪些信息是可被規(guī)范化的，哪些框架需要預(yù)留改動(dòng)的能力，以便作為未來(lái)大量同類形需求的框架可以快速?gòu)?fù)用，不只簡(jiǎn)化設(shè)計(jì)量也利于開(kāi)發(fā)對(duì)接。 

行業(yè)流程的展示

行業(yè)解決方案中有一個(gè)對(duì)比環(huán)節(jié)，著重于體現(xiàn)產(chǎn)品能夠帶給使用者在整個(gè)工作流程中的價(jià)值。

對(duì)比有兩種思路，第一種是凸顯結(jié)果，第二種是凸顯過(guò)程。凸顯結(jié)果系指凸顯產(chǎn)品帶來(lái)的價(jià)值并直觀的將量化的利益數(shù)值透?jìng)?。凸顯過(guò)程系指凸顯在過(guò)程鏈中產(chǎn)品如何幫助減少環(huán)節(jié)或是在哪個(gè)環(huán)節(jié)起到作用。如果本身流程較短，可以展示優(yōu)化后帶來(lái)的結(jié)果，如果具體優(yōu)化是在流程中，可以展示優(yōu)化前后的流程改變。

配圖的行業(yè)性 

行業(yè)解決方案頁(yè)面的重點(diǎn)在于告訴客戶我們對(duì)于他們的行業(yè)狀態(tài)有強(qiáng)烈的認(rèn)知，以傳遞出我們知道可以如何幫助他提升在工作流程中的效率的信息。

但該如何表述這種專業(yè)感并讓行業(yè)的人有帶入感？可以從場(chǎng)景著手，依照每個(gè)行業(yè)打造符合該行業(yè)習(xí)性的插圖，包含對(duì)話的信息，職稱標(biāo)簽等細(xì)節(jié)，讓閱覽者自然對(duì)內(nèi)容產(chǎn)生帶入感，并產(chǎn)生想要近一步暸解的意愿。需要注意在符合行業(yè)的內(nèi)容的同時(shí)也要維持簡(jiǎn)潔，否則閱覽者需要消化許多內(nèi)容才能理解，像是消息對(duì)話的情境，應(yīng)該利用足夠少則的氣泡就表達(dá)意境。

位圖風(fēng)格設(shè)定

位圖的質(zhì)量會(huì)很大程度影響閱覽者對(duì)于你的產(chǎn)品的觀感與信任度，而好的位圖質(zhì)量建立在色溫，元素的排布，負(fù)空間，拍攝角度等多個(gè)維度，其中可以特別關(guān)注以下四個(gè)方向。

步光及環(huán)境 注意光線對(duì)于臉部線條的影響，尤其是臉部特寫的構(gòu)圖，演講類的現(xiàn)場(chǎng)剪輯，如果沒(méi)以找好抓拍的角度很容易讓人物的臉部黯淡無(wú)光。如果有棚拍的條件的話，可以參考早前的文章，有詳細(xì)的介紹如何拍出高質(zhì)量的照片。環(huán)境要考慮背景是否有會(huì)造成干擾的元素，盡量利用同色系的物件，簡(jiǎn)潔的背景或淡色系的處理突出主體。

將光線處理的很好，讓人對(duì)這些人物產(chǎn)生自然的信賴感。

人物表情 嘗試捕捉自然的表情，避免擺拍導(dǎo)致的笑容太大及僵硬的問(wèn)題。

使用的位圖人物的表情都是較為克制且自然。

人物穿搭 人物上我們希望呈現(xiàn)專業(yè)但不會(huì)過(guò)于嚴(yán)肅，現(xiàn)代的輕商務(wù)風(fēng)格，從電視劇及平面雜志中找尋靈感并逐步探索出符合的人物風(fēng)格。傳統(tǒng)上會(huì)搭配正式西裝來(lái)呈現(xiàn)專業(yè)的形象，但是考慮到我們產(chǎn)品的受眾更加年輕，以及整體的想透?jìng)鞯囊彩歉佑H和及靈動(dòng)的品牌概念，基于帶入感的考慮，我們最終選擇以稍微年輕一點(diǎn)的穿搭定位整體風(fēng)格。

基礎(chǔ)元素的運(yùn)用

基礎(chǔ)元素的運(yùn)用能夠強(qiáng)化閱覽者對(duì)于品牌的認(rèn)知，聚焦重點(diǎn)信息同時(shí)提升頁(yè)面的趣味性，提升瀏覽意愿。

利用圓弧的分割展現(xiàn)親和力。

Slack利用Pattern作為點(diǎn)綴豐富內(nèi)容。

Mailchimp利用不規(guī)則的撕角統(tǒng)一位圖風(fēng)格。

Evernote利用Pattern突出重點(diǎn)區(qū)域。

落實(shí)于官網(wǎng)的設(shè)計(jì)，從企點(diǎn)的Logo可以拆解出斜線的元素，斜線呈現(xiàn)出的突破以及提升的概念也特別符合企點(diǎn)的氣質(zhì)，所以我們?cè)谠S多頁(yè)面使用了斜線分割欄位強(qiáng)化品牌感。

"有意識(shí)的建立品牌規(guī)范 做一致性的設(shè)計(jì)"

界定設(shè)計(jì)的統(tǒng)一性與差異性規(guī)范，統(tǒng)一性系指所有品牌元素需帶有基礎(chǔ)共性及概念，差異性系指需界定不同素材的風(fēng)格邊界。因?yàn)槊鎸?duì)的用戶不同，使用的設(shè)計(jì)策略會(huì)有所不同，例如對(duì)于品牌的透?jìng)鳎袷蔷€下展會(huì)等場(chǎng)景，面對(duì)的是決策者，風(fēng)格上會(huì)更理性，簡(jiǎn)潔。對(duì)于功能的宣導(dǎo)，像是公眾號(hào)的新功能介紹或是介面的空狀態(tài)等場(chǎng)景，面對(duì)的是使用者，風(fēng)格上會(huì)更感性，熱情。如果每個(gè)差異化的場(chǎng)景沒(méi)有做好品牌規(guī)范的把控，對(duì)外會(huì)呈現(xiàn)一個(gè)失序的表述態(tài)度，降低信賴感。

設(shè)計(jì)不僅只是美化工程，還是能夠幫助透?jìng)髌放坪诵母拍畹墓艿?，在設(shè)計(jì)時(shí)我們必須要結(jié)合機(jī)能性，考慮每個(gè)元素除了進(jìn)行展示之外還能達(dá)成什么樣的目標(biāo)，才能最大化發(fā)揮設(shè)計(jì)的價(jià)值。

文章來(lái)自騰訊企點(diǎn)設(shè)計(jì)中心

https://tencentqidian.zcool.com.cn/