2026年UI设计岗位上机练习题(含答案)

2026年UI设计岗位上机练习题(含答案)考试说明：本次UI设计岗位上机测试总时长180分钟，满分100分，允许使用工具为Figma2026正式版、AdobeIllustrator2026版、MidjourneyV7/即时AI2026版、Rive2026动效工具，禁止直接使用商用素材包，所有AI生成元素需经二次调整达到原创可商用标准，提交内容包含源文件、导出预览图、设计说明文档三类。第一部分基础技能实操题（共3题，合计30分，建议用时40分钟）第1题：AI辅助多尺寸图标适配题分值：10分考查要点：AI工具协同设计能力、像素完美图标设计能力、无障碍色彩校验能力题目要求：某新能源汽车品牌车机系统需新增“舒适模式”功能图标，适配深色模式（背景色为#1A1D21），请使用AI生成工具产出图标初版，手动调整为适配16×16px、24×24px、48×48px三种尺寸的像素完美图标，所有尺寸下的图标与背景对比度需满足WCAG2.2AA级图形控件要求（≥3:1），图标风格需与车机系统的极简科技风统一。参考答案及评分标准：1.AI生成初版（3分）：使用提示词“极简线性科技风功能图标，主题为汽车舒适模式，核心元素为汽车座椅+柔和暖风波纹，无多余装饰，单线条，无渐变无阴影，透明背景，矢量输出”生成初版，要求元素辨识度清晰，无冗余线条（提示词不精准扣1分，元素偏离主题扣2分）。2.多尺寸像素对齐调整（4分）：48×48px：图标线条宽度3px，座椅保留缝线细节，暖风波纹为2层，所有锚点对齐整数像素，图标居中放置，四周留4px安全边距；24×24px：图标线条宽度2px，简化座椅缝线细节，暖风波纹保留1层，锚点对齐整数像素，四周留2px安全边距；16×16px：图标线条宽度1.5px，移除暖风波纹细节，仅保留座椅简化轮廓，锚点对齐整数像素，四周留1px安全边距；（每少一个尺寸的适配扣1分，存在半像素模糊问题每个尺寸扣1分，扣完为止）3.无障碍色彩校验（3分）：图标主色选用#4CD964，经WebAIM对比度工具校验，与背景#1A1D21的对比度为8.1:1，满足WCAG2.2AA级图形控件要求（色值对比度不达标扣2分，未提供校验依据扣1分）。第2题：无障碍色彩规范校验与调整题分值：10分考查要点：无障碍设计规范掌握程度、色彩系统调整能力、特殊人群适配能力题目要求：某生鲜电商APP浅色模式色板如下：主色#FF6B35、辅助色1#FFD166、辅助色2#06D6A0、错误色#EF476F、一级文本#111827、二级文本#6B7280、背景色#FFFFFF。请校验所有色值与白色背景的组合在14px/400字重文本场景下的WCAG2.2AA级合规性，找出所有不符合的组合，给出调整后的色值（需保留原有色彩的色相倾向性），同时输出红绿色盲（红绿色弱/全色盲除外）适配的替换色板，适配后仍需满足AA级对比度要求。参考答案及评分标准：1.不符合组合识别（3分）：经Figma内置ColorContrast插件校验，不符合的组合为：辅助色1#FFD166作为文本与白色背景组合，对比度为1.42:1，远低于4.5:1的AA级正常文本要求；错误色#EF476F作为文本与白色背景组合，对比度为3.58:1，未达到4.5:1的AA级正常文本要求；辅助色2#06D6A0作为文本与白色背景组合，对比度为2.97:1，未达到4.5:1的AA级正常文本要求；（每漏一个错误组合扣1分，扣完为止）2.色值调整方案（3分）：保留原有色相，调整明度/饱和度至达标：辅助色1（黄色相）调整为#8A6D00，与白色背景对比度为4.62:1，满足AA级要求；错误色（红色相）调整为#D92B5A，与白色背景对比度为4.71:1，满足AA级要求；辅助色2（绿色相）调整为#0E8A6B，与白色背景对比度为4.58:1，满足AA级要求；（每调整错误一个色值扣1分，对比度不达标扣0.5分，扣完为止）3.红绿色盲适配方案（4分）：基于红绿色盲视觉模型（Protanopia/Deuteranopia）调整色板，通过拉大明度差、替换色相避免主色（橙红）与辅助色2（绿色）混淆：主色调整为#FF8A3D（橙调，明度提高，对比度5.2:1）；辅助色2调整为#2563EB（蓝调，替换原绿色相，对比度4.8:1）；错误色调整为#7C3AED（紫调，替换原红色相，对比度4.9:1）；辅助色1保留调整后的#8A6D00，一级文本、二级文本、背景色保持不变；经Coblis色盲模拟器校验，红绿色盲用户可清晰区分所有功能色，且全部满足AA级对比度要求（未替换易混淆色扣2分，对比度不达标扣1分，无校验依据扣1分）。第3题：组件变体批量生成题分值：10分考查要点：组件化设计思维、Figma组件属性应用、自动布局能力题目要求：基于Figma组件属性功能，制作一套通用按钮组件，需包含3种尺寸（大号/中号/小号）、2种状态（默认/禁用）、2种风格（填充/描边）共12种变体，所有变体支持自动布局、文本可编辑、左侧图标插槽可自定义，且宽度可随内容自适应。参考答案及评分标准：1.基础组件搭建（3分）：新建中号填充按钮为基础组件，设置自动布局为水平方向，内边距16px垂直/24px水平，元素间距8px，文本样式为14px/500字重，图标插槽为20×20px的实例占位符，圆角8px，最小宽度80px（自动布局设置错误扣2分，无图标插槽扣1分）。2.组件属性定义（3分）：添加4种组件属性：尺寸：枚举类型，选项为大号/中号/小号，对应内边距分别为24px垂直/32px水平、16px垂直/24px水平、8px垂直/16px水平，对应字号分别为16px/500、14px/500、12px/500，图标尺寸分别为24px、20px、16px；风格：枚举类型，选项为填充/描边，填充款背景为主色、文本为白色，描边款背景为透明、描边宽度1px、文本为主色；状态：布尔类型，选项为禁用，禁用态填充款背景不透明度调整为40%、文本不透明度60%，描边款描边不透明度40%、文本不透明度60%；左侧图标：实例插槽类型，支持替换任意图标组件；（每少一种属性扣1分，属性逻辑错误扣0.5分，扣完为止）3.变体生成与校验（4分）：使用Figma“批量生成变体”功能生成全部12种组合，逐一校验：所有变体支持文本编辑后自动调整宽度，图标替换后位置自动对齐，禁用态切换无样式错乱，尺寸切换时内边距、字号、图标尺寸同步变化（每少一种变体扣1分，变体样式错误每个扣0.5分，扣完为止）。第二部分场景化综合设计题（共2题，合计50分，建议用时90分钟）第1题：visionOS空间交互控件设计题分值：25分考查要点：空间UI设计逻辑、visionOS规范掌握、3D交互设计能力题目要求：某智能家居品牌推出visionOS空间应用，需设计“空调温度调节”3D控件，适配两种使用场景：客厅墙面悬浮、桌面放置。控件需支持凝视选中、手势捏合调节、语音指令联动三种交互方式，温度调节范围为16℃-30℃，1米观测距离下清晰可辨，符合ApplevisionOSHumanInterfaceGuidelines要求。参考答案及评分标准：1.视觉设计规范（7分）：控件形态：采用圆柱形3D结构，空间尺寸为80pt（直径）×120pt（高度），符合visionOS最小可交互控件（60pt）要求；表面为磨砂玻璃材质，带有10%的环境透射效果，适配不同空间环境；信息层级：正面中央显示当前温度数值，字号为24pt空间字号，1米距离下等效视觉大小为移动端16pt，对比度≥7:1；侧面设置环形进度条，宽度8pt，进度对应温度占比（16℃为0%，30℃为100%），温度从低到高进度条颜色从#2563EB渐变至#FF6B35，进度条带有2pt的发光效果，提升空间辨识度；（尺寸不符合规范扣3分，信息层级不清晰扣2分，材质风格不符合空间设计逻辑扣2分）2.交互逻辑设计（10分）：凝视选中：用户视线停留控件0.3秒后触发选中反馈，控件放大5%，同时外层出现12pt宽的淡蓝色发光描边，眼动追踪反馈延迟≤100ms；手势调节：支持捏合手势上下滑动调节温度，每1cm手势位移对应1℃温度变化，调节时伴随10dB的轻柔提示音，数值实时更新，进度条同步滚动，调节结束后0.5秒内自动保存设置；语音联动：接收“调高/调低温度”“设置为X度”语音指令后，控件环形进度条出现流动动画，200ms内更新数值，同时播报语音反馈“已调整为X度”；（每缺一种交互逻辑扣3分，交互反馈不完整扣1分，延迟不符合要求扣1分，扣完为止）3.多场景适配（8分）：客厅墙面悬浮场景：控件深度设置为-0.5m（相对于用户初始位置），法线方向与墙面平行，自带15%的环境光遮蔽效果，避免墙面反光影响可读性，支持凝视拖拽调整位置，拖拽时贴边吸附；桌面放置场景：控件底部添加8pt模糊的软阴影，深度设置为0.2m（桌面平面上方），支持手势拖拽移动，碰撞桌面边缘时自动停止，可与其他智能家居控件组合排列；（每缺一个场景适配扣4分，场景适配逻辑不符合真实空间体验扣2分）第2题：AI原生功能页面设计题分值：25分考查要点：AI原生界面设计能力、用户体验逻辑、移动端交互适配题目要求：某办公协同软件新增“AI会议纪要生成”功能，需设计移动端的「会议中页面」和「纪要生成结果页」，核心需求包括：实时录音转写、AI重点提炼、纪要编辑/导出、AI生成内容可溯源（每个提炼要点可跳转对应录音片段）。需满足会议场景下的单手操作需求，沿用产品原有蓝白主色的设计语言（主色#3B82F6）。参考答案及评分标准：1.核心功能优先级与信息架构（8分）：会议中页面：采用从上到下的三级层级，顶部10%区域为会议信息栏（会议名称、已开时长、参会人数，字号12px-14px），中间70%区域为实时转写区（自动滚动，当前说话人姓名+文本高亮，支持左滑标记重点），底部20%区域为操作栏（左：暂停录音；中：AI提炼悬浮按钮，直径56px；右：结束会议），所有操作按钮均位于屏幕底部40%的单手操作热区内，6.7寸手机下单手可达率≥92%；纪要结果页：顶部为AI提炼概览区（核心议题、行动项、待决策三类标签，标签下展示对应要点数量），下方为完整转写文本区，底部为操作栏（编辑、导出、分享），核心功能路径不超过2步；（信息层级混乱扣3分，单手操作适配不到位扣3分，核心功能路径过长扣2分）2.AI可溯源设计（9分）：每个AI提炼的要点卡片右侧设置“跳转录音”图标，点击后自动滚动到对应时间戳的转写文本位置（文本高亮3秒），同时录音自动播放该时间点前后3秒的内容；AI生成内容用淡紫色（#F5F3FF）背景卡片区分，人工标记的重点用淡黄色（#FFFBEB）背景区分，视觉上明确标识内容来源；要点卡片底部标注对应录音时间戳（如00:12:35-00:13:10），支持长按复制时间戳；（可溯源逻辑缺失扣5分，内容来源无区分扣2分，交互反馈不清晰扣2分）3.视觉一致性与细节优化（8分）：沿用产品原有设计语言，主色#3B82F6，AI相关元素采用紫蓝渐变（#8B5CF6→#3B82F6）标识，所有文本对比度满足WCAG2.2AA级要求；实时转写文本采用14px字号、22px行高，行间距优化为8px，提升长时间阅读舒适度；录音过程中添加呼吸灯动效（顶部状态栏红色小圆点，2秒一次淡入淡出），避免用户误以为录音中断；（视觉风格不统一扣3分，无障碍不达标扣2分，细节缺失扣3分）第三部分设计输出与规范题（共1题，合计20分，建议用时50分钟）第1题：设计规范与开发输出题分值：20分考查要点：设计系统搭建能力、开发对接逻辑、输出规范掌握题目要求：针对第二部分第2题的AI会议纪要功能，输出完整的设计规范与开发对接资源，需包含设计令牌（DesignTokens）、组件库结构、切图命名规范、多分辨率适配方案，以及开发对接注意事项。参考答案及评分标准：1.设计令牌体系（7分）：色彩令牌：按功能分为品牌色、功能色、文本色、背景色4类，共12个令牌，支持深色模式自动映射，例如：-color-primary-brand:#3B82F6（主色，深色模式同）-color-ai-gradient:linear-gradient(135deg,#8B5CF60%,#3B82F6100%)（AI元素渐变）-color-text-primary:#111827（一级文本，深色模式映射为#F9FAFB）-color-bg-primary:#FFFFFF（主背景，深色模式映射为#111827）-color-success:#10B981、--color-warning:#F59E0B、--color-error:#EF4444（功能色）间距令牌：共6级，--spacing-xs:4px、--spacing-sm:8px、--spacing-md:16px、--spacing-lg:24px、--spacing-xl:32px、--spacing-xxl:48px字号令牌：共5级，--font-size-xs:12px、--font-size-sm:14px、--font-size-base:16px、--font-size-lg:18px、--font-size-xl:24px，行高统一为1.5倍圆角与阴影令牌：圆角4级（sm:4px、md:8px、lg:16px、full:9999px），阴影3级（sm/md/lg，对应不同使用场景）所有令牌支持通过FigmaTokens插件导出为JSON/CSS变量格式，可直接导入开发项目（令牌分类不清晰扣3分，缺少深色模式映射扣2分