今天，我們?cè)诰W(wǎng)頁(yè)端的維基百科當(dāng)中發(fā)布了頁(yè)面快速預(yù)覽功能。以下是該項(xiàng)目背后的一些設(shè)計(jì)思路與經(jīng)驗(yàn)沉淀。

兔子洞

人們喜歡維基百科。喜歡的原因來(lái)自多個(gè)方面，譬如以下由 XKCD 所描述的這一點(diǎn)就非常具有代表性。雖然圖中的用詞是“問(wèn)題”，看上去像是在表達(dá)不滿，但我認(rèn)為正是這些“問(wèn)題”使他對(duì)維基百科愛(ài)不釋手：

圖片來(lái)自 Randall Monroe（XKCD）

我們內(nèi)部將 XKCD 所描述的這種狀況稱為“兔子洞”；這正是我們?cè)诰S基百科上看到的最具代表性也是最受歡迎的用戶模式之一：人們從一篇文章開(kāi)始，通過(guò)內(nèi)鏈不斷地瀏覽到更多地方，沿途學(xué)習(xí)著許多不同的主題。

保持語(yǔ)境，降低成本

設(shè)計(jì)目標(biāo)決定著設(shè)計(jì)決策的優(yōu)劣。我們?yōu)樽x者而設(shè)計(jì)，優(yōu)化的目標(biāo)在于幫助讀者學(xué)習(xí)，而非盲目追求頁(yè)面瀏覽量或互動(dòng)率。如何確保用戶在當(dāng)前頁(yè)面語(yǔ)境中了解更多內(nèi)容，避免頻繁的頁(yè)面跳轉(zhuǎn)，這對(duì)于提升學(xué)習(xí)質(zhì)量很關(guān)鍵。

自 JavaScript 誕生以來(lái)，頁(yè)面快速預(yù)覽就成為了一種非常實(shí)用的交互設(shè)計(jì)模式。

Twitter 通過(guò)快速預(yù)覽功能來(lái)呈現(xiàn)用戶信息

在不脫離當(dāng)前頁(yè)面語(yǔ)境的情況下提供信息預(yù)覽，這不是什么創(chuàng)新的解決方案了。然而對(duì)于維基百科而言，即便要實(shí)現(xiàn)一些最基本的交互模式調(diào)整，我們也會(huì)面臨獨(dú)特的挑戰(zhàn)。一起來(lái)了解一下為什么這會(huì)是一個(gè)棘手的問(wèn)題。

通過(guò)數(shù)據(jù)了解問(wèn)題所在

? 維基百科近四分之一的流量來(lái)自藍(lán)色內(nèi)鏈的點(diǎn)擊，也就是我們所說(shuō)的“掉進(jìn)兔子洞”。

? 藍(lán)色內(nèi)鏈每個(gè)月會(huì)產(chǎn)生40億的 PV。

? 在維基百科上，每秒鐘有超過(guò)10000個(gè)藍(lán)色內(nèi)鏈被鼠標(biāo)懸停。

換句話說(shuō)，藍(lán)色內(nèi)鏈?zhǔn)蔷S基百科上最常用的交互元素。因此，對(duì)于藍(lán)色內(nèi)鏈及其相關(guān)功能的任何變動(dòng)，都會(huì)變得非常微妙和具有挑戰(zhàn)性。

增加價(jià)值，而非痛苦

調(diào)整這種高頻行為絕非易事。我們從定性和定量的角度來(lái)歸納出預(yù)覽功能的交互時(shí)間線：

時(shí)間線顯示了藍(lán)色內(nèi)鏈上產(chǎn)生鼠標(biāo)懸停之后發(fā)生的事件

圖片來(lái)自 Nizar Pangarkar / Wikimedia Foundation

考慮到維基百科的規(guī)模，這些變量當(dāng)中的任何一個(gè)微小的調(diào)整都有可能對(duì)用戶體驗(yàn)甚至是網(wǎng)站本身產(chǎn)生巨大的影響。通過(guò)研究，我們發(fā)現(xiàn)有些人在瀏覽網(wǎng)頁(yè)上的文本內(nèi)容時(shí)，會(huì)將鼠標(biāo)指針懸停在語(yǔ)句上面輔助閱讀。對(duì)于這部分用戶來(lái)說(shuō)，通過(guò)鼠標(biāo)懸停來(lái)觸發(fā)快速預(yù)覽的功能甚至可能造成麻煩。

因此，人為地在預(yù)覽內(nèi)容呈現(xiàn)之前增加大約650毫秒的延遲，這將幫助我們減少誤觸發(fā)的可能性。同時(shí)，我們還為預(yù)覽功能提供了非常便捷的禁用設(shè)置。

呈現(xiàn)預(yù)覽內(nèi)容

下一個(gè)挑戰(zhàn)在于，如何針對(duì)難以準(zhǔn)確預(yù)估的實(shí)際內(nèi)容形式來(lái)設(shè)計(jì)快速預(yù)覽的內(nèi)容樣式。你怎樣才能從容應(yīng)對(duì)未知的內(nèi)容？答案是面向所有的可能性進(jìn)行設(shè)計(jì)。

邊緣案例，邊緣案例，邊緣案例

我個(gè)人不喜歡這個(gè)說(shuō)法，因?yàn)樗菀资鼓阍谶M(jìn)行設(shè)計(jì)決策時(shí)產(chǎn)生誤判。為維基百科進(jìn)行設(shè)計(jì)時(shí)，這個(gè)說(shuō)法就更加不準(zhǔn)確了。

維基百科的內(nèi)容由超過(guò)20萬(wàn)人（包括 bots）通過(guò)300余種語(yǔ)言編寫(xiě)，在語(yǔ)氣、格式、可用性、詳細(xì)度和主觀態(tài)度等諸多方面有著不同程度的差異。對(duì)于維基百科而言，一切案例都是邊緣案例，因此，也就不存在任何邊緣案例。

為維基百科設(shè)計(jì)頁(yè)面快速預(yù)覽，這有些像是在玩“俄羅斯方塊”；然而不用于游戲的是，你無(wú)法預(yù)先了解下一個(gè)方塊會(huì)是什么形狀。以下是預(yù)覽模式可能涉及到的各種變量：

圖片來(lái)自 Nizar Pangarkar / Wikimedia Foundation

一系列不同的用例組合在一起，構(gòu)成了預(yù)覽多種多樣的表現(xiàn)形式，包括“橫向圖片，縱向圖文預(yù)覽”，“縱向圖片，橫向圖文預(yù)覽”，“左文右圖”，“左圖右文”等一系列模式。在泰米爾語(yǔ)的預(yù)覽模式中，對(duì)于那些與數(shù)學(xué)相關(guān)的內(nèi)容，你必須調(diào)整文字的行高，才能實(shí)現(xiàn)正確的文字截?cái)鄻邮?- 對(duì)于我們來(lái)說(shuō)，這類(lèi)“邊緣案例”全部是設(shè)計(jì)工作的常規(guī)組成部分。

文本和圖片來(lái)自不同語(yǔ)言的維基百科文章

圖片來(lái)自 Nizar Pangarkar / Wikimedia Foundation

預(yù)覽功能的未來(lái)

這些只是開(kāi)始；頁(yè)面預(yù)覽功能還可以在諸多領(lǐng)域打開(kāi)更多的可能性。因?yàn)楸３猪?yè)面語(yǔ)境的穩(wěn)定狀態(tài)正變得越發(fā)重要，無(wú)論對(duì)于維基百科還是整個(gè)互聯(lián)網(wǎng)產(chǎn)品領(lǐng)域來(lái)說(shuō)都是如此。

以下這些只是關(guān)于模式運(yùn)用的暢想，尚未進(jìn)入正式開(kāi)發(fā)階段：

支持更多類(lèi)型的內(nèi)容

目前，頁(yè)面預(yù)覽僅用于呈現(xiàn)文章，但我們的構(gòu)建方式使得該功能在將來(lái)也可以被用于承載不同類(lèi)型的內(nèi)容及格式。

圖片來(lái)自 Nizar Pangarkar / Wikimedia Foundation

編輯器的強(qiáng)化預(yù)覽

到目前為止，頁(yè)面預(yù)覽功能僅面向于讀者；但其同樣可以被用于構(gòu)建編輯器，面向內(nèi)容編輯者提供更為全面的內(nèi)容信息及實(shí)用操作。

如今，很多內(nèi)容編輯器都在使用一種名為“導(dǎo)航彈窗”的工具，其功能特性可以很容易地由頁(yè)面預(yù)覽模式進(jìn)行承載。

圖片來(lái)自 Nizar Pangarkar / Wikimedia Foundation

維基百科網(wǎng)站之外的應(yīng)用

我們通常將維基百科作為“二類(lèi)資訊源”。如同詞典可以幫助你在讀書(shū)時(shí)了解陌生單詞的含義，維基百科也常常被人們?cè)谠L問(wèn)其他網(wǎng)站內(nèi)容時(shí)用來(lái)查詢陌生的概念。

圖片來(lái)自 Nizar Pangarkar / Wikimedia Foundation

維基百科的頁(yè)面預(yù)覽功能可以開(kāi)放給其他內(nèi)容發(fā)布者進(jìn)行調(diào)用，為他們提供快速呈現(xiàn)特定內(nèi)容相關(guān)信息的能力。

結(jié)語(yǔ)

頁(yè)面預(yù)覽功能為維基百科開(kāi)拓出了人與內(nèi)容互動(dòng)的新路，使得維基百科的閱讀體驗(yàn)可以被拆解為互動(dòng)成本更低的一個(gè)個(gè)片段。我們也期待著通過(guò)更多的交互方式使維基百科逐漸擺脫單一文章整體的認(rèn)知形態(tài)，使閱讀體驗(yàn)更加模塊化，更易于學(xué)習(xí)。