首頁 部落格 網頁設計如何使用滾動視差來增強用戶體驗
Jericho
Jun 08, 2022
網路、科技、滿滿的新知在浩瀚的網路上,想要得到他嗎?沒問題,永遠抱持著謙卑的態度,自然會找到方案!

網頁設計如何使用滾動視差來增強用戶體驗

大約自2016年開始,滾動視差(parallax scrolling)網頁設計風潮席捲的網頁設計市場,每個設計師都想讓自己的網站添加上滾動視差,後來有一點點氾濫成災,加上開發需要較多時間,又從市場上漸漸淡出。

也有一派說法表示「用戶不喜歡滾動」,原因是研究表明,用戶的注意力往往集中在首頁之上,用戶得看完一大段滾動特效才能進入網站,對一部分用戶來說是一種困擾。因此今天iWare想要分享的是滾動視差絕非票房毒藥,只要設計得宜,就可以為您的網站帶來許多好處。

雖然大多數網站訪問者都明白,如果他們滾動或是滑動螢幕,他們可以發現更多內容,但網站的各種元素可能會干擾他們的下一步。因此我們建議網站若需使用滾動視差特效,可以注意幾個重點:

 

較短的首頁Banner

當你的首頁Banner占滿螢幕,可能會讓用戶誤解你的網頁沒有其他內容,所以你只需要縮短主圖Banner的高度,下面的部分內容會變得可見。這使用戶可以查看其他內容並吸引他們滾動以了解更多訊息。
 

滾動同時呈現內容

快速瀏覽網頁是現代人的必備技能,快速掃描一個網站所需的注意力少得多,所以設備滾動特效時,不妨將你的內容摘要放入滾動視差特效中,例如圖像或提示;適當調整內容迎合您的受眾,這有助於用戶掃描內容時注意到關鍵重點,並且在欣賞完網站之後,會繼續的瀏覽其他的頁面。

 

滾動提示

加入一個視覺元素,告訴用戶滾動有內容時,大多會很樂意繼續滑動下去。或著,如果有些老客戶已經不需要重複觀看時,請添加跳過特效的功能,許多現代電腦遊戲都有跳過「過場動畫」的設計,網頁也可以如法炮製。

 

水平線分隔

通常滾動視差特效為了吸引用戶目光,會占用很大的網頁篇幅,但只需一個水平線,就可以交特效與內容做個區隔,當頁面上的每一部分內容,都被水平線或變化的色塊分隔時,用戶很容易產生聯想,明白網站的內容還有資訊是被分開的,如果要完整閱讀,必須要移動或滾動畫面。

 

色差設計

色差在網頁內容區塊設計上很有用,在首頁的滾動視差也是如此,利用空白而不是交替色塊時就如同觀看簡報一樣,很快就能注意到滾動視差的內容已經播放完畢,用戶注意到特效結束或已經到達頁尾時,就有機會移動至其他頁面觀看內容。

 

中斷體驗

用戶體驗固然重要,但如果你有非得傳達的訊息時,適當的中斷也是一個手段,例如觀看時差播一段文字或按鈕,告知用戶可以隨時跳離滾動視差的特效環境中,直接到他們想去的頁面。中斷或許不是公司預期的網站導覽方式,但是用戶滾動時,用戶脫離特效直接訪問其他頁面的的一個很好的管道。

 

浮動選單

傳統網頁設計上,我們習慣在選單釘在首頁最上方,但時代變了,智慧手機的用戶喜歡選單隨處可及,浮動選單成為一個好的方案。用戶向下滾動頁面後,無須滾動回到最上方,透過浮動的選單,可以聯絡服務人員,或是開啟網站的完整內容指南,重點是用戶有自己的主控權,想要繼續看完滾動視差效果或是到其他網頁,都由用戶自己決定。

文章標籤
網頁設計 滾動視差
如何在網頁設計中使用網格的圖像
如何在網頁設計中使用網格的圖像
Jericho
Jericho
Jun 30, 2022
為什麼人們喜歡翻頁效果的網頁設計?
為什麼人們喜歡翻頁效果的網頁設計?
Jericho
Jericho
Jun 24, 2022
網頁設計中使用圓形CTA(行動呼籲設計)按鈕
網頁設計中使用圓形CTA(行動呼籲設計)按鈕
Jericho
Jericho
Jun 23, 2022