抓住這7個關鍵,創造讓人欲罷不能的長滾動頁面
將首屏作為設計的重心已經不足以滿足如今的設計需求,有的時候你還是得設計一個長滾動單頁來承載足夠的內容,保持用戶的關注度,讓他們在滾動中獲取足夠的內容和信息。
使用長滾動式網頁確實能夠更為有效地呈現內容。這種輕松的交互方式本身就對用戶有著足夠的吸引力。不過,想要設計足夠優秀的長滾動頁面,單純的視覺設計是不夠的,在不斷的滾動瀏覽過程中如何讓用戶更好地吸收信息才是設計師需要仔細考慮的事情。今天的文章,我們來探討一下,讓長滾動頁面更加優秀的7種策略。
1、創造真正擁有高參與度的內容
不論如何設計,網頁核心的內容質量首先得過硬。再好的設計也無法掩蓋內容的空洞和素質,所以首先要有高質量的內容。同時,內容還要和整體設計有效得搭配起來。想要創造優質的內容,有幾個方法能夠幫到你:
將你的內容轉化為引人入勝的故事。
借助高分辨率、高素質的視覺內容,比如高清圖片、視頻和精致的插畫。
給用戶一個滾動的理由(比如讓故事在關鍵的位置“未完待續”)。
控制選項數量。讓用戶面對的選擇數量盡可能少,不要讓太多的選擇給用戶造成壓力,每個部分盡量只使用一個號召性的文案或者按鈕。
采用讓人好奇的文案。視覺效果可以給人良好的第一印象,但是好的內容,勾人的文案就更好了。盡量使用動詞,并且搭配讓人原因沉浸的故事。
2、構建視覺主題
風格明顯,鮮明的主題能夠幫助用戶更好地了解故事或者頁面的內容,擁有沉浸式的體驗。主題中可以搭配一些視覺線索,比如箭頭,分割線,或者其他的指引性視覺元素,幫助用戶更為清晰地明白內容之間的關系,在瀏覽過程中,更好地穿梭于內容之間。
視覺化的主題設計和合理的視覺引導機制,能夠讓長滾動網頁這種設計更好地服務于你的網站和內容。同時,你還需要注意數據上的變化。在采用長滾動頁面之前,用戶的留存率是否更高?用戶主要的互動內容是否有所變化?預期的轉化率是否達到了?等等等等。
如果視覺化的設計并沒有有利于整個長滾動頁面,你需要考慮主題是否影響了內容的展示,或者是否同用戶群相匹配。
3、令人愉悅的交互
長滾動式的網頁設計往往能夠創造出沉浸式的用戶體驗,而這種沉浸式的體驗很大程度上是得益于其中取悅用戶的各式交互。
從動效到輪播圖,從視差元素到各種漂亮的動畫,微交互和可觸發的宏交互共同創造了其中引人入勝的體驗。就像上面的 Beatrate 這個網站,設計師在其中加入了大量的可交互的元素,包括視頻,滾動式的動畫,懸浮特效,旋轉動效和輪播圖,他們讓整個交互更為優秀。
每個區域當中都采用了獨特的交互,這些交互對應著不同的動畫效果。也正是因為它們的差異,才使得用戶每次滾動查看,都會發現不一樣的東西。
4、充分運用滾動特效和技術
長滾動頁面在移動端和桌面端都能夠良好的運作,很大程度上這是設計師喜愛它的原因之一。
許多用戶其實更加喜歡滾動而不是點擊,而在移動端上,這種交互上的傾向表現得更加明顯。使用長滾動頁面,瀏覽獲取信息的體驗更順滑。
使用各種滾動特效和技術比如視差特效,色塊遮蓋和混搭式排版(比如讓文本、視頻、圖片等內容塊混搭,降低用戶瀏覽負荷)來保持整個設計順暢。搭配滾動觸發式的視差特效和滾動動畫,保持用戶的參與性和趣味性,鼓勵用戶繼續滾動瀏覽。
5、讓長滾動內容和短滾動內容交替出現
在長滾動頁面當中,有些內容需要快速滾動瀏覽,而有的內容則需要用戶仔細閱讀,逐步查看,這些長滾動和短滾動的內容應該交替出現,分段搭配。
比如大片的圖片就是易于消化的內容,用戶會快速滾動查看,而包含文本的內容,則常常需要用戶停下來,逐行滾動查看,你需要讓這些不同的內容長短搭配起來,這樣不僅讓交互更加富有韻律,而且讓頁面更加從容地加載。
6、為用戶提供路線圖
長滾動頁面所需要面臨一個非常實際的問題,就是導航和視覺線索,用戶需要知道他們瀏覽到了什么位置,以及他們距離頁面的首位有多遠。
路線圖和導航是非常重要的。目前常見的模式有以下幾種:
懸浮導航
使用小點或者其他替代元素來告知用戶進度
使用箭頭和符號來告訴用戶接下來的操作
提供快速跳轉到開頭和結尾的按鈕
7、設計出清晰的目標
長滾動頁面不應該是無限的。設計的時候,應該能夠讓用戶明白從哪里開始,以及最終的結束會在什么地方。
無論整個頁面的設計有多酷,總需要讓用戶明確目標和結果。
在你明確整個設計之前,你應該勾畫出最終的目標。確保整個長滾動頁面的每個部分都是為了呈現最終的結果而存在。看看上面的案例,頁面的每個部分都包含一個明確的CTA按鈕,并且帶有明顯的指引性語言,它位于中心的位置,易于查看和點擊。
你必須承認,并不是每個用戶都能夠堅持滾動到整個頁面的界面的結尾。你需要在頁面中插入一些CTA按鈕,讓用戶可以在不同的位置參與交互,達到他們想要的結果。
結語
雖然長滾動頁面已經不再是什么新鮮的東西,但是它的UX設計和交互模式依然還在不斷成長,逐漸成熟。現如今,設計師和網頁設計相關的社區依然在探討它的利弊,作為設計師,你應該仔細衡量你的目標,再選擇是否使用長滾動網頁設計。
-
2021/12/28
-
2021/12/23
-
2021/12/17

- 愛華仕斬獲“2021年度中國廚衛行業年度智能
- 回首2021,迎戰2022 彩虹線開啟新征程!
- 福臨板材|福滿2021,圓夢2022
- 美特照明:2022年照明新趨勢,經銷商如何做大
- 會自己“洗澡”的集成灶,帥康自動清洗集成灶
- 帶你設計一款功能多變,簡單實用的休閑露臺陽
- 世紀豪門吊頂:破防了!原來顏值+實力=H20
- 裝修木門選的好,噪音統統沒煩惱
- 寒潮來了,有淋浴房洗澡更保暖舒服
- 元旦特輯:歐意電器述說生活的點滴與美好
- “中國十大品牌”獲獎名單出爐,賽戈水漆榮耀
- 2021值得消費大賞 凱迪仕智能鎖榮摘兩項桂冠
- 益恩家居:新年新氣象,愛自己從好好睡覺開始
- 元旦伊始:健康新生活,從精格管道直飲水開始
- 喜迎元旦|新年新燈飾 箔晶智能照明讓酒店暖
- 吉美幫的2021 “專精特新” 深耕屋面防水體
- Aqara攜手京東成立燈光設計聯盟 打造燈飾照
- 年底廚房煥新顏,如何選擇廚電?好太太智能來
- 全鋁家具全屋莫蘭迪色系,這款美式輕奢范贏鄰
- 順趨勢·筑鳳巢·贏未來 鳳梧居門窗2021年會隆
