本文以大量實戰案例圖示，展示「文字衣櫥」設計模式在網頁快速閱讀場景中的多樣化應用。通過模組化的文字卡片佈局、清晰的視覺層級、靈活的交互狀態，實現信息的高密度呈現與低認知負荷獲取雙贏。

設計模式特徵

• 卡片化容器： 將標題、摘要、標籤、操作入口封裝為獨立單元，便於響應式重排與用戶逐塊掃讀。
• 視覺層級嚴謹： 標題字重/字號突出，摘要灰階弱化，元信息（時間、分類、作者）最弱，構建清晰閱讀節奏。
• 狀態反饋完備： 懸停高亮、選中態、已讀態、加載骨架屏，降低不確定性。
• 靈活佈局變體： 列表流、網格流、瀑布流、時間軸流，適配不同業務場景（資訊流、產品庫、知識庫、動態牆）。

典型應用場景圖鑑

設計師檢查清單

1. 卡片內邊距、圓角、陰影是否符合系統設計規範？
2. 文字截斷規則（單行/多行）、展開交互是否定義完備？
3. 圖片佔位圖、加載失敗圖、長圖處理策略是否就緒？
4. 極端數據（超長標題、無圖、無摘要）下的佈局容錯性？
5. 鍵盤無障礙操作、螢幕閱讀器語義化標記？

「文字衣櫥」非固定樣式，而是一種「模組化、層級化、狀態化」的設計思維。掌握其內核，靈活組合變體，方能應對千變萬化的信息呈現需求。