前言 2
第一章 UI设计基础 8
第一节 什么是UI设计 9
一 用户研究 9
二 信息结构设计 10
三 交互设计 10
四 视觉设计 11
第二节 UI的设计流程 11
一 用户需求分析阶段 12
二 工业设计/界面设计 12
三 使用性测试以及设计改进/发布 12
四 品牌维护以及优化 12
第三节 用户体验中的职业选择 13
一 产品/项目经理 13
二 用户体验研究员 13
三 互动设计师 14
四 视觉设计师 14
五 前台、后台工程师 14
六 用户体验研究员 15
第二章 图标设计 16
第一节 图标设计规范 17
第二节 工作环境 18
一 Photoshop重点工具介绍 18
二 制作图标之前首选项的设置 19
第三节 形状图层 20
第四节 智能对象与智能滤镜 20
第五节 布尔运算 21
案例1图标设计制作——短信图标 22
案例2图标设计制作——扁平化图标 25
第六节 优秀图标欣赏 28
第七节 设计工具类型的图标 29
案例3绘制图标栅格系统 31
案例4绘制图标栅格系统图标 33
案例5绘制启动图标 35
第八节 课程训练 37
一 作业要求 37
二 学生作业范例及点评 37
第九节 优秀作品欣赏 39
第三章 手机UI主题设计 42
第一节 手机UI主题设计概述 43
第二节 手机主题风格分类 43
一 拟物设计 43
二 扁平化风格 44
三 卡通风格 44
四 中国元素 45
五 混搭风格 45
案例6锁屏界面设计制作 46
案例7应用程序主菜单界面设计制作 49
第三节 课程训练 53
一 作业要求 53
二 学生作业范例及点评 53
第四节 优秀作品欣赏 54
第四章 产品原型设计 56
第一节 互联网产品分类 57
一 电子商务类(B2B、B2C、C2C)产品 57
二 SNS类产品 57
三 O2O类产品 57
第二节 手机APP产品设计概述 58
一 手机APP界面UI设计规范 58
二 APP配色 60
三 APP构图 63
第三节 手机产品思维策划 65
第四节 手机产品线框图设计 66
一 线框图是产品设计和开发的重要工具 66
二 制作线框图的工具和媒介 66
三 APP启动页设计方案及分析 68
案例8启动设计案例 70
案例9首页设计案例 76
第五节 课程训练 79
一 作业要求 79
二 学生作业范例及点评 79
第六节 优秀作品欣赏 81
一 故宫博物院APP欣赏 81
二 面馆APP欣赏 82
三 蓝芝士APP欣赏 83
四 鸟萌APP欣赏 83
五 海报工厂APP欣赏 84
六 GeGe APP欣赏 84
七 Wokamon走星人APP欣赏 85
八 Lu’s Camera APP欣赏 86
九 樱桃音乐APP欣赏 86
第五章 游戏UI设计 88
第一节 游戏UI 89
第二节 游戏UI设计的流程 90
案例10游戏界面设计 91
案例11游戏操作界面 96
第三节 课程训练 101
一 作业要求 101
二 学生作业范例及点评 101
第四节 优秀作品欣赏 102
一 部落冲突 102
二 疯狂外科医生 102
三 迷失之风 103
四 Alien Hive 103
五 HEROKI 104
六 KAMI 104
七 KINGDOM RUSH 105
八 TINY FARM 105
第六章 音乐播放器设计与制作 107
第一节 音乐播放器 108
案例12音乐播放器界面 109
第二节 课程训练 112
一 作业要求 112
二 学生作品范例及点评 119
第七章 UI设计与制作课程思政 127
第一节 以时政热点为设计主题 128
案例13建党100周年触摸屏——启动页面设计 128
第二节 课程训练 133
一 作业要求 133
二 作业范例及点评 133