當前位置:才華齋>設計>網頁設計>

網頁設計中的滾動互動新技巧

網頁設計 閱讀(1.24W)

如果你想讓你的網頁使用者停留時間足夠長,你首先應該讓內容有趣,讓等待也足夠有趣才行。下面給大家介紹網頁設計色彩搭配技巧,一起來學習吧!

網頁設計中的滾動互動新技巧
  網頁設計中的滾動互動新技巧

 重生的滾動互動

原因很簡單,移動端裝置的興起,讓滾動互動重獲新生。隨著移動端使用者數量逐步超過桌面端的使用者數量,UI和UX設計師會不斷地針對互動和UI進行調整。移動端的使用者是如此之多,滾動互動的重要性就顯得越來越明顯。

與此同時,另外一件事情也顯得非常重要。為了確保能夠儘可能多、儘可能方便地訪問網際網路,減少頁面跳轉,儘量通過滾動瀏覽來提高效率,這也是滾動互動熱度提升的一個重要原因。社交媒體中常見的動態載入技術的出現,讓使用者可以一邊滾動瀏覽一邊載入自適應的內容,成為了可能。

此外,我們之前一直重視的首屏,在今天似乎也沒有那麼重要了。研究表明,使用者真的不介意向下滾動瀏覽大量的內容,換句話說,頁面的所有內容都會在使用者的滾動瀏覽過程中逐步展開,首屏的重要性無疑被稀釋了。

當然,如今的滾動需要相應的技術支援,也正是在CSS和JS技術有所發展之後,滾動互動才被界定為真正有意義的設計模式。在此之前,通過滾動互動來視覺化地展現故事,本身是一件相對困難的事情,隨後技術的發展,讓複雜的UI佈局,微妙的動效和特效加入到滾動互動過程中,從而有了今天的全新的滾動互動。

不過一旦準備藉助長滾動式的頁面來呈現故事的時候,那麼你就要充分運用一切手段(圖形、動畫、圖示等),借用電影般的表現力和戲劇化的起承轉合,將使用者的吸引力牢牢地拉扯住。

事實上,一些混合型的設計正在佔據滾動互動的主流。就像UXPin的首頁,頁面採用的是長滾動式設計,但是其中包含了一個固定不動的視窗,而視窗內的內容是隨著滾動而改變的。這種全新的滾動互動模式帶來的體驗和以往傳統的滾動式互動截然不同。

 滾動式互動適合你嗎?

每種技術、每款工具都有其特定的使用環境,相應的,有人會喜歡它們,有人會討厭它們,這都是很自然的事情。所以,在你使用全新的滾動互動的時候,你需要對於自己的產品、需求和滾動互動本身有足夠清晰的判斷。

 滾動互動的優點:

·鼓勵互動。不同的互動和元素會不斷刺激使用者,是一種有趣的故事呈現方式,鼓勵使用者與頁面進行互動,特別是視差滾動。

·更加快速。滾動互動比起復雜的頁面條狀更加高效,並不會減緩或者限制整個使用者體驗。

·引誘使用者。滾動式的設計會促進使用者互動,提高使用者的停留時間,讓使用者持續發掘對他們有吸引力的內容。

·響應式設計。這些頁面挑弄廣場能夠相容不同尺寸、不同裝置螢幕,滾動式互動本身就有助於簡化裝置和螢幕尺寸間的差異。

·手勢互動。滾動互動始終同觸控機制結合在一起,向下滾動頁面比起使用向下按鈕要方便得多,在移動端上尤其是如此。

·愉悅體驗。較少的點選和直覺式的'互動,加上有趣的內容和多樣的動效,滾動互動給使用者帶來的體驗是愉悅的。

  滾動互動的缺陷:

·頑固的使用者。不要問為什麼,總會有一部分使用者抵制新東西。儘管如此,新的滾動互動依然廣泛地普及開來。尤其是在移動端上,而且許多使用者已經習慣了這一技術。

·SEO上的缺陷。大量的內容被彙集到了一個頁面當中,對於SEO可能會有負面的影響。

·迷失方向。使用者可能會在滾動瀏覽過程中迷失方向,這是客觀存在的問題。

·導航困難。大量的內容被彙集到一頁當中,使用者無法像以前一樣“回到”上一頁。通常可以藉助頂部或者側邊的固定導航,來解決這個問題。

·訪問速度。諸如視訊和動效這種多樣、複雜而又佔空間的內容要載入,在訪問和載入速度上可能不如以前那麼網站那麼快速。

·沒有頁尾。絕大多數可以無限滾動的網站都通常沒有設定頁尾,所以,我們可以設計一個常駐底部的頁尾,除開這些優缺點,長滾動式的網頁在某些特定的功能上非常突出。

 它非常適合用來展現內容,以及:

·承載大量的移動端內容

·展現頻繁更新的內容(部落格和微部落格)

·以單一方式呈現大量內容(比如資訊圖表)

·由於資訊負荷量大而不適宜呈現富媒體(載入時間長)

諸如社交媒體這樣的網站適合長滾動頁面來展現,而類似電商類網站,需要導航來導向特定內容的網站,則適合使用相對保守的頁面導航設計,並且控制頁面長度。

和許多設計趨勢一樣,不要因為你看到別的網站採用了這些趨勢,你就將它套用到自己的網站上,你依然需要針對自己的網站來進行衡量,否則實際效果會非常糟糕。

 滾動互動最佳實踐

長滾動頁面,視差特效等設計模式是最近4年內才出現的,通過這幾年的試錯和市場驗證,我們已經擁有了一些頗為值得參考的最佳實踐:

1、不要害怕長滾動頁面替代傳統的短頁面。讓內容來控制頁面長度,而非其他方式。

2、考慮使用懸浮導航。使用懸浮式的導航能讓使用者在長滾動頁面中更容易定位和頁內跳轉。

3、建議使用設計元素來給使用者以視覺指引。比如箭頭、動效、按鈕之類的元素,簡單快速地引導使用者,讓他們明白如何使用。有些網站甚至會增加文字說明,諸如“Scroll for more”。

4、如果使用文字說明的話,儘量使用準確的詞彙,諸如點選按鈕、滾動等。

5、稍加鑽研,瞭解使用者是如何滾動頁面的。比如,你可以借用 Google Analytics 的“頁內分析”,來了解有多少使用者翻頁查看了更多的內容。根據資料,你可以作出更有針對性的改版設計。

6、長滾動並不是說毫無限制。你並不需要在一個頁面內塞入500頁書的內容,講述你的故事,然後結束。

7、專注於你的使用者和目標。建立長滾動頁面的時候,應該明白使用者也是需要方向感的,所以,你應該通過設計讓他們知道所處的位置,能夠通過合理的導航跳轉到其他的位置。

8、加入視覺線索。

以滾動為主互動的設計,是一把雙刃劍,用對與用好是同樣重要的。

 未來:無頁面式設計

在長滾動頁面中,使用者通常不會涉及到頁面間的跳轉。仔細觀察最近幾年的趨勢,最常用的移動端裝置,我們的手機,在介面尺寸上基本上穩定下來了,在小螢幕上的滾動互動,將會在未來越來越多。

頁面的概念正在逐步淡化,長滾動頁面的下一步進化應該就是“無頁面式”的網頁設計,實際上許多設計師認為這才是網頁設計的未來。

互動設計是長滾動式網頁的設計基礎,如果使用者喜歡你所設計的頁面,並且覺得它們足夠有趣而直觀,他們是不會在意內容長短的。