404 頁面是品牌展現幽默感與設計細節的最佳舞台。本教學將示範如何在 Illustrator 中，運用「外觀面板」多重描邊/填充、「效果 → 風格化 → 圓角/投影」、「漸層遮罩」等非破壞性技巧，打造一張層次豐富、視覺導向清晰的 404 頁面設計稿。

成品預覽

文件設定與效率設定

• 新建 600×680 px、RGB、72 ppi、對齊像素網格。
• 開啟「網格」與「對齊網格」，設定 5 px 主網格、1 px 細分。
• 開啟「資訊面板」即時座標、單位設為像素——這些微調能大幅提升像素級對齊效率。

主體卡片構建

1. 基礎圓角卡片 + 多重描邊

• 275×400 px 圓角矩形（半徑 10 px），填 #FCBA03。
• 外觀面板添加描邊 1：#E89200、1 px、內描邊。
• 添加描邊 2：黑色、1 px、外描邊、柔光 5% —— 形成微妙外暈。

2. 疊加深淺漸層帶建立視覺層次

在卡片上方依疊三個黑色矩形（高 80/80/75 px），分別設柔光 20%/10%/5%，並只保留上緣圓角。此技法模擬「頂部高光 → 中段過渡 → 底部陰影」的自然光影。

分隔線與區塊劃分

1. 像素級銳利分隔線

• 暫設網格 1 px，畫 273 px 水平線、#E89200、1 px 描邊。
• 效果 → 扭曲與變換 → 位移 Y 0.5 px，校正至像素中心，避免模糊。
• 加「投影效果」產生凹槽感。

2. 漸層遮罩區塊切割

• 建立 275×10 px 黑白漸層矩形（中間 50% 黑），作為不透明蒙版基底。
• 複製兩份分別上移 80 px、75 px，調整漸層方向，配合「透明度面板 → 建立遮罩」，一次完成三區塊的淡入淡出切割。

搜尋框與功能按鈕

搜尋框：內發光 + 圓角 + 投影

• 145×30 px、#E89200、效果 → 風格化 → 內發光（模式正片疊底、不透明度 75%、模糊 3 px）。
• 外觀面板加 1 px 黑描邊（內、柔光 20%）、效果 → 圓角 3 px、投影。

黃色功能按鈕：多重填充疊加立體感

• 基礎填充 #FDDA2F。
• 填充 2：#FCCE17 + 位移效果（垂直 -1 px）+ 兩組投影（上亮下暗）。
• 填充 3：線性漸層（透明度 0%→100%）+ 位移效果 → 整體再加圓角 3 px。

非破壞工作流優勢

所有圓角、投影、發光、漸層皆在「外觀面板」以效果形式存在，隨時可調整參數、複製套用至其他元件、或存為「圖形樣式」一鍵複用。這才是專業 UI 設計師的標準作業流程！