VISUAL IDENTITY · CIS × 設計系統 × 應用規範
品牌視覺設計：交付可被執行的識別系統，而非一份規範文件
識別的價值不在提案當日的完成度，而在半年後更換設計人員或廠商後，產出物仍屬於同一個品牌。本服務交付的是接手者可直接取用的設計變數、元件規格與應用範本。
- 交付規則，而非僅交付檔案交付內容為命名過的色票、字級與元件規格，設計檔與程式碼共用同一組名稱。變更一次變數，兩端同步更新。
- 由非設計背景人員試用後才算完成交付前由貴公司非設計背景的同仁以範本實際完成一份簡報。該同仁可獨立完成方視為交付完成；無法完成者，代表規範的具體程度不足，應修正的是文件本身。
- 於真實介面驗收，不於靜態版面定案識別不於靜態版面定案。深色底、淺色底、手機直式版面與長短不一的實際內容均完整測試過一輪，方視為通過。
DIAGNOSIS
以下狀況，是否正在發生
以下任何一條若與現況相符，這一頁的內容就與你有關。
「每個部門做出來的簡報長得都不一樣，擺在一起像三家公司。」
真正的原因現有文件僅涵蓋標誌使用規範，未規定字級、間距與顏色於各情境下的取用方式。規範若未涵蓋「接手者實際會遇到的判斷點」，其只能自行推斷——而各人推斷的方向必然不同。
「當年那本識別手冊做得很漂亮，但公司裡好像沒有人打開過。」
真正的原因文件不會於實際作業當下出現於執行者眼前。規範要持續生效，必須落實為設計軟體中的樣式庫與程式碼中的變數——使執行者無須記憶規則，取用既有元件即自動符合規範。
「每換一家外包，我們的視覺就被重新詮釋一次。」
真正的原因交付內容為成品，而非系統。缺少色票、字級與間距的名稱與數值時，接手者只能由舊稿件反推；反推十次將得到十種結果，且各版本表面上均相去不遠。
「logo 定稿了，放到網站上就是不對勁，但說不出哪裡怪。」
真正的原因識別於靜態版面完成驗收，而網站具備捲動、游標停留、深淺底色、手機直式與長短不一的實際內容。未於真實介面完成壓力測試的識別，落地時必然需要現場微調，而每一次微調都在稀釋其一致性。
THE APPROACH
我會從哪裡切入
三個切入點有先後關係。略過前段直接執行後段，是實務上最常見的失誤。
先量測現況，再談方向
提案之前先蒐齊流通中的物料：名片、簡報、官網、社群、包裝、招牌，並逐項量測實際使用的色值與字級。常見的結果是同一組品牌藍存在五種數值。先使既有的不一致可被檢視，後續保留哪一組才有客觀依據，而非取決於顧問的個人偏好。
拆解為可被引用的最小單位
色票、字級階梯、間距、圓角、陰影，以及按鈕與卡片的各項狀態，全數命名並賦予數值，同時確立淺底與深底兩套規則。至此，識別才由一組圖像轉為系統：接手者無須理解原設計者的偏好，依既有名稱取用即為正確。
規範須涵蓋實際會卡住的判斷點
僅展示成品的手冊，接手者閱讀後仍無法執行。因此文件記載的是判斷原則與反例：何種情形不適用、其理由為何、規範未涵蓋時應如何判定。具備此一深度，更換外包廠商時，既有視覺才不會被重新詮釋。
THE SYSTEM
這套方法如何運作
方法是固定的，不是每個案子重新發明。下層若不成立，上層的成果都無法支撐。
DESIGN TOKENS
第 1 層設計變數地基
顏色、字級、間距、圓角、陰影先命名再賦值，設計檔與程式碼一律以名稱引用。此層是地基：名稱確立之後，更換一組色僅需修改單一定義，無須全站逐處搜尋。
COMPONENTS
第 2 層元件規格
按鈕、表單、卡片、表格與導覽的尺寸、狀態與間距，附淺底與深底兩種表現，以及文字對比度的檢核基準。執行者無須憑記憶重製，取用既有元件即自動符合規範。
TEMPLATES
第 3 層應用範本
簡報、社群、名片、提案封面均製作為可直接開啟套用的檔案，而非示意圖。範本是規範實際被執行的載體——缺少範本時，規則僅停留於文件層面。
GOVERNANCE
第 4 層維護規則
明訂規範未涵蓋時的判斷方式、新增元件的權責歸屬，以及新產生的樣式如何收回系統。缺少此層時，系統將於第二年被逐項例外侵蝕，回復至導入前的狀態。
HOW IT WORKS
合作實際如何進行
- 01
盤點
蒐集目前流通中的全部物料：名片、簡報、官網、社群、包裝、車體、招牌，並逐項量測實際使用的色值與字級。常見的結果是同一組品牌藍存在五種數值——先使既有的不一致可被檢視，後續取捨才有客觀依據。
交付物 · 現況識別稽核，含實際用色與字級清單
- 02
定調
由品牌定位推導視覺方向：主色與輔色各自承載的語意、標題與內文的字型分工、影像風格與版面骨架。提案時一併說明採用該方向的推導過程，而非提供多組情緒板供挑選。
交付物 · 視覺方向定案與核心識別
- 03
系統化
將定案拆解為可被引用的最小單位：色票、字級階梯、間距、圓角、陰影，以及按鈕與卡片的各項狀態，全數命名並賦予數值，同時確立淺底與深底兩套規則。至此，識別才由圖像轉為系統。
交付物 · 設計變數表與元件規格
- 04
落地
於真實載體完成驗收：官網、簡報範本、社群版型、名片與招牌各製作一組實樣，並明訂「規範未涵蓋之情形的判斷方式」。最後將檔案、變數與規範移交貴公司團隊與外包廠商。
交付物 · 應用範本組與可持續維護的識別規範
WHAT'S DIFFERENT
與市場常見做法的差異
左欄的描述力求持平。把同業寫得一無是處，只會削弱這份對照本身的可信度。
- 交付的形式
- 常見做法
一份完成度高的識別手冊，存放於雲端硬碟。實際作業當下不會有人開啟。
- 在這裡
設計變數、元件與範本三者一併交付。使用者無須記憶規則，取用既有元件即自動符合規範。
- 提案怎麼談
- 常見做法
提供三組情緒板供挑選，選定後再修改十餘版。最終定案反映的是決策者的個人偏好，而非品牌判斷。
- 在這裡
由定位推導視覺方向，並說明採用該方向的理由。方向可以調整，但調整的依據須為理由，而非更換一組圖像後再行評估。
- 在哪裡驗收
- 常見做法
於靜態版面檢視後即定稿。實際置入網站後才面對捲動、游標停留、深淺底色與手機直式版面，只能於現場逐項微調。
- 在這裡
定稿前先於真實介面測試：深淺兩套底色、手機直式、長短不一的實際內容均已驗證。每一次現場微調都在稀釋識別的一致性。
- 換一家外包之後
- 常見做法
交付的是成品檔案，接手者只能由舊稿反推規則。反推十次將得到十種結果，且各版本表面上均相去不遠。
- 在這裡
交付的是命名過的數值與元件規格，外包廠商依名稱取用。不存在反推空間，也就不存在被重新詮釋的可能。
GOOD FIT
適合與不適合的合作對象
這幾種情況，來談會有結果
- 市場上已有一定數量的物料流通（簡報、社群、包裝、招牌），且產出視覺的人員不只一位
- 後續將有接手者——內部設計、行銷同仁或外包廠商——並期望其無須臆測即可正確執行
- 定位已確立，或同意先完成該段落再進入設計
- 主要載體為網站、簡報與社群等數位介面——設計變數於此類載體的效益最高
這幾種情況，我會直接說不
- 僅需交付一組標誌、無其他物料需管理：建置整套系統的投入不符效益，委由專精標誌設計的設計方即可
- 定位尚未確立且無意處理，期望以視覺方向反向決定公司的經營路線
- 定案方式為全公司投票，或每一輪由不同主管提供意見：於此決策流程下，修改十版亦不會收斂
- 主要需求為包裝結構、印刷打樣或展場施工的現場監製：規範可由本服務制定，但現場執行不在承接範圍內
寫這一欄不是在挑客人。這幾種案子我做過，結果是雙方都不滿意—— 先講清楚，總比收了錢再讓你失望好。
DELIVERABLES
你會取得哪些交付物
交付的不只是一份報告。以下每一項都可留存、可轉交，合作結束後仍然適用。
核心識別
標誌與安全距離、最小尺寸、可用與不可用的變體，並含深底版、單色版與極小尺寸專用版——此三者為實務上最常出錯、亦最常於交付時遺漏的項目。
設計變數表（Design Token）
顏色、字級、間距、圓角、陰影全數命名並賦值，設計檔與程式碼共用同一組名稱。變更一次變數，兩端同步更新，無須人工比對。
元件規格
按鈕、表單、卡片、表格與導覽的尺寸、狀態與間距規則，附淺底與深底兩種表現，以及文字對比度的檢核基準。
應用範本
簡報、社群貼文、名片與信封、提案封面等使用頻率最高的版型，均製作為可直接開啟套用的檔案，而非示意圖。
識別規範
一份撰寫對象為「接手者」的文件：除使用方式外，另載明判斷原則與反例——何種情形不適用、其理由為何。僅展示成品的手冊，接手者閱讀後仍無法執行。
GLOSSARY
先界定幾個關鍵術語
專業術語若不加界定，等同於把理解成本轉嫁給讀者。以下每個術語都附中文全名與白話定義。
- CIS企業識別系統（Corporate Identity System）
- 一整套讓外界一眼認出你的規則：從標誌、顏色、字型，到說話的口氣與服務的方式。不是一顆 logo，是一組彼此有關係的決定。
- Design Token設計變數
- 把顏色、字級這些數值先取一個名字（例如「主色」「內文字級」），設計檔和程式碼都只叫名字。之後改名字底下的值，所有用到的地方一起變。
- Design System設計系統
- 規範，加上現成可以拿去用的零件。它不只告訴你按鈕該長什麼樣，還直接把那顆按鈕給你——做事的人不必憑記憶重畫一次。
- Style Guide視覺規範手冊
- 規定怎麼用的那份文件。它跟設計系統的差別是：手冊要人先讀懂才有用，系統是拿來就用。手冊該有，但不能只有手冊。
- Contrast Ratio文字對比度
- 文字跟底色的亮度差多少，有標準數值可以量。淺灰字配白底在你的螢幕上很好看，在客戶的手機上、在戶外就是看不見——這件事不歸美感管。
VERIFY IT
每一項主張都可自行查證
這一段刻意不放客戶見證——見證編造的成本太低。以下每一條都可以當場自行驗證。
FAQ
常見問題
尚未進行品牌定位，可以直接做視覺嗎？
可以，但發生二次投入的機率相當高。視覺要回答的問題是「該定位的視覺樣貌」；定位未確立時，提案的評審依據只剩主觀偏好，來回修改的結果經常是回到第一版。定位屬於「品牌策略顧問」該頁的範圍，先行完成後再進入設計，可顯著減少設計階段的爭論。
僅需更換標誌，也必須建置整套系統嗎？
不需要。可僅更換核心識別，但至少須一併確立色票與字級——否則新標誌將被置入舊有版面，整體一致性反而下降。執行深度取決於目前市場上流通的物料數量，以及產出視覺的人員規模。
交付的檔案，貴公司團隊能自行修改嗎？
此項本身即為驗收標準之一。交付前會請貴公司團隊中非設計背景的同仁，以範本實際完成一份簡報與一則社群貼文；該同仁可獨立完成方視為交付完成。無法完成者，代表規範的具體程度不足，應修正的是文件本身。
有沒有實例可以先看到一套完整的識別系統？
目前檢視中的網站即為實例。三個品牌色各自承載語意——科技藍（Technology）用於理性與系統、專業金（Profession）用於權威與重點、珊瑚粉（Affinity）用於親近與行動；深色用於門面、淺色用於閱讀，因此各頁面呈現的層次來自同一套規則，非各頁自行決定。上述顏色於程式碼中為變數而非色碼，字型亦區分標題、標籤、內文三種角色，內容欄寬與左右留白同樣收斂為單一變數：後台修改一次，全站同步套用。此即可被執行的識別系統實際的樣態。
識別完成後，網站是否需要整體重建？
不必然重建，但必須對齊。設計變數可直接接入現有網站的樣式層，將顏色與字級替換為同一組值後，視覺歸屬即回到同一個品牌。網站端的作法屬「網站與系統開發」該頁的範圍——識別最終是否被實際執行，官網是最直接的檢核點。
會以 AI 生成標誌嗎？
發想階段會用於擴大方向與加速淘汰，但決策與收斂由人執行。AI 可產出大量視覺上成立的方案，但無法提供「為何採用此一方案」的推導。識別的使用年限以年計，缺少理由支撐的方案，於行銷主管首次異動時即會被推翻。