UI设计基础入门培训

20XX/XX/XXUI设计基础入门培训汇报人:XXXCONTENTS目录01

培训开篇与导学02

UI设计入门认知03

UI设计常用软件基础操作04

UI设计核心设计原则05

UI设计常用构图方法06

UI设计入门学习规划培训开篇与导学01行业发展需求旺盛互联网行业蓬勃发展，电商、APP等产品迭代更新快，企业对专业UI设计师缺口持续扩大。薪资待遇优势明显对比其他互联网岗位，UI设计师起薪更高，字节、阿里等头部企业给出的薪资普遍高于行业均值。职业成长路径清晰从初级UI设计师到高级设计师再到设计总监，能力提升对应职级晋升，发展方向明确清晰。为什么学习UI设计本次培训内容框架

UI设计核心概念认知讲解UI设计的定义与分类，区分UI、UX、GUI的差异，结合微信客户端界面做实例解读。

常用设计工具操作入门介绍Figma、Sketch的基础功能，讲解画布新建、图层管理，演示基础图标绘制操作流程。

UI设计基础规范学习讲解色彩、字体、间距的通用设计规范，结合主流APP的界面案例拆解规范应用方法。

简单完整作品实操演练安排个人作业练习，指导学员完成一个个人社交主页界面设计，完成基础知识点巩固。UI设计入门认知02UI设计的基本概念

UI设计的核心定义UI设计即用户界面设计，是对软件界面的美观性和交互逻辑进行整体设计优化的工作。

UI设计的核心目标UI设计的核心目标是提升产品用户体验，让软件界面操作更流畅，符合用户使用习惯。

UI设计的主要分类UI设计主要分为移动端界面设计、PC端网页设计、智能设备界面设计三大常见类别。UI设计常用软件基础操作03Figma基础定位Figma是云端协作UI设计工具，支持团队多人实时协作，是当下互联网公司主流UI设计工具。AdobePhotoshop功能Photoshop是位图处理软件，可完成UI设计中的图标制作、界面修图，适配设计输出需求。Sketch适用场景Sketch是Mac端专属UI设计工具，轻量化操作便捷，深受中小设计团队的青睐。常用UI设计软件介绍文件基础创建与管理新建空白文件打开PS、Figma等UI设计软件后，可选择预设尺寸创建适配不同设备的新设计文件。保存文件到本地完成设计阶段性工作后，需选择对应格式保存至本地文件夹，方便后续修改与调取。分层管理设计元素UI设计中会将图标、文字、背景等不同元素分图层存放，便于调整和修改单个内容。导出设计成品文件设计定稿后，可根据需求导出PNG、PDF等格式文件，交付给开发或展示使用。基础图形绘制工具

矩形工具PS、Figma等主流UI软件都自带矩形工具，可快速绘制按钮、卡片等UI设计常用基础模块。

椭圆工具Figma的椭圆工具可绘制正圆或椭圆，常用来制作APP图标、头像框、进度环等设计元素。

钢笔工具钢笔工具可绘制任意形状的路径图形，是UI设计中绘制自定义图标、插画的核心工具。字符间距调整在Figma中选中文本后，可通过右侧属性栏拖动滑块快速调整字符间距，适配不同排版需求。字体层级设置Sketch中可通过修改字号、字重和颜色划分字体层级，清晰区分标题与正文内容。段落对齐设置AdobeXD中提供左对齐、居中对齐等多种对齐选项，能快速让文字段落保持整齐规整。文字排版工具操作图层样式基础用法

投影效果添加给UI按钮添加投影，可让元素和背景分离，提升界面层次感，是按钮设计的常用操作。

内发光效果设置针对图标边缘做内发光处理，能柔化图标轮廓，让浅色图标适配深色背景更自然。

斜面与浮雕运用制作界面拟物按钮时，添加斜面浮雕，可模拟出立体按压效果，增强UI真实触感。UI设计核心设计原则04对齐原则

左对齐文本规则界面中绝大多数阅读性文本都采用左对齐，符合用户阅读习惯，能保持版面左边缘整齐清晰。

居中对齐强调规则标题、引导按钮等重点元素常用居中对齐，比如APP登录页的标题都用居中对齐增强视觉聚焦。

网格对齐模块化规则将界面元素划分到对应网格对齐排版，比如Figma中用栅格系统实现页面元素的规整统一排版。大小尺寸对比APP界面设计中，把主标题字号放大、辅助文字缩小，能让用户快速分清层级，抓住阅读重点。色彩明暗对比微信深色模式中，文字用高亮度白色、背景用低亮度深灰，清晰区分前景背景，提升阅读舒适度。形态疏密对比电商商品列表页，商品区块间距宽松、商品内部元素紧凑，划分区域，让界面更有条理。对比原则亲密性原则

分组归类信息将UI界面中功能相关的元素放在一处，比如淘宝把商品标题、主图、价格都放在同一个商品卡片里，降低用户认知负担。

区分层级板块通过间距分隔不同功能组，比如微信聊天页把输入框和消息列表拉开间距，帮助用户快速识别界面层级。

提升界面可读性关联元素聚拢无关元素分离，比如百度搜索页将搜索按钮和搜索框贴近排布，让界面清晰易懂。重复原则

视觉元素的重复UI设计中重复品牌色、图标风格，能让界面统一性更强，像微信底部导航图标就保持样式重复。

排版结构的重复同类内容沿用一致的排版规则，比如网易新闻的新闻列表，重复布局提升用户浏览效率。

交互逻辑的重复同类型操作沿用统一触发规则，比如电商App内所有商品都支持点击进入详情，降低用户学习成本。UI设计常用构图方法05居中构图法视觉焦点构建将核心设计元素放置画布正中心，能快速抓住用户视线，比如手机App的开屏广告常用该方式。应用场景适配适合单核心内容展示，比如登录页的品牌logo、弹窗的确认按钮，突出层级关系。视觉平衡技巧通过元素大小、色彩对比调整重心，比如电商产品主图，保证画面稳定不呆板。网格构图法网格构图的基础定义将页面通过横向纵向参考线分割为规则网格，是规范界面元素排布的经典框架方法。网格构图在UI设计中的优势能保证界面元素对齐、层级清晰，让多内容界面保持秩序感，提升用户浏览舒适度。网格构图的实际应用案例国内外很多知名网站和APP都使用网格构图，比如豆瓣图文信息流就是典型应用。黄金分割构图法概念核心定义黄金分割构图法以1:0.618比例划分界面，符合大众审美习惯，适配UI设计的视觉排布需求。移动端UI应用案例主流电商APP产品详情页，采用黄金分割比排布商品图与购买按钮区，提升用户点击率。PC端界面设计应用门户网站内容区与侧边导航栏按黄金分割比设置，兼顾信息承载与页面视觉舒适度。自由流式构图法

信息层级梳理逻辑该方法通过自然流向划分信息层级，各类APP的文章信息流界面常用它提升阅读流畅度。

打破栅格限制思路它不依赖固定栅格约束元素位置，设计类个人作品集常用它展现灵动自由的视觉效果。

视觉动线引导设计通过元素错落排布引导用户视觉动线，很多社交平台的创意海报常用此法增强吸引力。UI设计入门学习规划06临摹优秀作品选取站酷、Behance上的经典UI作品进行1:1临摹，熟悉界面布局与色彩搭配规范。拆解完整项目拆解一个常见的电商App首页项目，拆分出导航、按钮、商品卡片等模块逐一练习。进行组件化练习重复练习按钮、图标、弹窗等常用UI基础组件，熟练掌握不同场景下的组件规范。入门阶段练习方法优质学习资源推荐

官方免费基础