大約自2016年開始,滾動視差(parallax scrolling)網頁設計風潮席卷的網頁設計市場,每個設計師都想讓自己的網站添加上滾動視差,后來有一點點泛濫成災,加上開發需要較多時間,又從市場上漸漸淡出。
也有一派說法表示「用戶不喜歡滾動」,原因是研究表明,用戶的注意力往往集中在首頁之上,用戶得看完一大段滾動特效才能進入網站,對一部分用戶來說是一種困擾。因此今天iWare想要分享的是滾動視差絕非票房毒藥,只要設計得宜,就可以為您的網站帶來許多好處。
雖然大多數網站訪問者都明白,如果他們滾動或是滑動螢幕,他們可以發現更多內容,但網站的各種元素可能會干擾他們的下一步。因此我們建議網站若需使用滾動視差特效,可以注意幾個重點:
較短的首頁Banner
當你的首頁Banner占滿螢幕,可能會讓用戶誤解你的網頁沒有其他內容,所以你只需要縮短主圖Banner的高度,下面的部分內容會變得可見。這使用戶可以查看其他內容并吸引他們滾動以了解更多訊息。
滾動同時呈現內容
快速瀏覽網頁是現代人的必備技能,快速掃描一個網站所需的注意力少得多,所以設備滾動特效時,不妨將你的內容摘要放入滾動視差特效中,例如圖像或提示;適當調整內容迎合您的受眾,這有助于用戶掃描內容時注意到關鍵重點,并且在欣賞完網站之后,會繼續的瀏覽其他的頁面。
滾動提示
加入一個視覺元素,告訴用戶滾動有內容時,大多會很樂意繼續滑動下去。或著,如果有些老客戶已經不需要重復觀看時,請添加跳過特效的功能,許多現代電腦游戲都有跳過「過場動畫」的設計,網頁也可以如法炮制。
水平線分隔
通常滾動視差特效為了吸引用戶目光,會占用很大的網頁篇幅,但只需一個水平線,就可以交特效與內容做個區隔,當頁面上的每一部分內容,都被水平線或變化的色塊分隔時,用戶很容易產生聯想,明白網站的內容還有資訊是被分開的,如果要完整閱讀,必須要移動或滾動畫面。
色差設計
色差在網頁內容區塊設計上很有用,在首頁的滾動視差也是如此,利用空白而不是交替色塊時就如同觀看簡報一樣,很快就能注意到滾動視差的內容已經播放完畢,用戶注意到特效結束或已經到達頁尾時,就有機會移動至其他頁面觀看內容。
中斷體驗
用戶體驗固然重要,但如果你有非得傳達的訊息時,適當的中斷也是一個手段,例如觀看時差播一段文字或按鈕,告知用戶可以隨時跳離滾動視差的特效環境中,直接到他們想去的頁面。中斷或許不是公司預期的網站導覽方式,但是用戶滾動時,用戶脫離特效直接訪問其他頁面的的一個很好的管道。
浮動選單
傳統網頁設計上,我們習慣在選單釘在首頁最上方,但時代變了,智慧手機的用戶喜歡選單隨處可及,浮動選單成為一個好的方案。用戶向下滾動頁面后,無須滾動回到最上方,透過浮動的選單,可以聯絡服務人員,或是開啟網站的完整內容指南,重點是用戶有自己的主控權,想要繼續看完滾動視差效果或是到其他網頁,都由用戶自己決定。