原文來自UXPin Studio叶堆，原作者是Jessica Lowry恭朗，一位英國的用戶體驗設(shè)計顧問，筆者譯來與大家共勉茸时，轉(zhuǎn)載請先詢問筆者意見并注明出處。
作為一個用戶體驗設(shè)計師鸠儿，我越來越多地接觸到與數(shù)據(jù)可視化相關(guān)的工作屹蚊。數(shù)據(jù)本身可以在視覺上引人注目，但它需要遵循某種語言和故事來使人感到印象深刻进每。
多年來汹粤，講故事的藝術(shù)已經(jīng)成為我搭建設(shè)計基礎(chǔ)的架構(gòu)。每一個好的故事都有一個主人公田晚，他有某種形式的追求嘱兼。故事里的每一種追求，總伴有一個必須殺死的怪物贤徒。描述好你的問題和用戶芹壕，然后打造一個故事，會幫助大家更好地理解工作過程接奈。
我將通過我最近在跟的一個項目來解釋這一過程踢涌，這也可能會在你自己的用戶體驗設(shè)計項目中有所幫助。
在項目之外尋找靈感
視覺語言與以人為中心的設(shè)計基礎(chǔ)十分相近序宦。
人類在創(chuàng)造我們今天使用的字母之前就創(chuàng)造了視覺語言睁壁。壁畫是人類最早的的交流方式。所有好的提示工具都是相似的互捌，圖紙就是這樣潘明，能很好解釋問題本身和解決問題的方法。那些早期的圖紙并不是為了作為一種原始形式的室內(nèi)設(shè)計而出現(xiàn)的秕噪。洞穴里的壁畫講述的是時事性的新聞故事钳降。繪畫的人在嘗試警告其他人潛在的危險以及他們共同的生存技巧。從本質(zhì)上講腌巾，洞穴壁畫就是可視化數(shù)據(jù)遂填。
就像在《為人眼進行的Web?UI設(shè)計》中描述的那樣铲觉，簡潔有力的圖像的具有很強的交流能力。但是如何把這種這種力量融入到像素中呢?
最近我需要設(shè)計一個交互式的系統(tǒng)地圖城菊，其中要轉(zhuǎn)達幾個關(guān)鍵因素备燃，包括:
大小，距離凌唬，風(fēng)險，活動漏麦，路徑客税，連接
從本質(zhì)上講，這樣的網(wǎng)絡(luò)安全應(yīng)用程序在檢測危險時撕贞，就如同海里撈針的同時顯示出其特定位置更耻。
從集群網(wǎng)絡(luò)數(shù)據(jù)的例子來看，這些圖片看起來是很優(yōu)雅捏膨，但是從交互的角度卻非常不切實際秧均。因為這樣確實是使網(wǎng)絡(luò)看起來漂亮了，但一旦需要加入交互式的功能時就很難使用号涯。我看到傳統(tǒng)方式設(shè)計的互動地圖可用性都很差目胡。我需要從另一個地方找到靈感，一些在現(xiàn)有可視化網(wǎng)絡(luò)數(shù)據(jù)以外的例子链快。
為了可視化數(shù)據(jù)容易閱讀誉己，需要將不同的屬性獨立開來。這就形成了視覺語言的結(jié)構(gòu)域蜗。
擁抱隱喻的故事能力
我的靈感通常來自大自然巨双。自然本身就是完美的設(shè)計。森林是混亂的霉祸，但在其中也是有條理的筑累。
森林的故事不是它巨大的整體視圖來理解的，而是親身在其中看到的視圖丝蹭。相同的原則也會應(yīng)用到我要設(shè)計成地圖的系統(tǒng)網(wǎng)絡(luò)中慢宗。
數(shù)字本身毫無意義。概述數(shù)據(jù)可以提抽出更有用的高級信息但這些信息很少可操作的半夷。數(shù)據(jù)的上下文很重要婆廊，而且必須提供數(shù)據(jù)與之結(jié)合。理解其中的連接需要更近一步的觀察巫橄。
一旦你開始拉近去看淘邻，森林就會呈現(xiàn)全新的意義。當(dāng)你近看一棵樹湘换，感知會是全新的宾舅。你越仔細觀察,越能看到紋理和細節(jié)统阿。在微觀層面上,森林元素之間的關(guān)系便說明了森林生長的過程。
我認為森林中的一切都彼此合作從而生長成一片森林筹我。一個層級和自然法則構(gòu)成的網(wǎng)絡(luò)決定了植物如何生長扶平。比如顏色就在生物如何生存和植物為何接近陽光起重要作用。一切都在完美的和諧中生長和消亡蔬蕊。植物死后结澄，它就變成了下一代的食物。
我決定采用平面式的體驗岸夯，因為從用戶的認知負荷看來麻献，這樣會優(yōu)于3d圖的形式。減少認知負荷就更容易講好故事猜扮。交互式的組件應(yīng)該幫助用戶關(guān)注領(lǐng)域里的重點勉吻。我研究了不同的樹形地圖，尋找地圖式數(shù)據(jù)中的正確處理方法旅赢。
創(chuàng)建一個故事
把這些元素拼到一起很花費時間齿桃。我創(chuàng)建一個故事來幫助我：
“用戶乘坐飛機在一個茂密的森林上一邊飛行一邊尋找地面上的路徑，他正在尋找的是一顆紅色的種子煮盼。這顆紅色的種子是被外人引入森林的短纵，目的是用紅色種子生長出來的植物來消滅其他植物。損失將會是無法接受的孕似。但是紅色種子有好幾顆踩娘，用戶需要在種子長成植物之前定位和移除它們『砑溃”
這個故事幫助我總結(jié)出了如下的养渴，用戶完成任務(wù)所必需的交互功能描述:
用戶必須飛越整個森林。
用戶必須能把紅色隔離出來泛烙。
用戶必須區(qū)分種子和其他森林的組成理卑。
用戶必須在種子變成一種植物之前找到。
用戶必須理解樹,植物,葉子和種子之間的關(guān)系蔽氨。
用戶必須了解生長模式以建立時間表藐唠。
用戶必須找到可以在地面上跟隨的路徑。
顯然,所有這些都是真正用戶在產(chǎn)品中執(zhí)行的任務(wù)的小說版本。但通過使用一個故事作為比喻,可以設(shè)計一個有著共同語言的主題體驗。這在與團隊和客戶溝通產(chǎn)品的關(guān)鍵特性時特別有效舀射。用我們共同的故事來比喻，我們所有人都能共享相同的心智模型妈嘹。
基于我們的隱喻，真正的用戶任務(wù)應(yīng)該翻譯成:
用戶需要一個整體的網(wǎng)絡(luò)視圖绍妨。
用戶需要能隔離出網(wǎng)絡(luò)中的目標润脸。
用戶需要能隔離出網(wǎng)絡(luò)的關(guān)鍵屬性柬脸。
用戶需要通過日期過濾網(wǎng)絡(luò)活動。
用戶需要瀏覽網(wǎng)絡(luò)的指引毙驯。
把故事變成現(xiàn)實
我研究了很多可視化網(wǎng)絡(luò)的例子并在Buzzfeed上找到這個情節(jié)線索樹形圖倒堕。它成為了我正在研究的網(wǎng)絡(luò)安全應(yīng)用的完美視覺模型。
作為一個結(jié)合地鐵圖形式的樹形圖爆价，它使得用戶可以很容易地理解高層級的信息垦巴。而且它符合森林的隱喻，更加意義非凡允坚。我們能看到根代表的是客戶關(guān)注的焦點魂那，而葉和樹枝則代表整個森林(網(wǎng)絡(luò))。顏色的不同編碼標識出了什么是最重要的稠项，以及其來源是什么，不管是用戶組鲜结、用戶類型還是設(shè)備展运。我們能夠像看一幅易于消化的圖片那樣，看清所有高層次的關(guān)系精刷。
這個模型會允許用戶直接查看整個森林(整個網(wǎng)絡(luò))拗胜，紅色的種子(安全隱患)，以及他們?nèi)绾巫哌M森林怒允，還有森林是否還在生長(入口和目的地的路徑)埂软。
當(dāng)用戶飛過這個平面森林的時候，關(guān)鍵領(lǐng)域很容易識別出來纫事。正如你在下面這個低保真模型里看到的勘畔，我用顏色突出了紅色種子在找到長入土壤的路徑(安全漏洞)，以及種子開始通過根和葉長成一株植物(傳播病毒)之間的時間丽惶。紅色種子代表一個風(fēng)險炫七，但種子長成植物的過程是一個更大的風(fēng)險。種子的不同顏色直觀地告訴用戶應(yīng)該先調(diào)查哪個種子钾唬。
我承認這個原型不是很漂亮万哪，但它大致上闡明了功能——而這正是我們所需要的。
一旦用戶選擇一個種子展開調(diào)查抡秆，路徑就會變得明顯奕巍。森林的其他元素仍然可見，但不會使用戶分心儒士。事實上的止，所有不必要的層級都被撥開了，只揭示到達紅色種子的路徑及其當(dāng)前的發(fā)展現(xiàn)狀(這是用戶最關(guān)心的)乍桂。
邁出下一步
為了設(shè)計更多故事驅(qū)動的用戶界面冲杀，你需要到辦公室以外去尋求靈感效床。關(guān)注自然，還有那些將復(fù)雜結(jié)構(gòu)歸結(jié)為簡單感性理解的優(yōu)秀視覺藝術(shù)家权谁。
想了解其他引人注目的視覺設(shè)計故事剩檀，也可以看看這本免費的電子書《為人眼進行的Web?UI設(shè)計》（英文電子書，可從在此處找到下載）旺芽，從中可以了解到33個設(shè)計案例詳細的拆解沪猴。
