2024-06-20
5種確保網(wǎng)站用戶滾動的特別處理方法
“首屈一指”的日子結(jié)束了。長滾動和無限滾動站點最近變得越來越流行，并且這種技術(shù)可以很好地轉(zhuǎn)換到移動設(shè)備上并非巧合。移動屏幕的增加使用無疑在長滾動技術(shù)的廣泛接受中起著關(guān)鍵作用：屏幕越小，滾動時間就越長。
長滾動為設(shè)計師打開了許多新的大門。但是，這種模式有其自身的缺點。它要求設(shè)計人員特別注意內(nèi)容，導(dǎo)航和動畫。
這里有5條提示，以確保您的長滾動符合用戶期望。
?
1.從一開始就提供有趣的內(nèi)容
盡管人們通常在頁面加載后立即開始滾動，但屏幕頂部可見部分中的內(nèi)容仍然非常重要。頁面頂部顯示的內(nèi)容會給您帶來初步印象并為您的用戶設(shè)置質(zhì)量期望。用戶可以滾動，但前提是他們進(jìn)入頁面時看到的內(nèi)容很有希望。
為了確保人們能夠滾動瀏覽，您需要提供可使訪客保持興趣的內(nèi)容。因此，將您最引人注目的內(nèi)容放在頁面頂部：
- 提供有趣的事實（吸引游客并吸引他們注意的事實）
- 使用引人入勝的圖像（用戶密切注意包含相關(guān)信息的圖像和圖片）
?
2.為用戶提供視覺提示
有時，使用戶滾動的最佳方法是直接要求他們這樣做。只需告知用戶，大部分內(nèi)容即可在首屏中找到。細(xì)微的視覺提示（例如，指向屏幕外的箭頭或文本“向下滾動”）可以通知用戶以下內(nèi)容可用。
指向屏幕外的箭頭通知用戶大多數(shù)內(nèi)容將在下面進(jìn)行布局。
?
3.保持導(dǎo)航選項始終可見
導(dǎo)航是網(wǎng)站用戶體驗的成敗方面。在設(shè)計中使用長滾動的最大風(fēng)險之一是可能使用戶迷失方向。如果用戶向下滾動時導(dǎo)航欄失去可見性，那么當(dāng)他們深入頁面內(nèi)時，他們將不得不一直向上滾動。通常，此行為使用戶感到困惑和沮喪。
解決此問題的明顯方法是使用粘性導(dǎo)航菜單，該菜單顯示當(dāng)前位置并始終保持在屏幕上的同一位置。
持續(xù)可見的粘性導(dǎo)航的示例。
僅限移動設(shè)備：由于移動屏幕比桌面屏幕小得多，因此可見的導(dǎo)航欄會占據(jù)屏幕的相當(dāng)大的一部分。解決小屏幕空間問題的一種方法是在用戶滾動查找新內(nèi)容時隱藏導(dǎo)航欄，并在用戶下拉菜單時使其可見以返回頂部。
?
4.使用功能動畫吸引訪問者
視差滾動和滾動激活動畫等創(chuàng)意效果可以吸引用戶進(jìn)行更多滾動。他們將滾動變成更有趣的內(nèi)容，并讓用戶懷疑“接下來會發(fā)生什么？”
考慮將頁面分成可滾動的“塊”。在每個塊中，您可以通過創(chuàng)意動畫介紹內(nèi)容。當(dāng)用戶滾動時，動畫會在創(chuàng)建內(nèi)容路徑時將其切換到下一個屏幕。
視差是另一種流行的動畫效果，可以改善滾動體驗。視差效果通過使背景圖像移動得比前景中的內(nèi)容慢，從而產(chǎn)生了深度和沉浸感的錯覺。當(dāng)您的站點希望以流暢，線性的方式講述故事時，長滾動和視差效果可以創(chuàng)造出完全身臨其境的瀏覽體驗。
?
5.避免滾動劫持
實施滾動劫持的網(wǎng)站可以控制滾動并覆蓋Web瀏覽器的基本功能。滾動劫持很糟糕，因為用戶不再完全控制頁面滾動并且無法預(yù)測其行為。出于敘事體驗，不應(yīng)破壞用戶對網(wǎng)站滾動交互的期望。
Apple在Mac Pro頁面上使用滾動劫持。
?
結(jié)論
高端網(wǎng)站設(shè)計以創(chuàng)建完全身臨其境的瀏覽體驗。完全有可能使旅行與目的地一樣愉快。當(dāng)用戶喜歡您網(wǎng)站上的內(nèi)容并發(fā)現(xiàn)直觀的UI時，他們就不會真正在意滾動的長度。
相關(guān)專題
熱門文章
-
交互體驗設(shè)計和UI設(shè)計哪個更重要 -
怎么判斷網(wǎng)頁前端做的好壞
2024-01-13
-
AI那么火熱，是否會替代UI設(shè)計師
2023-11-30
-
UI設(shè)計主要是做什么的，UI設(shè)計好壞影響產(chǎn)品效果嗎
2023-11-28
-
網(wǎng)站交互效果應(yīng)該在哪個階段討論，如何更好做好網(wǎng)站交互
2023-09-16
-
網(wǎng)頁首頁可以做哪些交互設(shè)計增強(qiáng)用戶體驗
2023-08-29
標(biāo)簽云
案例欣賞
Youtube
網(wǎng)站訪問速度
用戶
獨(dú)特設(shè)計
建站目標(biāo)
API的運(yùn)用
網(wǎng)站獲客
2022年網(wǎng)頁設(shè)計趨勢
導(dǎo)航欄
隱私政策如何寫
網(wǎng)站建設(shè)字體
網(wǎng)站建設(shè)設(shè)計師
設(shè)計氛圍
商業(yè)網(wǎng)站建設(shè)
重要性
客戶不知道自己做什么
通配符SSL
網(wǎng)頁設(shè)計
網(wǎng)站做文件分離到云存儲
杭州外貿(mào)網(wǎng)站建設(shè)
案例分享
便利店小程序
網(wǎng)站設(shè)計解決方案
營銷網(wǎng)站如何轉(zhuǎn)化客戶
獲取報價
seo對網(wǎng)站的重要性
網(wǎng)站美觀
極簡主義網(wǎng)站
醫(yī)保公告
跨境物流網(wǎng)站
網(wǎng)站制作步驟
設(shè)計攻略
洗發(fā)水網(wǎng)站
企業(yè)官網(wǎng)建設(shè)
視覺設(shè)計
紡織品外貿(mào)網(wǎng)站開發(fā)建設(shè)
紡織企業(yè)網(wǎng)站
軟件公司網(wǎng)站
企業(yè)網(wǎng)站建設(shè)
數(shù)據(jù)分析
網(wǎng)站尺寸
網(wǎng)站黑鏈
購物網(wǎng)站
網(wǎng)站判斷
聚合頁
滲透安全
ZOHO
網(wǎng)頁設(shè)計師
網(wǎng)站3D效果
體驗從溝通開始，讓我們聆聽您的需求！
開始您的數(shù)字化品牌體驗！ 0571-85815193 期待您的來電！
[ 網(wǎng)站建設(shè)×品牌官網(wǎng)設(shè)計×大策略營銷門戶×微信小程序開發(fā)×微信公眾號開發(fā)]
網(wǎng)站事業(yè)部產(chǎn)品經(jīng)理
免費(fèi)獲取項目策劃
項目開發(fā)部產(chǎn)品經(jīng)理
免費(fèi)獲取項目策劃
