每個領域都有自己的專有名詞和術語，掌握它們才能更好地和工作伙伴溝通。作為一名資深UI設計師，我整理了以下30個UI設計師應該掌握的專業術語，希望能幫助大家更好地理解和運用這些概念。

這些術語包含三大類：基礎名詞、常用UI設計元素以及UI設計流程和方法。對于新手小白來說，了解這些是你入門UI設計的必經之路；對于“老司機”來說，也可以趁此機會查漏補缺，看看自己還有哪些概念沒有掌握。話不多說，一起來看看吧~

一、基礎名詞

1、UI（User Interface，用戶界面）

UI即用戶界面，是指用戶與產品進行交互的界面。UI設計主要通過合理的布局、清晰的導航和吸引人的視覺元素，提升用戶體驗，使用戶能夠直觀、方便地使用產品。

比如，在設計一個APP的界面時，UI設計師需要考慮顏色、字體、圖標、按鈕等視覺元素，確保界面美觀且易于使用。同時，還需要考慮屏幕大小、觸摸交互和響應速度等因素，確保用戶在不同設備上都有良好的使用體驗。

常用的UI工具有：

1）Figma：不用多說，可以說是全球最火的UI設計工具，提供了全面的工具和功能來設計界面，同時還有豐富的插件生態系統，以及龐大的用戶交流社區。在線使用，付費版$12/月起。但Figma對國內用戶有一些老大難問題，比如無本地化支持、訂閱價格貴等。

2）摹客DT：更適合國內設計師的UI設計工具，也是在線使用，完全免費，學習門檻極低，功能上覆蓋了Figma的95%以上，全中文界面對英文不好的小伙伴來說不要太友好。

2、UX（User Experience，用戶體驗）

UX（用戶體驗）是指用戶在使用產品過程中所產生的整體感受和體驗。它不僅包括用戶界面的設計，還涵蓋了用戶與產品互動的全過程。UX設計的目標是提高用戶滿意度，通過優化可用性、易用性和愉悅性，使產品更符合用戶需求。

比如，在設計一個電商網站時，設計師需要關注用戶在瀏覽商品、添加購物車、結算支付等環節的流暢度和便捷性，從而提升整體購物體驗。通過用戶測試和反饋，設計師可以不斷優化這些流程，確保用戶能夠輕松完成購買。

需要注意的是，雖然UX和UI都涉及用戶與產品的互動，但UI專注于視覺設計和交互元素，而UX則涵蓋了更廣泛的用戶情感和行為體驗。

3、GUI（Graphical User Interface, 圖形用戶界面）

GUI（圖形用戶界面）是指通過圖形元素（如窗口、圖標、按鈕）與用戶進行交互的界面。GUI使用戶能夠通過視覺和交互元素直觀地操作系統和應用程序，減少了對命令行輸入的依賴。GUI設計主要是為了提高用戶的操作效率和使用體驗，使軟件產品更加易用和友好。

4、設計系統（Design System）

設計系統是一套標準化的設計規范和組件庫，用于指導和統一產品的設計和開發。

設計系統包括顏色、字體、間距、圖標、按鈕等視覺元素的定義，以及這些元素在不同情況下的使用規范。建立設計系統是確保產品的一致性和可擴展性，提高設計和開發效率。

像蘋果的人機界面設計指南非常出名，它為設計師提供了一系列的設計規范和建議，確保不同應用和平臺上的產品都具有一致的外觀和體驗。

5、柵格系統（Grid System）

柵格系統是一種用于網頁設計和排版的布局系統，它通過將頁面劃分為等寬的列和行，使得設計師可以更方便地將內容放置在頁面上，確保頁面元素的合理布局。柵格系統是現代網頁和應用設計中常用的工具，特別是在響應式設計中，柵格系統能夠靈活適應不同屏幕尺寸。

6、像素（PX）

像素是圖像顯示的最小單位，通常用于描述數字圖像的分辨率。在屏幕上，像素數量越多，圖像越清晰。每個像素可以顯示一種顏色，通過成千上萬個像素的組合，形成我們在屏幕上看到的完整圖像。UI設計師在設計時需要考慮像素的大小和分辨率，以確保圖像在各種設備上都能清晰顯示。

7、視覺層次（Visual Hierarchy）

視覺層次是通過將界面元素進行設計上的區分，引導用戶的注意力，使用戶能夠優先關注最重要的信息。視覺層次不僅僅包含文字，還包含圖片，視頻按鈕以及文字以外的所有視覺元素。

比如，在設計一個新聞網站的首頁時，可以通過加大標題字體、使用醒目的顏色和放置在頁面頂部等方法，突出最新和最重要的新聞。同時，次要新聞和其他內容則使用較小的字體和顏色，以次級位置顯示，從而建立明確的視覺層次。

8、情緒板（Mood Board）

情緒板是用于傳達設計項目整體視覺風格和情感的工具。它通常由圖片、顏色、字體、質感和其他視覺元素組成，幫助設計師在項目初期確定設計方向。

比如，在為一家咖啡店設計品牌時，設計師可以創建一個情緒板，捕捉設計的靈感來源，包含溫暖的咖啡色調、手繪風格的插圖、舒適的室內環境圖片，以及復古風格的字體等，以便傳達項目的審美和感覺，為后續的設計工作提供參考。

二、常用UI設計元素

1、按鈕（Button）

按鈕（Button）是用戶界面中最常見的交互元素之一，用于觸發某種操作。按鈕通常以矩形或圓形的形狀呈現，包含文字或圖標，通過點擊或觸摸激活相應的功能。

一個好的按鈕應該有明確的視覺層次，通過顏色、大小和位置突出其重要性。比如，電商平臺的“結算”按鈕非常重要，設計師通常會使用對比鮮明的顏色和較大的尺寸，使其在頁面中顯眼，方便用戶找到并點擊。此外，按鈕的狀態變化（如懸停、點擊）也應設計得當，要給用戶提供明確的反饋。

2、輸入框

輸入框主要用于用戶輸入和編輯文本信息，還包括填寫表單、搜索內容、輸入密碼等操作。

在設計輸入框時，要注意有清晰的邊界和提示文本，幫助用戶理解需要輸入的內容。比如，在設計一個注冊表單時，輸入框的標簽和占位符文本可以提示出需要輸入的信息，如“用戶名”、“郵箱地址”等。此外，輸入框在獲取焦點時應有視覺變化，如邊框顏色改變，以提示用戶當前的輸入位置。

3、圖標（Icon）

圖標在UI中，是最基礎也是很重要的設計元素，通常具有高度辨識度和簡潔的設計風格，能夠幫助用戶快速理解當前的操作、內容或狀態。

圖標的設計需要考慮清晰可辨和一致性。也就是說，一個圖標應該在不同尺寸下都能讓用戶一眼識別，并且與界面中的其他圖標風格一致，比如圖標的線條、填充和顏色風格等，以保持界面的整體協調。

4、導航欄

導航欄。顧名思義，是用于提供頁面或應用的導航功能。導航欄通常位于界面的頂部、底部或側邊，包含鏈接或按鈕，幫助用戶快速訪問不同的頁面或功能模塊。

在設計導航欄時，一定要充分考慮它的易用性。比如，在設計一個電商網站時，導航欄可能包含“首頁”、“產品分類”、“購物車”等選項。設計師應確保導航欄的布局簡潔，避免選項過多導致的視覺混亂，并使用高對比度的顏色和適當的間距提高可讀性。

5、下拉菜單

下拉菜單（Dropdown Menu）是用戶界面中的常見控件，用于顯示和選擇多個選項中的一個。下拉菜單通常以按鈕或文本框的形式呈現，當用戶點擊時，會展開顯示可供選擇的選項列表。

一個好的下拉菜單應該有明確的觸發元素和清晰的選項列表。設計師應確保選項列表在展開時不會遮擋其他重要內容，并且選項之間有足夠的間距，避免誤操作。同時，下拉菜單在展開和收起時應有流暢的動畫效果，以提升用戶體驗。

6、面包屑

面包屑是一種輔助導航元素，用于顯示用戶在網站或應用中的位置路徑。面包屑導航通常以水平排列的鏈接形式呈現，每個鏈接代表用戶當前位置的上一級頁面，用戶可以點擊這些鏈接快速返回到之前的頁面。

比如，在一個電商網站中，面包屑導航可以顯示“首頁 > 電子產品 > 手機 > 智能手機”，幫助用戶了解他們所在的頁面位置，并方便地返回到上一級目錄。設計師應確保面包屑導航的層級關系清晰，并使用分隔符（如“>”）來區分不同層級，以提升用戶的導航體驗。

7、復選框

復選框用于表示多項選擇中的一個或多個選項，通常以小方框的形式呈現，用戶點擊后會在方框內顯示勾選標記，表示該選項被選擇。

設計復選框時，要確保用戶能夠輕松點擊和識別，并且在用戶勾選或取消勾選時提供明確的視覺反饋，如顏色變化或勾選動畫。

8、卡片

卡片用于將頁面相關的信息和操作整合在一個獨立的視覺容器中，通常包含標題、圖片、文本和操作按鈕，呈現簡潔而有條理的內容塊。

卡片的設計需要考慮內容組織和視覺層次。一個好的卡片應當清晰地展示關鍵信息，并通過合理的布局和間距提高可讀性。比如，在設計一個內容網站時，每篇文章可以用一張卡片來展示，包括標題、摘要、圖片和閱讀按鈕。設計師應確保卡片內部的元素排列有序，并使用陰影或邊框來區分不同的卡片，提升界面的層次感。

9、進度條

進度條用于展示任務或過程的完成進度，通常以水平或垂直的條形圖形式呈現，通過填充顏色或移動條塊來表示進度的百分比。

進度條的設計需要考慮清晰性和及時反饋，要明確顯示當前進度，并在任務進行過程中提供實時更新。比如，在設計一個文件上傳界面時，進度條可以顯示文件上傳的完成百分比，幫助用戶了解任務的進展情況。

10、模態框

模態框是用戶界面中的彈出窗口，用于顯示重要信息或要求用戶進行操作。模態框通常覆蓋當前頁面的內容，用戶必須與其交互才能返回到主界面。

一個好的模態框應引起用戶的注意，同時又不干擾整體用戶體驗。比如，在設計一個確認刪除操作的模態框時，模態框應包含明確的標題、描述信息和操作按鈕（如“確認刪除”和“取消”），幫助用戶做出決定。設計師應確保模態框的大小適中，避免過多內容造成視覺負擔，并使用半透明背景來突出模態框的重要性。

11、工具提示（Tooltip）

工具提示（Tooltip）算是一個小型彈窗，當用戶懸?；螯c擊某個元素時提供額外的說明或幫助。工具提示通常顯示在目標元素的附近，包含簡短的文本說明。工具提示的設計最重要的是簡潔、易讀，以便用戶快速獲取所需信息。

12、CTA（Call to Action，用戶行為召喚）

用戶行為召喚是用于引導用戶執行特定操作，如購買、注冊、下載等，通常以按鈕或鏈接的形式呈現，具有明確的指示性文字和突出的視覺設計。

在設計CTA時，一定要使用醒目的顏色，并注意大小和位置，確保用戶能夠輕松找到并點擊。比如，在設計一個產品銷售頁面時，“立即購買”或“添加到購物車”的CTA按鈕應放置在顯眼的位置，使用對比強烈的顏色、清晰直接的文本吸引用戶注意并鼓勵他們采取行動。

三、UI設計流程和方法

1、可訪問性（Accessibility）

可訪問性是指在設計過程中考慮所有用戶的需求，比如障礙人士的需求等，讓各種用戶更容易瀏覽和使用（電腦、手機、網頁、UI等等），使得有障礙的用戶更便捷地感知、理解、互動。

可訪問性設計的方法包括給圖像添加替代文本、使用高對比度顏色、確保鍵盤導航的可用性和為屏幕閱讀器優化內容等。比如，在設計一個網站時，設計師應確保所有按鈕和鏈接有明確的標簽，使用足夠大的字體，提供文本縮放功能，并避免依賴僅通過顏色傳達信息。通過這些措施，設計師可以創建對用戶更加友好的產品，提高整體用戶體驗和滿意度。

2、響應式設計（Responsive）

響應式設計（Responsive）是指網頁設計的一種技術，使得網頁能夠根據不同設備的屏幕尺寸和分辨率自適應地調整布局和內容，以達到最佳的用戶體驗。這種技術可以讓網頁在桌面電腦、平板電腦、手機等不同設備上都能夠呈現出最佳的效果，而不需要為每個設備單獨設計不同的網頁。

比如，在設計一個博客網站時，設計師可以使用響應式網格系統，當用戶在桌面電腦上瀏覽時，頁面顯示多欄布局，而在手機上瀏覽時，頁面自動調整為單欄布局，便于閱讀和導航。

3、自適應設計（Adaptive）

自適應（Adaptive）是一種設計方法，通過創建多個特定的布局版本，來適應不同設備和屏幕尺寸，從而提供優化的用戶體驗。與響應式設計不同，自適應設計根據設備類型加載預定義的布局，而不是通過調整同一個布局來適應不同屏幕。

4、A/B 測試

A/B 測試是一種比較兩種或多種設計版本效果的方法，用于確定哪種設計更能滿足用戶需求和實現預期目標。在A/B測試中，用戶隨機分配到不同的設計版本中，通過分析用戶行為和反饋，評估各版本的性能差異。

A/B測試的實施通常涉及創建多個設計變體（如不同的按鈕顏色、標題文案等），然后對用戶進行分組。比如，在一個電商網站中，設計師可以測試兩種不同的結算頁面設計，觀察哪一種能提高用戶的完成購買率。通過這種測試方法，設計師可以基于實際數據做出優化決策，提高設計效果和用戶體驗。

5、5秒法則（Five-Second Rule）

5秒法則（Five-Second Rule）是UI設計中的一個原則，指用戶在訪問頁面的前5秒內應能夠理解頁面的主要內容和功能，并決定是否繼續瀏覽。該法則強調界面設計的清晰性和信息傳達的效率，幫助設計師創建簡潔而直觀的用戶體驗。

實現5秒法則的方法包括優化頁面的視覺層次、突出關鍵內容和簡化導航。比如，在設計一個登陸頁面時，設計師應確保品牌標識、主要標題和用戶行為召喚（CTA）在頁面上明顯且易于識別。同時，避免過多的干擾元素，使用戶能夠快速抓住頁面的核心信息。通過遵循5秒法則，設計師可以提高頁面的吸引力和用戶的留存率。

6、自動布局

通過定義元素之間的關系和約束，自動調整界面布局以適應不同屏幕尺寸和設備，這種設計方法就叫自動布局。自動布局可以減少手動調整布局的工作量，創建更靈活和適應性強的界面，提高用戶體驗和設計效率。

7、切圖

切圖是UI設計交付開發過程中的一個步驟，指將設計師創建的高保真原型中的圖像和圖形元素，切割成獨立的資源文件，以便在網頁或應用中使用。切圖的目的是確保設計元素在實際產品中顯示正確，并優化加載性能。

通過精確切圖，開發人員可以確保在各種設備上都能準確顯示設計元素，并且加載速度快、占用資源少。

8、可用性測試

可用性測試是UI設計過程中的一項關鍵方法，通過觀察真實用戶與產品的交互，評估界面的易用性和用戶體驗。可用性測試的目標是發現設計中的問題和改進機會，從而優化產品的功能和用戶滿意度。

實施可用性測試的方法包括邀請目標用戶執行特定任務，并記錄他們的操作過程和反饋。比如，在設計一個銀行應用時，設計師可以安排用戶完成任務，如“轉賬”或“查看賬戶余額”，并觀察用戶是否能順利完成任務，以及遇到的困難和困惑。通過這些觀察，設計師可以識別出界面中的問題，并根據用戶的實際使用情況進行改進。

9、視覺一致性（Visual Consistency）

視覺一致性（Visual Consistency）是UI設計中的一個重要原則，指在整個產品中保持統一的視覺風格和設計元素。這包括顏色、字體、圖標、按鈕樣式和間距等。視覺一致性可以增強用戶體驗，使界面看起來協調、專業，并且易于用戶理解和操作。

實現視覺一致性的方法包括制定并遵循設計系統或風格指南。比如，在設計一個企業級應用時，設計師應確保所有頁面使用一致的配色方案、相同的字體和統一的按鈕樣式。通過保持視覺一致性，設計師可以增強品牌識別度，提高產品的可用性和用戶滿意度。

10、設計走查（Design Review）

設計走查指設計師與團隊成員共同審查設計方案，識別潛在問題并提出改進建議，目的是確保設計的質量和一致性，發現并解決設計中的問題，提高最終產品的用戶體驗。

進行設計走查的方法包括定期安排團隊會議，逐步審查每個設計元素和界面布局等。比如，在開發一個新的移動應用時，設計師可以與產品經理、開發人員和用戶體驗專家一起審查每個頁面的設計，討論顏色、排版、交互方式等細節。通過這種協作，團隊能夠集思廣益，發現問題并進行優化，確保設計方案在開發階段之前達到最佳狀態。

以上就是30個UI設計師應該掌握的專業術語，希望這些內容能幫助你更好地理解并應用這些概念，在成為優秀設計師的路上更進一步！