結(jié)合可視化設(shè)計(jì)，產(chǎn)品團(tuán)隊(duì)可以將數(shù)據(jù)和信息轉(zhuǎn)化為易于用戶理解的形式，這也對(duì)用戶處理大量的數(shù)據(jù)和信息有所幫助。那么，可視化設(shè)計(jì)可以怎么做呢？作者盤(pán)點(diǎn)了一些優(yōu)秀的可視化設(shè)計(jì)案例，一起來(lái)看看吧。

在數(shù)字時(shí)代+信息爆炸的背景下，人們需要更有效的方式來(lái)理解和處理大量的數(shù)據(jù)和信息。

在這個(gè)時(shí)候，可視化設(shè)計(jì)嶄露頭角，以其令人目眩神迷的視覺(jué)奇跡為用戶帶來(lái)了前所未有的體驗(yàn)。

舉個(gè)例子：

在QQ音樂(lè)的歌曲列表會(huì)可視化聽(tīng)歌數(shù)據(jù)：明顯地顯示該歌曲的播放次數(shù)，讓用戶知道自己對(duì)哪些歌曲感興趣。

解決了用戶在瀏覽歌曲列表時(shí)，難以判斷歌曲受歡迎程度或自己對(duì)歌曲的興趣程度的問(wèn)題。

一、簡(jiǎn)介

可視化設(shè)計(jì)也就是通過(guò)數(shù)據(jù)、圖表、圖形、地圖等視覺(jué)元素，將數(shù)據(jù)和信息轉(zhuǎn)化為易于理解和互動(dòng)的形式。

B 端产品经理如何快速成长？

产品与业务架构主要是将整个业务工作流进行分层，梳理，然后抽象出一个个需求，将业务需求与产品合情合理的映射起来，最终使业务数据在产品中流动，执行，记录，使用。

查看详情 >

它不僅僅是將數(shù)字可視化，更是通過(guò)視覺(jué)元素的組織、表達(dá)和傳達(dá)，向用戶傳遞故事和見(jiàn)解。

二、有何作用

所有的可視化設(shè)計(jì)都可以總結(jié)成一個(gè)作用：提供具象化預(yù)覽。

將模糊/抽象的概念、數(shù)據(jù)、文案、功能等，轉(zhuǎn)為更真實(shí)、更形象的具象物。

以方便用戶和產(chǎn)品提供信息決策、加強(qiáng)信息理解、助力業(yè)務(wù)轉(zhuǎn)化等作用。

三、一些例子

下面為大家盤(pán)點(diǎn)一些優(yōu)秀的可視化設(shè)計(jì)：

1. 進(jìn)度擬人化，強(qiáng)化用戶狀態(tài)

在騰訊視頻中，當(dāng)用戶喜歡并守護(hù)某個(gè)愛(ài)豆時(shí)，通過(guò)「女生奔跑」的動(dòng)畫(huà)形象，粉絲的守護(hù)進(jìn)度被可視化出來(lái)。

解決的問(wèn)題：傳達(dá)粉絲對(duì)愛(ài)豆的守護(hù)心理，表達(dá)粉絲對(duì)愛(ài)豆的喜愛(ài)和守護(hù)，增加了用戶對(duì)平臺(tái)和愛(ài)豆的互動(dòng)參與度，讓用戶更加投入和忠誠(chéng)。

可復(fù)用場(chǎng)景：可以應(yīng)用在各類粉絲經(jīng)濟(jì)平臺(tái)或社交媒體平臺(tái)中，特別是針對(duì)明星、藝人、偶像等有大量粉絲群體的場(chǎng)景。

2. 金額趣味化，助力商品售出

當(dāng)閑魚(yú)賣家需要為寶貝設(shè)置降價(jià)時(shí)，價(jià)格滑輪會(huì)提示：當(dāng)前選擇的價(jià)格是原定價(jià)的多少折，并且配上一句有趣的話語(yǔ)。例如：封頂95折–折扣碰上九，曝光更持久

解決的問(wèn)題：不僅可以讓賣家用戶更直觀地看到當(dāng)前設(shè)置的價(jià)格是原價(jià)格的多少折扣、明確自己的降價(jià)策略，還通過(guò)有趣的順口溜，達(dá)到強(qiáng)化賣家降價(jià)的目的。

可復(fù)用場(chǎng)景：電商平臺(tái)等需要賣家設(shè)定價(jià)格的業(yè)務(wù)場(chǎng)景。

3. 具象化占比，傳達(dá)人群立場(chǎng)

虎嗅App的評(píng)論區(qū)設(shè)計(jì)采用了巧妙的可視化方式，通過(guò)「點(diǎn)贊」和「踩一踩」操作以及評(píng)論下方的紅藍(lán)色塊面積統(tǒng)計(jì)，讓用戶能夠清晰直觀地了解大多數(shù)人對(duì)評(píng)論的態(tài)度占比。

解決的問(wèn)題：解決了傳統(tǒng)評(píng)論區(qū)文字和數(shù)字信息表達(dá)的局限性，提供了更清晰、直觀的信息可視化表達(dá)方式。

用戶可以通過(guò)點(diǎn)贊、踩一踩和紅藍(lán)色塊面積直觀地了解他人對(duì)評(píng)論的喜好和立場(chǎng)。

可復(fù)用場(chǎng)景：可以應(yīng)用于各類社交平臺(tái)、新聞資訊網(wǎng)站和論壇等需要用戶交互和表達(dá)觀點(diǎn)的場(chǎng)景，以提升用戶參與度和促進(jìn)社區(qū)討論。

4. 透明化狀態(tài)，提升瀏覽效率

在商品詳情頁(yè)里的【回到頂部】icon，會(huì)根據(jù)用戶的滑動(dòng)展示不同的狀態(tài)。

• 向下滑動(dòng)：查看更多商品時(shí)顯示當(dāng)前瀏覽進(jìn)度和總商品數(shù)，這樣用戶就可以對(duì)商品數(shù)量有一個(gè)大致的了解。
• 向上滑動(dòng)：查看上面商品時(shí)則變回【回到頂部】icon。

解決的問(wèn)題：

第一：用戶不知道當(dāng)前頁(yè)面有多少商品和頁(yè)面的總長(zhǎng)度，通過(guò)展示當(dāng)前瀏覽進(jìn)度和總商品數(shù)，用戶可以對(duì)商品數(shù)量有一個(gè)大致的了解，提高了用戶的瀏覽體驗(yàn)。

第二：在向下滑動(dòng)瀏覽更多商品后，用戶可能需要快速回到頁(yè)面頂部，以便繼續(xù)瀏覽其他內(nèi)容。

通過(guò)在頁(yè)面頂部展示「回到頂部」按鈕，用戶可以方便地返回到頁(yè)面頂部，提供了便捷的操作方式。

可復(fù)用場(chǎng)景：

• 需要分頁(yè)展示內(nèi)容并提供回到頂部功能的場(chǎng)景。
• 需要用戶長(zhǎng)時(shí)間滑動(dòng)瀏覽大量?jī)?nèi)容的場(chǎng)景。

5. 權(quán)益擬物化，突顯尊享榮譽(yù)

自如的會(huì)員權(quán)益中心，當(dāng)滑動(dòng)選擇不同的權(quán)益等級(jí)時(shí)，上面的【房屋】會(huì)實(shí)時(shí)搭配出不同權(quán)益等級(jí)下應(yīng)有的裝飾品，下面會(huì)高亮顯示等級(jí)權(quán)益，特別形象有意思。

解決的問(wèn)題：通過(guò)趣味性的等級(jí)權(quán)益裝扮，解決了提升用戶對(duì)更高等級(jí)權(quán)益的興趣，并引導(dǎo)用戶開(kāi)通高等級(jí)權(quán)益的問(wèn)題。同時(shí)，通過(guò)展示不同權(quán)益等級(jí)下的裝飾品，突顯產(chǎn)品的個(gè)性化服務(wù)。

可復(fù)用場(chǎng)景：

任何需要展示會(huì)員權(quán)益和促進(jìn)用戶開(kāi)通高級(jí)權(quán)益的業(yè)務(wù)場(chǎng)景，例如會(huì)員制電商平臺(tái)、會(huì)員制租房平臺(tái)等。

6. 歷史圖表化，加強(qiáng)信息預(yù)覽

豆瓣iOS 7.0.0版本以后，在用戶主頁(yè)上用了【熱力圖】來(lái)呈現(xiàn)用戶看/讀/聽(tīng)過(guò)了哪些影視、圖書(shū)、音樂(lè)等，讓用戶對(duì)自己的消費(fèi)記錄有一個(gè)可視化可的認(rèn)知。

解決的問(wèn)題：通過(guò)熱力圖這種可視化方式，讓用戶及他人直觀地了解自己的【內(nèi)容消費(fèi)習(xí)慣與愛(ài)好】，幫助用戶消費(fèi)更多更精準(zhǔn)內(nèi)容，也方便找到同好。

可復(fù)用場(chǎng)景：類似的熱力圖可視化方式可以應(yīng)用在各類社交媒體、電商、新聞資訊等平臺(tái)，用于展示用戶的興趣愛(ài)好、消費(fèi)記錄等個(gè)性化信息，并進(jìn)行相關(guān)的推薦和互動(dòng)。

7. 坑位可視化，助力信息決策

現(xiàn)在的一些廁所也做了可視化系統(tǒng)，紅色代表有人，綠色就代表沒(méi)人，清晰更感知當(dāng)前情況，減少無(wú)效排隊(duì)的情況發(fā)生。

解決的問(wèn)題：用戶可以更合理地掌控自己的時(shí)間，也更方便保潔阿姨根據(jù)實(shí)際情況進(jìn)行清潔工作。對(duì)于普通用戶能及時(shí)判斷人流量大小，從而更好地找到空余廁位，省去排除等候的時(shí)間。

可復(fù)用場(chǎng)景：廁所、公共場(chǎng)所等人流密集的場(chǎng)所。

8. 更明顯的速度感，增加信息對(duì)比

「swisscom」通過(guò)提供可視化的網(wǎng)速呈現(xiàn)方式，用進(jìn)度條展示不同網(wǎng)速套餐下瀏覽網(wǎng)站、下載電子書(shū)、CD、更新包和電影所需時(shí)間，幫助用戶比較不同網(wǎng)速套餐的區(qū)別。

解決的問(wèn)題：解決了僅憑帶寬數(shù)字難以比較網(wǎng)速具體速度的問(wèn)題，通過(guò)可視化的方式幫助用戶直觀地了解不同網(wǎng)速套餐的優(yōu)劣。

可復(fù)用場(chǎng)景：適用于需要比較不同選項(xiàng)的場(chǎng)景，如網(wǎng)速套餐、服務(wù)套餐、價(jià)格比較等。

9. 更明顯的大小對(duì)比，加強(qiáng)感官體驗(yàn)

網(wǎng)頁(yè)端neal.fun可以通過(guò)更直觀、可視化的方式，向用戶展示了人類與行星、銀河系和太陽(yáng)系之間的關(guān)系。通過(guò)按鍵盤(pán)右鍵切換，可以逐步從人類的微小存在開(kāi)始，一直延伸到宇宙的無(wú)垠遼闊。

解決的問(wèn)題：用戶可以獲得視覺(jué)上的沖擊和探索的好奇心，增強(qiáng)對(duì)宇宙的認(rèn)知和興趣，為網(wǎng)站帶來(lái)了更多的流量和用戶參與度。

可復(fù)用場(chǎng)景：該案例可以應(yīng)用于科普類網(wǎng)站、教育平臺(tái)、科技展覽等領(lǐng)域，用于向用戶展示宇宙的宏偉與人類的微小。

好了，以上就是作者對(duì)「可視化設(shè)計(jì)」的一些小總結(jié)，不知道有沒(méi)有幫助到你。