UI设计笔试题目及详细参考答案（完整版）

UI设计笔试题目及详细参考答案（完整版）适用岗位：移动端UI设计、网页UI设计、界面视觉设计

适用场景：企业校招、社招笔试、岗位技能考核

考试时长：90分钟满分：100分一、单项选择题（共15题，每题2分，共30分）1.移动端设计中，主流手机标准设计稿尺寸一般为（）A.720×1280pxB.750×1334pxC.1080×1920pxD.1440×2560px2.iOS系统中，常规状态栏高度为（）A.20pxB.44pxC.30pxD.40px3.以下颜色模式中，专门用于屏幕显示的是（）A.CMYKB.RGBC.LABD.HSB4.移动端界面中，可点击按钮的最小适配触控区域是（）A.32×32pxB.44×44pxC.48×48pxD.64×64px5.安卓系统常规设计稿基准分辨率是（）A.720dpB.1080dpC.360dpD.480dp6.以下不属于UI设计核心原则的是（）A.一致性B.易用性C.复杂化D.美观性7.网页设计中，常用安全字体微软雅黑的主要优势是（）A.字体花哨B.兼容性强、可读性高C.占用内存小D.加载速度最快8.界面留白的主要目的是（）A.填补空白区域B.弱化层级、降低视觉疲劳C.减少设计工作量D.统一页面样式9.弹窗设计中，以下做法错误的是（）A.按钮主次分明B.文案简洁易懂C.弹窗无关闭入口D.适配屏幕居中展示10.色彩三要素不包括以下哪项（）A.色相B.明度C.纯度D.色温11.移动端导航栏标准高度一般为（）A.30pxB.44pxC.50pxD.60px12.以下哪种配色方式最适合官方、稳重的商务类APP（）A.高饱和撞色B.低饱和莫兰迪色C.大面积亮色D.多彩混搭色13.切图输出时，移动端通用图片格式是（）A.PNGB.JPGC.GIFD.BMP14.界面层级设计中，最核心的视觉层级是（）A.背景层B.内容层C.操作层D.装饰层15.用户体验设计中，“容错性”指的是（）A.界面样式统一B.允许用户操作失误并可挽回C.操作步骤繁琐D.页面加载无延迟二、多项选择题（共5题，每题3分，共15分，多选、少选、错选均不得分）1.以下属于UI设计常用设计工具的有（）A.FigmaB.SketchC.PhotoshopD.Axure2.移动端界面常见导航形式有（）A.底部标签导航B.顶部导航C.侧边抽屉导航D.悬浮导航3.优秀界面排版的核心要素包括（）A.字体层级清晰B.行间距、字间距合理C.对齐统一D.文字堆砌密集4.以下属于界面视觉一致性规范的有（）A.统一按钮圆角、粗细B.统一色彩主辅色C.统一字体字号层级D.统一图标风格5.APP启动页的设计作用包括（）A.品牌展示B.掩盖加载延迟C.提升视觉质感D.引导用户操作三、判断题（共10题，每题1分，共10分，对的打√，错的打×）1.设计稿像素越高，界面显示效果一定越好。（）2.RGB颜色模式可以直接用于印刷物料制作。（）3.移动端所有可点击控件都必须遵循统一触控尺寸规范。（）4.界面留白越多，页面设计越高级。（）5.图标设计核心是简洁、识别度高、风格统一。（）6.弹窗按钮设计中，确认按钮一般放置在左侧。（）7.低饱和度色彩更适合长期浏览的工具类、办公类APP。（）8.切图时，透明背景素材优先使用JPG格式。（）9.页面视觉层级需要根据用户操作优先级设计。（）10.网页设计中，无需考虑不同浏览器的兼容性问题。（）四、简答题（共4题，每题5分，共20分）1.请简单说明UI设计中“视觉层级”的含义及设计目的。2.移动端设计中，750px设计稿的1倍、2倍、3倍切图分别适配什么设备？3.请简述按钮设计的核心规范要点。4.说一说APP首页设计的核心设计思路。五、实操分析题（共2题，每题12.5分，共25分）1.案例分析：某电商APP商品详情页，存在文字密集、按钮过小、配色杂乱、重点优惠信息不突出的问题，请分析问题并给出具体优化方案。2.设计思考：对比工具类APP和潮流娱乐类APP的设计差异，从色彩、排版、图标、层级四个维度说明核心区别。详细参考答案一、单项选择题答案及解析1.B解析：行业通用移动端UI设计稿基准尺寸为750×1334px（2倍图），适配绝大多数iOS和安卓主流机型，是团队协作、切图落地的标准尺寸。2.A解析：iOS标准状态栏高度20px，全面屏机型状态栏高度为44px，常规笔试默认标准非全面屏尺寸。3.B解析：RGB为发光色彩模式，专门用于手机、电脑等电子屏幕显示；CMYK为印刷专用模式。4.B解析：移动端行业通用最小触控热区为44×44px，避免用户点击失误，提升操作体验。5.C解析：安卓以360dp为基准设计单位，适配所有安卓机型，保证界面适配无错乱。6.C解析：UI设计核心是简化用户操作，复杂化违背易用性核心原则。7.B解析：微软雅黑是Windows系统通用默认字体，网页端兼容性极强，字体规整、阅读舒适度高。8.B解析：合理留白可以区分页面模块、弱化视觉压迫感，降低用户浏览疲劳，凸显核心内容。9.C解析：弹窗必须设置关闭入口，保障用户自主关闭权限，符合基础体验规范。10.D解析：色彩三要素为色相、明度、纯度，色温为色彩冷暖属性参考值，不属于三要素。11.B解析：移动端导航栏通用标准高度44px，适配手持操作，视觉比例协调。12.B解析：低饱和色调沉稳、高级、不刺眼，适配金融、办公、商务类产品定位；高饱和色彩过于张扬，不适合商务场景。13.A解析：PNG支持透明背景、画质无损，是UI切图首选格式；JPG有损压缩，不适合图标、按钮等素材。14.C解析：操作层是用户点击、交互的核心区域，优先级最高，视觉层级最突出。15.B解析：容错性是用户体验核心原则，指允许用户出现操作失误，提供撤销、返回、重置等挽回方式。二、多项选择题答案及解析1.ABCD解析：Figma、Sketch为主流UI矢量设计工具，Photoshop用于视觉精修、配图，Axure用于交互原型制作，均为UI设计师常用工具。2.ABCD解析：移动端主流导航形式包含底部标签导航、顶部分段导航、侧边抽屉导航、悬浮按钮导航，适配不同产品场景。3.ABC解析：优秀排版讲究层级、间距、对齐统一，文字密集堆砌会降低可读性，是排版大忌。4.ABCD解析：视觉一致性包含控件样式、色彩体系、字体层级、图标风格、间距规范等全页面统一，保证产品视觉统一。5.ABC解析：启动页主要作用是品牌曝光、缓冲页面加载、提升视觉质感，无直接操作引导功能，引导操作属于引导页功能。三、判断题答案及解析1.×解析：设计稿需遵循标准规范尺寸，过度超高像素无意义，还会导致切图资源过大、页面加载卡顿。2.×解析：RGB无印刷色彩校准，印刷会出现严重色差，印刷物料必须使用CMYK模式。3.√解析：统一触控尺寸是移动端基础交互规范，保障操作手感一致，避免点击盲区。4.×解析：留白需合理适配内容，过度留白会导致页面空旷、信息零散，影响信息传递效率。5.√解析：图标核心设计标准是造型简洁、识别清晰、整体风格统一，适配界面整体视觉。6.×解析：行业通用规范为“左取消、右确认”，符合用户操作习惯。7.√解析：低饱和色彩视觉柔和，长时间浏览不易疲劳，适配工具、办公、学习类产品。8.×解析：JPG不支持透明背景，透明素材必须使用PNG格式。9.√解析：视觉层级优先级需匹配用户操作优先级，核心功能、重点信息优先凸显。10.×解析：不同浏览器存在样式适配差异，网页设计必须兼顾兼容性，保证页面展示统一。四、简答题参考答案1.视觉层级含义及设计目的

含义：视觉层级是通过色彩、大小、间距、粗细、明暗等设计手段，对页面信息进行主次分级，区分核心信息、次要信息、辅助信息。

设计目的：引导用户视觉动线，让用户快速抓取核心内容，降低阅读和操作成本，提升页面整洁度和易用性，避免信息杂乱无章。2.750px设计稿切图适配规则

750px为2倍基准设计稿：

①1倍切图（@1x）：适配老旧低配安卓机型；

②2倍切图（@2x）：适配绝大多数iOS机型和主流安卓中端机型；

③3倍切图（@3x）：适配苹果高清屏、安卓高端超清机型，保证图标和界面高清无锯齿。3.按钮设计核心规范要点

（1）尺寸：遵循最小44×44px触控热区，根据页面比例适配常规尺寸；

（2）样式：统一圆角、描边、阴影风格，主次按钮样式区分明显；

（3）状态：完善默认、点击、禁用、hover四种基础状态；

（4）文案：简洁直白、字数统一，清晰传达操作功能；

（5）色彩：主色对应核心操作，辅助色对应次要操作，禁用色弱化视觉存在感。4.APP首页核心设计思路

首页是产品核心流量入口，核心思路为优先展示核心功能、高效传递核心价值。首先梳理产品核心用户需求，将高频功能、核心内容前置；其次搭建清晰的视觉层级，区分banner、功能入口、内容推荐、公告提示等模块；保证排版规整、交互流畅，兼顾品牌视觉统一和用户操作便捷性，同时预留可拓展空间，适配后续功能迭代。五、实操分析题参考答案1.电商商品详情页问题及优化方案

现存问题总结：

（1）文字排版密集，信息堆叠，用户阅读压力大；

（2）操作按钮尺寸过小，触控体验差，易点击失误；

（3）页面配色杂乱，无主辅色区分，视觉混乱；

（4）优惠、折扣等核心营销信息视觉权重低，用户无法快速捕捉重点。

具体优化方案：

（1）文字优化：拆分密集文案，利用行间距、段间距区分参数、介绍、售后等模块；统一字体层级，标题加粗放大，辅助文字缩小降明度；

（2）按钮优化：放大购买、加购按钮尺寸，符合44px最小触控规范，固定底部悬浮展示，方便用户随时操作；区分主次按钮色彩样式；

（3）配色优化：统一页面主色调，营销信息使用高对比警示色，普通内容使用低饱和基础色，杜绝多色杂乱堆砌；

（4）信息层级优化：将优惠标签、满减活动、折扣力度等核心营销信息置顶高亮展示，搭配角标、色块凸显重点；弱化非必要辅助信息；

（5）模块分区：用分割线、留白区分商品图、价格、优惠、参数、评价、详情等模块，页面结构更清晰。2.工具类与娱乐类APP设计核心差异

（1）色彩维度

工具类：以低饱和、低对比的简约色调为主，主色单一固定，辅助色少，整体干净沉稳，降低视觉疲劳，适配长时间使用场景；

娱乐类：色彩丰富、饱和度适中偏高，多用渐变、撞色、亮色搭配，视觉活泼吸睛，营造潮流、轻松的氛围，吸引用户停留。

（2）排版维度

工具类：排版规整、留白充足、模块清晰，文字层级简洁，信息密度适中，侧重高效传递信息；

娱乐类：排版灵活多变，可运用错落布局、卡片嵌套、动态装饰，信息排布更活泼，弱化规整感，提升视觉趣味性。

（3）图标维度

工具类：图标线性、面性风格统一，造型简约规整、识别度高，无多余装饰，偏向商务极简风；

娱乐类：图标造型精致、年轻化，可搭配渐变、圆角、肌理、立体效果，风格潮流多变