UI设计岗位综合测试题（含详细答案）

UI设计岗位综合测试题（含详细答案）适用场景：职场面试、新人考核、岗位能力测评考试时长：60分钟满分：100分题型说明：选择题、判断题、简答题、实操分析题，贴合实际工作场景，无脱离职场的理论空话一、单项选择题（共10题，每题3分，共30分）1、移动端UI设计中，主流设计基准尺寸是（）A、320×480px

B、750×1334px

C、1080×1920px

D、1440×2560px2、以下不属于移动端常用触控热区规范尺寸的是（）A、44×44px

B、48×48px

C、32×32px

D、50×50px3、UI设计中「留白」的核心目的是（）A、填充页面空白，避免画面单调

B、区分层级、弱化视觉疲劳、提升信息可读性

C、统一页面尺寸，方便适配

D、减少设计工作量4、APP界面中，弹窗设计最核心的原则是（）A、色彩鲜艳，吸引用户注意

B、信息简洁、操作明确、不干扰核心流程

C、样式精美，多添加装饰元素

D、尺寸统一，全屏展示5、以下色彩模式中，专门用于屏幕显示的是（）A、CMYK

B、RGB

C、LAB

D、灰度模式6、移动端字体设计中，正文最小可读安全字号为（）A、10px

B、12px

C、14px

D、16px7、原型图的核心作用是（）A、确定页面最终视觉风格

B、梳理页面结构、交互逻辑、信息层级

C、替代高保真设计图交付开发

D、用于对外宣传展示8、Web端页面设计中，常规安全版心宽度为（）A、1000px

B、1200px

C、1400px

D、1920px9、按钮设计中，「主按钮」的使用规则是（）A、同一页面可出现多个主按钮

B、同一页面仅保留一个核心主按钮，突出核心操作

C、主按钮颜色必须与页面背景对比微弱

D、主按钮尺寸小于次按钮10、UI适配设计中，2倍图输出尺寸，交付开发的切片倍率为（）A、1倍

B、2倍

C、3倍

D、4倍二、判断题（共10题，每题2分，共20分，对的打√，错的打×）1、UI设计只需要做好页面视觉好看，不需要考虑交互逻辑和用户使用习惯。（）2、移动端所有页面的间距、字号、按钮尺寸必须统一，无需根据场景调整。（）3、RGB色彩模式数值越大，颜色越亮，纯白为RGB(255,255,255)。（）4、弹窗、浮窗属于临时性组件，设计时可以忽略页面整体风格统一性。（）5、正文字体行间距设置为1.5倍-1.8倍，可读性最佳。（）6、高保真设计图可以直接作为原型图，交付产品和开发确认逻辑。（）7、页面留白越多，页面设计质感越好。（）8、图标设计核心原则：造型简洁、识别性强、风格统一、表意清晰。（）9、Web端设计不需要考虑不同浏览器的显示适配问题。（）10、UI设计交付时，只需输出设计图，无需标注尺寸、间距、色值、字体参数。（）三、简答题（共4题，每题7分，共28分）1、简述UI设计中「信息层级」的定义，以及日常设计中通过哪些方式区分信息层级？2、请说明主按钮、次按钮、文字按钮的区别，以及各自的适用场景。3、移动端UI设计中，常见的适配问题有哪些？日常如何规避？4、简述UI设计交付给前端开发的完整文件包含哪些内容？四、实操分析题（共1题，22分）现有一款生活服务类APP的「登录页面」，初稿设计存在以下问题，请逐条分析问题所在，并给出对应的优化方案：1、页面标题、输入框提示文字、底部说明文字字号大小几乎一致；2、登录按钮尺寸偏小，颜色与背景对比度低，不够突出；3、输入框间距杂乱，整体页面拥挤、没有留白；4、页面同时出现「登录」「注册」「忘记密码」「游客访问」四个同等样式操作按钮。参考答案（详细解析）一、单项选择题答案及解析1、答案：B解析：750×1334px是移动端UI设计通用基准尺寸（2倍图），适配绝大多数手机机型，是行业主流设计稿尺寸；320px为老旧机型尺寸，1080px为设备实际分辨率，不作为设计基准稿尺寸。2、答案：C解析：移动端触控热区行业标准最小为44×44px，过小会导致用户点击困难、误触率高，32×32px不符合触控规范。3、答案：B解析：留白不是单纯填充空白，核心作用是分割页面模块、区分信息层级、降低视觉压迫感，让用户快速抓取核心信息，提升整体使用体验。4、答案：B解析：弹窗是用户的临时操作入口，核心要求是轻量化、信息直观、操作清晰，过多装饰、强制全屏会打断用户核心使用流程，影响体验。5、答案：B解析：RGB为发光色彩模式，适用于手机、电脑等电子屏幕显示；CMYK为印刷色彩模式，用于纸质物料设计。6、答案：C解析：移动端12px及以下字号在小屏设备上会出现模糊、看不清的问题，14px是正文最小安全可读字号，常规正文推荐14-16px。7、答案：B解析：原型图侧重结构与逻辑，无复杂视觉样式，主要用于产品、开发团队确认页面功能、跳转逻辑、模块分布，不用于展示最终视觉效果。8、答案：B解析：1200px是Web端通用安全版心，适配主流电脑屏幕，可避免大屏页面空旷、小屏显示不全的问题，是企业官网、后台系统常用规范。9、答案：B解析：主按钮代表页面唯一核心操作，同一页面只能有一个，通过色彩、尺寸突出优先级，多个主按钮会让用户无法判断核心操作，造成操作混乱。10、答案：B解析：移动端设计稿以2倍图为基准，输出2倍切片，适配普通高清屏，是行业通用交付标准。二、判断题答案及解析1、×解析：UI设计的核心是视觉呈现+用户体验+交互逻辑，好看只是基础，贴合用户使用习惯、流程顺畅才是核心。2、×解析：设计规范统一是基础，但需根据场景灵活调整，比如弹窗、卡片、详情页的间距、字号可根据内容密度微调，不能死板统一。3、√解析：RGB三通道数值最大值为255，三色叠加为纯白，数值越低颜色越暗。4、×解析：所有页面、组件都需要遵循整体视觉规范，弹窗作为高频组件，风格、色彩、圆角必须与APP整体统一，保证视觉一致性。5、√解析：移动端正文1.5-1.8倍行间距，可有效避免文字拥挤，提升阅读流畅度，是通用排版规范。6、×解析：高保真图侧重视觉效果，无法清晰体现交互逻辑、跳转关系，不能替代原型图用于逻辑确认，容易导致需求理解偏差。7、×解析：留白讲究疏密有致，过度留白会导致页面空洞、信息分散，重点不突出，并非越多越好。8、√解析：图标核心设计准则，保证用户一眼识别功能用途，同时适配整体设计风格。9、×解析：不同浏览器存在渲染差异，Web设计需要兼容主流浏览器，避免出现样式错位、色彩偏差问题。10、×解析：完整交付必须包含设计图、尺寸标注、色值、字体参数、间距规范、切片文件，否则开发无法精准还原设计效果。三、简答题详细答案1、信息层级定义及区分方式定义：信息层级是对页面所有内容进行优先级排序，区分核心信息、次要信息、辅助信息，让用户按照设计引导快速抓取重点内容，避免信息杂乱。常用区分方式：①字号大小（核心内容字号最大，辅助内容最小）；②字体粗细（标题加粗，正文常规，备注文字纤细）；③色彩深浅（核心信息高对比度、深色，辅助信息浅灰色）；④间距与留白（核心模块留白充足，突出重点）；⑤层级叠加（卡片阴影、分割线区分模块）；⑥位置排布（核心内容居中、居上优先展示）。2、三种按钮区别及适用场景（1）主按钮：高饱和度色彩、实心填充、尺寸最大，视觉优先级最高；同一页面唯一，用于页面核心操作，如提交、登录、确认、保存。（2）次按钮：描边样式、低饱和度色彩或浅色填充，视觉优先级中等；用于次要操作，如取消、重置、返回、更多。（3）文字按钮：无背景、无描边，仅文字展示，视觉优先级最低；用于轻量辅助操作，如忘记密码、查看详情、协议跳转。3、移动端常见适配问题及规避方法常见问题：①不同机型屏幕尺寸、比例不一，导致页面留白过多或内容挤压；②图标、按钮拉伸变形；③文字截断、排版错乱；④深色/浅色模式适配偏差；⑤异形屏（刘海屏、挖孔屏）顶部底部内容被遮挡。规避方法：①采用通用基准尺寸设计，使用弹性布局、自适应间距；②图标、按钮使用矢量图形，避免位图拉伸；③文字预留自适应空间，禁止固定死宽高；④单独适配异形屏安全区，关键内容避开屏幕遮挡区域；⑤深浅模式统一规范色值，提前适配两套样式。4、UI完整交付内容①完整高保真设计图源文件；②页面尺寸、间距、圆角、阴影全套标注文件；③色值、字体字号、字重、行高规范文档；④裁切好的高清切片素材（2倍/3倍图）；⑤组件规范文件（按钮、输入框、弹窗、图标等通用组件）；⑥交互说明文档（页面跳转、状态变化、特殊交互逻辑）；⑦适配说明（机型、屏幕、深浅模式适配规则）。四、实操分析题详细答案（问题+优化方案）问题1：文字字号无区分，信息层级混乱优化方案：重新划分字号层级，页面标题设置18-20px加粗，输入框提示文字14px常规，底部说明文字12px浅灰色，通过字号、字重、色彩区分主次信息，让用户快速识别页面核心内容。问题2：登录主按钮视觉弱化，重点不突出优化方案：放大按钮常规尺寸，调整品牌主色，提升与背景的色彩对比度；设置合适圆角，增加轻微投影凸显悬浮感，明确其页面核心操作的优先级。问题3：页面间距杂乱、拥挤，无留白优化方案：统一全局间距规范，标题与输入区、输入框与输入框、按钮与底部文字设置固定梯度间距；精简页面冗余元素，增加模块留白，缓解视觉压迫感，让页面排版透气整洁。问题4：操作按钮过多、样式一致，用户操作迷茫优化方案：梳理操作优先级，保留「登录」为主按钮、「注册」为次按钮；将「忘记密码」「游客访问」改为轻量化文字按钮，放置在页面底部角落，弱化视觉权重，区分核心与辅助操作，避免用户视觉混淆。整