聚合類(lèi)工具產(chǎn)品的視覺(jué)設(shè)計(jì)，不僅需要思考如何提升使用效率，幫助產(chǎn)品保持體驗(yàn)的穩(wěn)定，也需要思考如何讓用戶更加信任產(chǎn)品。文章以騰訊內(nèi)部 IT 工具產(chǎn)品改版為例，通過(guò)建立視覺(jué)標(biāo)準(zhǔn)化，規(guī)范產(chǎn)品展示框架，提升產(chǎn)品品牌認(rèn)知等設(shè)計(jì)方法，幫助產(chǎn)品達(dá)到穩(wěn)定高效的目的，并提升用戶對(duì)產(chǎn)品的認(rèn)同感。

更多騰訊改版案例：

一、 聚合型工具型產(chǎn)品的定義

1. 工具型產(chǎn)品的分類(lèi)：

簡(jiǎn)單來(lái)講，我們可以這樣定義一款工具型產(chǎn)品：在某一個(gè)具體的場(chǎng)景下，為解決某一個(gè)明確需求而誕生的工具。按照產(chǎn)品形態(tài)，工具型產(chǎn)品還可以分為垂直型工具和聚合型工具產(chǎn)品：垂直型工具，指的是解決單一問(wèn)題的工具型產(chǎn)品，目的是滿足某類(lèi)用戶的特定問(wèn)題。聚合型工具，指的是將多個(gè)垂直工具聚合在一起的平臺(tái)產(chǎn)品，目的是滿足不同用戶群體的不同用戶需求。

2. 工具型產(chǎn)品的區(qū)別：

1. 產(chǎn)品含義區(qū)別：垂直型工具產(chǎn)品是專(zhuān)門(mén)為解決單一問(wèn)題誕生的工具，聚合型工具產(chǎn)品則是為了滿足某個(gè)領(lǐng)域的多個(gè)業(yè)務(wù)場(chǎng)景，將多種工具聚合在一起的產(chǎn)品。
2. 用戶需求區(qū)別：垂直型工具產(chǎn)品多數(shù)為滿足某類(lèi)用戶的特定需求，聚合型工具產(chǎn)品需要滿足不同群體的用戶需求。
3. 產(chǎn)品功能區(qū)別：垂直型工具產(chǎn)品常常會(huì)從業(yè)務(wù)流程出發(fā)，將任務(wù)流程的環(huán)節(jié)進(jìn)行分解，完成產(chǎn)品的自閉環(huán)，而聚合型工具產(chǎn)品除了考慮已有的業(yè)務(wù)需求，還要對(duì)公共功能進(jìn)行提取、抽象、拆分，因此平臺(tái)功能通常會(huì)按照”領(lǐng)域”進(jìn)行設(shè)計(jì)，以達(dá)到靈活、通用的目的。
4. 產(chǎn)品結(jié)構(gòu)區(qū)別：垂直型工具產(chǎn)品是典型的“煙囪型”結(jié)構(gòu)，簡(jiǎn)潔清晰；聚合型工具產(chǎn)品則多數(shù)為“梳子型”，隨著業(yè)務(wù)的復(fù)雜性增加，場(chǎng)景也會(huì)逐步增加，因此平臺(tái)在結(jié)構(gòu)規(guī)劃上需要考慮拓展性和靈活性。

二、 聚合型工具產(chǎn)品的設(shè)計(jì)評(píng)估

馬斯洛需求理論將人類(lèi)需求按程度劃分為了 5 個(gè)層次：生理需求、安全需求、愛(ài)與歸屬的需求、尊重的需求、自我實(shí)現(xiàn)的需求。合并同類(lèi)需求后，我們可以簡(jiǎn)稱為三類(lèi)需求：生理需求，安全需求和情感需求。將人的需求映射到工具的使用上，分別對(duì)應(yīng)工具的可用性、穩(wěn)定性及認(rèn)同感。

通過(guò)以上設(shè)計(jì)評(píng)估我們可以得出聚合類(lèi)工具型產(chǎn)品的設(shè)計(jì)目標(biāo)：

1. 可用性.核心價(jià)值是提升使用效率，即要讓產(chǎn)品保持清晰易用。
2. 穩(wěn)定性.聚合型工具產(chǎn)品的功能復(fù)雜，我們需要考慮不同用戶群體的不同任務(wù)需求，統(tǒng)一底層展示邏輯，保證不同應(yīng)用及功能保持體驗(yàn)的一致與穩(wěn)定。
3. 認(rèn)同感.做好功能只是第一步，當(dāng)解決完產(chǎn)品的可用性和穩(wěn)定性等問(wèn)題后，仍需思考的是如何樹(shù)立用戶對(duì)品牌的信任度，幫助產(chǎn)品建立安全可靠的服務(wù)形象，從而幫助用戶在使用產(chǎn)品的過(guò)程中變得更積極，更信任，對(duì)產(chǎn)品的容忍度更高。即提升產(chǎn)品認(rèn)同感。

因此，在進(jìn)行聚合類(lèi)工具型產(chǎn)品的視覺(jué)設(shè)計(jì)過(guò)程中，需要思考如何做到‘既要又要還要’——即要保證簡(jiǎn)單好用，又要保證產(chǎn)品整體的體驗(yàn)一致性，還要提升用戶對(duì)于品牌的感受，幫助用戶清晰認(rèn)知產(chǎn)品。

三、工具型產(chǎn)品的設(shè)計(jì)實(shí)施方法

本文將繼續(xù)以「騰訊內(nèi)部 IT 工具產(chǎn)品改版」為例，通過(guò)問(wèn)題洞察與機(jī)會(huì)點(diǎn)評(píng)估，淺析聚合類(lèi)工具型產(chǎn)品在視覺(jué)實(shí)施階段的探索與思考。該產(chǎn)品負(fù)責(zé)為騰訊員工提供日常辦公工具、網(wǎng)絡(luò)鏈接、安全防護(hù)三個(gè)方面的能力，讓員工可以安全、穩(wěn)定、高效地訪問(wèn)企業(yè)資源和數(shù)據(jù)，是騰訊員工最常使用的內(nèi)部工具之一。

1. 可用性-讓產(chǎn)品清晰易用

問(wèn)題洞察：除了內(nèi)容模塊的冗雜堆棧外，騰訊內(nèi)部 IT 工具原客戶端版本已沿用多年，存在視覺(jué)風(fēng)格圖標(biāo)風(fēng)格多樣、字體使用缺乏邏輯、品牌色使用混亂、控件不統(tǒng)一等情況，風(fēng)格雜亂的頁(yè)面呈現(xiàn)加重了用戶的認(rèn)知負(fù)擔(dān)，導(dǎo)致用戶無(wú)法快速理解和查找內(nèi)容。

解決方案：建立視覺(jué)標(biāo)準(zhǔn)化規(guī)范

在設(shè)計(jì)語(yǔ)言和原則已不能夠承載現(xiàn)有的產(chǎn)品內(nèi)容和業(yè)務(wù)特征的情況下，我們通過(guò)建立建立設(shè)計(jì)標(biāo)準(zhǔn)與規(guī)范，逐一更新產(chǎn)品的視覺(jué)語(yǔ)言，升級(jí)產(chǎn)品形態(tài)。包含色彩、字體、圖標(biāo)、布局等，統(tǒng)一設(shè)計(jì)底層邏輯，從而提升產(chǎn)品的一致性，讓頁(yè)面呈現(xiàn)清晰易用，使用更加便捷明確。

① 完善色彩體系：

隨著業(yè)務(wù)的逐漸增加，業(yè)務(wù)類(lèi)型的多元化，單一的品牌色已無(wú)法支撐現(xiàn)有應(yīng)用場(chǎng)景。我們根據(jù)企業(yè)內(nèi)部 IT 工具的主品牌色，補(bǔ)充完善色彩系統(tǒng)，延展了功能色及輔助色，讓色彩系統(tǒng)更完整，更具適用性，滿足不同使用場(chǎng)景表現(xiàn)需求。

② 探索標(biāo)識(shí)風(fēng)格

在圖標(biāo)風(fēng)格的表現(xiàn)上，我們也一直在進(jìn)行探索。To B 工具類(lèi)產(chǎn)品會(huì)存在較多專(zhuān)業(yè)性較強(qiáng)或偏業(yè)務(wù)的圖標(biāo)，所以在圖標(biāo)風(fēng)格上不僅需要保持圖標(biāo)美感，同時(shí)也要能夠清晰表達(dá)，傳遞內(nèi)容。經(jīng)過(guò)幾輪風(fēng)格探索，我們與業(yè)務(wù)一起敲定了面性漸變風(fēng)格圖標(biāo)，以明確的輪廓型+色彩分類(lèi)來(lái)傳達(dá)內(nèi)容。

通用型圖標(biāo)的風(fēng)格樣式，則是以保證內(nèi)容的清晰易識(shí)別為目標(biāo)，使用 Tdesign 標(biāo)準(zhǔn)的線性圖標(biāo)樣式，以普適、通用的標(biāo)準(zhǔn)進(jìn)行設(shè)計(jì)。

③ 規(guī)范字體、布局：

在字體和布局上，產(chǎn)品遵循了 TDesign 的規(guī)范，通過(guò)字體、字階、行高、字重、字色、幾個(gè)維度去制定文字系統(tǒng)。通過(guò)實(shí)現(xiàn)像素對(duì)齊拉開(kāi)清晰明確的層次關(guān)系、實(shí)現(xiàn)具有和諧美觀的大小對(duì)比效果，體現(xiàn)字體的規(guī)律和韻律。

2. 穩(wěn)定性-讓體驗(yàn)穩(wěn)定統(tǒng)一

問(wèn)題洞察：

① 通過(guò)對(duì)原有頁(yè)面框架進(jìn)行問(wèn)題分析，發(fā)現(xiàn)產(chǎn)品存在內(nèi)部應(yīng)用及外部接入應(yīng)用兩種應(yīng)用類(lèi)型，除了承載產(chǎn)品本身的網(wǎng)絡(luò)監(jiān)測(cè) 、安全監(jiān)控等功能外，還需要辟出模塊承載企業(yè) IT 自助服務(wù) Ask IT 的功能。隨著接入的內(nèi)容的逐步增加，現(xiàn)框架內(nèi)容堆棧嚴(yán)重，對(duì)于內(nèi)容的承載已經(jīng)趨于飽和，缺乏穩(wěn)定性。

② 除了主界面缺乏拓展性以外，目前的應(yīng)用主要通過(guò)主頁(yè)及窗口進(jìn)行承載，模塊樣式與窗口樣式多樣，存在窗口疊窗口、窗口大小樣式五花八門(mén)等問(wèn)題，展示與跳轉(zhuǎn)缺乏統(tǒng)一的邏輯規(guī)則。

解決方案：基于以上存在問(wèn)題，產(chǎn)品需要更直觀的樣式展示和抉擇引導(dǎo)，通過(guò)視覺(jué)手段歸類(lèi)模塊，簡(jiǎn)化頁(yè)面信息布局，優(yōu)化功能層級(jí)分區(qū)，解決由于頁(yè)面信息過(guò)多造成的信息對(duì)比弱，布局密集所導(dǎo)致的用戶在接受信息階段導(dǎo)致的效率消耗，從而提升產(chǎn)品的穩(wěn)定性。

優(yōu)化展示邏輯，統(tǒng)一功能模塊承載樣式

在內(nèi)容框架的統(tǒng)一上，我們通過(guò)定義不同業(yè)務(wù)的展示邏輯，去統(tǒng)一頁(yè)面展示邏輯：外部應(yīng)用統(tǒng)一由一致的窗口式框架進(jìn)行適配承載，內(nèi)部應(yīng)用在使用場(chǎng)景時(shí)劃分為'設(shè)置類(lèi)'與'配置類(lèi)'，將即時(shí)完成的設(shè)置類(lèi)內(nèi)容直接在頁(yè)面展示，不另加彈窗中斷體驗(yàn)流程。需要一段時(shí)間 loading 的配置類(lèi)應(yīng)用則由彈窗進(jìn)行承載，讓用戶在配置過(guò)程中仍舊能在產(chǎn)品中進(jìn)行其他操作。并統(tǒng)一了彈窗的基礎(chǔ)樣式及視覺(jué)展示邏輯，控制傳遞中不必要的信息消耗?；谝陨隙x，我們重塑了產(chǎn)品的所有應(yīng)用及流程模塊；

3. 認(rèn)同感-提升品牌感受，建立品牌認(rèn)知

問(wèn)題洞察：根據(jù)用戶調(diào)研結(jié)果來(lái)看，雖然騰訊內(nèi)部 IT 工具在公司內(nèi)部已有較大的用戶使用體量，但用戶對(duì)于產(chǎn)品的服務(wù)定位及品牌認(rèn)知仍舊是較為模糊的。

解決方案：相較于 To C 產(chǎn)品，內(nèi)部 IT 工具更著重在保持工具型應(yīng)用簡(jiǎn)潔 、清晰的使用體驗(yàn)，在這樣的前提下，我們更應(yīng)該注重功能性的平衡，在有限的應(yīng)用場(chǎng)景內(nèi)，幫助產(chǎn)品建立安全可靠的服務(wù)形象，體現(xiàn)產(chǎn)品安全防護(hù)的核心理念。

因此，除了內(nèi)容的優(yōu)化、視覺(jué)風(fēng)格的統(tǒng)一，在品牌層面我們也進(jìn)行了統(tǒng)籌升級(jí)，將產(chǎn)品的核心理念體現(xiàn)在各個(gè)觸點(diǎn)中，讓產(chǎn)品的體驗(yàn)更一致。即提升品牌認(rèn)知。

① 加深品牌印象，傳達(dá)業(yè)務(wù)理念：

根據(jù)諾曼的情感化三層次理論我們可以發(fā)現(xiàn)：用戶在使用產(chǎn)品時(shí)，產(chǎn)生的心理變化同樣符合這樣的規(guī)律：?jiǎn)酒?、關(guān)聯(lián)、認(rèn)同。出于本能，用戶會(huì)因感官刺激產(chǎn)生神經(jīng)反應(yīng)，從而喚起情感并投射到產(chǎn)品中，因此感官手段便是喚起用戶本能層的直接方式；

因此，我們根據(jù)用戶訪問(wèn)的核心路徑進(jìn)行機(jī)會(huì)點(diǎn)挖掘，針對(duì)重點(diǎn)頁(yè)面加深品牌印象。

首頁(yè)在背景上體現(xiàn)輕量簡(jiǎn)潔的圖標(biāo)，在不打擾操作流程的前提下進(jìn)行品牌露出。安全模塊中，插圖占有更大的比重，將產(chǎn)品能力進(jìn)行視覺(jué)提煉并與文字模塊相結(jié)合，重點(diǎn)詮釋產(chǎn)品多方位保護(hù)的防御體系。安全類(lèi)應(yīng)用通過(guò)小插圖傳達(dá)安全能力，加深對(duì)產(chǎn)品的理解。通過(guò)遞進(jìn)式的體驗(yàn)流程，幫助用戶循序漸進(jìn)地理解產(chǎn)品，提升認(rèn)同感。

② 視覺(jué)轉(zhuǎn)譯，通過(guò)圖形化幫助理解業(yè)務(wù)內(nèi)容：

圖像不僅直觀而且美觀，可以第一時(shí)間激活大腦本能層面的細(xì)胞作用于行為、反思層。

可以說(shuō)，圖形化思維對(duì)于工具型產(chǎn)品而言尤為重要，大量的文字與數(shù)據(jù)、步驟等復(fù)雜的業(yè)務(wù)場(chǎng)景，通過(guò)圖形化的表達(dá)可以幫助用戶快速識(shí)別并讀取信息，提高使用效率的同時(shí)也優(yōu)化了工作環(huán)境。

通過(guò)感官、互動(dòng)與共情的設(shè)計(jì)手段實(shí)現(xiàn)產(chǎn)品的情感化系統(tǒng)建設(shè)。沿用微擬物風(fēng)格，將安全防護(hù)的理念進(jìn)行具像化表達(dá)，幫助用戶理解產(chǎn)品的核心能力。

依據(jù)圖標(biāo)風(fēng)格繼續(xù)延展插畫(huà)體系，以微擬物的風(fēng)格去詮釋業(yè)務(wù)內(nèi)容，通過(guò)光影和更細(xì)膩的質(zhì)感展示更多細(xì)節(jié)，結(jié)合內(nèi)容模塊的場(chǎng)景，讓專(zhuān)業(yè)晦澀的業(yè)務(wù)能力能夠通過(guò)圖形更容易被用戶理解。

③ 善用文字，植入情感：

語(yǔ)言和圖形一樣，是我們傳達(dá)信息的重要手段，同時(shí)也是情緒的重要載體。明確簡(jiǎn)練的文字可以幫助用戶順暢的完成工作，而富有人情味的文案則可以幫助產(chǎn)品增添溫度，調(diào)劑氛圍。因此我們需要走進(jìn)用戶，明確其對(duì)于情感化的需求內(nèi)容及程度，根據(jù)人群特征針對(duì)性進(jìn)行方案定制。

通過(guò)問(wèn)候語(yǔ)增加產(chǎn)品溫度，建立情感關(guān)懷。

總結(jié)

回顧整個(gè)改版流程，我們通過(guò)項(xiàng)目總結(jié)了工具性產(chǎn)品的設(shè)計(jì)思考。通過(guò)優(yōu)化展示邏輯，統(tǒng)一功能模塊的設(shè)計(jì)手段，讓產(chǎn)品清晰易用。

通過(guò)建立視覺(jué)標(biāo)準(zhǔn)化規(guī)范，統(tǒng)一底層展示邏輯，保證不同應(yīng)用及功能保持穩(wěn)定的體驗(yàn)，保持一致性。

通過(guò)品牌層面的統(tǒng)籌升級(jí)，將產(chǎn)品的核心理念體現(xiàn)在各個(gè)觸點(diǎn)中，讓產(chǎn)品的體驗(yàn)更一致，提升用戶對(duì)于產(chǎn)品的認(rèn)同感。

這次騰訊內(nèi)部 IT 工具產(chǎn)品的改版是我們?cè)诠ぞ咝彤a(chǎn)品的一次設(shè)計(jì)探索與嘗試，將理論和線上驗(yàn)證相結(jié)合，形成真正有價(jià)值的設(shè)計(jì)方法。也為我們后續(xù)方向探索提供更多可能性。也希望可以給到正在進(jìn)行 to B 業(yè)務(wù)、工具型產(chǎn)品探索的同學(xué)一些啟示。

歡迎關(guān)注作者「騰訊CDC體驗(yàn)設(shè)計(jì)」的微信公眾號(hào)：