文｜許秋里 王丹寧

網(wǎng)易新媒體實驗室：數(shù)據(jù)新聞在移動端如何突破頁面限制

文｜許秋里 王丹寧

數(shù)據(jù)新聞往往涉及大量數(shù)據(jù)的二次提煉和加工，其進行可視化呈現(xiàn)時通常帶有較為復雜的交互形式，對閱讀設(shè)備和用戶操作有較高要求。當前國內(nèi)外不乏出色的數(shù)據(jù)新聞可視化作品，但多立足于PC端，依托大尺寸網(wǎng)頁的多重交互展現(xiàn)，用精致的視覺和多維度交互展示豐富而有趣的內(nèi)容。而在移動端，數(shù)據(jù)新聞則面臨著難以適配、呈現(xiàn)不完整、加載困難等問題。關(guān)于這點，《衛(wèi)報》數(shù)據(jù)新聞前主編Simon Rogers表露過類似的苦惱：整個新聞網(wǎng)頁界面中的圖表、交互、浮動框架等元素在移動版本中都未能保留。

魚和熊掌不可兼得，在巴掌大的手機界面創(chuàng)作數(shù)據(jù)新聞，簡潔的閱讀體驗和豐富的資訊內(nèi)容有時只能取其一，如何取舍和妥協(xié)是一個新難題。網(wǎng)易新媒體實驗室一直致力于做移動端適配的數(shù)據(jù)新聞，在數(shù)據(jù)新聞如何突破移動端頁面限制，讓可視化作品實現(xiàn)“邏輯好有內(nèi)涵”和“容易讀還有趣”的統(tǒng)一上，有較多操作體會。

一、移動端閱讀時用戶習慣在一屏內(nèi)看完數(shù)據(jù)關(guān)系，導致長圖式微

在移動端進行新聞閱讀時，我們能一次性看完的內(nèi)容受限于屏幕大小。閱讀文章時，我們習慣性地手指上下滑動，串起全文的邏輯關(guān)系。但是在閱讀信息圖或交互圖表等可視化題材時，因為我們聚焦的視野集中在手機屏幕里，一上拉或下挪往往忘記上面的圖形或看不到對應(yīng)的圖例。所以，在移動端進行可視化新聞閱讀時，用戶期望在一屏之內(nèi)看完一組確定的邏輯關(guān)系，而不是通過反復上拉下拉操作才能理解好一個意思。

我們可以拿自己的一個策劃做反例，網(wǎng)易新媒體實驗室在移動端數(shù)據(jù)新聞的嘗試過程中，也有過用長信息圖呈現(xiàn)的實驗。實際上，傳統(tǒng)的pc端長信息圖在移動端往往會造成用戶閱讀數(shù)據(jù)新聞的不連貫——看到后面忘記前面的內(nèi)容，反之亦然。比如在《卡梅倫連任英國首相，來瞧瞧近11位首相如何》中，我們運用了連線體現(xiàn)11位首相和他們的任職時間、黨派、星座之間的關(guān)聯(lián)。整張圖在pc端上看清晰易懂，但在移動端時顯得十分冗長，用戶要來回拉動手機屏幕才能看清連線的一端究竟是什么，體驗并不順暢；而且看到下方時容易忘記對應(yīng)的顏色是代表什么，即忘記圖例。再如《閱兵方隊背后的數(shù)字：84%的裝備首亮相》這個長圖，我們將四種方隊數(shù)量做了可視化處理，用戶依然要通過小幅的上下拉動來看具體方隊的亮點和情況（如圖1，圖2）。

圖1：長信息圖在移動端如果不上下拉動，看不到對應(yīng)的圖例

圖2：用戶拉動到主要呈現(xiàn)位置時，也看不到完整的邏輯呈現(xiàn)

二、通過gif動圖實現(xiàn)多幀切換，讓用戶能在一屏中瀏覽多維度內(nèi)容

那有沒有辦法讓用戶不至于拉到下方忘記上面的圖例，不用拉伸看清楚對應(yīng)的關(guān)系？我們發(fā)現(xiàn)，最直接的辦法是把各類圖例和一組組的數(shù)據(jù)關(guān)系都做在一個手機屏幕尺寸大小的頁面內(nèi)。網(wǎng)易新媒體實驗室把一張長信息圖里的可視化素材進行分類，把長信息圖做了一定的變形，切割成屏幕大小的一組組小信息圖后，制作了GIF小動圖來實現(xiàn)一屏內(nèi)的多幀切換。它既能讓信息圖在一屏內(nèi)承載不同維度的信息量，又能引導用戶的閱讀順序，是個不錯的辦法。

在《全球恐怖襲擊15年：多為爆炸襲擊和連環(huán)案》中網(wǎng)易新媒體實驗室即進行了這樣的嘗試，我們搜集了全球近15年來恐怖襲擊的事件地點、襲擊方式、死亡人數(shù)等。在呈現(xiàn)上，突破了傳統(tǒng)的時間軸模式，以五年作為一個區(qū)間，做成信息圖的一個定格，通過GIF切換依次呈現(xiàn)每個定格，讓用戶不用進行任何操作，配合簡單的圖例，用戶即能在一屏內(nèi)看到每五年恐怖襲擊的事件和隨時間發(fā)生的變化，大大降低了閱讀成本。

圖3：把長圖切割為三張手機屏幕大小的小圖，再制作成gif

三、H5交互專題能讓用戶通過切換頁面看完多組數(shù)據(jù)，需要邏輯清晰

GIF動圖的操作可以說是一個實驗，通過動圖，我們在一定程度上解決了長信息圖單屏閱讀時邏輯缺失的問題，但是在實現(xiàn)過程中，也發(fā)現(xiàn)了GIF動圖適用空間有限。一是在移動端打開GIF動圖加載速度偏慢；二是動圖多幀切換容納的信息不能太多，當有3個以上維度時，跳動著容易導致閱讀體驗混亂；三是GIF動圖通過設(shè)置自動播放時間帶動用戶閱讀節(jié)奏，但每個人對下一幀等待的時間要求不同，閱讀體驗本身也不夠好。

在這方面，移動端的H5交互專題可以彌補GIF動圖的不足。和動圖類似，它能夠?qū)⒖梢暬膬?nèi)容按照一定的邏輯進行切割，通過用戶可控的翻頁得以一個子標題一個子標題、一層邏輯一層邏輯地閱讀完整個數(shù)據(jù)新聞可視化產(chǎn)品。

比如網(wǎng)易新媒體實驗室制作的《影視劇里的中國抗日》，專題內(nèi)容分為 “五六十年代、70年代、80年代、90年代以來、2010年后”五個邏輯點，用戶手動切換頁面能查看和感受對應(yīng)邏輯層次的內(nèi)容，這個信息量簡單的gif動圖切換是無法承載的。

圖4：做成H5交互專題時，能突破動圖局限，呈現(xiàn)邏輯更多

網(wǎng)易新媒體實驗室結(jié)合專題特點和用戶數(shù)據(jù)進行了一定的產(chǎn)品調(diào)研和用戶研究，我們發(fā)現(xiàn)用戶在交互專題頁面瀏覽時不一定閱讀完整個產(chǎn)品，如果該H5專題超過8頁，用戶跳出率非常高。所以我們在通過H5交互專題制作數(shù)據(jù)新聞可視化時，同樣離不開一定的排列邏輯，這樣用戶會較有耐心地跟著看完。比如《影視劇里的中國抗日》這個策劃，圍繞主題按時間順序進行呈現(xiàn)，總體邏輯在五點附近。這也是結(jié)合用戶閱讀規(guī)律，根據(jù)翻頁操作繁瑣的現(xiàn)實，力求做到移動端新聞閱讀簡潔直接，做出的妥協(xié)。

四、以時間做自變量，讓數(shù)據(jù)跟著它變化，能增加交互頁面邏輯性

可見，要想更好地在移動端呈現(xiàn)多元信息，將可視化素材進行有效切割極為重要，基于時間關(guān)系的切割是一種相對直接的操作方式。較之《影視劇里的中國抗日》，網(wǎng)易新媒體實驗室在《1931-1945日軍侵華地圖》這個H5交互專題中，把“時間關(guān)系引領(lǐng)整個專題閱讀”做得更為細致。在策劃時，我們首先明確了要以年份為主邏輯引導用戶一層層閱讀，然后在主時間關(guān)系的基礎(chǔ)上延伸出許多輔助內(nèi)容，如當年的軍力、戰(zhàn)略物資、淪陷省份等。在時間作為自變量的基礎(chǔ)上，各種延伸數(shù)據(jù)作為因變量隨之不斷變化。內(nèi)容的主次和呈現(xiàn)的邏輯都十分鮮明（如圖5）。

圖5：用戶通過切換不同時間，查看相應(yīng)內(nèi)容，帶動閱讀節(jié)奏

圖6：以地理位置做區(qū)分，用戶通過切換不同位置查看相應(yīng)內(nèi)容

值得一提的是，在頁面交互設(shè)計方面，我們放棄了單調(diào)的翻頁樣式，代之以在同一個場景內(nèi)進行時間滾軸切換。這種方式既保留了時間邏輯，同時也讓可視化內(nèi)容的遞進顯得更加細膩、不至于完全割裂。在用戶操作方面，考慮到用戶閱讀習慣，我們并沒有使用點擊按鈕的方式，即用戶通過習慣性的下滑手勢，就能看到時間變化和對應(yīng)的內(nèi)容變化。這樣的交互效果擺脫了呆板的ppt式單頁切換，變成在上一幀的基礎(chǔ)上隨時間變化各因變量跟著變化，呈現(xiàn)上更趨靈活和豐富。

五、地理關(guān)系也是切割可視化內(nèi)容的重要方式，用戶容易跟進閱讀

除了時間做自變量，用地理關(guān)系做自變量也是移動端可視化編排的一個重要方式，比如網(wǎng)易新媒體實驗室制作的《少林CEO釋永信的全球布局》這個H5專題。作為數(shù)據(jù)新聞中繞不開的常見元素，地圖是表現(xiàn)地理位置最直觀的方式，然而在界面有限的手機端閱讀，如何讓復雜的地圖變得清晰易讀，也是一個需要思考創(chuàng)新并適當變通的點。

在這個專題中，我們使用了世界地圖來表達少林寺方丈釋永信在全球各地的主要活動，我們并沒有對地圖進行縮小處理。通過劃分5個大洲，讓整張大地圖在一屏內(nèi)的固定區(qū)域中顯示不同的地域，用戶可以通過地理位置的選擇，查看每個區(qū)域發(fā)生的不同事件和相關(guān)影響（如圖6）。

這種處理有兩個好處，一是讓地理位置的切換變得連貫和清晰可見，位置的滑動營造了一種遍布全球的感覺，貼合內(nèi)容主題。二是手動選擇區(qū)域讓用戶易于跟進閱讀，在操作體驗上有解鎖和探秘的閱讀體驗。

六、當一屏內(nèi)難以放下所需信息時，巧妙設(shè)計按鈕和過渡頁的浮層

當然，不論如何巧妙切換，在單屏中，頁面對于信息量的局限始終存在，這時候按鈕的設(shè)置就顯得十分必要。在上面《少林CEO釋永信的全球布局》這個題中，我們運用了較大面積來表現(xiàn)地理位置和相關(guān)事件的關(guān)聯(lián)，邏輯清晰但略顯單薄。釋永信的身份是什么，全球布局又如何一步一步形成，這類的附加信息用戶無法通過主邏輯捕捉到。于是，我們選擇在頁面下方固定兩個按鈕：“全球布局之路的形成”和“釋永信的多重身份”作為用戶閱讀時的信息補充，這樣既不影響地理主邏輯的表達，又完善和增加了相關(guān)信息維度，使得整個專題更加完善和耐看。

按鈕的優(yōu)勢和局限都是用戶 “可點可不點”，當文字量較大且都為必要呈現(xiàn)時，我們就得思考別的方式來呈現(xiàn)。網(wǎng)易新媒體實驗室在制作《雙線還原廣島原子彈爆炸前的77分鐘》這個選題時，我們遇到了難題。作為敘事性強的故事還原型可視化策劃，帶有心理描寫的文字對氛圍的渲染必不可少。我們期望通過統(tǒng)一的時間點，在一屏內(nèi)對比呈現(xiàn)廣島居民和美軍投彈手的不同表現(xiàn)。這種對稱關(guān)系的強烈的沖突性，完全基于有效的內(nèi)容渲染，文字內(nèi)容非常重要且無法刪減。但是如果把內(nèi)容隱藏在按鈕內(nèi)，不斷點擊的操作會大大影響用戶的閱讀體驗，導致信息傳遞的不完整。針對這種情況，我們設(shè)計了過渡頁浮層，將交互效果設(shè)置為必然出現(xiàn)。這樣一來，用戶先一目了然的看到爆炸倒計時，和兩個典型人物的一句話自述，引起閱讀興趣，再通過滑動同時出現(xiàn)兩個敘事性的小浮層，展現(xiàn)兩個人物的詳細自述，相當于在原有的時間邏輯上進行了內(nèi)容疊加。增加了少量的滑動次數(shù)，保證了閱讀體驗的完整性（如圖7）。

圖7：用戶進入頁面時先看到主干信息，再次推動看到詳細自述

逐年淪喪的國土：1931-1945日軍侵華地圖

“少林CEO”釋永信的全球布局

廣島核爆70周年還原最后瞬間

移動端進行數(shù)據(jù)新聞可視化的探索是一個長期的過程，就網(wǎng)易新媒體實驗室而言，用好時間和位置兩個維度是重要手法。內(nèi)容策劃上，按時間和位置進行歸類，能實現(xiàn)多維度內(nèi)容有邏輯的切換；在頁面交互上，按界面空間合理設(shè)置按鈕或用戶切換的時間差設(shè)計過渡頁，也能更好地承載內(nèi)容資訊。我們對移動端數(shù)據(jù)新聞界面編排和切換交互探索的目的，是力圖突破巴掌大的手機頁面限制，讓移動端的數(shù)據(jù)新聞同樣做到“邏輯好有內(nèi)涵”、“容易讀還有趣”。

（作者單位：許秋里，網(wǎng)易新媒體實驗室主管；王丹寧，網(wǎng)易新媒體實驗室編輯）