列表頁

列表頁是後台最常見的頁型:一張 data table 加上搜尋、篩選、分頁。這章把由上而下的必備區塊講清楚,重點是「唯一的 primary 一律放在 page header,toolbar 不放 primary」。當你要排列表頁、決定新增按鈕該放哪、或處理篩選無結果時,就翻這頁對一下。

標準列表頁

這是什麼

頁籤切換狀態、頁首主要按鈕、搜尋與篩選工具列、資料表格、底部分頁。

什麼時候用

任何需要瀏覽、篩選、批次管理清單資料的後台頁面。

預覽依本指南規則實作
S

SaaS Console

Platform

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

專案

狀態:Active
狀態負責人更新
行銷 Q2ActiveAna2 小時前
官網改版DraftBen昨天
CRM 匯入PausedChen3 天前
內部工具ActiveDana1 週前

Card-stacked 列表

這是什麼

Paper 預約列表:篩選卡與表格卡分離(gap 8px)、40px 搜尋列、ink focus ring、列 hover 箭頭。結構與 admin-bookings.html 一致。

什麼時候用

filter 元素多於標準 toolbar 一行能容納時;仍保留 page header primary 與底部分頁。

預覽依本指南規則實作
S

SaaS Console

Platform

搜尋專案、成員、動作…
TZ
營運後台預約管理

預約管理

日期時間廠區公司統編聯絡人聯絡電話堆高機車輛類型車數重量狀態

List Rows

這是什麼

多種列表列樣式:會議列表、成員表格、域名列、批次通話列等。

什麼時候用

展示不同資料密度與欄位組合的列表/表格列時,依情境選對應列元件。

預覽依本指南規則實作
Your trial ends in 3 days. Upgrade to keep all features.
P

Product Team Sync

Thu, Mar 12, 09:14 AM

Completed
S

Sales Weekly

Wed, Mar 11, 02:00 PM

Not allowed in
D

Design Review

Tue, Mar 10, 11:30 AM

Meeting was too short

Members

A

Alex Smithyou

alexsmith.mobbin@gmail.com

Role: Admin
Access: Can view and edit all tools and knowledge sets
Team: Can edit
S

Sam Lee

sam@acme.com

Role: Editor
Access: Can view and edit assigned tools
Team: Can view

Cloudflare Domains

DomainStatusSecurityVisitorsPlan
content-mobbin.comInvalid nameserversDevelopment ModeFree
updates.acme.comActivePro
notify.app.ioActiveFree

ElevenLabs Batch Calling

NameAgentStatusProgressDuration

First Batch Call

2 recipients

Support AgentIn progress100%

Onboarding sequence

48 recipients

Sales AgentCompleted100%12m

UiPageHeader

這是什麼

頁面標頭:title、description、icon、右側 actions。

什麼時候用

列表或詳情頁頂部;需標題、說明與主要/次要按鈕並列時。

Overview

Manage your domains and DNS settings.

規格速查

區塊(由上而下)定稿內容
Page headerbreadcrumb、H1、Primary CTA(如「+ 新增專案」)
Tabs(可選)全部/進行中/封存,underline 頁級 tab,切換寫入 URL
Toolbar只放 search/filter/sort/display settings,filter 以 chip 顯示
Data tablecheckbox on hover、row actions、狀態 badge
Pagination「第 x–y 筆,共 z 筆」+ 上一頁/下一頁
Empty(無結果)小 empty + Clear filters
Empty(首次)導向建立第一筆(first-use empty)
Saved viewtoolbar 旁「已儲存檢視」下拉

唯一 primary 一律在 page header;toolbar 僅負責搜尋/篩選/排序/display settings,不放 primary CTA(此規則覆寫 data-table 內 toolbar 範例的 primary 寫法)。

常見做錯

做錯正確
把 primary CTA 放進 toolbarprimary 只在 page header,toolbar 不放 primary
一個列表頁同時出現兩個 primary全頁唯一 primary,匯出等用 secondary,勿與它搶眼
首次使用與篩選無結果共用同一個 empty首次導向建立第一筆,無結果給小 empty + Clear filters
切換 tabs 不寫入 URLtab 切換寫入 URL,重新整理/分享連結能回到同一檢視
點列開 drawer 但網址不變開 drawer 寫入 ?drawer=資源id,關聯欄位用同一 id 深連結

相關章節