騰訊企點(diǎn)官方網(wǎng)站的設(shè)計(jì)詳解

很多人覺(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/

每天更新,
全站高品質(zhì)素材免費(fèi)下載!