本文非教設計技巧，而是教你用「工具」讓設計更合理、平衡。記住：規則是死的，人是活的，如何在遵守規則中打破規則，決定成敗關鍵。

好的設計離不開周詳規劃，數學在規劃中舉足輕重。有人以為算 margin、padding、高度就是設計用數學？不然，數學有更高層意義。不如給個真實例子，看看我設計前的「準備工作」。

近期設計教會網站，一邊設計一邊發截圖求同行意見，但大眾未見設計背後的「玄機」。

一、確定頁面寬度

設計任何網頁前，首要決定頁面寬度。我偏好 960px，即使用戶 1024×768 解析度，也無橫向捲軸（當然可用任意寬度）。

二、劃分縱向區域

將 960px 縱向劃分為 12 或 16 區域。今天選 12 區域，每區 60px 寬，左右各留 10px 間距。數學表達：12×60 + 24×10 = 960px，總和等於頁面寬度。

一般設計師做完這兩步就開始設計，真正高手這才剛開始。

三、確定橫向區域（行高）

橫向區域高度通常比字體尺寸略大。字體 14px 若行高也 14px，行距極小難閱讀。行高在平面與網頁設計含義不同（後文再探討）。懂前端可視為 CSS line-height。經反覆思考，定 18px 為橫向區域高度。

小結：已有頁面寬度、縱向區域、橫向區域。

四、確認設計中的「域」

實現「域」讓佈局更合理美觀，輔助計算重要元素擺放（切記：域是輔助非唯一標準）。平面/雜誌/書籍設計師設計前會將 A4/A3 頁面由上而下劃分幾個「域」，控制視覺、內容、佈局平衡。但網頁高度不定，怎麼辦？

數學魅力再現威力——黃金分割線。係數 1.618。頁面寬度 960px 除以 1.618 得「域」高度：960/1.618 = 593px。再除以橫向區域高度 18px：593/18 ≈ 33，每個「域」含近 33 橫向區域。

但 593px 作為「域」高度，頁面或僅容 1-2 個域，對佈局指引作用有限（不少頁面高度小於 593px）。

五、用「三分法」優化「域」大小

將 593px 除以 3：593/3 ≈ 198px。再減 18px（橫向區域高度）：198-18=180px，即「域」高度。減 18px 是為每個「域」間加空白，如縱向區域左右各留 10px 同理。

通過以上 5 步，你可以開始視覺設計。用這套理論做出適合專案的頁面寬度、縱向/橫向區域、「域」，輔助提升設計層次！切記：規則死、人活，遵守中打破規則才是成功關鍵。簡約往往源於複雜過程。