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

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


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


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



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


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



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


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


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



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


Zendesk以Logo形狀作為主體

透過人物與其互動加深Logo在閱覽者中的印象


Slack則是利用周邊的元素製造了一個代表性的場景


騰訊企點是怎么做結(jié)合的呢?



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


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


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


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


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



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


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

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



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


2. 圖片界面的抽象化 


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


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


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


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


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

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


"把復(fù)雜的概念簡單表述  做有價值的設(shè)計"


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


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

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


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



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


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


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


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





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


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



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


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


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


解決方案頁面



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


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


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


行業(yè)流程的展示




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

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


配圖的行業(yè)性 


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



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


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


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



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



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

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


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



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


基礎(chǔ)元素的運用


基礎(chǔ)元素的運用能夠強化閱覽者對于品牌的認(rèn)知,聚焦重點信息同時提升頁面的趣味性,提升瀏覽意愿。


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


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


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


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


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


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

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


設(shè)計不僅只是美化工程,還是能夠幫助透傳品牌核心概念的管道,在設(shè)計時我們必須要結(jié)合機能性,考慮每個元素除了進行展示之外還能達成什么樣的目標(biāo),才能最大化發(fā)揮設(shè)計的價值。






文章來自騰訊企點設(shè)計中心

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

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