个人UI技能掌握清单
- 界面设计:会使用移动端(iOS/Android)、PC端界面布局,掌握响应式设计逻辑,能独立完成从低保真原型到高保真视觉稿的全流程设计
- 视觉设计:运用色彩搭配、版式构图、字体层级设计,具备图标设计(线性/面性/拟物)、插画绘制(扁平/肌理风格)能力
- 交互设计:理解用户体验(UX)核心原则,能设计合理的操作流程、反馈机制,熟练绘制用户流程图、线框图
- 动效设计:掌握基础动效逻辑(过渡、加载、反馈动效),能使用工具实现简单交互动效和页面转场效果
- 核心工具:会使用Figma、Sketch、Adobe XD(界面设计),Axure RP(原型设计),Photoshop(图片处理),Illustrator(矢量图形设计)
- 辅助工具:会使用Principle/AE(动效制作),FigJam/Miro(协作脑暴),Zeplin/Figma插件(标注切图),墨刀(快速原型)
- 行业认知:了解主流设计规范(iOS Human Interface Guidelines、Material Design),关注UI设计趋势(极简风、毛玻璃、3D质感等)
- 协作能力:能与产品经理、前端开发高效沟通,理解需求逻辑,配合完成设计还原与优化
- 设计思维:具备用户调研、需求分析、竞品分析能力,能基于数据反馈迭代优化设计方案
- 细节把控:注重设计一致性(色彩、字体、间距、图标风格),对像素级还原有严格要求
基础UI设计项目经验 项目一:个人生活类小程序界面设计(独立完成视觉设计)
- 项目背景:为满足日常记录、待办管理需求,设计轻量化个人工具类小程序,适配微信生态移动端场景。
- 核心职责:
1. 梳理首页、待办列表、添加页面、个人中心4大核心页面的信息架构,确保操作逻辑简洁;
2. 使用Figma完成视觉设计,确定简约清新的风格,统一图标、按钮、卡片等基础设计元素;
3. 优化文字大小、间距与色彩搭配,提升页面可读性,确保视觉舒适;
4. 输出设计稿与简单标注,配合前端实现基础界面还原,沟通解决2-3处适配问题。
- 项目成果:完成10+核心页面设计,小程序界面风格统一、操作流畅,满足个人使用及小范围分享需求。
项目二:小型店铺宣传网页设计(视觉+响应式适配)
- 项目背景:为本地小型餐饮店铺设计宣传网页,用于展示店铺环境、菜品、联系方式,需适配PC端与手机端。
- 核心职责:
1. 与店铺负责人沟通需求,确定“温馨直观”的视觉风格,突出菜品展示;
2. 使用Photoshop处理菜品图片、店铺环境图,提升视觉质感;
3. 用Figma设计网页首页、菜品展示页、关于我们3个核心页面,优化内容排版;
4. 简单调整页面布局,实现基础响应式效果,确保手机端浏览清晰。
- 项目成果:网页顺利交付使用,店铺反馈客户咨询量有所提升,页面加载流畅、展示效果符合预期。
项目三:APP界面改版练习(视觉优化)
- 项目背景:针对一款旧版工具类APP(虚构/公开素材练习),进行界面视觉改版,提升美观度与易用性。
- 核心职责:
1. 分析旧版界面痛点(如色彩杂乱、图标不统一),确定简洁现代的改版风格;
2. 重新制定基础色彩方案与字体规范,统一按钮、输入框等组件样式;
3. 完成首页、功能列表页、设置页3个核心页面的改版设计;
4. 制作简单对比图,总结改版思路与优化点。
- 项目成果:改版后界面视觉统一、层级清晰,形成完整的设计案例,提升了自身视觉设计与问题分析能力。