【现货速发】跨平台UI设计宝典

受“互联网 ”时代崛起的影响，许多行业纷纷踏入互联网行业。面对竞争日趋激烈

的互联网市场，UI 设计成为提升用户对产品直观体验的决定因素。界面的美观度、规范化、

交互性直接决定了一个公司在用户心中的形象。众多互联网公司对用户界面设计的需求让

UI 设计成为一个热门岗位。

    为什么要学习这本书

    尽管UI 行业发展迅速，UI 设计师需求量激增，但在国内真正高水平的、能充分满足

市场需要的UI 设计师却为数甚少。由于缺乏对UI 设计规范的深入了解、专业技能训练，

甚至缺乏项目开发经验，一些UI 设计师很难满足企业对UI 人才的需求。因此UI 设计行

业虽然市场前景看似一片光明，但是如不解决本质问题，未来也将岌岌可危。因此我们觉

得有必要推出一本全面的、系统的、规范性的UI 设计书籍，为UI 设计师提供一个良好的

学习与交流的资源，帮助UI 设计师快速提高自身水平。

    如何使用本书

    本教材针对的是已掌握Photoshop软件基本工具操作的人群，以既定的编写体例（实

例  项目的形式）巩固对理论知识点的学习。在内容编排上，本书以移动端、PC 端和多

媒体终端的UI 设计作为主线，结合实例的演练和实际项目的操作，让读者更好地体会设

计思路、技巧和理念。在内容选择、结构安排上更加符合从业人员职业技能水平提高的要

求。书中的每个知识点都融入到实例中，加深读者的理解。

全书共分为11 章，以Photoshop CC 作为基础操作软件，提供了14 个精选实例和

3 个综合项目。每个精选实例均有详细的制作步骤，以帮助读者全面、快速地掌握知识。

各章讲解内容介绍如下：

第1 章：介绍了UI 设计的基础知识，包括UI 设计概述、常用的UI 设计工具、UI

设计流程、UI 设计原则等内容；

第2 章：介绍移动端UI 设计常识，主要包括移动应用平台、移动设备尺寸标准以及

移动UI 设计规范等内容；

    第3 章：介绍PC 端UI 设计常识，包括网页UI 设计概述、移动端UI 设计和网页UI

设计的区别、网页UI 设计特点、网页UI 设计原则等内容；

    第4章：介绍图标设计，包括图标类型、图标设计原则、图标设计技巧和设计风格等内容；

    第5章：介绍移动端界面结构，主要包括栏、导航结构、内容视图、临时视图等内容；

    第6章：介绍移动端常用控件，主要包括常用控件的介绍以及播放进度滑块设计和登录按钮设计实例解析；

第7章：介绍移动端设计适配，包括标注、切图以及使用第三方软件进行标注切图的方法等内容；

第8章：介绍网站页面布局和模块设计，包括网站页面布局、网站logo设计、网站导航设计、网站banner设计等内容；

第9章：介绍优选网App项目，包括项目概述、原型分析、项目设计定位、设计优化、标注切图等内容；

    第10章：介绍极速云盘项目，包括项目概述、原型分析、项目设计定位、设计优化、标注切图等内容；

第11章：介绍小米电视界面项目，包括项目概述、原型分析、项目设计定位、设计优化、标注切图等内容。

    全书按照基础—进阶—项目的编写思路，以基础知识结合实例 项目的方式，加深读者对所学知识的记忆。书中涉及图标、控件、界面结构、适配等与UI设计相关的内容。读者需要多上机实践，以便熟练掌握UI设计技巧。

如何领取课程

1．扫描封底或者右侧的二维码，注册博学谷账号；

    2．点击底部导航栏“个人”，选择“我的优惠券”；

    3．输入封底刮刮卡中的优惠码，即可兑换相应的课程。

    致谢

本教材的编写和整理工作由传智播客教育科技股份有限公司完成，主要参与人员有

吕春林、王哲、姜婷、张鹏、李凤辉、陈亚坤、恩意等，全体人员在这近一年的编写过程中付出了很多辛勤的汗水，在此一并表示衷心的感谢。

意见反馈

尽管我们尽了大的努力，但教材中难免会有不妥之处，欢迎各界专家和读者朋友们来信来函给予宝贵意见，我们将不胜感激。您在阅读本书时，如发现任何问题或有不认同之处可以通过电子邮件与我们取得联系。

请发送电子邮件至：itcast_book@vip.sina.com

     黑马程序员

2018年3月

目录

第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 【实