概念地圖・原子設計五層
作者 山姆（謝冠生）・喵喵書評創辦人
發布
分類：創新
這一頁不只是把一個概念解釋一遍——一張自己畫的結構圖，加上拿台灣情境從頭走一次的實例演練、這個框架什麼時候會騙你，以及它接回 P.A.I.N. 之後長什麼樣。一頁必須交付的三層 →
原子設計五層：一顆按鈕改一次，九頁一起變
一顆「加入購物車」的按鈕，圓角想從四改成八。工程師打開專案，回你一句：要改九個地方。九個地方裝的其實是同一顆按鈕，只是它被抄了九份，散在九頁裡。原子設計把這件事倒過來做——先把介面拆到最小的那一顆零件，再一層一層往外組裝，讓每一顆只寫一次。五層由內而外是原子、分子、有機體、模板、頁面，愈往外顆粒愈大，也愈接近讀者真正看到的那一頁。這張圖回答的是一顆零件正在被誰組裝，跟網站有幾頁無關。
五層由內而外，各是什麼粒度
五個名字聽起來像生物課，實際上只在回答一句話：這個東西是被誰組裝的。
| 層 | 這一層裝什麼 | 跟外面那一圈的關係 |
|---|---|---|
| 原子 | 拆到不能再拆的零件：按鈕、輸入框、色塊、字體標籤 | 被分子拿去綁在一起 |
| 分子 | 幾顆原子綁成一件事：色塊加標籤，成為一個材質選擇器 | 被有機體拿去湊成一整塊 |
| 有機體 | 能單獨站著的一整塊：頁首、購物車列、設定面板 | 被模板拿去排位置 |
| 模板 | 位置都排好了、字跟圖還沒進來的骨架 | 被頁面灌上真實內容，零件數量不會增加 |
| 頁面 | 灌了真實內容的那一份，讀者看到的就是它 | 最外圈，外面沒有更大的了 |
表格讀到第四列會發現一道接縫。前四層是同一種動作重複四次——小的拼成大的，愈往外零件愈多；模板到頁面那一圈換了動作，零件一顆都沒增加，變的是灌進去的內容。這五層排的是元件庫的抽屜，一顆零件只登記在一個抽屜裡；至於網站上有哪些頁、彼此怎麼連，那記在網站地圖那本帳上。兩本帳只有在最外圈碰面。
一個元件該放在第幾層
一、再拆一刀就沒有意思了，那是原子。印章行訂製頁上的「送出印稿」按鈕，拆成一個方框加四個字之後，兩樣東西都不再指涉任何動作——那就是底了。判準在於拆開之後還剩不剩意義，跟零件的大小無關。自問：這個東西再拆一刀，還留得住意思嗎？
二、幾顆零件一起搬、一起改、一起壞，那是分子。材質色塊自己出現沒有用，旁邊一定跟著「牛角」「黑檀」的字；把色塊搬走，標籤也得跟著走。這種綁死的關係就是分子的邊界——分子比原子多出來的東西，是那條綁繩。自問：這幾個零件是不是一起搬、一起改、一起壞？
三、整塊搬到別頁還看得懂，那是有機體。印章行的「訂製設定面板」裡有材質、字體、尺寸、上傳區，整塊移到公司大小章那一頁，讀者照樣知道要做什麼。能自己站著的區塊才算這一層；一個孤零零的輸入框搬過去只會讓人愣住。自問：把它整塊搬到另一頁，還看得懂嗎？
四、內容抽光還剩得下骨架，那是模板。把訂製頁上所有的字、所有的印稿圖都拿掉，留下的是「左邊選項、右邊預覽、下面一條結帳列」這個位置關係。這個骨架在圓章、方章、原子印上長得一模一樣，所以它只該有一份。自問：把裡面的字全部換掉，版面還成立嗎？
五、改壞了只有自己受傷，那是頁面。「公司大小章」那一頁把說明文字寫錯，其他八頁不痛不癢；但要是動到它背後的模板，八頁一起中招。這一層是唯一能單獨受傷的地方——痛感的範圍，就是分層的證據。自問：這一份東西改壞了，只有這一頁受傷嗎？
一間印章行的線上訂製頁，五層拆一次
底下這家台灣中部的印章行，是為了把這個結構講清楚而編出來的示意情境，沒有指涉任何真實公司。它的線上訂製頁做四件事：選材質、選字體、上傳印稿、結帳。
- 原子：14 個。按鈕、輸入框、材質色塊、字體標籤，一路拆到不能再拆，數出來 14 顆。一顆只寫一次
- 分子：6 個。色塊加標籤綁成「材質選擇器」，輸入框加按鈕綁成「印稿上傳區」，這一層有 6 組。
- 有機體：3 個。訂製設定面板、購物車列、頁首，各是一整塊能自己站著的區域。
- 模板：2 張。商品訂製版與結帳流程版，位置排好了，字跟圖都還沒進來。模板切太多就開始還債
- 頁面：9 頁。商品訂製版長出圓章、方章、原子印、公司大小章等 6 頁，結帳流程版長出購物車、填運送資料、完成頁 3 頁——6 加 3，正好 9 頁。
- 那顆按鈕的路徑。「加入購物車」是 1 顆原子，被 2 個分子用到，這 2 個分子出現在 2 個有機體裡，那 2 個有機體站在 2 張模板上，而 9 個頁面全部由這 2 張模板長出來。九個檔案縮成一個
同一張圖，兩種讀法。老闆讀出來的是「圓角改一次，九頁跟著變」；工程師讀出來的是「這 14 顆原子往後都得有人維護」。分層沒有把工作變少，它把工作從九次重複，換成一次登記加一份清單。真正的分水嶺在模板那一格：2 張模板撐 9 頁，改動的成本才攤得開；要是每開一頁就切一張新模板，模板變成 9 張，這五層就只是把原本的九次抄寫換了一套生物學名詞。所以清點順序應該倒過來走——先數模板，再數頁面，兩個數字拉得愈開，分層才愈值得。以上為說明結構用的示意情境，僅供理解框架之用。
這五層什麼時候會騙你
- 這張圖管的是元件庫，管不到網站架構。看到「頁面」在最外圈，很容易把這張圖讀成網站架構，於是開會時拿它討論導覽列該怎麼分。這五層登記的是一顆零件被誰組裝，網站有哪幾頁、誰連到誰，記在網站地圖那本帳上。兩件事只有在最外圈碰面——把它們混成一張圖，通常會得到一份誰都不敢動的文件。
- 分子跟有機體的界線，會吃掉一整個下午。材質選擇器算分子還是有機體，團隊裡三個人可以有三種答案，而且三種都說得通。這條界線沒有客觀刻度，只有團隊約定。分層本來要省的是重複的工，要是命名爭議每週固定花掉兩小時，省下的那一頁工時就先賠光了——先讓它跑，名字之後再改。
- 改動變便宜的同時，改壞也一起變便宜。一顆原子連到九頁，是分層最漂亮的地方，也是它最危險的地方：改對了九頁一起好，改錯了九頁一起壞，而且錯得一模一樣，肉眼巡頁完全看不出哪一頁特別怪。沒分層的時候，錯誤被關在單頁裡自生自滅；分層之後，錯誤跟修正走同一條路。這就是為什麼元件庫愈成熟的團隊，愈捨得在那一顆按鈕上加測試。
用痛點的眼光數那九個地方
分層算得出一次改動會傳到幾頁。
那九個地方之所以是九個，因為當初每開一頁就把按鈕重抄一次——抄的時候很快，第九次要改的時候才一起結帳。原子設計等於一筆對未來改動的預付款：現在多花時間把零件收成一份，換往後每次只改一個地方。預付款划不划算，看的是「真的會改嗎」。這張圖畫得出一顆原子被組裝進幾層，畫不出那九頁裡有沒有人真的按下過那顆按鈕。P.A.I.N. 的第一個字問的是誰在痛：假如九頁裡有六頁整季沒人點進去，把它們的按鈕統一成一顆，省下的是工程師的力氣，客戶那一邊一點感覺都沒有。今晚可以做一件事——打開你手上那份成品，訂製頁、報價單、菜單都算，把出現三次以上、而且每次長得幾乎一樣的那個東西圈起來，數它現在被抄了幾份。那個份數，就是你這一行的九。
關於原子設計，常被問到的幾件事
五層一定要全做嗎？
不必。層數是給元件庫用的抽屜，抽屜的數量該由東西的多寡決定。只有三、四頁的小網站，做到「有機體」通常就夠了——把頁首、表單區、footer 各收成一塊，重複的部分就少掉大半。模板那一層要等到「同一種版面出現第三次」才划得來；在那之前硬切模板，會多出一層沒人維護的中間物。判斷點很簡單：某個版面第三次被複製時，就是它該升格成模板的時候。
分子跟有機體到底怎麼分？
用「能不能單獨站著」來切。材質色塊加上文字標籤，離開訂製頁就沒有意義，那是分子；整組訂製設定面板搬到另一頁，讀者照樣知道要做什麼，那是有機體。真的卡住時，先放進分子跑一陣子——它被三個以上的地方引用、而且引用時都是整塊搬過去，自然會浮到有機體那一層。名字可以之後再改，重複抄寫的成本不會等你。
模板跟頁面差在哪？
模板是位置關係，頁面是那些位置被填滿之後的成品。前四層之間是組合——小零件拼成大零件；模板到頁面之間是實例化——同一張骨架灌進不同內容，長成不同的頁。這也是為什麼模板數量該遠少於頁面數量：印章行 2 張模板撐起 9 頁，改一次骨架，9 頁一起換臉。要是模板跟頁面幾乎一樣多，那條實例化的關係就沒發揮作用，等於白分了一層。
不做網站的人用得到嗎？
用得到，只要你手上的東西會被複製。報價單有固定的抬頭與條款區塊，菜單有固定的品項列，簡報有母版與內頁——全部吃同一套邏輯：先找出重複的最小單位，再往上看它被誰組裝。做法也一樣，先拿一份現成的成品，把每次都長得一樣的部分圈出來，那些圈起來的東西就是你的原子。分層真正在管的是「同一件事被寫了幾份」，跟載體是什麼沒有關係。
翻開元件清單，先數一次同一顆按鈕被抄了幾份。數完那個份數，再回頭看它躺在第幾層——通常你會發現，最痛的那一顆從來沒被登記過。想看另一種往上長、而且層級同樣不是重要性排序的圖，可以接著讀 DIKW 金字塔：那一張往上長的是資料變成判斷，這一張往外長的是零件被組裝成頁面。
喜歡這篇文章嗎？
每週幫你拆二本好書，把判斷力、好書金句、好問題，直送你的信箱。
不適合你可隨時退訂 · 每週兩封，陪你把書讀進生活。
送出即表示同意我們依隱私權政策使用你的 email。