標誌網格系統

標誌網格系統 是做什麼的？

目的

標誌網格系統提供了一種組織與呈現「社會證明」標誌的方法，例如客戶品牌、技術合作夥伴或媒體提及。與標準的圖片庫不同，標誌網格需要光學標準化，以確保不同長寬比（高、寬、正方形）和視覺密度的標誌，在視覺上顯得平衡且「重量」相等。這項技能可確保品牌的次要信任信號支持主要設計，而不會造成視覺混亂或損害外部品牌的完整性。

使用案例

• 「標誌雲」： 英雄區塊下方的一排水平客戶標誌。
• 「媒體報導條」： 頁尾或側邊欄中的媒體提及（例如「曾見於...」）。
• 整合/合作夥伴目錄： 展示技術生態系統的網格。
• 贊助區塊： 頁面底部的活動或專案貢獻者。
• 跑馬燈/捲動條： 品牌標誌的無限水平捲動。

何時不該使用

• 主要品牌識別： 用於設計網站自身的標誌（請使用專業的品牌識別/設計技能）。
• 圖示： 用於小型、功能性的 UI 符號（請使用 iconography-system）。
• 產品列表頁 (PLP)： 當主要內容是產品本身，而非其品牌標誌時。
• 導覽選單： 使用標誌而非文字作為主要網站導覽。

輸入

1. 資產清單： 收集各種格式的標誌（偏好 SVG）。
2. 品牌完整性規則： 了解合作夥伴品牌的「安全空間」與色彩使用要求。
3. 父層上下文： 網格將放置區塊的區段寬度與背景顏色。
4. 視覺階層優先順序： 標誌應醒目（全彩）還是低調（單色/淡化）？

輸出

1. 標準化矩陣： 為正方形、寬形和長形標誌定義的邊界框規則。
2. 視覺處理規格： 顏色（灰階、去背或原始色）、不透明度與懸浮狀態的規則。
3. 響應式網格藍圖： 欄位數量的規劃（例如行動裝置 2 欄，桌機 6 欄）。
4. 光學尺寸指南： 用於平衡視覺重量的特定百分比縮放規則。

工作流程

1. 審查資產並標準化格式

收集所有標誌並優先使用 SVG 格式。如果僅有點陣圖（PNG/JPG），請確保其為高解析度（至少為顯示尺寸的 2 倍）。移除原始檔案中不必要的內距，以確保「邊界框」準確反映標誌的尺寸。

2. 建立標準化容器

為每個標誌建立一個「標準化容器」（固定長寬比的盒子，通常為正方形或 3:2）。

• 使用 object-fit: contain 將每個標誌放入此容器內。
• 光學調整： 不要單純填滿盒子。寬形標誌應佔用更多寬度但較少高度；正方形標誌所佔的寬度和高度應少於其寬形對應物，以維持相等的「墨跡密度」。

3. 定義視覺處理

選擇一種能平衡網站美學與品牌識別度的風格：

• 淡化/單色（標準）： 將所有標誌轉換為單一顏色（通常是深灰色或背景色的「去背色」），通常透過 filter: grayscale(1) 加上降低的 opacity，或在使用單色 SVG 遮罩時使用 color-mix()。這可以防止產生「彩虹效應」而分散對主要 CTA 的注意力。
• 懸浮/揭示： 預設保持標誌淡化，僅在懸浮時顯示其原始品牌顏色。
• 全彩： 僅在標誌本身是主要吸引力時使用（例如高知名度的贊助頁面）。

4. 應用間距與節奏

使用 fluid-spacing-system 來定義標誌之間的間隙：

• 間距寬度： 確保每個標誌周圍有足夠的「安全空間」以尊重品牌指南（通常至少為標誌高度的 50%）。
• 對齊： 將標準化容器在它們的中心軸上對齊（水平和垂直），以創造穩定的水平線。

5. 設計響應式重排

規劃網格在較小螢幕上如何折疊：

• 桌機： 每行 5–8 個標誌。
• 平板： 每行 3–4 個標誌。
• 行動裝置： 每行 2 個標誌（如果空間極為有限，則使用水平「跑馬燈」捲動）。
• 縮小： 確保標誌在行動裝置上仍清晰可辨；如果標誌變得模糊，請切換為該品牌標識的「僅標記」版本。

決策規則

• 「墨跡密度」規則： 一個非常「厚重」或實心的標誌（如填滿的圓形）應比「輕盈」或通風的標誌（如細長的字標）尺寸小 10–15%，以達到視覺重量相等。
• 灰階預設： 始終從單色標誌開始。僅在客戶特別要求所有合作夥伴的「品牌真實性」時才加入顏色。
• 居中水平線： 始終在行內垂直居中對齊標誌。將不同高度的標誌頂部對齊會產生「階梯」效果，看起來不專業。
• 最大寬度/高度： 為標準化容器定義 max-height（例如 40px 到 60px），以防止任何單一標誌主導整個區塊。

限制條件

• 無障礙性： 每個標誌必須有 alt 屬性來命名該公司（例如 alt="Acme Corp logo"）。如果該區塊有像「我們的合作夥伴」這樣的標題，則可將標誌標記為裝飾性（alt=""）以避免冗餘。
• 品牌完整性： 切勿拉伸或扭曲標誌。切勿更改標誌的內部比例。
• 響應式： 網格必須是流體。避免整個網格使用固定的像素寬度；應使用 100% 寬度搭配 max-width 限制。

常見失敗模式

• 「巨大正方形」： 一個正方形標誌佔用與寬形標誌相同的高度，使其看起來大了三倍。
• 顏色混亂： 混合使用不同色調的彩色標誌，使網站看起來像「連結農場」。
• 原始內距： 在標誌檔案本身內留下不同量的「空白」，導致無法自動對齊。
• 行動裝置擁擠： 試圖在行動裝置螢幕上的一行中放入 4 個標誌，導致所有標誌都無法辨識。
• 階梯式對齊： 將不同高度的標誌頂部對齊，造成參差不齊且分散注意力的底部邊緣。

驗證標準

• 標誌在光學上達到平衡（沒有任何單一標誌看起來明顯「更重」）。
• 所有標誌共用一致的視覺處理（例如全部灰階）。
• 在儲存格內水平和垂直居中對齊。
• 原始檔案為 SVG 或高解析度點陣圖，且無內部內距。
• 行動裝置檢視避免擁擠並保持清晰可讀。
• 無障礙性：所有標誌都有適當的 alt 文字或裝飾性標記。
• 尊重每個品牌的「安全空間」要求。