Nested List｜巢狀清單｜UI 元件百科

60 秒決策

先確認使用者要完成的事。

適合使用

只要讓人閱讀固定的層級內容，例如文件大綱、說明分類或靜態導覽。
內容量小，不需要快速展開、收合、選取或檔案總管式鍵盤走訪。

不適合使用

每個節點都有動態載入、展開或選取狀態。
使用者必須同時比對多個欄位，或資料會頻繁調整層級。

畫面要說清楚的事

不要只交代外觀，也要交代資料與輸入規則。

清單標記與縮排各司其職

縮排表示層次，標記讓人知道這是一組內容；不要把每層改成難懂的裝飾線。

可點就像連結，不可點就像內容

若項目能前往另一頁，使用 Link 樣式；純文字不要畫成按鈕或假選取列。

留住閱讀節奏

清單項目太長時先改寫內容或分段，不要用過深的縮排壓縮手機畫面。

必要狀態與回應

每個狀態都要讓使用者知道下一步。

一般閱讀

所有層級都已露出，使用者依文件順序閱讀。

連結項目

若項目可前往另一處，保留可見連結樣式與標準鍵盤行為。

長內容折行

在窄螢幕可以折行，縮排仍要保留而不是讓第二行跑到頁面最左邊。

操作 Demo

先知道要觀察什麼，再動手操作。

操作前先知道

專案資訊架構
先觀察：它只呈現可讀的父子內容，沒有假裝成可展開控制項。
操作：用 Tab 走訪其中的文件連結，或在手機寬度查看長項目換行。
預期結果：可點項目使用自然連結；純文字項目不會取得不必要的互動焦點。

可操作 Demo

只需要閱讀層級內容時，清楚的巢狀清單就夠了。

LumenDesk／產品與設計中心

同一份部門與專案資料，依任務換成不同的呈現方式。

虛構工作區資料

專案說明內容

Nested List：把層級交給語意與縮排，不製造假控制項

一般閱讀內容

這是一份會放在專案文件裡的資訊架構；所有內容已經露出，不需要收合、選取或方向鍵走訪。

LumenDesk 工作區
- 產品與設計中心
  - 產品策略組
    - LumenCore 平台
    - 行動應用程式
  - 設計系統組
    - 元件盤點計畫
- 研究中心
  - 可用性研究
  - 資料洞察

適合：文件、說明內容、少量固定分類。不適合：檔案總管式的展開、選取或大量動態節點。

告訴 AI

把任務、規則、狀態與操作條件一次寫清楚。

在 LumenDesk 的專案說明區建立 Nested List，呈現「工作區／部門／專案」三層內容。使用語意化 ul 與 li，保留縮排、清楚的層級間距與可讀的清單標記；內容可以是一般文字或連結。不要加入假的展開箭頭、選取狀態或方向鍵互動；若使用者需要瀏覽大量可收合節點，改用 Tree View。

驗收清單

不要只確認欄位能不能點。

若移除縮排，內容是否仍然只是靜態清單？
是否使用語意化 ul、ol 與 li，而不是一串 div？
可前往的項目是否以 Link 呈現？
是否沒有假的箭頭、假的選取底色或不存在的鍵盤互動？
在 360px 寬度下，長項目第二行是否仍對齊在同一個清單層級？
若開始需要展開與選取，是否改用 Tree View？

Nested List｜巢狀清單