移动互联网之路：APP UI设计从入门到精通 Photoshop篇

出版者:清华大学出版社

页数:336

出版时间:2016-9-1

价格:79.80

装帧:平装

isbn号码:9787302443537

具体描述

本书主要讲解了iOS、Android和Windows Phone这3种主流智能手机操作系统界面、APP元素和基本风格，全面解析了各类APP界面设计的具体方法与操作技巧。

本书共7章，第1章主要讲解智能手机的相关知识、设计中的色彩搭配、手机界面尺寸标准、常用的软件工具等APP界面设计基础知识。第2章主要对常见的手机系统的发展过程及基础知识进行简单的介绍，客观地分析3种不同手机系统的优缺点。第3～7章分别讲解了iOS、Android和Windows Phone 这3种主流智能手机操作系统的设计规范和设计原则，以及图形、控件、图标和完整界面的具体制作方法。

本书附赠1张DVD光盘，其中提供了全部案例的素材、源文件和教学视频，读者可以结合书本、练习文件和教学视频，提升APP界面设计学习效率。

本书适合APP UI设计爱好者和从业者阅读，也适合作为各院校相关设计专业的参考教材，是一本实用的APP界面设计操作宝典。

作者简介

张晓景，Adobe专家组成员。国家653工程认证讲师。从事APP界面设计多年，有丰富的设计经验。对网页UI设计，软件UI设计和游戏UI设计有独特的设计风格。并在国内多所大学讲授界面设计课程。并编写出版多本畅销教材。

目录信息

第1章　移动APP界面设计基础
1.1　关于手机 1
1.1.1　手机的发展历史 1
1.1.2　手机分辨率 2
1.1.3　屏幕颜色 2
1.2　UI设计 3
1.2.1　什么是UI设计 3
1.2.2　主要性能 3
1.2.3　相关控件 4
1.2.4　手机UI设计 4
1.2.5　手机UI设计的特点 4
1.2.6　手机UI与平面UI的区别 5
1.3　设计中的色彩搭配 5
1.3.1　色彩的意象 5
1.3.2　手机APP UI设计的用色规范 6
1.3.3　UI调色板 7
1.3.4　APP界面设计中色彩运用原理与对比原则 8
1.3.5　色彩的搭配方法 9
1.4　图标的格式 10
1.4.1　JPEG格式 10
1.4.2　PNG格式 10
案例1　制作iOS 9 拨号图标 11
1.4.3　GIF格式 14
1.4.4　其他常用格式 14
1.5　手机界面设计的尺寸标准 15
1.5.1　分辨率 15
1.5.2　英寸 16
1.5.3　网点密度 17
1.5.4　屏幕密度 17
1.6　常用的软件工具 17
1.6.1　Photoshop 17
案例2　制作iOS 9快捷按钮 19
1.6.2　Illustrator 21
1.6.3　3ds Max 22
1.6.4　IconCool Studio 25
1.6.5　Image Optimizer 26
1.7　总结扩展 26
1.7.1　本章小结 26
1.7.2　课后练习——制作iOS 9
照片图标 27
========================================================
第2章　常见的手机系统
2.1　iOS系统 28
2.1.1　iOS的发展过程 28
2.1.2　iOS的基本组件 32
2.1.3　iOS的开发工具和资源 34
2.1.4　iOS的设备 37
2.1.5　iOS 8与iOS 9的功能对比 37
2.2　Android系统 42
2.2.1　Android的发展过程 42
2.2.2　Android的基础UI组件 44
2.2.3　关于深度定制的系统 45
2.3　Windows Phone系统 46
2.3.1　Windows Phone的发展历程 46
2.3.2　了解Windows 10 47
2.3.3　Windows Phone 系统的特色 48
2.4　各种手机系统介绍 49
2.4.1　iOS的优缺点 49
2.4.2　Android的优缺点 50
2.4.3　Windows Phone的优缺点 51
2.4.4　手机系统的发展前景 51
2.5　总结扩展 51
2.5.1　本章小结 52
2.5.2　课后练习——制作iOS 9健康图标 52
========================================================
第3章　iOS设计元素
3.1　iOS 8与iOS 9的界面对比 53
3.1.1　新字体 53
3.1.2　应用切换 54
案例3　制作应用程序切换界面 54
3.1.3　Spotlight搜索 58
3.1.4　电池使用细节 58
3.1.5　相机应用 58
3.1.6　分享界面 59
3.1.7　Siri新界面 59
3.1.8　键盘大小写切换 60
3.1.9　听写界面 60
3.1.10　圆角 60
3.2　iOS界面设计 61
3.2.1　了解用户使用怎样的设备 61
3.2.2　iOS界面设计的原则 61
3.3　iOS界面设计规范 64
3.3.1　界面布局 66
3.3.2　颜色与字体 67
3.3.3　语言风格 68
3.3.4　确保程序在iPad和iPhone上通用 69
3.3.5　重新考虑基于Web的设计 70
3.4　iOS 基本图形的绘制 70
3.4.1　线条的绘制 70
案例4　制作记事本图标 71
3.4.2　矩形的绘制 74
3.4.3　圆角矩形的绘制 76
案例5　制作智能小键盘 76
3.4.4　圆形的绘制 79
案例6　制作iOS 9的解锁界面 80
3.4.5　其他形状 83
案例7　制作iOS 9的选项图标 83
3.5　控件的绘制 86
3.5.1　活动指示器 86
案例8　制作活动指示器 87
3.5.2　日期和时间拾取器 91
案例9　制作选择器 92
3.5.3　详情按钮 94
3.5.4　标签 96
3.5.5　网络活动指示器 96
3.5.6　页面控制 97
案例10　制作页码指示器 98
3.5.7　进度指示条 100
案例11　制作信息界面 100
3.5.8　刷新控制 103
3.5.9　搜索框 103
案例12　制作搜索框 104
3.5.10　滚动条 107
案例13　制作滚动条 108
3.5.11　文本框 113
案例14　制作文本框界面 113
3.5.12　对话框 116
案例15　制作对话框 116
3.5.13　分段控件 118
案例16　制作分段控件 119
3.5.14　按钮 120
案例17　制作开关按钮 121
3.6　图标绘制 123
3.6.1　图标设计的技巧 123
3.6.2　应用图标 125
案例18　制作APP Store图标 126
3.6.3　聚光灯和设置图标 128
3.6.4　导航栏、工具栏和Tab栏中的图标 129
案例19　制作Tab栏中的小图标 130
3.7　总结扩展 132
3.7.1　本章小结 132
3.7.2　课后练习——制作Safari浏览器界面 133
========================================================
第４章　iOS APP应用实战
4.1　iOS APP界面的布局规范 134
4.1.1　 iOS APP界面尺寸
规范 134
4.1.2　 iOS的文本规范 135
4.1.3　 iOS界面的配色技巧 135
4.2　制作APP电商界面 135
案例20　制作电商界面1——状态栏 136
案例21　制作电商界面2——导航栏 138
案例22　制作电商界面3——主体 141
案例23　制作电商界面4——标签栏 143
4.3　制作APP记事本界面 146
案例24　制作记事本界面 146
4.4　制作APP音乐播放器界面 151
案例25　制作音乐播放器界面 151
4.5　制作个人主页界面 157
案例26　制作个人主页界面设计 157
4.6　制作游戏界面 161
案例27　制作游戏界面 161
4.7　总结扩展 170
4.7.1　本章小结 171
4.7.2　课后练习——制作登录界面 171
========================================================
第5章　Android设计元素
5.1　Android 5.0与Android 6.0界面对比 172
5.2　Android UI概论 176
5.2.1　主屏幕和二级菜单 176
5.2.2　系统栏 176
5.2.3　操作栏 176
5.3　Android UI设计原则 177
5.3.1　漂亮的界面 177
案例28　制作简洁的Android解锁界面 177
5.3.2　更简单便捷的操作 180
5.3.3　更加完善的工作流程 180
5.4　Android设计概述 181
5.4.1　设备和显示 181
案例29　Android 6.0 Chrome图标 183
5.4.2　字体 185
案例30　制作Android E-mail发送界面 186
5.4.3　写作风格 190
5.4.4　颜色 192
5.5　Android基本图形绘制 193
5.5.1　直线 193
案例31　制作Android 注册界面 194
5.5.2　圆 198
案例32　制作Android 时间界面 199
5.5.3　矩形 202
案例33　制作简洁的Android软件界面 203
5.5.4　圆角矩形 207
案例34　制作简洁的Android推送界面 208
5.5.5　其他形状 212
案例35　制作简洁的Android图片预览界面 214
5.6　Android APP控件制作 216
5.6.1　选项卡 216
案例36　制作简洁的Android选项卡 218
5.6.2　列表 219
案例37　制作简洁的Android文件管理器 221
5.6.3　滚动 224
案例38　制作微信联系人界面 225
5.6.4　下拉菜单 228
案例39　制作Android 下拉菜单 229
5.6.5　按钮 232
案例40　制作微信个人信息界面 233
5.6.6　文本框 238
案例41　制作Android 文本框 239
5.6.7　对话框 241
案例42　制作Android 对话框 242
5.6.8　滑块 245
案例43　制作Android 闹钟声音滑块 245
5.6.9　进度和动态 247
案例44　制作Android 音乐播放器 249
5.6.10　开关 252
案例45　制作Android 开关 254
5.6.11　分割线 257
5.6.12　工具提示 259
5.6.13　图标 259
案例46　制作Android 启动图标 260
5.7　总结扩展 266
5.7.1　本章小结 266
5.7.2　课后练习——制作Android拨号界面 267
========================================================
第6章　Android APP应用实战
6.1　Android APP的设计规范 268
6.1.1　Android APP结构规范 268
6.1.2　Android APP切图规范 269
6.1.3　Android APP配色
技巧 269
6.2　制作在线电影APP界面 269
案例47　制作在线电影APP 1——状态栏 269
案例48　制作在线电影APP 2——选项栏 272
案例49　制作在线电影APP 3——主界面 274
6.3　制作记事本APP 277
案例50　制作记事本APP 277
6.4　制作音乐播放器界面 284
案例51　制作音乐播放器界面 285
6.5　制作聊天APP侧边栏 292
案例52　制作聊天APP侧边栏 292
6.6　总结扩展 292
6.6.1　本章小结 298
6.6.2　课后练习——制作APP人主页界面 299
========================================================
第7章　Windows Phone设计元素和应用实战
7.1　Windows Phone 10与Windows
Phone 8.1界面对比 300
7.2　Windows Phone系统的
特点 302
7.2.1　通用Windows应用史 302
7.2.2　Windows Phone界面特色 302
7.3　Windows Phone设计原则 303
案例53　制作Windows Phone主界面 305
7.4　Windows Phone界面框架 308
7.4.1　页面标题 308
7.4.2　进度指示器 309
7.4.3　滚动指示器 309
7.4.4　主题 310
7.5　Windows Phone用户界面框架 311
7.5.1　主界面 311
7.5.2　屏幕方向 311
7.5.3　字体 311
7.5.4　状态栏 312
案例54　制作Windows Phone状态栏 312
7.5.5　磁贴和通知 314
7.6　Windows Phone标准控件 314
7.6.1　按键 315
7.6.2　单选按钮 315
7.6.3　复选框 315
7.6.4　切换开关 316
7.6.5　命令栏 316
7.6.6　对话框 317
7.6.7　进度控件 317
7.6.8　搜索 318
7.7　制作Windows Phone壁纸软件 319
案例55　制作Windows Phone壁纸软件 319
7.8　制作Windows Phone壁纸软件 322
案例56　制作Windows Phone QQ界面 322
7.9　总结扩展 325
7.9.1　本章小结 325
7.9.2　课后练习——制作脑电波测试软件界面 326
· · · · · · (收起)

用户评价

我是一个坚定的“移动优先”信奉者，我的工作流已经完全建立在现代协作工具之上，所以看到这本书还花费大量篇幅讲解Photoshop的路径操作和形状工具时，我差点就把它扔到一边了。我本以为这会是一本快速上手的速成手册，结果发现它更像是一本“设计内功心法”的修炼指南。这本书的精妙之处在于，它没有试图让Photoshop去模仿Sketch或Figma的功能，而是挖掘了PS在**像素精度把控**上的独特优势。比如，书中对于“像素网格对齐”和“@2x, @3x 资源输出规范”的讲解，那种一丝不苟的态度，在很多轻量级工具中是看不到的。它强调的是，无论未来的工具如何演变，对“什么是完美对齐”的理解，对“如何控制不同分辨率下的视觉一致性”的把握，才是设计师的核心竞争力。它强迫你脱离自动化的“智能对齐”，去感受每一个像素跳动的节奏。阅读过程中，我感觉自己像是在学武术套路，看似繁琐的马步扎得很稳，将来换了更快的兵器，基础也不会垮。它不是教你做完APP，而是教你**如何思考APP的视觉结构**，这一点，远超出了单纯的“工具使用说明书”的范畴。

这本书的叙事风格有一种老派匠人的味道，不急不躁，但句句珠玑。它不像现在流行的设计书籍那样，充斥着大量色彩鲜艳的排版和极简的文字。相反，它的文字密度很高，需要你静下心来，甚至需要边读边动手操作才能完全领会。我尤其欣赏作者在讲解“设计规范导入”这一章节时的严谨态度。在移动互联网的快速迭代中，设计师往往只关注“新特性”而忽略了“历史包袱”和“兼容性”。这本书通过PS的视角，**系统地梳理了不同设备时代的像素密度差异**，以及如何利用智能对象和切图脚本来维护设计的一致性。这让我开始反思，我过去为了追求速度而牺牲掉的一些细节，其实是可能导致线上版本出现不一致性的小隐患。它不是一本教你“快速出图”的书，而是一本教你“**可靠出图，并且能经受时间考验**”的书。如果你只是想在周末两天学会拖拽按钮，这本书可能会让你感到压力，但如果你想成为一个对自己的设计产出有绝对掌控力的设计师，它提供的框架是无可替代的。

我购买这本书的初衷是想找一本能帮我从纯UI过渡到UX的桥梁，结果却意外地发现它在**视觉传达的底层逻辑**上为我打下了更坚实的基础。它很少提及用户研究或信息架构，但它所阐述的关于色彩空间管理、光影模拟以及纹理合成的技术，直接关联到了用户看到界面的“感受”。比方说，书中对“系统级反馈”的视觉模拟（例如，按钮按下时的微小形变和光泽变化），不是简单地告诉你“按下去要变暗”，而是告诉你**如何用PS的混合模式和高斯模糊精确模拟出这种物理反馈的视觉感受**。这种对“感觉”的量化和可复现性，是很多偏重流程的书籍所欠缺的。它教会我，设计不仅仅是排列组合，更是对光线、材质和人眼感知的精确模拟。这本书更像是一位资深导师，他没有直接给你答案，而是通过这个强大的工具，让你亲手去“制造”出那个答案背后的视觉物理学原理。

坦白说，我对于“从入门到精通”这种说法的接受度是很低的，因为很多书籍的“精通”部分，往往只是堆砌了一些复杂的滤镜效果，看起来很炫酷，但在实际商业项目中却很少使用。然而，这本书在“精通”部分的解读，非常务实。它没有沉迷于那些过时的3D效果或华而不实的图层混合模式。它真正的“精通”，体现在**如何利用PS的高级功能去解决移动端设计的特定痛点**。比如，在处理复杂插画风格的启动页或者需要高度定制化的品牌图标时，PS的矢量和位图混合处理能力是其他工具难以匹敌的。作者展示了如何构建可复用的、参数化的PSD模板，这对于需要为不同平台（比如iOS和Android）定制细微视觉差异的设计师来说，简直是福音。它让你意识到，Photoshop不是用来做线框图的，而是用来**雕琢最终交付的视觉资产**的。当我按照书中的方法优化了一个复杂的“毛玻璃”效果背景时，那种对透明度和模糊度的精确控制感，让我觉得这部分投入的时间是绝对值得的。

这本书，说实话，拿到手的时候我其实是有点犹豫的。毕竟现在设计工具五花八门，Photoshop 似乎有点“老炮儿”的意思了，总觉得新潮的APP设计早就奔着 Sketch、Figma 去了。我最初的期待是能看到一些关于最新的设计趋势、动效原理或者全新的交互范式。然而，这本书的侧重点明显是深挖那个我们再熟悉不过的“画布”——Photoshop。一开始，我甚至有点不耐烦，心想，这些基础操作网上搜搜不就有了吗？但当我真正翻开那些关于图层样式、蒙版运用，尤其是在处理复杂纹理和图标细节时的那些“独家秘笈”时，我开始意识到自己错得有多离谱。作者并没有仅仅停留在“如何使用工具”，而是深入探讨了如何用这个传统工具去**模拟和控制**像素级别的视觉效果，比如如何精确控制高光和阴影来营造出那种拟物化向扁平化过渡时期的视觉深度。它没有直接教你拖拽组件，而是教你**如何构建组件背后的视觉逻辑**。对于那些和我一样，经历过PC时代设计，却想把这些扎实的基本功平移到移动端像素世界的新手来说，这种自底向上（Bottom-up）的构建方式，比那些只教你套用模板的教程要有用得多。它让我重新审视了Photoshop在处理高精度、高细节的品牌视觉资产时的不可替代性。