萬盛學電腦網

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

詳情頁返回列表:回頂端還是回原地?交互設計的鐵律與配套設施

列表頁點擊進入詳情,返回時:列表不應刷新、不應回頂端、必須回原地(離開位置)。

為何必須回原地?

  • 用戶剛看完某項,返回多半想繼續往下看。
  • 原地最熟悉、最不恐懼,認知負荷最低。
  • 列表即疊放文件,看完一張接著看下一張,符合心智模型。

展開/彈出式詳情:更合理的回原地場景

頁內展開、彈出層保持列表靜止,回原地理所當然。全屏彈出遮蔽列表則等同跳轉頁面。

歷史包袱:為何曾流行「刷新回頂端」?

PC 網頁技術限制:導航隨頁面滾動消失。刷新回頂端帶來兩個「好處」:
1. 展示更新內容
2. 頂部導航確認當前位置

但為此犧牲「回原地」體驗屬於捨本逐末。判斷依據應為:用戶好理解、用起來方便。有問題就配套設施解決。

五大配套設施,讓「回原地」完美落地

設施一:持久化導航——時刻知曉身在何處

移動端:一級頁面頂/底固定導航,二三級頁面標題+返回鍵。
PC 軟件:導航固定不滾動。
PC 網頁:導航滾出視口時浮動固定頂部(如淘寶詳情頁),有益嘗試。

設施二:滾動條指示頁面內位置

移動端右側窄條純為展示位置,iOS 僅滾動時出現。建議:返回列表時「閃現一下」窄滾動條,原則是「需要時出現」而非「滾動時出現」。

設施三:提供「回頂端」捷徑

PC:右下角 Top 按鈕。移動端:iOS 點頂部分割線區域(隱蔽高效)。形式不拘,功能必備。

設施四:「新資訊」提示機制

回原地失去自動刷新的更新感知,須主動推送。稱職秘書模式:提示「來新文件了」、標註重要項。微博 App 底部導航紅點佳,網頁版頂部提示易被滾動遺漏。

設施五:Mark 閱讀位置,支援「看新→回舊」閉環

用戶點新資訊提示查看後,大概率想回原中斷位置。專為此任務設計的 Mark 功能,源自「任務羅列法」:無限詳述所有可能任務,檢驗產品完備度。

適用範圍與時間維度限制

PC/移動/網頁/App 通用,但時間維度不可無限制:列表數據過舊(如數小時前)需自動刷新或強制提示更新。

copyright © 萬盛學電腦網 all rights reserved