UI设计面试上机实操试题及详细参考答案（企业实战版）

UI设计面试上机实操试题及详细参考答案（企业实战版）适用场景：初级/中级UI设计师面试、线上上机测评、入职实操考核、岗位能力筛查考试说明：整套试题贴合互联网、政企软件、移动端产品主流设计需求，摒弃理论空谈，全部为上机实操题型，覆盖视觉设计、界面改版、设计规范、交互逻辑、落地适配核心能力。答案侧重实战落地、贴合职场工作标准，无空洞套话。考试时长：120分钟满分：100分工具要求：Figma、Sketch、PS、XD任选其一，输出高清效果图+简单标注即可作答要求：界面整洁统一、符合主流设计审美、适配移动端/网页端规范、交互逻辑合理、可直接落地开发，细节严谨、配色协调、层级清晰。试题一：移动端APP首页视觉优化实操（25分）【实操题目】提供一款普通生活服务类APP首页原始界面（常规结构：顶部导航栏+搜索框、中部轮播图、功能入口宫格、资讯卡片、底部tab栏），原始界面存在配色杂乱、字体层级混乱、卡片无呼吸感、元素堆砌、风格老旧问题。请基于原图进行整体视觉改版优化，保留原有功能结构、不增减功能模块，仅做视觉升级、版式规整、细节优化。具体要求：1.统一整体视觉风格，采用简约清爽的现代商务生活服务风；2.梳理字体层级、色彩体系、间距规范，解决界面拥挤杂乱问题；3.优化卡片圆角、阴影、留白，提升界面质感和呼吸感；4.优化图标样式，保证线条统一、粗细一致、风格统一；5.适配主流移动端屏幕尺寸，保证整体协调统一。【详细参考答案&实操落地思路】一、整体风格定位放弃原图高饱和、多色堆砌的老旧风格，定位简约轻量化生活服务风格，主色选用低饱和蓝绿色，贴合便民服务、日常使用的产品调性，辅助色仅用于重点按钮、提示标签，中性色区分文本层级，整体干净通透、适配全年龄段用户。二、核心优化细节（落地可直接复用）1.色彩体系规整：统一三色体系，主色固定品牌主色，辅助色控制在2种以内，取消界面多余杂色；正文、次要文本、占位文本、分割线分别对应固定中性色，杜绝文字颜色随意混用，保证视觉统一。2.字体层级重构：建立清晰字体规范，页面大标题、模块小标题、正文内容、辅助说明文字，区分字号、字重、颜色；标题加粗突出层级，正文常规字重保证可读性，说明文字弱化处理，解决文字大小混乱、重点不突出的问题。3.版式留白优化：统一全局间距规范，模块之间、卡片内边距、元素间距标准化；取消紧凑堆砌的排版，增加合理留白，让每个功能模块独立清晰，提升界面呼吸感；所有卡片统一圆角数值、统一柔和浅阴影，去除厚重深色阴影，适配现代移动端审美。4.图标视觉统一：全部功能入口图标统一线性风格，线条粗细保持一致，圆角统一处理；取消异形、渐变、卡通混搭图标，纯色简约图标适配整体界面，辨识度更高、视觉更整洁。5.细节精细化处理：轮播图增加圆角裁切，搭配轻微渐变蒙版提升质感；底部tab栏图标和文字状态区分清晰，选中态突出、未选中态弱化；按钮统一圆角、配色、hover状态样式，交互视觉统一。三、优化核心逻辑本次优化不改动产品功能和用户路径，只做视觉标准化、细节精细化，核心是解决“乱、杂、挤、旧”四大问题，在保留原有业务逻辑的前提下，提升页面质感、可读性和用户体验，符合商业化APP设计落地标准。试题二：登录注册页面原创设计（25分）【实操题目】原创设计一款移动端教育类APP登录注册页面，包含登录页、注册页两个界面，无需复杂动效，保证界面完整、规范、可用。具体要求：1.风格简约年轻化，贴合学生、家长用户群体；2.包含完整登录、注册核心功能模块；3.适配手机端交互习惯，布局合理、操作便捷；4.自带基础设计规范，字体、配色、间距统一；5.区分普通状态、输入聚焦状态、错误提示状态。【详细参考答案&实操落地思路】一、整体设计定位整体采用极简轻量化设计，主色调选用柔和的青蓝色，贴合教育行业专业、安心、青春的调性，无多余花哨装饰，重点突出输入区域和操作按钮，降低用户操作成本，适配学生及家长核心用户群体。二、页面完整功能布局1.登录页布局：顶部放置简约品牌LOGO+产品slogan，居中展示核心登录区域；包含手机号输入框、密码输入框、忘记密码入口；底部设置登录主按钮、第三方快捷登录入口、跳转注册页文字链接。2.注册页布局：延续登录页视觉风格，保持界面统一；包含手机号输入、验证码获取、密码设置、确认密码输入模块；增加用户协议、隐私政策勾选条款，底部设置注册按钮、跳转登录链接。三、状态与细节规范设计1.常规状态：输入框底色干净、边框浅淡，占位文本颜色弱化，整体简洁清爽，无视觉干扰。2.聚焦状态：输入框选中时，边框切换为主色调，搭配轻微底色提亮，明确提示用户当前操作位置，提升交互感知。3.错误状态：输入格式错误、未填写内容时，输入框边框变红，下方展示浅红色小字错误提示，提示文案通俗直白，如“请输入正确手机号”“密码长度不少于6位”。4.按钮状态区分：内容未填写完整时，按钮置灰不可点击；内容填写完整后，主色按钮高亮可点击，状态区分清晰，符合用户操作认知。四、适配与规范要点整体页面居中对称布局，留白均匀，所有输入框、按钮尺寸统一标准；字体层级清晰，标题醒目、辅助文字弱化；全程无多余装饰元素，保证页面干净专业，同时兼顾年轻化审美，适配教育产品定位。试题三：移动端界面设计规范梳理与落地（25分）【实操题目】基于常用移动端APP设计标准，上机梳理并制作一套基础移动端UI设计规范组件库，只需输出核心基础组件，无需完整页面。具体要求：1.整理色彩规范、字体规范；2.制作按钮、输入框、卡片、标签基础组件；3.标注关键尺寸、色值、字号参数，可直接交付开发落地；4.组件风格统一、参数标准、符合行业通用规范。【详细参考答案&实操落地思路】一、色彩规范（移动端通用落地标准）1.主色：选用通用适配性强的品牌主色，用于主按钮、重点文字、选中状态、核心图标，统一页面重点视觉；2.辅助色：成功绿、警告黄、错误红、提示蓝，仅用于状态提示，不做大面积使用；3.中性色：黑色用于标题、深灰用于正文、中灰用于辅助文字、浅灰用于占位文字和分割线、极浅灰用于页面背景，层级完全区分，杜绝文字颜色混乱。二、字体规范（适配移动端阅读）统一移动端无衬线字体，区分五级字体层级：页面大标题、模块标题、正文常规文本、辅助说明文本、小字备注文本；固定对应字号、字重、行高，保证移动端阅读舒适，无拥挤、无留白失衡问题。三、核心组件规范设计1.按钮组件：分为主按钮、次按钮、文字按钮、禁用按钮四种状态，统一圆角、高度、内边距；主按钮实心主色、次按钮线条样式、文字按钮无底色无边框，禁用按钮统一置灰，样式区分清晰、逻辑统一。2.输入框组件：统一高度、圆角、内边距，包含常规、聚焦、禁用、错误四种状态，搭配对应提示文案样式，适配所有表单页面使用场景。3.卡片组件：统一圆角、浅阴影、内边距，默认白底基础样式，可通用在资讯、功能、数据展示等所有模块，保证页面模块质感统一。4.标签组件：常规、成功、警告、失效四类标签，统一圆角、字号、内边距，配色柔和不刺眼，用于状态标注、分类提示。四、落地交付要点所有组件参数标准化，关键色值、字号、尺寸、间距全部标注清晰，组件可复用、可迭代，能够直接用于整套APP界面设计，减少重复工作量，保证团队设计统一、开发落地无偏差。试题四：交互逻辑优化与改版设计（25分）【实操题目】现有一款工具类APP的“个人中心”页面，存在以下问题：功能入口杂乱、重要功能隐藏较深、操作路径繁琐、信息层级混乱、用户找不到核心功能。请你上机完成页面重构+交互优化设计，保留全部原有功能，优化信息层级和操作逻辑。具体要求：1.重构页面版式，梳理信息层级，主次分明；2.优化功能分类，整合杂乱入口，简化操作路径；3.提升页面实用性和美观度，适配用户使用习惯；4.输出优化后效果图，并标注核心优化思路。【详细参考答案&实操落地思路】一、核心问题梳理原页面核心问题为功能堆砌、无分类、主次颠倒，高频功能和低频功能混杂，用户操作成本高，交互逻辑不符合大众使用习惯，视觉上杂乱无章，重点信息不突出。二、页面重构与层级优化方案1.顶部信息区重构：页面顶部统一设置用户头像、昵称、账号状态基础信息，简洁清晰，替代原有零散杂乱的个人信息展示方式，第一眼让用户明确个人中心定位。2.功能分区整合归类：将零散功能入口按照使用场景分类，划分为核心常用功能、账号设置功能、服务帮助功能、其他拓展功能四大模块；高频使用的订单、记录、收藏、消息前置展示，低频的隐私设置、关于我们、客服反馈后置摆放，贴合用户使用频次。3.简化交互路径：核心功能一键直达，取消多余二级跳转；常用操作无需多层点击，减少用户操作步骤，提升使用效率；相同属性功能合并整合，杜绝重复入口、冗余功能。4.视觉层级优化：模块之间通过间距、分割线轻微区分，不做过度装饰；重点功能卡片轻微提亮、突出展示，普通功能统一样式，保证视觉整洁的同时，突出核心操作。三、整体优化核心逻辑本次改版遵循“高频优先、主次分明、分类清晰、操作极简”的交互设计原则，不删减任何原有业务功能，通过重新梳理信息层级、整合功能模块、优化视觉呈现，解决页面杂乱、操作繁琐的问题