與其他相對(duì)成熟的設(shè)計(jì)領(lǐng)域（UI、插畫等）相比，數(shù)據(jù)可視化尚顯小眾，在一個(gè)細(xì)分、小眾、不成熟的領(lǐng)域里做設(shè)計(jì)，「怎么去找靈感」確實(shí)是一些小伙伴經(jīng)常遇到的問題。本文以本人工作經(jīng)驗(yàn)為基礎(chǔ)，系統(tǒng)性分析了該問題及對(duì)應(yīng)的解決方法，并將其整理成文與大家分享，這在數(shù)據(jù)可視化行業(yè)內(nèi)尚屬首次。當(dāng)然了，本文雖面向數(shù)據(jù)可視化設(shè)計(jì)師群體，但其中的方法是通用的，運(yùn)用在其他設(shè)計(jì)領(lǐng)域也完全事半功倍。

本文結(jié)構(gòu)概覽

本文圍繞「搜什么——去哪兒搜——怎么搜——素材的整理——靈感的迭代與更新」 五大板塊展開。

靈感庫建立的基礎(chǔ)

靈感庫的建立大體上分主動(dòng)與被動(dòng)兩種。主動(dòng)，是我們有意識(shí)地收集、整理相關(guān)作品素材形成靈感庫的過程；被動(dòng)，指通過朋友圈好友分享、同行推薦等獲取靈感的方法。因?yàn)楹笳吒豢煽?，影響因素較多，比如你所處的圈子、社交網(wǎng)絡(luò)使用習(xí)慣等都會(huì)影響被動(dòng)獲取的質(zhì)量。所以今天，我跟大家分享的主要是第一種主動(dòng)建立靈感庫的方法，而這個(gè)方法的核心我把它歸納為兩個(gè)字 ：搜索。

搜索是現(xiàn)在這個(gè)時(shí)代我們主動(dòng)獲取信息的最主要手段，每天我們通過各類關(guān)鍵詞在各類 APP 上獲取各樣的服務(wù)、產(chǎn)品和資源。靈感的主動(dòng)收集就是一個(gè)通過關(guān)鍵詞搜索，然后分類、整理、研究、再利用的過程。所以影響靈感收集的主要因素其實(shí)就是我們能不能用好搜索。不同的搜索方法、渠道、關(guān)鍵詞極大地影響著我們獲取到的信息質(zhì)量，這也是本篇文章為何以搜索核心展開的原因。

如下圖所示，同樣的關(guān)鍵詞在不同的搜索渠道，得到的內(nèi)容質(zhì)量是不一樣的。

靈感庫建立的第一步：搜什么？

互聯(lián)網(wǎng)很大，如果沒有明確的目標(biāo)，找靈感的過程就跟刷抖音一樣，恍恍惚惚幾個(gè)小時(shí)，好像點(diǎn)了不少贊，收藏了不少干貨，回頭看其實(shí)并沒有什么特別有價(jià)值的東西，所以找靈感要有目標(biāo)，有 KPI 才行，有目標(biāo)就有標(biāo)準(zhǔn)，有標(biāo)準(zhǔn)才有方向和效率。

如上圖所示，我對(duì)數(shù)據(jù)可視化這個(gè)行業(yè)術(shù)語做了分析和拆解，這樣做的目的是為之后搜索關(guān)鍵詞的提取做思路的拓展。很多小伙伴在搜索可視化相關(guān)內(nèi)容時(shí)，思路總是局限在「可視化」這個(gè)關(guān)鍵詞上，但是直接使用這個(gè)關(guān)鍵詞搜索，大多數(shù)時(shí)候并不能找到我們心理預(yù)期的結(jié)果，或者搜索多次后，看到的都是之前見過的作品，很難突破邊界，獲取更多新的靈感。造成的這個(gè)結(jié)果的原因顯而易見，就是關(guān)鍵詞的匱乏，不知道搜什么。而對(duì)「大屏數(shù)據(jù)可視化」進(jìn)行解析之發(fā)現(xiàn)，以往的搜索，我們只使用了四個(gè)方向里的其中一個(gè)，其它三個(gè)方向并沒有很好的利用?，F(xiàn)在，我們以每個(gè)方向上的核心關(guān)鍵詞為基礎(chǔ)，去豐富它的下一級(jí)關(guān)鍵詞，這樣就會(huì)像枝芽新生一樣，在各個(gè)節(jié)點(diǎn)延伸出豐富的詞匯。

媒介就是指數(shù)據(jù)可視化設(shè)計(jì)最終落地在什么平臺(tái)，一般來講，大屏數(shù)據(jù)可視化設(shè)計(jì)落地的媒介當(dāng)然就是大屏了，以它為核心做關(guān)鍵詞的發(fā)散，可以產(chǎn)生其它幾個(gè)二級(jí)關(guān)鍵詞。

數(shù)據(jù)類型是主要數(shù)據(jù)的特征或來源，不同的數(shù)據(jù)類型，在可視化設(shè)計(jì)時(shí)有不同的視覺特征。比如地理信息的數(shù)據(jù)可視化，一般會(huì)與道路、河流、人造建筑、某區(qū)域內(nèi)地標(biāo)等一起出現(xiàn)，會(huì)有豐富的 3D 場景、動(dòng)效，而圖表信息相對(duì)較少；報(bào)表類信息的數(shù)據(jù)可視化，則主要以更好地展示報(bào)表內(nèi)大量數(shù)據(jù)為主，所以強(qiáng)調(diào)信息的層級(jí)、主次，設(shè)計(jì)的目標(biāo)是要減少用戶認(rèn)知負(fù)擔(dān)、引起用戶閱讀興趣，促進(jìn)數(shù)據(jù)內(nèi)容的有效傳達(dá)，因而會(huì)較少使用動(dòng)畫，其次，因數(shù)據(jù)較多，也很難對(duì)應(yīng)到某個(gè)具體的物理場景，故 3D 模型等也較少使用。

所以以數(shù)據(jù)類型為核心，拓展的二級(jí)關(guān)鍵詞會(huì)讓搜索結(jié)果更精準(zhǔn)，更有針對(duì)性。

設(shè)計(jì)風(fēng)格就是視覺設(shè)計(jì)整體上給人的想象和感受，好的設(shè)計(jì)就跟一個(gè)人一樣，一定是有自己鮮明的個(gè)性和氣質(zhì)，能夠引起人的共鳴和向往，唯有如此，設(shè)計(jì)才能吸引人，從而影響人，并最終傳遞自己的觀點(diǎn)給觀者。所以設(shè)計(jì)風(fēng)格的定義是視覺設(shè)計(jì)中最重要的一環(huán)，也是最需要靈感和創(chuàng)造力的部分。

作為數(shù)據(jù)可視化設(shè)計(jì)師，我們想要找到的參考是那些具有數(shù)據(jù)可視化風(fēng)格的作品，但這些作品本身并不一定是在講數(shù)據(jù)可視化的內(nèi)容，只要作品某部分的設(shè)計(jì)有我們想要的那種「感覺」，就可以了，而這個(gè)作品可能是某段影片、某個(gè)動(dòng)效、某種圖形、某個(gè)元素或聲音。基于這樣的思路，我歸納了一些具有數(shù)據(jù)可視化風(fēng)格但不一定都是數(shù)據(jù)可視化作品的關(guān)鍵詞。這就是一個(gè)特別有意思的點(diǎn)，我們想要找到某個(gè)內(nèi)容，但當(dāng)我們用最貼切它的那個(gè)名字去找時(shí)，卻不一定能找到最能代表它風(fēng)格的作品。所以當(dāng)我們跳出數(shù)據(jù)可視化這樣一個(gè)具體的點(diǎn)，而從更抽象的設(shè)計(jì)風(fēng)格這個(gè)層面去看待它的時(shí)候，就能更好地發(fā)散思維、拿到了更多好的關(guān)鍵詞，找到更多的刺激點(diǎn)。

以設(shè)計(jì)風(fēng)格為例，我們從它的節(jié)點(diǎn)上找到任意一個(gè)關(guān)鍵詞：SCI-FI，然后搜索這個(gè)關(guān)鍵詞，我們看看搜索到的結(jié)果。

業(yè)務(wù)場景簡單理解就是在什么情況下要解決什么問題，它是數(shù)據(jù)可視化的落腳點(diǎn)，也是數(shù)據(jù)可視化的商業(yè)價(jià)值所在。每個(gè)公司或團(tuán)隊(duì)，都會(huì)有自己專注的業(yè)務(wù)方向，所以在工作中找這方面的靈感，從業(yè)務(wù)場景入手效果最好。

簡單回顧下，通過上部分文章的分析，我們從媒介、數(shù)據(jù)類型、設(shè)計(jì)風(fēng)格、業(yè)務(wù)場景四個(gè)方面形成了一個(gè)數(shù)據(jù)可視化的關(guān)鍵詞的矩陣。這個(gè)矩陣是建立靈感庫的基礎(chǔ)，之后每當(dāng)我們有新的關(guān)鍵詞要加入，或者有效果不好的關(guān)鍵詞需要剔除，只需修改、迭代這個(gè)關(guān)鍵詞矩陣即可。有了這個(gè)關(guān)鍵詞矩陣后，我們?nèi)绾卫盟瓿梢淮位趯?shí)際需求的靈感搜集？下面給大家舉個(gè)小例子來看一下怎么用。

一句話描述業(yè)務(wù)需求

首先用盡可能簡短的一句話描述業(yè)務(wù)方訴求。

一句話描述業(yè)務(wù)訴求后，我們把業(yè)務(wù)需求帶到關(guān)鍵詞矩陣中，就會(huì)獲得如下圖的結(jié)果：

可以看到，帶入需求后，按樹狀結(jié)構(gòu)去匹配與需求相吻合的關(guān)鍵詞，就可拿到明確的搜索指引目錄，然后我們按搜索指引，開始靈感收集即可。

這里有個(gè)小小的點(diǎn)，就是為什么要盡可能用簡短的一句話來描述業(yè)務(wù)方訴求，

• 這樣做可以把那些優(yōu)先級(jí)低的干擾因素都過濾掉，留下真正核心的訴求，越是能簡短的概括，越能真正把握需求的核心。我個(gè)人一直以來與業(yè)務(wù)方溝通需求后，都會(huì)嘗試用一句話概括，若需求方認(rèn)可，開始設(shè)計(jì)工作；不認(rèn)可，則繼續(xù)溝通。
• 對(duì)于數(shù)據(jù)可視化設(shè)計(jì)師來講，明確自己在工作流中的角色、承擔(dān)的責(zé)任、要解決的問題以及最終交付怎樣的產(chǎn)出尤為重要，因?yàn)橹挥星宄诉@些，我們才能有效分配自己的時(shí)間、確定跟上下游的協(xié)作策略，避免盲目地沒有 KPI 的設(shè)計(jì)。

靈感庫建立的第二步：去哪兒搜？

合適的關(guān)鍵詞是第一步，它保證了我們搜索結(jié)果的有效性，而去哪兒搜決定了我們搜索結(jié)果的質(zhì)量。如下圖，針對(duì)數(shù)據(jù)可視化設(shè)計(jì)師，我對(duì)「去哪兒搜」這個(gè)問題按我自己的從業(yè)經(jīng)驗(yàn)做了梳理。

從我的歸納里大家可以發(fā)現(xiàn)，我把數(shù)據(jù)可視化設(shè)計(jì)師的靈感來源分為了四大塊（其它行業(yè)的設(shè)計(jì)也大體上就這四塊），分別是：設(shè)計(jì)網(wǎng)站、產(chǎn)品或服務(wù)提供方、獨(dú)立設(shè)計(jì)師或工作室、視頻網(wǎng)站。

第一部分：設(shè)計(jì)網(wǎng)站

設(shè)計(jì)網(wǎng)站部分列出的都是設(shè)計(jì)師們都熟悉的幾個(gè)站點(diǎn)，在之前，大多數(shù)靈感的收集都可在花瓣完成，但花瓣最近幾次改版之后，已經(jīng)沒有以前那么好用了。對(duì)數(shù)據(jù)可視化方面的素材搜索，個(gè)人經(jīng)驗(yàn)上，強(qiáng)烈推薦大家去 behance，雖然 behance 訪問方面也面臨一些困難，但是，但凡你想真的了解一些好的設(shè)計(jì)，這個(gè)網(wǎng)站，是你一定要想辦法去經(jīng)常逛逛的。至于為啥不推薦其它幾個(gè)網(wǎng)站，倒并不是說其它網(wǎng)站不能用，只是搜索的結(jié)果相對(duì)局限。針對(duì)這塊的具體分析，我會(huì)在文末的 Q&A 里進(jìn)行。

第二部分：產(chǎn)品或服務(wù)提供方

我們知道，任何商業(yè)設(shè)計(jì)，一定是有一個(gè)業(yè)務(wù)或應(yīng)用場景來支撐的，一定程度上設(shè)計(jì)就是在圍繞業(yè)務(wù)場景提供視覺、交互、用戶體驗(yàn)、品牌等方面的解決方案，也就是說設(shè)計(jì)是服務(wù)于業(yè)務(wù)場景的，反過來講，服務(wù)于這個(gè)業(yè)務(wù)場景的就只有設(shè)計(jì)師么？當(dāng)然不是。在市場條件下，服務(wù)的提供方除了像設(shè)計(jì)師這樣的個(gè)體外，更多的是我們熟悉的另一個(gè)機(jī)構(gòu)（組織），這個(gè)組織的名字叫「公司」。公司把大量專業(yè)的人員組織在一起，通過優(yōu)勢互補(bǔ)、強(qiáng)力協(xié)作，提供服務(wù)、解決需求方問題。對(duì)于數(shù)據(jù)可視化設(shè)計(jì)來講，企業(yè)當(dāng)然也參與其中。所以我們找靈感去服務(wù)提供方也是一個(gè)的方法。企業(yè)要證明自己的實(shí)力、要讓潛在客戶了解自己，必然會(huì)花大量的資源做營銷做推廣，而最常見的推廣的落腳點(diǎn)就是企業(yè)官網(wǎng)。很多做數(shù)據(jù)可視化的公司，會(huì)在官網(wǎng)展示一些能體現(xiàn)自己業(yè)務(wù)特點(diǎn)、業(yè)務(wù)實(shí)力的案例，而這些案例就是這些企業(yè)最好的數(shù)據(jù)可視化設(shè)計(jì)作品了，沒有人會(huì)在自己的臉上放垃圾上去，對(duì)不？ 所以但凡有案例展示的官網(wǎng)，案例基本都是最典型最好的設(shè)計(jì)，所以從這些案例中找靈感，也是一個(gè)有意思且有效的方法和途徑。

△ 阿里DataV

△ Hightopo

△ Tob.Design

第三部分：獨(dú)立設(shè)計(jì)師或工作室

獨(dú)立設(shè)計(jì)師一般給人的感覺是什么呢？就是在自己垂直的領(lǐng)域內(nèi)牛逼，近乎神一樣的存在。獨(dú)立設(shè)計(jì)師要能順利「獨(dú)立」，當(dāng)然是在設(shè)計(jì)能力、個(gè)人品牌建設(shè)、客戶維護(hù)、運(yùn)營管理等方面都有比較硬核的水準(zhǔn)，所以這部分設(shè)計(jì)師作品一般不會(huì)差。而工作室一般都是一個(gè)或者幾個(gè)知名設(shè)計(jì)師組成的團(tuán)隊(duì)，在管理方面更「公司化」一些，這樣的工作產(chǎn)出也會(huì)比較穩(wěn)定，水平較高。就可視化（包括類可視化）領(lǐng)域來講，個(gè)人比較認(rèn)可和喜歡的工作室有以下幾個(gè)（歡迎大家評(píng)論里補(bǔ)充，或參與文末問卷調(diào)查），Ta 們的作品風(fēng)格鮮明，找靈感也是不錯(cuò)的參考

△ dennisschafer

△ huds+guis

以上對(duì)于「去哪兒搜」的分析，我相信可以給大家很好的啟發(fā)：我們?cè)O(shè)計(jì)師尋找好的作品并不一定要通過設(shè)計(jì)相關(guān)網(wǎng)站進(jìn)行，你看大家都能看到的東西，即使有突破，那也是大家所熟悉的樣子，你只有從圈子里跳出去，看 80% 的人看不到的東西，你的靈感才有機(jī)會(huì)與眾不同，標(biāo)新立異。

靈感庫建立的第三步：怎么搜？

前面兩部分，我們介紹了搜什么（關(guān)鍵詞的定義），去哪兒搜（合適的素材來源），接下來以 behance 為例跟大家聊聊怎么搜，介紹一些具體的方法。我們的目標(biāo)是盡可能少的點(diǎn)擊搜索按鈕，且盡可能多的找到符合自己預(yù)期的有質(zhì)量的作品。要做到這點(diǎn)，首先我改掉自己以往的不好的搜索習(xí)慣。

我知道很多小伙伴都是輸入一個(gè)關(guān)鍵詞，然后看結(jié)果頁，沒有滿意的就換一個(gè)關(guān)鍵詞繼續(xù)，這樣做很低效，容易漏掉結(jié)果頁中符合你預(yù)期的好作品，并且也容易造成關(guān)鍵詞的浪費(fèi)，通過第一部分關(guān)鍵詞矩陣的介紹，大家都知道，關(guān)鍵詞是被定位推導(dǎo)而來的，若不停的換關(guān)鍵詞，很快就會(huì)出現(xiàn)關(guān)鍵詞用完了但是依然沒有找到好靈感的囧局，所以榨干每一個(gè)關(guān)鍵詞是搜索的重要手段，具體怎么做到這一點(diǎn)，我個(gè)人有以下思路給大家參考：

1. 直搜關(guān)鍵詞

快速瀏覽、標(biāo)記自己感興趣的項(xiàng)目，稍后再做整理

通過這個(gè)結(jié)果頁面我們看到，搜索結(jié)果包含「所有結(jié)果、項(xiàng)目、人物、情緒板」四個(gè)選項(xiàng)，默認(rèn)顯示所有結(jié)果，但這個(gè)意義不大，重點(diǎn)在項(xiàng)目跟情緒板。

項(xiàng)目

切換到項(xiàng)目標(biāo)簽，項(xiàng)目標(biāo)簽下展示的都是完整的項(xiàng)目作品，這是可以快速瀏覽，看到感興趣的內(nèi)容就把它標(biāo)記到新的頁面，等所有瀏覽查看結(jié)束后再細(xì)看每個(gè)項(xiàng)目，并對(duì)項(xiàng)目做進(jìn)一步的分類和整理。

項(xiàng)目標(biāo)簽下提供的篩選項(xiàng)很實(shí)用，分類依據(jù)推薦「好評(píng)最多+本月」的組合，以月為單位既可選到大家都比較認(rèn)可的新作品也避免了因數(shù)據(jù)波動(dòng)造成部分作品質(zhì)量差的情況?！敢巡哒埂诡愃普究峄?UI 中國的首頁推薦，是被官方編輯認(rèn)可和推薦的作品，一般都會(huì)有很高的質(zhì)量，但時(shí)間上可能會(huì)比較久遠(yuǎn)。

在篩選器里面，有另一個(gè)比較實(shí)用的功能叫做「按色彩篩選」，如果客戶或者業(yè)務(wù)方對(duì)主色調(diào)有要求，就可以通過色彩的篩選，找到更符合我們業(yè)務(wù)需求的相關(guān)作品借鑒，或者設(shè)計(jì)師自己對(duì)某類顏色的搭配總是調(diào)整不好，也可以通過篩選，看看其它同行是如何處理這類色彩的，這也是一個(gè)有針對(duì)性訓(xùn)練和學(xué)習(xí)的方法。

情緒版

情緒版就是花瓣里的畫板，它是其 Ta 設(shè)計(jì)師采集的同類主題的作品合集，用法也跟花瓣一模一樣，唯一的不同是花瓣可以采集站外的內(nèi)容到畫板，而behance 只能采集站內(nèi)的內(nèi)容，其余兩者完全一致。

情緒版默認(rèn)是按時(shí)間的先后順序排列，所以可以通過篩選項(xiàng)，將排列順序調(diào)整為「關(guān)注人數(shù)最多」，正常來講，關(guān)注人數(shù)越多的情緒版收集的作品質(zhì)量也越高。

2. 利用作品標(biāo)簽聚合同一主題作品，并集中瀏覽

我們知道，像站酷、UI 中國等平臺(tái)，用戶上傳作品時(shí)，都需要給作品添加一些標(biāo)簽，這些標(biāo)簽的作用就是幫助網(wǎng)站做人工的作品分類，我們點(diǎn)擊某一標(biāo)簽就能看到使用了同一標(biāo)簽的所有作品，可以說標(biāo)簽是比搜索關(guān)鍵詞的內(nèi)容檢索手段。每一個(gè)作品下，都顯示了作者上傳作品時(shí)填寫的標(biāo)簽，通過點(diǎn)擊這些標(biāo)簽我們將搜索結(jié)果引入到了另一個(gè)更純粹有效的內(nèi)容領(lǐng)域。

更有趣的是，標(biāo)簽同樣支持項(xiàng)目、情緒版這兩個(gè)層面的進(jìn)一步分類，同時(shí)也支持之前介紹過得分類篩選功能。也就是說，在最開始搜索時(shí)找準(zhǔn)一個(gè)關(guān)鍵詞，之后通過情緒板、作品標(biāo)簽等方式就能關(guān)聯(lián)起來海量的內(nèi)容。

3. 按圖索驥：Ta推薦的作品

通過前兩步，我們已找到了一些比較不錯(cuò)的作品，而優(yōu)秀作品的背后當(dāng)然是優(yōu)秀的設(shè)計(jì)師或團(tuán)隊(duì)。所以點(diǎn)進(jìn)作者的主頁看，一般都會(huì)有驚喜的。除了能看到作者自己的作品外，我想說的是另一個(gè)標(biāo)簽「好評(píng)」，好評(píng)這個(gè)標(biāo)簽其實(shí)體現(xiàn)了作者的審美和職業(yè)方向，如果作者本人在領(lǐng)域內(nèi)已經(jīng)足夠?qū)I(yè)，那么能被 Ta 欣賞和點(diǎn)贊的作品大概率也不會(huì)差，所以好評(píng)這個(gè)按鈕，是借助行業(yè)大咖的手幫我們做了一次作品的篩選和收集，點(diǎn)這個(gè)標(biāo)簽進(jìn)去大多數(shù)時(shí)候是不會(huì)讓你失望的，一般都驚喜滿滿。

4. Ta關(guān)注的設(shè)計(jì)師：順藤摸瓜，串起一個(gè)行業(yè)的大咖

在今天，每個(gè)設(shè)計(jì)師離自己領(lǐng)域里最頂尖的大咖，只隔著 3.75 個(gè)人，通過點(diǎn)擊作者的「正在關(guān)注」，你可以看到設(shè)計(jì)師本人還關(guān)注了行業(yè)里的哪些設(shè)計(jì)師，通過這樣的操作 3 到 4 次，你會(huì)發(fā)現(xiàn)總有那么幾個(gè)人，會(huì)在這個(gè)略顯復(fù)雜的網(wǎng)絡(luò)中被不同的大咖同時(shí)關(guān)注，那么 Ta 就是這個(gè)行業(yè)里比較頂尖的人才了。

在「正在關(guān)注」下面會(huì)顯示作者所在團(tuán)隊(duì)，因?yàn)楹枚囗?xiàng)目其實(shí)一個(gè)人是很難完成的，大都是好幾個(gè)設(shè)計(jì)師協(xié)作的結(jié)果，所以如果你找到的這個(gè)設(shè)計(jì)師作品足夠牛逼，那說明他的團(tuán)隊(duì)也是很不錯(cuò)的，順便關(guān)注一波就好。

當(dāng)你習(xí)慣這樣摸瓜，一段時(shí)間后這個(gè)行業(yè)里幾乎的大咖就都在你的關(guān)注列表里了，做到這一步后你就會(huì)有一個(gè)新的收獲，這點(diǎn)我們后面再聊。

搜索結(jié)果的整理與優(yōu)化

利用前面的搜索方式，我們已經(jīng)找到了不少較為滿意的作品，接下來我們需要再對(duì)這些作品做簡單的篩選整理，把真正符合我們需求的作品整理出來。

我習(xí)慣用網(wǎng)站自帶的收藏功能及部分精品資源本地收藏的方式來整理自己的靈感庫。網(wǎng)站的情緒板我把它看作是一個(gè)各個(gè)終端通用的網(wǎng)盤。behance 提供了兩個(gè)收藏作品的功能：點(diǎn)贊與保存到情緒版。站酷跟 ui 中國也有同樣的功能。

點(diǎn)贊的作品，會(huì)統(tǒng)一收集到個(gè)人主頁「點(diǎn)贊」標(biāo)簽下，所有作品按時(shí)間排列，比較亂，所以推薦把喜歡的作品收集到情緒板。建立情緒板可以按類別將作品整理到不同畫板，由于情緒板是可以分享和被搜索的，所以使用情緒板整理靈感，不僅方便了自己，也益于同行。目前來看，情緒板在 behance 這個(gè)產(chǎn)品中已經(jīng)跟花瓣中的畫板非常像了，不僅可以采集一個(gè)完整的作品到情緒板，也可以采集作品中某個(gè)單獨(dú)的圖片或視頻到情緒板，這樣的靈活性跟花瓣完全一致，且 behance 將情緒板被放到了用戶非常容易觸達(dá)的位置，所以在大家的共同努力下，各類情緒板會(huì)越來越豐富，這個(gè)功能也會(huì)更有價(jià)值。

資源的自我更新與迭代

1. 資源的自我更新

經(jīng)常玩抖音的小伙伴都知道，抖音會(huì)根據(jù)你的點(diǎn)贊、瀏覽等行為，為你推薦符合個(gè)人口味的視頻，而這樣的推薦功能在 behance 也有，behance 會(huì)根據(jù)你點(diǎn)贊收藏的作品、你關(guān)注的人，給你推薦相應(yīng)作品，并且推薦作品是直接顯示在首頁的，每次打開 behance，你都會(huì)在網(wǎng)站最直觀的位置看到 behance 為你推薦的內(nèi)容，這里的內(nèi)容大體上分為兩類，一類是你關(guān)注的設(shè)計(jì)師的作品更新，另一部分基于已經(jīng)關(guān)注的作者推薦相似的作品給你，就我個(gè)人使用體驗(yàn)來講，推薦還是相當(dāng)準(zhǔn)確的。

behance 的推薦功能是資源自我更新的一個(gè)重要手段，你關(guān)注的同一領(lǐng)域作者越多，收藏的作品越多，它的推薦就越準(zhǔn)確，這樣就節(jié)省了一些資源搜索的時(shí)間成本。要想獲得好的推薦結(jié)果，我建議你的 behance 上只關(guān)注一個(gè)領(lǐng)域的作者和作品，以我自己為例，我只關(guān)注數(shù)據(jù)可視化方向的作者和作品，雖然我也喜歡攝影、插畫等，但我主業(yè)是數(shù)據(jù)可視化，所以為了提高首頁推薦作品質(zhì)量，其它兩類我會(huì)去 500px 等更垂直的網(wǎng)站瀏覽，而不會(huì)在 behance 上關(guān)注。當(dāng)然，網(wǎng)站只是個(gè)工具，你也可以有自己的用法，于我而言，我關(guān)注的核心是效率。

2. 資源的迭代

如果把我們收藏的內(nèi)容比作是云盤里的資源，那么資源并不是越多越好，無論哪種類型的內(nèi)容，當(dāng)內(nèi)容很多的時(shí)候找起來都會(huì)比較麻煩的。我們需要堅(jiān)持做一些工作來不斷減少資源的數(shù)量提高資源的質(zhì)量，少而精是最好的狀態(tài)，如此我們就不需要花很多時(shí)間去找某個(gè)內(nèi)容，而已有的內(nèi)容又都能很好的滿足需求。要做到這點(diǎn)，我們需要給資源做迭代，所謂迭代就是去掉舊的過時(shí)的內(nèi)容，添加新的更好的。每隔一段時(shí)間，回來翻一翻自己之前收藏的作品，會(huì)發(fā)現(xiàn)有些作品自己已經(jīng)看不上了，因?yàn)樵谧鲮`感收集的過程中，我們的審美會(huì)自然有所提高，當(dāng)輸入的作品樣本越來越多，我們對(duì)作品評(píng)價(jià)的維度也會(huì)更多，之前那些覺得好的作品，現(xiàn)在看來也就會(huì)有缺陷和不滿，這是一個(gè)很正向的結(jié)果，成長就是一個(gè)不斷剔除的過程。刪掉那些自己覺得不滿意的作品，添加更符合自己當(dāng)前審美的作品到各個(gè)情緒版。

迭代還意味著我們需要對(duì)那些情緒版的標(biāo)簽做維護(hù)，對(duì)那些命名跟內(nèi)容不大匹配的情緒板，要及時(shí)更新更恰當(dāng)?shù)拿Ｍ瑫r(shí)，也要對(duì)情緒板內(nèi)容的類別做維護(hù)，比如動(dòng)畫、視頻類素材最好不要跟圖片類素材放一起，因?yàn)榱斜淼姆饷鎴D并不能體現(xiàn)作品詳情里是否包含視頻等內(nèi)容，所以作品很多時(shí)找起來就比較麻煩，按內(nèi)容的不同類型把內(nèi)容分別收納進(jìn)不同的情緒版可以給我們后續(xù)的應(yīng)用節(jié)省不少時(shí)間。

總結(jié)

1. behance在國內(nèi)訪問受限，為何要以它為例做靈感收集的方法介紹？

首先，Behance 國內(nèi)訪問不暢，并不影響它是世界范圍最優(yōu)秀的設(shè)計(jì)師聚集平臺(tái)的事實(shí)。對(duì)于數(shù)據(jù)可視化而言，并不是一個(gè)新興的領(lǐng)域，在國外早已有之，并且相對(duì)成熟，而國內(nèi)相關(guān)作品、經(jīng)驗(yàn)尚少，所以從獲取知識(shí)的角度來看，behance 上你能獲取到的數(shù)據(jù)可視化相關(guān)作品或內(nèi)容，不管是數(shù)量還是質(zhì)量上，都要比國內(nèi)的好。

其次，正如文章剛開始我說的那樣，文中介紹的方法對(duì)國內(nèi)的大部分設(shè)計(jì)網(wǎng)站同樣適用，尤其是關(guān)鍵詞的定義、標(biāo)簽的使用、收藏及情緒板（畫板）的使用技巧。綜上，我當(dāng)然是要介紹「更好」的靈感獲取網(wǎng)站給大家，而不是揪著大家熟悉的聊。

2. 我自己也收集研究了不少優(yōu)秀作品，為何做的時(shí)候還是不知道如何下手？

毋庸置疑，優(yōu)秀的作品建立在良好的審美基礎(chǔ)之上，好的作品看多了審美自然會(huì)有提升，但審美有了為啥還是做不出符合自己期望的作品來。這塊有兩個(gè)問題，一個(gè)是刻意練習(xí)的度沒到，另一個(gè)是不會(huì)分析別人好的作品?？桃饩毩?xí)聽名字就知道是什么意思，而作品分析就是我們要知道一個(gè)作品之所以讓人眼前一亮，它「亮」在什么地方，就是要具體到細(xì)節(jié)，我們?cè)绞悄軌蚣?xì)致的指出那些讓你覺得好的點(diǎn)，就越能模仿和借鑒，之后再輔以大量的刻意練習(xí)，才會(huì)有效果明顯的提升。

文章來源：優(yōu)設(shè)

本文的英文原標(biāo)題是「10 Rules of Dashboard Design」，其中 Dashboard 如果翻譯成儀表盤的話，總覺得不大容易理解，所以我在這里把它翻譯為數(shù)據(jù)可視化。數(shù)據(jù)展示方面的設(shè)計(jì)，相信大家會(huì)經(jīng)常用到，這篇文章有很多簡單直接，立馬就能用上的干貨，一起來學(xué)習(xí)吧！

為什么數(shù)據(jù)可視化設(shè)計(jì)非常重要？

數(shù)據(jù)可視化的目的是以一種用戶更容易理解的形式呈現(xiàn)復(fù)雜信息。

一個(gè)優(yōu)秀的數(shù)據(jù)可視化界面包含以下幾個(gè)關(guān)鍵要素：

• 清晰：一個(gè)好的數(shù)據(jù)可視化界面一定是能夠清晰的展現(xiàn)用戶所需要的信息。當(dāng)用戶看到界面內(nèi)容時(shí)，應(yīng)該能在 5 秒內(nèi)了解到它的用途，而不是花費(fèi)至少幾分鐘才能理解各個(gè)數(shù)據(jù)的含義。
• 有意義： 一個(gè)有用的數(shù)據(jù)可視化界面上的每一條信息都應(yīng)該是有意義的。這些有意義的信息能準(zhǔn)確傳達(dá)設(shè)計(jì)師想要表達(dá)的內(nèi)容。每一條數(shù)據(jù)的背后，用戶都是可以讀懂的。
• 一致性：優(yōu)秀的數(shù)據(jù)可視化界面，會(huì)有一套非常嚴(yán)謹(jǐn)一致的版面。這里的一致性需要考慮到布局，結(jié)構(gòu)和內(nèi)容。
• 簡單： 復(fù)雜的界面違背了數(shù)據(jù)可視化設(shè)計(jì)的初衷。如果一個(gè)信息呈現(xiàn)不夠簡單直接，那么肯定是在設(shè)計(jì)上出現(xiàn)了問題。

如何設(shè)計(jì)一個(gè)數(shù)據(jù)可視化界面？

數(shù)據(jù)可視化界面設(shè)計(jì)最重要的步驟是需要了解目標(biāo)用戶是誰，能為他們提供什么價(jià)值。了解目標(biāo)受眾的知識(shí)背景和理解水平能幫助你做出對(duì)他們有價(jià)值的設(shè)計(jì)。

在了解目標(biāo)用戶時(shí)，有必要了解受眾感興趣的數(shù)據(jù)類型。

「專注于用戶的需求，更容易產(chǎn)生他們喜歡使用的結(jié)果?！?

目標(biāo)用戶級(jí)別可能會(huì)在一級(jí)和另一級(jí)之間變化，這是一個(gè)挑戰(zhàn)性的點(diǎn)。與其他任何設(shè)計(jì)項(xiàng)目一樣，可以細(xì)分受眾并將信息相應(yīng)地分為基本內(nèi)容和高級(jí)內(nèi)容。

在界面中表示一組信息有多種方法，選擇正確的數(shù)據(jù)指標(biāo)是設(shè)計(jì)數(shù)據(jù)可視化的另一個(gè)關(guān)鍵元素。這也與目標(biāo)用戶的偏好有關(guān)，即他們希望看到什么樣的信息。

「根據(jù)需要設(shè)計(jì)數(shù)據(jù)可視化界面，為不同的業(yè)務(wù)使用不同類型的展示方式?！?

下面是為目標(biāo)用戶設(shè)計(jì)數(shù)據(jù)可視化界面時(shí)需要考慮的一些重要規(guī)則。

1. 區(qū)分層級(jí)

一個(gè)常見的錯(cuò)誤就是設(shè)計(jì)師沒有對(duì)信息區(qū)分層級(jí)，所有的內(nèi)容看起來都一樣重要。

可以嘗試使用組件的大小和位置來區(qū)分?jǐn)?shù)據(jù)的層次結(jié)構(gòu)。

• 通過定義信息層級(jí)，讓用戶清楚什么是最重要的
• 在左上角顯示更重要的信息，沿著對(duì)角線方向，信息的重要程度應(yīng)該依次減弱，右下角的信息重要性最弱
• 還可以將信息劃分為不同類別，并在不同的視圖中顯示它們

2. 簡單易懂

數(shù)據(jù)可視化的真正目的是用一種更方便理解，更簡單的形式來傳達(dá)復(fù)雜信息。

• 不要放一些大多數(shù)用戶都難以理解的信息
• 使用更少的列來顯示信息
• 刪除冗余內(nèi)容來減少混亂

3. 一致性

使用一致性布局設(shè)計(jì)的數(shù)據(jù)可視化界面看起來更好。

• 為了使界面更容易閱讀，可以在信息組之間使用類似的可視化效果。
• 把相關(guān)的信息放的更近一些
• 對(duì)相關(guān)內(nèi)容進(jìn)行可視化分組

4. 臨近原則

在界面中把相近的信息放在一起可以幫助用戶快速理解。

• 把相關(guān)的信息放的更近一些
• 不要將相關(guān)信息分散在界面上
• 對(duì)相關(guān)內(nèi)容進(jìn)行可視化分組

想更深入了解接近原則，看這篇：

5. 對(duì)齊

可視化組件元素需要在視覺上對(duì)齊，并保持視覺平衡。

• 將可視化組件元素在視覺上進(jìn)行對(duì)齊，可以將界面組織的更好
• 嘗試將組件元素進(jìn)行網(wǎng)格布局設(shè)計(jì)
• 不對(duì)齊的界面會(huì)給用戶帶來糟糕的體驗(yàn)

6. 留白

留白是為了讓界面有呼吸感，它使得用戶在使用你的界面時(shí)能夠有喘息的空間。

• 當(dāng)用戶查看需要的信息時(shí)，界面中的留白能夠吸引用戶的目光，提升用戶體驗(yàn)。
• 減少留白會(huì)使用戶的界面變得混亂
• 使用留白能對(duì)信息進(jìn)行可視化分組

△ 留白太少簡直就是在鼓勵(lì)你的用戶盡快離開

7. 顏色

使用有效的配色方案來吸引用戶的注意力，幫助他們輕松地瀏覽信息。

• 仔細(xì)選擇顏色，目標(biāo)是使內(nèi)容易于閱讀
• 使用大對(duì)比度來顯示背景上的視覺元素

△ 避免使用低對(duì)比度和低效的漸變

8. 字體

標(biāo)準(zhǔn)字體是可視化界面中的最佳字體，除非有特別的理由，一般不要用其他字體。

• 使用標(biāo)準(zhǔn)字體，因?yàn)樗鼈兏菀组喿x和掃描
• 特別和美術(shù)字體可能看起來不錯(cuò)，但很難理解
• 避免所有的大寫字母文字，因?yàn)樗茈y閱讀，人類的大腦需要時(shí)間來消化它。
• 使用合適的字體大小和風(fēng)格，有效地傳達(dá)信息

△ 不要使用影響可讀性的字體

9. 數(shù)字排版

顯示精度超過要求的數(shù)字使它們難以閱讀和理解。

• 必要時(shí)使用整數(shù)，因?yàn)殚L數(shù)字會(huì)使用戶混淆
• 省去不必要的信息
• 讓用戶能夠容易地比較簡單的差異細(xì)節(jié)

10. 標(biāo)簽

使用能夠快速有效地向用戶傳達(dá)所需信息的標(biāo)簽。

• 避免使用帶旋轉(zhuǎn)的標(biāo)簽，因?yàn)楹茈y閱讀
• 盡可能的使用標(biāo)準(zhǔn)的縮寫

△ 避免旋轉(zhuǎn)標(biāo)簽

總結(jié)

數(shù)據(jù)可視化旨在節(jié)省時(shí)間和精力，將復(fù)雜和抽象的數(shù)據(jù)以更簡單的形式表示，目的是以用戶能夠理解的方式將關(guān)鍵信息傳達(dá)給他們，確保自己理解用戶所需，并給他們需要的信息。

文章來源：優(yōu)設(shè)

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

電視 UI 算得上是一個(gè)偏冷門的界面設(shè)計(jì)，因?yàn)樗慕换ケ容^特殊，同時(shí)有一些限制，比如交互限制，焦點(diǎn)原則等等。以下就自己的項(xiàng)目經(jīng)驗(yàn)為電視 UI 設(shè)計(jì)原則做一個(gè)總結(jié)。

智能電視的特性

對(duì)于現(xiàn)在家庭智能電視而言，技術(shù)在不斷的進(jìn)步，但是其飽和度和對(duì)比度有的還是很強(qiáng)，還會(huì)遇到大紅碰到大紫的色塊對(duì)比。但是信息變得簡約了，都是以 tab 導(dǎo)航為主，下面是幾個(gè)卡片信息瀑布流顯示。語音提示很重要，會(huì)隨著焦點(diǎn)的移動(dòng)發(fā)出提示聲響，提示用戶電視焦點(diǎn)的移動(dòng)狀態(tài)。

小米電視商城全新改版，在接到需求后，一定要模擬用戶來體驗(yàn)一下購物流程還有用電視購物的環(huán)境，環(huán)境應(yīng)該是固定的，那就是在家里。電視和手機(jī)購物體驗(yàn)是不一樣的，電視是要用遙控器來控制，所以每一步的操作流程都很珍貴，如果界面跳轉(zhuǎn)太多，會(huì)給用戶一種煩躁的感覺，所以盡量同一層級(jí)的信息要在同一界面填寫完畢，避免二次跳轉(zhuǎn)。

第二點(diǎn)說的就是焦點(diǎn)問題，焦點(diǎn)不能層次不齊，跳動(dòng)太大會(huì)引起視覺不適。以小米電視商城詳情為例，焦點(diǎn)盡量在同一水平線上，同行的焦點(diǎn)移動(dòng)，視覺感受上會(huì)舒服很多。

設(shè)計(jì)尺寸

智能電視的分辨率和大家平常在 app 看電影的時(shí)候差不多，如上圖所示，目前 1080p 最常見，2k 和 4k 基本都是資源類節(jié)目。設(shè)計(jì)尺寸以小米電視為例，通常做 1920*1080 的視覺稿就可以了，開發(fā)會(huì)適配比 1920*1080 小的電視屏幕，這樣下來，如果小分辨率的電視沒問題了，大的分辨率也就沒問題了。

我們知道在設(shè)計(jì) app 的時(shí)候，都有左右間距的控制，移動(dòng)端一般常見的控制在 28px 或者 32px，電視端因?yàn)槭谴笃猎O(shè)計(jì)，所以預(yù)留的空間也要大一些，基本左右留出 120px，上面留出 90px 就可以了。一般我設(shè)計(jì)的時(shí)候左右是固定的 120px，上面可以隨設(shè)計(jì)內(nèi)容來自定義，90px 或者 100px，都是可以的，只要視覺舒服即可。

焦點(diǎn)在電視端 UI 設(shè)計(jì)里顯得尤為重要，因?yàn)樗褪悄愕囊曈X焦點(diǎn)，焦點(diǎn)會(huì)隨著遙控器上下左右確認(rèn)而改變。焦點(diǎn)的設(shè)計(jì)不能是扁平的，因?yàn)槟菢硬荒軌蛱嵝延脩艚裹c(diǎn)狀態(tài)的位置，焦點(diǎn)的設(shè)計(jì)應(yīng)該是放大的、夸張的、可以帶邊框，也可以使用投影外發(fā)光的方式來設(shè)計(jì)，確保能夠給用戶足夠的清晰位置。

焦點(diǎn)放大我這里建議放大 1.1 倍或者 1.2 倍就可以了，再大就顯得過于大了。

交互設(shè)計(jì)

如上圖所示，我在設(shè)計(jì)焦點(diǎn)的時(shí)候，就用了放大+外邊框的形式，這樣焦點(diǎn)移動(dòng)起來可以讓用戶足夠看到位置所在。電視端的交互也是很簡單的，基本屬于十字交互，即自上而下，從左到右的交互方式。紅色剪頭屬于禁區(qū)，所有的電視交互，沒有斜 45 度的交互，這樣是錯(cuò)誤的。

大家可以看到，在 app 里，常見的彈窗和浮窗可以壓蓋在可點(diǎn)擊功能上，比如美團(tuán)的紅包，愛奇藝的一鍵關(guān)注，即使是這樣，也不會(huì)影響功能的正常使用。但是電視端的設(shè)計(jì)，如果兩個(gè)可點(diǎn)擊功能壓蓋在一起，焦點(diǎn)是無法獲取的，因?yàn)樗鼪]法判斷你想要選的那個(gè)功能，所以在電視上，一定要將兩個(gè)功能分開來布局最為合適。

露出屏外的內(nèi)容，和移動(dòng)端設(shè)計(jì)是一樣的。如果有多個(gè)卡片內(nèi)容，我們需要將露出屏外的那張卡片做一些邊界化處理，控制好間距，也就是說我們要將一個(gè)完整的卡片漏出來一些，讓用戶知道，后面還有內(nèi)容；反之，用戶可能不知道后面還有內(nèi)容，就不會(huì)按遙控器右鍵查看了。

電視端 UI 設(shè)計(jì)忌諱控件隱藏，比如上圖，如果有很多文字的時(shí)候，左邊的設(shè)計(jì)是錯(cuò)誤的，因?yàn)殡[藏了 button 按鈕。改為右邊的設(shè)計(jì)是比較好的，我們可以選擇焦點(diǎn)選中文字給一個(gè)彈窗狀態(tài)或者其它，將 button 功能位露出來，如果一個(gè)界面可選功能位較少，我們?cè)O(shè)計(jì)的時(shí)候盡量在第一屏展示。如果實(shí)在不行，可以選擇吸底吸邊來設(shè)計(jì)。

視覺設(shè)計(jì)

顏色的選擇運(yùn)用是重中之重，因?yàn)檫@個(gè)會(huì)直接影響到用戶的視覺體驗(yàn)。因?yàn)橛脩舡h(huán)境大多數(shù)是晚上的時(shí)候回去看電視，分開燈和關(guān)燈的情況，開燈的情況其實(shí)還好。如果關(guān)燈，顏色太刺眼的話，飽和度較高的顏色會(huì)直接影響到眼睛，這個(gè)危害是很大的，而且不一樣顏色的色塊，會(huì)增加用戶的視覺負(fù)擔(dān)，這樣就得不償失了。所以我們要避免大面積的使用單一純色或者漸變色。

電視 UI 設(shè)計(jì)中，白色謹(jǐn)慎使用。因?yàn)榘咨^多實(shí)在是太刺眼了，我們可以選中較為灰一些的接近白色的顏色來代替。

背景的運(yùn)用這里也建議使用深色的背景，原因和上述講的一樣，還有一個(gè)就是深色背景可以更好地襯托出界面的主要內(nèi)容。反之如果用淺色的背景，有的卡片如果需求方要求設(shè)計(jì)成淺色，那么這樣淺色的背景+淺色的卡片疊在一起，主要內(nèi)容就特別難區(qū)分了。

我們?cè)谠O(shè)計(jì)電視端 UI 的時(shí)候，要真實(shí)的先去體驗(yàn)一下特殊的場景，電視端每個(gè) tab 是一個(gè)頻道，每個(gè)頻道的設(shè)計(jì)風(fēng)格也是不同的，比如少兒頻道，購物頻道和電影電視劇頻道，設(shè)計(jì)風(fēng)格肯定不同，體驗(yàn)?zāi)M流程可以讓我們更快地了解電視特性。

字體的選擇默認(rèn)思源黑體，因?yàn)檫@個(gè)字體是開源字體，可以免費(fèi)使用，沒有版權(quán)之分，以上列入的字體是小米電視商城改版的字號(hào)，具體的字體和間距可以根據(jù)自己的設(shè)計(jì)需求變化。

關(guān)于字體的選擇，當(dāng)然你也可以選用其它字體，或者一些特殊字體，好看的字體，但是這樣的話，字體包應(yīng)該會(huì)很大，會(huì)影響一些加載速度。

字體顏色的選擇盡量用白色或者亮色，深色背景上選用白色是最好的，這樣更易于閱讀。

字體的粗細(xì)大小，這里標(biāo)題建議加粗選擇，其余選擇常規(guī)字體就好，避免太粗或者太細(xì)的字體。

更好的智能家居體驗(yàn)

電視的設(shè)計(jì)只是其中的一部分，未來我們的電視可能比現(xiàn)在的體驗(yàn)更加好，比如會(huì)出現(xiàn)實(shí)景商城，單一的圖片形式已經(jīng)不能滿足我們對(duì)購物的需求，一些視頻類，動(dòng)效類的體驗(yàn)會(huì)更加合適。想讓電視擁有好的體驗(yàn)并不是一件簡單的事情，想必大家已經(jīng)從諸多「電視盒子」上體驗(yàn)到了這一點(diǎn)。我們?cè)?jīng)熟悉的電視已經(jīng)發(fā)生改變，而我們適應(yīng)的手機(jī)、平板和電腦和新的電視還有著巨大的差別，我們需要忘掉之前熟悉的模式，未來五年、十年、甚至更久。電視、電燈、冰箱洗衣機(jī)等智能家具的體驗(yàn)，正是我們?cè)O(shè)計(jì)師需要在未來幾年所做的事情，這很重要。

小米電視商城全新改版是我接觸的第一個(gè)電視端 UI 設(shè)計(jì)項(xiàng)目，第一期的優(yōu)化還有很多不足，根據(jù)項(xiàng)目經(jīng)驗(yàn)總結(jié)了上面的規(guī)范。以上的基本設(shè)計(jì)規(guī)范掌握后，那么做電視 UI 基本問題不大，大的錯(cuò)誤肯定不會(huì)有了，但是每個(gè)公司的設(shè)計(jì)規(guī)范肯定也有所差別。電視端的設(shè)計(jì)是個(gè)偏冷門的 UI 設(shè)計(jì)，多掌握一些另類項(xiàng)目經(jīng)驗(yàn)也是設(shè)計(jì)師必備的技能。

文章來源：優(yōu)設(shè)網(wǎng)

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

寫在前面

2019年6月18日Material Design更新了設(shè)計(jì)指南中數(shù)據(jù)可視化部分，這是谷歌數(shù)據(jù)可視化團(tuán)隊(duì)形成的一套全面的數(shù)據(jù)可視化指南， 涵蓋了設(shè)計(jì)原則、圖表分類、圖表的選用、樣式設(shè)計(jì)、交互設(shè)計(jì)、儀表板設(shè)計(jì)等方面。個(gè)人閱讀后進(jìn)行了翻譯，希望能夠分享給更多對(duì)數(shù)據(jù)可視化有興趣的設(shè)計(jì)同學(xué)！

全文章節(jié)目錄：

原則

類型

選擇圖表

樣式

行為

儀表板

數(shù)據(jù)可視化

數(shù)據(jù)可視化就是用圖形描繪信息。

原則

數(shù)據(jù)可視化是一種以圖形描繪密集和復(fù)雜信息的表現(xiàn)形式。數(shù)據(jù)可視化的視覺效果旨在使數(shù)據(jù)容易對(duì)比，并用它來講故事，以此來幫助用戶做出決策。

數(shù)據(jù)可視化可以表達(dá)不同類型和規(guī)模的數(shù)據(jù)，包括從幾個(gè)數(shù)據(jù)點(diǎn)到有大量變量的數(shù)據(jù)集。

類型

數(shù)據(jù)可視化可以以不同的形式表達(dá)。圖表是表達(dá)數(shù)據(jù)的常用方式，因?yàn)樗鼈兡軌蛘故竞蛯?duì)比多種不同的數(shù)據(jù)。

圖表類型的選擇主要取決于兩點(diǎn)：要表現(xiàn)的數(shù)據(jù)和表現(xiàn)該數(shù)據(jù)的用意。該指南描述各種類型的圖表及其用例。

圖表類型

1. 隨時(shí)間變化

隨時(shí)間變化的圖表顯示一段時(shí)間的數(shù)據(jù)，例如多個(gè)類別之間的趨勢或比較。

常見用例包括：

股價(jià)表現(xiàn)、衛(wèi)生統(tǒng)計(jì)、年表

2. 類別比較

類別比較圖表是多個(gè)不同類別數(shù)據(jù)之間的比較。

常見用例包括：

不同國家的收入、熱門場地時(shí)間、團(tuán)隊(duì)分配

3. 排名

排名圖表顯示項(xiàng)目在有序列表中的位置。

常見用例包括：

選舉結(jié)果、性能統(tǒng)計(jì)

4. 占比

占比類圖表顯示了局部與整體的關(guān)系。

常見用例包括：

產(chǎn)品類別的綜合收入、預(yù)算

5. 關(guān)聯(lián)

關(guān)聯(lián)類圖表顯示兩個(gè)或以上變量之間的關(guān)系。

常見用例包括：

收入和預(yù)期壽命

6. 分布

分布類圖表顯示每個(gè)值在數(shù)據(jù)集中出現(xiàn)的頻率。

常見用例包括：

人口分布、收入分布

7. 流程

流程類圖表顯示了多個(gè)狀態(tài)之間的數(shù)據(jù)移動(dòng)。

常見用例包括：

資金轉(zhuǎn)移、投票計(jì)數(shù)和選舉結(jié)果

8. 關(guān)系

關(guān)系圖表顯示多個(gè)項(xiàng)目之間的關(guān)系。

常見用例包括：

社交網(wǎng)絡(luò)、詞圖

選擇圖表

面對(duì)多種類型的圖表，以下指南提供了關(guān)于如何選擇合適的圖表見解。

顯示隨時(shí)間的變化

可以使用時(shí)間序列圖表來表示隨時(shí)間的變化，就是按時(shí)間順序表示數(shù)據(jù)點(diǎn)的圖表。表示隨時(shí)間變化的圖表包括：折線圖，柱狀圖（條形圖）和面積圖。

*基線值是y軸上的起始值。

柱狀圖（條形圖）和餅圖

柱狀圖（條形圖）和餅圖都可用于顯示比例，表示部分與總體的對(duì)比。

· 柱狀圖（條形圖）使用共同的基線，通過條形長度表示數(shù)量

· 餅圖使用圓的圓弧或角度表示整體的一部分

柱狀圖（條形圖），折線圖和堆疊面積圖在顯示隨時(shí)間的變化方面比餅圖更有效地。由于這三個(gè)圖表都是使用相同的基線，因此可以更輕松地根據(jù)條形長度比較值的差異。

面積圖

面積圖有多種類型，包括堆疊面積圖和層疊面積圖：

· 堆疊面積圖顯示多個(gè)時(shí)間序列（在同一時(shí)間段內(nèi)）堆疊在一起

· 層疊面積圖顯示多個(gè)時(shí)間序列（在同一時(shí)間段內(nèi)）重疊在一起

層疊面積圖建議不要使用超過兩個(gè)時(shí)間序列，因?yàn)檫@樣做會(huì)使數(shù)據(jù)模糊不清。取而代之，應(yīng)當(dāng)使用堆疊面積圖來比較一個(gè)時(shí)間間隔內(nèi)的多個(gè)值（橫軸表示時(shí)間）。

樣式

數(shù)據(jù)可視化使用自定義樣式和形狀，使數(shù)據(jù)更容易理解，以適合用戶需求。

圖表可以從以下方面進(jìn)行優(yōu)化：

· 圖形元素

· 文字排版

· 圖標(biāo)

· 軸和標(biāo)簽

· 圖例和注釋

不同類型數(shù)據(jù)的樣式設(shè)計(jì)

可視化編碼是將數(shù)據(jù)轉(zhuǎn)換為可視形式的過程。獨(dú)特的圖形屬性可應(yīng)用于定量數(shù)據(jù)（如溫度，價(jià)格或速度）和定性數(shù)據(jù)（如類別，風(fēng)味或表達(dá)式）。

這些圖形屬性包括：

· 形狀

· 顏色

· 大小

· 面積

· 體積

· 長度

· 角度

· 位置

· 方向

· 密度

不同屬性的表現(xiàn)

多個(gè)視覺處理方法可以綜合應(yīng)用于數(shù)據(jù)點(diǎn)的多個(gè)方面。例如，在條形圖中，條形顏色可以表示類別，而條形長度可以表示值（如人口數(shù)量）。

形狀可用于表示定性數(shù)據(jù)。在此圖表中，每個(gè)類別由特定形狀（圓形，正方形和三角形）表示，這樣可以在一張圖表中輕松實(shí)現(xiàn)特定范圍的比較，同時(shí)也可以進(jìn)行類別之間比較。

1. 形狀

圖表可以運(yùn)用形狀，以多種方式展示數(shù)據(jù)。形狀的設(shè)計(jì)可以是有趣的、曲線的，或者和高保真的等等。

形狀程度

圖表可以展示不同精度程度的數(shù)據(jù)。用于細(xì)致研究的數(shù)據(jù)應(yīng)該用適合交互的形狀（在觸摸大小和功能可見性方面）展示。而旨在表達(dá)一般概念或趨勢的數(shù)據(jù)可以使用細(xì)節(jié)較少的形狀。

2. 顏色

顏色可用于以四種主要方式區(qū)分圖表數(shù)據(jù)：

· 區(qū)分類別

· 表示數(shù)量

· 突出特定數(shù)據(jù)

· 表示含義

顏色區(qū)分類別

例：圓環(huán)圖中，顏色用于表示類別。

顏色表示數(shù)量

例：地圖中，顏色用于表示數(shù)據(jù)值。

顏色突出數(shù)據(jù)

例：散點(diǎn)圖中，顏色用于突出特定數(shù)據(jù)。

重點(diǎn)區(qū)域

在不濫用的情況下，顏色可以突出焦點(diǎn)區(qū)域。不建議大量使用高亮顏色，因?yàn)樗鼈儠?huì)分散用戶注意力，影響用戶的專注力。

顏色表示含義

無障礙

為了適應(yīng)看不到顏色差異的用戶，您可以使用其他方法來強(qiáng)調(diào)數(shù)據(jù)，例如高對(duì)比度著色，形狀或紋理。

將文本標(biāo)簽應(yīng)用于數(shù)據(jù)還有助于說明其含義，同時(shí)消除對(duì)圖例的需求。

3. 線

圖表中的線可以表示數(shù)據(jù)的特性，例如層次結(jié)構(gòu)，突出和比較。線條可以有多種不同的樣式，例如點(diǎn)劃線或不同的不透明度。

線可以應(yīng)用于特定元素，包括：

· 注釋

· 預(yù)測元素

· 比較工具

· 可靠區(qū)間

· 異常

4. 文字排版

文本可用于不同的圖表元素，包括：

· 圖表標(biāo)題

· 數(shù)據(jù)標(biāo)簽

· 軸標(biāo)簽

· 圖例

圖表標(biāo)題通常是具有最高層次結(jié)構(gòu)的文本，軸標(biāo)簽和圖例具有級(jí)別的層次結(jié)構(gòu)。

字重

標(biāo)題和字重的變化可以表達(dá)內(nèi)容在層次結(jié)構(gòu)中的重要程度。但是應(yīng)該保持克制，使用有限的字體樣式。

5. 圖標(biāo)

圖標(biāo)可以表示圖表中不同類型的數(shù)據(jù)，并提高圖表的整體可用性。

圖標(biāo)可用于：

· 分類數(shù)據(jù)：用于區(qū)分組或類別

· UI控件和操作：例如篩選，縮放，保存和下載

· 狀態(tài)：例如錯(cuò)誤，空狀態(tài)，完成狀態(tài)和危險(xiǎn)

在圖表中使用圖標(biāo)時(shí)，建議使用通用可識(shí)別符號(hào)，尤其是在表示操作或狀態(tài)時(shí)，例如：保存，下載，完成，錯(cuò)誤和危險(xiǎn)。

6. 坐標(biāo)軸

一個(gè)或多個(gè)坐標(biāo)軸顯示數(shù)據(jù)的比例和范圍。例如，折線圖沿水平和垂直坐標(biāo)軸顯示一系列值。

柱狀圖（條形圖）基線

柱狀圖（條形圖）應(yīng)從為零的基線（y軸上的起始值）開始。從不為零的基線開始可能導(dǎo)致數(shù)據(jù)被錯(cuò)誤地理解。

坐標(biāo)軸標(biāo)簽

標(biāo)簽的設(shè)計(jì)應(yīng)體現(xiàn)圖表中最重要的數(shù)據(jù)。應(yīng)根據(jù)需要使用標(biāo)簽，并在UI中保持一致性。他們的出現(xiàn)不應(yīng)該妨礙查看圖表。

文字方向

為便于閱讀，文本標(biāo)簽應(yīng)水平放置在圖表上。

文字標(biāo)簽不應(yīng)該：

· 旋轉(zhuǎn)

· 垂直堆疊

7. 圖例和注釋

圖例和注釋描述了圖表的信息。注釋應(yīng)突出顯示數(shù)據(jù)點(diǎn)，數(shù)據(jù)異常值和任何值得注意的內(nèi)容。

1. 注釋

2. 圖例

在PC端，建議在圖表下方放置圖例。在移動(dòng)端，將圖例放在圖表上方，以便在交互過程中保持可見。

標(biāo)簽和圖例

在簡單圖表中，可以使用直接標(biāo)簽。在密集的圖表（或更大的圖表組的一部分）中，可以用圖例。

8. 小顯示屏

可穿戴設(shè)備（或其他小屏幕）上顯示的圖表應(yīng)該是移動(dòng)端或PC端圖表的簡化版本。

行為

圖表具有交互模式，使用戶可以控制圖表數(shù)據(jù)。這些模式可以使用戶專注于圖表的特定值或范圍。

以下推薦的交互模式，樣式和效果（如觸覺反饋）可以提高用戶對(duì)圖表數(shù)據(jù)的理解：

漸進(jìn)式披露

提供了按需求逐步展示詳細(xì)信息的明確途徑。

直接操作

允許用戶直接對(duì)UI元素進(jìn)行操作，最大限度地減少屏幕上所需的操作數(shù)量，包括：縮放和平移，分頁和數(shù)據(jù)控件。

改變視角

使一種設(shè)計(jì)可以適用于不同的用戶和數(shù)據(jù)類型，例如數(shù)據(jù)控件和動(dòng)效。

1. 漸進(jìn)式披露

使用漸進(jìn)式披露顯示圖表詳細(xì)信息，允許用戶根據(jù)需要查看特定數(shù)據(jù)點(diǎn)。

2. 縮放和平移

縮放和平移是常用的圖表交互，會(huì)影響用戶對(duì)圖表數(shù)據(jù)深入的研究和探索。

縮放

縮放改變界面顯示的遠(yuǎn)近。設(shè)備類型決定了如何執(zhí)行縮放。

· 在PC端，通過單擊、拖動(dòng)或滾動(dòng)進(jìn)行縮放

· 在移動(dòng)端，通過捏合進(jìn)行縮放

當(dāng)縮放不是主要操作時(shí)，可以通過單擊和拖動(dòng)（在PC端）或雙擊（在移動(dòng)端）來實(shí)現(xiàn)。

平移

平移讓用戶能夠看到屏幕之外的界面。它應(yīng)該合理的展示數(shù)據(jù)的價(jià)值。例如，如果圖表的一個(gè)維度比另一個(gè)維度更重要，則平移的方向可以僅限于該維度。

· 平移通常與縮放功能同時(shí)使用。

· 在移動(dòng)端，平移通常通過手勢實(shí)現(xiàn)，例如單指滑動(dòng)。

3. 分頁

在移動(dòng)端，分頁是一種常見模式，讓用戶通過向右或向左滑動(dòng)來查看上一個(gè)或下一個(gè)圖表。

在移動(dòng)端，用戶可以向右滑動(dòng)以查看前一天。

4. 數(shù)據(jù)控制

可以使用切換控件，選項(xiàng)卡和下拉菜單篩選或改變數(shù)據(jù)。

用戶調(diào)節(jié)控件時(shí)，這些控件還可以顯示指標(biāo)。

切換控件，選項(xiàng)卡和下拉菜單可以更改或篩選數(shù)據(jù)。

5. 動(dòng)效

動(dòng)效可以強(qiáng)化數(shù)據(jù)之間的聯(lián)系，提升交互體驗(yàn)。應(yīng)該有目的地使用運(yùn)動(dòng)（不是裝飾性地），表達(dá)不同狀態(tài)和空間之間的聯(lián)系。

運(yùn)動(dòng)應(yīng)該是合理，平穩(wěn)，反應(yīng)靈敏，不會(huì)妨礙用戶的使用。

在此示例中，圖表數(shù)據(jù)從按天顯示動(dòng)態(tài)切換到按周顯示。轉(zhuǎn)換期間不會(huì)顯示所選日期范圍之外的數(shù)據(jù)，從而降低了復(fù)雜性。

動(dòng)畫能夠體現(xiàn)兩個(gè)不同圖表的相關(guān)性。

6. 空狀態(tài)

圖表數(shù)據(jù)為空的情況下，可以提供相關(guān)數(shù)據(jù)的預(yù)期。

在合適的情況下，可以展示角色動(dòng)畫創(chuàng)造愉悅和鼓勵(lì)。

有特色的動(dòng)畫提升了空狀態(tài)的效果。

儀表板

在稱為儀表板的UI界面中，數(shù)據(jù)可視化通過一系列圖表實(shí)現(xiàn)。多個(gè)獨(dú)立的圖表有時(shí)可以比一個(gè)復(fù)雜的圖表更好地表達(dá)故事。

儀表板設(shè)計(jì)

儀表板的目的應(yīng)在其布局，樣式和交互模式中體現(xiàn)。無論是用來制作演示文稿還是深入研究數(shù)據(jù)，它的設(shè)計(jì)應(yīng)該適合它的使用方式。

儀表板應(yīng)該：

· 突出最重要信息（使用布局）

· 根據(jù)信息層級(jí)確定信息的焦點(diǎn)（使用顏色，位置，大小和視覺權(quán)重）

應(yīng)根據(jù)對(duì)數(shù)據(jù)的需求確定信息的優(yōu)先級(jí)并進(jìn)行安排。在此示例中設(shè)計(jì)儀表板，考慮了以下用戶問題：

1. 需要注意的問題
2. 發(fā)生問題的時(shí)間

3.發(fā)生問題的位置

4.受問題影響的其他變量

1. 分析類儀表板

分析儀類表板讓用戶能夠研究多組數(shù)據(jù)并發(fā)現(xiàn)趨勢。通常，這些儀表板包含能夠深入洞察數(shù)據(jù)的復(fù)雜圖表。

用例包括：

· 隨時(shí)間變化的突出趨勢

· 回答“為什么”和“假設(shè)”的問題

· 預(yù)測

· 創(chuàng)建有深度的報(bào)告

分析類儀表板示例：

· 跟蹤廣告活動(dòng)的收效

· 跟蹤產(chǎn)品在其整個(gè)生命周期中的銷售額和收入

· 隨時(shí)間變化的城市人口趨勢

· 跟蹤隨時(shí)間變化氣候數(shù)據(jù)

分析類儀表板顯示氣候數(shù)據(jù)

2. 操作類儀表板

操作類儀表板旨在回答一組預(yù)設(shè)的問題。它們通常用于完成與監(jiān)控相關(guān)的任務(wù)。

在大多數(shù)情況下，這些類型的儀表板具有一系列關(guān)于當(dāng)前信息的簡單圖表。

用例包括：

· 跟蹤目標(biāo)的當(dāng)前進(jìn)度

· 實(shí)時(shí)跟蹤系統(tǒng)性能

操作類儀表板示例：

· 跟蹤呼叫中心的活動(dòng)，例如呼叫音量，等待時(shí)間，呼叫長度或呼叫類型

· 監(jiān)控在云端應(yīng)用程序的運(yùn)行狀況

· 顯示股市情況

· 監(jiān)控賽車上的遙測數(shù)據(jù)

操作類儀表板顯示設(shè)備存儲(chǔ)指標(biāo)

3. 演示類儀表板

演示類儀表板是為感興趣的主題提供的展示視圖。

這些儀表板通常包括一些小圖表或數(shù)據(jù)卡片，用動(dòng)態(tài)標(biāo)題描述每個(gè)圖表的趨勢和見解。

用例包括：

· 提供關(guān)鍵績效指標(biāo)的總覽

· 創(chuàng)建高級(jí)執(zhí)行情況的概要

演示類儀表板示例：

· 提供投資賬戶績效的總覽

· 提供產(chǎn)品銷售和市場份額數(shù)據(jù)的概要

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

「元辰」數(shù)據(jù)概念控制中心，基于真實(shí)的使用場景和概念的表現(xiàn)手法，打造的企業(yè)及個(gè)人后臺(tái)數(shù)據(jù)管理系統(tǒng)。

主要分為首頁概覽、作品編輯、信息收集、數(shù)據(jù)統(tǒng)計(jì)和常規(guī)配置等，簡單的動(dòng)效使操作回饋有了更好的交互體驗(yàn)，且真實(shí)可依。

-

「元辰」注重真實(shí)的數(shù)據(jù)體驗(yàn)，致力把數(shù)據(jù)信息通過大屏實(shí)時(shí)簡潔、有效的傳達(dá)給使用者。針對(duì)精準(zhǔn)用戶“迅速獲取信息、簡化操作流程、減少學(xué)習(xí)成本”，我們將這些問題作為傳達(dá)的核心要素，一直貫穿始終。

-

歡迎溝通探討、合作交流。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

前言 

注解：

新聞的標(biāo)題跟轉(zhuǎn)發(fā)數(shù)才是觀者關(guān)注的，而來源和時(shí)間就是次要關(guān)注信息，所以視覺上要為觀者分出層級(jí)，這樣不僅能夠使觀者看著更舒適，視覺上也很有層次，不雜亂。

舊版標(biāo)題、來源、時(shí)間、轉(zhuǎn)發(fā)數(shù)、都是相對(duì)于內(nèi)容居中的狀態(tài)，這種排版是不符合表格排版規(guī)則的，簡單的做法就是文字左對(duì)齊，數(shù)字右對(duì)齊，數(shù)字右對(duì)齊能夠更快速識(shí)別數(shù)據(jù)量大小，跟其他數(shù)據(jù)的對(duì)比，文字左對(duì)齊則是根據(jù)人從左到右的閱讀習(xí)慣。

之前專門總結(jié)過一篇數(shù)據(jù)表格如何排版的文章，想了解的朋友，文章下面有數(shù)據(jù)可視化系列文章鏈接。

注解：

設(shè)計(jì)數(shù)據(jù)可視化大屏?xí)r一定要考慮用戶瀏覽數(shù)據(jù)的優(yōu)先級(jí)的構(gòu)架，例如要遵循先總后分，先具體后抽象的邏輯，上圖舊版把趨勢放到了頁面的第一視覺位置，就有點(diǎn)宣兵奪主了，根據(jù)先具體后抽象，改版后具體數(shù)據(jù)放到第一視覺位置，趨勢信息排后。

舊版大屏沒有標(biāo)題，我是誰？我在干什么？我要去哪里？所以標(biāo)題務(wù)必得有。

總結(jié)：

說了這么多設(shè)計(jì)要點(diǎn)，新手可能還是不知道設(shè)計(jì)的切入點(diǎn)在哪里，所以總結(jié)一個(gè)數(shù)據(jù)可視化設(shè)計(jì)分三步走法。

第一步：了解數(shù)據(jù)要表達(dá)的本質(zhì)。

拿到一組數(shù)據(jù)，先分析主次，這組數(shù)據(jù)要表達(dá)什么？是展示數(shù)據(jù)，還是對(duì)比數(shù)據(jù)，或是實(shí)時(shí)監(jiān)控?cái)?shù)據(jù)，從而確定展示的優(yōu)先級(jí)。

第二步：確定使用圖表。

通過了解數(shù)據(jù)要表達(dá)的本質(zhì)后，選擇適合他的圖表，這時(shí)候就需要打開幾個(gè)開源的圖表網(wǎng)站找圖表，記住你的圖表用的是網(wǎng)站的哪一個(gè)，開發(fā)如果找不到就丟給他網(wǎng)址。

網(wǎng)站有：Fusion Design、螞蟻數(shù)據(jù)可視化-AntV、ECharts Examples、Highcharts

第三步：整體效果調(diào)整

功能性的數(shù)據(jù)展示都沒問題，還要看下整體效果，例如用了過于多的柱狀圖，可能就會(huì)影響了整體的美感，圖表盡可能多樣性，數(shù)據(jù)表達(dá)信息就要用不同的圖表展示。

 最后 

數(shù)據(jù)可視化設(shè)計(jì)核心就是，通過美學(xué)設(shè)計(jì)形式把數(shù)據(jù)精準(zhǔn)和的分析和表達(dá)。

數(shù)據(jù)可視化設(shè)計(jì)是目前較為熱門的設(shè)計(jì)工種，通過本文分享的項(xiàng)目迭代案例，希望能夠讓你對(duì)數(shù)據(jù)可視化有些許了解。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

（編者注：由于本文動(dòng)圖太大，將近100M，為了不影響移動(dòng)端讀者的閱讀體驗(yàn)，本文圖片都是靜態(tài)截圖，動(dòng)圖文章鏈接戳：https://docs.qq.com/doc）

一、項(xiàng)目背景

在過去一年中，潘洛斯（Penrose）團(tuán)隊(duì)參與了「靈鯤」態(tài)勢感知系統(tǒng)、「麒麟」系統(tǒng)、「鷹眼」反電話詐騙系統(tǒng)等14個(gè)大數(shù)據(jù)可視化產(chǎn)品的設(shè)計(jì)。隨著產(chǎn)品不斷的探索和迭代，積累了一些行之有效的大數(shù)據(jù)可視化設(shè)計(jì)的心得和方法?；凇胳`鯤」這個(gè)案例，分享一下我們?cè)诖髷?shù)據(jù)可視化方向的設(shè)計(jì)和思考，希望能夠給對(duì)大數(shù)據(jù)可視化感興趣的同學(xué)提供一些思路。

「靈鯤」是 MIG 安全云部門與潘洛斯（Penrose）團(tuán)隊(duì)合作的，基于潘洛斯大數(shù)據(jù)可視化引擎衍生出的一款金融風(fēng)險(xiǎn)監(jiān)控可視化產(chǎn)品。應(yīng)北京與深圳金融辦的需求，搭建靈鯤金融風(fēng)險(xiǎn)態(tài)勢感知系統(tǒng)，實(shí)現(xiàn)事中風(fēng)險(xiǎn)控制，減少網(wǎng)絡(luò)欺詐損失。

著手設(shè)計(jì)之前，我們需要了解：大數(shù)據(jù)市場規(guī)模和各行業(yè)投入有多大， 政企客戶的大數(shù)據(jù)可視化產(chǎn)品的痛點(diǎn)是什么？對(duì)比深耕多年的競品，我們?cè)O(shè)計(jì)的突破口在哪？——挖掘我們的機(jī)遇和發(fā)力點(diǎn)。

二、我們的客戶，目標(biāo)群體

數(shù)據(jù)顯示，2017年中國大數(shù)據(jù)產(chǎn)業(yè)規(guī)模為4700億元。隨著一系列政策的出臺(tái)，大數(shù)據(jù)國家戰(zhàn)略正在加速落地，大數(shù)據(jù)行業(yè)將持續(xù)增長，預(yù)計(jì)2018年中國大數(shù)據(jù)產(chǎn)業(yè)規(guī)模將達(dá)到6200億元，增幅達(dá)32%。需求層面，預(yù)計(jì)2020年大數(shù)據(jù)應(yīng)用市場需求中，僅政府需求就占比35%，另外包括醫(yī)療、交通、金融等多個(gè)行業(yè)在大數(shù)據(jù)和信息化建設(shè)投入也將持續(xù)增加。

除了旺盛的需求以外，我們還注意到很多政企內(nèi)部數(shù)據(jù)基礎(chǔ)很好，以宜昌為例，宜昌智慧辦匯集了來自32個(gè)部門、60個(gè)系統(tǒng)的大量詳盡的實(shí)施城市數(shù)據(jù)。與這些政企單位合作，易形成行業(yè)燈塔，便于規(guī)模復(fù)制。另外，針對(duì)大數(shù)據(jù)可視化，目前政企已不滿足于「面子工程」，更多的希望大數(shù)據(jù)可視化與 AI 結(jié)合，呈現(xiàn)更復(fù)雜多樣的數(shù)據(jù)，以輔助決策。

基于以上的市場潛在規(guī)模的考察和典型客戶研究，在進(jìn)行「靈鯤」產(chǎn)品能力規(guī)劃時(shí)，我們主要考慮以下三類使用場景： 政府機(jī)構(gòu)決策、展會(huì)展臺(tái)及參觀視察。

在金融局等相關(guān)政府機(jī)構(gòu)的日常工作中，決策層和相關(guān)工作人員會(huì)基于實(shí)時(shí)金融平臺(tái)數(shù)據(jù)，針對(duì)日常事務(wù)或緊急事件進(jìn)行決策管理，監(jiān)控大廳也就應(yīng)運(yùn)而生?；谶@種工作方式，我們可以發(fā)現(xiàn)潘洛斯的產(chǎn)品特性非常契合監(jiān)控大廳的使用場景。在監(jiān)控大廳中，用戶是通過兩種不同的信息界面進(jìn)行工作的，分別是綜合數(shù)據(jù)可視化大屏（總屏）以及工作人員獨(dú)立使用的電腦屏幕（分屏）。其中，在總屏上，呈現(xiàn)的內(nèi)容通常是一些對(duì)于決策者來說至關(guān)重要的信息：正在發(fā)生的事件的狀態(tài)和可能趨勢（發(fā)生了什么）、值得注意的風(fēng)險(xiǎn)（需要團(tuán)隊(duì)做什么）以及風(fēng)險(xiǎn)的處理進(jìn)度（團(tuán)隊(duì)做的怎么樣）；而在分屏上，主要為工作人員提供數(shù)據(jù)分析及風(fēng)險(xiǎn)事件處理功能，幫助團(tuán)隊(duì)對(duì)事件迅速作出響應(yīng)，協(xié)作。

不同于工作場景，靈鯤產(chǎn)品在展會(huì)中展臺(tái)的主要受眾是參會(huì)人士，除了一般民眾外，更有價(jià)值的觀眾主要來自于媒體和潛在客戶等。所以在這個(gè)場景中展示的內(nèi)容與實(shí)際工作中的數(shù)據(jù)可視化內(nèi)容有一定的區(qū)別，更多的是對(duì)產(chǎn)品能力的展示、產(chǎn)品的宣傳以及社會(huì)價(jià)值的呈現(xiàn)。如何直觀的呈現(xiàn)產(chǎn)品的能力，并使觀眾快速獲得有價(jià)值的信息并留下深刻印象非常重要。這也決定了在這個(gè)場景中，用戶不僅包括觀眾，也包括演講者。我們需要考慮如何通過控制端讓講演者而流暢的完成產(chǎn)品介紹。

在金融局等政府機(jī)構(gòu)，經(jīng)常會(huì)有上級(jí)領(lǐng)導(dǎo)視察參觀的接待活動(dòng)。這些來訪的貴賓往往希望了解關(guān)于機(jī)構(gòu)更全面和具體的信息，包括但不限于工作流程、工作成績等，所以我們認(rèn)為這個(gè)場景綜合了以上兩種場景的主要特點(diǎn)。這里的用戶包括來訪人員，演示人員以及工作人員，展示的內(nèi)容也往往不局限于金融風(fēng)險(xiǎn)大數(shù)據(jù)的可視化，還會(huì)包括工作方式和流程本身。

三、行業(yè)競品對(duì)比，反觀自身發(fā)力點(diǎn)

通過對(duì)阿里 DataV，AntV、360、帆軟的大數(shù)據(jù)可視化產(chǎn)品的體驗(yàn)，我們從產(chǎn)品呈現(xiàn)、產(chǎn)品體驗(yàn)、產(chǎn)品技術(shù)、部署方式和商業(yè)模式幾個(gè)維度的橫向?qū)Ρ?。阿里的技術(shù)對(duì)可視化效果的局限性很大，優(yōu)點(diǎn)是產(chǎn)品實(shí)現(xiàn)模板化、系統(tǒng)實(shí)時(shí)可交互，用戶可以快速搭建自己的可視化產(chǎn)品；360產(chǎn)品可視化呈現(xiàn)3D化，數(shù)據(jù)呈現(xiàn)效果和數(shù)據(jù)感知度較2D更優(yōu)，但是系統(tǒng)非實(shí)時(shí)可交互，而且搭建周期長，成本較高；帆軟的可視化是傳統(tǒng)報(bào)表型，可視化效果呈現(xiàn)缺乏競爭力。

經(jīng)過對(duì)比，我們不難發(fā)現(xiàn)3D化數(shù)據(jù)呈現(xiàn)能力和數(shù)據(jù)感知度是最高的。但是局限于目前的技術(shù)，項(xiàng)目成本高、研發(fā)周期長、難以滿足業(yè)務(wù)的發(fā)展速度。

四、我們的機(jī)遇和挑戰(zhàn)

基于市場需求和競品分析，我們從以下三個(gè)方面分別分析了產(chǎn)品的機(jī)會(huì)和突破點(diǎn)：

• 可視化：數(shù)據(jù)和場景的呈現(xiàn)3D化，滿足更多維度的數(shù)據(jù)呈現(xiàn)，支持云+本地實(shí)時(shí)大數(shù)據(jù)呈現(xiàn)能力；
• 產(chǎn)品化：場景、組件、數(shù)據(jù)、圖表全部實(shí)現(xiàn)可云端動(dòng)態(tài)更新和配置的模塊化，降低維護(hù)成本、提高服用率、縮短項(xiàng)目周期，無縫打包接入業(yè)務(wù)數(shù)據(jù)，提供豐富可自定義的可擴(kuò)展接口；
• 大數(shù)據(jù)+AI：基于公司多領(lǐng)域多業(yè)務(wù)線的大數(shù)據(jù)融合以及 AI 能力提供豐富的基于時(shí)間、空間、數(shù)據(jù)的預(yù)測預(yù)警、統(tǒng)計(jì)表達(dá)能力。

1. 產(chǎn)品架構(gòu)規(guī)劃

基于對(duì)靈鯤態(tài)勢感知系統(tǒng)的使用場景、用戶需求以及機(jī)會(huì)點(diǎn)的考慮，我們規(guī)劃了未來產(chǎn)品的整體架構(gòu)，包括大屏端、云端、客戶管理端、小屏端以及虛屏端。大屏端基于本地端引擎進(jìn)行大數(shù)據(jù)可視化呈現(xiàn)?？蛻艄芾矶税▓?bào)表和配置管理等工具，幫助用戶進(jìn)行分析數(shù)據(jù)和策略管理。小屏端主要考慮操作控制和移動(dòng)辦公等移動(dòng)使用場景，提供大屏控制、移動(dòng)審批、監(jiān)管、公眾號(hào)等功能。以上三個(gè)端由云端拉取和更新數(shù)據(jù)。虛屏則提供差異化的大數(shù)據(jù)可視化體驗(yàn)，如增強(qiáng)現(xiàn)實(shí)等新奇有趣的玩法。由于大屏端在我們的規(guī)劃里是態(tài)勢感知系統(tǒng)的核心，且落地到合作方的模塊，以下分享的內(nèi)容將主要圍繞大屏的內(nèi)容設(shè)計(jì)展開，未來如果產(chǎn)品規(guī)劃中的其他模塊陸續(xù)上線，我們?cè)僮龇窒怼?

2. 大屏內(nèi)容設(shè)計(jì)

本地端引擎

早期我們?cè)O(shè)計(jì)的「麒麟」系統(tǒng)、「鷹眼」反電話詐騙系統(tǒng)在對(duì)外在大屏上展示主要是通過 web 端的方式去實(shí)現(xiàn)，雖然適配性尚可，但很多設(shè)計(jì)效果無法完全還原。我們也嘗試性用 webGL 和 three.js 的方式把設(shè)計(jì)效果再做進(jìn)一步提升，但迫于研發(fā)周期和實(shí)際性能的壓力，最后也只能作罷。中期我們嘗試使用3D工具輸出視頻的方式做過一些過渡，輸出效果是沒有問題，但如果在展會(huì)上遇到媒體采訪，事情就會(huì)變得異常尷尬。媒體會(huì)詢問展示內(nèi)容的真實(shí)性，數(shù)據(jù)的實(shí)效性，甚至采訪的時(shí)候需要停留在某一個(gè)畫面，我方參會(huì)人員配合起來非常麻煩。后來我們也研究過競品使用的工具，例如 Ventuz，工具最終輸出的效果是不錯(cuò)，但是界面、操作極其復(fù)雜，相關(guān)教程和素材在網(wǎng)絡(luò)上極少，授權(quán)費(fèi)用也相當(dāng)昂貴。最終經(jīng)過我們內(nèi)部商討和研究，也請(qǐng)教了一些 IEG 專家的意見，決定使用游戲引擎作為本地端的顯示引擎。

Unity 和 Unreal 我們也糾結(jié)過許久，甚至 Unity 上我們也出過可交互的 Demo，但最終選擇了 Unreal 的原因主要有以下幾個(gè)點(diǎn)：

• 基于前面我們提到的產(chǎn)品架構(gòu)，我們的核心是在大屏，而大屏部署主要依賴 PC 做為計(jì)算平臺(tái)，相較于 Unity，Unreal 在 PC 端的技術(shù)積累要更加深厚，實(shí)時(shí)渲染出來的光影效果和質(zhì)感表現(xiàn)要更穩(wěn)定于 Unity 的輸出；
• Unreal 自帶藍(lán)圖-可視化腳本系統(tǒng)，這對(duì)于設(shè)計(jì)團(tuán)隊(duì)出身，零代碼開發(fā)經(jīng)驗(yàn)的我們來說上手、學(xué)習(xí)起來更快更方便；
• 線上有大量的視頻教程，各種插件和美術(shù)素材也比Unity更豐富；
• 有《蝙蝠俠:阿卡姆騎士》、《最終幻想15》和《絕地求生》這些3A沙盤游戲作為先例，Unreal 對(duì)于大規(guī)模的場景渲染能力是可被預(yù)期的，而 Unity 目前還沒有可以拿得出手的案例。

色彩基調(diào)

為了打造靈鯤產(chǎn)品的可視化，在競品中脫穎而出，我們從產(chǎn)品功能、用戶、愿景三個(gè)維度發(fā)散，提煉出設(shè)計(jì)指南的關(guān)鍵詞：智能、直觀、未來，塑造獨(dú)特的大數(shù)據(jù)可視化風(fēng)格體系。

靈鯤金融態(tài)勢感知系統(tǒng)內(nèi)容架構(gòu)分為數(shù)據(jù)維度和場景維度，數(shù)據(jù)是核心，場景是大數(shù)據(jù)呈現(xiàn)的承載體；場景使用具有金屬質(zhì)感的深青灰，符合理性的、冷靜的、智能化產(chǎn)品的個(gè)性；數(shù)據(jù)色彩使用透明、發(fā)光、具有未來感的高亮色，和場景形成強(qiáng)對(duì)比，使數(shù)據(jù)更為突顯、更具吸引力；為了強(qiáng)化客戶對(duì)于風(fēng)險(xiǎn)的感知，通過顏色區(qū)分?jǐn)?shù)據(jù)的風(fēng)險(xiǎn)等級(jí)，更直觀的傳達(dá)數(shù)據(jù)的含義。如：高風(fēng)險(xiǎn)的使用紅色，紅色讓人聯(lián)想到危險(xiǎn)、警報(bào)。

呈現(xiàn)方式

在現(xiàn)有的產(chǎn)品和傳統(tǒng)認(rèn)知中，大數(shù)據(jù)產(chǎn)品內(nèi)容是各種樣式的圖形和圖表，主要以平面為主。我們從游戲、科幻電影中收集了一輪大數(shù)據(jù)可視化內(nèi)容相關(guān)的案例，從視覺維度上看，主要有這幾個(gè)特點(diǎn)：一、具有很強(qiáng)的空間感，支持多種數(shù)據(jù)同屏呈現(xiàn)，可交叉分析對(duì)比，承載性強(qiáng)；二、高精度的模型和材質(zhì)，豐富的粒子、動(dòng)效，更加貼近現(xiàn)實(shí)的光影呈現(xiàn)；三、互動(dòng)性強(qiáng)，可交互，實(shí)時(shí)演算。

從大數(shù)據(jù)可視化的內(nèi)容維度上看，梳理的3D架構(gòu)，主要包括：數(shù)據(jù)維度>基礎(chǔ)建設(shè)>交通運(yùn)輸>行政分區(qū)>自然條件。

數(shù)據(jù)維度層是最核心的部分，位于場景上方最突出的位置，能夠更清晰的展示風(fēng)險(xiǎn)數(shù)據(jù)的分布、量級(jí)；行政區(qū)域和交通層是城市場景最基礎(chǔ)的數(shù)據(jù)維度，方便用戶進(jìn)行區(qū)域的數(shù)據(jù)對(duì)比和分析；基礎(chǔ)建設(shè)層包括城市的建筑、標(biāo)志性建筑、照明、橋梁、等，還原城市獨(dú)特風(fēng)貌；通過突出城市的標(biāo)志性建筑，強(qiáng)化城市、區(qū)域的識(shí)別性，輔助數(shù)據(jù)傳達(dá)；自然條件層包括地形、河流、植被、展示真實(shí)的環(huán)境特征，用戶更有代入感。

△ 北京場景

△ 鳥瞰視角、漫游視角自由切換，滿足全局、街道、建筑的不同顆粒度的數(shù)據(jù)呈現(xiàn)，方便用戶進(jìn)行縱向的數(shù)據(jù)對(duì)比。

△ 場景整體風(fēng)格圖

數(shù)據(jù)表現(xiàn)

靈鯤的3D數(shù)據(jù)樣式有柱狀圖和散點(diǎn)圖。如何把司空見慣的數(shù)據(jù)樣式，設(shè)計(jì)出產(chǎn)品的個(gè)性，是我們重點(diǎn)要解決的問題。為了體現(xiàn)大數(shù)據(jù)的力量感，使用科幻電影中的聚合能量、發(fā)光的能量石作為柱狀圖的主圖形；同時(shí)把數(shù)據(jù)采集、融合、分析的過程具象為動(dòng)態(tài)粒子網(wǎng)絡(luò)，作為輔助圖形。數(shù)據(jù)圖形和結(jié)構(gòu)中都融合了品牌 DNA 的三角圖形，數(shù)據(jù)樣式更具有品牌的個(gè)性。

△ 柱狀圖

△ 散點(diǎn)圖

預(yù)見未來的功能創(chuàng)新

時(shí)間線：3D的維度基礎(chǔ)上，我們?cè)黾恿藭r(shí)間的維度，通過拖動(dòng)時(shí)間線查看不同時(shí)間點(diǎn)的數(shù)據(jù)的變化趨勢，由此對(duì)未來數(shù)據(jù)進(jìn)行預(yù)測。為了強(qiáng)化用戶對(duì)于時(shí)間感知，設(shè)計(jì)了白天和晚上兩種風(fēng)格，白天和夜晚隨著時(shí)間變化而變化。

天氣系統(tǒng)：天氣是未來數(shù)據(jù)分析極其重要的一個(gè)因子，它會(huì)直接影響交通（例如人流、物流、航空）、醫(yī)療(例如疾病傳播、醫(yī)院就診）等領(lǐng)域。所以我們?cè)O(shè)計(jì)了通用的天氣系統(tǒng)組件，呈現(xiàn)實(shí)時(shí)天氣情況，以輔助用戶進(jìn)行數(shù)據(jù)分析。

控制端：符合大屏使用場景和用戶操作習(xí)慣，同時(shí)小屏控制端支持更復(fù)雜更精準(zhǔn)的操作。

組件庫搭建

為了提升產(chǎn)品搭建的效率，降低了研發(fā)周期和成本，產(chǎn)品功能模塊實(shí)現(xiàn)了組件化，分為3D場景組件、3D數(shù)據(jù)組件、2D數(shù)據(jù)組件。任何一位設(shè)計(jì)師都可以根據(jù)產(chǎn)品需求，搭配組件模塊，快速搭建大數(shù)據(jù)可視化產(chǎn)品。

數(shù)據(jù)內(nèi)容的包裝

通過該產(chǎn)品，一方面能夠輔助金融局等政府機(jī)構(gòu)領(lǐng)導(dǎo)把控整體金融平臺(tái)風(fēng)險(xiǎn)、輔助做出平臺(tái)整改指導(dǎo)決策意見，展示金融工作成績；另一方面體現(xiàn)出騰訊大數(shù)據(jù)能力和公司的社會(huì)責(zé)任；最后，通過從更長遠(yuǎn)的眼光去包裝產(chǎn)品，打造智慧監(jiān)管標(biāo)桿產(chǎn)品，從而推動(dòng)與政府客戶更深入廣泛的合作。具體內(nèi)容通過以下兩條線進(jìn)行組織：

橫線：各個(gè)監(jiān)管維度

靈鯤金融風(fēng)險(xiǎn)態(tài)勢感知系統(tǒng)專注于呈現(xiàn)金融風(fēng)險(xiǎn)數(shù)據(jù)的呈現(xiàn)，主要分為公司層面和用戶層面，綜合體現(xiàn)潛在的風(fēng)險(xiǎn)趨勢和實(shí)際影響的范圍。除了靈鯤用于監(jiān)管金融數(shù)據(jù)，整個(gè)監(jiān)管平臺(tái)還負(fù)責(zé)展示包括政治、生態(tài)、電信、消費(fèi)在內(nèi)的多個(gè)監(jiān)管維度，這些維度與金融監(jiān)管維度為同一個(gè)內(nèi)容層級(jí)。我們考慮到騰訊的大數(shù)據(jù)能力可以幫助更多城市綜合管理者了解整個(gè)網(wǎng)絡(luò)社會(huì)的全局性風(fēng)險(xiǎn)，所以每個(gè)維度都是智慧監(jiān)管必不可少的一部分，并且每個(gè)維度之間的橫向交叉對(duì)比能夠使智慧監(jiān)管平臺(tái)發(fā)揮出更大的社會(huì)價(jià)值。

縱線：監(jiān)管顆粒度

靈鯤系統(tǒng)中觀眾可以從全局?jǐn)?shù)據(jù)一直下鉆到個(gè)體數(shù)據(jù)，實(shí)現(xiàn)不同顆粒度的監(jiān)管目的。

具體來講，全國的安全風(fēng)險(xiǎn)最終是以加權(quán)平均后的指數(shù)形式體現(xiàn)出來；再到具體的省份和城市，內(nèi)容細(xì)化到具體風(fēng)險(xiǎn)事件的發(fā)生情況，如電信安全監(jiān)管維度，呈現(xiàn)電信詐騙使用的偽基站的位置，以及發(fā)送詐騙短信的數(shù)量等；最后細(xì)化到城市中的機(jī)構(gòu)和建筑，呈現(xiàn)具體機(jī)構(gòu)的運(yùn)行情況和具體高風(fēng)險(xiǎn)企業(yè)所在建筑進(jìn)行實(shí)時(shí)監(jiān)控。

3. 產(chǎn)品演示視頻

https://v.qq.com/x/page/d0742kep4k1.html

結(jié)語

潘洛斯團(tuán)隊(duì)是基于 DNA 設(shè)計(jì)中心下的大數(shù)據(jù)可視化團(tuán)隊(duì)，成員來自于 MIG 安全和醫(yī)療部門，早期專注于 To C 端的產(chǎn)品設(shè)計(jì)，過去一年里隨著公司戰(zhàn)略的變化和部門業(yè)務(wù)方向的變化，我們逐漸開始把產(chǎn)品設(shè)計(jì)的重心和思考放在了 To B、To G 領(lǐng)域，不斷做著嘗試和探索。以前做 To C 的時(shí)候我們關(guān)注的更多是 DAU、轉(zhuǎn)化率、日活、滿意度這些和產(chǎn)品體驗(yàn)相關(guān)聯(lián)的指標(biāo)，滿足絕大多數(shù)互聯(lián)網(wǎng)用戶的訴求是我們首要去解決的問題?，F(xiàn)在做 To B、To G 領(lǐng)域的設(shè)計(jì)，我們更多思考的是如何包裝我們現(xiàn)有的業(yè)務(wù)能力，能夠通過更加簡單、直接、有效的方式觸達(dá)給我們的客戶，讓他們更容易理解像騰訊這樣擁有海量數(shù)據(jù)和算法能力的互聯(lián)網(wǎng)公司如何幫助他們進(jìn)一步提升他們的業(yè)務(wù)效率和產(chǎn)出，給這個(gè)社會(huì)創(chuàng)造更多的價(jià)值，這也是騰訊多年來想要承擔(dān)的社會(huì)責(zé)任之一。

文章來源：優(yōu)設(shè)

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。