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

UI设计师笔试题

一、基础理解题（每题10分，共30分）

请举例说明“亲密性原则”在移动端APP界面设计中的应用，并解释这么设计的优势。

设计中“视觉层级”的核心作用是什么？在设计电商APP商品详情页时，你会通过哪些设计手段构建视觉层级？

什么是“设计系统”？小型创业公司的UI团队（2-3人）是否需要搭建设计系统？为什么？

二、工具实操题（每题15分，共30分）

在Figma中，“组件变体（ComponentVariants）”与“组件实例（ComponentInstances）”的区别是什么？请描述一个实际工作场景，说明使用组件变体能提升设计效率的原因。

使用Photoshop设计移动端图标时，导出图标需要注意哪些细节？若开发反馈图标在Retina屏显示模糊，可能的原因有哪些？如何解决？

三、交互逻辑题（每题20分，共40分）

请设计一款“社区类APP”的“发布帖子”页面，需包含“文字输入”“图片上传”“话题选择”“预览”“发布”5个核心功能。请说明：

（1）页面的核心交互流程（用户从进入页面到发布成功的步骤）；

（2）设计时需考虑的异常场景（如图片上传失败、内容违规）及对应的反馈方式。

某外卖APP需新增“预约下单”功能（用户可选择未来1小时-24小时内的某个时间点送达），请说明：

（1）该功能在“确认订单”页面的最优放置位置及设计形式（文字/按钮/弹窗等）；

（2）如何通过设计避免用户误操作（如选择错误的预约时间）。

UI设计师笔试题答案

一、基础理解题答案

亲密性原则应用：例如移动端APP的“个人中心”页面，会将“头像+昵称+ID”放在同一区域，“我的订单”“我的收藏”“设置”等功能按钮各自成组（每组包含图标+文字）。优势：减少用户视觉干扰，让用户快速识别功能模块，降低认知成本；同时让界面布局更规整，避免元素零散导致的混乱感。

视觉层级作用：引导用户视线流向，让用户优先获取核心信息（如关键功能、重要内容），次要信息有序后置，提升信息获取效率。电商商品详情页构建手段：①用字号/字体粗细区分（商品名称用18号粗体，规格说明用14号常规体）；②用色彩对比突出（“加入购物车”按钮用高饱和品牌色，辅助说明用浅灰色）；③用间距/区块划分（商品信息区与评价区用分割线+16px间距分隔）；④用视觉元素强调（限时折扣标签用红色背景+感叹号图标）。

设计系统定义：一套包含设计规范（色彩、字体、组件）、组件库、设计流程的标准化体系，用于保证设计一致性与协作效率。小型创业公司需要搭建简易设计系统：①2-3人团队虽规模小，但APP迭代中易出现“同一功能不同设计”（如不同页面的按钮样式不一致），简易系统可避免混乱；②后续新人加入时，能快速上手，减少沟通成本；③对接开发时，标准化组件可降低开发还原偏差，且后续迭代只需更新组件，无需重复设计。

二、工具实操题答案

组件变体与实例区别：组件实例是组件的“复制品”，仅能修改组件预设的可编辑属性（如颜色、文字）；组件变体是同一类组件的“集合”（如按钮的“默认/hover/禁用”状态），可通过切换变体快速切换组件状态，且变体间共享基础属性（如尺寸、圆角）。高效场景：设计APP的“列表项”（包含“未选中/选中/已读/未读”4种状态），若用组件实例需创建4个独立组件，修改尺寸时需逐个调整；用组件变体只需创建1个变体组件，修改基础属性时所有状态同步更新，且切换状态时无需重新排版，提升迭代效率。

PS导出图标细节：①设置画布为“像素对齐”，避免图标边缘模糊；②按开发需求导出不同分辨率（如@2x、@3x），文件名标注分辨率（如icon_home@2x.png）；③导出格式优先选PNG-24（透明背景），避免压缩失真；④确保图标尺寸为偶数（如24px×24px），避免缩放后错位。模糊原因及解决：①原因：图标画布未按分辨率倍数设置（如@3x图标用24px画布，实际需72px）；导出时未勾选“消除锯齿”；解决：重新创建对应分辨率的画布，绘制时确保图形边缘对齐像素网格，导出勾选“消除锯齿”；②原因：开发未按对应分辨率调用图标（如将@2x图标当@3x使用）；解决：与开发确认分辨率需求，提供清晰的命名规范，附导出说明文档。

三、交互逻辑题答案

社区APP发布帖子页面设计：

（1）核心交互流程：用户进入页面→默认聚焦文字输入框（弹出键盘）→输入文字后，点击“图片上传”按钮（支持拍照/相册选择，最多上传9张，实时显示缩略图）→点击“话题选择”（弹出话题列表，支持搜