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

UI设计专业基础考核试题（含详细答案解析）考试说明：本试题适用于UI设计入门及进阶学习者考核，总分100分，考试时长90分钟。题型包含选择题、判断题、简答题、实操分析题，侧重实际工作应用，无偏题、怪题，全面考察界面设计基础规范、视觉逻辑、落地常识。一、单项选择题（共15题，每题2分，共30分）每题只有一个正确答案，请选择最贴合UI设计实际工作规范的选项。1.移动端手机常规设计稿的标准尺寸，行业最常用的是（）A.720×1280pxB.375×667pxC.1080×1920pxD.414×736px2.UI设计中“留白”的核心目的是（）A.填补页面空白，避免画面单调B.弱化次要元素，突出主体信息，提升阅读舒适度C.减少设计工作量D.适配不同屏幕尺寸3.以下颜色搭配中，最适合用作APP主色调、符合大众视觉舒适原则的是（）A.高饱和大红+亮黄B.低饱和莫兰迪色系搭配C.纯黑+纯白强对比D.荧光绿+紫色4.移动端界面中，按钮的最小可点击热区尺寸行业标准为（）A.32×32pxB.44×44pxC.60×60pxD.24×24px5.关于字体层级设计，以下说法正确的是（）A.页面内字体大小越多，设计越精致B.标题、副标题、正文、辅助文字需区分层级，最多3-4种字号C.所有文字统一字号，保证页面统一D.辅助文字字号可以大于正文文字6.下拉刷新、上拉加载更多是移动端APP中常见的交互方式，该交互核心是为了（）A.增加页面动画效果B.降低用户操作成本，提升内容浏览连贯性C.丰富页面功能数量D.适配低端手机7.网页UI设计中，常规版心的安全宽度一般设置为（）A.1000-1200pxB.800-900pxC.1300-1500pxD.600-700px8.以下不属于UI设计核心工作内容的是（）A.界面视觉排版B.用户操作交互逻辑设计C.程序代码编写D.图标、组件设计9.界面弹窗设计中，最合理的操作按钮布局是（）A.确认按钮在左，取消按钮在右B.取消按钮在左，确认按钮在右C.两个按钮居中重叠D.随机摆放无固定规则10.色彩模式中，用于屏幕显示、UI设计作图的标准模式是（）A.CMYKB.RGBC.LABD.灰度模式11.移动端状态栏、导航栏、标签栏的作用是（）A.填充页面高度B.统一页面框架，辅助用户定位、操作、切换页面C.仅为了视觉美观D.适配不同手机主题12.设计图标时，保证图标视觉统一的关键是（）A.颜色完全一致B.线条粗细、圆角弧度、透视风格统一C.图标大小完全相同D.全部采用极简线性风格13.以下哪种界面布局最适合展示大量列表类信息（资讯、商品、订单）（）A.卡片式布局B.全屏大图布局C.浮动零散布局D.分层弹窗布局14.UI设计中“容错性”设计指的是（）A.允许界面存在轻微瑕疵B.设计适配用户误操作，提供撤销、返回、提示纠错功能C.适配不同审美风格D.兼容老旧设备15.输出UI设计切图时，移动端必备的多倍图规格是（）A.1倍图B.1倍、2倍、3倍图C.仅3倍图D.2倍图二、判断题（共10题，每题1.5分，共15分）正确选√，错误选×1.界面颜色越多，页面视觉效果越丰富、越高级。（）2.移动端所有按钮都可以设计成圆角样式，无任何使用限制。（）3.UI设计不仅要好看，更要贴合用户使用习惯，优先保证实用性。（）4.网页设计中，文字可以紧贴页面边缘，不需要设置边距留白。（）5.交互设计中，相同功能的操作按钮，在整个产品中样式、位置可以随意更换。（）6.浅色背景搭配深色文字，是最适配大众阅读的色彩组合。（）7.图标设计只要造型相似即可，不需要统一视觉规范。（）8.弹窗提示文案需要简洁直白，避免冗长复杂的文字描述。（）9.移动端设计稿只需要适配手机，不需要考虑平板设备兼容。（）10.留白不是浪费页面空间，是提升界面质感和可读性的重要设计手段。（）三、简答题（共4题，每题7分，共28分）1.简述UI设计中「视觉层级」的核心作用，以及日常设计中搭建层级的3种常用方式。2.移动端APP导航栏主要分为底部标签导航、顶部导航、侧边导航，简述底部标签导航的适用场景和核心优势。3.简述UI设计中组件化设计的意义，以及对团队协作、项目迭代的帮助。4.做界面文字设计时，需要遵循哪些基础规范？至少写出4点核心内容。四、案例实操分析题（共2题，第一题13分，第二题14分，共27分）1.现有一款中老年生活服务APP，主要功能为缴费、挂号、查资讯，目前界面存在问题：文字过小、颜色对比刺眼、按钮尺寸偏小、功能入口杂乱。请结合UI设计规范，写出4点具体优化方案及优化理由。2.对比分析：电商商品列表页，卡片式布局和网格布局分别有什么优缺点？结合实际使用场景，说明什么情况下优先使用卡片布局，什么情况下优先使用网格布局。参考答案及详细解析一、单项选择题答案及解析1.答案：B解析：375×667px是移动端UI设计的基准尺寸，是行业通用设计规范，所有多倍图、适配规则均以此为基础；720、1080为设备分辨率，不作为设计稿基准尺寸。2.答案：B解析：留白是UI核心设计手法，核心作用是梳理页面节奏，区分主次信息，避免页面拥挤杂乱，提升用户阅读和操作体验，并非单纯装饰页面。3.答案：B解析：低饱和色系视觉柔和、耐看、适配场景广，符合大众审美；高饱和强对比色彩刺眼、易视觉疲劳，仅适合小众潮流类产品，不通用。4.答案：B解析：44×44px是移动端国际通用最小点击热区标准，可有效避免用户误触、点不动的问题，过小尺寸按钮会严重影响操作体验。5.答案：B解析：页面字体层级需简洁清晰，过多字号会打乱视觉节奏，常规页面仅需标题、副标题、正文、辅助文字4种以内字号，严格区分信息权重。6.答案：B解析：下拉刷新、上拉加载是贴合用户手势习惯的交互方式，无需跳转页面即可更新、加载内容，大幅降低用户操作成本，提升浏览连贯性。7.答案：A解析：1000-1200px是网页UI标准安全版心，可完美适配电脑主流屏幕，避免内容过宽导致阅读疲劳，同时适配移动端自适应跳转。8.答案：C解析：UI设计核心包含视觉设计、图标组件设计、交互逻辑设计、页面排版落地，代码编写属于前端开发工作，不属于UI设计范畴。9.答案：B解析：遵循用户从左到右的阅读习惯，次要操作（取消）居左，核心操作（确认）居右，是行业统一交互规范，降低用户认知成本。10.答案：B解析：RGB为屏幕发光显色模式，所有电子屏幕UI设计均使用该模式；CMYK为印刷模式，仅用于纸质物料设计。11.答案：B解析：移动端三大栏目的核心作用是统一产品框架，帮助用户实时定位当前页面、快速切换功能、返回首页，保障操作逻辑连贯。12.答案：B解析：图标统一的核心是风格规范统一，包含线条粗细、圆角、透视、描边样式；颜色、尺寸可根据场景微调，无需完全一致。13.答案：A解析：卡片式布局分区清晰、信息模块独立，适合展示资讯、商品、订单等需要单独展示完整信息的列表内容，可读性更强。14.答案：B解析：容错性设计是交互核心原则，指预判用户误操作，提供纠错提示、撤销操作、返回重置等功能，降低用户操作失误后的使用成本。15.答案：B解析：为适配不同分辨率手机设备，UI切图必须输出1倍、2倍、3倍图，保证高低配手机图标、按钮显示清晰，无模糊、拉伸问题。二、判断题答案及解析1.×解析：界面配色遵循“少而精”原则，常规产品主色+辅助色+中性色即可，颜色过多会杂乱无章，拉低页面质感。2.×解析：圆角按钮柔和百搭，但功能性强、需要凸显严肃感的按钮（删除、注销、警示按钮）可使用直角或小圆角，并非全部适配。3.√解析：UI设计的核心宗旨是美观服务于实用，优先满足用户操作、阅读需求，再优化视觉效果。4.×解析：页面文字必须预留左右安全边距，紧贴边缘会造成阅读压抑、视觉拥挤，是设计基础禁忌。5.×解析：产品需遵循交互一致性原则，相同功能的按钮、图标、操作逻辑必须统一，避免用户认知混乱。6.√解析：浅底深字对比度适中，视觉舒适、长时间阅读不易疲劳，是适配所有用户的通用文字配色规范。7.×解析：整套产品图标必须统一视觉规范，风格混乱会导致产品视觉不统一，降低用户使用质感。8.√解析：弹窗属于即时提示内容，文案必须简洁直白、重点突出，冗长文字会增加用户阅读负担。9.×解析：优质UI设计需要兼顾多设备适配，手机、平板、网页端需同步适配，保证全终端体验统一。10.√解析：合理留白是提升界面高级感、梳理信息层级的关键，能够有效区分模块，提升页面透气度。三、简答题详细答案1.答案：核心作用：梳理页面信息主次关系，引导用户视觉流向，让用户快速抓取核心内容，降低阅读和操作成本，让页面逻辑清晰有序。常用搭建方式：①字号字重区分：标题加粗加大，正文常规字号，辅助文字缩小弱化；②色彩深浅区分：核心信息高对比、高亮展示，次要信息低饱和、浅色调弱化；③间距留白区分：核心模块间距宽松，次要内容紧凑，用留白分割信息层级。2.答案：适用场景：功能模块固定、核心功能较少（3-5个）的移动端APP，比如社交、生活服务、工具类、电商基础版产品。核心优势：①贴合用户手持手机的操作习惯，底部区域触控便捷；②核心功能入口常驻页面，切换无需跳转，操作效率高；③视觉分区清晰，用户可快速识别产品核心功能，认知成本低。3.答案：组件化设计是将页面中重复使用的按钮、输入框、卡片、弹窗、标签等元素统一规范、封装成固定组件。团队协作帮助：统一团队设计规范，避免多人设计出现样式混乱，新人可快速上手，统一产品整体视觉风格。项目迭代帮助：减少重复设计工作，提升设计效率；前端可直接复用组件代码，降低开发成本；后续功能迭代、样式修改可一键统一调整，维护成本更低。4.答案：①层级规范：严格区分标题、正文、辅助文字、备注文字字号，层级不混乱；②字重规范：核心重点文字加粗，常规正文常规字重，避免随意加粗；③行间距规范：正文行间距设置合理，避免文字拥挤或间距过大，保证阅读流畅；④配色规范：文字采用分层配色，正文深灰、辅助文字浅灰，避免纯黑刺眼；⑤对齐规范：页面文字统一左对齐，标题可居中对齐，杜绝杂乱对齐。（任意4点即可满分）四、案例实操分析题详细答案1.优化方案及理由：①放大文字字号、优化文字配色：中老年用户视力偏弱，增大正文及功能文字字号，放弃高饱和强对比配色，使用柔和深灰文字+浅白背景，提升阅读舒适度，避免视觉刺眼。②放大按钮尺寸、统一圆角样式：将功能按钮尺寸放大，满足44×44px最小热区标准，适配中老年用户手指操作，减少误触、点不动问题，统一按钮样式提升界面整洁度。③梳理功能入口、分类分区展示：将杂乱的功能入口按缴费、挂号、资讯三大核心板块分类，用卡片、留白分割模块，降低用户查找功能的难度。④简化界面元素、弱化冗余装饰：去除多余花哨的动效、装饰元素，界面以简洁实用为主，减少视觉干扰，贴合中老年用户简约直观的使用需求。2.布局对比及适用场景：卡片式布局优点：信息展示完整，每个商品可展示标题、简介、价格、标签、评价等全部信息，模块独立、分区清晰，视觉质感强；缺点：单屏展示商品数量少，浏览效率较低。网格布局优点：排版紧凑，单屏可展示更多商品，浏览速度快，适合批量筛选；缺点：单个商品信息