- 中国铁道出版社
- 9787113245566
- 1-7
- 222741
- 47248928-5
- 平装
- 16开
- 2018-08
- 403
- 280
- 工学
- 计算机科学与技术
- TP311.1
- 计算机类
作者简介
内容简介
本教材针对的是已掌握Photoshop软件基本工具操作的人群，以既定的编写体例（实例+项
目的形式）巩固对理论知识点的学习。在内容编排上，本书以移动端、PC端和多媒体终端的UI
设计作为主线，结合实例的演练和实际项目的操作，让读者更好地体会设计思路、技巧和理念。
在内容选择、结构安排上更加符合从业人员职业技能水平提高的要求。书中的每个知识点都融
入到实例中，加深读者的理解。
全书共分11章，以PhotoshopCC作为基础操作软件，提供了14个精选实例和3个综合项
目。每个精选实例均有详细的制作步骤，以帮助读者全面、快速掌握知识。全书按照基础—进阶—
项目的编写思路，全面、系统、规范性地对UI设计的相关知识进行了梳理，实例丰富，实操性强。
本书附有配套视频和实例源文件，并且为了帮助初学者更好地学习本书的内容，还提供了在
线答疑，希望得到更多读者的关注。
本书既可作为高等院校本、专科相关专业的UI设计课程的教材，也可作为UI设计爱好者
以及初级UI设计师的培训教材，是一本适合业内人士阅读与参考的读物。
目的形式）巩固对理论知识点的学习。在内容编排上，本书以移动端、PC端和多媒体终端的UI
设计作为主线，结合实例的演练和实际项目的操作，让读者更好地体会设计思路、技巧和理念。
在内容选择、结构安排上更加符合从业人员职业技能水平提高的要求。书中的每个知识点都融
入到实例中，加深读者的理解。
全书共分11章，以PhotoshopCC作为基础操作软件，提供了14个精选实例和3个综合项
目。每个精选实例均有详细的制作步骤，以帮助读者全面、快速掌握知识。全书按照基础—进阶—
项目的编写思路，全面、系统、规范性地对UI设计的相关知识进行了梳理，实例丰富，实操性强。
本书附有配套视频和实例源文件，并且为了帮助初学者更好地学习本书的内容，还提供了在
线答疑，希望得到更多读者的关注。
本书既可作为高等院校本、专科相关专业的UI设计课程的教材，也可作为UI设计爱好者
以及初级UI设计师的培训教材，是一本适合业内人士阅读与参考的读物。
目录
"目录
第1章 UI设计基础 ..................................1
1.1 UI设计概述 ................................2
1.1.1 什么是UI设计 ................... 2
1.1.2 UI的发展史 ....................... 3
1.1.3 UI设计分类 ....................... 6
1.1.4 UI设计师必备技能 ........... 9
1.1.5 UI设计术语 ..................... 10
1.1.6 互联网公司岗位架构 ..... 10
1.2 常用的UI设计工具 ................. 12
1.2.1 设计型工具 ..................... 12
1.2.2 辅助型工具 ..................... 13
1.3 UI设计流程 ............................. 14
1.4 UI设计原则 ............................. 16
1.5 UI设计要素 ............................. 17
1.5.1 设计风格 ......................... 17
1.5.2 设计色彩 ......................... 19
1.5.3 设计字体 ......................... 26
第2章 移动端UI设计常识 ................... 28
2.1 移动应用平台 ......................... 29
2.2 移动设备尺寸标准 ................. 31
2.2.1 英寸 ................................. 32
2.2.2 像素 ................................. 32
2.2.3 分辨率 ............................. 33
2.2.4 网点密度 ......................... 33
2.2.5 像素密度 ......................... 33
2.3 移动UI设计规范 ..................... 34
2.3.1 移动设备参数 ................. 34
2.3.2 UI尺寸规范 ..................... 36
2.3.3 文本规范 ......................... 42
2.4 认识App ................................. 43
2.4.1 什么是App .................... 43
2.4.2 App的优势 ..................... 44
2.4.3 App的分类 ..................... 44
2.4.4 App元素构成 ................. 45
第3章 PC端UI设计常识 ..................... 49
3.1 网页UI设计概述 ..................... 50
3.1.1 认识网页UI ..................... 50
3.1.2 网页结构分析 ................. 50
3.1.3 网页分类 ......................... 51
3.2 移动端UI设计和PC端网页UI
设计区别 ................................. 54
3.3 网页UI设计特点 ..................... 54
3.4 网页UI设计原则 ..................... 57
3.5 网页的构成元素 ..................... 61
3.6 网页UI设计规范 ..................... 63
3.6.1 PC端屏幕分辨率 ............ 63
3.6.2 网页设计尺寸大小 ......... 63
3.6.3 网页设计命名规范 ......... 63
3.6.4 网页设计中字体编排 ..... 64
第4章 图标设计 ................................... 65
4.1 认识图标 ................................. 66
4.1.1 什么是图标 ..................... 66
4.1.2 图标类型 ......................... 66
4.1.3 图标设计原则 ................. 67
4.1.4 图标设计技巧 ................. 69
4.1.5 图标设计流程 ................. 70
4.2 图标设计风格 ......................... 73
4.2.1 扁平化风格 ..................... 73
4.2.2 拟物化风格 ..................... 74
4.3 【实例1】扁平相机图标
设计 .......................................... 75
4.3.1 实例分析 ......................... 75
4.3.2 实现步骤 ......................... 76
4.4 【实例2】微扁平钟表图标
设计 .......................................... 79
4.4.1 实例分析 ......................... 79
4.4.2 实现步骤 ......................... 80
4.5 【实例3】拟物化天气图标
设计 .......................................... 84
4.5.1 实例分析 ......................... 85
4.5.2 实现步骤 ......................... 85
4.6 【实例4】手机主题系统图标
设计 .......................................... 90
4.6.1 实例分析 ......................... 90
4.6.2 实现步骤 ......................... 90
第5章 移动端界面结构 ....................... 96
5.1 栏 ............................................. 97
5.2 导航结构 ................................. 97
5.2.1 什么是导航结构 ............. 97
5.2.2 导航结构的分类 ............. 98
5.3 内容视图 ...............................105
5.3.1 什么是内容视图 ........... 105
5.3.2 内容视图的分类 ........... 105
5.4 临时视图 ...............................108
5.4.1 什么是临时视图 ........... 108
5.4.2 临时视图的分类 ........... 108
5.5 【实例5】制作标签栏导航
图标 ........................................110
5.5.1 实例分析 ....................... 110
5.5.2 实现步骤 ....................... 110
5.6 【实例6】列表式内容视图 ...113
5.6.1 实例分析 ....................... 113
5.6.2 实现步骤 ....................... 114
第6章 移动端常用控件 .....................117
6.1 认识控件 ...............................118
6.1.1 什么是控件 ................... 118
6.1.2 控制器 ........................... 118
6.1.3 按钮控件 ....................... 121
6.1.4 表单控件 ....................... 122
6.2 【实例7】播放进度滑块
设计 ........................................ 123
6.2.1 实例分析 ....................... 123
6.2.2 实现步骤 ....................... 124
6.3 【实例8】登录按钮设计 ....... 127
6.3.1 实例分析 ....................... 127
6.3.2 实现步骤 ....................... 128
第7章 移动端设计适配 .....................131
7.1 iOS设计适配 ........................ 132
7.1.1 设计基准选择 ............... 132
7.1.2 设计基准图 ................... 132
7.2 标注 .......................................135
7.2.1 什么是标注 ................... 135
7.2.2 标注内容 ....................... 136
7.2.3 标注方法 ....................... 137
7.3 切图 .......................................137
7.3.1 什么是切图 ................... 137
7.3.2 切图内容 ....................... 137
7.3.3 切图方法 ....................... 139
7.3.4 切图原则 ....................... 140
7.3.5 切图输出类型 ............... 142
7.3.6 命名规则 ....................... 144
7.4 【实例9】改版Android页面 ....144
7.4.1 实例分析 ....................... 145
7.4.2 实现步骤 ....................... 145
7.5 【实例10】标注登录页面 ....148
7.5.1 实例分析 ....................... 148
7.5.2 实现步骤 ....................... 148
7.6 【实例11】发现页面切图 .... 152
7.6.1 实例分析 ....................... 153
7.6.2 实现步骤 ....................... 153
第8章 网站页面布局和模块设计 .....157
8.1 网站页面布局 .......................158
8.1.1 网站UI视觉规律 ........... 158
8.1.2 常见的网页布局方式 .... 159
8.2 网站Logo设计 .....................164
8.2.1 Logo概述 ...................... 164
8.2.2 网站Logo的作用 .......... 164
8.2.3 网站Logo表现形式 ...... 165
8.2.4 网站Logo设计流程 ..... 165
8.3 网站导航设计 .......................166
8.3.1 认识网站导航 ............... 166
8.3.2 网站导航的作用 ........... 166
8.3.3 导航在网站中的位置 .... 167
8.3.4 网站导航形式 ............... 169
8.4 网站Banner设计 .................170
8.4.1 认识网站Banner .......... 170
8.4.2 Banner设计特点 .......... 171
8.4.3 Banner设计原则 .......... 171
8.4.4 Banner构图方式 .......... 173
8.5 【实例12】咨询公司Logo ...175
8.5.1 实例分析 ....................... 175
8.5.2 实现步骤 ....................... 175
8.6 【实例13】导航设计 ............178
8.6.1 实例分析 ....................... 178
8.6.2 实现步骤 ....................... 178
8.7 【实例14】耳麦Banner ......182
8.7.1 实例分析 ....................... 183
8.7.2 实现步骤 ....................... 183
第9章 优选网App项目 .....................191
9.1 项目概述 ...............................192
9.1.1 项目名称 ....................... 192
9.1.2 项目定位 ....................... 192
9.1.3 功能介绍 ....................... 192
9.2 原型分析 ...............................193
9.2.1 首页 ............................... 193
9.2.2 搜索页 ........................... 193
9.2.3 商品分类页 ................... 194
9.2.4 商品详情页 ................... 195
9.2.5 登录注册页 ................... 196
9.2.6 购物车页 ....................... 196
9.2.7 订单结算页 ................... 197
9.2.8 个人中心页 ................... 198
9.3 项目设计定位 .......................198
9.3.1 设计风格 ....................... 199
9.3.2 颜色定位 ....................... 199
9.3.3 字体大小选择 ............... 199
9.4 优选网App的设计优化 .......200
9.4.1 启动图标 ....................... 200
9.4.2 启动页 ........................... 200
9.4.3 引导页 ........................... 201
9.4.4 首页 ............................... 202
9.4.5 搜索页 ........................... 207
9.4.6 搜索结果页 ................... 208
9.4.7 商品分类页 ................... 209
9.4.8 商品详情页 ................... 211
9.4.9 登录注册页 ................... 212
9.4.10 购物车页 ..................... 214
9.4.11 订单结算页 ................. 215
9.4.12 个人中心页 ................. 216
9.5 优选网App的标注切图 .......218
9.5.1 启动图标 ....................... 218
9.5.2 启动页 ........................... 219
9.5.3 引导页 ........................... 219
9.5.4 首页 ............................... 219
9.5.5 搜索页和搜索结果页 .... 220
9.5.6 其余页面 ....................... 222
第10章 极速云盘项目 ....................... 223
10.1 项目概述 ............................. 224
10.1.1 项目名称 ..................... 224
10.1.2 项目定位 ..................... 224
10.1.3 竞品分析 ..................... 224
10.1.4 功能介绍 ..................... 224
10.2 原型分析 ............................. 225
10.2.1 登录界面 ..................... 225
10.2.2 主界面 ......................... 225
10.2.3 传输列表 ..................... 227
10.2.4 分享窗口 ..................... 227
10.2.5 新建下载任务 ............. 228
10.2.6 锁定和验证码 ............. 229
10.2.7 隐藏空间 ..................... 230
10.2.8 功能大全 ..................... 230
10.3 项目设计定位 ..................... 231
10.3.1 设计风格 ..................... 231
10.3.2 颜色定位 ..................... 231
10.3.3 尺寸和字体规范 ......... 231
10.4 极速云盘的设计优化 ......... 232
10.4.1 启动图标 ..................... 232
10.4.2 登录界面 ..................... 233
10.4.3 主界面 ......................... 235
10.4.4 传输列表 ..................... 239
10.4.5 分享窗口 ..................... 241
10.4.6 新建下载任务 ............. 242
10.4.7 锁定和验证码 ............. 243
10.4.8 隐藏空间 ..................... 244
10.4.9 功能大全 ..................... 245
10.5 极速云盘的标注切图 .........246
10.5.1 启动图标 ..................... 247
10.5.2 主界面 ......................... 247
10.5.3 传输列表和锁定 ......... 248
第11章 小米电视界面项目 ............... 250
11.1 项目概述 ............................. 251
11.1.1 认识智能电视 ............. 251
11.1.2 智能电视设计特点 ..... 251
11.1.3 项目名称 ..................... 253
11.1.4 项目定位 ..................... 253
11.1.5 功能介绍 ..................... 253
11.2 原型分析 ............................. 254
11.2.1 首页 ............................. 254
11.2.2 热门推荐 ..................... 254
11.2.3 影片详情 ..................... 255
11.2.4 播放影片 ..................... 255
11.2.5 影视分类 ..................... 256
11.2.6 排行榜 ......................... 256
11.2.7 系统设置 ..................... 257
11.2.8 网络设置 ..................... 257
11.3 项目设计定位 .....................258
11.3.1 设计风格 ..................... 258
11.3.2 颜色定位 ..................... 258
11.3.3 字体大小选择 ............. 258
11.4 小米电视界面的设计
优化 ...................................... 259
11.4.1 启动页 ......................... 259
11.4.2 首页 ............................. 259
11.4.3 热门推荐 ..................... 261
11.4.4 影片详情 ..................... 262
11.4.5 播放影片 ..................... 263
11.4.6 影视分类 ..................... 265
11.4.7 排行榜 ......................... 266
11.4.8 系统设置 ..................... 267
11.4.9 网络设置 ..................... 268
11.5 小米电视界面项目的标注
切图 .....................................269
11.5.1 启动页 ......................... 269
11.5.2 首页 ............................. 269
11.5.3 影片详情和播放影片 .. 270
11.5.4 热门推荐、影视分类和
排行榜 ......................... 272
11.5.5 系统设置和网络设置 ... 272"
"目录
第1章 UI设计基础 ..................................1
1.1 UI设计概述 ................................2
1.1.1 什么是UI设计 ................... 2
1.1.2 UI的发展史 ....................... 3
1.1.3 UI设计分类 ....................... 6
1.1.4 UI设计师必备技能 ........... 9
1.1.5 UI设计术语 ..................... 10
1.1.6 互联网公司岗位架构 ..... 10
1.2 常用的UI设计工具 ................. 12
1.2.1 设计型工具 ..................... 12
1.2.2 辅助型工具 ..................... 13
1.3 UI设计流程 ............................. 14
1.4 UI设计原则 ............................. 16
1.5 UI设计要素 ............................. 17
1.5.1 设计风格 ......................... 17
1.5.2 设计色彩 ......................... 19
1.5.3 设计字体 ......................... 26
第2章 移动端UI设计常识 ................... 28
2.1 移动应用平台 ......................... 29
2.2 移动设备尺寸标准 ................. 31
2.2.1 英寸 ................................. 32
2.2.2 像素 ................................. 32
2.2.3 分辨率 ............................. 33
2.2.4 网点密度 ......................... 33
2.2.5 像素密度 ......................... 33
2.3 移动UI设计规范 ..................... 34
2.3.1 移动设备参数 ................. 34
2.3.2 UI尺寸规范 ..................... 36
2.3.3 文本规范 ......................... 42
2.4 认识App ................................. 43
2.4.1 什么是App .................... 43
2.4.2 App的优势 ..................... 44
2.4.3 App的分类 ..................... 44
2.4.4 App元素构成 ................. 45
第3章 PC端UI设计常识 ..................... 49
3.1 网页UI设计概述 ..................... 50
3.1.1 认识网页UI ..................... 50
3.1.2 网页结构分析 ................. 50
3.1.3 网页分类 ......................... 51
3.2 移动端UI设计和PC端网页UI
设计区别 ................................. 54
3.3 网页UI设计特点 ..................... 54
3.4 网页UI设计原则 ..................... 57
3.5 网页的构成元素 ..................... 61
3.6 网页UI设计规范 ..................... 63
3.6.1 PC端屏幕分辨率 ............ 63
3.6.2 网页设计尺寸大小 ......... 63
3.6.3 网页设计命名规范 ......... 63
3.6.4 网页设计中字体编排 ..... 64
第4章 图标设计 ................................... 65
4.1 认识图标 ................................. 66
4.1.1 什么是图标 ..................... 66
4.1.2 图标类型 ......................... 66
4.1.3 图标设计原则 ................. 67
4.1.4 图标设计技巧 ................. 69
4.1.5 图标设计流程 ................. 70
4.2 图标设计风格 ......................... 73
4.2.1 扁平化风格 ..................... 73
4.2.2 拟物化风格 ..................... 74
4.3 【实例1】扁平相机图标
设计 .......................................... 75
4.3.1 实例分析 ......................... 75
4.3.2 实现步骤 ......................... 76
4.4 【实例2】微扁平钟表图标
设计 .......................................... 79
4.4.1 实例分析 ......................... 79
4.4.2 实现步骤 ......................... 80
4.5 【实例3】拟物化天气图标
设计 .......................................... 84
4.5.1 实例分析 ......................... 85
4.5.2 实现步骤 ......................... 85
4.6 【实例4】手机主题系统图标
设计 .......................................... 90
4.6.1 实例分析 ......................... 90
4.6.2 实现步骤 ......................... 90
第5章 移动端界面结构 ....................... 96
5.1 栏 ............................................. 97
5.2 导航结构 ................................. 97
5.2.1 什么是导航结构 ............. 97
5.2.2 导航结构的分类 ............. 98
5.3 内容视图 ...............................105
5.3.1 什么是内容视图 ........... 105
5.3.2 内容视图的分类 ........... 105
5.4 临时视图 ...............................108
5.4.1 什么是临时视图 ........... 108
5.4.2 临时视图的分类 ........... 108
5.5 【实例5】制作标签栏导航
图标 ........................................110
5.5.1 实例分析 ....................... 110
5.5.2 实现步骤 ....................... 110
5.6 【实例6】列表式内容视图 ...113
5.6.1 实例分析 ....................... 113
5.6.2 实现步骤 ....................... 114
第6章 移动端常用控件 .....................117
6.1 认识控件 ...............................118
6.1.1 什么是控件 ................... 118
6.1.2 控制器 ........................... 118
6.1.3 按钮控件 ....................... 121
6.1.4 表单控件 ....................... 122
6.2 【实例7】播放进度滑块
设计 ........................................ 123
6.2.1 实例分析 ....................... 123
6.2.2 实现步骤 ....................... 124
6.3 【实例8】登录按钮设计 ....... 127
6.3.1 实例分析 ....................... 127
6.3.2 实现步骤 ....................... 128
第7章 移动端设计适配 .....................131
7.1 iOS设计适配 ........................ 132
7.1.1 设计基准选择 ............... 132
7.1.2 设计基准图 ................... 132
7.2 标注 .......................................135
7.2.1 什么是标注 ................... 135
7.2.2 标注内容 ....................... 136
7.2.3 标注方法 ....................... 137
7.3 切图 .......................................137
7.3.1 什么是切图 ................... 137
7.3.2 切图内容 ....................... 137
7.3.3 切图方法 ....................... 139
7.3.4 切图原则 ....................... 140
7.3.5 切图输出类型 ............... 142
7.3.6 命名规则 ....................... 144
7.4 【实例9】改版Android页面 ....144
7.4.1 实例分析 ....................... 145
7.4.2 实现步骤 ....................... 145
7.5 【实例10】标注登录页面 ....148
7.5.1 实例分析 ....................... 148
7.5.2 实现步骤 ....................... 148
7.6 【实例11】发现页面切图 .... 152
7.6.1 实例分析 ....................... 153
7.6.2 实现步骤 ....................... 153
第8章 网站页面布局和模块设计 .....157
8.1 网站页面布局 .......................158
8.1.1 网站UI视觉规律 ........... 158
8.1.2 常见的网页布局方式 .... 159
8.2 网站Logo设计 .....................164
8.2.1 Logo概述 ...................... 164
8.2.2 网站Logo的作用 .......... 164
8.2.3 网站Logo表现形式 ...... 165
8.2.4 网站Logo设计流程 ..... 165
8.3 网站导航设计 .......................166
8.3.1 认识网站导航 ............... 166
8.3.2 网站导航的作用 ........... 166
8.3.3 导航在网站中的位置 .... 167
8.3.4 网站导航形式 ............... 169
8.4 网站Banner设计 .................170
8.4.1 认识网站Banner .......... 170
8.4.2 Banner设计特点 .......... 171
8.4.3 Banner设计原则 .......... 171
8.4.4 Banner构图方式 .......... 173
8.5 【实例12】咨询公司Logo ...175
8.5.1 实例分析 ....................... 175
8.5.2 实现步骤 ....................... 175
8.6 【实例13】导航设计 ............178
8.6.1 实例分析 ....................... 178
8.6.2 实现步骤 ....................... 178
8.7 【实例14】耳麦Banner ......182
8.7.1 实例分析 ....................... 183
8.7.2 实现步骤 ....................... 183
第9章 优选网App项目 .....................191
9.1 项目概述 ...............................192
9.1.1 项目名称 ....................... 192
9.1.2 项目定位 ....................... 192
9.1.3 功能介绍 ....................... 192
9.2 原型分析 ...............................193
9.2.1 首页 ............................... 193
9.2.2 搜索页 ........................... 193
9.2.3 商品分类页 ................... 194
9.2.4 商品详情页 ................... 195
9.2.5 登录注册页 ................... 196
9.2.6 购物车页 ....................... 196
9.2.7 订单结算页 ................... 197
9.2.8 个人中心页 ................... 198
9.3 项目设计定位 .......................198
9.3.1 设计风格 ....................... 199
9.3.2 颜色定位 ....................... 199
9.3.3 字体大小选择 ............... 199
9.4 优选网App的设计优化 .......200
9.4.1 启动图标 ....................... 200
9.4.2 启动页 ........................... 200
9.4.3 引导页 ........................... 201
9.4.4 首页 ............................... 202
9.4.5 搜索页 ........................... 207
9.4.6 搜索结果页 ................... 208
9.4.7 商品分类页 ................... 209
9.4.8 商品详情页 ................... 211
9.4.9 登录注册页 ................... 212
9.4.10 购物车页 ..................... 214
9.4.11 订单结算页 ................. 215
9.4.12 个人中心页 ................. 216
9.5 优选网App的标注切图 .......218
9.5.1 启动图标 ....................... 218
9.5.2 启动页 ........................... 219
9.5.3 引导页 ........................... 219
9.5.4 首页 ............................... 219
9.5.5 搜索页和搜索结果页 .... 220
9.5.6 其余页面 ....................... 222
第10章 极速云盘项目 ....................... 223
10.1 项目概述 ............................. 224
10.1.1 项目名称 ..................... 224
10.1.2 项目定位 ..................... 224
10.1.3 竞品分析 ..................... 224
10.1.4 功能介绍 ..................... 224
10.2 原型分析 ............................. 225
10.2.1 登录界面 ..................... 225
10.2.2 主界面 ......................... 225
10.2.3 传输列表 ..................... 227
10.2.4 分享窗口 ..................... 227
10.2.5 新建下载任务 ............. 228
10.2.6 锁定和验证码 ............. 229
10.2.7 隐藏空间 ..................... 230
10.2.8 功能大全 ..................... 230
10.3 项目设计定位 ..................... 231
10.3.1 设计风格 ..................... 231
10.3.2 颜色定位 ..................... 231
10.3.3 尺寸和字体规范 ......... 231
10.4 极速云盘的设计优化 ......... 232
10.4.1 启动图标 ..................... 232
10.4.2 登录界面 ..................... 233
10.4.3 主界面 ......................... 235
10.4.4 传输列表 ..................... 239
10.4.5 分享窗口 ..................... 241
10.4.6 新建下载任务 ............. 242
10.4.7 锁定和验证码 ............. 243
10.4.8 隐藏空间 ..................... 244
10.4.9 功能大全 ..................... 245
10.5 极速云盘的标注切图 .........246
10.5.1 启动图标 ..................... 247
10.5.2 主界面 ......................... 247
10.5.3 传输列表和锁定 ......... 248
第11章 小米电视界面项目 ............... 250
11.1 项目概述 ............................. 251
11.1.1 认识智能电视 ............. 251
11.1.2 智能电视设计特点 ..... 251
11.1.3 项目名称 ..................... 253
11.1.4 项目定位 ..................... 253
11.1.5 功能介绍 ..................... 253
11.2 原型分析 ............................. 254
11.2.1 首页 ............................. 254
11.2.2 热门推荐 ..................... 254
11.2.3 影片详情 ..................... 255
11.2.4 播放影片 ..................... 255
11.2.5 影视分类 ..................... 256
11.2.6 排行榜 ......................... 256
11.2.7 系统设置 ..................... 257
11.2.8 网络设置 ..................... 257
11.3 项目设计定位 .....................258
11.3.1 设计风格 ..................... 258
11.3.2 颜色定位 ..................... 258
11.3.3 字体大小选择 ............. 258
11.4 小米电视界面的设计
优化 ...................................... 259
11.4.1 启动页 ......................... 259
11.4.2 首页 ............................. 259
11.4.3 热门推荐 ..................... 261
11.4.4 影片详情 ..................... 262
11.4.5 播放影片 ..................... 263
11.4.6 影视分类 ..................... 265
11.4.7 排行榜 ......................... 266
11.4.8 系统设置 ..................... 267
11.4.9 网络设置 ..................... 268
11.5 小米电视界面项目的标注
切图 .....................................269
11.5.1 启动页 ......................... 269
11.5.2 首页 ............................. 269
11.5.3 影片详情和播放影片 .. 270
11.5.4 热门推荐、影视分类和
排行榜 ......................... 272
11.5.5 系统设置和网络设置 ... 272"
第1章 UI设计基础 ..................................1
1.1 UI设计概述 ................................2
1.1.1 什么是UI设计 ................... 2
1.1.2 UI的发展史 ....................... 3
1.1.3 UI设计分类 ....................... 6
1.1.4 UI设计师必备技能 ........... 9
1.1.5 UI设计术语 ..................... 10
1.1.6 互联网公司岗位架构 ..... 10
1.2 常用的UI设计工具 ................. 12
1.2.1 设计型工具 ..................... 12
1.2.2 辅助型工具 ..................... 13
1.3 UI设计流程 ............................. 14
1.4 UI设计原则 ............................. 16
1.5 UI设计要素 ............................. 17
1.5.1 设计风格 ......................... 17
1.5.2 设计色彩 ......................... 19
1.5.3 设计字体 ......................... 26
第2章 移动端UI设计常识 ................... 28
2.1 移动应用平台 ......................... 29
2.2 移动设备尺寸标准 ................. 31
2.2.1 英寸 ................................. 32
2.2.2 像素 ................................. 32
2.2.3 分辨率 ............................. 33
2.2.4 网点密度 ......................... 33
2.2.5 像素密度 ......................... 33
2.3 移动UI设计规范 ..................... 34
2.3.1 移动设备参数 ................. 34
2.3.2 UI尺寸规范 ..................... 36
2.3.3 文本规范 ......................... 42
2.4 认识App ................................. 43
2.4.1 什么是App .................... 43
2.4.2 App的优势 ..................... 44
2.4.3 App的分类 ..................... 44
2.4.4 App元素构成 ................. 45
第3章 PC端UI设计常识 ..................... 49
3.1 网页UI设计概述 ..................... 50
3.1.1 认识网页UI ..................... 50
3.1.2 网页结构分析 ................. 50
3.1.3 网页分类 ......................... 51
3.2 移动端UI设计和PC端网页UI
设计区别 ................................. 54
3.3 网页UI设计特点 ..................... 54
3.4 网页UI设计原则 ..................... 57
3.5 网页的构成元素 ..................... 61
3.6 网页UI设计规范 ..................... 63
3.6.1 PC端屏幕分辨率 ............ 63
3.6.2 网页设计尺寸大小 ......... 63
3.6.3 网页设计命名规范 ......... 63
3.6.4 网页设计中字体编排 ..... 64
第4章 图标设计 ................................... 65
4.1 认识图标 ................................. 66
4.1.1 什么是图标 ..................... 66
4.1.2 图标类型 ......................... 66
4.1.3 图标设计原则 ................. 67
4.1.4 图标设计技巧 ................. 69
4.1.5 图标设计流程 ................. 70
4.2 图标设计风格 ......................... 73
4.2.1 扁平化风格 ..................... 73
4.2.2 拟物化风格 ..................... 74
4.3 【实例1】扁平相机图标
设计 .......................................... 75
4.3.1 实例分析 ......................... 75
4.3.2 实现步骤 ......................... 76
4.4 【实例2】微扁平钟表图标
设计 .......................................... 79
4.4.1 实例分析 ......................... 79
4.4.2 实现步骤 ......................... 80
4.5 【实例3】拟物化天气图标
设计 .......................................... 84
4.5.1 实例分析 ......................... 85
4.5.2 实现步骤 ......................... 85
4.6 【实例4】手机主题系统图标
设计 .......................................... 90
4.6.1 实例分析 ......................... 90
4.6.2 实现步骤 ......................... 90
第5章 移动端界面结构 ....................... 96
5.1 栏 ............................................. 97
5.2 导航结构 ................................. 97
5.2.1 什么是导航结构 ............. 97
5.2.2 导航结构的分类 ............. 98
5.3 内容视图 ...............................105
5.3.1 什么是内容视图 ........... 105
5.3.2 内容视图的分类 ........... 105
5.4 临时视图 ...............................108
5.4.1 什么是临时视图 ........... 108
5.4.2 临时视图的分类 ........... 108
5.5 【实例5】制作标签栏导航
图标 ........................................110
5.5.1 实例分析 ....................... 110
5.5.2 实现步骤 ....................... 110
5.6 【实例6】列表式内容视图 ...113
5.6.1 实例分析 ....................... 113
5.6.2 实现步骤 ....................... 114
第6章 移动端常用控件 .....................117
6.1 认识控件 ...............................118
6.1.1 什么是控件 ................... 118
6.1.2 控制器 ........................... 118
6.1.3 按钮控件 ....................... 121
6.1.4 表单控件 ....................... 122
6.2 【实例7】播放进度滑块
设计 ........................................ 123
6.2.1 实例分析 ....................... 123
6.2.2 实现步骤 ....................... 124
6.3 【实例8】登录按钮设计 ....... 127
6.3.1 实例分析 ....................... 127
6.3.2 实现步骤 ....................... 128
第7章 移动端设计适配 .....................131
7.1 iOS设计适配 ........................ 132
7.1.1 设计基准选择 ............... 132
7.1.2 设计基准图 ................... 132
7.2 标注 .......................................135
7.2.1 什么是标注 ................... 135
7.2.2 标注内容 ....................... 136
7.2.3 标注方法 ....................... 137
7.3 切图 .......................................137
7.3.1 什么是切图 ................... 137
7.3.2 切图内容 ....................... 137
7.3.3 切图方法 ....................... 139
7.3.4 切图原则 ....................... 140
7.3.5 切图输出类型 ............... 142
7.3.6 命名规则 ....................... 144
7.4 【实例9】改版Android页面 ....144
7.4.1 实例分析 ....................... 145
7.4.2 实现步骤 ....................... 145
7.5 【实例10】标注登录页面 ....148
7.5.1 实例分析 ....................... 148
7.5.2 实现步骤 ....................... 148
7.6 【实例11】发现页面切图 .... 152
7.6.1 实例分析 ....................... 153
7.6.2 实现步骤 ....................... 153
第8章 网站页面布局和模块设计 .....157
8.1 网站页面布局 .......................158
8.1.1 网站UI视觉规律 ........... 158
8.1.2 常见的网页布局方式 .... 159
8.2 网站Logo设计 .....................164
8.2.1 Logo概述 ...................... 164
8.2.2 网站Logo的作用 .......... 164
8.2.3 网站Logo表现形式 ...... 165
8.2.4 网站Logo设计流程 ..... 165
8.3 网站导航设计 .......................166
8.3.1 认识网站导航 ............... 166
8.3.2 网站导航的作用 ........... 166
8.3.3 导航在网站中的位置 .... 167
8.3.4 网站导航形式 ............... 169
8.4 网站Banner设计 .................170
8.4.1 认识网站Banner .......... 170
8.4.2 Banner设计特点 .......... 171
8.4.3 Banner设计原则 .......... 171
8.4.4 Banner构图方式 .......... 173
8.5 【实例12】咨询公司Logo ...175
8.5.1 实例分析 ....................... 175
8.5.2 实现步骤 ....................... 175
8.6 【实例13】导航设计 ............178
8.6.1 实例分析 ....................... 178
8.6.2 实现步骤 ....................... 178
8.7 【实例14】耳麦Banner ......182
8.7.1 实例分析 ....................... 183
8.7.2 实现步骤 ....................... 183
第9章 优选网App项目 .....................191
9.1 项目概述 ...............................192
9.1.1 项目名称 ....................... 192
9.1.2 项目定位 ....................... 192
9.1.3 功能介绍 ....................... 192
9.2 原型分析 ...............................193
9.2.1 首页 ............................... 193
9.2.2 搜索页 ........................... 193
9.2.3 商品分类页 ................... 194
9.2.4 商品详情页 ................... 195
9.2.5 登录注册页 ................... 196
9.2.6 购物车页 ....................... 196
9.2.7 订单结算页 ................... 197
9.2.8 个人中心页 ................... 198
9.3 项目设计定位 .......................198
9.3.1 设计风格 ....................... 199
9.3.2 颜色定位 ....................... 199
9.3.3 字体大小选择 ............... 199
9.4 优选网App的设计优化 .......200
9.4.1 启动图标 ....................... 200
9.4.2 启动页 ........................... 200
9.4.3 引导页 ........................... 201
9.4.4 首页 ............................... 202
9.4.5 搜索页 ........................... 207
9.4.6 搜索结果页 ................... 208
9.4.7 商品分类页 ................... 209
9.4.8 商品详情页 ................... 211
9.4.9 登录注册页 ................... 212
9.4.10 购物车页 ..................... 214
9.4.11 订单结算页 ................. 215
9.4.12 个人中心页 ................. 216
9.5 优选网App的标注切图 .......218
9.5.1 启动图标 ....................... 218
9.5.2 启动页 ........................... 219
9.5.3 引导页 ........................... 219
9.5.4 首页 ............................... 219
9.5.5 搜索页和搜索结果页 .... 220
9.5.6 其余页面 ....................... 222
第10章 极速云盘项目 ....................... 223
10.1 项目概述 ............................. 224
10.1.1 项目名称 ..................... 224
10.1.2 项目定位 ..................... 224
10.1.3 竞品分析 ..................... 224
10.1.4 功能介绍 ..................... 224
10.2 原型分析 ............................. 225
10.2.1 登录界面 ..................... 225
10.2.2 主界面 ......................... 225
10.2.3 传输列表 ..................... 227
10.2.4 分享窗口 ..................... 227
10.2.5 新建下载任务 ............. 228
10.2.6 锁定和验证码 ............. 229
10.2.7 隐藏空间 ..................... 230
10.2.8 功能大全 ..................... 230
10.3 项目设计定位 ..................... 231
10.3.1 设计风格 ..................... 231
10.3.2 颜色定位 ..................... 231
10.3.3 尺寸和字体规范 ......... 231
10.4 极速云盘的设计优化 ......... 232
10.4.1 启动图标 ..................... 232
10.4.2 登录界面 ..................... 233
10.4.3 主界面 ......................... 235
10.4.4 传输列表 ..................... 239
10.4.5 分享窗口 ..................... 241
10.4.6 新建下载任务 ............. 242
10.4.7 锁定和验证码 ............. 243
10.4.8 隐藏空间 ..................... 244
10.4.9 功能大全 ..................... 245
10.5 极速云盘的标注切图 .........246
10.5.1 启动图标 ..................... 247
10.5.2 主界面 ......................... 247
10.5.3 传输列表和锁定 ......... 248
第11章 小米电视界面项目 ............... 250
11.1 项目概述 ............................. 251
11.1.1 认识智能电视 ............. 251
11.1.2 智能电视设计特点 ..... 251
11.1.3 项目名称 ..................... 253
11.1.4 项目定位 ..................... 253
11.1.5 功能介绍 ..................... 253
11.2 原型分析 ............................. 254
11.2.1 首页 ............................. 254
11.2.2 热门推荐 ..................... 254
11.2.3 影片详情 ..................... 255
11.2.4 播放影片 ..................... 255
11.2.5 影视分类 ..................... 256
11.2.6 排行榜 ......................... 256
11.2.7 系统设置 ..................... 257
11.2.8 网络设置 ..................... 257
11.3 项目设计定位 .....................258
11.3.1 设计风格 ..................... 258
11.3.2 颜色定位 ..................... 258
11.3.3 字体大小选择 ............. 258
11.4 小米电视界面的设计
优化 ...................................... 259
11.4.1 启动页 ......................... 259
11.4.2 首页 ............................. 259
11.4.3 热门推荐 ..................... 261
11.4.4 影片详情 ..................... 262
11.4.5 播放影片 ..................... 263
11.4.6 影视分类 ..................... 265
11.4.7 排行榜 ......................... 266
11.4.8 系统设置 ..................... 267
11.4.9 网络设置 ..................... 268
11.5 小米电视界面项目的标注
切图 .....................................269
11.5.1 启动页 ......................... 269
11.5.2 首页 ............................. 269
11.5.3 影片详情和播放影片 .. 270
11.5.4 热门推荐、影视分类和
排行榜 ......................... 272
11.5.5 系统设置和网络设置 ... 272"
"目录
第1章 UI设计基础 ..................................1
1.1 UI设计概述 ................................2
1.1.1 什么是UI设计 ................... 2
1.1.2 UI的发展史 ....................... 3
1.1.3 UI设计分类 ....................... 6
1.1.4 UI设计师必备技能 ........... 9
1.1.5 UI设计术语 ..................... 10
1.1.6 互联网公司岗位架构 ..... 10
1.2 常用的UI设计工具 ................. 12
1.2.1 设计型工具 ..................... 12
1.2.2 辅助型工具 ..................... 13
1.3 UI设计流程 ............................. 14
1.4 UI设计原则 ............................. 16
1.5 UI设计要素 ............................. 17
1.5.1 设计风格 ......................... 17
1.5.2 设计色彩 ......................... 19
1.5.3 设计字体 ......................... 26
第2章 移动端UI设计常识 ................... 28
2.1 移动应用平台 ......................... 29
2.2 移动设备尺寸标准 ................. 31
2.2.1 英寸 ................................. 32
2.2.2 像素 ................................. 32
2.2.3 分辨率 ............................. 33
2.2.4 网点密度 ......................... 33
2.2.5 像素密度 ......................... 33
2.3 移动UI设计规范 ..................... 34
2.3.1 移动设备参数 ................. 34
2.3.2 UI尺寸规范 ..................... 36
2.3.3 文本规范 ......................... 42
2.4 认识App ................................. 43
2.4.1 什么是App .................... 43
2.4.2 App的优势 ..................... 44
2.4.3 App的分类 ..................... 44
2.4.4 App元素构成 ................. 45
第3章 PC端UI设计常识 ..................... 49
3.1 网页UI设计概述 ..................... 50
3.1.1 认识网页UI ..................... 50
3.1.2 网页结构分析 ................. 50
3.1.3 网页分类 ......................... 51
3.2 移动端UI设计和PC端网页UI
设计区别 ................................. 54
3.3 网页UI设计特点 ..................... 54
3.4 网页UI设计原则 ..................... 57
3.5 网页的构成元素 ..................... 61
3.6 网页UI设计规范 ..................... 63
3.6.1 PC端屏幕分辨率 ............ 63
3.6.2 网页设计尺寸大小 ......... 63
3.6.3 网页设计命名规范 ......... 63
3.6.4 网页设计中字体编排 ..... 64
第4章 图标设计 ................................... 65
4.1 认识图标 ................................. 66
4.1.1 什么是图标 ..................... 66
4.1.2 图标类型 ......................... 66
4.1.3 图标设计原则 ................. 67
4.1.4 图标设计技巧 ................. 69
4.1.5 图标设计流程 ................. 70
4.2 图标设计风格 ......................... 73
4.2.1 扁平化风格 ..................... 73
4.2.2 拟物化风格 ..................... 74
4.3 【实例1】扁平相机图标
设计 .......................................... 75
4.3.1 实例分析 ......................... 75
4.3.2 实现步骤 ......................... 76
4.4 【实例2】微扁平钟表图标
设计 .......................................... 79
4.4.1 实例分析 ......................... 79
4.4.2 实现步骤 ......................... 80
4.5 【实例3】拟物化天气图标
设计 .......................................... 84
4.5.1 实例分析 ......................... 85
4.5.2 实现步骤 ......................... 85
4.6 【实例4】手机主题系统图标
设计 .......................................... 90
4.6.1 实例分析 ......................... 90
4.6.2 实现步骤 ......................... 90
第5章 移动端界面结构 ....................... 96
5.1 栏 ............................................. 97
5.2 导航结构 ................................. 97
5.2.1 什么是导航结构 ............. 97
5.2.2 导航结构的分类 ............. 98
5.3 内容视图 ...............................105
5.3.1 什么是内容视图 ........... 105
5.3.2 内容视图的分类 ........... 105
5.4 临时视图 ...............................108
5.4.1 什么是临时视图 ........... 108
5.4.2 临时视图的分类 ........... 108
5.5 【实例5】制作标签栏导航
图标 ........................................110
5.5.1 实例分析 ....................... 110
5.5.2 实现步骤 ....................... 110
5.6 【实例6】列表式内容视图 ...113
5.6.1 实例分析 ....................... 113
5.6.2 实现步骤 ....................... 114
第6章 移动端常用控件 .....................117
6.1 认识控件 ...............................118
6.1.1 什么是控件 ................... 118
6.1.2 控制器 ........................... 118
6.1.3 按钮控件 ....................... 121
6.1.4 表单控件 ....................... 122
6.2 【实例7】播放进度滑块
设计 ........................................ 123
6.2.1 实例分析 ....................... 123
6.2.2 实现步骤 ....................... 124
6.3 【实例8】登录按钮设计 ....... 127
6.3.1 实例分析 ....................... 127
6.3.2 实现步骤 ....................... 128
第7章 移动端设计适配 .....................131
7.1 iOS设计适配 ........................ 132
7.1.1 设计基准选择 ............... 132
7.1.2 设计基准图 ................... 132
7.2 标注 .......................................135
7.2.1 什么是标注 ................... 135
7.2.2 标注内容 ....................... 136
7.2.3 标注方法 ....................... 137
7.3 切图 .......................................137
7.3.1 什么是切图 ................... 137
7.3.2 切图内容 ....................... 137
7.3.3 切图方法 ....................... 139
7.3.4 切图原则 ....................... 140
7.3.5 切图输出类型 ............... 142
7.3.6 命名规则 ....................... 144
7.4 【实例9】改版Android页面 ....144
7.4.1 实例分析 ....................... 145
7.4.2 实现步骤 ....................... 145
7.5 【实例10】标注登录页面 ....148
7.5.1 实例分析 ....................... 148
7.5.2 实现步骤 ....................... 148
7.6 【实例11】发现页面切图 .... 152
7.6.1 实例分析 ....................... 153
7.6.2 实现步骤 ....................... 153
第8章 网站页面布局和模块设计 .....157
8.1 网站页面布局 .......................158
8.1.1 网站UI视觉规律 ........... 158
8.1.2 常见的网页布局方式 .... 159
8.2 网站Logo设计 .....................164
8.2.1 Logo概述 ...................... 164
8.2.2 网站Logo的作用 .......... 164
8.2.3 网站Logo表现形式 ...... 165
8.2.4 网站Logo设计流程 ..... 165
8.3 网站导航设计 .......................166
8.3.1 认识网站导航 ............... 166
8.3.2 网站导航的作用 ........... 166
8.3.3 导航在网站中的位置 .... 167
8.3.4 网站导航形式 ............... 169
8.4 网站Banner设计 .................170
8.4.1 认识网站Banner .......... 170
8.4.2 Banner设计特点 .......... 171
8.4.3 Banner设计原则 .......... 171
8.4.4 Banner构图方式 .......... 173
8.5 【实例12】咨询公司Logo ...175
8.5.1 实例分析 ....................... 175
8.5.2 实现步骤 ....................... 175
8.6 【实例13】导航设计 ............178
8.6.1 实例分析 ....................... 178
8.6.2 实现步骤 ....................... 178
8.7 【实例14】耳麦Banner ......182
8.7.1 实例分析 ....................... 183
8.7.2 实现步骤 ....................... 183
第9章 优选网App项目 .....................191
9.1 项目概述 ...............................192
9.1.1 项目名称 ....................... 192
9.1.2 项目定位 ....................... 192
9.1.3 功能介绍 ....................... 192
9.2 原型分析 ...............................193
9.2.1 首页 ............................... 193
9.2.2 搜索页 ........................... 193
9.2.3 商品分类页 ................... 194
9.2.4 商品详情页 ................... 195
9.2.5 登录注册页 ................... 196
9.2.6 购物车页 ....................... 196
9.2.7 订单结算页 ................... 197
9.2.8 个人中心页 ................... 198
9.3 项目设计定位 .......................198
9.3.1 设计风格 ....................... 199
9.3.2 颜色定位 ....................... 199
9.3.3 字体大小选择 ............... 199
9.4 优选网App的设计优化 .......200
9.4.1 启动图标 ....................... 200
9.4.2 启动页 ........................... 200
9.4.3 引导页 ........................... 201
9.4.4 首页 ............................... 202
9.4.5 搜索页 ........................... 207
9.4.6 搜索结果页 ................... 208
9.4.7 商品分类页 ................... 209
9.4.8 商品详情页 ................... 211
9.4.9 登录注册页 ................... 212
9.4.10 购物车页 ..................... 214
9.4.11 订单结算页 ................. 215
9.4.12 个人中心页 ................. 216
9.5 优选网App的标注切图 .......218
9.5.1 启动图标 ....................... 218
9.5.2 启动页 ........................... 219
9.5.3 引导页 ........................... 219
9.5.4 首页 ............................... 219
9.5.5 搜索页和搜索结果页 .... 220
9.5.6 其余页面 ....................... 222
第10章 极速云盘项目 ....................... 223
10.1 项目概述 ............................. 224
10.1.1 项目名称 ..................... 224
10.1.2 项目定位 ..................... 224
10.1.3 竞品分析 ..................... 224
10.1.4 功能介绍 ..................... 224
10.2 原型分析 ............................. 225
10.2.1 登录界面 ..................... 225
10.2.2 主界面 ......................... 225
10.2.3 传输列表 ..................... 227
10.2.4 分享窗口 ..................... 227
10.2.5 新建下载任务 ............. 228
10.2.6 锁定和验证码 ............. 229
10.2.7 隐藏空间 ..................... 230
10.2.8 功能大全 ..................... 230
10.3 项目设计定位 ..................... 231
10.3.1 设计风格 ..................... 231
10.3.2 颜色定位 ..................... 231
10.3.3 尺寸和字体规范 ......... 231
10.4 极速云盘的设计优化 ......... 232
10.4.1 启动图标 ..................... 232
10.4.2 登录界面 ..................... 233
10.4.3 主界面 ......................... 235
10.4.4 传输列表 ..................... 239
10.4.5 分享窗口 ..................... 241
10.4.6 新建下载任务 ............. 242
10.4.7 锁定和验证码 ............. 243
10.4.8 隐藏空间 ..................... 244
10.4.9 功能大全 ..................... 245
10.5 极速云盘的标注切图 .........246
10.5.1 启动图标 ..................... 247
10.5.2 主界面 ......................... 247
10.5.3 传输列表和锁定 ......... 248
第11章 小米电视界面项目 ............... 250
11.1 项目概述 ............................. 251
11.1.1 认识智能电视 ............. 251
11.1.2 智能电视设计特点 ..... 251
11.1.3 项目名称 ..................... 253
11.1.4 项目定位 ..................... 253
11.1.5 功能介绍 ..................... 253
11.2 原型分析 ............................. 254
11.2.1 首页 ............................. 254
11.2.2 热门推荐 ..................... 254
11.2.3 影片详情 ..................... 255
11.2.4 播放影片 ..................... 255
11.2.5 影视分类 ..................... 256
11.2.6 排行榜 ......................... 256
11.2.7 系统设置 ..................... 257
11.2.8 网络设置 ..................... 257
11.3 项目设计定位 .....................258
11.3.1 设计风格 ..................... 258
11.3.2 颜色定位 ..................... 258
11.3.3 字体大小选择 ............. 258
11.4 小米电视界面的设计
优化 ...................................... 259
11.4.1 启动页 ......................... 259
11.4.2 首页 ............................. 259
11.4.3 热门推荐 ..................... 261
11.4.4 影片详情 ..................... 262
11.4.5 播放影片 ..................... 263
11.4.6 影视分类 ..................... 265
11.4.7 排行榜 ......................... 266
11.4.8 系统设置 ..................... 267
11.4.9 网络设置 ..................... 268
11.5 小米电视界面项目的标注
切图 .....................................269
11.5.1 启动页 ......................... 269
11.5.2 首页 ............................. 269
11.5.3 影片详情和播放影片 .. 270
11.5.4 热门推荐、影视分类和
排行榜 ......................... 272
11.5.5 系统设置和网络设置 ... 272"
