原作者：KIM FLAHERTY? ??

譯者：王水

摘要：有時(shí)盡管屏幕外還有待瀏覽的內(nèi)容，用戶可能誤以為他們已經(jīng)瀏覽了整個(gè)頁(yè)面。在界面設(shè)計(jì)中，設(shè)計(jì)師需要幫助用戶發(fā)掘頁(yè)面中的所有相關(guān)信息。

瀏覽網(wǎng)頁(yè)正如用望遠(yuǎn)鏡觀賞風(fēng)景，實(shí)時(shí)成像只能顯示風(fēng)景的一小部分，你需要經(jīng)常上下左右變換取景位置來一窺全貌。與此類似，用戶在瀏覽網(wǎng)頁(yè)時(shí)經(jīng)常需要上下滾動(dòng)或左右滑動(dòng)頁(yè)面來獲取全部?jī)?nèi)容。

通過望遠(yuǎn)鏡觀賞風(fēng)景時(shí)，我們知道只需移動(dòng)望遠(yuǎn)鏡，其它方向的廣闊的風(fēng)景就會(huì)出現(xiàn)。但是在瀏覽網(wǎng)頁(yè)時(shí)，用戶必須依據(jù)頁(yè)面設(shè)計(jì)來判斷是否有繼續(xù)探索的可能。用戶也許從未看到掩藏的金礦，除非他們知道或有意愿滾動(dòng)網(wǎng)頁(yè)。這就需要設(shè)計(jì)師在界面設(shè)計(jì)中，通過對(duì)屏幕下方或側(cè)邊的內(nèi)容給出提示信號(hào)，來引導(dǎo)用戶發(fā)掘頁(yè)面中的重要信息。

定義：完整性錯(cuò)覺

當(dāng)屏幕上的可見內(nèi)容看上去好像是完整的，但實(shí)際上在可見區(qū)域之外還隱藏著更多信息時(shí)，便產(chǎn)生了完整性錯(cuò)覺（illusion of completeness）。該術(shù)語(yǔ)由Bruce Tognazzini在1998年提出。當(dāng)視覺設(shè)計(jì)不能很好的引導(dǎo)用戶發(fā)掘屏幕區(qū)域之外的內(nèi)容時(shí)，錯(cuò)覺將產(chǎn)生。用戶認(rèn)為所呈現(xiàn)的頁(yè)面是完整的，實(shí)際上卻并不是這樣，這是一個(gè)嚴(yán)重的可用性問題，它可能會(huì)導(dǎo)致用戶錯(cuò)過有價(jià)值的內(nèi)容，阻礙用戶達(dá)成目標(biāo)。

既然已經(jīng)就此可用性問題對(duì)設(shè)計(jì)師提示了長(zhǎng)達(dá)18年，為什么現(xiàn)在再次提及呢？因?yàn)橹敝两袢蘸芏嗾军c(diǎn)依然在犯同樣的錯(cuò)誤。我們?cè)谡谶M(jìn)行的很多用戶研究中發(fā)現(xiàn)，用戶依然被完整性錯(cuò)覺所困擾?，F(xiàn)在就讓我們一鼓作氣來消滅網(wǎng)頁(yè)中的完整性錯(cuò)覺，以便它不需要在18年后的2034年再一次提起。

垂直維度的完整性錯(cuò)覺

在早期的網(wǎng)頁(yè)中，用戶較少滾動(dòng)頁(yè)面查看。之后用戶逐漸養(yǎng)成了垂直滾動(dòng)的習(xí)慣。然而，及時(shí)用戶習(xí)得了滾動(dòng)的操作，我們不能期待他們即使在缺少視覺提示時(shí)滾動(dòng)頁(yè)面。如果用戶并不認(rèn)為頁(yè)面上有其它信息，他們憑什么要滾動(dòng)頁(yè)面呢？

以下是一些表示相關(guān)內(nèi)容結(jié)束的設(shè)計(jì)樣式，它們會(huì)造成完整性錯(cuò)覺：

巨大的頭圖或視頻

基于圖像的最新設(shè)計(jì)趨勢(shì)使得很多網(wǎng)站在頁(yè)面頂端展示引人注目的影像或視頻。這種處理方式經(jīng)常造成重要的內(nèi)容被擠到首屏下方，且無附加線索引導(dǎo)用戶滾動(dòng)頁(yè)面。

紐約的外賣網(wǎng)站Maple.com，自動(dòng)播放的視頻占據(jù)了整個(gè)首屏。在所有設(shè)備上，其它內(nèi)容都隱藏在在這張圖片的下方。

在上面的實(shí)例中，大尺寸的視頻與強(qiáng)烈的標(biāo)語(yǔ)顯得頁(yè)面似乎已是完整的，但實(shí)際上關(guān)于公司的所有細(xì)節(jié)概述在屏幕的更下方。這樣的設(shè)計(jì)創(chuàng)建了頁(yè)面的“偽底部（a false floor）”，給了頁(yè)面一個(gè)明顯的結(jié)尾。此外，導(dǎo)航元素的匱乏也促成了這樣的效果。

在可用性研究中，當(dāng)我們讓訪問此站點(diǎn)的用戶找出此公司提供何種服務(wù)時(shí)，八位被試中有六位都沒有意識(shí)到此頁(yè)面可以向下滾動(dòng)。因?yàn)闆]有其它可見的鏈接或者行為召喚按鈕，我們的所有被試都選擇了“Get Started”按鈕，填寫一系列詢問個(gè)人信息的模態(tài)窗口，之后卻發(fā)現(xiàn)他們所在的地區(qū)竟不在服務(wù)范圍。75%的被試感到挫敗，他們不僅費(fèi)時(shí)費(fèi)力在網(wǎng)站上填寫了個(gè)人信息，而且不能找出公司提供何種服務(wù)。

明顯的水平線

完整性錯(cuò)覺不僅發(fā)生在頁(yè)面上方（如上個(gè)例子），它可能發(fā)生在頁(yè)面的任何部位。用通欄的水平線標(biāo)記的內(nèi)容間隔可能會(huì)造成視覺障礙，阻止用戶繼續(xù)滾動(dòng)頁(yè)面。如果用戶再瀏覽頁(yè)面時(shí)遇到頁(yè)面內(nèi)容中的強(qiáng)烈橫向隔斷，也許會(huì)假設(shè)這里不僅是一個(gè)部分的結(jié)束，更是整個(gè)頁(yè)面的末尾。

virginamerica.com在頁(yè)面部分之間有通欄的水平線，這會(huì)錯(cuò)誤地提示內(nèi)容的結(jié)束。

內(nèi)容組件間的大量留白

當(dāng)水平間距太大或內(nèi)容不能剛好填滿容器區(qū)域時(shí)，用戶向下滾動(dòng)頁(yè)面，卻看到了內(nèi)容組件之間的大間距，這可能暗示著頁(yè)面的結(jié)束。如果看起來用戶似乎不會(huì)在頁(yè)面中獲得更多信息，那為什么要繼續(xù)滾動(dòng)頁(yè)面呢？

Urbanoutfitters.com紅色陰影標(biāo)示出了內(nèi)容部分。盡管頁(yè)面下方還有更多內(nèi)容，各部分之間的水平間隔使頁(yè)面看起來似乎已經(jīng)完成

內(nèi)容流的中斷

廣告、內(nèi)部推廣或社會(huì)化分享按鈕會(huì)向用戶表明他們已經(jīng)到達(dá)了頁(yè)面相關(guān)內(nèi)容的盡頭。如果廣告足夠大以至于很難看見它下面的內(nèi)容，問題會(huì)更加嚴(yán)重（特別在小尺寸的移動(dòng)設(shè)備上）。此外，當(dāng)廣告位于內(nèi)容流的“自然終點(diǎn)”時(shí)（如文章的末尾），用戶有理由認(rèn)為頁(yè)面下方已沒有其它有趣的信息（盡管廣告下方可能仍然有文章評(píng)論或者相關(guān)內(nèi)容）。

Salon.com在主體內(nèi)容部分的中間插入了大尺寸的廣告。廣告之后是否有還有其它內(nèi)容并不清晰

橫向維度的完整性錯(cuò)覺

盡管用戶已經(jīng)習(xí)慣了在網(wǎng)頁(yè)端垂直滾動(dòng)，橫向滾動(dòng)（或滑動(dòng)）仍不是用戶預(yù)期的pc端頁(yè)面上的交互方式。甚至在水平滑動(dòng)手勢(shì)很常見的移動(dòng)設(shè)備上，依賴橫向手勢(shì)的界面仍然對(duì)需要對(duì)用戶進(jìn)行有力的引導(dǎo)來表明交互作用的方向。

用戶在使用ios應(yīng)用Yahoo Digest瀏覽新聞文章時(shí)，需要滑動(dòng)來顯示下一篇文章。這種手勢(shì)很像在一副撲克牌中移除頂端的牌來露出下面的牌（這就是為什么這種交互模式被稱為“撲克牌”的原因）。在這種情況下，缺乏視覺提示的屏幕提示水平滑動(dòng)的可能性。

在pc網(wǎng)頁(yè)上，水平導(dǎo)航時(shí)常與輪換圖相關(guān)。因此，暗示輪換圖的交互方式、顯示剩余的輪換圖幀數(shù)的提示非常關(guān)鍵。

Novartis.com.圖片底部的圓點(diǎn)是較弱的提示：它們并不顯而易見，導(dǎo)航箭頭只在光標(biāo)移上去時(shí)才顯示出來。不過從好的一面看，輪換圖下方顯露的下面部分的導(dǎo)航(Corporate, Careers, News and Research)成功地引導(dǎo)用戶垂直滾動(dòng)頁(yè)面。

整個(gè)網(wǎng)頁(yè)橫向布局，需要用戶用水平滾動(dòng)條來瀏覽全部?jī)?nèi)容的情況并不多見。有時(shí)設(shè)計(jì)師或創(chuàng)意公司在網(wǎng)站中應(yīng)用水平滾動(dòng)來展示創(chuàng)意成果。在主流的網(wǎng)站中不建議完全使用水平滾動(dòng)。水平滾動(dòng)條笨重繁瑣，因其需要持續(xù)的注意和體力來控制光標(biāo)在狹窄的區(qū)域中，且基于水平滾動(dòng)的網(wǎng)站很容易與垂直滾動(dòng)的網(wǎng)站一樣產(chǎn)生完整性錯(cuò)覺。

Secondstory.com使用水平布局。頁(yè)面右側(cè)隱藏的額外內(nèi)容并不容易被發(fā)現(xiàn)。用戶需要識(shí)別出頁(yè)面右側(cè)、隱藏在圖片的頂部的黃色箭頭，或者使用鼠標(biāo)熟練操作頁(yè)面底部的橫向滾動(dòng)條。

確保你的頁(yè)面?zhèn)鬟_(dá)連續(xù)性而不是完整性的Tips：

1.避免使用全尺寸的頭圖。在頁(yè)面頂部使用大尺寸的banner、輪換圖或者視頻時(shí)，確保更多內(nèi)容出現(xiàn)在頁(yè)面首屏，以引導(dǎo)用戶繼續(xù)滾動(dòng)。

2.注意內(nèi)容之間的對(duì)比線或大量留白。這些視覺信息可能會(huì)被誤認(rèn)為相關(guān)內(nèi)容的結(jié)尾。

3.留心內(nèi)容流的打斷。如果必須在內(nèi)容中插入廣告或社會(huì)化分享圖標(biāo)，你需要告知用戶頁(yè)面下方還有其它信息。

Delish.com:文章中的廣告前加入提示，以便用戶繼續(xù)閱讀。（盡管使用了低對(duì)比度的文字）

4.為水平滑動(dòng)創(chuàng)造明顯的提示線索。關(guān)鍵信息不應(yīng)放入輪換圖或任何水平滾動(dòng)容器中。用戶經(jīng)常錯(cuò)過導(dǎo)航提示，即使它們很明顯。另外，這些線索提供的提示作用太弱，人們不確定是否應(yīng)對(duì)其它附加內(nèi)容加以期待。當(dāng)你使用輪換圖時(shí)，應(yīng)該找到方法來清楚地表示附加信息的存在：

5.以“出血”的方式展示屏幕外的附加信息（在屏幕邊緣展示不完整的信息）。

6.在各個(gè)幀的輪換圖中展示標(biāo)題列表，用來提示內(nèi)容

7.提供突出明顯的箭頭控件和滑動(dòng)計(jì)數(shù)控件

Netflix.com用輪換圖來展示每個(gè)類別中的項(xiàng)目。右側(cè)視覺元素溢出屏幕的處理暗示著選項(xiàng)的延續(xù)性。

8.多設(shè)備測(cè)試，確保設(shè)計(jì)元素在不同的顯示尺寸下的效果。