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

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

一、基礎(chǔ)名詞

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

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

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

常用的UI工具有：

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

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

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

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

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

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

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

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

4、設(shè)計系統(tǒng)（Design System）

設(shè)計系統(tǒng)是一套標(biāo)準(zhǔn)化的設(shè)計規(guī)范和組件庫，用于指導(dǎo)和統(tǒng)一產(chǎn)品的設(shè)計和開發(fā)。

設(shè)計系統(tǒng)包括顏色、字體、間距、圖標(biāo)、按鈕等視覺元素的定義，以及這些元素在不同情況下的使用規(guī)范。建立設(shè)計系統(tǒng)是確保產(chǎn)品的一致性和可擴展性，提高設(shè)計和開發(fā)效率。

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

5、柵格系統(tǒng)（Grid System）

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

6、像素（PX）

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

7、視覺層次（Visual Hierarchy）

視覺層次是通過將界面元素進(jìn)行設(shè)計上的區(qū)分，引導(dǎo)用戶的注意力，使用戶能夠優(yōu)先關(guān)注最重要的信息。視覺層次不僅僅包含文字，還包含圖片，視頻按鈕以及文字以外的所有視覺元素。

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

8、情緒板（Mood Board）

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

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

二、常用UI設(shè)計元素

1、按鈕（Button）

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

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

2、輸入框

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

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

3、圖標(biāo)（Icon）

圖標(biāo)在UI中，是最基礎(chǔ)也是很重要的設(shè)計元素，通常具有高度辨識度和簡潔的設(shè)計風(fēng)格，能夠幫助用戶快速理解當(dāng)前的操作、內(nèi)容或狀態(tài)。

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

4、導(dǎo)航欄

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

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

5、下拉菜單

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

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

6、面包屑

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

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

7、復(fù)選框

復(fù)選框用于表示多項選擇中的一個或多個選項，通常以小方框的形式呈現(xiàn)，用戶點擊后會在方框內(nèi)顯示勾選標(biāo)記，表示該選項被選擇。

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

8、卡片

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

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

9、進(jìn)度條

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

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

10、模態(tài)框

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

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

11、工具提示（Tooltip）

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

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

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

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

三、UI設(shè)計流程和方法

1、可訪問性（Accessibility）

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

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

2、響應(yīng)式設(shè)計（Responsive）

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

比如，在設(shè)計一個博客網(wǎng)站時，設(shè)計師可以使用響應(yīng)式網(wǎng)格系統(tǒng)，當(dāng)用戶在桌面電腦上瀏覽時，頁面顯示多欄布局，而在手機上瀏覽時，頁面自動調(diào)整為單欄布局，便于閱讀和導(dǎo)航。

3、自適應(yīng)設(shè)計（Adaptive）

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

4、A/B 測試

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

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

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

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

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

6、自動布局

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

7、切圖

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

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

8、可用性測試

可用性測試是UI設(shè)計過程中的一項關(guān)鍵方法，通過觀察真實用戶與產(chǎn)品的交互，評估界面的易用性和用戶體驗?？捎眯詼y試的目標(biāo)是發(fā)現(xiàn)設(shè)計中的問題和改進(jìn)機會，從而優(yōu)化產(chǎn)品的功能和用戶滿意度。

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

9、視覺一致性（Visual Consistency）

視覺一致性（Visual Consistency）是UI設(shè)計中的一個重要原則，指在整個產(chǎn)品中保持統(tǒng)一的視覺風(fēng)格和設(shè)計元素。這包括顏色、字體、圖標(biāo)、按鈕樣式和間距等。視覺一致性可以增強用戶體驗，使界面看起來協(xié)調(diào)、專業(yè)，并且易于用戶理解和操作。

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

10、設(shè)計走查（Design Review）

設(shè)計走查指設(shè)計師與團(tuán)隊成員共同審查設(shè)計方案，識別潛在問題并提出改進(jìn)建議，目的是確保設(shè)計的質(zhì)量和一致性，發(fā)現(xiàn)并解決設(shè)計中的問題，提高最終產(chǎn)品的用戶體驗。

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

以上就是30個UI設(shè)計師應(yīng)該掌握的專業(yè)術(shù)語，希望這些內(nèi)容能幫助你更好地理解并應(yīng)用這些概念，在成為優(yōu)秀設(shè)計師的路上更進(jìn)一步！