常見三種分類顯示信息方式：常規翻頁（橫向）、信息滾動翻頁/滾動條（縱向）。分頁雖小，大多網站設計大同小異，用戶習慣成本為零，但細節打磨能顯著提升體驗。

一、 常規翻頁：橫向導覽的經典藝術

1. 組成結構

• 上頁 + 頁碼 + 下頁
• 跳轉至 __ 頁 / 第 __ 頁 + 確認按鈕
• 支援鍵盤操作

2. 使用情景與設計前必問 10 個問題

適用於內容多、需多頁面間跳轉定位的場景（電商 3 級頁、搜尋結果頁）。設計前必須明確：

• 分頁內容類型？總頁數？最高頻查看頁？
• 手動翻完所有頁的幾率？是否非順序跳轉？原因？
• 是否回看已翻頁？頂底部是否都需顯示？
• 「最後一頁」是否必要？頂部何時出現翻頁？
• Mouseover 預覽頁面內容可行性？

郵箱屬反覆瀏覽型且頁面長，需頂部翻頁；電商搜尋/微博屬底部觸發翻頁，頂部可省略。

3. 競品交互深度拆解

Google 翻頁：智能漸進式載入

首屏僅 10 頁碼 → 點擊任意頁後提供「當前頁+9」最多 20 頁碼。猜想：前 10 頁滿足多數需求；不滿足則擴大範圍；但受版面寬度限制，上限 20。

Baidu 翻頁：首頁永駐 + 固定點擊區

始終保留第 1 頁（Home 角色），中間「…」省略。選中/hover 樣式位置固定，點擊下一頁無需移動滑鼠，頁碼自動替換狀態。微創新：減少瞄準成本，可借鑒至輪播圖設計。同樣最多 20 頁碼。

新浪微博小分頁：滾動+翻頁混合體

上下頁並排便於點擊；高頻「下一頁」樣式突出，「上一頁」簡化；中間頁碼簡化為下拉選單，標識當前位置又能跳轉，體現輕量概念。

4. 用戶心智模型對齊分析

淘寶搜尋結果頁：

模糊搜尋→逐頁翻看→「上/下頁」最高頻→便於切換；間隔跳頁→區分已訪問/未訪問頁碼樣式；前幾頁瀏覽率最高→始終顯示首頁；頁碼數量適中（避免識別難/信息少錯覺）。

新浪微博信息流：

如讀報紙逐頁瀏覽→「上/下頁」主導；跳轉輔助→傳統頁碼簡化為下拉選單。

5. 總結

缺點：打斷閱讀；優點：條理清晰、便於分段查找、後端壓力小。分頁非孤立存在，必結合使用環境交互設計。

二、 信息滾動翻頁：無限流的沉浸體驗

Google 圖片搜尋經典案例：

• 無限滾動：到底部自動刷新新內容；
• 連續翻頁後無內容→自動出現「查看更多相關信息」引導；
• 可選點擊觸發加載；
• 頁面過長必提供「回到頂部」按鈕。

優點：貼近心智模型，閱讀連貫；缺點：段落加載失敗時無法跳躍瀏覽後續內容。

三、 滾動條：原生與自定義的優先級博弈

1. 滾動條與翻頁共存時的設計決策

• 翻頁在滾動條內部： 滾動到底部才出現翻頁（源自瀏覽器嵌套邏輯）。QQ 郵箱採用此模式。
• 共存但滾動內容不宜過長 (PC端)： 滑塊高度低於 8px 操作體驗急劇下降（統計 IE/FF/Office 等通用軟體下限）。
• 移動端似無限制： 手指直接點擊滑動，無拖動滑塊困擾。

2. 分頁不一定要 Click 跳轉

上下翻頁 + 快速拖動瀏覽不同頁內容，適用於可粗略瀏覽的頁面。

四、 總結與核心原則

1. 結構本質區別： 傳統翻頁 = 橫向分段顯示；無限滾動 = 縱向遞增顯示。
2. 區分已訪問/未訪問頁碼樣式， 助記憶、防重複瀏覽。
3. 鏈接可點擊區域最大化， 降低瞄準成本。
4. 根據業務屬性選型： 目標明確找東西→翻頁；探索式瀏覽→無限滾動；長列表輔助→滾動條。

（已訪問/未訪問頁碼樣式區分示例）