UI设计师笔试题及答案.docxVIP

UI设计师笔试题及答案

一、基础概念题（每题5分，共20分）

请说明UI设计中“px”“dp”“sp”的区别，及各自适用场景。

答案：

px（像素）：屏幕最小显示单位，固定尺寸，适用于图标、边框等需精准控制尺寸的元素（如2px边框、48px×48px图标）；

dp（设备独立像素）：与设备屏幕密度无关的虚拟单位，解决不同分辨率设备适配问题，适用于布局尺寸（如按钮宽120dp、控件间距24dp）；

sp（缩放独立像素）：随系统字体大小变化，仅用于文本字体大小（如正文16sp、标题20sp），保证用户调整字体时文本可读性。

什么是“设计规范”？简述设计规范对团队协作的核心价值。

答案：

设计规范是统一产品视觉风格、交互逻辑、组件用法的文档（如颜色体系、字体层级、组件库等）。

核心价值：①减少重复设计（避免同一组件多次绘制）；②降低协作成本（设计师、开发对元素认知一致，减少沟通误差）；③保证产品一致性（不同页面、模块视觉/交互统一，提升用户熟悉度）。

二、交互逻辑题（每题10分，共30分）

某APP登录页，用户输入手机号后点击“获取验证码”，可能出现“手机号格式错误”“手机号已被注册”“验证码发送成功”三种状态。请设计这三种状态的交互反馈，需说明提示位置、样式及用户操作引导。

答案：

手机号格式错误：输入框底部显示红色文本提示（如“请输入11位有效手机号”），输入框边框变红，聚焦输入框（方便用户直接修改）；

手机号已被注册：弹出居中弹窗（标题“提示”，内容“该手机号已注册，是否直接登录？”），底部设“登录”“取消”按钮（引导用户跳转登录页，避免重复注册）；

验证码发送成功：按钮变为“60s后重新获取”（倒计时动态显示），输入框下方显示灰色提示“验证码已发送至138****5678”，自动聚焦验证码输入框（减少用户操作步骤）。

设计一个“下拉刷新列表页”的交互流程，需包含“下拉中”“刷新中”“刷新成功”“刷新失败”四种状态的视觉与交互设计。

答案：

下拉中：列表顶部显示下拉提示图标（如箭头向下）+文本“下拉可刷新”，随下拉距离拉伸图标；

刷新中：下拉到阈值后释放，图标变为加载动画（如环形进度条），文本“刷新中...”，列表不可滚动；

刷新成功：加载动画变为对勾图标，文本“刷新成功”，1s后顶部提示栏收起，列表显示新数据；

刷新失败：加载动画变为感叹号图标，文本“刷新失败，请重试”，提示栏保留，点击提示栏可重新触发刷新（降低用户操作成本）。

三、场景设计题（每题25分，共50分）

需求：为某电商APP设计“商品列表页”，用户反馈当前页面“加载慢、信息乱、找不到想要的商品”。请从视觉设计、交互优化两方面给出解决方案（需说明核心设计思路）。

答案：

视觉设计优化：

①信息分层：突出核心信息（商品图、名称、价格），弱化辅助信息（销量、好评率）——商品图占比30%（高清圆角图），名称最多2行（超出省略），价格用橙色加粗（区分原价/优惠价）；

②视觉引导：按“商品图→名称→价格→操作按钮”的视觉流排版，同类型信息对齐（如所有价格左对齐），用浅灰色分隔线区分商品项（避免信息混乱）。

交互优化：

①加载优化：首屏用“骨架屏”占位（减少空白等待焦虑），滚动加载下一页时底部显示“加载中...”提示，加载失败显示“点击重试”按钮；

②筛选便捷化：顶部固定筛选栏（包含分类、价格区间、销量排序），点击筛选项弹出轻量弹窗（而非跳转新页），筛选后列表顶部显示“已选：XX”标签（方便用户回溯）。

需求：为某金融APP设计“转账成功页”，需满足“用户快速确认信息、有安全感、知道下一步做什么”的需求。请说明页面核心元素及设计逻辑。

答案：

核心元素：

①成功标识：顶部居中显示绿色对勾图标（尺寸48dp）+“转账成功”标题（20sp加粗）；

②关键信息区：居中显示“转账金额”（橙色32sp加粗，带“￥”符号）、“收款人”“转账时间”“订单号”（每项左对齐，标签用灰色14sp，内容用黑色16sp）；

③操作按钮区：底部设两个按钮（“查看账单”“继续转账”，宽度180dp，高度44dp，主按钮用蓝色背景，次按钮用白色边框）。

设计逻辑：

①安全感：用绿色（积极信号）、清晰的关键信息（避免用户猜疑）、订单号（提供凭证）增强信任；

②便捷性：关键信息居中（符合视觉焦点），金额突出（用户最关心的信息）；

③引导性：操作按钮覆盖“回顾”（查看账单）和“下一步”（继续转账）场景，按钮文案明确（避免“返回”等模糊表述），符合用户后续潜在需求。