詳情檢視

當使用者從列表點進「查看單筆資料」時,要的是一個獨立的詳情頁,不是彈出 modal。這章講清楚詳情頁的分工、page header 與內容區怎麼排。當你要做「點列表某一筆看細節」的畫面、或在猶豫該用 full page 還是 modal 時,就翻這頁對一下。

詳情檢視頁

這是什麼

整頁詳情:路徑列、大標題、頁籤切換各區塊;主要按鈕「編輯」進入編輯頁。

什麼時候用

檢視單筆資料、網址可分享時;編輯另開頁或切換模式,詳情頁以唯讀呈現。

預覽依本指南規則實作
S

SaaS Console

Platform

搜尋專案、成員、動作…
TZ
首頁專案行銷 Q2

行銷 Q2

Active更新於 2 小時前 · 負責人 Ana

說明

Q2 品牌與轉換活動;預算已核准,時程 3–6 月。

屬性

建立日
2026-01-12
預算
NT$ 800K
  • 查看用 full page、URL 可分享;編輯另開或同頁切換模式(見 04-forms24-content-form-page)。
  • Breadcrumb ≥3 層:首頁 › 列表 › 項目名(最後一項 = H1)。
  • Header:Secondary 動作(匯出、更多)+ Primary「編輯」。
  • 內容:tabs 或兩欄(主欄 + meta sidebar);欄位以 read-only 呈現。

雙欄詳情 + 編輯 drawer

這是什麼

主欄 read-only section + sticky aside 大數值;中等編輯用右側 drawer,不必跳 full page。

什麼時候用

營運詳情(預約、工單)需快速改少數欄位時;完整大表單仍用編輯頁。

預覽依本指南規則實作

基本資訊

公司
示例物流
聯絡人
王小姐
到場時間
2026-06-04 09:00
狀態
已確認

備註

需提前 15 分鐘到場登記;車輛限 12 噸以下。

規格速查

項目定稿值
頁型full page(URL 會變、可分享);查看詳情不用 modal
Page headerbreadcrumb(首頁 › 列表 › 資源名)+ H1(= 資源名)+ 編輯 CTA
H1寫資源名稱,勿只寫「詳情」
右側動作一個 primary「編輯」;其餘(匯出、複製連結、更多⋯)secondary
meta 列狀態 badge、更新時間、負責人放 H1 下方
內容分區tabs(概覽/成員/活動/附件…),同 URL 可用 hash 或 ?tab=
欄位read-only(文字、連結);右欄(1/3)放屬性、標籤、快捷動作

常見做錯

做錯正確
查看詳情用 modal 彈出查看詳情用 full page,URL 會變、有 breadcrumb
沒有 breadcrumb,使用者迷路page header 一定有 breadcrumb:首頁 › 列表 › 資源名
編輯與查看混在同一畫面、沒有模式區分詳情頁 read-only,編輯改點 primary CTA 進編輯頁
詳情頁直接塞大型編輯表單欄位以 read-only 呈現,編輯走 content-form-page

相關章節

  • 列表頁 — 詳情頁的上一站,從列表點進單筆
  • 新增/編輯頁 — 點「編輯」後進入的全頁表單
  • 導覽 — breadcrumb 與 page header 的搭配規則
  • Modal 與覆層 — 什麼情況才該用 modal,而非 full page