- 相關(guān)推薦
網(wǎng)頁(yè)設計中的滾動(dòng)交互新技巧
如果你想讓你的網(wǎng)頁(yè)用戶(hù)停留時(shí)間足夠長(cháng)，你首先應該讓內容有趣，讓等待也足夠有趣才行。下面給大家介紹網(wǎng)頁(yè)設計色彩搭配技巧，一起來(lái)學(xué)習吧!
網(wǎng)頁(yè)設計中的滾動(dòng)交互新技巧
重生的滾動(dòng)交互
原因很簡(jiǎn)單，移動(dòng)端設備的興起，讓滾動(dòng)交互重獲新生。隨著(zhù)移動(dòng)端用戶(hù)數量逐步超過(guò)桌面端的用戶(hù)數量，UI和UX設計師會(huì )不斷地針對交互和UI進(jìn)行調整。移動(dòng)端的用戶(hù)是如此之多，滾動(dòng)交互的重要性就顯得越來(lái)越明顯。
與此同時(shí)，另外一件事情也顯得非常重要。為了確保能夠盡可能多、盡可能方便地訪(fǎng)問(wèn)互聯(lián)網(wǎng)，減少頁(yè)面跳轉，盡量通過(guò)滾動(dòng)瀏覽來(lái)提高效率，這也是滾動(dòng)交互熱度提升的一個(gè)重要原因。社交媒體中常見(jiàn)的動(dòng)態(tài)加載技術(shù)的出現，讓用戶(hù)可以一邊滾動(dòng)瀏覽一邊加載自適應的內容，成為了可能。
此外，我們之前一直重視的首屏，在今天似乎也沒(méi)有那么重要了。研究表明，用戶(hù)真的不介意向下滾動(dòng)瀏覽大量的內容，換句話(huà)說(shuō)，頁(yè)面的所有內容都會(huì )在用戶(hù)的滾動(dòng)瀏覽過(guò)程中逐步展開(kāi)，首屏的重要性無(wú)疑被稀釋了。
當然，如今的滾動(dòng)需要相應的技術(shù)支持，也正是在CSS和JS技術(shù)有所發(fā)展之后，滾動(dòng)交互才被界定為真正有意義的設計模式。在此之前，通過(guò)滾動(dòng)交互來(lái)視覺(jué)化地展現故事，本身是一件相對困難的事情，隨后技術(shù)的發(fā)展，讓復雜的UI布局，微妙的動(dòng)效和特效加入到滾動(dòng)交互過(guò)程中，從而有了今天的全新的滾動(dòng)交互。
不過(guò)一旦準備借助長(cháng)滾動(dòng)式的頁(yè)面來(lái)呈現故事的時(shí)候，那么你就要充分運用一切手段(圖形、動(dòng)畫(huà)、圖標等)，借用電影般的表現力和戲劇化的起承轉合，將用戶(hù)的吸引力牢牢地拉扯住。
事實(shí)上，一些混合型的設計正在占據滾動(dòng)交互的主流。就像UXPin的首頁(yè)，頁(yè)面采用的是長(cháng)滾動(dòng)式設計，但是其中包含了一個(gè)固定不動(dòng)的窗口，而窗口內的內容是隨著(zhù)滾動(dòng)而改變的。這種全新的滾動(dòng)交互模式帶來(lái)的體驗和以往傳統的滾動(dòng)式交互截然不同。
滾動(dòng)式交互適合你嗎?
每種技術(shù)、每款工具都有其特定的使用環(huán)境，相應的，有人會(huì )喜歡它們，有人會(huì )討厭它們，這都是很自然的事情。所以，在你使用全新的滾動(dòng)交互的時(shí)候，你需要對于自己的.產(chǎn)品、需求和滾動(dòng)交互本身有足夠清晰的判斷。
滾動(dòng)交互的優(yōu)點(diǎn)：
·鼓勵交互。不同的交互和元素會(huì )不斷刺激用戶(hù)，是一種有趣的故事呈現方式，鼓勵用戶(hù)與頁(yè)面進(jìn)行互動(dòng)，特別是視差滾動(dòng)。
·更加快速。滾動(dòng)交互比起復雜的頁(yè)面條狀更加高效，并不會(huì )減緩或者限制整個(gè)用戶(hù)體驗。
·引誘用戶(hù)。滾動(dòng)式的設計會(huì )促進(jìn)用戶(hù)交互，提高用戶(hù)的停留時(shí)間，讓用戶(hù)持續發(fā)掘對他們有吸引力的內容。
·響應式設計。這些頁(yè)面挑弄廣場(chǎng)能夠兼容不同尺寸、不同設備屏幕，滾動(dòng)式交互本身就有助于簡(jiǎn)化設備和屏幕尺寸間的差異。
·手勢交互。滾動(dòng)交互始終同觸摸機制結合在一起，向下滾動(dòng)頁(yè)面比起使用向下按鈕要方便得多，在移動(dòng)端上尤其是如此。
·愉悅體驗。較少的點(diǎn)擊和直覺(jué)式的交互，加上有趣的內容和多樣的動(dòng)效，滾動(dòng)交互給用戶(hù)帶來(lái)的體驗是愉悅的。
滾動(dòng)交互的缺陷：
·頑固的用戶(hù)。不要問(wèn)為什么，總會(huì )有一部分用戶(hù)抵制新東西。盡管如此，新的滾動(dòng)交互依然廣泛地普及開(kāi)來(lái)。尤其是在移動(dòng)端上，而且許多用戶(hù)已經(jīng)習慣了這一技術(shù)。
·SEO上的缺陷。大量的內容被匯集到了一個(gè)頁(yè)面當中，對于SEO可能會(huì )有負面的影響。
·迷失方向。用戶(hù)可能會(huì )在滾動(dòng)瀏覽過(guò)程中迷失方向，這是客觀(guān)存在的問(wèn)題。
·導航困難。大量的內容被匯集到一頁(yè)當中，用戶(hù)無(wú)法像以前一樣“回到”上一頁(yè)。通�？梢越柚敳炕蛘邆冗叺墓潭▽Ш�，來(lái)解決這個(gè)問(wèn)題。
·訪(fǎng)問(wèn)速度。諸如視頻和動(dòng)效這種多樣、復雜而又占空間的內容要加載，在訪(fǎng)問(wèn)和加載速度上可能不如以前那么網(wǎng)站那么快速。
·沒(méi)有頁(yè)腳。絕大多數可以無(wú)限滾動(dòng)的網(wǎng)站都通常沒(méi)有設置頁(yè)腳，所以，我們可以設計一個(gè)常駐底部的頁(yè)腳，除開(kāi)這些優(yōu)缺點(diǎn)，長(cháng)滾動(dòng)式的網(wǎng)頁(yè)在某些特定的功能上非常突出。
它非常適合用來(lái)展現內容，以及：
·承載大量的移動(dòng)端內容
·展現頻繁更新的內容(博客和微博客)
·以單一方式呈現大量?jì)热?比如信息圖表)
·由于信息負荷量大而不適宜呈現富媒體(加載時(shí)間長(cháng))
諸如社交媒體這樣的網(wǎng)站適合長(cháng)滾動(dòng)頁(yè)面來(lái)展現，而類(lèi)似電商類(lèi)網(wǎng)站，需要導航來(lái)導向特定內容的網(wǎng)站，則適合使用相對保守的頁(yè)面導航設計，并且控制頁(yè)面長(cháng)度。
和許多設計趨勢一樣，不要因為你看到別的網(wǎng)站采用了這些趨勢，你就將它套用到自己的網(wǎng)站上，你依然需要針對自己的網(wǎng)站來(lái)進(jìn)行衡量，否則實(shí)際效果會(huì )非常糟糕。
滾動(dòng)交互最佳實(shí)踐
長(cháng)滾動(dòng)頁(yè)面，視差特效等設計模式是最近4年內才出現的，通過(guò)這幾年的試錯和市場(chǎng)驗證，我們已經(jīng)擁有了一些頗為值得參考的最佳實(shí)踐：
1、不要害怕長(cháng)滾動(dòng)頁(yè)面替代傳統的短頁(yè)面。讓內容來(lái)控制頁(yè)面長(cháng)度，而非其他方式。
2、考慮使用懸浮導航。使用懸浮式的導航能讓用戶(hù)在長(cháng)滾動(dòng)頁(yè)面中更容易定位和頁(yè)內跳轉。
3、建議使用設計元素來(lái)給用戶(hù)以視覺(jué)指引。比如箭頭、動(dòng)效、按鈕之類(lèi)的元素，簡(jiǎn)單快速地引導用戶(hù)，讓他們明白如何使用。有些網(wǎng)站甚至會(huì )增加文字說(shuō)明，諸如“Scroll for more”。
4、如果使用文字說(shuō)明的話(huà)，盡量使用準確的詞匯，諸如點(diǎn)擊按鈕、滾動(dòng)等。
5、稍加鉆研，了解用戶(hù)是如何滾動(dòng)頁(yè)面的。比如，你可以借用 Google Analytics 的“頁(yè)內分析”，來(lái)了解有多少用戶(hù)翻頁(yè)查看了更多的內容。根據數據，你可以作出更有針對性的改版設計。
6、長(cháng)滾動(dòng)并不是說(shuō)毫無(wú)限制。你并不需要在一個(gè)頁(yè)面內塞入500頁(yè)書(shū)的內容，講述你的故事，然后結束。
7、專(zhuān)注于你的用戶(hù)和目標。創(chuàng )建長(cháng)滾動(dòng)頁(yè)面的時(shí)候，應該明白用戶(hù)也是需要方向感的，所以，你應該通過(guò)設計讓他們知道所處的位置，能夠通過(guò)合理的導航跳轉到其他的位置。
8、加入視覺(jué)線(xiàn)索。
以滾動(dòng)為主交互的設計，是一把雙刃劍，用對與用好是同樣重要的。
未來(lái)：無(wú)頁(yè)面式設計
在長(cháng)滾動(dòng)頁(yè)面中，用戶(hù)通常不會(huì )涉及到頁(yè)面間的跳轉。仔細觀(guān)察最近幾年的趨勢，最常用的移動(dòng)端設備，我們的手機，在界面尺寸上基本上穩定下來(lái)了，在小屏幕上的滾動(dòng)交互，將會(huì )在未來(lái)越來(lái)越多。
頁(yè)面的概念正在逐步淡化，長(cháng)滾動(dòng)頁(yè)面的下一步進(jìn)化應該就是“無(wú)頁(yè)面式”的網(wǎng)頁(yè)設計，實(shí)際上許多設計師認為這才是網(wǎng)頁(yè)設計的未來(lái)。
交互設計是長(cháng)滾動(dòng)式網(wǎng)頁(yè)的設計基礎，如果用戶(hù)喜歡你所設計的頁(yè)面，并且覺(jué)得它們足夠有趣而直觀(guān)，他們是不會(huì )在意內容長(cháng)短的。
【網(wǎng)頁(yè)設計中的滾動(dòng)交互新技巧】相關(guān)文章：
長(cháng)滾動(dòng)網(wǎng)頁(yè)設計技巧03-08
網(wǎng)頁(yè)設計技巧:視差滾動(dòng)效果05-31
長(cháng)滾動(dòng)網(wǎng)頁(yè)頁(yè)面設計技巧01-16
網(wǎng)頁(yè)設計中的小技巧08-04
網(wǎng)頁(yè)設計中的模糊技巧03-08