UI设计专业考核试题（含详细答案）

UI设计专业考核试题（含详细答案）适用场景：新人考核、求职笔试、岗位技能测评考试时长：90分钟满分：100分一、单项选择题（共15题，每题2分，共30分）1、移动端UI设计中，国内主流手机通用的设计基准尺寸是？（）A、720×1280pxB、375×667pxC、1080×1920pxD、414×896px2、以下哪种色彩搭配最适合金融类APP的主视觉风格？（）A、高饱和暖色系B、低饱和冷色系C、荧光撞色搭配D、多彩渐变混搭3、移动端界面中，可点击按钮的最小触控区域标准尺寸是？（）A、32×32pxB、44×44pxC、60×60pxD、80×80px4、字体层级设计中，页面正文文本的最佳行高通常为字号的？（）A、1.0倍B、1.2-1.3倍C、1.5-1.8倍D、2.0倍以上5、以下不属于UI设计核心原则的是？（）A、一致性B、易用性C、复杂化D、美观性6、APP弹窗设计中，核心操作按钮通常放置在？（）A、左侧B、右侧C、顶部D、底部居中7、网页UI设计中，常规正文字体最小可读字号为？（）A、10pxB、12pxC、14pxD、16px8、用来区分界面主次信息、建立视觉层级的核心设计手段是？（）A、统一配色B、留白与层级对比C、添加装饰元素D、统一字体9、移动端状态栏的标准高度为？（）A、20pxB、40pxC、44pxD、60px10、以下哪种图标类型最适合展示功能性操作入口？（）A、线性图标B、渐变插画图标C、写实立体图标D、复古纹理图标11、界面设计中“一致性原则”不包含以下哪项？（）A、按钮样式统一B、字体层级统一C、交互逻辑统一D、配色随机变化12、电商APP商品卡片设计的核心目的是？（）A、页面美观花哨B、突出商品信息、引导点击C、填充页面空白D、统一页面风格13、色彩模式中，用于屏幕显示的标准模式是？（）A、CMYKB、RGBC、LABD、灰度模式14、移动端底部导航栏的常规图标数量范围是？（）A、1-2个B、3-5个C、6-8个D、8个以上15、加载状态设计的核心作用是？（）A、美化页面B、缓解用户等待焦虑、告知运行状态C、丰富界面元素D、提升页面层次感二、判断题（共10题，每题1分，共10分，对的打√，错的打×）1、UI设计只需要保证界面好看，不需要考虑用户操作习惯。（）2、移动端所有按钮尺寸可以统一，不用区分主次操作。（）3、RGB色彩模式数值越大，颜色越亮。（）4、页面留白越多，界面视觉效果越高级、越整洁。（）5、弹窗设计中，取消按钮优先级低于确认按钮。（）6、正文文本行间距过密，会降低用户阅读舒适度。（）7、娱乐类APP可以使用高饱和、年轻化的色彩搭配。（）8、图标设计越复杂、细节越多，识别度越高。（）9、网页设计中，重点信息可以通过放大字号、加深颜色突出层级。（）10、交互反馈可以省略，用户可以自行判断操作是否成功。（）三、简答题（共4题，每题8分，共32分）1、简述UI设计中「视觉层级」的核心作用，以及常用的搭建手段。2、移动端界面设计中，为什么要统一设计规范？规范主要包含哪些内容？3、简述错误提示设计的核心原则，以及常见的提示展示形式。4、对比线性图标和面性图标的特点，以及各自的适用场景。四、综合实操分析题（共2题，每题14分，共28分）1、现有一款中老年健康管理APP，目前界面色彩花哨、文字偏小、按钮密集，用户反馈操作困难、看不清文字。请结合UI设计原则，分析现有问题，并给出具体的优化方案。2、简述电商商品详情页的UI设计核心逻辑，说明页面从上到下的信息层级排布规则，以及各模块的设计重点。====================详细参考答案====================一、单项选择题答案1、B解析：375×667px是移动端UI设计通用基准尺寸，适配绝大多数手机机型，是设计师常用作图尺寸。2、B解析：金融类产品主打安全、专业、稳重，低饱和蓝、灰等冷色系贴合品牌调性，高饱和色彩会显得浮躁、不严谨。3、B解析：移动端官方交互规范明确，可点击元素最小触控区域为44×44px，避免用户点击失误，提升操作准确率。4、C解析：正文行高1.5-1.8倍能有效区分每行文字，避免文字拥挤，大幅提升长篇内容的阅读舒适度。5、C解析：UI设计核心是简洁、高效、易用，复杂化会增加用户操作成本，违背设计初衷。6、B解析：遵循用户操作习惯，弹窗核心确认、提交等操作按钮置于右侧，取消、关闭按钮置于左侧，区分操作优先级。7、C解析：网页12px及以下字号过小，长时间阅读易疲劳，14px是网页正文标准最小可读字号。8、B解析：通过大小、颜色、留白、粗细的对比搭建视觉层级，是区分主次信息的核心手段。9、A解析：移动端通用状态栏标准高度为20px，是固定规范尺寸。10、A解析：线性图标简洁清晰、识别度高、占用空间小，适合导航、功能入口等常规操作场景。11、D解析：一致性要求整体视觉、交互、样式统一，随机配色会破坏界面整体感和用户使用认知。12、B解析：电商卡片核心目标是高效展示商品价格、主图、销量等核心信息，吸引用户点击转化，美观是辅助作用。13、B解析：RGB为光色三原色，专用于屏幕、电子设备显示；CMYK为印刷四色，用于纸质印刷。14、B解析：底部导航3-5个为最佳数量，过多会造成界面拥挤、用户选择困难，过少无法满足核心功能跳转需求。15、B解析：加载状态、动画、文字提示，能够告知用户页面正在运行，避免用户误以为卡顿、无响应，缓解等待焦虑。二、判断题答案1、×解析：UI设计是美观与实用结合，核心是贴合用户操作习惯，提升使用体验，美观为辅助。2、×解析：按钮需区分主次，主按钮醒目、尺寸偏大、高对比配色，次按钮弱化展示，区分操作优先级。3、√解析：RGB数值范围0-255，数值越大，色彩亮度越高，255为纯白，0为纯黑。4、×解析：留白需要适度，过度留白会导致页面空旷、信息松散，合理留白才能提升整洁度。5、√解析：弹窗优先突出核心操作（确认/提交），取消按钮弱化样式、降低视觉优先级。6、√解析：行间距过密会导致文字粘连，视觉拥挤，极大降低长篇文字的阅读体验。7、√解析：娱乐、潮流、社交类APP适配年轻化、高饱和色彩，贴合产品轻松、活泼的定位。8、×解析：图标设计核心是简洁易懂、识别快速，细节过多会导致图标杂乱、识别度降低。9、√解析：通过字号、字重、颜色对比度的差异，是搭建页面视觉层级、突出重点信息的基础手段。10、×解析：所有操作必须有交互反馈，成功、失败、加载状态都需明确提示，让用户清晰感知操作结果。三、简答题详细答案1、视觉层级的核心作用及搭建手段核心作用：梳理页面信息秩序，引导用户视线，让用户快速区分核心信息、次要信息和辅助信息，减少用户查找成本，提升界面易用性，同时让页面视觉整洁、有节奏感。常用搭建手段：一是尺寸层级，通过字号、组件大小区分主次；二是色彩层级，主色突出重点，浅灰、淡色弱化辅助信息；三是留白层级，核心模块留白充足，密集排布次要信息；四是对比层级，通过字重、圆角、阴影、配色对比强化层级差异；五是位置层级，核心信息放置页面视觉中心区域。2、移动端设计规范的意义及核心内容核心意义：统一产品整体视觉风格，避免页面风格混乱；降低设计返工成本，提升设计效率；统一用户使用认知，让用户无需重新适应不同页面的操作逻辑；方便前端开发落地，减少适配误差。核心内容：包含色彩规范（主色、辅助色、中性色、警示色）、字体规范（字号、行高、字重、字体层级）、组件规范（按钮、输入框、弹窗、卡片、导航栏样式）、图标规范（线型、尺寸、圆角、粗细）、间距规范（内外边距、模块间距）、交互规范（点击反馈、弹窗规则、跳转逻辑）。3、错误提示设计原则及展示形式核心设计原则：第一，及时性，操作出错后立即反馈，不延迟、不遗漏；第二，易懂性，提示文字简洁通俗，不用专业术语，明确告知错误原因；第三，引导性，不仅提示错误，还要给出对应的解决办法；第四，轻量化，不强制打断用户操作，非严重错误避免弹窗遮挡页面；第五，差异化，区分轻微错误、严重错误、警告提示的视觉样式。常见展示形式：轻提示（顶部/底部浮窗）、输入框下方文字提示、弹窗提示、红色图标警示、页面空白状态提示、气泡提示。4、线性图标与面性图标特点及适用场景线性图标：特点是线条简洁、轻盈通透、视觉清爽，占用视觉权重低，风格简约统一；缺点是小尺寸下识别度略低。适用场景：APP底部导航、页面次级功能入口、工具栏图标、常规操作按钮图标，适合大面积、多数量的图标排布场景。面性图标：特点是色块填充、视觉权重高、对比强烈、识别速度快、醒目突出；缺点是视觉偏重，过多使用会造成页面杂乱。适用场景：核心功能入口、选中状态图标、重点操作按钮、空状态图标、引导页图标，需要强化视觉焦点的场景。四、综合实操分析题详细答案1、中老年健康APP界面问题分析及优化方案现存核心问题（1）视觉问题：色彩花哨杂乱，无统一主色调，视觉干扰过多，中老年人视觉分辨能力较弱，容易视觉疲劳；文字字号偏小，可读性极差。（2）布局问题：按钮、功能模块排布密集，触控区域过小，极易出现误触、点错的情况。（3）体验问题：无清晰视觉层级，重点功能不突出，中老年用户学习成本高，操作困难。具体优化方案（1）色彩优化：统一低饱和、高柔和的配色，以绿色、蓝色等健康、沉稳色系为主，减少高对比、花哨撞色，降低视觉刺激；警示、操作按钮采用高辨识度纯色，方便区分。（2）文字优化：整体放大基础字号，正文最小不低于16px，标题、功能按钮文字进一步放大；加粗核心文字，弱化辅助文字，提升可读性。（3）布局与按钮优化：拉大模块间距、按钮间距，删除冗余装饰元素；统一按钮尺寸，放大触控区域，保证按钮尺寸不低于44×44px；精简页面功能，隐藏次要功能，只保留健康监测、数据查看、咨询等核心功能。（4）层级优化：核心功能模块居中展示，视觉突出；简化界面设计，去除多余渐变、纹理、装饰元素，界面以简洁平整为主，降低用户识别难度。2、电商商品详情页UI设计核心逻辑与排布规则核心设计逻辑：遵循用户购物浏览习惯，从「吸引用户-传递信息-建立信任-引导转化」层层递进，优先展示用户最关心的核心信息，逐步补充辅助信息，最终引导用户加购、下单。页面信息层级排布及设计重点（1）顶部轮播图区域：首要视觉区域，高清展示商品主图、细节图、场景图，风格统一，突出商品质感和核心卖点，吸引用户停留，是留住用户的关键。（2）价格标题区域：核心转化信息，放大价格、优惠力度、折扣标签，清晰展示原价、现价、优惠券、活动规则；商品标题简洁精准，突出核心卖点、规格、适配人群。（3）规格选择区域：简化选择