原文來(lái)自UXPin Studio，原作者是Jessica Lowry，一位英國(guó)的用戶體驗(yàn)設(shè)計(jì)顧問(wèn)，筆者譯來(lái)與大家共勉

作為一個(gè)用戶體驗(yàn)設(shè)計(jì)師，我越來(lái)越多地接觸到與數(shù)據(jù)可視化相關(guān)的工作。數(shù)據(jù)本身可以在視覺(jué)上引人注目，但它需要遵循某種語(yǔ)言和故事來(lái)使人感到印象深刻。

多年來(lái)，講故事的藝術(shù)已經(jīng)成為我搭建設(shè)計(jì)基礎(chǔ)的架構(gòu)。每一個(gè)好的故事都有一個(gè)主人公，他有某種形式的追求。故事里的每一種追求，總伴有一個(gè)必須殺死的怪物。描述好你的問(wèn)題和用戶，然后打造一個(gè)故事，會(huì)幫助大家更好地理解工作過(guò)程。

我將通過(guò)我最近在跟的一個(gè)項(xiàng)目來(lái)解釋這一過(guò)程，這也可能會(huì)在你自己的用戶體驗(yàn)設(shè)計(jì)項(xiàng)目中有所幫助。

在項(xiàng)目之外尋找靈感

視覺(jué)語(yǔ)言與以人為中心的設(shè)計(jì)基礎(chǔ)十分相近。

人類在創(chuàng)造我們今天使用的字母之前就創(chuàng)造了視覺(jué)語(yǔ)言。壁畫是人類最早的的交流方式。所有好的提示工具都是相似的，圖紙就是這樣，能很好解釋問(wèn)題本身和解決問(wèn)題的方法。那些早期的圖紙并不是為了作為一種原始形式的室內(nèi)設(shè)計(jì)而出現(xiàn)的。洞穴里的壁畫講述的是時(shí)事性的新聞故事。繪畫的人在嘗試警告其他人潛在的危險(xiǎn)以及他們共同的生存技巧。從本質(zhì)上講，洞穴壁畫就是可視化數(shù)據(jù)。

就像在《為人眼進(jìn)行的Web?UI設(shè)計(jì)》中描述的那樣，簡(jiǎn)潔有力的圖像的具有很強(qiáng)的交流能力。但是如何把這種這種力量融入到像素中呢?

最近我需要設(shè)計(jì)一個(gè)交互式的系統(tǒng)地圖，其中要轉(zhuǎn)達(dá)幾個(gè)關(guān)鍵因素，包括:

大小、距離、風(fēng)險(xiǎn)、活動(dòng)、路徑、連接

從本質(zhì)上講，這樣的網(wǎng)絡(luò)安全應(yīng)用程序在檢測(cè)危險(xiǎn)時(shí)，就如同海里撈針的同時(shí)顯示出其特定位置。

從集群網(wǎng)絡(luò)數(shù)據(jù)的例子來(lái)看，這些圖片看起來(lái)是很優(yōu)雅，但是從交互的角度卻非常不切實(shí)際。因?yàn)檫@樣確實(shí)是使網(wǎng)絡(luò)看起來(lái)漂亮了，但一旦需要加入交互式的功能時(shí)就很難使用。我看到傳統(tǒng)方式設(shè)計(jì)的互動(dòng)地圖可用性都很差。我需要從另一個(gè)地方找到靈感，一些在現(xiàn)有可視化網(wǎng)絡(luò)數(shù)據(jù)以外的例子。

為了可視化數(shù)據(jù)容易閱讀，需要將不同的屬性獨(dú)立開來(lái)。這就形成了視覺(jué)語(yǔ)言的結(jié)構(gòu)。

擁抱隱喻的故事能力

我的靈感通常來(lái)自大自然。自然本身就是完美的設(shè)計(jì)。森林是混亂的，但在其中也是有條理的。

森林的故事不是它巨大的整體視圖來(lái)理解的，而是親身在其中看到的視圖。相同的原則也會(huì)應(yīng)用到我要設(shè)計(jì)成地圖的系統(tǒng)網(wǎng)絡(luò)中。

數(shù)字本身毫無(wú)意義。概述數(shù)據(jù)可以提抽出更有用的高級(jí)信息但這些信息很少可操作的。數(shù)據(jù)的上下文很重要，而且必須提供數(shù)據(jù)與之結(jié)合。理解其中的連接需要更近一步的觀察。

一旦你開始拉近去看，森林就會(huì)呈現(xiàn)全新的意義。當(dāng)你近看一棵樹，感知會(huì)是全新的。你越仔細(xì)觀察,越能看到紋理和細(xì)節(jié)。在微觀層面上,森林元素之間的關(guān)系便說(shuō)明了森林生長(zhǎng)的過(guò)程。

我認(rèn)為森林中的一切都彼此合作從而生長(zhǎng)成一片森林。一個(gè)層級(jí)和自然法則構(gòu)成的網(wǎng)絡(luò)決定了植物如何生長(zhǎng)。比如顏色就在生物如何生存和植物為何接近陽(yáng)光起重要作用。一切都在完美的和諧中生長(zhǎng)和消亡。植物死后，它就變成了下一代的食物。

我決定采用平面式的體驗(yàn)，因?yàn)閺挠脩舻恼J(rèn)知負(fù)荷看來(lái)，這樣會(huì)優(yōu)于3d圖的形式。減少認(rèn)知負(fù)荷就更容易講好故事。交互式的組件應(yīng)該幫助用戶關(guān)注領(lǐng)域里的重點(diǎn)。我研究了不同的樹形地圖，尋找地圖式數(shù)據(jù)中的正確處理方法。

創(chuàng)建一個(gè)故事

把這些元素拼到一起很花費(fèi)時(shí)間。我創(chuàng)建一個(gè)故事來(lái)幫助我：

“用戶乘坐飛機(jī)在一個(gè)茂密的森林上一邊飛行一邊尋找地面上的路徑，他正在尋找的是一顆紅色的種子。這顆紅色的種子是被外人引入森林的，目的是用紅色種子生長(zhǎng)出來(lái)的植物來(lái)消滅其他植物。損失將會(huì)是無(wú)法接受的。但是紅色種子有好幾顆，用戶需要在種子長(zhǎng)成植物之前定位和移除它們。”

這個(gè)故事幫助我總結(jié)出了如下的，用戶完成任務(wù)所必需的交互功能描述:

• 用戶必須飛越整個(gè)森林。
• 用戶必須能把紅色隔離出來(lái)。
• 用戶必須區(qū)分種子和其他森林的組成。
• 用戶必須在種子變成一種植物之前找到。
• 用戶必須理解樹,植物,葉子和種子之間的關(guān)系。
• 用戶必須了解生長(zhǎng)模式以建立時(shí)間表。
• 用戶必須找到可以在地面上跟隨的路徑。

顯然,所有這些都是真正用戶在產(chǎn)品中執(zhí)行的任務(wù)的小說(shuō)版本。但通過(guò)使用一個(gè)故事作為比喻,可以設(shè)計(jì)一個(gè)有著共同語(yǔ)言的主題體驗(yàn)。這在與團(tuán)隊(duì)和客戶溝通產(chǎn)品的關(guān)鍵特性時(shí)特別有效。用我們共同的故事來(lái)比喻，我們所有人都能共享相同的心智模型。

基于我們的隱喻，真正的用戶任務(wù)應(yīng)該翻譯成:

• 用戶需要一個(gè)整體的網(wǎng)絡(luò)視圖。
• 用戶需要能隔離出網(wǎng)絡(luò)中的目標(biāo)。
• 用戶需要能隔離出網(wǎng)絡(luò)的關(guān)鍵屬性。
• 用戶需要通過(guò)日期過(guò)濾網(wǎng)絡(luò)活動(dòng)。
• 用戶需要瀏覽網(wǎng)絡(luò)的指引。

把故事變成現(xiàn)實(shí)

我研究了很多可視化網(wǎng)絡(luò)的例子并在Buzzfeed上找到這個(gè)情節(jié)線索樹形圖。它成為了我正在研究的網(wǎng)絡(luò)安全應(yīng)用的完美視覺(jué)模型。

作為一個(gè)結(jié)合地鐵圖形式的樹形圖，它使得用戶可以很容易地理解高層級(jí)的信息。而且它符合森林的隱喻，更加意義非凡。我們能看到根代表的是客戶關(guān)注的焦點(diǎn)，而葉和樹枝則代表整個(gè)森林(網(wǎng)絡(luò))。顏色的不同編碼標(biāo)識(shí)出了什么是最重要的，以及其來(lái)源是什么，不管是用戶組、用戶類型還是設(shè)備。我們能夠像看一幅易于消化的圖片那樣，看清所有高層次的關(guān)系。

這個(gè)模型會(huì)允許用戶直接查看整個(gè)森林(整個(gè)網(wǎng)絡(luò))，紅色的種子(安全隱患)，以及他們?nèi)绾巫哌M(jìn)森林，還有森林是否還在生長(zhǎng)(入口和目的地的路徑)。

當(dāng)用戶飛過(guò)這個(gè)平面森林的時(shí)候，關(guān)鍵領(lǐng)域很容易識(shí)別出來(lái)。正如你在下面這個(gè)低保真模型里看到的，我用顏色突出了紅色種子在找到長(zhǎng)入土壤的路徑(安全漏洞)，以及種子開始通過(guò)根和葉長(zhǎng)成一株植物(傳播病毒)之間的時(shí)間。紅色種子代表一個(gè)風(fēng)險(xiǎn)，但種子長(zhǎng)成植物的過(guò)程是一個(gè)更大的風(fēng)險(xiǎn)。種子的不同顏色直觀地告訴用戶應(yīng)該先調(diào)查哪個(gè)種子。

我承認(rèn)這個(gè)原型不是很漂亮，但它大致上闡明了功能——而這正是我們所需要的。

一旦用戶選擇一個(gè)種子展開調(diào)查，路徑就會(huì)變得明顯。森林的其他元素仍然可見(jiàn)，但不會(huì)使用戶分心。事實(shí)上，所有不必要的層級(jí)都被撥開了，只揭示到達(dá)紅色種子的路徑及其當(dāng)前的發(fā)展現(xiàn)狀(這是用戶最關(guān)心的)。

邁出下一步

為了設(shè)計(jì)更多故事驅(qū)動(dòng)的用戶界面，你需要到辦公室以外去尋求靈感。關(guān)注自然，還有那些將復(fù)雜結(jié)構(gòu)歸結(jié)為簡(jiǎn)單感性理解的優(yōu)秀視覺(jué)藝術(shù)家。

想了解其他引人注目的視覺(jué)設(shè)計(jì)故事，也可以看看這本免費(fèi)的電子書《為人眼進(jìn)行的Web?UI設(shè)計(jì)》（英文電子書，可從在此處找到下載），從中可以了解到33個(gè)設(shè)計(jì)案例詳細(xì)的拆解。

本文由 @lrioLee（微信公眾號(hào)［簡(jiǎn)并］） 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。