UI设计技术与应用案例解析

第1章
UI设计基础知识
1.1 UI设计概述 2 1.1.1 UI设计的概念 2 1.1.2 UI设计的基本原则 3 1.1.3 UI设计的流程 6 1.1.4 UI设计的常用软件 7 1.2 UI设计方向 8 1.2.1 用户研究 8 1.2.2 交互设计 8 1.2.3 界面设计 8 1.3 UI界面设计原则 9 1.3.1 一致性原则 9 1.3.2 准确性原则 9 1.3.3 可读性原则 9 1.3.4 布局合理化原则 10 1.3.5 系统操作合理性原则 10 1.3.6 系统响应时间原则 11 1.4 UI设计规范 11 1.4.1 文字应用规范 11 1.4.2 图片应用规范 12 1.4.3 色彩应用规范 13 课后练习 收集不同类别的UI界面设计 19 拓展赏析 中国的榫卯工艺 20
第2章
图像处理知识准备
2.1 基础知识详解 22 2.1.1 案例解析：制作九宫格效果 22 2.1.2 认识工作界面 23 2.1.3 图像的辅助调整 24 2.1.4 图像的显示调整 27 2.1.5 图像的变形与变换 29 2.1.6 图像的修饰与修复 31 2.2 图形的绘制与填充 35 2.2.1 案例解析：重构图像显示 35 2.2.2 选框工具组 36 2.2.3 画笔工具组 36 2.2.4 钢笔工具组 37 2.2.5 形状工具组 38 2.2.6 取样、填充颜色 39 2.2.7 渐变工具 40 2.3 文本的创建与编辑 40 2.3.1 案例解析：制作电商Banner 40 2.3.2 认识文本工具 42 2.3.3 创建文本 42 2.3.4 编辑文本 43 2.4 蒙版和通道 44 2.4.1 案例解析：制作圆角方形头像 44 2.4.2 认识通道 45 2.4.3 认识蒙版 45 2.5 图像的色彩调整 46 2.5.1 案例解析：提取图像线稿 46 2.5.2 色阶 47 2.5.3 曲线 47 2.5.4 色相/饱和度 48 2.5.5 色彩平衡 49 2.5.6 去色 49 2.6 图像的特效应用 50 2.6.1 案例解析：制作动感飞驰效果 50 2.6.2 图层样式 50 2.6.3 独立滤镜组 51 2.6.4 特效滤镜组 53 课堂实战 制作平铺背景效果 55 课后练习 制作千图成像效果 57 拓展赏析 传世名画：清明上河图 58
第3章
图形元素的设计技能
3.1 基础知识详解 60 3.1.1 案例解析：快速调整图像尺寸 60 3.1.2 认识工作界面 61 3.1.3 画板的尺寸调整 63 3.2 基础图形的绘制与填充 63 3.2.1 案例解析：绘制卡通云朵 63 3.2.2 绘制线段和网格 64 3.2.3 绘制几何形状 65 3.2.4 构建新的形状 67 3.2.5 设置填充与描边 68 3.3 路径的绘制与编辑 72 3.3.1 案例解析：绘制手账本简笔画 72 3.3.2 绘制路径 73 3.3.3 调整路径 74 3.3.4 编辑路径 75 3.4 对象的选择与变换 76 3.4.1 案例解析：制作流动的山脉 76 3.4.2 对象的选择 78 3.4.3 对象的对齐和分布 79 3.4.4 对象的排列 80 3.4.5 对象的变换 80 3.4.6 对象的高级编辑 82 3.5 文本的创建与编辑 84 3.5.1 案例解析：制作网站Banner 84 3.5.2 创建文本 87 3.5.3 编辑文本 88 3.6 特效与样式的添加 89 3.6.1 案例解析：制作多重文字描边效果 89 3.6.2 Illustrator效果 91 3.6.3 Photoshop效果 91 3.6.4 外观与图形样式 92 课堂实战 制作拆分文字效果 94 课后练习 制作立体按钮 95 拓展赏析 中国的水墨动画 96
第4章
产品设计交互工具
4.1 认识MasterGo 98 4.1.1 MasterGo工作界面 99 4.1.2 视图选项调整 100 4.1.3 标尺和参考线 101 4.2 MasterGo基础工具 103 4.2.1 案例解析：绘制半圆效果 103 4.2.2 选择工具 104 4.2.3 容器工具 105 4.2.4 形状工具 106 4.2.5 钢笔工具 107 4.2.6 文本工具 108 4.3 MasterGo组件和样式 108 4.3.1 案例解析：应用预设样式 108 4.3.2 创建组件 110 4.3.3 应用预设组件 111 4.3.4 创建样式 111 4.4 MasterGo原型交互 114 4.4.1 案例解析：原型内容的固定与滚动 114 4.4.2 了解原型模式 116 4.4.3 交互—触发和动作 117 4.4.4 交互—动画和效果 118 4.4.5 溢出行为 119 4.4.6 约束设置 119 4.4.7 原型演示 119 4.5 MasterGo协同评论 120 4.5.1 文件分享 120 4.5.2 了解标注模式 121 4.5.3 评论工具 122 4.6 MasterGo切图和导出 123 4.6.1 创建切图 123 4.6.2 导出预设 123 4.6.3 导出Sketch格式 124 课堂实战 制作网站登录界面 125 课后练习 制作App首页界面 127 拓展赏析 中国喜庆的装饰艺术：年画 128
第5章
组件与图标设计
5.1  UI的控件、组件 130 5.1.1 UI控件详解 130 5.1.2 UI组件详解 131 5.2 按钮的设计 133 5.2.1 按钮的组成 133 5.2.2 按钮的设计类型 133 5.2.3 按钮的设计风格 136 5.3 图标的设计 137 5.3.1 图标的类型 137 5.3.2 图标的设计风格 138 5.3.3 图标的设计规范 140 课堂实战 音乐应用图标设计 143 课后练习 制作便签图标 148 拓展赏析 中国古代三大印花工艺 149
第6章
App界面设计
6.1 App常用界面类型 152 6.1.1 闪屏页 152 6.1.2 引导页 153 6.1.3 注册登录页 154 6.1.4 空白页 155 6.1.5 首页 155 6.1.6 个人中心页 157 6.2 App界面视觉设计 159 6.2.1 颜色规范 160 6.2.2 图片规范 161 6.2.3 边距和间距 161 6.3 ios设计规范指南 162 6.3.1 界面尺寸 162 6.3.2 文字规范 164 6.4 Android设计规范指南 165 6.4.1 界面尺寸 165 6.4.2 文字规范 166 课堂实战 音乐App界面设计 167 课后练习 制作App首页界面 174 拓展赏析 中国传统玩具 175
第7章
网页界面设计
7.1 网页常用界面类型 178 7.1.1 首页 178 7.1.2 栏目页 179 7.1.3 详情页 179 7.1.4 专题页 180 7.2 网页界面设计详解 181 7.2.1 网页设计原则 182 7.2.2 网页的界面布局 184 7.3 网页界面设计规范 187 7.3.1 界面尺寸 188 7.3.2 字体规范 189 7.3.3 颜色规范 190 7.3.4 图片规范 190 课堂实战 音乐网站设计 191 课后练习 制作家居网站界面 201 拓展赏析 中国四大国粹 204
第8章
软件界面设计
8.1 软件界面常用类型 206 8.1.1 启动页 206 8.1.2 着陆页 206 8.1.3 集合页 207 8.1.4 主/细节页 207 8.1.5 详细信息页 207 8.1.6 表单页 208 8.2 软件界面设计详解 208 8.2.1 软件界面设计原则 209 8.2.2 软件界面框架类型 210 8.3 软件界面设计规范 212 8.3.1 界面尺寸 212 8.3.2 字体规范 213 8.3.3 图标规范 215 课堂实战 音乐软件界面设计 215 课后练习 制作视觉设计平台软件界面 226 拓展赏析 中国名山 227 参考文献 228