近年來,,曾經(jīng)的網(wǎng)站設(shè)計“禁忌”已經(jīng)成為最受歡迎的技術(shù)之一,用戶開始欣賞和喜歡網(wǎng)頁站中的滾動設(shè)計。滾動設(shè)計擺脫了之前的標(biāo)簽定義,它正在重塑自己去成為交互設(shè)計的一個核心元素——這也意味著設(shè)計師們需要學(xué)習(xí)新的滾動設(shè)計規(guī)則。在本文中,我們將探索滾動設(shè)計的重生,討論一些滾動設(shè)計的利弊,并分析一些技巧。為什么滾動條可以重新被人們喜愛?答案很簡單,那就是移動設(shè)備的遍及。自從移動用戶超越桌面用戶以來,世界各地的UI設(shè)計師都進行了相應(yīng)的調(diào)整。隨著越來越多的用戶使用較小的屏幕,滾動變得越來越重要:屏幕越小,滾動的時間就越長。也有其他因素。比如,人們在更多地方可以訪問高速互聯(lián)網(wǎng),使用滾動能更快捷地訪問信息,而不是從頁面到頁面點擊。社交媒體網(wǎng)站的日益強大也推動了此技術(shù):滾動自然地適應(yīng)了他們豐富的用戶生成內(nèi)容。正如《2015-2016 年網(wǎng)頁設(shè)計趨勢》指南中所解釋的,長滾動與基于卡片的設(shè)計一起演變。結(jié)合后,這些技術(shù)就可以為用戶提供源源不斷的小容量內(nèi)容(這非常適合web,尤其是移動體驗)。此外,把內(nèi)容都集中在一屏里而不是使用長滾動的原則被認為是一種迷信。根據(jù)實際研究,事實是用戶真的不介意滾動。當(dāng)然,這個迷信之所以流行,部分原因在于,在Javascript和CSS的進步之后,滾動只被認為是一種有意義的設(shè)計模式。 在此之前,通過視覺講故事使?jié)L動 "有趣" 要困難得多??梢韵胂螅谋镜拈L頁(偶爾被圖像打斷)并不是一個非常吸引人的 UI 布局但是一旦你嘗試使用長滾動作為畫布來展示開頭,中間和結(jié)尾(通過圖形,動畫,圖標(biāo)等),那么你就會開始看到它在吸引用戶注意力方面具有電影般的力量。事實上,一些混合模式正在成為滾動的最新趨勢。 例如,我們在自己的UXPin游覽頁面上使用的 “原地固定滾動” 創(chuàng)建了傳統(tǒng)長滾動網(wǎng)站的相同交互式體驗,而無需垂直拉伸網(wǎng)站。滾動設(shè)計適合你的產(chǎn)品嗎?每一種設(shè)計技巧和工具,都有喜歡這個概念的人和那些討厭它的人。在大多數(shù)情況下,任何一方都不是本質(zhì)上對錯的;因此,在處理此類項目之前,權(quán)衡所有注意事項非常重要。滾動的優(yōu)點:鼓勵互動 – 隨著不斷變化的元素不斷刺激,它可以是一種有趣的講故事方法,鼓勵用戶交互 - 尤其是高雅執(zhí)行的視差滾動。更快 – 長滾動比單擊復(fù)雜的導(dǎo)航路徑更快,并且不會減慢或限制用戶體驗。如Interaction Design Best Practices中所述,對時間的感知通常比實際時間的流逝更重要。吸引用戶 – 易用性可促進交互性,增加現(xiàn)場時間。對于無限滾動網(wǎng)站尤其如此,您可以在其中幫助用戶發(fā)現(xiàn)他們可能甚至沒有想到的相關(guān)內(nèi)容。響應(yīng)式設(shè)計 – 頁面設(shè)計在具有不同屏幕大小和功能的設(shè)備之間可能會變得復(fù)雜,但滾動有助于簡化差異。手勢控制 – 滾動似乎與觸摸有著有機的聯(lián)系,因為向下輕掃比在屏幕上不同區(qū)域重復(fù)點擊要自然得多。。 用戶(尤其是移動設(shè)備)通常接受這一方式來顯示信息。令人愉快的設(shè)計 – 不需要多次單擊即可獲得更快的交互,從而獲得更類似于應(yīng)用或游戲的用戶體驗。
Photo credit: Bauer滾動的缺點固執(zhí)用戶 –一些用戶總是毫無理由地去抵制改變。盡管如此,該技術(shù)現(xiàn)在非常普遍(特別是在移動體驗期間),可以說大多數(shù)用戶都習(xí)慣了這種技術(shù)。SEO缺點 - 只有一個頁面可能對網(wǎng)站的SEO產(chǎn)生負面影響。迷失方向 - 滾動和內(nèi)容之間的斷開可能會使用戶感到困惑或脫節(jié)。導(dǎo)航困難 – "返回"頁面上的先前內(nèi)容可能會很尷尬。為了對付這種情況,您可以創(chuàng)建一個持久的頂部導(dǎo)航,其中每個部分都錨定到頁面。網(wǎng)站速度 – 視頻或圖像圖庫等大量內(nèi)容可能會降低網(wǎng)站速度,尤其是視差滾動網(wǎng)站,它們依賴于 Javascript 和 jQuery沒有頁腳 – 使用無限滾動網(wǎng)站,我們建議使用簡約的"粘性"頁腳,這樣您就不會犧牲可導(dǎo)航性。否則,用戶可能會因為頁面底部缺少進一步的導(dǎo)航而感到困惑。撇開優(yōu)點和缺點不談,某些類型的網(wǎng)站更適合長滾動設(shè)計。更長的滾動網(wǎng)站更適合……...包含很大一部分移動流量(大多數(shù)用戶)...包括頻繁更新或新內(nèi)容(如博客)...有很多信息以單一的方式呈現(xiàn),以便理解(如信息圖)...不包含富媒體,因為這可能導(dǎo)致負載時間的消耗社交媒體網(wǎng)站帶有不斷和廣泛的用戶生成的內(nèi)容,可以很好的進行長滾動設(shè)計(事實上,早在幾年前,F(xiàn)acebook和Twitter就幫助推廣了這項技術(shù))。另一方面,像電子商務(wù)這樣的目標(biāo)導(dǎo)向的網(wǎng)站——需要連貫的導(dǎo)航——更趨向于保守的頁面長度。