# Slack 設計規格與首頁分析

語言：繁體中文（台灣用語，zh-TW）。內容整理：2026-10-15。官網參考日期：2026-10-11。

## 參考來源

- 公開來源：https://slack.com/
- 對應完整預覽：`official-drafts/slack.html`
- 預覽 SHA-256：`a6c7f9a9fa25c84718455eaad78561b67d59f29d57d2d635778c8eb2b3800ad0`
- 本次更新為文字在地化，不代表重新檢查了今日官網。品牌完整預覽、原始截圖與原生生成紀錄保留來源原貌。

## 目前首頁的視覺與結構

官方來源：https://slack.com/，觀察日期2026-10-10。

保留白色首頁、Slack 官方字型、目前 AI 主標與六個客戶商標、五組產品示範、紫色六組 AI 示範、八則目前更新、Knowledge／People／Process／Platform 四段 UI、四個客戶故事、業務數字、六個 G2 徽章、四張深入資源卡、五條註腳與完整六欄頁尾。

Slack最終窄版高度12366px與官方相同。桌面11532px與官方最終11534px有2px示範影片相位差。90%指保持連結、43指團隊平均使用App數、87%指更有效協作；700M為每日訊息、4M為每週外部協作人數、3M為每日Workflows、1.7M為每週活躍Apps。不得改成供應商生成的其他定義。

完整官方頁面先以分段DOM保存，原生Google Stitch重新生成的結果與供應商說法保留。接著以今天官方的完整渲染DOM/CSS、字型與公開照片修正具體頁面；舊草稿及原生生成未被覆寫。

實際於1440×1000及390×844 CSS像素、DPR1、相同桌面UA逐段捲動、截圖與比較；390px是響應式窄版證據，並非真實手機硬體測試。兩尺寸均無水平溢位，已觀察的本地圖片皆載入，字型完成載入。已逐段檢視全部比較圖；影片時間、轉場及部分互動不同，不能推論全面官方一致。

## 套用至自己的專案

製作團隊協作首頁，包含頻道總覽、對話預覽與精簡活動清單。茄紫色建立導覽架構，奶油色作為閱讀背景，未讀活動不只以色點表示。

可先拆出下列核心元件：頻道活動卡片，包含未讀數、參與者縮寫與追蹤切換。先核對目前預覽的內容層級與構圖，再建立可重複使用的色彩、字型、間距及元件狀態。較早的延伸設計變數位於 `design-md/slack/DESIGN.md`；與本次觀察不一致時，以日期限定的實際觀察為準，不把延伸值冒充當日量測。

## 繁體中文與台灣用語

介面文案、按鈕、提示、錯誤訊息、圖片替代文字、設計規格與交付說明，一律使用繁體中文（台灣用語）。保留品牌名稱、字型名稱、檔名、網址、API 識別字與可執行程式碼。HTML 使用 zh-Hant-TW；數字與日期以 zh-TW 格式呈現，幣別及時區依原資料標示，不擅自換算。

使用「專案、元件、資料、建立、預設、載入、登入、連結、儲存、影片、伺服器、滑鼠」等台灣用語。繁體中文可依實際環境採 `Noto Sans TC`、`PingFang TC` 或 `Microsoft JhengHei`，原字型未涵蓋中文字時記錄替代方式。檢查長中文標題與混合中英文換行，不沿用英文固定字寬或大寫字距作為中文限制。

## 響應式與操作要求

以原有尺寸紀錄作視覺對照；新專案另檢查 390px、768px、1440px 的版面。保留語意閱讀順序、可見鍵盤焦點與具名稱的控制項，主要觸控區域建議至少 44px。支援載入、空白、錯誤、停用與已選取狀態，並提供減少動態效果的替代呈現。

以上是新專案的實作建議，不表示原預覽已完成全部互動或無障礙驗收。來源的價格、資料、活動及服務狀態皆屬原日期畫面內容，示範使用時應標明範例，不推論為即時結果。

## 已知差異與限制

- 桌面來源早期階段高 11532px，最後 Ask Slackbot 階段高 11534px；本機固定的專案規劃階段為 11532px。官方影片比例中繼資料使主視覺高約相差 2px；窄版來源與本機皆為 12366px。
- 使用原始公開影片，但畫格時間未同步。主視覺與 AI 文字啟用可在本機運作，原生 Swiper 分頁、滑動拖曳、自動輪替與全部功能選項尚未完整實作或驗證。
- 最新消息下一則控制及頁尾產品展開已操作檢查，但不代表全部輪播端點、停用狀態與每個頁尾互動都一致。
- 390px 下已驗證主選單、功能展開、返回與 Escape；全部桌面滑鼠移入、焦點、轉場與鍵盤焦點限制不在本次比對範圍。
- 未重建原始 Cookie 服務介面，Cookie 偏好設定開啟本機教學對話框。地區、搜尋、帳戶、示範及登入未驗證為官方服務。
- 2 個公開素材下載失敗，分別為未使用的裝飾圖及已排除的 Cookie 圖示；兩種最終寬度的已觀察本機圖片皆載入。真實裝置與其他寬度尚未驗證，原始比對未涵蓋最終部署。

## 交付與驗證

交付實作檔案、設計變數、繁體中文文案、可操作的核心元件與實際檢查結果。逐項列出仍未完成的互動與服務，不以相同頁高、少量幾何資料或供應者宣稱取代完整視覺檢查。原始比對仍為有差異的參考，未宣稱官方授權或完全一致。