MOC-視覺設計

Properties2
tagsmoc/視覺設計, 狀態/草稿
aliasesMOC 視覺設計, MOC Visual Design, 視覺設計 MOC

閱讀時間約 23 分鐘

MOC-視覺設計

範圍

視覺表現的具體實作層——以「micro 元素 → 組合工具 → 系統化」三層為骨架，往下展開字型、色彩、圖表、無障礙、形態佈局、應用場景與設計系統。本 MOC 聚焦 「畫面要長什麼樣子」；方法論本身（5 階段 / POV / 三刀流）見 MOC-設計思考，UX 實作層（研究 / 文檔 / 文案 / 介面互動）見 MOC-UX。重疊節點（排版 / 易辨性 / 易讀性 / 圖表設計 / 無障礙設計 / 履歷設計）由 MOC-UX 「介面表現」工具層與本 MOC 共有，本 MOC 處理視覺紀律本身、UX MOC 處理介面互動上下文。

核心命題

好排版「沒有感覺」——視覺設計的最高品質訊號是讓內容被讀，而不是讓視覺被注意；壞排版才會被觀眾意識到「這個東西看起來不對勁」。大新先生 的簡報教學把同一命題翻成投影片語境：好看的見比好看重要。

視覺設計三個結構性要點：

  1. 好排版沒有感覺——micro / macro 兩條軸（易辨性 / 易讀性）的終極驗收標準是觀眾不會「感覺到設計」；觀眾意識到「設計」的瞬間就是設計失敗的瞬間。
  2. 只有最重要的部分才應該做成圖表——圖表設計 的元紀律：圖表本身是強訊號，把所有資料都做成圖表會稀釋訊號；先決定「這份資料值不值得被視覺化」，再決定「用哪種圖」。同樣紀律適用於 資訊層級 的「重要 / 副 / 輔助 / 冗餘」四級分類——抑制冗餘比強化重要更重要。
  3. 多一條通道，不少一個人——無障礙設計 的元命題：視覺資訊不能是唯一通道（顏色 + 形狀 + 標籤多重編碼）；對比度、字級可調、Screen Reader 標籤是底線而非額外功課。

主軸（核心頁）

字型與排版（micro level）

先 micro 後 macro——字母本身分不出來時，整段排版再用力都救不回來。

  • 排版 — Typography umbrella：micro（易辨性）+ macro（易讀性）兩條軸；好排版「沒有感覺」元命題；中英混排的中文視角入口
  • 易辨性 — Legibility：單字母可不可分辨（X 高度 / 字腔 / 字重 / 寬比例 / 字距）
  • 易讀性 — Readability：整段內容好不好讀（襯線選擇 / 行高 / 行寬 / 顏色 / 留白 / 層級 / 分隔器 / 重複節奏）
  • 中文字體類型 — 楷 / 仿宋 / 明 / 黑四大基本類型 + 特別字體；橫筆斜度判別法 + 中宮概念 + 情緒場合適用範圍
  • 字型搭配 — 同一設計組合多種字體：和諧 / 對比 / 避免突兀三原則 + 數量控制 2–3 種；初學者底線「不要超過兩種字體」

色彩

  • 色彩心理學 — 顏色與情緒、文化、產品類別之間的習得連結；視覺第一印象的捷徑工具；七色情緒對照（紅 / 粉 / 橙 / 黃 / 綠 / 藍 / 紫 / 黑 / 白）；機率性聯想而非定論
  • 60-30-10法則 — 主色 60% / 輔色 30% / 強調 10%：把「選色」與「配比」拆成兩個獨立決策；瞇眼測試與 資訊層級 對位

資訊設計與架構

  • 資訊設計 — 以人的注意力、理解與行動情境為中心，把資料 / 問題 / 受眾解構後轉成可吸收的視覺表達；元流程「吸引 → 理解 → 記住 / 行動」
  • 資訊架構 — 圍繞 KQ 整理資料、答案、知識與受眾關係；把資訊從「一堆材料」變成可分析、可理解、可說服、可行動的表達骨架

圖表與資料視覺化

  • 圖表設計 — 把複雜資料視覺化：三層工作流（何時用 / 如何用 / 系統化）+ 三原則（Focused / Approachable / Accessible）+ 五要點（Marks / Axes / Descriptions / Interaction / Color）；補入簡報圖表降噪、圓環圖 / 長條圖 / 折線圖選型、牌卡式圖表；元紀律「只有最重要的部分才應該做成圖表」
  • 圖表類型選擇 — 依資料關係、比較目的、受眾理解成本與圖型限制選擇圖表；從 圖表設計 拆出的選型層
  • 資料故事化 — 把數據觀點、行動動詞、圖表標題、註解與三幕行政摘要串成可行動的決策敘事；連接 圖表設計、簡報設計 與 資料團隊影響力

無障礙

  • 無障礙設計 — Accessibility umbrella：多通道呈現（顏色 + 形狀 + 標籤）+ 多輸入方式 + Screen Reader 標籤紀律 + 對比度與字級可調 + 系統模式適配；元命題「多一條通道，不少一個人」；與 圖表設計 / 色彩心理學 / 易讀性 共構視覺包容性紀律

形態與佈局（組合工具）

  • 格式塔原則 — Gestalt：「整體大於部分之和」；簡化教學版方框 Framed / 填色 Filled / 對齊 Aligned 三方程式；應用於 圖表設計 群組化決策
  • 資訊層級 — Information Hierarchy：四級分類（重要 / 副 / 輔助 / 冗餘）+ 字級 / 字重 / 顏色 / 位置處理；「不好看的簡報，常常不是設計不好看，而是看不到真正重要的資訊」
  • 排版設計系統 — Layout Systems：8 種視覺組織系統（軸線 / 雙邊對稱 / 模組 / 行進 / 隨機 / 放射 / 漣漪 / 網格）；網格系統是其中一種，不是全部

應用場景

同一套 micro / macro 工具，在不同場景產生不同紀律——簡報是公開傳達、履歷是價值排序、Logo 是極致壓縮、包裝是核心理念轉譯。

  • 簡報設計 — Presentation Design：以 資訊層級 / 格式塔原則 / 60-30-10法則 / 字型搭配 為基礎工具；BFA-簡報 系列方法
  • 概念簡報 — 以「概念」為主軸的簡報模式；與一般資訊簡報的分工
  • 履歷設計 — 用版面、照片、留白、對齊、層次、配色、字體、檔案格式降低閱讀摩擦；Resume vs CV 介面差異；自傳段落小標也是設計
  • 作品集 — 設計師求職作品集；視覺呈現不只服務美感，也要讓面試官看見設計演化、決策理由、impact 與設計細節品質
  • Logo設計原則 — 5 原則（獨特性 / 簡潔性 / 比例平衡 / 功能性 / 延伸性）；獨特性 × 簡潔性的核心矛盾
  • 包裝設計 — 把產品核心訴求轉譯成可被一眼看穿的物件形式；好包裝有靈魂而非視覺漂亮；色彩 / 字體 / Logo / 情緒板的綜合場景
  • 創意風格 — 作品或團隊長期累積出的可辨識思考角度與表現方式；風格不只是視覺、是內化的反覆判斷
  • 情緒板 — Mood Board：視覺方向探索工具；風格定調與設計提案的前置作業

設計系統（系統化）

單張畫面的紀律往上抽到整個產品 / 品牌的視覺一致性——把字型、色彩、間距、元件抽象為可重用規格。

  • 設計系統 — 把視覺規則、UI 元件、狀態與文件整理為可重用系統；Atomic Design 五層（原子 / 分子 / 組織 / 模板 / 頁面）是入門分層
  • 圖示系統 — Iconography / 圖標設計入口；把大量產品圖示的語意、尺寸、樣式、optical adjustments、一致性稽核、工程映射與發布流程系統化
  • 使用者介面設計 — 視覺設計落到產品螢幕的最後一哩；處理介面視覺、互動、狀態與跨設備一致性
  • Apple — Human Interface Guidelines（HIG）+ WWDC 視覺設計講座（圖表設計 三原則 + 五要點主要素材）；視覺系統代表性企業
  • Google — Material Design（圖表設計 三原則的另一系統化代表）；多平台視覺一致性
  • Mark-Otto — Bootstrap / GitHub 程式碼風格指南推廣者（鄰接：程式碼也是視覺設計的延伸）；統一規範作為可讀性工具的元紀律

設計師（人物）

工具與作品

鄰接領域

來源累積（reverse-chronological）

備註

此 MOC 是 vault 第 8 個（繼 MOC-職涯 / MOC-創作者經濟 / MOC-行銷增長 / MOC-設計思考 / MOC-UX / MOC-PKM / MOC-LLM-應用設計）。

與 MOC-設計思考 / MOC-UX 三方分工：設計思考偏「方法論本身」（5 階段 / POV / 工具）、UX 偏「拿到方法論後怎麼做」（三刀流 / 文案 / 情緒 / 文檔）、本 MOC 偏「畫面要長什麼樣子」（字型 / 色彩 / 圖表 / 無障礙 / 形態佈局 / 應用場景 / 設計系統）。深度共有節點 排版 / 易辨性 / 易讀性 / 圖表設計 / 無障礙設計 / 履歷設計 兩處同列；視角差異——UX 處理「使用者導向 / 過程 > 交付」、本 MOC 處理「視覺紀律本身」。

「好排版沒有感覺」這個元訊息值得在每次視覺設計來源 ingest 時呼應；它是視覺設計的最高品質訊號，也是與「美感取向」設計觀的根本分水嶺。

未來累積方向：(a) 資料視覺化深化——Edward Tufte 經典（《The Visual Display of Quantitative Information》/ Chartjunk / Data-Ink Ratio）/ Dashboard 設計；圖表類型選擇 已於 2026-05-07 落地，後續深化更偏學術源頭與 dashboard 多圖組合 — 以 圖表設計 / 圖表類型選擇 為入口；(b) Variable Fonts / 響應式字型——可變字型的字重與字寬連續調整、字級階梯設計、CJK 中英混排規則 — 以 排版 / 易辨性 為入口；(c) Z-pattern / F-pattern——眼動研究歸納的視覺掃描路徑；網頁與長文排版的版面決策依據 — 以 資訊層級 為入口；(d) 動效設計（Motion Design）——過場 / 微互動 / 動效曲線（easing）/ 12 個動畫原則；介面動效與品牌動效的分工 — 鄰接 MOC-UX 介面互動軸；(e) 色彩理論深化——色相 / 明度 / 彩度三屬性、HSL / Lab / OKLCH 色彩空間、互補色 / 三角配色 / 類比配色等配色框架；無障礙對比度（WCAG AA / AAA）— 以 色彩心理學 / 60-30-10法則 / 無障礙設計 為共同入口；(f) 品牌視覺識別系統（VI）——Logo + 色彩 + 字型 + 圖形語言 + 應用範例集合；Brand Guidelines 文件結構 — 鄰接即將建的 MOC-品牌設計；(g) 設計系統工法擴展——Atomic Design（原子 / 分子 / 組織 / 模板 / 頁面）/ Design Tokens / Component Library / Storybook / Figma Variables — 鄰接 MOC-UX 介面表現工具層；(h) 印刷與媒材——色域 RGB vs CMYK / 紙材選擇 / 燙金打凸 / 軋形 / 裝幀 — 以 包裝設計 為入口；(i) 海報 / 編輯設計——書籍 / 雜誌 / 海報的版面紀律；網格系統深化（瑞士平面設計傳統） — 以 排版設計系統 為入口；(j) Iconography / 圖標設計——已以 圖示系統 初步落地；後續可深化平台圖示規範、圖標系統一致性、圖示風格（線性 / 填充 / 雙色 / 立體）、圖標與文字的對位 — 鄰接 Logo設計原則 / 排版；(k) 插畫風格與品牌系統——品牌插畫系統（Notion / Slack / Stripe 風格）的視覺骨架 — 鄰接 創意風格 / 品牌識別；(l) 資訊圖表（Infographic）/ 視覺敘事——以 RE-LAB / IKEA-動森型錄 為入口；資訊設計 已建立方法論入口，後續可累積作品案例；(m) 跨文化視覺差異——色彩文化意涵差異 / 中英混排紀律 / 東西方版面節奏 — 以 色彩心理學 / 中文字體類型 為入口；(n) 設計師作品集（Portfolio）製作工法深化——已由 作品集 初步落地，後續可累積 web portfolio / PDF portfolio / portfolio critique；(o) 網頁視覺設計——Hero section / Landing page / 視覺節奏 / Above the fold — 鄰接 MOC-UX / MOC-行銷增長；(p) 設計批評與評鑑語言——如何給設計提案具體 feedback（不只是「我覺得不好看」）；設計評審 / Critique 文化 — 鄰接 MOC-設計思考。

反向連結