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

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

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

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

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

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

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

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

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

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

　　它并不是藝術(shù)，也談不上設(shè)計，因為你在解釋它。

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

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

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

　　“可是我的用戶就要高清大圖單頁滾動啊!”

　　是啊，可是高清大圖和單頁滾動都不存在問題，問題在箭頭和提示上。有許多解決方案比箭頭和提示更好。

　　使用動效來同用戶溝通

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

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

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

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

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

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

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

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

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

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

　　結(jié)語

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