網頁設計英文術語完整對照：版面、視覺、體驗與技術詞彙一次看懂

網站設計　·　最後更新 2026-09-04　·　OPEN Design 動能開啟 編輯部

為什麼需要認識網頁設計的英文術語

網頁設計領域的許多核心概念最初都以英文命名，即使中文業界已經發展出對應的譯名，實務溝通與國外教學資源、工具介面仍大量使用英文原文。無論是自學網頁設計、或是與設計師、工程師協作時，理解常見的英文術語都能大幅減少溝通落差，也能避免因翻譯不精準而誤解對方真正想表達的設計概念。

此外，許多免費與付費的設計教學資源、線上課程、設計工具官方文件皆以英文撰寫，若能掌握基礎術語，就能更順利地查找資料、閱讀教學文章，甚至直接使用國外的設計工具與版型資源，不必完全依賴翻譯內容，也能第一時間掌握國外設計趨勢與工具更新的最新資訊。

對於正在準備轉職、求職或希望與國外客戶協作的人來說，熟悉這些術語更是基本門檻，因為多數徵才需求與作品集說明都會直接使用英文專業詞彙來描述職能與專案內容。

本篇整理網頁設計常見的英文專業術語，依「版面配置」「視覺設計」「使用者體驗」「技術與流程」四大類分組介紹，方便讀者依需求查找對照，作為學習或溝通時的詞彙參考。

版面配置相關術語

Layout（版面配置）指的是頁面元素的整體排列方式；Grid System（網格系統）是一種利用固定欄位輔助排版對齊的設計方法，能讓不同區塊的內容保持視覺上的一致與整齊。Responsive Design（響應式設計）則指網站能依據裝置螢幕尺寸自動調整版面配置，確保在手機、平板、電腦上都有良好的顯示效果。

Above the Fold（首屏區域）指使用者不需捲動頁面就能看到的區域，通常是設計師最重視的視覺焦點位置；Hero Section（主視覺區塊）則是網站首頁最上方、用來吸引注意力的大型視覺區塊，常搭配標題與主要行動呼籲按鈕。Whitespace（留白）指版面中刻意保留的空白空間，適當留白能提升內容的可讀性與質感。

視覺設計相關術語

Typography（字體排印）泛指字體選擇、字級、行距、字距等文字視覺呈現的整體規劃，良好的字體排印能大幅提升網站內容的閱讀舒適度；Color Palette（配色方案）指網站所使用的一組固定色彩組合，通常包含主色、輔色與強調色，用來維持整站視覺的一致性。Brand Identity（品牌識別）則涵蓋標誌、色彩、字體等能代表品牌形象的視覺元素總稱，是企業對外形象的重要基礎。

CTA（Call to Action，行動呼籲）指引導使用者採取特定行動的按鈕或文字，例如「立即諮詢」「免費預約」，通常會使用較醒目的色彩與位置來提高點擊率；Icon（圖示）指用簡化圖形傳達訊息的小型視覺元素，能幫助使用者快速理解功能或分類；Mockup（設計稿模擬圖）則是在設計階段用來呈現網站或應用程式外觀的靜態示意圖，方便委託方在正式開發前確認整體視覺方向與細節，避免開發完成後才發現風格與預期落差過大。

使用者體驗相關術語

UX（User Experience，使用者體驗）泛指使用者在使用網站或產品過程中的整體感受，涵蓋操作是否流暢、資訊是否容易理解等面向；UI（User Interface，使用者介面）則專指使用者實際看到與互動的介面元素設計，例如按鈕、選單、表單等。

Usability（易用性）指產品或介面是否容易被使用者理解與操作；Navigation（導覽）指網站的選單與連結架構，良好的導覽設計能幫助使用者快速找到所需資訊；User Journey（使用者旅程）則描述使用者從進入網站到完成目標（如填寫表單、完成購買）過程中所經歷的一連串步驟與接觸點。

技術與流程相關術語

Wireframe（線框圖）指在正式視覺設計前，用簡單線條與方框規劃頁面結構與內容配置的草圖，用來確認資訊架構是否合理；Prototype（原型）則是可互動的設計模擬版本，讓委託方或使用者在正式開發前能實際體驗操作流程。

CMS（Content Management System，內容管理系統）指讓使用者不需具備程式能力也能自行更新網站內容的後台系統；SEO（Search Engine Optimization，搜尋引擎最佳化）指透過調整網站結構與內容，提升在搜尋結果中排名的一系列作法；Front-end（前端）指使用者實際看到與互動的網頁部分，Back-end（後端）則指處理資料與邏輯運算、使用者看不到的伺服器端程式。

Domain（網域）指網站在網路上的專屬名稱，例如公司官網的網址；Hosting（主機代管）指存放網站檔案並讓網站能被瀏覽的伺服器服務；SSL Certificate（安全憑證）則是讓網站連線採用加密傳輸的憑證，具備安全憑證的網站網址通常會以https開頭，並在瀏覽器顯示鎖頭圖示，是使用者判斷網站基本安全性的常見依據之一。

常見英文術語對照表

以下整理常見網頁設計英文術語與其中文對照，方便快速查找，實際使用時仍建議依上下文確認語意，部分術語在不同領域或不同團隊之間，實際運用範圍可能有些微差異，遇到不確定的用法建議直接向對方確認清楚。

如何運用這些術語提升學習與溝通效率

建議初學者不必一次背下所有術語，可以先熟悉版面配置與視覺設計相關的基礎詞彙，這類詞彙在瀏覽國外設計案例、閱讀教學文章時出現頻率最高；隨著接觸範圍擴大，再逐步認識使用者體驗與技術流程相關的術語，循序漸進會比一次死背整份清單更容易記住並實際運用。

與設計師或工程師溝通時，若不確定某個英文術語的準確意涵，建議直接請對方以具體畫面或案例說明，而非僅憑字面翻譯猜測，因為部分術語在不同專案脈絡下可能有些微差異；養成隨手記錄常見術語與對應中文說明的習慣，長期下來能顯著提升溝通效率與自學速度，也能讓自己在與外部團隊討論需求時更有信心。

此外，實際操作設計工具或瀏覽官方說明文件時，多留意介面上出現的英文標籤，並嘗試對照本文整理的分類記憶，會比單純查字典更容易建立長期記憶，對於未來持續進修進階的網頁設計或前端開發知識也會有實質幫助。