你應該知道的88個網頁設計術語

當您造訪網站時——無論是時尚的線上商店還是個人部落格——您看到的每個圖片、按鈕、文字方塊和互動部分都不僅僅是網站整體的一部分；它們是一個具有用途和名稱的元素。了解這些網頁設計術語不僅可以加深您對網站運作方式的理解，還能幫助您有效地溝通網站，無論您是網頁設計師、內容創作者還是網站管理員。

在本指南中，我們將帶您了解網頁設計的基本術語。這些術語將幫助您了解網站設計的整體情況，同時欣賞其中的細節。無論您是想自己動手做網頁項目，還是與設計師合作，了解這些術語都能讓您的工作更順暢，成果更佳。

基本網頁設計術語 

網頁設計通常涉及學科之間的重疊，因此我們包含了與品牌、構圖、顏色和排版相關的詞彙。

掌握網頁設計語言能幫助你更好地提出問題，更有效地溝通，最終打造出更優秀的產品。你也能注意到這些術語在不同網站上是如何應用的（無論好壞）。網頁設計是一個整體過程，網頁設計師需要具備宏觀視野和細節洞察的能力。

了解網站設計術語可以幫助非設計師（例如內容創作者和網站所有者）在與創意人員和開發人員討論網站時彌合彼此之間的隔閡。無論是更好地理解 DIY 教程，還是與設計師輕鬆溝通，這些背景知識對於任何從事網路工作的人來說都至關重要。 

通用術語 

無論設計的目標或目的是什麼，每個網站都有一些共同的元素。這套通用術語將幫助您了解網站的基礎知識，並幫助您與設計師溝通。這些術語涵蓋了從網站結構到網站平台各個組成部分的所有內容。 

• 頁首：頁首是網頁的頂部部分，通常包含徽標、導航連結和其他關鍵資訊。它可以幫助用戶快速了解網站的特色並瀏覽其主要部分。
• 登陸頁面：通常為特定行銷活動設計的獨立頁面，可以引導使用者執行單一操作，例如註冊新聞通訊或購買產品。
• 行動號召 (CTA)：行動號召是一種鼓勵使用者採取特定行動的提示，通常以按鈕的形式出現。例如「註冊」、「立即購買」或「了解更多」。精心設計的 CTA 應該清晰、引人入勝，並且位置恰當。
• Hero： Hero 部分是網頁頂部最主要、最醒目的區域。它通常包含一張大圖片、影片或圖形，並包含標題和行動號召 (CTA) 來吸引註意力。
• 響應式設計：如果您的網站設計方法能夠確保其適應不同的裝置和螢幕尺寸，則可稱之為響應式設計。這對於在手機、平板電腦和桌上型電腦上提供無縫的使用者體驗至關重要。
• 無障礙：網頁設計中的無障礙是指創建所有人（包括殘障人士）都能使用的網站。這通常包括為元素添加 ARIA（無障礙富互聯網應用程式）標籤，以協助螢幕閱讀器識別它們，確保足夠的顏色對比度，並遵循 WCAG（網頁內容無障礙指南）標準。這些努力使網站能夠供視覺、聽覺、運動或認知障礙人士使用。
• 前端：網站中與使用者直接互動的部分是前端。它包含文字、圖片、按鈕和整體佈局等元素。前端開發人員使用 HTML、CSS 和 JavaScript 等語言來建立這些視覺化和互動式元件。
• 後端：後端是網站在後台運行的部分，負責管理資料庫、伺服器和應用程式邏輯。後端開發涉及 PHP、Python 等語言以及 SQL 等資料庫，以確保網站正常運作。
• 使用者體驗 (UX)：使用者體驗是指使用者在瀏覽網站時的感受。良好的使用者體驗 (UX) 注重佈局、可訪問性和可用性等方面，使網站直觀、愉悅、高效。
• 首屏：借用報紙術語，指網頁無需滾動即可看到的部分，即首屏或捲軸上方。設計師優先將關鍵訊息和行動號召 (CTA) 放置在此。
• 內容管理系統 (CMS)： CMS 是一種允許使用者無需專業技術知識即可建立、管理和修改網站內容的軟體。例如，WordPress 就是一款受歡迎的 CMS。 
• 頁尾：頁腳是網頁的底部部分。它通常包含額外的導航連結、聯絡資訊、社交媒體圖示和版權聲明。它通常為滾動到頁面末尾的用戶提供次要資訊。
• 網域：網站的唯一位址，例如“example.com”，方便使用者輕鬆找到並造訪網站。網域通常體現了網站的品牌或宗旨。

網站品牌術語  

品牌塑造是企業傳達其訊息、價值觀和整體體驗的方式。它涵蓋了從標誌、視覺設計元素到人們與品牌產生聯繫時的感受等方方面面。在網頁設計中，品牌塑造是塑造這種感知的強大工具；它能讓您打造在每一次互動中持續強化品牌形象和品牌故事的體驗。

• 網站圖標 (Favicon)：代表您網站的小圖標，通常顯示在瀏覽器標籤頁中。它通常是徽標或品牌標記的簡化版本。 
• Logo：代表企業/組織/個人的設計元素。它可以包含品牌標識和字體等視覺元素。 
• 品牌標誌：不包含文字的視覺標誌。
• 圖示：與您的品牌相關的物件或概念的圖形渲染。 
• 文字標記/字母標記/標識：使用特定樣式、字體和顏色的可讀標識。 
• 品牌識別：品牌的整體呈現，包括視覺元素（標誌、色彩）以及品牌的表達方式和行為。品牌識別不僅僅是一個識別。 
• 設計系統：網站可重複使用的數位資產庫/群組。
• 品牌指南：包含您的所有品牌訊息並提供有關如何融入品牌識別（聲音、顏色、標誌和使用指南）的說明的文件。 
• 字體：與品牌和使用規則相關的字體。 
• 調色盤：網站或品牌可以使用的一組顏色。顏色通常有特定的用途。 
• 視覺層次：當品牌元素在設計專案中組合在一起時，元素的排列如何影響感知和互動。 
• 情緒板：為設計提供視覺靈感或方向的一組元素。 

網站排版術語  

排版是關於字體排列的美學決策。字體的大小、間距、對齊方式、列大小以及字體的相對大小對使用者體驗和美觀度都有很大的影響。排版選擇應該經過深思熟慮，在強化整體系統的同時，兼顧美觀和易讀性。

• 字體（字型）：字母、字形和符號的集合
• 字體系列：特定字體的所有變量，例如粗體、常規和斜體。 
• 字體大小：設計中的字體大小。 
• 字體粗細：字體每個筆畫的明暗程度。字體越細，顏色越淺；字體越冷，顏色越重。 
• 字體樣式：文字的特殊功能，包括斜體、底線或刪除線。
• 行高（行距）：文字行之間的間距。 
• 字母間距（追蹤）：調整字母組/文字區塊之間的間距。
• 字距調整：調整各字母之間的間距。
• 文字裝飾：對文字進行的任何附加樣式，通常使用 CSS。 
• 襯線/無襯線：襯線字體在字母末尾有額外的裝飾筆畫或線條，而無襯線字體則沒有。

網站顏色術語  

色彩涵蓋了關於如何在構圖中運用色彩的美學決策。色彩可以喚起情感、強調、區分或組合元素，或創造視覺上的統一與平衡。色彩通常與品牌塑造相關。色彩的選擇應經過深思熟慮，並在整個網站上保持一致。

• HEX：十六進位顏色是用於在 HTML/CSS 中表示顏色的六位數字。
• RGB：用於螢幕的加色模型，紅、綠、藍光值組合形成顏色。
• CMYK：對於印刷來說，墨水採用減色模型，青色、洋紅色、黃色和黑色墨水組合形成顏色。
• Pantone/專色：這些是特定顏色的定製油墨。大品牌通常都有客製化的 Pantone 顏色。
• 色調：顏色在整個色譜中的位置。 
• 飽和度：如何描述顏色的鮮豔度或暗淡度。 
• 對比：兩種顏色之間的差異使它們顯得突出。例如，白色和黑色的對比度就很高。 
• 不透明度： 顏色有多透明？你能看透它嗎？

網站圖像術語  

圖像術語涵蓋網站的視覺和圖形元素。圖像對於傳達訊息和與受眾建立聯繫至關重要。然而，如果圖像使用不當，可能會增加網站載入時間，同時又無法提升使用者體驗。使用圖像來支援您的訊息傳遞；並使用適合內容的圖像格式。

• 向量：由曲線和線條組成的圖像，無論大小都不會像素化（SVG、EPS）。
• 光柵：由像素組成且大小有限的影像（JPG、TIFF、PNG、GIF）。
• 解析度：光柵影像的像素數（例如 800×600 或 2400×1200）。解析度越高，影像尺寸越大，細節也越豐富。
• 最佳化：根據圖像的使用位置調整其大小有助於圖像和影片在您的網站上更快地加載。 
• 壓縮：一種最佳化方法，將大檔案壓縮成小檔案。 
• JPG/JPEG：最適合攝影和詳細影像。
• PNG：最適合圖形、簡單顏色和透明圖像。
• GIF：最適合低細節的圖形或動畫。
• TIFF：最適合列印，不適合螢幕顯示。
• SVG：適合在網路上顯示的向量圖像格式，最適合圖形和標誌。
• WebP：現代影像格式，可在不犧牲品質的情況下提供卓越的壓縮。

網站使用者體驗條款  

使用者體驗涵蓋了人們如何與網站互動。使用者體驗影響著我們如何引導使用者瀏覽網站，並引導他們實現特定的最終目標。它涵蓋了設計和開發的許多元素，包括外觀和運作方式。在製定功能決策時，請以最終用戶為中心，而不是您的偏好或所使用的工具。

• 人物角色：代表你網站/產品主要使用者的虛構人物。一個精心設計的角色應該代表真實的人，他們有真實的動機。
• 線框：代表一般區塊級內容和互動元素的低保真網站佈局。
• 模型：高保真網站佈局，顯示最終的顏色、字體、圖像等。
• 原型：網站的互動版本，可能不是用最終程式碼建構的。
• CTA：號召行動，通常與按鈕配對。
• 轉換：當使用者採取特定的期望行動時。
• 登陸頁面：針對特定受眾或搜尋引擎結果優化的單一頁面。
• 可用性：使用者與您的網站互動的程度，通常透過觀察一系列任務來測試。

網站使用者介面術語  

使用者介面 (UX, UI) 包括頁面上使用者互動的元素。雖然它們並非一回事，但使用者介面確實會影響使用者體驗。不要讓使用者思考；設計一個利用現代模式的直覺式介面。

• 導航：允許使用者瀏覽網站不同版塊和頁面並進行互動的系統。它通常包含引導用戶的選單、連結和按鈕，可幫助他們快速輕鬆地找到資訊。有效的導航直覺、條理清晰、反應迅速，能夠確保流暢的使用者體驗，並幫助訪客輕鬆找到網站目標。
• 麵包屑：顯示父頁面和子頁面的分層內容連結。
• 選單：主導航區域有時會有下拉或彈出子選單項目。
• 篩選器：預先定義元素，允許以不同類別縮小可見內容的範圍。
• 搜尋：查詢內容並傳回結果清單的開放式輸入。
• 滑桿：一種流行的、動畫的資訊顯示方式，您可能不應該使用。

網站組成和層次結構術語  

構圖指的是網站內容與美觀度的協調。網頁上的每個元素都應該感覺像是網站佈局的一部分，而不是事後才添加的。層次結構體現了資訊可見性的相對重要性。視覺層次結構是由字體、顏色、接近度和平衡性等細節組成的。良好的層次結構有助於資訊的可掃描性，並幫助使用者根據重要性對頁面上的資訊進行優先排序。 

• 平衡：使用相似或互補的設計元素使構圖感覺平等。
• 重複：使用重複元素來強化模式或提供熟悉的視覺提示。
• 空白：元素周圍的開放空間或呼吸空間的數量。
• 網格：設計的底層結構，決定了所有內容的佈局方式。
• 三分法：一種視覺概念，指出最令人愉悅的焦點位於三行和三列的交叉點。
• 比例：頁面上元素之間的關係。
• 接近度/對齊：元素之間越接近且對齊方式相似，則它們在視覺上關聯的可能性就越大。 
• 焦點：頁面上首先吸引使用者註意力的地方。 
• 語意標記：正確使用 HTML 元素來暗示內容中的層次結構和用法。
• Z 型佈局：一種遵循自然眼球從左到右呈「Z」形移動的佈局策略。
• F 型佈局：將內容與標題和圖像沿左側對齊的佈局，以「F」形吸引註意力。 

網站SEO術語  

搜尋引擎優化不僅僅是一個流行詞。它涵蓋了網站所有視覺、上下文和技術元素，使搜尋引擎更容易理解。強大的 SEO 策略始於內容，並融入更多技術元素，以提升使用者體驗。 

• 網站地圖：網站上所有頁面的結構化清單或大綱，通常按層次順序組織，以幫助使用者和搜尋引擎了解網站的佈局和結構。
• 核心網路生命力：衡量網站效能和使用者體驗的一組指標，包括頁面載入速度（頁面載入速度）、最大內容點（主要內容載入所需的時間）、首次輸入延遲（網站對首次使用者互動的反應速度）和累積佈局偏移（頁面載入時的穩定性）。 
• 元標記（標題和描述）：網頁 HTML 中的程式碼片段，用於提供有關頁面的資訊。兩個最重要的元標記包括：title（顯示在搜尋結果和瀏覽器標籤頁中）和 meta description（在搜尋引擎結果中顯示的頁面內容的簡要概述）。
• SERP（搜尋引擎結果頁面）：搜尋引擎根據使用者的搜尋查詢顯示的頁面。它通常包含自然搜尋結果、付費廣告以及其他功能，例如圖片、影片和摘要。
• 關鍵字：人們在搜尋引擎中輸入的特定單字或短語，用於尋找內容。策略性地使用相關關鍵字有助於提高網站在搜尋引擎結果中的曝光度。
• 頁面SEO：優化單一頁面以提高搜尋引擎排名。這包括內容品質、關鍵字使用、元標籤、標題、內部連結和圖像優化。
• 站外 SEO：指在網站外採取的提升網站權威性和排名的措施。主要包括從其他知名網站、社群媒體和網紅行銷建立反向連結。
• Alt 文字（替代文字）：新增至影像的描述，可協助螢幕閱讀器為視障使用者解釋影像並為搜尋引擎提供上下文。
• 網域權重：由 SEO 公司 Moz 開發的評分系統，用於預測網站在搜尋引擎上的排名能力。它基於反向連結的品質和數量等因素，DA 越高，通常意味著排名能力越強。

將這些術語付諸實踐 

當您掌握網頁設計語言時，您將更有信心在自己的網站上工作，並與設計師和開發人員交談以幫助您的網站。