--- title: "我如何把複雜事情講清楚：健康插畫與資訊設計" description: "把抽象、專業或資訊量龐大的內容，轉化成容易理解與記憶的視覺語言：依受眾與品牌調性運用插畫、資訊編排、角色與視覺系統，讓人看懂，也願意繼續看。" url: https://dasto.app/portfolio/clarity/ language: zh-Hant alternate_en: https://dasto.app/portfolio/en/clarity/ author: "Daco Hsieh 謝明達" published: 2026-07-06 updated: 2026-08-06 --- # 我如何把複雜事情講清楚：健康插畫與資訊設計 > 把抽象、專業或資訊量龐大的內容，轉化成容易理解與記憶的視覺語言：依受眾與品牌調性運用插畫、資訊編排、角色與視覺系統，讓人看懂，也願意繼續看。 ![鐵線蕨標本主視覺](https://dasto.app/portfolio/assets/case3-maidenhair-fern-hero-CX1uS19j.webp) - **Specimen**: iHealth 健康文章插圖與資訊編輯 - **Category**: Information Design / Editorial / SEO Content - **Location**: Taipei, Taiwan - **Collection Date**: 2018 - 2019 - **Collector**: Daco - **Role**: Visual Design / Editorial Structure / Content Marketing 30 秒看懂這個專案 這些作品的共同任務，是把抽象、專業或資訊量龐大的內容，轉化成容易理解與記憶的視覺語言。我依據受眾、品牌調性與傳播情境，運用插畫、資訊編排、角色與視覺系統，讓內容在保留核心意義的同時更具親近感。這也是我在設計中最重視的能力：讓人看懂，並願意繼續看。 - **專案類型**: 品牌視覺／內容設計 - **我的角色**: 視覺策略、插畫、圖文整合 - **核心能力**: 資訊轉譯、敘事設計、品牌一致性 如果說「iHealth 健康報報 SEO 策略案例」談的是我如何理解 SEO 背後真正的問題，這個案例談的就是：我如何把複雜資訊整理成一般人願意看、看得懂，也找得到的內容。 在 iHealth 期間，我不只參與文章主題與內容方向，也實際負責大量健康文章的視覺插圖與編輯整理。面對糖尿病、膽固醇、高血壓這類高競爭關鍵字，我們不是把資訊堆得更滿，而是把它拆得更清楚。 那時候的工作方法很一致：先理解搜尋者真正卡住的是哪一段，再決定哪些資訊應該寫成段落、哪些應該變成圖、哪些應該被重排成更容易掃讀的節奏。圖像不是裝飾，而是把理解成本往下降的工具。 結果也證明這條路是有效的。糖尿病、高血壓、膽固醇等核心主題，都曾經在 Google 自然排序來到前兩名。對我來說，那不是單純的 SEO 成績，而是內容、設計與資訊組織共同發揮作用的結果。 ![糖尿病文章封面插圖](https://dasto.app/portfolio/assets/%E7%B3%96%E5%B0%BF%E7%97%85v2_cover-CSjyP6qS.webp) *圖1 — 這些插圖不是另外加上去的視覺包裝，而是文章結構的一部分。我的目標是讓讀者在長文裡也能快速抓到重點。* 糖尿病是其中最典型的一組案例。這類主題同時牽涉病因、類型、症狀、風險與生理機制，如果只用一串文字講完，讀者很容易在還沒理解之前就先失去方向。 所以我會先把資訊分層。像「胰島素怎麼作用」與「胰島素阻抗是什麼」屬於機制層；「三多一少」屬於辨識層；「四種類型」與「風險族群」則屬於分類層。當資訊先被整理好，圖像才能真正幫助理解，而不是只把文字換成插圖。 ![糖尿病四種類型插圖](https://dasto.app/portfolio/assets/%E7%B3%96%E5%B0%BF%E7%97%85v2_%E5%9B%9B%E7%A8%AE%E9%A1%9E%E5%9E%8B-B7Rdd_fI.webp) ![糖尿病症狀三多一少插圖](https://dasto.app/portfolio/assets/%E7%B3%96%E5%B0%BF%E7%97%85v2_%E7%97%87%E7%8B%80%E4%B8%89%E5%A4%9A%E4%B8%80%E5%B0%91-DwOrMYn4.webp) ![糖尿病胰島素作用插圖](https://dasto.app/portfolio/assets/%E7%B3%96%E5%B0%BF%E7%97%85v2_%E8%83%B0%E5%B3%B6%E7%B4%A0%E4%BD%9C%E7%94%A8-C_Ic_BJ9.webp) ![糖尿病胰島素阻抗插圖](https://dasto.app/portfolio/assets/%E7%B3%96%E5%B0%BF%E7%97%85v2_%E8%83%B0%E5%B3%B6%E7%B4%A0%E9%98%BB%E6%8A%97-1KJjQ2qA.webp) ![糖尿病風險插圖](https://dasto.app/portfolio/assets/%E7%B3%96%E5%B0%BF%E7%97%85v2_%E9%A2%A8%E9%9A%AA-BoLTglOf.webp) *圖2 — 糖尿病這組圖把抽象機制、症狀辨識與分類知識拆開處理，讓讀者可以一段一段建立理解，而不是一次吞下全部資訊。* 膽固醇文章的挑戰不太一樣。問題通常不是資訊太少，而是大眾對「好膽固醇」與「壞膽固醇」的理解很模糊。這種時候就不能只是增加篇幅，而要先重新定義比較方式。 我會把讀者最常混淆的概念放在同一張圖裡對照，利用形狀、方向、色彩和群組關係建立差異。這其實是在做視覺階層與 chunking：把複雜知識切成幾個容易被腦袋暫存的小單位。 ![膽固醇文章封面插圖](https://dasto.app/portfolio/assets/%E8%86%BD%E5%9B%BA%E9%86%87360v2_cover-DrA_pnUs.webp) ![好膽固醇與壞膽固醇比較插圖](https://dasto.app/portfolio/assets/%E8%86%BD%E5%9B%BA%E9%86%87_%E5%A5%BD%E5%A3%9E%E8%86%BD%E5%9B%BA%E9%86%87-lsnzSGaf.webp) *圖3 — 膽固醇主題不是把專業名詞講更多，而是先讓人看懂它們彼此的關係，降低名詞造成的理解摩擦。* 高血壓則更偏向行動資訊的整理。讀者想知道的不只是原理，還包括「誰要注意」、「我現在可以做什麼」。因此版面節奏就要從概念說明，轉成風險辨識與預防行動的排列。 這時候我會特別在意掃讀路徑。長文讀者常常不是逐字讀完，而是先找跟自己最相關的段落。所以圖像與標題要能形成清楚的入口，讓人快速找到自己在乎的部分，再往下讀更完整的文字。 ![高血壓高風險族群插圖](https://dasto.app/portfolio/assets/%E9%AB%98%E8%A1%80%E5%A3%93v2_%E9%AB%98%E9%A2%A8%E9%9A%AA%E6%97%8F%E7%BE%A4-BfmtsUZ_.webp) ![高血壓預防插圖](https://dasto.app/portfolio/assets/%E9%AB%98%E8%A1%80%E5%A3%93v2_%E9%A0%90%E9%98%B2-C9ojBojM.webp) *圖4 — 高血壓案例的重點是把「高風險族群」與「預防方式」變成很容易掃讀的資訊入口，讓長文依然保有可讀性。* 除了這三組核心文章，我也持續把同樣的方法用在其他健康主題上。尿色、喝水量、鹽分攝取、維生素 D、藥品丟棄、ADHD 類型等題目，看起來彼此差異很大，但背後其實都是同一個任務：找出讀者最難理解的地方，然後把它變成可辨識、可比較、可記住的素材。 我也不是只把圖做得「清楚」而已。有些圖我會刻意加入比較有記憶點、甚至帶點玩味的風格，因為有趣的圖像更容易被記住，也更容易被分享出去，而分享本身就是 SEO 以外的另一條擴散路徑。像古畫感、復古遊戲卡匣感這種不那麼標準的說明圖，其實都是為了讓知識內容多一個被轉傳的理由。 ![尿色顏色表插圖](https://dasto.app/portfolio/assets/%E5%B0%BF%E8%89%B2-blog%E9%A1%8F%E8%89%B2%E8%A1%A8-e8nKNTKb.webp) ![尿色 LINE 圖文](https://dasto.app/portfolio/assets/%E5%B0%BF%E8%89%B2-LINE-CeopBPH1.webp) ![每公斤喝多少水插圖](https://dasto.app/portfolio/assets/%E6%AD%A3%E7%A2%BA%E5%96%9D%E6%B0%B4-blog%E6%AF%8F%E5%85%AC%E6%96%A4%E5%96%9D%E5%A4%9A%E5%B0%91%E6%B0%B4-Bw7OMgbF.webp) ![每小時喝多少水插圖](https://dasto.app/portfolio/assets/%E6%AD%A3%E7%A2%BA%E5%96%9D%E6%B0%B4-blog%E6%AF%8F%E5%B0%8F%E6%99%82%E5%96%9D%E5%A4%9A%E5%B0%91%E6%B0%B4-DYDHFRN1.webp) ![國人每日鹽分攝取插圖](https://dasto.app/portfolio/assets/%E9%B9%BD%E5%88%86%E6%94%9D%E5%8F%96_%E5%9C%8B%E4%BA%BA%E6%AF%8F%E6%97%A5%E6%94%9D%E5%8F%96-CRrgLwpG.webp) ![維生素D不足 LINE 圖文](https://dasto.app/portfolio/assets/%E7%B6%AD%E7%94%9F%E7%B4%A0D%E4%B8%8D%E8%B6%B3_LINE-DOTtFctE.webp) ![藥品丟棄插圖](https://dasto.app/portfolio/assets/%E8%97%A5%E5%93%81%E4%B8%9F%E6%A3%84-BG6UKK-t.webp) ![ADHD 注意力不足型插圖](https://dasto.app/portfolio/assets/ADHD_blog%E6%B3%A8%E6%84%8F%E5%8A%9B%E4%B8%8D%E8%B6%B3%E5%9E%8B-B8Ney2Py.webp) ![ADHD 過動衝動型插圖](https://dasto.app/portfolio/assets/ADHD_blog%E9%81%8E%E5%8B%95-%E8%A1%9D%E5%8B%95%E5%9E%8B-DJDgTLQl.webp) *圖5 — 不同主題有不同語氣與圖像策略，但都遵循同一個原則：先整理資訊，再決定怎麼表達。* 這種能力不只出現在健康內容，也出現在 logo 設計裡。因為 logo 本來就是一種極端濃縮的資訊設計: 你要在非常少的元素裡，留下足夠清楚的辨識、情緒和概念。 ![Phyto logo](https://dasto.app/portfolio/assets/phyto-BnnZOpMQ.webp) ![美空壽司 logo](https://dasto.app/portfolio/assets/sushi-BLBZEWbS.webp) ![Perro 寵物美容 logo](https://dasto.app/portfolio/assets/perro-cRo626iQ.webp) *圖6 — 三個 logo 都在做同一件事：把複雜的品牌印象壓縮成最少但最有辨識力的形狀。* Phyto 是智慧盆栽品牌，所以我把「向上生長」當成主要動勢，讓字體主幹同時像植物莖節往上延伸；上方的眼睛則加入陪伴感與擬人特質，讓原本偏科技的產品，多了一點親近與互動的印象。這是在符號層把功能、個性與品牌溫度壓進同一個結構裡。 壽司店的 logo 則走另一種方法。因為鮭魚壽司本身就有極高的辨識度，所以我直接取用最典型的視覺原型，把魚肉紋理簡化成幾道水平條紋，再配上穩定、留白感足夠的字體。這是在利用原型理論與圖地關係: 讓人幾乎不用解碼，就能立即聯想到品項與店的氣質。 Perro 則結合了狗的輪廓與對話泡泡的印象。對話泡泡不是裝飾，而是把「寵物美容也是社交場域」這件事放進符號裡，讓品牌不只是在說 grooming，也在說陪伴、互動與認識新朋友。整體線條保持圓潤，是為了讓形象更友善、更容易被喜歡。 > 我做資訊設計時，最在意的不是資料有沒有放進去，而是人能不能順著它理解下去。 > > 如果一件事很複雜，我不會急著把它說得更多，而是先把它整理成更好的順序。 > > 不管是文章、插圖、版面，還是 logo，本質上都一樣：把關係梳理清楚，讓訊息自然進到人的腦中。 > 這組案例和「iHealth 健康報報 SEO 策略案例」來自同一段 iHealth 經驗。前一頁談策略判斷，這一頁談的是實際如何把資訊做成容易被理解的內容。 延伸閱讀：我如何理解問題 ## 相關案例 - [EmoLog：用 150 張插畫記錄說不清的感受](https://dasto.app/portfolio/clarity/emolog/) — EmoLog 把說不清楚的感受整理成可滑動、可記錄、可分享的情緒座標系統，用 150 張以上原創抽象插畫代替勉強命名，資料只存在使用者自己的裝置上。 - [這個作品集本身：資訊架構與 MDX 內容系統](https://dasto.app/portfolio/clarity/portfolio-system/) — 把跨領域的經歷重新整理成六個可進入的提問，以植物標本作為視覺框架，再用 MDX 雙語內容模型與前端架構支撐理解的順序。 --- 作者: Daco Hsieh 謝明達 · 聯絡: enodaco@gmail.com · 作品集首頁: https://dasto.app/portfolio/ · English version: https://dasto.app/portfolio/en/clarity/