在網(wǎng)頁設(shè)計中,讓長滾動頁面更加優(yōu)秀的7種策略

2022-05-26    分類: 網(wǎng)站建設(shè)

網(wǎng)站建設(shè)為設(shè)計的重心已經(jīng)不足以滿足如今的設(shè)計需求,有的時候你還是得設(shè)計一個長滾動單頁來承載足夠的內(nèi)容,保持用戶的關(guān)注度,讓他們在滾動中獲取足夠的內(nèi)容和信息。
使用長滾動式網(wǎng)頁確實能夠更為有效地呈現(xiàn)內(nèi)容。這種輕松的交互方式本身就對用戶有著足夠的吸引力。不過,想要設(shè)計足夠優(yōu)秀的長滾動頁面,單純的視覺設(shè)計是不夠的,在不斷的滾動瀏覽過程中如何讓用戶更好地吸收信息才是設(shè)計師需要仔細(xì)考慮的事情。今天的文章,我們來探討一下,讓長滾動頁面更加優(yōu)秀的7種策略。
1、創(chuàng)造真正擁有高參與度的內(nèi)容
不論如何設(shè)計,網(wǎng)頁核心的內(nèi)容質(zhì)量首先得過硬。再好的設(shè)計也無法掩蓋內(nèi)容的空洞和素質(zhì),所以首先要有高質(zhì)量的內(nèi)容。同時,內(nèi)容還要和整體設(shè)計有效得搭配起來。想要創(chuàng)造優(yōu)質(zhì)的內(nèi)容,有幾個方法能夠幫到你:
將你的內(nèi)容轉(zhuǎn)化為引人入勝的故事。
借助高分辨率、高素質(zhì)的視覺內(nèi)容,比如高清圖片、視頻和精致的插畫。
給用戶一個滾動的理由(比如讓故事在關(guān)鍵的位置“未完待續(xù)”)。
控制選項數(shù)量。讓用戶面對的選擇數(shù)量盡可能少,不要讓太多的選擇給用戶造成壓力,每個部分盡量只使用一個號召性的文案或者按鈕。
采用讓人好奇的文案。視覺效果可以給人良好的第一印象,但是好的內(nèi)容,勾人的文案就更好了。盡量使用動詞,并且搭配讓人原因沉浸的故事。

2、構(gòu)建視覺主題


風(fēng)格明顯,鮮明的主題能夠幫助用戶更好地了解故事或者頁面的內(nèi)容,擁有沉浸式的體驗。主題中可以搭配一些視覺線索,比如箭頭,分割線,或者其他的指引性視覺元素,幫助用戶更為清晰地明白內(nèi)容之間的關(guān)系,在瀏覽過程中,更好地穿梭于內(nèi)容之間。
視覺化的主題設(shè)計和合理的視覺引導(dǎo)機制,能夠讓長滾動網(wǎng)頁這種設(shè)計更好地服務(wù)于你的網(wǎng)站和內(nèi)容。同時,你還需要注意數(shù)據(jù)上的變化。在采用長滾動頁面之前,用戶的留存率是否更高?用戶主要的互動內(nèi)容是否有所變化?預(yù)期的轉(zhuǎn)化率是否達(dá)到了?等等等等。
如果視覺化的設(shè)計并沒有有利于整個長滾動頁面,你需要考慮主題是否影響了內(nèi)容的展示,或者是否同用戶群相匹配。
3、令人愉悅的交互
長滾動式的網(wǎng)頁設(shè)計往往能夠創(chuàng)造出沉浸式的用戶體驗,而這種沉浸式的體驗很大程度上是得益于其中取悅用戶的各式交互。
從動效到輪播圖,從視差元素到各種漂亮的動畫,微交互和可觸發(fā)的宏交互共同創(chuàng)造了其中引人入勝的體驗。就像上面的 Beatrate 這個網(wǎng)站,設(shè)計師在其中加入了大量的可交互的元素,包括視頻,滾動式的動畫,懸浮特效,旋轉(zhuǎn)動效和輪播圖,他們讓整個交互更為優(yōu)秀。
每個區(qū)域當(dāng)中都采用了獨特的交互,這些交互對應(yīng)著不同的動畫效果。也正是因為它們的差異,才使得用戶每次滾動查看,都會發(fā)現(xiàn)不一樣的東西。
4、充分運用滾動特效和技術(shù)
長滾動頁面在移動端和桌面端都能夠良好的運作,很大程度上這是設(shè)計師喜愛它的原因之一。
許多用戶其實更加喜歡滾動而不是點擊,而在移動端上,這種交互上的傾向表現(xiàn)得更加明顯。使用長滾動頁面,瀏覽獲取信息的體驗更順滑。
使用各種滾動特效和技術(shù)比如視差特效,色塊遮蓋和混搭式排版(比如讓文本、視頻、圖片等內(nèi)容塊混搭,降低用戶瀏覽負(fù)荷)來保持整個設(shè)計順暢。搭配滾動觸發(fā)式的視差特效和滾動動畫,保持用戶的參與性和趣味性,鼓勵用戶繼續(xù)滾動瀏覽。
5、讓長滾動內(nèi)容和短滾動內(nèi)容交替出現(xiàn)
在長滾動頁面當(dāng)中,有些內(nèi)容需要快速滾動瀏覽,而有的內(nèi)容則需要用戶仔細(xì)閱讀,逐步查看,這些長滾動和短滾動的內(nèi)容應(yīng)該交替出現(xiàn),分段搭配。
比如大片的圖片就是易于消化的內(nèi)容,用戶會快速滾動查看,而包含文本的內(nèi)容,則常常需要用戶停下來,逐行滾動查看,你需要讓這些不同的內(nèi)容長短搭配起來,這樣不僅讓交互更加富有韻律,而且讓頁面更加從容地加載。
6、為用戶提供路線圖
長滾動頁面所需要面臨一個非常實際的問題,就是導(dǎo)航和視覺線索,用戶需要知道他們?yōu)g覽到了什么位置,以及他們距離頁面的首位有多遠(yuǎn)。
路線圖和導(dǎo)航是非常重要的。目前常見的模式有以下幾種:
懸浮導(dǎo)航
使用小點或者其他替代元素來告知用戶進(jìn)度
使用箭頭和符號來告訴用戶接下來的操作
提供快速跳轉(zhuǎn)到開頭和結(jié)尾的按鈕

7、設(shè)計出清晰的目標(biāo)


長滾動頁面不應(yīng)該是無限的。設(shè)計的時候,應(yīng)該能夠讓用戶明白從哪里開始,以及最終的結(jié)束會在什么地方。
無論整個頁面的設(shè)計有多酷,總需要讓用戶明確目標(biāo)和結(jié)果。
在你明確整個設(shè)計之前,你應(yīng)該勾畫出最終的目標(biāo)。確保整個長滾動頁面的每個部分都是為了呈現(xiàn)最終的結(jié)果而存在??纯瓷厦娴陌咐?,頁面的每個部分都包含一個明確的CTA按鈕,并且?guī)в忻黠@的指引性語言,它位于中心的位置,易于查看和點擊。
你必須承認(rèn),并不是每個用戶都能夠堅持滾動到整個頁面的界面的結(jié)尾。你需要在頁面中插入一些CTA按鈕,讓用戶可以在不同的位置參與交互,達(dá)到他們想要的結(jié)果。
結(jié)語

雖然長滾動頁面已經(jīng)不再是什么新鮮的東西,但是它的UX設(shè)計和交互模式依然還在不斷成長,逐漸成熟?,F(xiàn)如今,設(shè)計師和網(wǎng)頁設(shè)計相關(guān)的社區(qū)依然在探討它的利弊,作為設(shè)計師,你應(yīng)該仔細(xì)衡量你的目標(biāo),再選擇是否使用長滾動網(wǎng)頁設(shè)計。


本文來自創(chuàng)新互聯(lián)品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)
標(biāo)簽:重慶網(wǎng)站建設(shè)公司,成都網(wǎng)頁設(shè)計公司成都網(wǎng)站設(shè)計公司,網(wǎng)站建設(shè) 成都,成都 網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),營銷型網(wǎng)站建設(shè),網(wǎng)站建設(shè)設(shè)計,網(wǎng)站開發(fā),網(wǎng)站制作設(shè)計

網(wǎng)頁題目:在網(wǎng)頁設(shè)計中,讓長滾動頁面更加優(yōu)秀的7種策略
標(biāo)題來源:http://www.muchs.cn/news1/159401.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制網(wǎng)站、微信公眾號網(wǎng)站營銷、ChatGPT定制開發(fā)、App開發(fā)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

成都網(wǎng)頁設(shè)計公司