2023年UI設(shè)計(jì)期末測(cè)試題及答案考試時(shí)間：120分鐘滿分：100分一、單項(xiàng)選擇題（每題2分，共30分）下列顏色模式中，專為電子屏幕顯示設(shè)計(jì)的是（）A.CMYKB.RGBC.LABD.HSB移動(dòng)UI設(shè)計(jì)中，常用于保證拉伸后不失真的特殊切圖格式是（）A..pngB..jpgC..9.pngD..svg下列不屬于UI設(shè)計(jì)基本原則的是（）A.復(fù)雜性原則B.一致性原則C.反饋性原則D.可訪問性原則網(wǎng)頁(yè)設(shè)計(jì)中主流的柵格系統(tǒng)列數(shù)是（）A.8列B.10列C.12列D.16列下列工具中以云端協(xié)作功能為核心優(yōu)勢(shì)的UI設(shè)計(jì)軟件是（）A.SketchB.FigmaC.AdobeXDD.Photoshop圖標(biāo)設(shè)計(jì)中，兼具線條的簡(jiǎn)潔性與面的層次感的風(fēng)格是（）A.線性風(fēng)格B.面性風(fēng)格C.線面結(jié)合風(fēng)格D.3D風(fēng)格移動(dòng)端界面中，圖片與屏幕邊距保留一定像素的主要作用是（）A.減少設(shè)計(jì)工作量B.引導(dǎo)用戶豎向閱讀C.節(jié)省屏幕空間D.降低開發(fā)難度下列屬于交互設(shè)計(jì)中微交互范疇的是（）A.頁(yè)面跳轉(zhuǎn)邏輯B.按鈕點(diǎn)擊狀態(tài)變化C.導(dǎo)航欄布局D.色彩搭配方案設(shè)計(jì)稿標(biāo)注中，文字字號(hào)的標(biāo)準(zhǔn)單位是（）A.毫米B.厘米C.像素D.英寸響應(yīng)式設(shè)計(jì)中，頁(yè)面元素寬度適配的常見方式不包括（）A.等分適配B.百分比伸縮適配C.固定一邊適配D.垂直適配UI與UX的核心區(qū)別在于（）A.UI關(guān)注視覺呈現(xiàn)，UX關(guān)注用戶體驗(yàn)流程B.UI關(guān)注功能實(shí)現(xiàn)，UX關(guān)注視覺美感C.UI面向移動(dòng)端，UX面向網(wǎng)頁(yè)端D.UI需要代碼能力，UX不需要下列關(guān)于標(biāo)注的說法正確的是（）A.標(biāo)注對(duì)開發(fā)人員無(wú)實(shí)際作用B.復(fù)雜設(shè)計(jì)稿可拆分標(biāo)注頁(yè)面C.多行文本無(wú)需標(biāo)注行高D.標(biāo)注尺寸必須使用單數(shù)針對(duì)小戶型年輕用戶的創(chuàng)意家居APP，其主色調(diào)選擇應(yīng)側(cè)重（）A.高飽和度對(duì)比色B.低飽和度莫蘭迪色C.單一黑白配色D.熒光色組合電商APP中商品標(biāo)題與對(duì)應(yīng)圖片距離較近，體現(xiàn)的設(shè)計(jì)原則是（）A.對(duì)比原則B.親密性原則C.重復(fù)原則D.對(duì)齊原則下列不屬于工具圖標(biāo)的設(shè)計(jì)要求的是（）A.功能明確B.風(fēng)格統(tǒng)一C.裝飾性優(yōu)先D.識(shí)別性強(qiáng)二、判斷題（每題1分，共15分）UI設(shè)計(jì)只需關(guān)注界面美觀，無(wú)需考慮用戶操作體驗(yàn)。（）圖標(biāo)設(shè)計(jì)應(yīng)遵循簡(jiǎn)潔、易懂的核心原則。（）“點(diǎn)9”切圖是Android平臺(tái)特有的適配解決方案。（）移動(dòng)UI設(shè)計(jì)稿標(biāo)注只需包含列表和間距信息。（）響應(yīng)式設(shè)計(jì)可確保界面在不同設(shè)備上均有良好顯示效果。（）設(shè)計(jì)聲明文檔可有效解決UI與開發(fā)的溝通問題。（）切片資源尺寸使用偶數(shù)可避免出現(xiàn)0.5像素虛邊。（）標(biāo)注色彩應(yīng)使用像素值作為單位。（）一個(gè)優(yōu)秀的UI設(shè)計(jì)應(yīng)實(shí)現(xiàn)“零學(xué)習(xí)成本”操作。（）線上線下用戶數(shù)據(jù)割裂不影響UI設(shè)計(jì)精準(zhǔn)度。（）微交互設(shè)計(jì)可提升用戶操作的反饋感知。（）SVG格式圖標(biāo)放大后會(huì)出現(xiàn)失真現(xiàn)象。（）柵格系統(tǒng)可保證頁(yè)面布局的一致性與秩序感。（）標(biāo)注線條顏色應(yīng)與背景保持高反差以確保清晰可見。（）iOS與Android系統(tǒng)的UI設(shè)計(jì)規(guī)范可完全通用。（）三、簡(jiǎn)答題（每題10分，共25分）請(qǐng)簡(jiǎn)述UI設(shè)計(jì)中色彩搭配的基本原則及應(yīng)用場(chǎng)景。說明交互設(shè)計(jì)在UI中的核心作用，并列舉3種常見的移動(dòng)端交互模式。簡(jiǎn)述高保真原型設(shè)計(jì)的核心要素，及Figma相較于傳統(tǒng)設(shè)計(jì)工具的優(yōu)勢(shì)。四、案例分析題（15分）下圖為某運(yùn)動(dòng)品牌（如安踏）電商APP商品詳情頁(yè)界面，存在多處設(shè)計(jì)缺陷。請(qǐng)結(jié)合UI設(shè)計(jì)原則與用戶體驗(yàn)需求，分析該頁(yè)面的3項(xiàng)主要問題，并提出針對(duì)性改進(jìn)建議。（注：假設(shè)界面存在以下特征：①商品標(biāo)題與參數(shù)信息混淆排列；②加入購(gòu)物車按鈕顏色與背景對(duì)比度低；③尺碼選擇區(qū)無(wú)庫(kù)存狀態(tài)提示；④評(píng)論區(qū)圖片排版雜亂。）五、設(shè)計(jì)應(yīng)用題（15分）請(qǐng)?jiān)O(shè)計(jì)一款運(yùn)動(dòng)健身類APP的“我的課程”頁(yè)面UI，要求包含以下核心元素：課程列表（含已購(gòu)/待上標(biāo)簽）、課程封面圖、課程名稱、教練信息、上課時(shí)間、預(yù)約狀態(tài)按鈕。請(qǐng)說明：頁(yè)面配色方案（主色、輔色、文本色）及選擇依據(jù)；布局結(jié)構(gòu)設(shè)計(jì)思路（結(jié)合柵格系統(tǒng)與信息層級(jí)）；關(guān)鍵交互細(xì)節(jié)（如狀態(tài)切換、按鈕反饋）。參考答案及解析一、單項(xiàng)選擇題B解析：RGB基于光的三原色，適用于電子屏幕；CMYK用于印刷，LAB為理論色彩空間，HSB用于色彩調(diào)整。C解析：.9.png是Android專屬切圖格式，可實(shí)現(xiàn)拉伸不失真。A解析：UI設(shè)計(jì)遵循簡(jiǎn)潔性而非復(fù)雜性原則，核心原則包括一致、反饋、可訪問性等。C解析：12列柵格系統(tǒng)靈活性強(qiáng)，為網(wǎng)頁(yè)與移動(dòng)端設(shè)計(jì)的主流選擇。B解析：Figma以云端實(shí)時(shí)協(xié)作、跨平臺(tái)使用為核心優(yōu)勢(shì)，適配團(tuán)隊(duì)協(xié)作場(chǎng)景。C解析：線面結(jié)合風(fēng)格融合線性的簡(jiǎn)潔與面性的層次，兼顧識(shí)別性與美感。B解析：邊距設(shè)置可引導(dǎo)用戶豎向閱讀流線，提升信息獲取效率。B解析：微交互聚焦細(xì)節(jié)反饋，如按鈕的常態(tài)/懸停/按下狀態(tài)變化。C解析：UI設(shè)計(jì)中文字字號(hào)統(tǒng)一以像素（px）為單位。D解析：垂直適配不屬于寬度拉伸適配方式，常見為等分、百分比、固定一邊適配。A解析：UI側(cè)重視覺呈現(xiàn)，UX關(guān)注用戶全流程體驗(yàn)，二者相輔相成。B解析：復(fù)雜設(shè)計(jì)稿可拆分尺寸標(biāo)注與色彩標(biāo)注頁(yè)面，提升溝通效率。B解析：小戶型用戶偏好簡(jiǎn)約質(zhì)感，低飽和度莫蘭迪色符合小資品質(zhì)定位。B解析：親密性原則要求相關(guān)元素靠近排列，增強(qiáng)信息關(guān)聯(lián)性。C解析：工具圖標(biāo)以功能明確、識(shí)別性強(qiáng)為核心，裝飾性為次要需求。二、判斷題×解析：UI設(shè)計(jì)需兼顧美觀與用戶體驗(yàn)，二者缺一不可?！探馕觯汉?jiǎn)潔易懂是圖標(biāo)設(shè)計(jì)的核心原則，確保用戶快速識(shí)別功能。√解析：“點(diǎn)9”切圖專為解決Android設(shè)備分辨率多樣性問題而生?！两馕觯簶?biāo)注需包含尺寸、色彩、字號(hào)、行高、間距等全量信息。√解析：響應(yīng)式設(shè)計(jì)通過自適應(yīng)布局適配不同設(shè)備屏幕尺寸。√解析：設(shè)計(jì)聲明文檔可標(biāo)準(zhǔn)化UI需求，減少設(shè)計(jì)與開發(fā)的溝通誤差?！探馕觯号紨?shù)尺寸可避免0.5像素虛邊，保證顯示清晰度。×解析：標(biāo)注色彩單位應(yīng)為十六進(jìn)制（#XXXXXX）或RGB值，非像素值?！探馕觯簝?yōu)秀UI設(shè)計(jì)應(yīng)實(shí)現(xiàn)“零學(xué)習(xí)成本”，讓用戶無(wú)需說明即可操作。×解析：數(shù)據(jù)割裂會(huì)導(dǎo)致用戶畫像不完整，降低設(shè)計(jì)精準(zhǔn)度?！探馕觯何⒔换ィㄈ缂虞d動(dòng)畫、按鈕反饋）可增強(qiáng)操作感知，提升體驗(yàn)?！两馕觯篠VG為矢量格式，放大后不會(huì)失真，適用于圖標(biāo)設(shè)計(jì)?！探馕觯簴鸥裣到y(tǒng)可規(guī)范元素排列，保證布局一致性與秩序感。√解析：高反差可確保標(biāo)注信息清晰可見，避免開發(fā)誤讀?！两馕觯篿OS與Android有獨(dú)立設(shè)計(jì)規(guī)范（如按鈕風(fēng)格、導(dǎo)航邏輯），不可通用。三、簡(jiǎn)答題色彩搭配基本原則及應(yīng)用場(chǎng)景基本原則：①品牌一致性（貼合品牌調(diào)性，如運(yùn)動(dòng)品牌用活力橙）；②對(duì)比與和諧（主輔色對(duì)比鮮明，同色系和諧過渡）；③情感適配（冷色顯專業(yè)，暖色顯活力）；④可訪問性（確保色盲用戶可識(shí)別）。應(yīng)用場(chǎng)景：電商APP主色用高飽和色激發(fā)購(gòu)買欲，閱讀類APP用低飽和色降低視覺疲勞。交互設(shè)計(jì)作用及移動(dòng)端交互模式核心作用：連接用戶與功能，通過合理交互邏輯提升操作效率與體驗(yàn)滿意度，減少用戶認(rèn)知負(fù)荷。常見模式：下拉刷新（刷新列表數(shù)據(jù)）、滑動(dòng)刪除（管理待辦/訂單）、標(biāo)簽頁(yè)切換（切換內(nèi)容分類）、模態(tài)彈窗（確認(rèn)操作）等。高保真原型核心要素及Figma優(yōu)勢(shì)核心要素：①精準(zhǔn)視覺還原（色彩、字體、間距匹配最終效果）；②完整交互邏輯（頁(yè)面跳轉(zhuǎn)、狀態(tài)變化）；③可交互組件（按鈕、輸入框等）；④注釋說明（開發(fā)指引）。Figma優(yōu)勢(shì)：①云端協(xié)作，多人實(shí)時(shí)編輯；②跨平臺(tái)兼容（Windows/macOS/網(wǎng)頁(yè)端）；③組件庫(kù)與樣式庫(kù)同步更新；④直接生成標(biāo)注與切圖，銜接開發(fā)流程。四、案例分析題問題1：商品標(biāo)題與參數(shù)信息混淆→改進(jìn)建議：基于親密性原則，將標(biāo)題單獨(dú)設(shè)置為大字號(hào)粗體，參數(shù)信息（材質(zhì)、尺碼）用列表式排列，通過間距分隔形成視覺區(qū)塊。問題2：加入購(gòu)物車按鈕對(duì)比度低→改進(jìn)建議：將按鈕主色調(diào)整為品牌標(biāo)志性高飽和色（如安踏紅），搭配白色文字，確保對(duì)比度符合可訪問性標(biāo)準(zhǔn)，同時(shí)放大按鈕尺寸至觸控友好規(guī)格（≥48px）。問題3：尺碼選擇區(qū)無(wú)庫(kù)存提示→改進(jìn)建議：在無(wú)庫(kù)存尺碼上添加“已售罄”灰色蒙層與圖標(biāo)，點(diǎn)擊時(shí)彈出“暫時(shí)缺貨”提示，同時(shí)推薦相近尺碼，減少用戶操作失誤。補(bǔ)充問題：評(píng)論區(qū)排版雜亂→改進(jìn)建議：采用2列柵格布局統(tǒng)一圖片尺寸，添加“熱門評(píng)價(jià)”標(biāo)簽篩選優(yōu)質(zhì)內(nèi)容，按時(shí)間倒序排列評(píng)論，提升瀏覽效率。五、設(shè)計(jì)應(yīng)用題配色方案：主色：活力藍(lán)（#1E88E5）→契合運(yùn)動(dòng)健康的積極調(diào)性，傳遞專業(yè)感；輔色：活力橙（#FF9800）→用于按鈕與狀態(tài)標(biāo)簽，形成對(duì)比吸引注意；文本色：深灰（#333333）、中灰（#666666）、淺灰（#999999）→按信息層級(jí)區(qū)分，提升可讀性。布局設(shè)計(jì)：采用12列柵格系統(tǒng)，左右邊距16px；頂部