前期需求与规划

需求沟通与分析：对接产品目标（如用户群体、核心功能、商业诉求），明确设计方向（如风格定位：极简、科技、可爱等），梳理功能优先级。

竞品分析与参考：分析同类产品的 UI 设计亮点与不足，提炼可复用的设计逻辑（如操作流程、视觉符号），避免设计漏洞。

用户体验（UE）基础规划：配合产品经理梳理用户操作流程（如注册 - 登录 - 核心功能路径），确保逻辑顺畅（避免 “用户找不到功能” 等问题）。

核心视觉与界面设计

根据产品载体（移动端、PC 端、智能硬件等），提供针对性设计：

移动端 UI 设计（APP / 小程序 / H5）界面视觉设计：启动页、首页、功能页（如列表页、详情页、表单页）、个人中心等全页面设计，包含布局、色彩、字体、图标等视觉元素。

交互细节设计：按钮点击反馈（如颜色变化、微动效）、弹窗样式、加载状态（如骨架屏、loading 动效）、空状态（无数据时的提示界面）等。

适配设计：适配不同手机尺寸（如 iOS/Android 主流机型）、深色模式 / 浅色模式切换、横竖屏适配。

PC 端 UI 设计（网页 / 客户端）网页 UI 设计：官网、后台管理系统（如 CRM、ERP）、工具类软件界面等，需考虑大屏幕布局合理性（如多栏结构、信息层级）。交互逻辑适配：针对鼠标操作（如悬停、拖拽）设计反馈（如按钮悬停效果、下拉菜单），优化信息密度（避免页面过长或过空）。

设计规范与标准化输出

UI 设计规范（Design System）
制定统一的设计规则：如色彩规范（主色、辅助色、禁用色）、字体规范（字号、行高、字体类型）、组件规范（按钮、输入框、卡片等复用组件的尺寸 / 样式），确保产品迭代中视觉一致性。

组件库（Component Library）
输出可复用的设计组件（如 Figma 组件库），方便后续快速调用，也便于开发对接（减少沟通成本）。

原型与动效设计

原型设计

低保真原型：用线框勾勒页面结构、功能位置（用于快速确认逻辑）；

高保真原型：接近最终视觉效果的原型，可模拟简单交互（如跳转、弹窗），用于客户确认设计方案。

动效设计
核心场景动效：如页面切换过渡、按钮点击动效、数据加载动画、交互动画（如下拉刷新），提升用户体验（常用工具：AE、Principle、Figma 动效功能）。

落地支持与优化

开发对接
输出设计交付物：标注图（明确元素尺寸、间距、颜色值）、切图（适配不同分辨率的图标 / 图片），配合开发解决还原问题（如视觉偏差调整）。

测试与优化
根据用户测试反馈（如 “某按钮不易点击”“色彩太刺眼”）或数据反馈（如某页面跳出率高），优化界面设计，提升易用性。