UI設計師面試問題——30+問題與專家回答
世界經濟論壇將UX/UI設計師列為全球增長最快的職業之一，預計到2030年將增長45% [1]。UI設計師的平均年薪為85,550美元，大型科技公司的資深職位薪資範圍為105,000至196,000美元 [2]。2026年的招聘經理正在尋找能展示策略思維、跨部門協作和可量化商業影響的設計師——不僅僅是視覺上的精緻 [3]。本指南涵蓋你將面臨的行為面試、技術面試和情境面試問題，以及證明你能設計系統而非僅僅設計螢幕的回答。
關鍵要點
- UI設計師的面試總是包含作品集演示——準備討論3-5個專案，包含具體的設計決策、權衡和可量化的成果 [3]。
- 無障礙設計不再是錦上添花，而是2026年雇主積極尋求的關鍵技能 [4]。
- 預期會有關於設計系統、元件庫以及如何在大規模下保持一致性的問題——單個螢幕設計只是基本功。
- AI驅動的設計工具及其與工作流程的整合在面試中被越來越多地討論 [1]。
行為面試問題
1. 展示作品集中的一個專案，解釋你做出的設計決策。
專家回答： 「這是一個月活240萬使用者的電商平台結帳流程重新設計。現有結帳的購物車放棄率為68%，分析顯示最大的流失發生在配送地址步驟——一個包含14個欄位的單頁表單。我的假設是表單令人感到壓迫。我將其重新設計為帶有漸進式揭露的多步驟流程：地址、配送方式和付款各自有獨立的步驟並配有可見的進度指示器。透過實施Google Places自動完成功能將表單欄位從14個減少到9個，並將可選欄位（公司名稱、公寓號碼）隱藏在「新增詳情」切換按鈕後面。我與8位使用者進行了有引導的可用性測試會議，迭代了進度指示器的設計（使用者更偏好帶編號的步驟器而非簡單的進度條），並發布了最終設計。購物車放棄率在30天內從68%降至51%——25%的相對改善，相當於每季約340,000美元的營收回收。核心設計原則是減少每個步驟的認知負荷。」
2. 講述一次你收到設計批評回饋以及如何回應的經歷。
專家回答： 「我設計了一個讓我引以為傲的內部分析儀表板——簡潔的排版、良好組織的資料視覺化、深思熟慮的色彩運用。在設計評審中，一位產品經理說：「這很漂亮，但我完全不知道看到它時應該採取什麼行動。洞察在哪裡？」她說得對。我為視覺吸引力和資料展示做了最佳化，但沒有為決策做最佳化。我回到原點，採訪了五位利害關係人了解他們使用這些資料做什麼決策，圍繞三個「決策區域」重新設計了儀表板——每個區域展示一個指標、其趨勢和一個具體的行動建議（如：「本週流失風險增加了12%——審查風險最高的10個帳戶」）。重新設計在視覺上不那麼戲劇性，但顯著更實用。這次回饋教會了我，UI設計不是讓東西好看——而是讓東西對使用者有用。」
3. 描述一個你必須在商業或工程限制面前為使用者辯護的情境。
專家回答： 「產品團隊想在結帳頁面新增一個推廣橫幅來交叉銷售訂閱升級。我的可用性資料顯示，結帳流程中的任何中斷都會增加放棄率——我們曾測量到之前的結帳修改導致了3%的放棄率增加。我展示了資料：「根據我們的結帳分析，在此步驟新增摩擦將因放棄率增加而危及每月85,000美元的營收。這裡有一個替代方案：在訂單確認頁面展示訂閱優惠，此時使用者已完成購買並處於接受狀態。」我製作了兩種放置的原型並執行了A/B測試。確認頁面的放置產生了比結帳頁面放置多2.8倍的訂閱註冊，且對結帳完成率零影響。辯護不是說「不」——而是找到同時服務使用者和商業的解決方案。」
4. 舉一個與工程師合作實施設計的範例。
專家回答： 「我在為內容管理儀表板設計基於卡片的佈局。初始設計使用了客製化陰影、複雜的懸停動畫和非標準的圓角。當我與前端工程師審查設計時，她指出客製化動畫需要大量JavaScript，無法僅用CSS實現，這會影響低階裝置上的效能。我們一起進行了簡化：使用CSS原生的盒子陰影和過渡效果，將圓角標準化以匹配現有的設計系統令牌，並用GPU加速的簡單淡入效果替換了複雜的展開動畫。最終實現在視覺上與我的原始設計95%一致，但載入速度快了40%。這次經歷教會我帶著實施意識進行設計——理解CSS的能力不是限制創造力，而是引導創造力。」
5. 你如何跟上UI設計的趨勢和工具？
專家回答： 「我採用結構化的方法。趨勢方面：每週查看Awwwards、Dribbble和Mobbin獲取模式靈感，閱讀Smashing Magazine和NN/g的文章獲取基於證據的設計見解，每年參加Config（Figma的會議）和Into Design Systems。工具方面：保持Figma（我的主要工具）的熟練度，同時具備Framer原型設計、Rive互動動畫、Storybook設計到程式碼交接的實際知識。我也關注新興的AI設計工具——嘗試了Galileo AI進行佈局生成，使用Figma的AI功能生成變體。但是，我謹慎區分趨勢（短暫的）和原則（持久的）。我只在趨勢服務使用者時才採用——暗色模式是正當的無障礙和可用性改進；玻璃擬態是一種經常損害可讀性的審美選擇。」
6. 講述一次你為與自己截然不同的使用者群體設計的經歷。
專家回答： 「我為高齡使用者（65歲以上）設計了一款服藥追蹤應用程式。我的初始假設完全錯誤：我以為大字體、高對比度和最少的功能就夠了。透過使用者研究——12次訪談和6次在使用者家中的情境調查——我發現主要挑戰不是視力而是運動精確度：使用者在小觸控目標、緊密排列的按鈕和滑動手勢方面有困難。我用最小觸控目標48px（超過Apple的44px最小值）、互動元素之間充足的間距重新設計了介面，並用明確的按鈕替換了所有滑動手勢。我還發現使用者想在同一個應用程式中追蹤的不僅是藥物，還有生命徵象（血壓、血糖）——這是我們團隊未曾考慮的。在與白內障使用者測試後修改了顏色選擇：將對比度比率提高到7:1（超過WCAG AAA），避免了對老化眼睛困難的藍黃色組合。使用者測試顯示任務完成率在重新設計後從62%提高到94%。」
技術面試問題
1. 什麼是設計系統？你如何建構和維護一個？
專家回答： 「設計系統是一套全面的可重用元件、設計令牌、模式和指南，能夠實現大規模的一致、高效設計和開發。我分層建構。基礎：設計令牌（顏色、排版、間距、高度、動效）定義為平台無關的值，可被設計工具和程式碼同時使用。元件：原子設計層級——原子（按鈕、輸入、圖示）、分子（搜尋列、表單群組）、有機體（導覽列頭部、卡片格狀排列）、範本和頁面。每個元件都有文件化的狀態（預設、懸停、啟用、停用、聚焦、錯誤）、尺寸（S、M、L）和變體。文件：每個元件都有使用指南（何時使用、何時不使用）、無障礙要求（鍵盤行為、ARIA屬性、對比度比率）和程式碼範例。治理：建立貢獻模型——任何設計師都可以提議新增，但變更需經過審查流程（設計審查+工程審查）以維護品質和防止膨脹。工具：使用帶有元件、變體和自動佈局的Figma，與程式碼端基於Storybook的元件庫同步。設計系統有版本控制，每次發布都有變更日誌 [5]。」
2. 你如何處理跨中斷點的響應式設計？
專家回答： 「我採用行動優先設計，先定義最小視窗的佈局，然後逐步為更大螢幕增強。這迫使早期做出層級決策——如果內容在320px下不工作，增加螢幕寬度不會修復根本的層級問題。我使用三個主要中斷點：行動端（320-767px）、平板（768-1023px）和桌面端（1024px以上），但我不將中斷點視為嚴格的目標——我在內容斷裂的地方新增中斷點，而不是在任意的裝置寬度。主要響應式模式：重排（欄位在行動端垂直堆疊）、揭示（在大螢幕上顯示行動端隱藏的額外內容）和變形（導覽從水平摺疊為漢堡選單）。我使用Figma的自動佈局和約束進行設計，這反映了CSS flexbox和grid的工作方式。對於複雜佈局，我為每個中斷點建立單獨的框架；對於簡單元件，使用帶有約束的響應式元件自動處理大小調整。我總是在不規則寬度（如900px、1100px）測試設計，以捕獲只在精確中斷點邊界處工作的佈局。」
3. 解釋你如何為無障礙設計以及遵循的指南。
專家回答： 「我遵循WCAG 2.1 AA作為最低標準，關鍵使用者流程採用AAA。我的無障礙實踐涵蓋四個類別 [6]。視覺：普通文字最低4.5:1對比度比率，大文字3:1，不僅透過顏色傳達資訊（新增圖示、圖案或文字標籤），支援200%文字縮放而不破壞佈局。運動：最小44x44px觸控目標（推薦48x48px），互動元素之間足夠的間距，無手勢無按鈕替代，帶有可見焦點指示器的鍵盤可導覽介面。認知：清晰一致的導覽，錯誤預防（破壞性操作的確認對話框），簡單語言標籤，解釋如何修復錯誤的有意義表單驗證訊息。輔助技術：適當的標題層級（H1-H6），非文字互動元素的ARIA標籤，客製化元件的role屬性，所有有意義圖片的alt文字。我在設計過程中用VoiceOver（macOS）和螢幕閱讀器擴充功能進行測試，而非事後補救，並為開發人員在設計上標註無障礙規格。」
4. 你對UI中微互動和動效設計的方法是什麼？
專家回答： 「微互動服務四個目的：提供回饋（按鈕按下確認）、指示狀態（載入旋轉器、進度指示器）、引導注意力（指向下一步的動畫箭頭）和增添愉悅感（任務完成時的慶祝動畫） [4]。我的動效設計原則：有目的（每個動畫必須服務於功能目標——裝飾性動畫是噪音）、快速（大多數過渡應在150-300ms；超過500ms感覺遲鈍）、一致（類似的操作應在整個產品中產生類似的動畫）、可存取（為前庭功能障礙使用者尊重prefers-reduced-motion）。實施方面，我使用Figma的原型功能進行流程展示，使用Rive或Lottie製作需要生產就緒的複雜動畫。我明確指定緩動曲線（進入用ease-out，退出用ease-in，過渡用ease-in-out），而不是將時間留給開發者解讀。每個微互動規格都包含持續時間、緩動曲線和前後狀態。」
5. 你如何處理向開發團隊的設計交接？
專家回答： 「有效的交接最小化歧義並減少來回溝通。我的交接流程：使用Figma的開發者模式及自動生成的CSS/iOS/Android屬性獲取精確值（間距、顏色、排版）。標註靜態設計中不可見的邊緣情況：空狀態、錯誤狀態、載入狀態、最大內容長度行為（截斷vs換行）、中斷點處的響應式行為。建立交接文件指定：元件行為（懸停、聚焦、啟用、停用時的行為）、動畫規格（持續時間、緩動、觸發器）和無障礙要求（ARIA屬性、鍵盤互動模式、螢幕閱讀器播報）。與實施工程師進行30分鐘的交接會議，講解設計、回答問題並識別我可能遺漏的技術限制。實施期間在預發布版本上做視覺QA，透過標註截圖而非模糊描述提供回饋。目標是零意外的實施。」
6. UI設計和UX設計有什麼區別？
專家回答： 「UX設計定義『做什麼』和『為什麼』——解決什麼問題、使用者旅程是什麼、什麼資訊架構支援使用者目標。UX的產出包括研究結果、使用者流程、線框圖和資訊架構圖。UI設計定義『看起來和感覺如何』——視覺語言、元件設計、互動模式和賦予UX策略生命的動效。UI的產出包括高擬真原型、設計系統、原型和生產就緒資源。實際上，角色有很大重疊：不理解使用者需求的UI設計師會創造美麗但不可用的介面；無法執行視覺設計的UX設計師會產出無法轉化為引人注目產品的線框圖。在小公司，一個人通常兼顧兩者。在大公司，角色是專業化的。我主要認同自己是UI設計師，但我的流程總是從理解使用者問題開始，然後才打開Figma [3]。」
7. 你如何使用資料來指導UI設計決策？
專家回答： 「我在設計過程的三個階段使用資料。設計前：分析資料告訴我使用者在哪裡遇到困難——特定頁面的高跳出率、特定流程的低轉換率、顯示使用者點擊位置（或不點擊位置）的熱力圖。這識別出需要重新設計的內容。設計中：使用A/B測試驗證設計選擇。範例來說，在重新設計定價頁面時，我測試了三種佈局並測量了轉換率、頁面停留時間和FAQ點擊率。獲勝的設計將轉換提高了12%——這是僅靠設計直覺無法預測的資料。上線後：監控相同指標以驗證設計是否達到目標，並識別迭代機會。我也使用定性資料——可用性測試錄影、工作階段回放（FullStory、Hotjar）和使用者回饋——來理解數字背後的「為什麼」。40%的跳出率告訴我有問題；觀看工作階段回放告訴我表單的錯誤訊息出現在摺疊下方，使用者看不到它們。」
情境面試問題
1. 一位利害關係人想在已經複雜的介面上新增5個新功能。你如何處理？
專家回答： 「我會將對話從「如何新增這些功能？」重新建構為「這些功能解決什麼使用者問題？」一些請求是偽裝成需求的解決方案。我會要求每位利害關係人闡明其功能解決的使用者問題以及衡量影響的成功指標。這通常會揭示2-3個功能解決的是同一個根本問題，可以合併為一個精心設計的解決方案。對於保留下來的功能，我會建議漸進式揭露：預設顯示核心功能，透過可發現但不干擾的UI模式（可展開區塊、上下文選單、設定面板）呈現進階功能。我會直觀地展示複雜性成本：將當前介面與新增了所有五個功能的原型並排展示，讓利害關係人直接看到認知負荷的增加。通常，看到結果比描述它更有說服力。」
2. 你正在設計一個功能，在可用性測試中發現使用者不理解你的解決方案。截止日期是一週後。你怎麼辦？
專家回答： 「首先，我會具體分析可用性測試結果：設計的哪個方面導致了混亂？是標籤、流程、視覺層級還是心智模型？修復取決於根本原因。如果是標籤：快速修復——更新文案並與2-3個使用者非正式地重新測試。如果是流程：簡化到解決核心問題的最小可行流程，將複雜版本推遲到快速跟進發布。我會向產品經理傳達：「測試發現了可用性問題。這是在截止日期內解決核心使用案例的簡化版本，並計畫根據上線後的資料進行迭代。」發布使用者能理解的簡單設計比發布使用者無法導覽的複雜設計要好。我絕不會為了趕截止日期而忽視可用性問題——上線後的返工成本總是高於上線前的延遲成本。」
3. 工程團隊說你的設計在現有架構中技術上無法實現。你如何回應？
專家回答： 「我會傾聽以理解具體的限制——是不可能的，還是昂貴/耗時的？兩者有很大區別。如果真的在架構上不可能（範例來說設計需要後端不支援的即時資料），我會與工程師合作了解在當前架構下什麼是可能的，並在這些約束內重新設計。我會問：「如果不是即時的，我們顯示每5分鐘更新一次的資料怎麼樣？這可行嗎？」通常，一個小的設計調整可以使技術上不可能的功能變得可行。如果昂貴但可能，我會量化權衡：「這個動畫增加2個衝刺的工作量。替代的靜態過渡節省2個衝刺但會將使用者參與度降低約8%。這個權衡可以接受嗎？」我會將選項連同工程評估和我的設計理據一起提交給產品經理，共同決定。」
4. 你是一家一直在沒有設計情況下建構產品的新創公司的第一位UI設計師。你如何建立設計實踐？
專家回答： 「我會抵制立即重新設計一切的誘惑。第1個月：稽核現有產品，識別影響最大的可用性問題（斷裂的流程、不一致的模式、無障礙違規），修復2-3個速贏專案以建立信任。開始一個基本的設計系統——即使只是一個記錄了現有顏色、排版和按鈕樣式的Figma檔案。第2-3個月：為新功能工作建立設計流程——使用者故事評審、設計探索、與工程團隊的評審和交接。將自己融入工程衝刺週期，使設計領先開發一個衝刺。第3-6個月：用文件化的元件、使用指南和貢獻流程正式化設計系統。引入可用性測試（即使是非正式的5人游擊測試）以展示使用者回饋的價值。關鍵是在嘗試改變流程之前，透過交付的成果展示價值。一直在沒有設計情況下發布產品的工程師需要看到設計使產品更好，而不僅僅是更漂亮。」
5. 你需要為現有產品設計暗色模式。你的方法是什麼？
專家回答： 「暗色模式不是簡單地反轉顏色——而是顏色系統的全面重新設計。首先，定義暗色調色盤：背景表面使用深灰色（不是純黑#000000，因為會產生強烈對比——按Material Design指南從#121212開始），文字使用灰白色（出於同樣原因使用#E0E0E0而非#FFFFFF），強調色調整以在暗背景上保持足夠對比度（在亮背景上有效的高飽和度顏色通常需要在暗背景上降低飽和度）。其次，處理層級：亮色模式中層級透過陰影傳達；暗色模式中陰影在暗背景上不可見，因此層級透過更亮的表面色調傳達。第三，在暗色模式下測試設計系統中的每個元件——表單、按鈕、卡片、對話框、警告——檢查對比度比率是否符合WCAG標準。第四，設計切換機制並將主題實現為可以在亮暗值之間程式化切換的設計令牌。第五，將使用者的系統偏好（prefers-color-scheme媒體查詢）作為預設值，提供手動覆蓋選項。」
面試官應問的問題
-
「設計團隊的結構是怎樣的——集中式、嵌入產品團隊還是混合模式？」 揭示你將如何協作以及日常合作夥伴是誰。
-
「公司有現有的設計系統嗎？誰來維護它？」 確定你是從零建構、貢獻現有系統還是在沒有系統的情況下工作。
-
「團隊如何驗證設計決策——有使用者研究實踐嗎，還是設計依賴於直覺和利害關係人的回饋？」 表明資料驅動設計是否是文化的一部分。
-
「設計到工程的交接流程是什麼？」 揭示營運成熟度以及你是否會花大量時間在實施支援上。
-
「設計成功如何衡量——有與設計工作掛鉤的指標嗎？」 顯示設計是否具有可衡量的影響還是被視為主觀手藝。
-
「團隊目前面臨的最大設計挑戰是什麼？」 提供關於你將解決的問題及其複雜性的洞察。
-
「UI設計師的職業發展在這裡是什麼樣的——走個人貢獻者路線、管理路線還是專業化路線？」 判斷與你的職業軌跡是否一致。
面試形式和預期
UI設計師面試通常包括3-4個階段 [3]。第一階段是作品集審查（45-60分鐘），與招聘經理或設計主管一起，你展示3-5個專案，討論過程、決策和結果。第二階段是設計練習：帶回家的挑戰（3-5天內重新設計特定螢幕或流程）或白板練習（60分鐘內為給定問題設計解決方案）。第三階段是與產品經理和/或工程師的跨職能面試，評估你的協作技能和技術溝通。一些公司會增加第四階段：向更廣泛的設計團隊進行簡報。準備好將作品集載入在筆記型電腦上（不要依賴WiFi），除了最終設計外還準備過程產物（線框圖、使用者流程、研究發現）以及設計工作影響的具體指標。
準備方法
- 策略性地策展你的作品集。 展示3-5個帶有完整案例研究的專案：問題、過程、迭代、最終設計和可衡量的成果。品質重於數量 [3]。
- 準備過程產物。 線框圖、使用者流程、競品稽核和可用性測試發現展示了超越視覺設計的深度。
- 練習設計練習。 計時自己為常見提示（重新設計設定頁面、設計通知系統）設計解決方案，時間為45-60分鐘。
- 研究公司的產品。 下載應用程式，使用網站，準備對其當前UI的具體建設性觀察。
- 複習設計系統基礎。 令牌、元件、變體、自動佈局和響應式設計模式是預期掌握的知識 [5]。
- 溫習無障礙知識。 WCAG 2.1 AA要求、對比度比率、鍵盤導覽和ARIA模式越來越多地被考查 [6]。
常見面試錯誤
- 展示最終設計而不解釋過程。 面試官想看到你如何思考，不僅僅是你產出什麼。沒有研究、線框圖或理由的漂亮螢幕暗示表面化的設計實踐 [3]。
- 不提及無障礙設計。 在2026年，UI設計面試中不討論無障礙是一個重大缺失——暗示你可能不考慮所有使用者 [6]。
- 在不提及協作的情況下孤立設計。 UI設計是跨職能的。不描述你如何與研究人員、工程師和產品經理合作表明你不能有效協作。
- 關注視覺趨勢而非設計原則。 提及玻璃擬態和新粗獷主義而不討論層級、一致性和可用性暗示追隨趨勢而非基於原則的設計。
- 沒有設計影響的指標。 「我重新設計了儀表板」不如「我重新設計了儀表板，將平均任務完成時間從45秒減少到18秒」。盡可能量化影響。
- 將設計練習視為最終成品。 設計練習評估你的思維過程和傳達決策的能力——將你的工作作為帶有解釋理由的起點展示，而非精心打磨的最終產品。
- 不詢問設計流程。 關於研究實踐、設計系統成熟度和設計決策如何驗證的問題表明你關心在強大的設計文化中工作，而不僅僅是任何設計角色。
關鍵要點
- UI設計師面試評估的是過程、協作和可衡量的影響——不僅僅是視覺技能。
- 準備包含具體設計決策、使用者研究發現和量化成果的作品集案例研究。
- 無障礙設計、設計系統和響應式設計是預期能力，而非差異化因素。
- 就設計文化、工具和衡量實踐提出有見地的問題展示了專業成熟度。
準備好確保你的履歷能帶你進入面試階段了嗎？試試Resume Geni的免費ATS評分檢查器，在申請前最佳化你的UI設計師履歷。
常見問題
我的UI設計作品集應該包含什麼？
包含3-5個展示完整設計過程的案例研究：問題定義、研究、線框圖、設計迭代、最終UI和可衡量的成果。每個案例研究應解釋你的角色、約束條件以及你做出的設計決策和原因。至少包含一個有設計系統貢獻的專案和一個考慮了無障礙的專案。預期有一個在客製化網域上的整潔、組織良好的作品集網站 [3]。
2026年UI設計需要了解什麼工具？
Figma是UI設計、原型製作和設計系統的業界標準。輔助工具包括用於進階原型製作的Framer、用於動畫的Rive或Lottie、用於工作坊的FigJam或Miro、用於設計到程式碼文件化的Storybook。熟悉CSS基礎（flexbox、grid、媒體查詢）和基本的前端概念有助於設計可實現的介面 [5]。
作為UI設計師應該期望什麼薪資？
UI設計師的全國平均年薪為85,550美元，根據經驗、地點和公司從54,000美元到135,000美元不等 [2]。大型科技公司（Amazon、Google、Apple、Microsoft）的資深職位薪資從105,000美元到196,000美元。紐約、舊金山和西雅圖的薪資比全國平均高20-30%。自由接案UI設計師根據專業領域收取每小時75-200美元。
程式設計能力對UI設計師有多重要？
程式設計不是必需的但越來越受重視。理解HTML/CSS基礎有助於設計可實現的介面、與工程師更有效地溝通、以及為設計系統文件貢獻程式碼範例。一些公司看重能用程式碼製作原型的設計師（HTML/CSS/JS、React）。不期望完全的程式設計能力，但CSS素養是競爭優勢。
UI設計師面試與UX設計師面試有什麼不同？
UI設計師面試強調視覺設計技能、設計系統知識和技術執行（元件設計、響應式佈局、互動規格）。UX設計師面試強調研究方法論、資訊架構、使用者流程和策略思維。實際上，許多公司在「產品設計師」面試中混合兩者。無論頭銜如何，準備視覺和策略方面的問題 [3]。
我應該在作品集中包含非委託的重新設計嗎？
非委託的重新設計對入門級作品集是可以接受的，但需要謹慎處理。永遠不要表現得好像你了解公司的內部限制。將它們定義為練習：「基於公開可用的資訊，我識別了這些可用性問題並探索了這些解決方案。」包含你的研究方法論和推理。對於經驗豐富的設計師，實際專案案例研究總是比推測性的重新設計更有力。
UI設計師和視覺設計師有什麼區別？
UI設計師專注於互動式數位介面——應用程式、網站、軟體。他們以對平台慣例（iOS HIG、Material Design）的深入了解來設計元件、互動、響應式佈局和設計系統。視覺設計師具有更廣泛的範圍，可能還包括品牌識別、插畫、行銷素材和印刷設計。UI設計是更廣泛的視覺設計學科中的一個專業方向。
