--- title: "這個作品集本身：資訊架構與 MDX 內容系統" description: "把跨領域的經歷重新整理成六個可進入的提問，以植物標本作為視覺框架，再用 MDX 雙語內容模型與前端架構支撐理解的順序。" url: https://dasto.app/portfolio/clarity/portfolio-system/ language: zh-Hant alternate_en: https://dasto.app/portfolio/en/clarity/portfolio-system/ author: "Daco Hsieh 謝明達" published: 2026-07-12 updated: 2026-10-28 --- # 這個作品集本身：資訊架構與 MDX 內容系統 > 把跨領域的經歷重新整理成六個可進入的提問，以植物標本作為視覺框架，再用 MDX 雙語內容模型與前端架構支撐理解的順序。 - **Specimen**: Portfolio System - **Category**: Information Architecture / Narrative Design / Frontend System - **Structure**: 6 question-led entry points + archive layer - **Content Model**: MDX-based bilingual case content - **Visual Language**: Botanical specimen as a framing system - **Role**: Strategy / Writing / Visual Direction / Frontend / Content Modeling ![羅盤草植物標本](https://dasto.app/portfolio/assets/compass-plant-CSE1M-lp.webp) 這個作品集本身，也是一個完整的案例。 它不是在展示如何把個人網站做得更漂亮，而是在回答一個更根本的問題：**當一個人的經歷跨越設計、插畫、品牌、內容、SEO、產品與前端時，如何替這些彼此不同的實踐，建立一個清楚、可進入、可被理解的入口。** 這個專案的核心工作，不是增加內容，而是重新設計理解順序。我希望第一次進來的人，不必先理解所有背景，也不必先接受一套僵硬的技能分類，而是可以從一個最接近自己問題意識的入口開始，逐步看見不同案例之間共享的思考方式。 一般作品集常見的分類方式，包括技能分類、產業分類與時間排序。這些方法在多數情況下有效，但對一組跨領域、跨尺度的經歷來說，它們也會產生另一種失真。技能分類會把真正重要的判斷切碎，產業分類會放大表面差異，時間排序則很難讓第一次進來的人迅速掌握核心。 所以這個作品集真正要處理的，不是「作品很多」，而是**「理解順序不明確」**。我要整理的不是檔案，而是觀看者進入這些內容時的路徑。 我把首頁設計成六個提問，而不是六個技能分類： - 我如何讓東西成長 - 我如何理解問題 - 我如何把複雜的東西說清楚 - 我如何把想法變成產品 - 我如何建立系統 - 影響我思考方式的事物 這六個提問不是文案包裝，而是整個作品集最重要的資訊架構決策。它們的作用，是讓觀看者先從一個自己有感的問題開始，再沿著那條路徑進入案例，而不是被迫先理解一整套身份、職能或產業分類。 ![首頁六提問與 page topic 對應架構圖](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgwMCIgaGVpZ2h0PSI0MjAiIHZpZXdCb3g9IjAgMCAxODAwIDQyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMTgwMCIgaGVpZ2h0PSI0MjAiIGZpbGw9IiNGQ0ZBRjMiLz4KICA8ZyBmb250LWZhbWlseT0iQXJpYWwsIHNhbnMtc2VyaWYiIGZpbGw9IiMyRjJEMzMiPgogICAgPHJlY3QgeD0iNzgwIiB5PSIzNiIgd2lkdGg9IjI0MCIgaGVpZ2h0PSI3NCIgcng9IjE4IiBmaWxsPSIjRjRFOEM4IiBzdHJva2U9IiNDOEIzOEEiLz4KICAgIDx0ZXh0IHg9IjkwMCIgeT0iODEiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtc2l6ZT0iMjgiIGZvbnQtd2VpZ2h0PSI3MDAiPkhvbWU8L3RleHQ+CgogICAgPGcgZm9udC1zaXplPSIxOCIgZm9udC13ZWlnaHQ9IjcwMCI+CiAgICAgIDxyZWN0IHg9IjgwIiB5PSIxNjgiIHdpZHRoPSIyMjAiIGhlaWdodD0iNzIiIHJ4PSIxNiIgZmlsbD0iI0ZGRkRGOCIgc3Ryb2tlPSIjQjdBMzdBIi8+PHRleHQgeD0iMTkwIiB5PSIyMTIiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkdyb3d0aDwvdGV4dD4KICAgICAgPHJlY3QgeD0iMzMwIiB5PSIxNjgiIHdpZHRoPSIyMjAiIGhlaWdodD0iNzIiIHJ4PSIxNiIgZmlsbD0iI0ZGRkRGOCIgc3Ryb2tlPSIjQjdBMzdBIi8+PHRleHQgeD0iNDQwIiB5PSIyMTIiIHRleHQtYW5jaG9yPSJtaWRkbGUiPlByb2JsZW08L3RleHQ+CiAgICAgIDxyZWN0IHg9IjU4MCIgeT0iMTY4IiB3aWR0aD0iMjIwIiBoZWlnaHQ9IjcyIiByeD0iMTYiIGZpbGw9IiNGRkZERjgiIHN0cm9rZT0iI0I3QTM3QSIvPjx0ZXh0IHg9IjY5MCIgeT0iMjEyIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5DbGFyaXR5PC90ZXh0PgogICAgICA8cmVjdCB4PSI4MzAiIHk9IjE2OCIgd2lkdGg9IjIyMCIgaGVpZ2h0PSI3MiIgcng9IjE2IiBmaWxsPSIjRkZGREY4IiBzdHJva2U9IiNCN0EzN0EiLz48dGV4dCB4PSI5NDAiIHk9IjIxMiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+UHJvZHVjdDwvdGV4dD4KICAgICAgPHJlY3QgeD0iMTA4MCIgeT0iMTY4IiB3aWR0aD0iMjIwIiBoZWlnaHQ9IjcyIiByeD0iMTYiIGZpbGw9IiNGRkZERjgiIHN0cm9rZT0iI0I3QTM3QSIvPjx0ZXh0IHg9IjExOTAiIHk9IjIxMiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+U3lzdGVtczwvdGV4dD4KICAgICAgPHJlY3QgeD0iMTMzMCIgeT0iMTY4IiB3aWR0aD0iMjIwIiBoZWlnaHQ9IjcyIiByeD0iMTYiIGZpbGw9IiNGRkZERjgiIHN0cm9rZT0iI0I3QTM3QSIvPjx0ZXh0IHg9IjE0NDAiIHk9IjIxMiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+SW5mbHVlbmNlczwvdGV4dD4KICAgICAgPHJlY3QgeD0iMTU4MCIgeT0iMTY4IiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjcyIiByeD0iMTYiIGZpbGw9IiNEREU2REQiIHN0cm9rZT0iIzkwQTA4RSIvPjx0ZXh0IHg9IjE2NTAiIHk9IjIxMiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+QWJvdXQ8L3RleHQ+CiAgICA8L2c+CgogICAgPGcgZm9udC1zaXplPSIxNiI+CiAgICAgIDx0ZXh0IHg9IjE5MCIgeT0iMzE0IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5CZXN0RnJpZW5kPC90ZXh0PgogICAgICA8dGV4dCB4PSI0NDAiIHk9IjMxNCIgdGV4dC1hbmNob3I9Im1pZGRsZSI+aUhlYWx0aCBTRU88L3RleHQ+CiAgICAgIDx0ZXh0IHg9IjY5MCIgeT0iMzAwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5FeHBsYWluIENvbXBsZXggQ2xlYXJseTwvdGV4dD4KICAgICAgPHRleHQgeD0iNjkwIiB5PSIzMjYiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkVtb0xvZyAvIFBvcnRmb2xpbyByZWxhdGVkPC90ZXh0PgogICAgICA8dGV4dCB4PSI5NDAiIHk9IjMwMCIgdGV4dC1hbmNob3I9Im1pZGRsZSI+RHJpZnRHbzwvdGV4dD4KICAgICAgPHRleHQgeD0iOTQwIiB5PSIzMjYiIHRleHQtYW5jaG9yPSJtaWRkbGUiPlBvZW1lZXQgLyBUcmVlR28gcmVsYXRlZDwvdGV4dD4KICAgICAgPHRleHQgeD0iMTE5MCIgeT0iMzE0IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5PcmRlcmluZyBDb3JlPC90ZXh0PgogICAgICA8dGV4dCB4PSIxNDQwIiB5PSIzMDAiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkluZmx1ZW5jZXMgVGhpbmtpbmc8L3RleHQ+CiAgICAgIDx0ZXh0IHg9IjE0NDAiIHk9IjMyNiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+RGlmZmVyZW50IEV5ZXMgcmVsYXRlZDwvdGV4dD4KICAgICAgPHRleHQgeD0iMTY1MCIgeT0iMzE0IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5BYm91dCBwYWdlPC90ZXh0PgogICAgPC9nPgogIDwvZz4KICA8ZyBzdHJva2U9IiM3RjZENTIiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj4KICAgIDxwYXRoIGQ9Ik05MDAgMTEwVjE1MCIvPgogICAgPHBhdGggZD0iTTE5MCAxNTBWMTY4Ii8+CiAgICA8cGF0aCBkPSJNNDQwIDE1MFYxNjgiLz4KICAgIDxwYXRoIGQ9Ik02OTAgMTUwVjE2OCIvPgogICAgPHBhdGggZD0iTTk0MCAxNTBWMTY4Ii8+CiAgICA8cGF0aCBkPSJNMTE5MCAxNTBWMTY4Ii8+CiAgICA8cGF0aCBkPSJNMTQ0MCAxNTBWMTY4Ii8+CiAgICA8cGF0aCBkPSJNMTY1MCAxNTBWMTY4Ii8+CiAgICA8cGF0aCBkPSJNMTkwIDE1MEgxNjUwIi8+CiAgICA8cGF0aCBkPSJNMTkwIDI0MFYyNzgiLz4KICAgIDxwYXRoIGQ9Ik00NDAgMjQwVjI3OCIvPgogICAgPHBhdGggZD0iTTY5MCAyNDBWMjc4Ii8+CiAgICA8cGF0aCBkPSJNOTQwIDI0MFYyNzgiLz4KICAgIDxwYXRoIGQ9Ik0xMTkwIDI0MFYyNzgiLz4KICAgIDxwYXRoIGQ9Ik0xNDQwIDI0MFYyNzgiLz4KICAgIDxwYXRoIGQ9Ik0xNjUwIDI0MFYyNzgiLz4KICA8L2c+Cjwvc3ZnPgo=) *架構圖 1 — 首頁六提問不是單純的選單，而是整個網站的第一層閱讀路徑。每個提問都對應到一個 page/topic，讓多元經歷先以『問題入口』而不是『能力標籤』被理解。* 這樣的設計承認兩件事：第一，一個人可以同時擁有多種能力；第二，同一個專案本來就可能同時回應成長、理解、清晰化、產品化與系統化等不同層次的問題。與其先把這些能力分開，不如先替它們建立一個可閱讀的入口。 這也是為什麼，我用植物標本作為整個作品集的視覺語言。 植物標本與植物標本畫吸引我的地方，在於它們常常不只呈現一個對象的單一瞬間，而是把不同季節、不同部位、不同狀態同時攤開來看。花、果、葉、莖可以並置；不同生長時刻也可以被放在同一張圖裡。它像是暫時抹去時間的刻度，讓一個對象的多種可能性同時被觀看。 這種觀看方式，和我想處理的作品集命題很接近。我的經歷不是一條單線履歷，也不是幾個互不相干的身份。它更像是一組在不同時間、不同媒介、不同問題裡長出來的能力切片。植物標本的形式，讓我可以不急著把這些切片簡化成單一標籤，而是透過命名、排列、標記與留白，把它們整理成一個仍然保有層次、但足夠清楚的觀看系統。 所以標本感不是裝飾，而是一種方法。它讓作品集的表現形式，直接呼應我在每個章節裡反覆處理的主題：如何理解複雜性、如何整理複雜性，以及如何把複雜性轉成別人可以進入的形式。 如果這個作品集有成立的地方，我希望它成立的原因不是看起來特別，而是它讓人更容易理解：**我不是做過很多互不相關的事，而是持續用不同媒介處理同一類問題。** 那類問題是：如何觀察複雜性、整理複雜性，並把它轉成別人可以進入的形式。 > 這個作品集不是案例的容器而已。 > > 它自己就是一個把複雜脈絡整理成可理解入口的案例。 > > 形式、結構與敘事在這裡被刻意設計成同一件事。 工程面也是這個案例成立的重要部分。這裡的技術不是獨立於內容策略之外的堆疊，而是直接服務於理解架構的設計決策。技術的角色，是讓內容模型、閱讀路徑與擴充方式都能維持一致。 首先，我把 case content 從舊的 TypeScript block 結構，整理成以 MDX 為核心的內容來源層。現在每個主 case 與 related specimen 都有各自的 `zh.mdx` / `en.mdx` 正文檔案，wrapper TypeScript 檔只保留 hero、specimen label、card copy 與內容載入設定。這讓作品集從「內容寫在程式裡」轉向更接近 CMS 的模式：內容、結構與呈現被拆分，後續要修改段落、調整排序、擴充語系或新增案例，都不需要再碰主要版面邏輯。 ![case schema 與內容流向圖](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI0MDAiIHZpZXdCb3g9IjAgMCAxNjAwIDQwMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI0MDAiIGZpbGw9IiNGQ0ZBRjMiLz4KICA8ZyBmb250LWZhbWlseT0iQXJpYWwsIHNhbnMtc2VyaWYiIGZpbGw9IiMyRjJEMzMiPgogICAgPHJlY3QgeD0iNzAiIHk9IjE0NSIgd2lkdGg9IjIzMCIgaGVpZ2h0PSIxMTAiIHJ4PSIxNiIgZmlsbD0iI0Y0RThDOCIgc3Ryb2tlPSIjQzhCMzhBIi8+CiAgICA8dGV4dCB4PSIxODUiIHk9IjE4NSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjcwMCI+Q2FzZSBXcmFwcGVyPC90ZXh0PgogICAgPHRleHQgeD0iMTg1IiB5PSIyMTYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtc2l6ZT0iMTgiPmhlcm8gLyBsYWJlbHMgLyBjYXJkIGNvcHk8L3RleHQ+CgogICAgPHJlY3QgeD0iMzgwIiB5PSI3MCIgd2lkdGg9IjIzMCIgaGVpZ2h0PSI5MCIgcng9IjE2IiBmaWxsPSIjRjhGMkU0IiBzdHJva2U9IiNDOEIzOEEiLz4KICAgIDx0ZXh0IHg9IjQ5NSIgeT0iMTA4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjIyIiBmb250LXdlaWdodD0iNzAwIj56aC5tZHg8L3RleHQ+CiAgICA8dGV4dCB4PSI0OTUiIHk9IjEzNiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIxNiI+Q2hpbmVzZSBjb250ZW50IHNvdXJjZTwvdGV4dD4KCiAgICA8cmVjdCB4PSIzODAiIHk9IjI0MCIgd2lkdGg9IjIzMCIgaGVpZ2h0PSI5MCIgcng9IjE2IiBmaWxsPSIjRjhGMkU0IiBzdHJva2U9IiNDOEIzOEEiLz4KICAgIDx0ZXh0IHg9IjQ5NSIgeT0iMjc4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjIyIiBmb250LXdlaWdodD0iNzAwIj5lbi5tZHg8L3RleHQ+CiAgICA8dGV4dCB4PSI0OTUiIHk9IjMwNiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIxNiI+RW5nbGlzaCBjb250ZW50IHNvdXJjZTwvdGV4dD4KCiAgICA8cmVjdCB4PSI2OTAiIHk9IjE0NSIgd2lkdGg9IjI1MCIgaGVpZ2h0PSIxMTAiIHJ4PSIxNiIgZmlsbD0iI0VERTdENyIgc3Ryb2tlPSIjQjdBMzdBIi8+CiAgICA8dGV4dCB4PSI4MTUiIHk9IjE4NSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjcwMCI+Q2FzZUFydGljbGVNZHg8L3RleHQ+CiAgICA8dGV4dCB4PSI4MTUiIHk9IjIxNiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIxOCI+c2hhcmVkIHJlbmRlcmVyPC90ZXh0PgoKICAgIDxyZWN0IHg9IjEwMjAiIHk9IjU1IiB3aWR0aD0iMjMwIiBoZWlnaHQ9IjcwIiByeD0iMTQiIGZpbGw9IiNGRkZERjgiIHN0cm9rZT0iI0I3QTM3QSIvPgogICAgPHRleHQgeD0iMTEzNSIgeT0iOTgiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtc2l6ZT0iMTgiPkZpZ3VyZTwvdGV4dD4KICAgIDxyZWN0IHg9IjEwMjAiIHk9IjE0NSIgd2lkdGg9IjIzMCIgaGVpZ2h0PSI3MCIgcng9IjE0IiBmaWxsPSIjRkZGREY4IiBzdHJva2U9IiNCN0EzN0EiLz4KICAgIDx0ZXh0IHg9IjExMzUiIHk9IjE4OCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIxOCI+R2FsbGVyeTwvdGV4dD4KICAgIDxyZWN0IHg9IjEwMjAiIHk9IjIzNSIgd2lkdGg9IjIzMCIgaGVpZ2h0PSI3MCIgcng9IjE0IiBmaWxsPSIjRkZGREY4IiBzdHJva2U9IiNCN0EzN0EiLz4KICAgIDx0ZXh0IHg9IjExMzUiIHk9IjI3OCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIxOCI+VmlkZW8gLyBRdW90ZSAvIE5vdGU8L3RleHQ+CgogICAgPHJlY3QgeD0iMTMzMCIgeT0iMTQ1IiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjExMCIgcng9IjE2IiBmaWxsPSIjRERFNkREIiBzdHJva2U9IiM5MEEwOEUiLz4KICAgIDx0ZXh0IHg9IjE0MzAiIHk9IjE4NSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjcwMCI+Q2FzZSBQYWdlPC90ZXh0PgogICAgPHRleHQgeD0iMTQzMCIgeT0iMjE2IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjE4Ij5yZW5kZXJlZCBvdXRwdXQ8L3RleHQ+CiAgPC9nPgogIDxnIHN0cm9rZT0iIzdGNkQ1MiIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiPgogICAgPHBhdGggZD0iTTMwMCAxODBIMzUwIi8+CiAgICA8cGF0aCBkPSJNMzAwIDIyMEgzNTAiLz4KICAgIDxwYXRoIGQ9Ik02MTAgMTE1SDY2MFYxODBINjkwIi8+CiAgICA8cGF0aCBkPSJNNjEwIDI4NUg2NjBWMjIwSDY5MCIvPgogICAgPHBhdGggZD0iTTk0MCAyMDBIOTkwIi8+CiAgICA8cGF0aCBkPSJNMTI1MCA5MEgxMjkwVjE2NUgxMzMwIi8+CiAgICA8cGF0aCBkPSJNMTI1MCAxODBIMTMzMCIvPgogICAgPHBhdGggZD0iTTEyNTAgMjcwSDEyOTBWMjM1SDEzMzAiLz4KICA8L2c+Cjwvc3ZnPgo=) *架構圖 2 — 目前的標準模式是：TypeScript wrapper 管 metadata，MDX 管正文，共用 renderer 管顯示語法。這次把案例內容搬進 MDX，也等於正式把作品集的內容來源層做成可長期擴充的 CMS 化結構。* 其次，正文渲染採用共用的 MDX 元件語法。`Figure`、`Gallery`、`VideoFigure`、`Quote`、`Note`，以及這次補上的 `WideFigure`，讓所有案例在不同主題下仍然使用一致的媒體語法、lightbox 行為、carousel 規則與標本式 frame tag。這代表整個站不是每頁各自說話，而是用一套穩定的展示語法維持敘事一致性。 另外，related specimen 採取 lazy-loaded 的 chunk 策略。主頁面不會預先載入所有延伸案例；只有當觀看者點開某張 related card 時，該案例的模組與 MDX 內容才會透過 `import()` 被讀入。這不只是效能優化，也是內容節奏設計：延伸材料保持在需要時才展開，不會一開始就壓垮主線閱讀。 ![related specimen lazy-loaded chunk 策略圖](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI0MDAiIHZpZXdCb3g9IjAgMCAxNjAwIDQwMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI0MDAiIGZpbGw9IiNGQ0ZBRjMiLz4KICA8ZyBmb250LWZhbWlseT0iQXJpYWwsIHNhbnMtc2VyaWYiIGZpbGw9IiMyRjJEMzMiPgogICAgPHJlY3QgeD0iNjAiIHk9IjE0NSIgd2lkdGg9IjI0MCIgaGVpZ2h0PSIxMTAiIHJ4PSIxNiIgZmlsbD0iI0Y0RThDOCIgc3Ryb2tlPSIjQzhCMzhBIi8+CiAgICA8dGV4dCB4PSIxODAiIHk9IjE4NSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjcwMCI+VG9waWMgUGFnZTwvdGV4dD4KICAgIDx0ZXh0IHg9IjE4MCIgeT0iMjE2IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjE4Ij5tYWluIGNhc2UgKyByZWxhdGVkIGNhcmRzPC90ZXh0PgoKICAgIDxyZWN0IHg9IjM4MCIgeT0iMTQ1IiB3aWR0aD0iMjMwIiBoZWlnaHQ9IjExMCIgcng9IjE2IiBmaWxsPSIjRkZGREY4IiBzdHJva2U9IiNDOEIzOEEiLz4KICAgIDx0ZXh0IHg9IjQ5NSIgeT0iMTg1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjIyIiBmb250LXdlaWdodD0iNzAwIj5TdW1tYXJ5IENhcmQ8L3RleHQ+CiAgICA8dGV4dCB4PSI0OTUiIHk9IjIxNiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIxNiI+bGlnaHR3ZWlnaHQgaW5pdGlhbCByZW5kZXI8L3RleHQ+CgogICAgPHJlY3QgeD0iNjkwIiB5PSI4MCIgd2lkdGg9IjIzMCIgaGVpZ2h0PSI5MCIgcng9IjE2IiBmaWxsPSIjRURFN0Q3IiBzdHJva2U9IiNCN0EzN0EiLz4KICAgIDx0ZXh0IHg9IjgwNSIgeT0iMTE4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjIwIiBmb250LXdlaWdodD0iNzAwIj5ObyBjbGljazwvdGV4dD4KICAgIDx0ZXh0IHg9IjgwNSIgeT0iMTQ2IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjE2Ij5rZWVwIHBheWxvYWQgc21hbGw8L3RleHQ+CgogICAgPHJlY3QgeD0iNjkwIiB5PSIyMzAiIHdpZHRoPSIyMzAiIGhlaWdodD0iOTAiIHJ4PSIxNiIgZmlsbD0iI0RERTZERCIgc3Ryb2tlPSIjOTBBMDhFIi8+CiAgICA8dGV4dCB4PSI4MDUiIHk9IjI2OCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIyMCIgZm9udC13ZWlnaHQ9IjcwMCI+VXNlciBjbGlja3M8L3RleHQ+CiAgICA8dGV4dCB4PSI4MDUiIHk9IjI5NiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIxNiI+aW50ZW50IHRvIGdvIGRlZXBlcjwvdGV4dD4KCiAgICA8cmVjdCB4PSIxMDAwIiB5PSIyMzAiIHdpZHRoPSIyNDAiIGhlaWdodD0iOTAiIHJ4PSIxNiIgZmlsbD0iI0Y4RjJFNCIgc3Ryb2tlPSIjQjdBMzdBIi8+CiAgICA8dGV4dCB4PSIxMTIwIiB5PSIyNjgiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtc2l6ZT0iMjAiIGZvbnQtd2VpZ2h0PSI3MDAiPmR5bmFtaWMgaW1wb3J0KCk8L3RleHQ+CiAgICA8dGV4dCB4PSIxMTIwIiB5PSIyOTYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtc2l6ZT0iMTYiPndyYXBwZXIgKyBtZHhDb250ZW50IG1hcDwvdGV4dD4KCiAgICA8cmVjdCB4PSIxMzIwIiB5PSIyMzAiIHdpZHRoPSIyMjAiIGhlaWdodD0iOTAiIHJ4PSIxNiIgZmlsbD0iI0ZGRkRGOCIgc3Ryb2tlPSIjQjdBMzdBIi8+CiAgICA8dGV4dCB4PSIxNDMwIiB5PSIyNjgiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtc2l6ZT0iMjAiIGZvbnQtd2VpZ2h0PSI3MDAiPkV4cGFuZCBpbmxpbmU8L3RleHQ+CiAgICA8dGV4dCB4PSIxNDMwIiB5PSIyOTYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtc2l6ZT0iMTYiPmxvYWQgcmVsYXRlZCBjaHVuayBvbmx5IG5vdzwvdGV4dD4KICA8L2c+CiAgPGcgc3Ryb2tlPSIjN0Y2RDUyIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+CiAgICA8cGF0aCBkPSJNMzAwIDIwMEgzNTAiLz4KICAgIDxwYXRoIGQ9Ik02MTAgMjAwSDY2MCIvPgogICAgPHBhdGggZD0iTTgwNSAxNzBWMjEwIi8+CiAgICA8cGF0aCBkPSJNOTIwIDI3NUg5NzAiLz4KICAgIDxwYXRoIGQ9Ik0xMjQwIDI3NUgxMjkwIi8+CiAgPC9nPgo8L3N2Zz4K) *架構圖 3 — 相關標本的延後載入不是單純的效能手段，它同時也是敘事節奏控制。卡片先扮演入口，只有在使用者表現出明確興趣時，完整內容才會被載入與展開。* 最後，Specimen Cabinet 被刻意設計成另一層 archive layer。主 case 負責說清楚核心命題與代表性專案，標本櫃則收納大量歷年作品、補充資料與旁支脈絡，透過獨立資料來源與延後展開機制，讓網站同時具備清楚的主敘事與可探索的資料層。 ![Specimen Cabinet archive layer 關係圖](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI0MDAiIHZpZXdCb3g9IjAgMCAxNjAwIDQwMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI0MDAiIGZpbGw9IiNGQ0ZBRjMiLz4KICA8ZyBmb250LWZhbWlseT0iQXJpYWwsIHNhbnMtc2VyaWYiIGZpbGw9IiMyRjJEMzMiPgogICAgPHJlY3QgeD0iOTAiIHk9Ijg0IiB3aWR0aD0iMjkwIiBoZWlnaHQ9IjEwMCIgcng9IjE4IiBmaWxsPSIjRjRFOEM4IiBzdHJva2U9IiNDOEIzOEEiLz4KICAgIDx0ZXh0IHg9IjIzNSIgeT0iMTI2IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjI0IiBmb250LXdlaWdodD0iNzAwIj5QcmltYXJ5IE5hcnJhdGl2ZSBMYXllcjwvdGV4dD4KICAgIDx0ZXh0IHg9IjIzNSIgeT0iMTU2IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjE4Ij5tYWluIGNhc2UgcGFnZXM8L3RleHQ+CgogICAgPHJlY3QgeD0iOTAiIHk9IjIyMiIgd2lkdGg9IjI5MCIgaGVpZ2h0PSIxMDAiIHJ4PSIxOCIgZmlsbD0iI0Y4RjJFNCIgc3Ryb2tlPSIjQzhCMzhBIi8+CiAgICA8dGV4dCB4PSIyMzUiIHk9IjI2NCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjcwMCI+UmVsYXRlZCBTcGVjaW1lbnM8L3RleHQ+CiAgICA8dGV4dCB4PSIyMzUiIHk9IjI5NCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIxOCI+YWRqYWNlbnQgYnJhbmNoZXM8L3RleHQ+CgogICAgPHJlY3QgeD0iNTIwIiB5PSIxNDYiIHdpZHRoPSIzMDAiIGhlaWdodD0iMTE2IiByeD0iMTgiIGZpbGw9IiNEREU2REQiIHN0cm9rZT0iIzkwQTA4RSIvPgogICAgPHRleHQgeD0iNjcwIiB5PSIxOTAiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtc2l6ZT0iMjYiIGZvbnQtd2VpZ2h0PSI3MDAiPlNwZWNpbWVuIENhYmluZXQ8L3RleHQ+CiAgICA8dGV4dCB4PSI2NzAiIHk9IjIyMCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIxOCI+YXJjaGl2ZSBsYXllcjwvdGV4dD4KCiAgICA8cmVjdCB4PSI5NjAiIHk9IjY4IiB3aWR0aD0iMjYwIiBoZWlnaHQ9IjkwIiByeD0iMTgiIGZpbGw9IiNGRkZERjgiIHN0cm9rZT0iI0I3QTM3QSIvPgogICAgPHRleHQgeD0iMTA5MCIgeT0iMTA4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjIyIiBmb250LXdlaWdodD0iNzAwIj5MYXJnZSB2b2x1bWUgd29ya3M8L3RleHQ+CiAgICA8dGV4dCB4PSIxMDkwIiB5PSIxMzYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtc2l6ZT0iMTYiPmhpc3RvcmljYWwgbWF0ZXJpYWw8L3RleHQ+CgogICAgPHJlY3QgeD0iOTYwIiB5PSIxNzYiIHdpZHRoPSIyNjAiIGhlaWdodD0iOTAiIHJ4PSIxOCIgZmlsbD0iI0ZGRkRGOCIgc3Ryb2tlPSIjQjdBMzdBIi8+CiAgICA8dGV4dCB4PSIxMDkwIiB5PSIyMTYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtd2VpZ2h0PSI3MDAiPk1ldGFkYXRhIGxheWVyPC90ZXh0PgogICAgPHRleHQgeD0iMTA5MCIgeT0iMjQ0IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjE2Ij5saW5rcyAvIHZpZGVvcyAvIG5vdGVzPC90ZXh0PgoKICAgIDxyZWN0IHg9Ijk2MCIgeT0iMjg0IiB3aWR0aD0iMjYwIiBoZWlnaHQ9IjkwIiByeD0iMTgiIGZpbGw9IiNGRkZERjgiIHN0cm9rZT0iI0I3QTM3QSIvPgogICAgPHRleHQgeD0iMTA5MCIgeT0iMzI0IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjIyIiBmb250LXdlaWdodD0iNzAwIj5FeHBsb3JhdGlvbiBsYXllcjwvdGV4dD4KICAgIDx0ZXh0IHg9IjEwOTAiIHk9IjM1MiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIxNiI+c3VwcGxlbWVudCB3aXRob3V0IG92ZXJsb2FkPC90ZXh0PgogIDwvZz4KICA8ZyBzdHJva2U9IiM3RjZENTIiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj4KICAgIDxwYXRoIGQ9Ik0zODAgMTM0SDQ1MEM0ODUgMTM0IDQ4NSAxOTAgNTIwIDE5MCIvPgogICAgPHBhdGggZD0iTTM4MCAyNzJINDUwQzQ4NSAyNzIgNDg1IDIxOCA1MjAgMjE4Ii8+CiAgICA8cGF0aCBkPSJNODIwIDIwNEg5MDAiLz4KICAgIDxwYXRoIGQ9Ik0xMjIwIDExM0gxMjkwIi8+CiAgICA8cGF0aCBkPSJNMTIyMCAyMjFIMTI5MCIvPgogICAgPHBhdGggZD0iTTEyMjAgMzI5SDEyOTAiLz4KICA8L2c+Cjwvc3ZnPgo=) *架構圖 4 — 主敘事層與 archive layer 被拆成不同責任：前者幫助理解，後者提供密度與延伸探索。這讓作品集不必在『清楚』與『完整』之間二選一。* 換句話說，這個作品集的工程面不是單純在說我做了前端，而是在說：**我如何讓內容來源、頁面架構、載入策略與資料層關係，一起支撐「讓複雜內容變得可理解」這件事。** ## 所屬主題 - [我如何把複雜事情講清楚：健康插畫與資訊設計](https://dasto.app/portfolio/clarity/) --- 作者: Daco Hsieh 謝明達 · 聯絡: enodaco@gmail.com · 作品集首頁: https://dasto.app/portfolio/ · English version: https://dasto.app/portfolio/en/clarity/portfolio-system/