术与道 移动应用UI设计必修课 第2版

图书标准信息

• 作者 余振华 著
• 出版社 人民邮电出版社
• 出版时间 2017-04
• 版次 2
• ISBN 9787115450968
• 定价 69.00元
• 装帧 平装
• 开本 其他
• 纸张 胶版纸
• 页数 211页
• 正文语种 简体中文

【内容简介】

目前我国正经历火热的互联网创业潮，UI设计师做为其中一个重要的工种，就业前景非常广阔。站酷网的设计调查结果显示，在GUI、平面、网页、插画和三维等设计职位中，目前国内的GUI设计师待遇高。因此，很多设计师涌入UI设计这个行业，愿意为学习UI设计知识支付不菲的学费，而一本高质量、浅显易懂的移动应用书籍正是你所需要的。 

这是一本系统介绍移动设计知识的书籍， 全书分为上下两篇，上篇为术之篇，主要讲解了移动应用设计相关的基础知识。通过基础知识的学习，使大家了解手机屏幕显示的原理及各种手机硬件的传感器使用方法。通过讲解基本的设计规范及图标设计方法，使读者初步掌握移动应用设计知识。下篇为道之篇，是进阶应用设计知识，详细讲解了从如何组建设计规范，到各种组件的功能介绍及应用设计方法，使读者完整掌握移动应用的设计方法和流程。本书通过大量的案例演示，使读者可以灵活运用设计方法理论。 

本书适合想要从事和已经从事UI设计行业相关工作的读者学习使用，也可以作为高校平面设计和网页设计等相关专业和相关培训机构的教学参考书。

【作者简介】

余振华是站酷推荐设计师，他有十余年GUI、WUI设计的从业资历，在多家国内专业网站发表过众多设计研究文章，有着多年设计团队管理经验，负责过流量千万级的电商网站运营、下载量亿级的无线设计团队管理。目前他正积极探索视觉设计在工作中的实践运用，建立相关的规范和标准，指导更多的设计师成长。 

个人荣誉： 

2011年获得“站酷推荐设计师”称号 

2012年《旅行箱》App获得豌豆荚设计奖、应用奖 

2012年《91桌面主题设计大赛》奖 

2013年《康佳Muse UI 首届手机主题设计》奖 

2013年《新浪天气通插件设计》奖 

2013年《中国电信手机云桌面手机主题设计》三等奖 

2014年《中华万年历》App累计下载量一亿，日活破千万

【目录】

术之篇 

01基础知识 

1．1　什么是UI设计 20 

1．1．1　UI的相关概念 20 

1．1．2　UI的学习方法 22 

1．2　什么是App 25 

1．2．1　App的概念 25 

1．2．2　App的开发流程 25 

1．3　智能手机的屏幕 26 

1．3．1　英寸（Inch） 27 

1．3．2　像素（Pixel） 27 

1．3．3　分辨率（Resolution） 28 

1．4　网点密度与像素密度 28 

1．4．1　网点密度（DPI） 28 

1．4．2　像素密度（PPI） 29 

1．4．3　DPI与PPI 29 

1．4．4　逻辑分辨率与像素倍率 30 

1．4．5　视网膜屏幕 30 

1．5　常见手机屏幕规格 31 

1．5．1　热门手机规格 31 

1．5．2　热门手机分辨率 33 

1．6　iPhone 6 Plus的屏幕 34 

1．7　智能手机的传感器 37 

1．7．1　摄像头 37 

1．7．2　麦克风 38 

1．7．3　GPS 38 

1．7．4　电子罗盘 39 

1．7．5　重力感应器 39 

1．7．6　加速度传感器 40 

1．7．7　光线传感器 41 

1．7．8　距离传感器 41 

1．7．9　气压传感器 42 

1．7．10　三轴陀螺仪 43 

02设计风格 

2．1　风格 46 

2．1．1　什么是设计风格 46 

2．1．2　如何确立设计风格 47 

2．2　颜色 50 

2．　2． 1 认识色彩 50 

2．　2． 2 RGB与HSB 50 

2．　2． 3 颜色搭配基础 52 

2．3　如何选择颜色 53 

2．　3． 1 常见App的颜色 53 

2．　3． 2 颜色的性格 55 

2．4　字体 61 

2．　4． 1 衬线体和无衬线体 61 

2．　4． 2 系统内置字体 62 

2．　4． 3 什么时候选择内嵌字体 62 

2．　4． 4 如何使用内嵌字体 63 

03图标与图片 

3．1　App图标特点 66 

3．　1． 1 独特的图形 66 

3．　1． 2 表意准确 67 

3．　1． 3 谨慎用色 67 

3．　1． 4 避免使用大量文字 68 

3．　1． 5 避免使用照片 68 

3．　1． 6 适应不同场景 69 

3．2　App图标设计流程 69 

3．　2． 1 第一步：寻找隐喻 69 

3．　2． 2 第二步：抽象图形 70 

3．　2． 3 第三步：竞品分析 71 

3．　2． 4 第四步：确定风格 71 

3．　2． 5 第五步：调整细节 72 

3．　2． 6 第六步：场景测试 73 

3．3　App图标设计方法 74 

3．　3． 1 正负形组合 74 

3．　3． 2 折叠图形 75 

3．　3． 3 局部提取 75 

3．　3． 4 线性图标 75 

3．　3． 5 透明渐变 76 

3．　3． 6 色块拼接 76 

3．　3． 7 图形复用 76 

3．　3． 8 背景组合 77 

3．4　iOS图标规范 77 

3．　4． 1 iOS图标适配 77 

3．　4． 2 iOS图标标准 78 

3．5　Android图标规范 79 

3．　5． 1 Android图标适配 79 

3．　5． 2 图标的视觉统一 80 

3．　5． 3 Android图标标准 81 

3．6　设计线性图标 83 

3．　6． 1 线性图标的风格 83 

3．　6． 2 线性图标的绘制方法 84 

3．7　像素对齐 87 

3．　7． 1 像素为什么要对齐 87 

3．　7． 2 像素如何对齐 88 

3．　7． 3 像素缩放的对齐 89 

3．　7． 4 像素对齐的微调 89 

3．8　图片的使用 89 

3．　8． 1 矢量图与位图 89 

3．　8． 2 图片的格式 90 

3．　8． 3 图片的使用 91 

3．　8． 4 图片的存储 92 

3．　8． 5 图片的比例 92 

04系统界面 

4．1　栏 94 

4．　1． 1 状态栏 94 

4．　1． 2 导航栏 94 

4．　1． 3 标签栏 95 

4．　1． 4 工具栏 96 

4．2　内容视图 97 

4．　2． 1 表格视图 97 

4．　2． 2 文本视图 99 

4．　2． 3 Web视图 99 

4．3　临时视图 100 

4．　3． 1 对话框 100 

4．　3． 2 操作列表 100 

05Android系统界面 

5．1　导航机制 102 

5．　1． 1 硬件特性 102 

5．　1． 2 iOS导航机制 102 

5．　1． 3 Android导航机制 103 

5．2　界面布局 105 

5．　2． 1 结构差异 105 

5．　2． 2 操作栏 106 

5．　2． 3 多任务 107 

5．3　消息推送 108 

5．　3． 1 推送方式 108 

5．　3． 2 通知方式 109 

5．4　操作方式 110 

5．　4． 1 编辑 110 

5．　4． 2 选择 111 

5．　4． 3 复制粘贴 112 

5．　4． 4 删除 113 

5．5　Android系统的插件 114 

5．　5． 1 桌面插件 114 

5．　5． 2 设计趋势 114 

道之篇 

06建立规范 

6．1　组建规范 116 

6．　1． 1 设计规范的目的 116 

6．　1． 2 规范的组成 116 

6．2　颜色规范 119 

6．　2． 1 为什么选择HSB 119 

6．　2． 2 创建调色板 120 

6．　2． 3 调色板应用 121 

6．3　文字规范 123 

6．　3． 1 iOS系统 123 

6．　3． 2 Android系统 123 

6．　3． 3 系统字号 123 

6．4　布局 125 

6．　4． 1 框架 125 

6．　4． 2 顶部导航栏 126 

6．　4． 3 顶部标签栏 126 

6．　4． 4 底部标签栏 127 

6．5　图片规范 127 

6．　5． 1 用户头像 127 

6．　5． 2 商品图片 129 

6．　5． 3 无数据图片 129 

07设计组件 

7．1　控制元素 132 

7．　1． 1 活动指示器 132 

7．　1． 2 进度指示器 132 

7．　1． 3 页码控制器 134 

7．　1． 4 刷新控件 134 

7．　1． 5 滑动器 137 

7．　1． 6 开关 137 

7．　1． 7 步进器 137 

7．2　筛选器 138 

7．　2． 1 选择器 138 

7．　2． 2 日期时间选择器 138 

7．　2． 3 分段控件 139 

7．　2． 4 选项卡 139 

7．　2． 5 排序 140 

7．　2． 6 地区选择 140 

7．3　表单控件 141 

7．　3． 1 单选框 141 

7．　3． 2 复选框 142 

7．　3． 3 文本框 142 

7．　3． 4 下拉框 143 

7．　3． 5 表格 144 

7．4　按钮规范 144 

7．　4． 1 背景+文字 144 

7．　4． 2 背景+图标 145 

7．　4． 3 图标+文字 146 

7．　4． 4 文字 146 

7．5　其他组件 147 

7．　5． 1 加载更多 147 

7．　5． 2 非模态浮层 147 

7．　5． 3 模态浮层 148 

08导航设计 

8．1　扁平导航 150 

8．　1． 1 标签导航 150 

8．　1． 2 舵式导航 151 

8．　1． 3 宫格式导航 152 

8．2　内容主导式导航 153 

8．　2． 1 陈列式导航 153 

8．　2． 2 旋转木马式导航 154 

8．3　列表式导航 155 

8．　3． 1 列表式 155 

8．　3． 2 抽屉式 156 

8．4　其他导航 157 

8．　4． 1 点聚式导航 157 

8．　4． 2 瀑布式导航 158 

09界面设计 

9．1　首页 160 

9．　1． 1 搜索栏 160 

9．　1． 2 标签栏 161 

9．　1． 3 卡片式设计 161 

9．　1． 4 楼层设计 162 

9．2　列表页 163 

9．　2． 1 消息列表 163 

9．　2． 2 横向卡片 163 

9．　2． 3 瀑布流 164 

9．3　详情页 165 

9．　3． 1 全局按钮 165 

9．　3． 2 快速通道 166 

9．4　个人中心 167 

9．　4． 1 头像区域 167 

9．　4． 2 个人信息 168 

9．　4． 3 功能模块 169 

9．5　启动页 170 

9．　5． 1 品牌宣传类 170 

9．　5． 2 首页样式类 171 

9．　5． 3 情感故事类 172 

9．　5． 4 节日氛围类 173 

9．6　引导页 173 

9．　6． 1 功能介绍类 173 

9．　6． 2 使用说明类 176 

9．　6． 3 情感故事类 177 

10设计适配 

10．1　iOS系统适配 180 

10．　1． 1 设计基准 180 

10．　1． 2 设计适配 181 

10．　1． 3 适配规则 182 

10．2　Android系统适配 183 

10．　2． 1 密度独立像素 183 

10．　2． 2 设计基准 184 

10．　2． 3 适配方法 185 

10．3　iOS系统适配Android系统 185 

10．　3． 1 设计目的 185 

10．　3． 2 换算关系 185 

10．　3． 3 适配方法 186 

10．4　标注设计 186 

10．　4． 1 标注基准 187 

10．　4． 2 标注方法 187 

10．5　点九图 189 

10．　5． 1 什么是点九图 189 

10．　5． 2 如何制作点九图 191 

10．6　切图 191 

10．　6． 1 界面切图 191 

10．　6． 2 图标切图 192 

10．　6． 3 命名规则 192 

11手势应用 

11．1　为什么使用手势 194 

11．2　常用手势操作 195 

11．　2． 1 单击 195 

11．　2． 2 双击 195 

11．　2． 3 上下滑动 196 

11．　2． 4 左右滑动 196 

11．　2． 5 拖曳 197 

11．　2． 6 张开 闭合 197 

11．　2． 7 长按 198 

11．　2． 8 摇晃 198 

11．3　手势设计禁忌 199 

11．　3． 1 使用标准手势 199 

11．　3． 2 定义标准手势 199 

11．　3． 3 使用简单手势 199 

11．　3． 4 手势使用说明 199 

12设计资源 

12．1　网站资源 201 

12．2　图标资源 202 

12．3　图片资源 203 

附录 204 

参考文献 211