重新認識滾動交互,讓你設計的網頁更適合這個時代

出于對新交互模式的探索和技術的發(fā)展,曾經網頁設計中的許多禁忌,現(xiàn)如今反而成為了越來越受歡迎的趨勢,網頁中的滾動交互,就是如此。作為一項基本的交互方式,滾動交互并不是一成不變,它正將新的技巧和新的規(guī)則納入其中,逐步演進。

重生的滾動交互

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

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

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

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

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

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

滾動式交互適合你嗎?

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

滾動交互的優(yōu)點:

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

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

·引誘用戶。滾動式的設計會促進用戶交互,提高用戶的停留時間,讓用戶持續(xù)發(fā)掘對他們有吸引力的內容。

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

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

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

滾動交互的缺陷:

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

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

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

·導航困難。大量的內容被匯集到一頁當中,用戶無法像以前一樣“回到”上一頁。通??梢越柚敳炕蛘邆冗叺墓潭▽Ш?,來解決這個問題。

·訪問速度。諸如視頻和動效這種多樣、復雜而又占空間的內容要加載,在訪問和加載速度上可能不如以前那么網站那么快速。

·沒有頁腳。絕大多數(shù)可以無限滾動的網站都通常沒有設置頁腳,所以,我們可以設計一個常駐底部的頁腳,

除開這些優(yōu)缺點,長滾動式的網頁在某些特定的功能上非常突出。它非常適合用來展現(xiàn)內容,以及:

·承載大量的移動端內容

·展現(xiàn)頻繁更新的內容(博客和微博客)

·以單一方式呈現(xiàn)大量內容(比如信息圖表)

·由于信息負荷量大而不適宜呈現(xiàn)富媒體(加載時間長)

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

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

滾動交互最佳實踐

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

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

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

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

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

5、稍加鉆研,了解用戶是如何滾動頁面的。比如,你可以借用 Google Analytics 的“頁內分析”,來了解有多少用戶翻頁查看了更多的內容。根據(jù)數(shù)據(jù),你可以作出更有針對性的改版設計。

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

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

8、加入視覺線索。

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

未來:無頁面式設計

在長滾動頁面中,用戶通常不會涉及到頁面間的跳轉。仔細觀察最近幾年的趨勢,最常用的移動端設備,我們的手機,在界面尺寸上基本上穩(wěn)定下來了,在小屏幕上的滾動交互,將會在未來越來越多。

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

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

如果你想讓你的網頁用戶停留時間足夠長,你首先應該讓內容有趣,讓等待也足夠有趣才行。


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,345評論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,494評論 3 416
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,283評論 0 374
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,953評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,714評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,186評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,255評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,410評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 48,940評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,776評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,976評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,518評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,210評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,642評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,878評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,654評論 3 391
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,958評論 2 373

推薦閱讀更多精彩內容