什么是網(wǎng)頁設(shè)計中的滾動設(shè)計？如何進行滾動設(shè)計？

時間：2023-10-06 11:24:01 | 來源：網(wǎng)站運營

時間：2023-10-06 11:24:01 來源：網(wǎng)站運營

什么是網(wǎng)頁設(shè)計中的滾動設(shè)計？如何進行滾動設(shè)計？：近年來，曾經(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動 "有趣" 要困難得多。可以想象，包含文本的長頁（偶爾被圖像打斷）并不是一個非常吸引人的 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)用或游戲的用戶體驗。

滾動的缺點

• 固執(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)航——更趨向于保守的頁面長度。




處于中間處境的是像Etsy這樣的網(wǎng)站：一個用戶生成產(chǎn)品的網(wǎng)上商店，它使用混合解決方案：幾頁所謂的"無限"滾動，最后以"顯示更多"的號召性用語結(jié)束。




與所有 Web 設(shè)計趨勢一樣，不要僅僅因為看到其他網(wǎng)站遵循該模式而使用較長的滾動。確保您你的網(wǎng)站符合我們討論的標(biāo)準，否則實際上你可能會體驗到更差的性能。

滾動最佳實踐

長滾動、視差效應(yīng)和類似機制在設(shè)計領(lǐng)域中仍然比較新（約4年歷史），但仍從試錯經(jīng)驗中可以獲取一些基本的最佳實踐。




從 2015 和 2016 的 Web 設(shè)計趨勢總結(jié)，以下是成功實現(xiàn)長滾動的一些日常技巧。

1. 不用擔(dān)心短滾動和長滾動交替使用。 讓內(nèi)容決定滾動長度，而不是反過來。 使用短滾動主頁和長滾動著陸頁（如產(chǎn)品，旅游等）非常好（并且非常受歡迎）。
2. 考慮粘性導(dǎo)航，以便用戶始終可以快速"返回"或從滾動中的元素跳轉(zhuǎn)到另一個元素。
3. 將滾動與設(shè)計元素或工具結(jié)合，以便每個用戶都能快速了解網(wǎng)站的工作方式。箭頭、動畫按鈕或類似的用戶界面工具是幫助用戶確定下一步操作的有趣且簡單的方法。有些網(wǎng)站甚至包含一個小按鈕，其中包含"滾動更多"或"開始"等說明，來提高頁面的導(dǎo)航性。
4. 明確區(qū)分滾動點擊和其他CTA元素，以便網(wǎng)站獲得所需的交互。
5. 做一些研究，看看用戶如何與滾動交互。例如，在 Google 分析中，可以打開"網(wǎng)頁分析"選項卡，查看屏幕下方（第二屏及之后）用戶的點擊數(shù)。然后，你可以根據(jù)需要調(diào)整設(shè)計。
6. 不要過分。長滾動并不意味著 500 頁的連續(xù)內(nèi)容 - 長滾動也可以很簡單。講述你的故事，然后適可而止，不要喋喋不休 。
7. 專注于用戶目標(biāo)，并接受即使是無限滾動網(wǎng)站也不是真正無窮無盡的。 創(chuàng)建長滾動網(wǎng)站時，要了解用戶仍需要方向感（當(dāng)前位置）和導(dǎo)航（其他可能的路徑）。
8. 包括有助于在滾動中定位用戶的視覺提示，例如左下方用于“七種類型的摩托車騎手”站點的頭盔圖標(biāo)。

滾動可能是一把雙刃劍，所以堅持使用它的建議用法，以避免它弊大于利。

未來的無頁面設(shè)計

長滾動網(wǎng)站不能適應(yīng)所有的情況。盡管我們已經(jīng)看到流行設(shè)備上屏幕大小的起伏和流動（或增加和減少），但在可預(yù)見的將來，屏幕尺寸很小。小屏幕需要更多的滾動。




事實上，從長滾動到 "無頁面" 的設(shè)計的過渡已經(jīng)開始，一些設(shè)計師（如數(shù)字遠程技術(shù)設(shè)計師）甚至相信這是網(wǎng)絡(luò)的未來。隨著網(wǎng)站不斷擺脫用戶思考和使用信息的一些限制，設(shè)計人員必須更徹底地思考在不同環(huán)境中創(chuàng)建內(nèi)容的最佳方式。




交互設(shè)計是長滾動網(wǎng)站設(shè)計的基礎(chǔ)。 如果用戶喜歡這個界面，并且發(fā)現(xiàn)它直觀且有趣，那么他們就不會真正關(guān)注滾動的長度（只要它不是夸張地很長）。




你并不總是需要縮短滾動長度 - 你還可以讓滾動過程更有趣。

---

看完這篇文章，你開始對滾動設(shè)計感興趣了吧？那么就快去試一試啦~




產(chǎn)品經(jīng)理和UI設(shè)計師們都可以使用墨刀，很方便地對產(chǎn)品進行滾動設(shè)計：把鼠標(biāo)放在頁面最底部區(qū)域，拖動即可調(diào)整頁面長度。




本文由墨刀翻譯自 Jerry Cao 的The New Rules for Scrolling in Web Design。




墨刀作為一款在線原型設(shè)計與協(xié)同工具，已經(jīng)幫助眾多產(chǎn)品經(jīng)理和設(shè)計師們輕松做出交互原型，展現(xiàn)和驗證設(shè)計想法，還支持多人協(xié)作編輯，分享和評論。新注冊用戶即可獲得墨刀高級企業(yè)版的15天免費試用！開始體驗一下吧！