萬盛學電腦網

您现在的位置: 萬盛學電腦網 >> 程式設計 >  >> 網頁製作 >> 互動設計

交互淺談:分頁組件的場景化設計模式全解析

分頁核心作用:跳轉上/下頁。基本元素:上頁 + 頁碼 + 下頁、總頁碼、跳轉頁、確認按鈕。根據場景不同組合:

場景 1:論壇(19 樓)— 萬頁級,用戶重首頁與選擇性翻閱

  • 頂底部雙分頁 + 「返回列表」快捷操作;
  • 永遠顯示第 1 頁,省略號表示隱藏頁碼;
  • 僅提供「首頁 + 5 連續頁碼 + 末頁」+ 跳末頁按鈕(假設用戶最多連看 5 頁)。

場景 2:微博(新浪)— 瀲讀報紙式逐頁瀏覽

  • 「上/下頁」最高頻,次為跳轉;
  • 傳統頁碼簡化為下拉選單,兼顧位置標識與跳轉;
  • 每頁 45 條,預設推送 10 頁。

場景 3:百度搜尋結果 — 任務導向,目標在前 10 頁

  • 首次僅 10 頁碼;腳印圖形對應頁碼可點擊,增趣味;
  • 無首頁按鈕(用戶不回首頁),僅上/下頁;
  • 點擊任一頁後,後續提供「當前頁+9」擴大範圍;
  • 最多 20 頁碼,適配頁面寬度。

場景 4:資訊流滾動翻頁

騰訊微博

  • 每頁 45 條,「更多」按鈕追加載入;並提供頁碼模式供選擇,更人性化。

花瓣 — 無限滾動

  • 滾動到底自動載入新內容;
  • 內容耗盡自動出現「查看更多相關」引導探索;
  • 頁面過長提供「回到頂部」。

拓展:其他分頁形式

以上為交互團隊分頁設計小結。文章來源:良無限-UED

copyright © 萬盛學電腦網 all rights reserved