UI设计课程期末测试题（含详细答案）

UI设计课程期末测试题（含详细答案）考试说明：本试卷满分100分，考试时间90分钟，题型包含选择题、填空题、简答题、实操分析题，侧重考察UI设计基础理论、规范准则、实操应用及落地思维，无偏题、怪题，贴合日常课程学习及行业基础工作需求。一、单项选择题（共15题，每题2分，共30分）每题只有一个正确答案，请将正确选项填入括号内1、移动端UI设计中，国内主流手机的设计基准尺寸为（）A、720×1280pxB、750×1334pxC、1080×1920pxD、1440×2560px2、UI设计中“留白”的核心目的是（）A、减少页面内容，降低设计工作量B、弱化视觉层级，统一页面风格C、舒缓视觉疲劳，突出核心信息D、填补页面空白，避免版面单调3、以下颜色模式中，专门用于屏幕电子显示的是（）A、CMYKB、RGBC、LABD、HSB4、移动端界面按钮的常规可点击热区最小尺寸为（）A、32×32pxB、44×44pxC、60×60pxD、80×80px5、设计系统中“栅格系统”的主要作用是（）A、丰富页面装饰效果B、规范布局、统一页面秩序与版式C、提升图片清晰度D、适配不同字体样式6、以下不属于UI设计三大核心层级的是（）A、视觉层B、交互层C、数据层D、结构层7、APP启动页的常规展示时长范围是（）A、1-3秒B、5-8秒C、8-10秒D、10秒以上8、界面设计中，主色调的占比一般控制在（）A、10%-20%B、30%-40%C、60%-70%D、80%-90%9、以下字体样式中，最适合移动端正文长文本阅读的是（）A、粗体醒目字体B、纤细艺术字体C、常规清晰无衬线字体D、衬线书法字体10、弹窗设计的核心设计原则是（）A、色彩鲜艳，吸引注意力B、功能单一、操作简单、快速退出C、内容丰富，填充全部弹窗区域D、尺寸固定，不随页面变化11、网页UI设计中，适配电脑端主流屏幕的最小宽度为（）A、1024pxB、1200pxC、1440pxD、1920px12、交互设计中“反馈原则”的核心是（）A、让用户操作后及时感知结果B、让页面持续动态变化C、增加页面动画效果D、统一所有操作的样式13、以下图标类型中，视觉辨识度最高、通用性最强的是（）A、线性图标B、面性图标C、渐变图标D、拟物图标14、移动端页面顶部状态栏的标准高度为（）A、20pxB、40pxC、60pxD、80px15、UI设计中“一致性原则”不包含以下哪项（）A、操作逻辑一致B、控件样式一致C、色彩体系一致D、页面内容数量一致二、填空题（共10空，每空2分，共20分）1、UI设计的中文全称是____________________，核心分为移动端UI、网页UI、后台系统UI三大类。2、色彩搭配的经典631原则，指主色占60%、辅助色占30%、__________占10%。3、移动端界面导航常见四种形式：底部标签导航、顶部导航、侧边导航、__________。4、图标设计的四大核心要求：简洁、__________、统一、适配。5、页面视觉层级的营造主要依靠大小、色彩、间距、__________四个维度实现。6、后台系统UI设计更侧重__________与操作性，弱化视觉装饰效果。7、用户操作三要素：__________、操作行为、操作反馈。8、移动端正文常规字体大小为__________px，是最适配人眼阅读的尺寸。9、版式设计中，__________是区分不同模块、梳理页面逻辑的核心手段。10、加载状态设计的核心作用是缓解用户__________，提升使用体验。三、简答题（共4题，每题7分，共28分）1、简述UI设计中视觉层级的作用，以及搭建清晰视觉层级的基本思路。2、对比线性图标和面性图标的优缺点，并说明各自适用的页面场景。3、简述移动端页面设计的适配核心逻辑，以及设计时需要规避的常见问题。4、什么是用户体验设计？结合UI工作，说明视觉设计与用户体验的关联。四、实操分析题（共1题，22分）现有一款生鲜购物APP的商品列表页面初稿，存在以下问题：页面文字大小统一无区分、按钮大小不一、色彩杂乱（同时使用红、黄、蓝、绿四种高饱和颜色）、模块间距混乱、核心的“加入购物车”按钮不醒目。请结合所学UI设计规范，详细分析页面问题，并给出完整、可落地的优化方案。参考答案及详细解析一、单项选择题答案及解析1、B解析：750×1334px是国内移动端UI通用设计基准尺寸，适配绝大多数iOS、安卓主流机型，是行业通用标准尺寸。2、C解析：留白不是空白，是版式设计的核心手法，能够分割页面模块、减少视觉压迫感，让用户快速聚焦核心内容，缓解视觉疲劳。3、B解析：RGB为红绿蓝三原色发光模式，专属屏幕、手机、电脑等电子设备显示；CMYK为印刷配色模式，用于纸质印刷品。4、B解析：移动端触控操作适配人体手指点击范围，44×44px是行业公认最小可点击热区，小于该尺寸易出现点击失误。5、B解析：栅格系统通过固定的网格版式规范页面元素排布，让页面布局规整、逻辑清晰，保障整套产品设计风格统一。6、C解析：UI设计核心层级为结构层（页面布局架构）、交互层（操作逻辑）、视觉层（色彩、字体、图标），无数据层。7、A解析：APP启动页主要用于缓冲加载资源，时长过短无意义，过长会让用户产生等待焦虑，1-3秒为最佳区间。8、B解析：遵循631色彩原则，主色调占比30%-40%，奠定产品整体风格，辅助色搭配，点缀色提亮页面。9、C解析：无衬线字体笔画规整、清晰通透，适配手机小屏幕长文本阅读；衬线字体、艺术字体易造成视觉疲劳，不适合正文。10、B解析：弹窗属于临时交互窗口，核心是服务单一操作需求，过多内容、复杂样式会干扰用户操作，降低体验。11、A解析：1024px是电脑端网页最小适配宽度，可兼容老旧显示器，1200px为主流适配宽度。12、A解析：交互反馈包括点击变色、弹窗提示、加载动画等，核心是让用户明确知晓操作是否生效，避免盲目操作。13、B解析：面性图标视觉色块饱满、对比度高，在复杂页面、多图标场景下辨识度远高于线性图标，通用性更强。14、A解析：移动端标准状态栏高度为20px，是行业统一规范，设计页面时需预留对应安全距离。15、D解析：一致性原则针对产品设计规范与操作逻辑，不要求页面内容数量统一，不同功能页面内容体量可灵活调整。二、填空题答案及解析1、用户界面设计解析：UI（UserInterface）直译即为用户界面设计，聚焦产品视觉呈现与界面交互落地。2、点缀色解析：631色彩原则是UI配色核心准则，主色定风格、辅助色做搭配、点缀色提亮细节、突出重点。3、悬浮导航解析：四大主流导航形式覆盖移动端绝大多数产品场景，悬浮导航多用于功能快捷入口，不占用固定页面空间。4、直观解析：图标核心功能是替代文字传递信息，需简洁直观，让用户一眼识别功能含义，同时保障整套图标样式统一、适配页面尺寸。5、层级（明暗/对比）解析：大小、色彩、间距、对比是营造视觉层级的四大核心维度，通过差异化区分主次信息。6、实用性解析：后台系统多用于办公、数据管理，核心需求是高效操作、清晰展示数据，无需多余视觉装饰。7、操作目标解析：完整用户操作链路为：明确操作目标-执行操作行为-接收操作反馈，是交互设计的基础逻辑。8、14解析：移动端14px字体为通用正文尺寸，12px为辅助小字，16px为标题基础字体，适配人眼阅读习惯。9、间距留白解析：合理的间距可以分割页面模块、梳理信息逻辑，避免页面拥挤混乱，是版式设计的核心手段。10、等待焦虑解析：空白加载状态会让用户误以为页面卡顿，加载动画、进度提示等设计可有效缓解用户等待的负面情绪。三、简答题详细答案1、答案：（1）视觉层级的作用：快速引导用户视线，帮助用户在短时间内抓取页面核心信息，梳理页面信息逻辑，避免视觉混乱；同时让页面版式主次分明、错落有致，提升整体视觉质感与使用效率。（2）搭建思路：首先明确页面核心信息、次要信息、辅助信息的层级关系；其次通过字体大小、字重区分文字层级，通过色彩深浅、饱和度区分重点内容；利用间距、留白分割不同功能模块，通过按钮、图标样式差异化突出操作入口；最后统一层级规范，保障全页面、全产品层级逻辑一致。2、答案：（1）线性图标：优点是简洁轻盈、视觉清爽、占用空间小，适配简约设计风格；缺点是辨识度较低，在浅色背景、复杂页面中容易模糊，视觉冲击力弱。适用场景：APP个人中心、设置页面、菜单栏等轻量化、功能辅助性页面。（2）面性图标：优点是色块饱满、对比度高、辨识度极强、视觉醒目，用户感知清晰；缺点是视觉重量较重，过多使用会让页面厚重拥挤。适用场景：首页功能入口、核心操作按钮、底部导航栏、重点功能模块等需要突出展示的场景。3、答案：（1）适配核心逻辑：以固定基准尺寸设计页面，通过相对比例、弹性布局适配不同机型；字体、间距、按钮采用相对尺寸，图片、图标使用矢量素材，保障不同屏幕尺寸、分辨率机型下页面不拉伸、不挤压、无错乱。（2）常见规避问题：避免使用固定像素硬尺寸导致小机型溢出、大机型留白过多；避免图片非矢量导致拉伸模糊；避免按钮、热区尺寸过小引发适配后点击失效；避免字体大小不兼容，出现文字截断、重叠问题。4、答案：（1）用户体验设计是围绕用户使用习惯、操作需求、心理感受，优化产品操作逻辑、视觉呈现、使用流程，让产品好用、易用、舒适的设计思维，贯穿产品使用全流程。（2）关联：视觉设计是用户体验的基础载体，干净规整的界面、清晰的色彩搭配、合理的字体层级，能降低用户的识别成本和操作成本；糟糕的视觉设计会造成用户视觉疲劳、找不到核心功能、操作混乱，直接拉低使用体验；优质的UI视觉设计需要以用户体验为核心，不盲目追求美观，兼顾颜值与实用性，让视觉服务于用户操作。四、实操分析题详细答案（满分22分）一、页面核心问题分析（10分）1、文字层级缺失：所有文字大小统一，无法区分商品标题、价格、简介、标签等信息的主次，用户无法快速抓取核心消费信息，阅读效率极低。2、控件规范混乱：按钮尺寸不统一，破坏页面整体规整性，不符合UI一致性设计原则，同时影响用户操作感知。3、色彩体系杂乱：高饱和多色混用，无主辅色区分，视觉杂乱刺眼，无重点、无风格，容易造成用户视觉疲劳，且无法突出核心操作按钮。4、版式逻辑混乱：模块间距无统一规范，商品卡片排布拥挤或留白失衡，页面版式松散无序，信息分割不清晰。5、核心功能弱化：“加入购物车”作为生鲜APP核心转化按钮，视觉权重不足，用户无法快速找到操作入口，影响产品转化。二、落地优化方案（12分）1、搭建文字层级体系：统一字体规范，设置差异化尺寸字重。商品标题16px常规字重，商品价格18px加粗突出，商品简介12px浅灰色小字，活动标签12px加粗，清晰区分信息主次。2、统一控件样式规范：标准化所有按钮尺寸、圆角、间距，页面功能按钮统一固定宽高，圆角统一规范，消除大小不一的混乱问题，保持界面一致性。3、简化优化色彩体系：搭建专属产品色彩规范，保留1个主色调作为品牌核心色，用于核心操作按钮；辅助色用于标签、次要提示；去除多余高饱和杂色