全民福委會｜活動足跡

在這裡，您可以快速瀏覽最近一個月的活動與會員最新訊息，無論使用桌機或手機，都能以清楚易讀的版面掌握重點。內容將定期更新，包含各類活動資訊、會員權益異動與重要公告，協助您不錯過任何重要消息。簡潔專業的卡片式排版，讓每則消息的標題、日期與重點說明一目了然，方便您依需求進一步點擊閱讀詳細內容。

最新消息與活動快訊

本區塊採用卡片式最新消息列表，搭配 2～3 欄響應式網格設計：桌機版顯示 3 欄、平板 2 欄、手機 1 欄。每張卡片在不同裝置上皆維持一致的留白與層次，確保資訊清楚、易於掃讀。

整體排版風格
・卡片排列在等寬網格中，欄與欄之間保留中等間距（例如 24px），上下行之間略大一點的垂直間距，讓每則消息有明確分隔。
・卡片本身使用淺色背景與細緻陰影（如 box-shadow: 0 4px 12px rgba(0,0,0,0.06)），營造輕盈浮起的效果。
・四角採用中度圓角（約 8–12px），搭配卡片內部 16–20px 的內距，讓內容不顯擁擠。

卡片內容結構
1. 縮圖圖片：置於卡片頂部，佔據卡片寬度，建議使用 16:9 橫向比例縮圖，方便呈現活動現場、場地或主視覺。若以會員公告為主，也可使用接近正方形比例（1:1）圖示式縮圖，但整個列表中應盡量維持一致比例，以保持版面整齊。圖片下方與文字區塊之間保留明顯間距。
2. 標題：放在圖片下方，作為視覺焦點，字級明顯大於內文（例如 H3 等級），字重偏粗，最多 1–2 行，超出以省略號處理，方便快速掃描。
3. 日期：置於標題下方，以較小字級與次要色（如灰階）呈現，例如「2026/06/18」或「2026-06-18」。可搭配小圖示或全大寫標籤風格，幫助使用者快速辨識時間。
4. 簡短文字敘述：日期下方為 1～2 行說明文字，概述活動時間地點、報名方式、會員權益更新重點或系統維護影響時段等。字級略小於標題但大於日期，行距舒適，方便快速閱讀。
5. 「了解更多」連結（選用）：置於卡片底部右側或左下角，以文字連結或小型按鈕呈現，使用明顯但不搶眼的主色，搭配箭頭圖示（例如「了解更多 →」），滑過時可加上下劃線或顏色變化，提示可點擊。

文字層級與易掃讀性
・標題層級最高，使用較大字級與粗體，讓使用者在快速瀏覽時先看到每則消息主題。
・日期採次要層級，顏色較淡、字級較小，但位置固定在標題下方，方便使用者快速比對時間先後。
・內文說明維持簡潔，建議控制在 40–80 字內，重點放在「活動時間地點」、「報名方式」、「會員權益變更重點」、「系統維護影響範圍與時間」等關鍵資訊。
・整體文字對齊以左對齊為主，避免長段落，並在不同卡片間維持一致的行距與字級，提升閱讀節奏。

響應式與互動細節
・桌機版：三欄網格，卡片寬度一致，卡片高度隨內容自適應，但建議控制標題與內文行數，避免高度差異過大。
・平板版：自動縮為兩欄，保留相同的卡片間距與內距，確保手指點擊「了解更多」時不會誤觸。
・手機版：單欄直向排列，卡片全寬顯示，圖片仍維持 16:9 或 1:1 比例，文字區塊上下留白略縮小，以提升可視範圍內可瀏覽的卡片數量。
・滑過卡片時可微調陰影與上移 2–4px 的動態效果，點擊範圍涵蓋整張卡片或至少標題與「了解更多」連結，提升可用性。

透過上述排版與層級設計，使用者能在短時間內快速掃描最近一個月的活動資訊與會員最新訊息，並在有興趣時立即點擊「了解更多」取得完整內容。

最新消息篩選與載入更多區塊設計

此「篩選與載入更多」輔助區塊協助使用者快速找到想看的最新消息，並延伸瀏覽更早期內容。上方提供簡單明瞭的篩選標籤，例如：「全部」、「活動訊息」、「會員公告」，以標籤列方式呈現。預設選取「全部」，選取中的標籤以明顯色塊或底線強調，滑鼠移過時有清楚的 hover 效果，讓使用者一眼就知道目前篩選狀態。

在桌機版中，整個區塊置中排列，篩選標籤橫向排列並平均分布，按鈕與標籤之間保留適當垂直間距（例如 16–24px），讓版面清爽易讀。下方的「載入更多」或「查看更多消息」按鈕採用中等寬度至全寬的醒目主色按鈕，文字短而有力，例如：「查看更多消息」、「載入更多內容」、「瀏覽更早消息」，字數控制在 5～10 個字。按鈕高度足夠、圓角與陰影明顯，滑鼠移過有顏色或陰影變化，強調可點擊性。

在手機版中，區塊同樣置中，但標籤改為可左右滑動或自動換行的直覺排列，每個標籤有足夠的左右內距，方便手指點擊。下方的「載入更多」按鈕建議採用接近全寬的設計，左右保留安全邊距（例如 16px），按鈕高度與字級略放大，確保拇指操作舒適。按鈕與列表之間保留明顯間距，避免誤觸其他元素。

整體操作流程應一目了然且直覺：使用者先透過標籤快速切換消息類型，再透過清楚可點擊的「載入更多」按鈕載入更早期的消息。按鈕狀態（預設、滑過、按下、載入中）需明確區分，例如載入中顯示簡短文字「載入中…」或轉圈圖示，避免重複點擊。透過清楚的標籤、醒目的按鈕與合理的間距設計，讓使用者在桌機與手機上都能輕鬆瀏覽最新消息。