視差滾動(dòng)：高清大圖+“向下滾動(dòng)”=偷懶式設(shè)計(jì)

 　　扁平化已成主流，簡(jiǎn)約風(fēng)隨處可見，全景大圖+單頁(yè)設(shè)計(jì)也已經(jīng)成為了高大上的代名詞。隨便結(jié)合幾種大勢(shì)所趨的設(shè)計(jì)手法似乎就能成就一個(gè)逼格爆棚的好網(wǎng)站，打磨細(xì)節(jié)似乎已不必要，真的是這樣么?細(xì)節(jié)里面蹲滿了魔鬼。今天，來(lái)自 VTEX Lab?的UI/UX設(shè)計(jì)師Rodrigo Muniz 撰文反思了單頁(yè)滾動(dòng)設(shè)計(jì)中的用戶體驗(yàn)問(wèn)題，如果你也是細(xì)節(jié)打磨強(qiáng)迫癥患者，這篇文章就是你的藥……

　　我們已經(jīng)看過(guò)太多這樣的網(wǎng)站了，高清細(xì)膩的大圖背景橫跨屏幕，填滿你的視野。是的，大家都喜歡這樣的范兒，這也是時(shí)下流行的設(shè)計(jì)趨勢(shì)?？墒牵@樣的設(shè)計(jì)真的都盡如人意么?

　　我們打開這個(gè)頁(yè)面，圖片很贊，配色舒服，可是視線挪到頁(yè)面底部——為什么會(huì)有這樣的按鈕閃爍地告訴我“向下滾動(dòng)”?我們都明白怎么瀏覽網(wǎng)頁(yè)好嗎!這個(gè)提醒就如同在按鈕上標(biāo)注“點(diǎn)我”一樣累贅。

　　高清大圖+“向下滾動(dòng)”=偷懶式設(shè)計(jì)

　　“如果你需要為你的設(shè)計(jì)作出解釋，那么這個(gè)設(shè)計(jì)是失敗的。———?Milton Glaser”

　　這樣的設(shè)計(jì)打破了用戶探索式交互的自然感知過(guò)程。每個(gè)人都清楚如何滾動(dòng)瀏覽網(wǎng)頁(yè)，這是下意識(shí)的行為，所以，這個(gè)多余的“向下滾動(dòng)”可以說(shuō)是打破了網(wǎng)頁(yè)瀏覽的基本心智模式，這種“偷懶設(shè)計(jì)”就是典型的可供性(Affordance)設(shè)計(jì)的問(wèn)題了。

　　什么是可供性設(shè)計(jì)呢?《Affordance(可供性)和設(shè)計(jì)》這篇文章曾對(duì)此進(jìn)行過(guò)解釋：

　　Affordance 是 James J. Gibson 造出來(lái)的一個(gè)詞，Gibson 是20世紀(jì)最重要的認(rèn)知心理學(xué)家之一，他的生態(tài)學(xué)式視知覺(jué)論和直接知覺(jué)為認(rèn)知心理學(xué)開辟了新的領(lǐng)地。affordance 是 afford (提供、給予、承擔(dān))的名詞形式，環(huán)境的 affordance 是指這個(gè)環(huán)境可提供給動(dòng)物的屬性，無(wú)論是好的還是壞的，所以我認(rèn)為“可供性”是一個(gè)合適的翻譯。Gibson 用來(lái)解釋 affordance 的例子是這樣的：如果一塊地表面接近水平(而不是傾斜的)，接近平整的(而不是凸起或凹陷的)，以及充分延伸的(與動(dòng)物的尺寸相關(guān))，如果地表面的物質(zhì)是堅(jiān)硬的(與動(dòng)物的重量相關(guān))，我們可稱它為基底、場(chǎng)地或地面，它是可以站上去的(stan-on-able)，可讓四足或兩足動(dòng)物保持豎直姿勢(shì)，它是可以行走(walk-on-able)和跑動(dòng)(run-over-able)的，它不像水表面或沼澤表面之于一定重量的動(dòng)物那樣是可陷入的(sink-into-able)。列出的四項(xiàng)屬性——水平、平整、延伸和堅(jiān)硬——它們是這個(gè)表面的物理屬性，如果以物理中使用的度量衡去衡量它們的話，但是對(duì)于特定動(dòng)物的支撐可供性，它們必須與動(dòng)物關(guān)聯(lián)上才可以被衡量，它們不是抽象的物理屬性，它們是為所指動(dòng)物特定的，與動(dòng)物的姿勢(shì)和行為相關(guān)，所以 affordance 不能像我們?cè)谖锢碇心菢觼?lái)衡量。

　　從可供性的角度上來(lái)看，瀏覽網(wǎng)頁(yè)的用戶是網(wǎng)頁(yè)設(shè)計(jì)的可供性設(shè)計(jì)的對(duì)象，簡(jiǎn)單粗暴的“點(diǎn)我”或者“向下滾動(dòng)”無(wú)疑是尷尬的體驗(yàn)和視覺(jué)噪音，它與“設(shè)計(jì)”一詞相去深遠(yuǎn)。

　　它并不是藝術(shù)，也談不上設(shè)計(jì)，因?yàn)槟阍诮忉屗?/p>

　　Huge曾經(jīng)針對(duì)單頁(yè)滾動(dòng)設(shè)計(jì)做過(guò)一項(xiàng)研究，戳這里可以瀏覽全文。

　　Huge 的研究表明，當(dāng)用戶體驗(yàn)的可供性設(shè)計(jì)被打破的時(shí)候，用戶會(huì)略過(guò)網(wǎng)頁(yè)上的許多內(nèi)容。使用箭頭和“向下翻頁(yè)”的提示的確可以降低用戶忽略下面內(nèi)容的可能性，但是用戶體驗(yàn)又會(huì)因此而降低，換言之，這種設(shè)計(jì)可行但是不夠好。

　　不論是“向下滾動(dòng)”、“點(diǎn)我翻頁(yè)”還是單純的向下箭頭，其實(shí)都是一種懶惰的設(shè)計(jì)、粗暴的解決方案。

　　“可是我的用戶就要高清大圖單頁(yè)滾動(dòng)啊!”

　　是啊，可是高清大圖和單頁(yè)滾動(dòng)都不存在問(wèn)題，問(wèn)題在箭頭和提示上。有許多解決方案比箭頭和提示更好。

　　使用動(dòng)效來(lái)同用戶溝通

　　在高清大圖下使用動(dòng)效元素可以更為優(yōu)雅地提示用戶“下方還有內(nèi)容”。和許多設(shè)計(jì)問(wèn)題一樣，完美的解決方案不存在，但是能極大的提升現(xiàn)有的用戶體驗(yàn)。

　　在第一個(gè)案例中，大圖下方的內(nèi)容從屏幕底部悄悄探出頭來(lái)，仿佛在告訴用戶“Hello，我在這兒哦，如果想看的話，向下滾動(dòng)就好啦”。

　　如果你在網(wǎng)頁(yè)設(shè)計(jì)中使用了視差滾動(dòng)的設(shè)計(jì)，那么你可以充分視差滾動(dòng)的特性，讓“探頭”特效出現(xiàn)的時(shí)候，背景圖片也適時(shí)地縮小，這不僅達(dá)到提醒的目的，還讓整個(gè)頁(yè)面的特效更加一致。

　　如果下方內(nèi)容是由多個(gè)區(qū)塊構(gòu)成的，那么動(dòng)效還可以這樣做：

　　掌控內(nèi)容，不要隱藏

　　來(lái)自Google的Android平臺(tái)健康類應(yīng)用Google Fit 就是一個(gè)不錯(cuò)的案例，環(huán)形信息圖的下方，卡片式的內(nèi)容露出一個(gè)頭告訴你下方有更多的內(nèi)容。這種方式直觀且優(yōu)雅，不用使用額外的元素來(lái)向用戶傳遞信息，還保證了主題內(nèi)容有足夠的空間呈現(xiàn)。

　　這種設(shè)計(jì)方式并非剛剛提出，實(shí)際上早期2006年的時(shí)候，Jared Spool 就已經(jīng)探討過(guò)這種露頭式的設(shè)計(jì)對(duì)網(wǎng)頁(yè)滾動(dòng)瀏覽的可供性設(shè)計(jì)的影響。

　　考慮到老電腦和老版本瀏覽器的存在，動(dòng)效并不一定能良好運(yùn)行。這個(gè)時(shí)候，你可以借助幾行CSS代碼或者JS代碼解決這個(gè)問(wèn)題，比如設(shè)定背景大圖的高度為整個(gè)瀏覽器視野高度的90%，露出下方的內(nèi)容即可。

　　如果保持背景不變，下方內(nèi)容以低透明度的形式和背景疊加會(huì)怎樣呢?實(shí)際上，這樣并不會(huì)影響漂亮的背景大圖的視覺(jué)中心地位：

　　這種設(shè)計(jì)方案最重要的是控制好不透明度，太高會(huì)喧賓奪主，太低的話，用戶會(huì)忽略下方內(nèi)容。當(dāng)用戶向下滾動(dòng)的時(shí)候，不透明度提高，這樣的體驗(yàn)不會(huì)太差。

　　結(jié)語(yǔ)

　　簡(jiǎn)約設(shè)計(jì)或者極簡(jiǎn)設(shè)計(jì)并不簡(jiǎn)單，這一點(diǎn)毋庸置疑。那些看起來(lái)很簡(jiǎn)單的解決方案通常會(huì)顯得設(shè)計(jì)師“過(guò)于懶惰”，那些真正優(yōu)秀的設(shè)計(jì)通常在細(xì)節(jié)和體驗(yàn)上極為用心，降低一分噪音，通常需要十分的氣力來(lái)補(bǔ)充。