聚合類工具產(chǎn)品的視覺設(shè)計,不僅需要思考如何提升使用效率,幫助產(chǎn)品保持體驗的穩(wěn)定,也需要思考如何讓用戶更加信任產(chǎn)品。文章以騰訊內(nèi)部 IT 工具產(chǎn)品改版為例,通過建立視覺標(biāo)準(zhǔn)化,規(guī)范產(chǎn)品展示框架,提升產(chǎn)品品牌認(rèn)知等設(shè)計方法,幫助產(chǎn)品達(dá)到穩(wěn)定高效的目的,并提升用戶對產(chǎn)品的認(rèn)同感。
更多騰訊改版案例:
1. 工具型產(chǎn)品的分類:
簡單來講,我們可以這樣定義一款工具型產(chǎn)品:在某一個具體的場景下,為解決某一個明確需求而誕生的工具。按照產(chǎn)品形態(tài),工具型產(chǎn)品還可以分為垂直型工具和聚合型工具產(chǎn)品:垂直型工具,指的是解決單一問題的工具型產(chǎn)品,目的是滿足某類用戶的特定問題。聚合型工具,指的是將多個垂直工具聚合在一起的平臺產(chǎn)品,目的是滿足不同用戶群體的不同用戶需求。
2. 工具型產(chǎn)品的區(qū)別:
- 產(chǎn)品含義區(qū)別:垂直型工具產(chǎn)品是專門為解決單一問題誕生的工具,聚合型工具產(chǎn)品則是為了滿足某個領(lǐng)域的多個業(yè)務(wù)場景,將多種工具聚合在一起的產(chǎn)品。
- 用戶需求區(qū)別:垂直型工具產(chǎn)品多數(shù)為滿足某類用戶的特定需求,聚合型工具產(chǎn)品需要滿足不同群體的用戶需求。
- 產(chǎn)品功能區(qū)別:垂直型工具產(chǎn)品常常會從業(yè)務(wù)流程出發(fā),將任務(wù)流程的環(huán)節(jié)進(jìn)行分解,完成產(chǎn)品的自閉環(huán),而聚合型工具產(chǎn)品除了考慮已有的業(yè)務(wù)需求,還要對公共功能進(jìn)行提取、抽象、拆分,因此平臺功能通常會按照”領(lǐng)域”進(jìn)行設(shè)計,以達(dá)到靈活、通用的目的。
- 產(chǎn)品結(jié)構(gòu)區(qū)別:垂直型工具產(chǎn)品是典型的“煙囪型”結(jié)構(gòu),簡潔清晰;聚合型工具產(chǎn)品則多數(shù)為“梳子型”,隨著業(yè)務(wù)的復(fù)雜性增加,場景也會逐步增加,因此平臺在結(jié)構(gòu)規(guī)劃上需要考慮拓展性和靈活性。
馬斯洛需求理論將人類需求按程度劃分為了 5 個層次:生理需求、安全需求、愛與歸屬的需求、尊重的需求、自我實現(xiàn)的需求。合并同類需求后,我們可以簡稱為三類需求:生理需求,安全需求和情感需求。將人的需求映射到工具的使用上,分別對應(yīng)工具的可用性、穩(wěn)定性及認(rèn)同感。
通過以上設(shè)計評估我們可以得出聚合類工具型產(chǎn)品的設(shè)計目標(biāo):
- 可用性.核心價值是提升使用效率,即要讓產(chǎn)品保持清晰易用。
- 穩(wěn)定性.聚合型工具產(chǎn)品的功能復(fù)雜,我們需要考慮不同用戶群體的不同任務(wù)需求,統(tǒng)一底層展示邏輯,保證不同應(yīng)用及功能保持體驗的一致與穩(wěn)定。
- 認(rèn)同感.做好功能只是第一步,當(dāng)解決完產(chǎn)品的可用性和穩(wěn)定性等問題后,仍需思考的是如何樹立用戶對品牌的信任度,幫助產(chǎn)品建立安全可靠的服務(wù)形象,從而幫助用戶在使用產(chǎn)品的過程中變得更積極,更信任,對產(chǎn)品的容忍度更高。即提升產(chǎn)品認(rèn)同感。
因此,在進(jìn)行聚合類工具型產(chǎn)品的視覺設(shè)計過程中,需要思考如何做到‘既要又要還要’——即要保證簡單好用,又要保證產(chǎn)品整體的體驗一致性,還要提升用戶對于品牌的感受,幫助用戶清晰認(rèn)知產(chǎn)品。
本文將繼續(xù)以「騰訊內(nèi)部 IT 工具產(chǎn)品改版」為例,通過問題洞察與機(jī)會點(diǎn)評估,淺析聚合類工具型產(chǎn)品在視覺實施階段的探索與思考。該產(chǎn)品負(fù)責(zé)為騰訊員工提供日常辦公工具、網(wǎng)絡(luò)鏈接、安全防護(hù)三個方面的能力,讓員工可以安全、穩(wěn)定、高效地訪問企業(yè)資源和數(shù)據(jù),是騰訊員工最常使用的內(nèi)部工具之一。
1. 可用性-讓產(chǎn)品清晰易用
問題洞察:除了內(nèi)容模塊的冗雜堆棧外,騰訊內(nèi)部 IT 工具原客戶端版本已沿用多年,存在視覺風(fēng)格圖標(biāo)風(fēng)格多樣、字體使用缺乏邏輯、品牌色使用混亂、控件不統(tǒng)一等情況,風(fēng)格雜亂的頁面呈現(xiàn)加重了用戶的認(rèn)知負(fù)擔(dān),導(dǎo)致用戶無法快速理解和查找內(nèi)容。
解決方案:建立視覺標(biāo)準(zhǔn)化規(guī)范
在設(shè)計語言和原則已不能夠承載現(xiàn)有的產(chǎn)品內(nèi)容和業(yè)務(wù)特征的情況下,我們通過建立建立設(shè)計標(biāo)準(zhǔn)與規(guī)范,逐一更新產(chǎn)品的視覺語言,升級產(chǎn)品形態(tài)。包含色彩、字體、圖標(biāo)、布局等,統(tǒng)一設(shè)計底層邏輯,從而提升產(chǎn)品的一致性,讓頁面呈現(xiàn)清晰易用,使用更加便捷明確。
① 完善色彩體系:
隨著業(yè)務(wù)的逐漸增加,業(yè)務(wù)類型的多元化,單一的品牌色已無法支撐現(xiàn)有應(yīng)用場景。我們根據(jù)企業(yè)內(nèi)部 IT 工具的主品牌色,補(bǔ)充完善色彩系統(tǒng),延展了功能色及輔助色,讓色彩系統(tǒng)更完整,更具適用性,滿足不同使用場景表現(xiàn)需求。
② 探索標(biāo)識風(fēng)格
在圖標(biāo)風(fēng)格的表現(xiàn)上,我們也一直在進(jìn)行探索。To B 工具類產(chǎn)品會存在較多專業(yè)性較強(qiáng)或偏業(yè)務(wù)的圖標(biāo),所以在圖標(biāo)風(fēng)格上不僅需要保持圖標(biāo)美感,同時也要能夠清晰表達(dá),傳遞內(nèi)容。經(jīng)過幾輪風(fēng)格探索,我們與業(yè)務(wù)一起敲定了面性漸變風(fēng)格圖標(biāo),以明確的輪廓型+色彩分類來傳達(dá)內(nèi)容。
通用型圖標(biāo)的風(fēng)格樣式,則是以保證內(nèi)容的清晰易識別為目標(biāo),使用 Tdesign 標(biāo)準(zhǔn)的線性圖標(biāo)樣式,以普適、通用的標(biāo)準(zhǔn)進(jìn)行設(shè)計。
③ 規(guī)范字體、布局:
在字體和布局上,產(chǎn)品遵循了 TDesign 的規(guī)范,通過字體、字階、行高、字重、字色、幾個維度去制定文字系統(tǒng)。通過實現(xiàn)像素對齊拉開清晰明確的層次關(guān)系、實現(xiàn)具有和諧美觀的大小對比效果,體現(xiàn)字體的規(guī)律和韻律。
2. 穩(wěn)定性-讓體驗穩(wěn)定統(tǒng)一
問題洞察:
① 通過對原有頁面框架進(jìn)行問題分析,發(fā)現(xiàn)產(chǎn)品存在內(nèi)部應(yīng)用及外部接入應(yīng)用兩種應(yīng)用類型,除了承載產(chǎn)品本身的網(wǎng)絡(luò)監(jiān)測 、安全監(jiān)控等功能外,還需要辟出模塊承載企業(yè) IT 自助服務(wù) Ask IT 的功能。隨著接入的內(nèi)容的逐步增加,現(xiàn)框架內(nèi)容堆棧嚴(yán)重,對于內(nèi)容的承載已經(jīng)趨于飽和,缺乏穩(wěn)定性。
② 除了主界面缺乏拓展性以外,目前的應(yīng)用主要通過主頁及窗口進(jìn)行承載,模塊樣式與窗口樣式多樣,存在窗口疊窗口、窗口大小樣式五花八門等問題,展示與跳轉(zhuǎn)缺乏統(tǒng)一的邏輯規(guī)則。
解決方案:基于以上存在問題,產(chǎn)品需要更直觀的樣式展示和抉擇引導(dǎo),通過視覺手段歸類模塊,簡化頁面信息布局,優(yōu)化功能層級分區(qū),解決由于頁面信息過多造成的信息對比弱,布局密集所導(dǎo)致的用戶在接受信息階段導(dǎo)致的效率消耗,從而提升產(chǎn)品的穩(wěn)定性。
優(yōu)化展示邏輯,統(tǒng)一功能模塊承載樣式
在內(nèi)容框架的統(tǒng)一上,我們通過定義不同業(yè)務(wù)的展示邏輯,去統(tǒng)一頁面展示邏輯:外部應(yīng)用統(tǒng)一由一致的窗口式框架進(jìn)行適配承載,內(nèi)部應(yīng)用在使用場景時劃分為'設(shè)置類'與'配置類',將即時完成的設(shè)置類內(nèi)容直接在頁面展示,不另加彈窗中斷體驗流程。需要一段時間 loading 的配置類應(yīng)用則由彈窗進(jìn)行承載,讓用戶在配置過程中仍舊能在產(chǎn)品中進(jìn)行其他操作。并統(tǒng)一了彈窗的基礎(chǔ)樣式及視覺展示邏輯,控制傳遞中不必要的信息消耗?;谝陨隙x,我們重塑了產(chǎn)品的所有應(yīng)用及流程模塊;
3. 認(rèn)同感-提升品牌感受,建立品牌認(rèn)知
問題洞察:根據(jù)用戶調(diào)研結(jié)果來看,雖然騰訊內(nèi)部 IT 工具在公司內(nèi)部已有較大的用戶使用體量,但用戶對于產(chǎn)品的服務(wù)定位及品牌認(rèn)知仍舊是較為模糊的。
解決方案:相較于 To C 產(chǎn)品,內(nèi)部 IT 工具更著重在保持工具型應(yīng)用簡潔 、清晰的使用體驗,在這樣的前提下,我們更應(yīng)該注重功能性的平衡,在有限的應(yīng)用場景內(nèi),幫助產(chǎn)品建立安全可靠的服務(wù)形象,體現(xiàn)產(chǎn)品安全防護(hù)的核心理念。
因此,除了內(nèi)容的優(yōu)化、視覺風(fēng)格的統(tǒng)一,在品牌層面我們也進(jìn)行了統(tǒng)籌升級,將產(chǎn)品的核心理念體現(xiàn)在各個觸點(diǎn)中,讓產(chǎn)品的體驗更一致。即提升品牌認(rèn)知。
① 加深品牌印象,傳達(dá)業(yè)務(wù)理念:
根據(jù)諾曼的情感化三層次理論我們可以發(fā)現(xiàn):用戶在使用產(chǎn)品時,產(chǎn)生的心理變化同樣符合這樣的規(guī)律:喚起、關(guān)聯(lián)、認(rèn)同。出于本能,用戶會因感官刺激產(chǎn)生神經(jīng)反應(yīng),從而喚起情感并投射到產(chǎn)品中,因此感官手段便是喚起用戶本能層的直接方式;
因此,我們根據(jù)用戶訪問的核心路徑進(jìn)行機(jī)會點(diǎn)挖掘,針對重點(diǎn)頁面加深品牌印象。
首頁在背景上體現(xiàn)輕量簡潔的圖標(biāo),在不打擾操作流程的前提下進(jìn)行品牌露出。安全模塊中,插圖占有更大的比重,將產(chǎn)品能力進(jìn)行視覺提煉并與文字模塊相結(jié)合,重點(diǎn)詮釋產(chǎn)品多方位保護(hù)的防御體系。安全類應(yīng)用通過小插圖傳達(dá)安全能力,加深對產(chǎn)品的理解。通過遞進(jìn)式的體驗流程,幫助用戶循序漸進(jìn)地理解產(chǎn)品,提升認(rèn)同感。
② 視覺轉(zhuǎn)譯,通過圖形化幫助理解業(yè)務(wù)內(nèi)容:
圖像不僅直觀而且美觀,可以第一時間激活大腦本能層面的細(xì)胞作用于行為、反思層。
可以說,圖形化思維對于工具型產(chǎn)品而言尤為重要,大量的文字與數(shù)據(jù)、步驟等復(fù)雜的業(yè)務(wù)場景,通過圖形化的表達(dá)可以幫助用戶快速識別并讀取信息,提高使用效率的同時也優(yōu)化了工作環(huán)境。
通過感官、互動與共情的設(shè)計手段實現(xiàn)產(chǎn)品的情感化系統(tǒng)建設(shè)。沿用微擬物風(fēng)格,將安全防護(hù)的理念進(jìn)行具像化表達(dá),幫助用戶理解產(chǎn)品的核心能力。
依據(jù)圖標(biāo)風(fēng)格繼續(xù)延展插畫體系,以微擬物的風(fēng)格去詮釋業(yè)務(wù)內(nèi)容,通過光影和更細(xì)膩的質(zhì)感展示更多細(xì)節(jié),結(jié)合內(nèi)容模塊的場景,讓專業(yè)晦澀的業(yè)務(wù)能力能夠通過圖形更容易被用戶理解。
③ 善用文字,植入情感:
語言和圖形一樣,是我們傳達(dá)信息的重要手段,同時也是情緒的重要載體。明確簡練的文字可以幫助用戶順暢的完成工作,而富有人情味的文案則可以幫助產(chǎn)品增添溫度,調(diào)劑氛圍。因此我們需要走進(jìn)用戶,明確其對于情感化的需求內(nèi)容及程度,根據(jù)人群特征針對性進(jìn)行方案定制。
通過問候語增加產(chǎn)品溫度,建立情感關(guān)懷。
回顧整個改版流程,我們通過項目總結(jié)了工具性產(chǎn)品的設(shè)計思考。通過優(yōu)化展示邏輯,統(tǒng)一功能模塊的設(shè)計手段,讓產(chǎn)品清晰易用。
通過建立視覺標(biāo)準(zhǔn)化規(guī)范,統(tǒng)一底層展示邏輯,保證不同應(yīng)用及功能保持穩(wěn)定的體驗,保持一致性。
通過品牌層面的統(tǒng)籌升級,將產(chǎn)品的核心理念體現(xiàn)在各個觸點(diǎn)中,讓產(chǎn)品的體驗更一致,提升用戶對于產(chǎn)品的認(rèn)同感。
這次騰訊內(nèi)部 IT 工具產(chǎn)品的改版是我們在工具型產(chǎn)品的一次設(shè)計探索與嘗試,將理論和線上驗證相結(jié)合,形成真正有價值的設(shè)計方法。也為我們后續(xù)方向探索提供更多可能性。也希望可以給到正在進(jìn)行 to B 業(yè)務(wù)、工具型產(chǎn)品探索的同學(xué)一些啟示。
歡迎關(guān)注作者「騰訊CDC體驗設(shè)計」的微信公眾號:
復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場,未經(jīng)允許不得轉(zhuǎn)載。
發(fā)評論!每天贏獎品
點(diǎn)擊 登錄 后,在評論區(qū)留言,系統(tǒng)會隨機(jī)派送獎品
2012年成立至今,是國內(nèi)備受歡迎的設(shè)計師平臺,提供獎品贊助 聯(lián)系我們
AI輔助海報設(shè)計101例
已累計誕生 753 位幸運(yùn)星
發(fā)表評論 為下方 1 條評論點(diǎn)贊,解鎖好運(yùn)彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓