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

UI设计课程期末考试试题（含详细答案）考试时长：90分钟满分：100分适用专业：数字媒体艺术、视觉传达、新媒体设计等相关专业考试说明：本次考试分为客观题、主观题、实操设计题三部分，重点考察UI设计基础理论、规范准则、页面设计逻辑及实操应用能力，答题需结合课堂所学与行业通用设计规范。一、单项选择题（每题2分，共20分）1.移动端UI设计中，常用的基础设计尺寸原型画布为（）A.720×1080pxB.375×667pxC.1080×1920pxD.414×896px2.以下不属于UI设计核心三要素的是（）A.色彩B.版式C.交互逻辑D.材质3.移动端界面设计中，安全边距的主要作用是（）A.统一页面美观度B.避免内容被手机刘海、状态栏、手势栏遮挡C.缩小页面视觉范围D.降低设计难度4.色彩体系中，代表色彩鲜艳程度的参数是（）A.色相B.饱和度C.明度D.色温5.手机移动端可点击按钮的最小适配尺寸为（），保障用户触控精准度A.24×24pxB.32×32pxC.44×44pxD.60×60px6.以下哪种字体样式最适合移动端正文内容阅读（）A.粗体艺术字体B.常规无衬线字体C.衬线书法字体D.倾斜特效字体7.APP设计中，弹窗组件的核心设计原则是（）A.色彩艳丽吸引眼球B.信息聚焦、操作清晰、快速闭环C.样式复杂有设计感D.尽可能多展示内容8.栅格系统在UI设计中的主要作用是（）A.丰富页面色彩层次B.规范版式布局，让页面整齐统一、适配性更强C.增加页面元素数量D.提升图片清晰度9.以下属于消极操作按钮的常用色彩是（）A.红色B.绿色C.蓝色D.橙色10.图标设计的核心要求不包括（）A.造型简洁B.表意清晰C.风格统一D.细节繁琐二、多项选择题（每题3分，共15分，多选、少选、错选均不得分）1.完整的UI设计工作内容包含哪些（）A.界面视觉设计B.交互逻辑梳理C.设计规范制定D.切图标注输出2.移动端界面常用的页面状态包含（）A.空白状态B.加载状态C.错误报错状态D.无网络状态3.以下属于UI设计常用配色原则的有（）A.主色统一原则B.色彩层级分明原则C.高饱和色彩堆砌原则D.适配场景调性原则4.按钮的常见交互状态包含（）A.默认状态B.点击状态C.禁用状态D.悬浮状态5.优质UI界面的通用标准包含（）A.视觉风格统一B.操作逻辑简洁C.信息层级清晰D.元素布局杂乱三、判断题（每题1分，共10分，对的打√，错的打×）1.UI设计只需要做好界面美观，不需要考虑用户操作习惯。（）2.同一套APP界面中，主色调颜色值必须统一，不能随意更改。（）3.移动端文字字号越小，页面越精致，可读性越强。（）4.空白状态页面需要搭配提示文案和引导操作按钮，提升用户体验。（）5.图标设计可以随意更改造型，无需和整体界面风格统一。（）6.栅格系统可以有效解决页面布局混乱、适配不一致的问题。（）7.确认、提交等积极操作按钮常用蓝色、绿色为主色调。（）8.界面留白过多会导致页面空旷，因此UI设计中不需要留白。（）9.设计标注、切图是UI设计落地的重要环节，直接影响开发效果。（）10.弹窗设计可以随意遮挡页面核心内容，无需限制出现频次。（）四、简答题（每题7分，共35分）1.简述UI设计中「信息层级」的含义，以及搭建清晰信息层级的常用方法。2.简述移动端安全边距的作用及常规设置规范。3.简述APP图标设计的四大核心原则。4.简述UI界面中留白的作用。5.简述一套完整的移动端UI设计规范包含哪些核心内容。五、实操设计题（20分）结合课堂所学，完成极简风格美食APP首页核心界面设计构思，无需手绘作图，写出完整设计方案即可。要求：1.明确整体风格、主辅配色、字体规范；2.梳理首页核心模块布局与信息层级；3.说明核心组件（按钮、卡片、图标）设计规范；4.逻辑清晰、贴合移动端用户使用习惯，符合行业设计规范。参考答案及详细解析一、单项选择题（每题2分，共20分）1.B解析：375×667px是移动端UI设计通用基准原型尺寸，适配绝大多数手机机型，是课程核心基础尺寸；720、1080为分辨率尺寸，414px为大屏机型尺寸，不作为基础原型尺寸。2.D解析：UI设计核心三要素为色彩、版式、交互逻辑，材质属于视觉细节表现，不属于核心要素。3.B解析：安全边距是页面内容与屏幕边缘的预留间距，核心作用是规避手机刘海、状态栏、底部手势导航栏的遮挡，保证内容完整展示。4.B解析：色相指色彩种类，饱和度指色彩鲜艳纯度，明度指色彩明暗程度，色温指色彩冷暖倾向。5.C解析：移动端通用触控标准，可点击控件最小尺寸为44×44px，能有效避免用户点击失误，提升触控体验。6.B解析：无衬线字体笔画规整、简洁清晰，适配手机小屏幕阅读；艺术字体、衬线字体、倾斜字体易造成视觉疲劳，不适合正文展示。7.B解析：弹窗属于临时交互组件，核心是快速传递关键信息、引导用户操作，需简洁聚焦，避免冗余复杂。8.B解析：栅格系统是标准化布局工具，通过固定网格规范元素排布，让页面版式整齐、适配不同机型，提升设计统一性。9.A解析：行业通用配色语义：红色代表删除、取消、警告等消极操作；蓝、绿为确认、保存等积极操作；橙色为提示、警示操作。10.D解析：图标设计要求简洁直观、表意明确、风格统一，细节繁琐会导致图标识别度降低，不符合UI设计要求。二、多项选择题（每题3分，共15分）1.ABCD解析：完整UI工作不仅包含视觉界面绘制，还涵盖交互逻辑梳理、设计规范制定、最终切图标注交付，保障设计落地。2.ABCD解析：移动端界面需覆盖全部使用场景，空白、加载、报错、无网络是最基础的四大页面状态。3.ABD解析：UI配色需主次分明、贴合产品调性、统一协调，高饱和色彩堆砌会造成视觉杂乱、刺眼，是配色禁忌。4.ABCD解析：完整按钮交互状态包含默认、悬浮、点击、禁用四种，可让用户清晰感知操作反馈。5.ABC解析：优质UI界面核心标准为风格统一、层级清晰、操作便捷、视觉舒适，布局杂乱是劣质界面的特征。三、判断题（每题1分，共10分）1.×解析：UI设计核心是用户体验，需兼顾美观性与实用性，贴合用户操作习惯。2.√解析：统一主色调是界面风格统一的基础，保证产品视觉辨识度。3.×解析：字号过小会导致阅读困难，移动端正文有标准字号范围，优先保障可读性。4.√解析：空白状态无内容展示，需通过提示文案和引导按钮，避免用户产生困惑。5.×解析：整套界面图标必须风格统一、造型协调，保证视觉整体性。6.√解析：栅格系统是规范版式布局的核心工具，有效解决布局混乱、适配错乱问题。7.√解析：行业通用色彩语义，蓝、绿色系适配积极、确认类操作场景。8.×解析：合理留白能区分元素层级、缓解视觉疲劳，是UI设计重要的排版技巧。9.√解析：精准的标注和切图是设计落地开发的关键，直接决定最终上线效果。10.×解析：弹窗过度使用、随意遮挡核心内容会严重影响用户体验，需控制频次和展示位置。四、简答题（每题7分，共35分，答案要点完整即可得分）1.答案：（1）信息层级含义：指界面中各类信息根据重要程度、功能优先级划分的主次关系，让用户快速区分核心内容、次要内容和辅助内容，快速抓取有效信息。（3分）（2）常用搭建方法：通过字体大小、字重、色彩深浅区分文字层级；通过留白、卡片分割区分模块层级；通过元素大小、位置、对比度突出核心内容；弱化辅助文案、图标，强化主体信息。（4分）2.答案：（1）作用：预留屏幕边缘安全间距，避免页面内容被手机刘海、状态栏、底部手势导航栏遮挡；统一页面左右间距，让版式更整齐，提升视觉舒适度和页面适配性。（3分）（2）规范：移动端常规安全边距左右为12-16px；顶部避开状态栏预留20-44px；底部避开手势栏预留34-50px，所有核心内容均需控制在安全边距内。（4分）3.答案：（1）简洁性：造型简约、线条干净，去除多余装饰，适配小屏幕展示；（2分）（2）识别性：表意清晰、直观易懂，用户可快速识别图标功能；（2分）（3）统一性：整套图标线条粗细、圆角、风格、尺寸保持一致；（2分）（4）适配性：色彩、造型适配整体界面调性，不突兀。（1分）4.答案：（1）区分页面模块，梳理信息层级，让页面结构更清晰；（2分）（2）减少页面元素拥挤感，缓解用户视觉疲劳，提升阅读舒适度；（2分）（3）突出核心内容，引导用户视觉焦点；（2分）（4）提升页面高级感和整洁度，优化整体视觉质感。（1分）5.答案：完整移动端UI设计规范核心包含五大模块：（1）色彩规范：主色、辅助色、中性色、功能色（成功、警告、错误）色值及使用场景；（2分）（2）字体规范：字体样式、字号、行高、字重、字间距统一标准；（2分）（3）布局规范：安全边距、栅格网格、模块间距、圆角统一参数；（1分）（4）组件规范：按钮、卡片、弹窗、输入框、图标等通用组件样式及交互状态；（1分）（5）页面状态规范：加载、空白、报错、无网络等特殊页面设计标准。（1分）五、实操设计题（20分，评分标准+参考答案）评分标准：1.风格与配色规范清晰（5分）；2.字体层级规范完整（4分）；3.页面模块布局合理（5分）；4.核心组件规范明确（4分）；5.贴合用户使用习惯，逻辑通顺（2分）参考设计方案：1.整体设计风格：极简清新风，主打干净通透、轻量化视觉，无多余冗余装饰，贴合美食APP休闲、治愈的产品调性，适配全年龄段用户。2.配色规范主色调：暖橙色（#FF7D33），贴合美食温暖、食欲的视觉感知，用于核心按钮、标签、选中状态；辅助色：浅绿色（#E8F5F0），用于标签背景、次要装饰，柔和不刺眼；中性色：黑色（#333333）主文案、深灰（#666666）次文案、浅灰（#999999）辅助文案、白色背景，层级清晰。3.字体规范统一使用移动端无衬线字体；页面标题18px、加粗；模块小标题16px、常规；正文内容14px、常规；辅助备注文案12px、常规，行高统一1.5倍，保障阅读舒适。4.首页模块布局（从上至下）（1）顶部导航栏：包含APP名称、搜索图标、个人中心图标，固定置顶；（2）banner轮播区：展示美食活动、新品推荐，视觉焦点区域；（3）功能分类区：宫格布局，包含家常菜、甜品、快餐、减脂餐等核心分类图标；（4）热门美食推荐区：卡片式布局，单列展示美食图片、