《深圳UI设计培训》课件资源

深圳设计培训课程UI欢迎参加我们的深圳UI设计培训课程！本课程旨在帮助学员掌握UI设计的核心技能，了解行业最新动态，并具备独立完成项目和成功求职的能力通过系统学习和实战演练，你将成为一名优秀的UI设计师，在移动互联网时代脱颖而出课程涵盖设计基础理论、软件操作、设计规范、实战项目、作品集与求职指导等多个方面，助你实现职业梦想课程大纲概览基础理论与工具设计规范与流程实战项目演练作品集与求职涵盖UI设计的基础概念、设深入讲解移动端设计规范、通过电商APP、社交APP、指导学员准备高质量的作品计原则、色彩理论、排版技设计尺寸与分辨率、图标设企业官网等多个实战项目，集，包括项目选择、案例呈巧等核心理论知识同时，计、界面元素设计等内容，将理论知识应用于实际设计现、设计说明等提供求职介绍Sketch、Figma、并学习设计规范体系的建立中学习需求分析、竞品分准备、简历制作、面试技巧Adobe XD等常用设计软件和应用了解完整的设计流析、用户研究、原型设计等、薪资谈判等就业指导的基础操作和应用程，掌握用户体验要素项目实践技能设计行业现状UI1深圳UI设计师平均薪资22023年职位需求增长15k30%随着移动互联网的快速发展，UI设计行业的职位需求持续UI设计师的需求量不断增加增长，2023年职位需求同比，深圳作为科技创新中心，增长30%，表明UI设计师在UI设计师的平均薪资水平较市场上具有广阔的就业前景高，达到15k/月3Top企业腾讯、华为、字节跳动腾讯、华为、字节跳动等国内顶尖互联网企业，对UI设计师的需求量大，福利待遇优厚，是UI设计师职业发展的理想选择设计基础理论什么是UI设计1UI设计（User InterfaceDesign），即用户界面设计，是指对软件或网站的人机交互界面进行设计，使其美观、易用、高效界面设计发展历史2界面设计经历了命令行界面、图形用户界面、Web界面、移动界面等多个发展阶段，技术和用户需求不断推动界面设计的发展用户体验的重要性3良好的用户体验可以提高用户满意度、提升产品竞争力、降低用户流失率，是产品成功的关键因素色彩理论基础色彩心理学应用色彩可以影响人的情绪和心理，不同的2色彩具有不同的象征意义和情感表达色相、饱和度、明度1色相是指色彩的种类，饱和度是指色彩的鲜艳程度，明度是指色彩的亮度CMYK与RGB色彩模式CMYK是印刷色彩模式，RGB是显示色彩模式，UI设计中常用RGB模式，交付3印刷品时需转换为CMYK模式字体排版基础字体分类与特点中文字体规范字间距与行高控制字体分为衬线字体、非中文字体规范包括字体合理的字间距和行高可衬线字体、等宽字体、选择、字号大小、字重以提高文字的可读性和手写字体等，不同字体、字间距、行高等，需美观性，需要根据字体具有不同的特点和适用要符合中文阅读习惯和、字号和内容进行调整场景美学要求视觉层次对比度原则通过颜色、大小、形状、位置等对比，突出重要信息，引导用户视线留白技巧适当的留白可以提高页面的呼吸感，降低视觉压力，增强信息的清晰度视觉动线设计通过引导用户视线，按照一定的顺序浏览页面内容，提高用户效率和体验设计软件介绍Sketch FigmaAdobe XDPhotoshopSketch是一款轻量级的矢量Figma是一款基于浏览器的协Adobe XD是Adobe公司推出Photoshop是一款强大的图设计软件，适用于UI设计、网作式设计软件，支持实时协作的UI/UX设计软件，与像处理软件，适用于图像编辑页设计、图标设计等，具有强、版本控制、组件库等功能，Adobe生态系统无缝集成，支、修图、合成等，可以用于UI大的插件生态系统适用于团队协作设计持原型设计、交互设计、动画设计中的图像处理和视觉效果设计等制作基础操作Figma界面布局快捷键使用12Figma的界面布局包括工具掌握常用的快捷键可以快速完栏、图层面板、属性面板、画成各种操作，提高设计效率，布等，熟悉界面布局有助于提如复制、粘贴、移动、缩放等高设计效率基本工具3Figma的基本工具包括选择工具、矩形工具、椭圆工具、钢笔工具、文字工具等，熟悉这些工具的使用方法是进行UI设计的基础进阶技巧Figma组件系统自动布局原型交互Figma的组件系统可以创建可复用的Figma的自动布局可以根据内容自动Figma的原型交互可以创建交互式的设计元素，如按钮、图标、导航栏等调整元素的大小和位置，方便创建响原型，模拟用户操作流程，方便进行，方便统一管理和维护设计规范应式布局和快速调整设计用户测试和验证设计方案使用技巧Sketch工具面板详解1Sketch的工具面板包括图层工具、矢量工具、文本工具、切片工具等，熟悉工具面板的功能和使用方法是高效设计的前提图层管理2Sketch的图层管理可以对图层进行分组、命名、排序、锁定、隐藏等操作，方便组织和管理设计文件插件应用3Sketch的插件生态系统非常丰富，可以通过安装插件扩展Sketch的功能，提高设计效率和质量基础Photoshop图层操作选区工具修图技巧Photoshop的图层操作包括创建图层、Photoshop的选区工具可以创建各种形Photoshop的修图技巧包括调整亮度、删除图层、复制图层、合并图层、调整状的选区，方便对图像进行局部编辑和对比度、色彩、锐化、模糊等，可以提图层顺序等，是进行图像处理的基础处理高图像的质量和视觉效果设计规范体系网格系统网格系统是一种规范化的布局方式，可以帮助设计师创建统

一、协调的界面布局组件库组件库是一系列可复用的设计元素，包括按钮、图标、导航栏等，方便统一管理和维护设计规范设计标注设计标注是对设计稿进行详细的说明，包括颜色、字体、尺寸、间距等，方便开发人员进行开发移动端设计规范1iOS设计规范2Android设计规范iOS设计规范是由苹果公司制Android设计规范是由谷歌定的UI设计规范，包括界面公司制定的UI设计规范，包风格、交互方式、控件使用等括界面风格、交互方式、控件，需要符合iOS平台的特点和使用等，需要符合Android用户习惯平台的特点和用户习惯主流尺寸标准3移动端设计需要考虑不同设备的屏幕尺寸和分辨率，需要选择主流的尺寸标准进行设计，并进行自适应设计设计尺寸与分辨率iPhone各型号尺寸需要了解iPhone各型号的屏幕尺寸和分辨率，以便进行适配设计Android常用分辨率需要了解Android常用分辨率，以便进行适配设计自适应设计方案自适应设计是指根据不同设备的屏幕尺寸和分辨率，自动调整界面布局和元素大小的设计方案图标设计基础图标设计原则常用图标规范网格系统应用图标设计需要简洁、清晰、易识别，常用图标规范包括图标尺寸、颜色、网格系统可以帮助设计师创建规范、具有良好的视觉效果和可读性形状、风格等，需要符合平台和产品协调的图标设计，提高图标的质量和的要求一致性界面元素设计按钮设计表单设计列表设计按钮设计需要考虑按钮表单设计需要考虑表单列表设计需要考虑列表的颜色、形状、大小、的布局、输入框、标签的样式、排序、分页、文本、状态等，使其易、验证、提示等，使其搜索等，使其易于浏览于点击和识别易于填写和验证和查找导航设计侧边栏导航侧边栏导航是一种常用的Web端和移动2端导航方式，通过侧边栏展示导航菜单标签导航1标签导航是一种常用的移动端导航方式，通过标签切换不同的页面面包屑导航面包屑导航是一种常用的Web端导航方式，通过面包屑展示当前页面在网站结3构中的位置版式设计原则黄金分割比例对称与平衡重复与节奏黄金分割比例是一种常用的版式设计原对称与平衡是一种常用的版式设计原则重复与节奏是一种常用的版式设计原则则，可以使页面布局更加美观和谐，可以使页面布局更加稳定和协调，可以增强页面的视觉吸引力和可读性用户体验要素可用性原则1易学易用，简单高效交互反馈2及时反馈，响应迅速操作流程3流程合理，步骤清晰视觉呈现4美观简洁，赏心悦目内容架构5信息明确，重点突出交互设计基础点击状态点击状态是指按钮或链接在被点击时的视觉效果，需要清晰明了地提示用户手势操作手势操作是指用户通过手指在屏幕上进行的操作，如滑动、捏合、长按等，需要符合用户习惯和平台规范转场动画转场动画是指页面切换时的动画效果，可以增强用户的视觉体验和流畅感动效设计微交互设计转场动画12微交互是指在用户进行操作时转场动画是指页面切换时的动，页面或元素产生的微小动画画效果，可以增强用户的视觉效果，可以增强用户的参与感体验和流畅感和乐趣3Loading动画Loading动画是指在页面加载时显示的动画效果，可以缓解用户的等待焦虑设计趋势分析拟物化设计通过模仿现实物体的外观和质感，增强用户的亲切感和熟悉感扁平化设计去除多余的视觉效果，强调简洁、清晰、易识别新拟物设计在扁平化设计的基础上，加入一些微妙的阴影和高光，增强视觉层次感和立体感启动页设计APP品牌展示功能引导启动页可以展示APP的品牌logo启动页可以通过动画或图片引导和名称，增强品牌认知度用户了解APP的主要功能和特点动画效果启动页可以通过动画效果吸引用户的注意力，增强视觉体验登录注册界面表单设计登录注册界面的表单设计需要简洁明了，易于填写，并进行必要的验证验证流程登录注册的验证流程需要安全可靠，防止恶意注册和攻击错误提示登录注册的错误提示需要清晰易懂，引导用户正确填写信息信息展示页面卡片设计2卡片设计适用于展示半结构化的信息，如新闻卡片、商品卡片等列表样式1列表样式适用于展示结构化的信息，如文章列表、商品列表等图文布局图文布局适用于展示包含图片和文字的3信息，如文章详情页、商品详情页等电商界面设计商品列表详情页面购物车商品列表需要展示商品的图片、名称、价详情页面需要展示商品的详细信息、图片购物车需要展示已选择的商品、数量、价格等信息，并提供筛选、排序等功能、评价等，并提供购买、收藏等功能格等信息，并提供修改、删除、结算等功能社交设计APP信息流设计1信息流需要展示用户关注的内容，并提供点赞、评论、分享等功能个人主页2个人主页需要展示用户的个人信息、动态、粉丝等，并提供关注、私信等功能消息界面3消息界面需要展示用户收到的消息，并提供回复、删除等功能数据可视化条形图显示了用户数量随时间的增长从2019年的10百万增加到2023年的120百万，呈现显著增长趋势这种数据可视化有助于清晰地理解用户增长情况，为决策提供支持响应式设计断点设置栅格系统断点是指在不同屏幕尺寸下，页栅格系统是一种规范化的布局方面布局和元素大小发生变化的临式，可以帮助设计师创建响应式界点布局自适应布局自适应布局是指根据不同设备的屏幕尺寸和分辨率，自动调整界面布局和元素大小的设计方案暗黑模式设计配色方案对比度处理使用场景暗黑模式的配色方案需要选择低饱和度暗黑模式需要调整文字和背景的对比度暗黑模式适用于低光照环境，可以减少的颜色，避免刺眼，并保持整体的视觉，使其易于阅读，但又不会过于刺眼眼睛疲劳，并节省电量舒适度设计系统搭建组件库建设1组件库是设计系统的核心，需要包含常用的设计元素，如按钮、图标、导航栏等设计规范2设计规范需要包括颜色、字体、间距、布局等方面的规范，保证设计的一致性资源管理3资源管理需要对设计资源进行分类、命名、版本控制等，方便查找和使用设计评审评审要点文档准备12设计评审需要关注设计的可用设计评审需要准备详细的设计性、易用性、美观性、一致性文档，包括设计说明、原型、等方面标注等沟通技巧3设计评审需要具备良好的沟通技巧，能够清晰地表达设计思路，并接受反馈项目实战电商APP需求分析信息架构界面设计分析电商APP的用户需求，包括商品浏设计电商APP的信息架构，包括页面层设计电商APP的界面，包括商品列表、览、搜索、购买、支付、物流等级、导航方式等详情页面、购物车、支付页面等项目实战社交APP用户研究研究社交APP的用户，包括年龄、性别、职业、兴趣等功能规划规划社交APP的功能，包括发布动态、关注用户、聊天、评论等视觉设计设计社交APP的视觉风格，包括颜色、字体、图标等项目实战企业官网响应式设计2进行响应式设计，使企业官网在不同设备上都能正常显示页面布局1设计企业官网的页面布局，包括导航栏、banner、内容区域、页脚等动效设计加入一些动效，增强企业官网的视觉吸3引力移动端设计要点可触控区域界面反馈操作便利性移动端设计需要保证可移动端设计需要提供及移动端设计需要保证操触控区域足够大，方便时的界面反馈，告知用作流程简洁明了，方便用户点击户操作结果用户使用基础HTML/CSS常用标签样式属性布局方式123HTML常用标签包括div、p、h1-CSS样式属性包括color、font-CSS布局方式包括flexbox、gridh

6、ul、ol、li、img、a等，用size、margin、padding、、float等，用于控制网页元素的排于构建网页结构border、background等，用于列方式控制网页样式设计规范文档命名规范1设计规范文档需要规定清晰的命名规范，方便团队成员理解和使用标注规范2设计规范文档需要规定清晰的标注规范，方便开发人员进行开发交付规范3设计规范文档需要规定清晰的交付规范，方便设计和开发团队进行协作产品需求分析用户画像场景分析功能规划用户画像是指对目标用户进行描述，包场景分析是指分析用户在不同场景下使功能规划是指根据用户需求和场景分析括年龄、性别、职业、兴趣等用产品的需求，规划产品的功能竞品分析方法特点提炼1提炼竞品的特点，分析其优势和劣势优劣对比2对比竞品的优势和劣势，找出差异化竞争点分析维度3从功能、设计、用户体验等方面分析竞品用户研究方法访谈技巧问卷设计访谈技巧包括提问技巧、倾听技问卷设计需要保证问题清晰易懂巧、记录技巧等，用于获取用户，避免引导性问题，并进行必要真实的需求和反馈的验证数据分析数据分析需要对用户研究数据进行整理、分析、挖掘，得出有价值的结论原型设计低保真原型低保真原型是指简单的纸质或线框原型，用于快速验证产品的基本功能和流程高保真原型高保真原型是指接近真实产品的原型，包括视觉设计、交互设计等交互原型交互原型是指可以进行交互操作的原型，用于模拟用户的使用体验设计评估方法可用性测试可用性测试是指邀请用户使用产品，观察用户在使用过程中遇到的问题，评估产品的可用性用户反馈用户反馈是指收集用户对产品的评价和建议，了解用户对产品的满意度和改进方向数据分析数据分析是指对产品的用户行为数据进行分析，了解用户的使用习惯和偏好设计项目管理任务分配2将设计项目中的任务分配给团队成员，明确每个人的责任和目标时间规划1对设计项目的时间进行规划，包括项目启动、需求分析、设计、开发、测试、上线等阶段进度控制对设计项目的进度进行控制，及时发现3和解决问题，保证项目按时完成团队协作版本控制文件管理沟通技巧使用版本控制工具，如Git，管理设计文件建立清晰的文件管理体系，规范文件命名团队成员之间需要进行有效的沟通，及时的版本，方便团队成员协作和回溯和存放位置，方便团队成员查找和使用交流设计思路和问题，保证项目顺利进行作品集准备项目选择案例呈现设计说明选择最具代表性的项目，展示自己的设对每个项目进行详细的案例呈现，包括对每个项目的设计思路和亮点进行说明计能力和风格项目背景、需求分析、设计过程、解决，突出自己的设计理念和价值方案等求职准备简历制作面试技巧薪资谈判123制作一份专业的简历，突出自己的掌握常见的面试技巧，包括自我介了解行业薪资水平，并根据自己的技能和经验，并针对不同的职位进绍、项目讲解、问题回答等能力和经验，进行合理的薪资谈判行定制行业发展方向交互设计师交互设计师主要负责用户界面的交互设2计，包括操作流程、交互反馈、动效设UI设计师计等1UI设计师主要负责用户界面的视觉设计，包括颜色、字体、布局、图标等视觉设计师视觉设计师主要负责产品的整体视觉风3格和品牌形象，包括logo设计、品牌形象设计、营销物料设计等设计师职业规划初级设计师初级设计师主要负责执行设计任务，完成简单的设计工作中级设计师中级设计师可以独立完成设计项目，并参与项目管理和团队协作高级设计师高级设计师可以领导设计团队，负责复杂的设计项目，并参与产品策略和决策设计资源推荐设计网站推荐Dribbble、Behance、站酷等设计网站，可以浏览优秀的设计作品，获取设计灵感设计社区推荐UI中国、Sketch中文网、Figma中文社区等设计社区，可以交流设计经验，学习设计技巧学习平台推荐网易云课堂、腾讯课堂、慕课网等学习平台，可以学习UI设计课程，提升设计能力设计工具推荐原型工具设计工具协作工具推荐Axure RP、推荐Sketch、Figma推荐Teambition、Mockplus、墨刀等原、Adobe XD等设计工Tower、Worktile等型工具，用于快速创建具，用于进行UI设计和协作工具，用于团队协产品的原型视觉设计作和项目管理设计灵感来源优秀案例设计趋势浏览优秀的设计案例，学习设计关注最新的设计趋势，了解行业技巧和风格，并应用于自己的设发展方向，并应用于自己的设计计中中创意平台浏览创意平台，如Pinterest、Instagram，获取设计灵感和创意设计师软技能沟通能力项目管理解决问题123设计师需要具备良好的沟通能力，设计师需要具备一定的项目管理能设计师需要具备解决问题的能力，能够清晰地表达设计思路，并与团力，能够合理规划和控制项目进度能够独立分析和解决设计过程中遇队成员进行有效的沟通，保证项目按时完成到的问题常见面试题设计流程请描述一下你的设计流程设计方法你常用的设计方法有哪些？案例分析请分析一下这个产品的优缺点作品集展示技巧设计理念在展示作品集时，需要突出自己的设计2理念和价值，展示自己的设计风格和个项目陈述性1在展示作品集时，需要清晰地陈述项目的背景、需求、设计过程和解决方案过程展示在展示作品集时，需要展示设计过程中的草图、原型、迭代等，体现自己的设3计思考和实践能力简历优化技巧内容架构视觉呈现重点突出简历的内容架构需要清晰明了，突出自简历的视觉呈现需要简洁美观，易于阅简历需要突出自己的优势和亮点，吸引己的技能和经验，并与招聘职位的要求读，并体现自己的设计能力招聘人员的注意力相匹配面试准备自我介绍项目讲解问题应对123准备一份简短而精彩的自我介绍，对作品集中的项目进行充分的准备提前准备常见的面试问题，并进行突出自己的优势和亮点，熟悉项目的背景、需求、设计过模拟练习，提高应对能力程和解决方案就业指导求职渠道了解常见的求职渠道，包括招聘网站、招聘会、内部推荐等简历投递选择合适的职位，并根据职位要求，定制简历和求职信offer选择综合考虑薪资、福利、发展空间等因素，选择最适合自己的offer课程总结发展规划1根据自己的兴趣和能力，制定未来的职业发展规划学习建议2持续学习和实践，不断提升自己的设计能力和水平知识回顾3回顾课程中的重点知识和技能，巩固学习成果恭喜你完成了深圳UI设计培训课程！希望通过本次课程的学习，你已经掌握了UI设计的核心技能，了解了行业的发展趋势，并具备了独立完成项目和成功求职的能力祝你在UI设计领域取得辉煌的成就！。