包邮移动UI设计与制作标准教程(全彩微课版)

第1章 移动UI的设计基础 1.1 认识移动UI设计 2 1.1.1 UI设计 2 1.1.2 移动UI设计 3 1.1.3 UI设计与移动UI设计的区别 4 1.2 移动UI的系统分类 6 1.2.1 HarmonyOS 6 1.2.2 Android 7 1.2.3 iOS 8 1.3 移动UI的设计原则 9 1.3.1 简洁性原则 9 1.3.2 一致性原则 9 1.3.3 可访问性原则 10 1.3.4 响应式原则 10 1.3.5 视觉层次原则 11 1.3.6 触控友好原则 11 1.4 AIGC在移动UI中的应用 12 1.4.1 前期调研与竞品分析 12 1.4.2 设计灵感与创意激发 13 1.4.3 设计素材与资源生成 14 1.5 移动UI的设计流程 16 1.5.1 用户研究 16 1.5.2 任务分析 16 1.5.3 设计草图 16 1.5.4 设计细化 17 1.5.5 用户测试 17 1.5.6 反馈和优化 18 1.5.7 方案交付 18 1.5.8 方案实施 18 新手答疑 19 第2章 移动UI的色彩搭配 2.1 色彩的基础知识 21 2.1.1 色彩的属性 21 2.1.2 色彩的类别 21 2.2 色彩搭配 23 2.2.1 互补色搭配 23 2.2.2 对比色搭配 23 2.2.3 相邻色搭配 24 2.2.4 类似色搭配 24 2.2.5 分裂互补色搭配 25 2.2.6 三角形搭配 25 2.2.7 四色搭配 26 2.2.8 正方形搭配 26 2.3 构建UI的颜色系统 27 2.3.1 明确风格 27 2.3.2 选择主色 28 2.3.3 确定配色 29 2.3.4 定义颜色层次 29 2.4 常见的移动UI配色 32 2.4.1 社交类配色 32 2.4.2 电商类配色 34 2.4.3 美食类配色 36 2.4.4 教育类配色 37 2.5 案例实战：构建美食类App颜色系统 39 新手答疑 41 第3章 移动UI的原型设计 3.1 移动UI的草图绘制 43 3.1.1 UI草图的定义 43 3.1.2 UI草图的优缺点 43 3.1.3 常见UI草图表现形式 44 3.2 移动UI的原型设计 45 3.2.1 原型设计的概念 45 3.2.2 原型的表现手法 46 3.2.3 原型设计的重要性 47 3.3 原型设计的常用软件 47 3.4 案例实战：绘制旅行类App原型图 52 新手答疑 59 第4章 移动UI的构建 4.1 界面构建的元素 61 4.2 UI控件类型详解 61 4.2.1 基础控件 61 4.2.2 导航控件 62 4.2.3 输入控件 63 4.2.4 显示控件 65 4.2.5 反馈控件 66 4.3 按钮的视觉设计 67 4.3.1 按钮的类型 67 4.3.2 按钮的组成 69 4.3.3 按钮的层级分类 70 4.3.4 按钮的边角样式 70 4.3.5 按钮的显示状态 71 4.4 弹窗的视觉设计 71 4.4.1 弹窗的构成 71 4.4.2 模态弹窗 72 4.4.3 非模态弹窗 73 4.4.4 弹窗的设计原则 74 4.4.5 弹窗的触发机制 75 4.5 案例实战：制作权限获取弹窗 76 新手答疑 81 第5章 HarmonyOS UI设计 5.1 认识HarmonyOS 83 5.1.1 常用单位 83 5.1.2 栅格系统 83 5.2 HarmonyOS界面构成 84 5.2.1 状态栏 84 5.2.2 标题栏 85 5.2.3 工具栏 85 5.2.4 底部页签栏 85 5.2.5 按钮 86 5.3 HarmonyOS图标设计规范 87 5.3.1 应用图标设计 87 5.3.2 系统图标设计 89 5.4 HarmonyOS文字设计规范 91 5.4.1 字体规范 91 5.4.2 字体排版 92 5.5 HarmonyOS应用架构 94 5.5.1 界面框架与结构 94 5.5.2 特定页面或视图 95 5.5.3 编辑界面 96 5.6 案例实战：设计绘画类App界面 97 新手答疑 107 第6章 Android UI设计 6.1 Android的常用单位 109 6.2 Android界面尺寸规范 110 6.2.1 Android界面尺寸 110 6.2.2 Android的界面结构 110 6.3 Android图标设计规范 112 6.3.1 Android产品图标设计 112 6.3.2 Android系统图标设计 113 6.4 Android文字设计规范 114 6.4.1 文字规范 114 6.4.2 文本颜色 115 6.5 Android图片设计规范 116 6.5.1 图片的使用场景 116 6.5.2 图片格式 118 6.5.3 图片遮罩 118 6.6 案例实战：设计交通工具类系统 图标120 新手答疑 131 第7章 iOS UI设计 7.1 iOS的常用单位 133 7.2 iOS界面尺寸规范 133 7.2.1 iOS界面尺寸 134 7.2.2 iOS的界面结构 134 7.3 iOS图标设计规范 135 7.3.1 iOS应用图标设计 135 7.3.2 iOS系统图标设计 137 7.4 iOS文字设计规范 137 7.4.1 系统字体规范 137 7.4.2 文字大小 138 7.4.3 文字颜色 139 7.5 iOS界面设计规范 140 7.5.1 全局边距 140 7.5.2 卡片间距 140 7.5.3 内容布局 140 7.5.4 图片比例 142 7.6 案例实战：设计美食类应用图标 142 新手答疑 151 第8章 交互动效设计 8.1 关于交互设计 153 8.2 移动UI交互类型 153 8.2.1 按界面元素分类 153 8.2.2 按交互模式分类 155 8.2.3 按设计原则与效果分类 157 8.3 关于UI动效 160 8.4 UI动效的属性 161 8.4.1 时间 161 8.4.2 缓动与速度 161 8.4.3 视觉 162 8.4.4 交互 163 8.4.5 过渡效果 163 8.5 UI动效的类型 164 8.5.1 按功能分类 164 8.5.2 按运动方式分类 165 8.5.3 按触发方式分类 165 8.5.4 按持续时间分类 166 8.6 常用的动效设计软件 167 8.7 案例实战：制作下载进度条 169 新手答疑 176 第9章 标注与切图 9.1 界面标注 178 9.1.1 界面标注的作用 178 9.1.2 界面标注的内容 178 9.1.3 界面标注的规范 179 9.2 界面标注的常用工具 180 9.3 界面的切图 182 9.3.1 界面切图的原则 182 9.3.2 界面切图的要点 183 9.3.3 界面切图的命名规范 185 9.3.4 常见的切图命名 186 9.4 界面切图的常用工具 187 9.5 案例实战：首页界面切图 189 新手答疑 192