UI设计笔试题及答案.docxVIP

UI设计笔试题及答案

一、基础认知题（每题5分，共20分）

请解释“像素密度（PPI）”与“屏幕适配”的关系，设计移动端界面时需注意什么？

简述UI设计中“设计规范”的核心作用，若团队新启动一个社交APP项目，你会从哪些维度搭建基础规范？

什么是“交互原型”？低保真原型与高保真原型的适用场景分别是什么？

列举3种UI设计中常用的色彩模式，并说明各自的应用领域（如RGB、CMYK等）。

二、实操设计题（每题25分，共50分）

请为某电商APP设计“购物车页面”，需包含以下元素：商品列表（含图片、名称、单价、数量调整）、勾选功能、合计金额、“去结算”按钮、“清空购物车”按钮。要求：

说明设计思路（如布局逻辑、视觉优先级）；

指出需考虑的异常场景（如购物车为空、商品库存不足）及对应设计方案。

某工具类APP需新增“夜间模式”，原APP主色调为蓝色（#1E88E5），请说明：

夜间模式下的色彩调整原则；

主色调、背景色、文字色的具体色值建议（需符合护眼需求）；

图标、按钮在夜间模式下的视觉处理方式。

三、逻辑分析与协作题（每题15分，共30分）

产品经理提出“在首页增加一个悬浮广告弹窗，点击可跳转至活动页”，但你认为该弹窗会影响用户体验，如何与产品经理沟通？请简述沟通思路与核心论据。

开发工程师反馈你设计的“滑动切换标签”功能难以实现，技术上存在兼容性问题，你会如何处理？请说明解决流程。

参考答案

一、基础认知题答案

像素密度与屏幕适配关系：PPI指单位英寸内的像素数量，PPI越高屏幕显示越清晰；屏幕适配需根据不同设备PPI（如普通屏、视网膜屏）调整界面元素尺寸，避免模糊或变形。移动端设计注意：①采用“逻辑像素”设计（如iOS的pt、Android的dp），由开发适配物理像素；②关键元素（如按钮）尺寸不小于44×44pt，保证触控便捷；③图标、字体需适配多分辨率，避免拉伸失真。

设计规范作用：统一视觉风格、提升开发效率、降低维护成本、保障用户体验一致性。社交APP基础规范维度：①视觉基础（主/辅/中性色值、字体体系、圆角/阴影规范）；②组件库（按钮、输入框、弹窗、列表等样式）；③交互规范（导航逻辑、手势反馈、加载状态）；④资源规范（图标格式/尺寸、图片压缩标准）。

交互原型：用可视化方式模拟APP/网页的交互流程与功能逻辑的载体。低保真原型（如线框图）适用场景：需求初期沟通、快速验证交互逻辑（如用户测试），侧重流程完整性；高保真原型适用场景：视觉效果展示、最终用户体验测试，侧重还原真实界面细节（如色彩、动效）。

常用色彩模式：①RGB：适用于屏幕显示（APP、网页），由红、绿、蓝三原色混合；②CMYK：适用于印刷品（如宣传册、包装），由青、品红、黄、黑四色油墨混合；③HSB：适用于设计调色，通过色相（H）、饱和度（S）、明度（B）精准控制色彩，便于统一色调。

二、实操设计题答案

购物车页面设计思路：

布局逻辑：采用“顶部操作栏+中部商品列表+底部结算栏”纵向布局，符合用户上下滑动浏览习惯；视觉优先级：商品勾选框（左对齐，便于批量操作）→商品信息（图片左、文字中，突出名称与单价）→数量调整（右对齐，操作便捷）→合计金额与结算按钮（底部固定，强化转化）。

异常场景处理：①购物车为空：显示“空空如也”插画+引导文案（如“去首页逛逛吧”）+“去首页”按钮；②商品库存不足：数量调整按钮置灰，显示“库存仅剩X件”提示，勾选框可选（结算时再提醒库存不足）。

夜间模式设计方案：

色彩调整原则：降低亮度对比度（避免强光刺激）、减少蓝色光占比（护眼）、保持色彩辨识度（与日间模式对应）。

色值建议：主色调#4A90E2（降低饱和度与明度）、背景色#121212（深灰而非纯黑，减少视觉疲劳）、文字色#E0E0E0（浅灰而非纯白，降低刺眼感）。

视觉处理：图标采用“白色描边+低饱和度填充”（如原蓝色图标改为#4A90E2填充+白色描边）；按钮取消高亮阴影，采用“浅灰边框+低饱和底色”，点击反馈为“颜色加深”而非“高亮闪烁”。

三、逻辑分析与协作题答案

与产品经理沟通思路：

先认可需求目标：“理解您想通过弹窗提升活动曝光，最终促进转化”；

提出体验问题：①首页是核心流量入口，弹窗易打断用户浏览路径（如用户正在找商品，弹窗弹出会中断操作）；②高频弹窗可能导致用户反感，甚至触发“关闭通知”或卸载；

给出替代方案：①将广告放在首页“活动专区”模块（非强制浏览，不干扰核心流程）；②采用“顶部Banner+下拉提示”（仅占用顶部空间，用户可主动忽略）；

数据