想讓用戶(hù)忍不住瀏覽下去，這5種設(shè)計(jì)策略需謹(jǐn)記

網(wǎng)站中的內(nèi)容再好，總得讓用戶(hù)能看到，才有價(jià)值，而矛盾在于，首屏的空間始終是有限的。所以，我們總希望用戶(hù)能夠滾動(dòng)頁(yè)面向下看，從某種意義上來(lái)說(shuō)，長(zhǎng)滾動(dòng)頁(yè)面和無(wú)限滾動(dòng)的設(shè)計(jì)，如此地受歡迎，就是因?yàn)樗N合了用戶(hù)下意識(shí)滾動(dòng)瀏覽的習(xí)慣，也符合內(nèi)容的創(chuàng)建者希望被用戶(hù)看到的需求。

一般而言，依托滾動(dòng)交互的頁(yè)面，同樣多的內(nèi)容，在小屏幕上需要滾動(dòng)的距離更長(zhǎng)，同時(shí)，它們也需要設(shè)計(jì)師提供更優(yōu)秀、可用性更強(qiáng)的導(dǎo)航和輔助元素，甚至借助動(dòng)效等元素來(lái)引導(dǎo)用戶(hù)滾動(dòng)瀏覽。

如果你希望你的網(wǎng)頁(yè)更能吸引用戶(hù)滾動(dòng)，那么下面的5種策略，應(yīng)該能夠幫你向著你想要的目標(biāo)，更進(jìn)一步。

1、一開(kāi)始就提供有趣的內(nèi)容

盡管許多用戶(hù)習(xí)慣于在頁(yè)面加載的時(shí)候就開(kāi)始滾動(dòng)，但是首屏的內(nèi)容對(duì)于用戶(hù)決策的影響是至關(guān)重要的。首屏內(nèi)容的好壞， 會(huì)讓用戶(hù)對(duì)于后續(xù)的內(nèi)容的期待有明顯的影響，如果首屏內(nèi)容足夠有趣，用戶(hù)會(huì)主動(dòng)向下滾動(dòng)，并且希望看到同樣有意思的內(nèi)容。

所以，作為整體設(shè)計(jì)的一部分，設(shè)計(jì)師應(yīng)當(dāng)盡量讓用戶(hù)感興趣的內(nèi)容置于首屏，傳遞給用戶(hù)一種信息，就是后面的內(nèi)容同樣有趣。

在設(shè)置內(nèi)容的時(shí)候，盡量為用戶(hù)提供：

·有趣的元素和內(nèi)容（吸引用戶(hù)注意力的內(nèi)容和信息）
·引人入勝的圖片或視頻（用戶(hù)會(huì)密切關(guān)注這類(lèi)視覺(jué)信息）

2、給用戶(hù)以視覺(jué)線索

有的時(shí)候，想讓用戶(hù)向下滾動(dòng)可以直接告知用戶(hù)這么做。為用戶(hù)提供這方面的視覺(jué)線索，比如指向下方的箭頭，或者直接用文本寫(xiě)上“Scroll Down”來(lái)告知用戶(hù)，更多的內(nèi)容在首屏之下。

視覺(jué)線索的呈現(xiàn)方式有不少，上述的明示如果不夠“優(yōu)雅”的話，你可以試著讓下方的內(nèi)容在首屏上露個(gè)頭，讓用戶(hù)明白下方有更多，也不錯(cuò)。

3、保持導(dǎo)航可見(jiàn)

導(dǎo)航是網(wǎng)站的重要組成部分，它能成就一個(gè)網(wǎng)站的好體驗(yàn)，也能毀掉它。而在設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候，最大的風(fēng)險(xiǎn)之一，就是可用性低的導(dǎo)航設(shè)計(jì)，導(dǎo)致用戶(hù)在使用過(guò)程中迷失。通常，這種設(shè)計(jì)會(huì)讓用戶(hù)感到挫敗感。所以，盡量使用懸浮置頂?shù)膶?dǎo)航欄，或者固定式的導(dǎo)航欄，一方面讓用戶(hù)始終明白自己所處的位置，另一方面也方便用戶(hù)跳轉(zhuǎn)到其他的位置。

當(dāng)為移動(dòng)端進(jìn)行設(shè)計(jì)的時(shí)候，需要注意的是導(dǎo)航會(huì)不會(huì)占據(jù)太大的空間，比較合理的策略是讓導(dǎo)航在滾動(dòng)的時(shí)候隱藏，當(dāng)準(zhǔn)備回到頂部或者停下的時(shí)候顯現(xiàn)。

4、加入動(dòng)效提升參與感

以視差滾動(dòng)為代表的動(dòng)畫(huà)特效是讓用戶(hù)滾動(dòng)瀏覽更加有趣的一種設(shè)計(jì)技巧，同時(shí)它通過(guò)有趣的設(shè)計(jì)，吸引用戶(hù)不停滾動(dòng)下去，讓用戶(hù)始終處于探索“接下來(lái)還有什么”的過(guò)程中。

考慮到頁(yè)面常常被設(shè)計(jì)成不同的區(qū)塊，可以將富有創(chuàng)意的動(dòng)效到不同的區(qū)塊當(dāng)中，讓用戶(hù)在不斷滾動(dòng)當(dāng)中，沿著設(shè)計(jì)好的路徑來(lái)瀏覽。

視差滾動(dòng)是目前最流行的特效之一，設(shè)計(jì)師可以借助元素移動(dòng)速度差來(lái)創(chuàng)造深度和沉浸感。當(dāng)用戶(hù)在平滑的滾動(dòng)瀏覽內(nèi)容的時(shí)候，視差特效所創(chuàng)造出的沉浸感能夠讓用戶(hù)有身臨其境的感覺(jué)。

5、避免滾動(dòng)劫持

滾動(dòng)劫持這個(gè)概念并不難理解，瀏覽器本身的滾動(dòng)機(jī)制被替代，用戶(hù)無(wú)法按照他們預(yù)期的、習(xí)慣的方式來(lái)滾動(dòng)瀏覽，有的時(shí)候這種狀況是設(shè)計(jì)師刻意營(yíng)造的瀏覽效果，但是并不一定能給用戶(hù)以好的體驗(yàn)，至少多數(shù)時(shí)候是超出用戶(hù)預(yù)期并且難以控制的。滾動(dòng)劫持這種狀況要盡量避免。

結(jié)語(yǔ)

滾動(dòng)是用戶(hù)交互中最基礎(chǔ)、最核心的部分，創(chuàng)造良好的滾動(dòng)體驗(yàn)只是網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)，內(nèi)容的設(shè)計(jì)，多媒體和動(dòng)效的加入，都是為了圍繞著同一個(gè)目的而運(yùn)作的：讓用戶(hù)瀏覽下去。只有讓用戶(hù)接收到信息，它們的價(jià)值才能傳遞出去。

【不容錯(cuò)過(guò)的設(shè)計(jì)實(shí)戰(zhàn)】

1. 《富有未來(lái)感的柏林之夜APP，是這樣設(shè)計(jì)出來(lái)的》
2. 《設(shè)計(jì)實(shí)戰(zhàn)！城市指南網(wǎng)站著陸頁(yè)是這樣設(shè)計(jì)出來(lái)的》
3. 《這款給醫(yī)生的專(zhuān)業(yè)APP，設(shè)計(jì)上有著怎樣不同的要求？》
4. 《幫你策劃盛大婚禮的APP，設(shè)計(jì)思路是這樣的》
5. 《這款面向大眾的理財(cái)APP，設(shè)計(jì)過(guò)程是這樣的》
6. 《一款真正讓人專(zhuān)注的效率應(yīng)用，應(yīng)該這么設(shè)計(jì)》

原文地址：webdesignerdepot
原文作者：Nick Babich
優(yōu)設(shè)譯文：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛(ài)好者也準(zhǔn)備了貼心的知識(shí)樹(shù)專(zhuān)欄。開(kāi)啟免費(fèi)自學(xué)新篇章，按照我們的專(zhuān)欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺(jué)效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com