
本书以木工工具应用为例,演示如何确定产品目标,接着利用现有视图等要素从零开始搭建整个应用,然后使用高级功能进一步优化代码及资源,以达到“精心设计”的目的。另外,本书附录提供了应用推广所需物料等细节。全书内容覆盖面广,结构合理,涵盖产品经理、设计人员、开发工程师及市场推广人员所需的基础理论、实战技巧和精彩案例,适合但不限于以上人群阅读。
译者序 我从2008 年开始从事移动端界面设计研发的工作,当时正是Android 火热发展 的阶段,借助在腾讯和搜狗项目历练的机会,我深刻了解到Android 相较其他平 台更具有开放性和更多的可能性。在项目中我深刻体会到不够规范对设计和开发 的成本所造成的浪费。如今Android 发展日趋成熟,Material Design 是个非常有 意义的指导规范,好的平台就需要让从业者能更高效率和质量地完成开发。 在2014 年受博文视点编辑张春雨之邀完成本书第一版本的翻译之后,我又在 2015 年完成了本书第二版本的翻译工作。本书最大的特色在于同其他类似的开 发工具书相比,它更全面地介绍了开发一款应用时,在产品经理的角度进行技术 准备之前的各种业务分析,从思维导图落地到原型设计的精彩案例。这些案例让 技术人员从一开始就明确设计的准则——不是为了开发而开发,而是为目标而开 发;同时,在体验设计表现层的视觉上,更全面地介绍了界面视觉的基础知识, 让我们的读者站在技术和艺术的交叉线上,达到比普通应用开发更高阶的品质和 体验。附录的市场推广技巧介绍了国外的应用市场,同样,在中国国内也有很好 的借鉴意义;在本书的后面部分作者也总结了很好的开发技巧的内容,这对开发 者来说是难得的经验积累。总之本书对于有Android 基础、但对产品基础和设计 感觉还不够深入的开发者是非常受用的。 在第二版的翻译中,我获得了两位朋友的全力帮助:李平霞,资深移动端交互 设计师,毕业于北京理工大学的设计艺术学硕士,执着于最好的用户体验,熟 悉各类设计规范,让本书在体验设计层面精准还原了作者的规范意图和Material Design 的规范内涵;张鸿昊,毕业于东北大学计算机专业,经历了丰富的 Android 开发工作,作为本书的技术校对专员,他支持了本书所有的代码审查, 翻译难点攻坚。张鸿昊始终相信帮助他人是收获快乐的重要途径,非常兴奋地投 入到本书的翻译工作中。得益于两位的倾力投入,本书才能顺利、快速地呈现给 各位读者,在此,我对两位朋友的支持表示深深的感谢! 前言 Android 的发展速度惊人,任何开发人员都难以紧跟它的发展变化。尽管我们可 以尽力了解Android 最新的特征和API 的变化,却非常容易忽略设计方面发生的 变化。Google 发布的Material Design 指南也让那些长期未关注Android 视觉的设 计师们开始重视起来。 当下最重要的是开发人员要采取一些可行的方法来理解设计的核心要素以及 Material Design 指南。要是没有多年的设计背景,你要弄清楚这一切也有一定的 困难。这本书将引导你经历真实的设计过程,从一个抽象的概念或纸面草图开始, 直到最终的实现,方法会涵盖动画、RenderScript 和自定义view。目的就是保证 你可以接触到Android 的每一个核心概念,而且尽量涵盖足够多的内容,保证你 能更有效地与设计师沟通,甚至自己创作一切。 设计有很多目标,但最重要的两点是可用性和视觉吸引力。你希望新用户进入你 的应用后毫不费力地就开始使用,这是因为移动用户比其他任何平台的用户更没 有耐心。用户需要确切地知道自己能与什么交互,并且不用全神贯注就能立刻实 现需求。那就意味这你必须知道平台约定是什么,以便能够利用上养成的习惯。 如果你已经拿起了这本书,那我无需强调设计是何等重要。你懂的!你发誓一定 要做出漂亮且令人体验愉快的应用。 这本书将作为一个完整设计和实现流程的教程,也是你可以不断重复使用的参考 资料。你将了解如何与设计师或其他开发人员进行沟通,最终做出最好的应用。 你会让应用充满视觉吸引,同时还能在最后关头轻松改变必要的设计需求。 最后,设计师和开发人员都希望开发的应用能惊艳众人,而我会无比兴奋地告诉 你如何让惊艳成真。 ——Ian G.Clifton 致谢 你可能以为编写这本书的第二版会比第一版简单,但技术和设计的趋势变化太快, 以致于你发现90% 都得重写,多亏有了援助。感谢责任编辑Laura Lewin,重构 这本书时,起初我在某些章节的深度上并没计划投入太多精力,他再一次将我拉 回了正轨。编辑助理Olivia Basegio 记录所有改动的地方,包括在网上的粗略剪 辑,以便感兴趣的读者能够扫一眼便知这本书有了提升。Songlin Qiu 再次担任本 书的策划编辑,他设法理解我半夜写的章节草稿。我非常感谢所有技术评审,他 们的反馈对本书的质量起到了很重要的作用,感谢Adam Porter、Cameron Banga 和Joshua Jamison。 关于作者 Ian G.Clifton 是一名专业的Android 应用开发人员、用户体验倡导者,也是本书 的作者。他与很多开发人员、设计师们一起工作,领导着Android 开发团队,开 发出一些著名的应用,诸如Saga、CNET News、CBS News 等。 Ian 喜爱科技、艺术和用户体验,这让他走过许多不同的道路。除了Android 开发, 他还做过平台、网络和桌面的开发工作。他曾供职于美国空军,作为卫星宽频和 遥测系统的短期员工,还用铅笔、炭笔、毛笔、相机甚至是木头创作了数量相当 可观的艺术作品。 你可以在Twitter(http://twitter.com/IanGClifton)中关注Ian G.Clifton,还可以关 注他的博客(http://blog.iangclifton.com),了解他对于移动开发的观点。他还发 布了名为“The Essentials of Android App lication Development LiveLessons,2nd Edition”的系列视频,访问网址http://goo.gl/4jr2j0 就可以观看。 序言 本书读者 这本书主要是为那些想更好地理解Android 用户界面的开发者们准备的。为了聚 焦在Android 用户界面设计的重要主题上,本书假定你已经对Android 有一个基 本的了解。阅读本书之前你至少应该做出一个“Hello,World”的Android 应用, 亦或是设定你的电脑为开发状态(Android 开发网站是一个初学者好去处,网址 为http://developer.android.com/training/basics/firstapp/index.html)。 大多数开发者对设计体验的认识有限,甚至是没有,因此本书并未假设你能理解 设计。无论何时设计主题都是重要的,例如选择颜色。本书将教会你这些基础的 概念,使得你在做决定时不仅有信心,还能知道为什么要做那些决定。 本书组织架构 本书分为3 部分。第1 部分,Android 用户界面基础,在读者深入到创建Android 界面的具体类之前,提供了Android 用户界面的概要和趋势。同时这部分也包括 图形和资源的使用。第2 部分,完整的设计和开发过程,反映了应用开发的各个 阶段,始于想法和目标,继而完成框架和雏形,然后是开发完整的应用,包括高 效布局、动画等。第3 部分,Android 用户界面的高级应用篇,探索了更加复杂 的方式,包括应用Systrace 来排除用户界面性能的故障以及通过操作绘图、滑动、 保存状态来创建自定义view。 本书还有2 个附录。附录A 重点讲述Google Play 的资源文件准备(包含与在 Amazon 应用商店准备时的差异),需要深入研究应用的图标创作。附录B 涵盖 了很多用户界面相关的常见任务,这些任务值得了解但不一定普遍适用(比如自 定义view 属性)。 本书自始至终将重点放在简单和清晰的实现方式上。你不必担心会埋头苦干于类 似OpenGL 中3D 矩阵变换之类的复杂话题。相反,你会学到如何创建流畅的动画, 将PorterDuff 混合模式添加到自定义view,以及有效地与触摸事件工作。涉及到 的极少的数学知识将被拆解,变得极为简单,以至于你几乎意识不到会用上数学 知识。另外,图例让最复杂的例子变得格外清楚,并且每个例子都很实用。 如何使用本书 在深入更具体、更高级的主题之前,本书以一个极宽泛的概述开始。因此希望你 按章节顺序阅读,但本书被组织得尽量简单。即使你是一个高级开发者,阅读所 有的章节也是个不错的主意,因为本书涉及了众多领域。当然,也可以直接跳到 你最感兴趣的主题。例如,如果你只想关注创建自定义view,请直接跳到第12 章, 开发完全自定义的view。 本书站点 你可以在http://github.com/lanGClifton/auid2 以及出版社网站http://informit.com/ store/android-user-interface-design-implementing-material-9780134191409 上找到本 书示例的源代码。在这些网站中,你可以复制整个资源库、下载完整的ZIP 文件, 还可以浏览个人文件。 本书约定 本书使用了在大多数编程书中都可以找到的典型示例。例如,代码术语(例如类 的名称和关键词)用等宽(monospace)字体显示。当某类被专门指代(例如,“你 的类应扩展了View 类”),则用英文monospace 字体。如果它经常使用(例如,“当 开发一个view 时,记得在一个真机上测试”),则不会用到专门的字体。 有时当一行编码太长而不能在本书中打印成一行时,会用一种代码的连续箭头 (?)表示连续。 有时你还会看到一些展示有用信息的旁白,它没有被写入正文中。 注意 像这样的注意是为了提供你也许认为有用的其他信息,作为 书中的补充材料。 提示 提示就像这样,在具体的话题中给你建议。 警告 潜在数据丢失或安全问题 警告就像这样,目的是要你注意到 可能遇到的潜在问题或应该留意的点。
目录 序 XVII 第1部分 Android 用户界面基础 第1章 Android界面和Material Design 1 Android设计简史 2 Material Design 4 基本概念 4 交互和动画 7 字体 8 测量和对齐 9 Android设计站点 10 核心原则 10 做一件事并把它做好 10 与其他应用友好相处 12 视觉、视觉、重要的视觉 13 简单但强大 14 平台一致性 15 适应用户 16 标准组件 17 系统栏 17 通知系统 18 应用栏 19 Tab 和侧边式抽屉导航 20 FAB 20 支持多种设备 21 避免让人痛苦的错误 22 菜单键 22 长按 22 通知图标 22 来自其他平台的样式 23 小结 23 第2章 理解view——用户界面的构架模块 25 什么是view 26 View ID 28 理解view 尺寸 29 显示文本 33 显示图片 38 背景 38 聚集用户输入的view 40 其他值得关注的view 44 事件的监听 47 其他监听器 48 小结 48 第3章 用ViewGroup与Fragment创建全布局 49 理解ViewGroup以及常见的实现方式 50 其他值得关注的ViewGroup 61 用Fragment封装view逻辑 63 Fragment 的生命周期 64 给予 Fragment 数据 65 与Activity 进行通讯 66 执行Fragment 的事务 69 争议 70 支持库 70 CardView 库 72 Design 库 72 GridLayout 库 73 Leanback 库 73 MediaRouter 库 73 Palette 库 73 RecyclerView 库 74 注解支持库 74 小结 74 第4章 添加应用的图形和资源 77 Android中资源的介绍 78 资源限定符 78 理解密度 83 可支持的图片文件 84 栅格图片 85 矢量图片 86 9-patch图片 86 XML可绘制对象 88 Layer List 89 State List 90 Level List 93 其他资源 103 Strings 104 数组 105 颜色 106 尺寸 107 动画 107 ID 107 菜单 108 小结 109 第2 部分 完整的设计和开发过程 第5章 开始一个新的应用 111 设计方法 112 常用方法 112 以用户为中心的设计 112 确定目标 115 用户目标 116 用户模型 117 产品目标 117 设备和配置支持 118 概要流程图 119 线框图 122 从导航开始 125 接着进入内容模块 128 详情页面的线框图 130 支持多种设备 132 命名惯例 132 原始资源 134 小结 135 第6章 原型和开发应用基础 137 组织为Activity和Fragment 138 创建第一个原型 139 Tab 140 抽屉导航(Navigation Drawer) 142 Tool 展示 145 Tab Fragment 151 Tool Details 165 评估第一个原型 170 与用户一起工作 171 完全开放 171 明确目标 172 动态目标 172 真实的用户反馈 172 下一步 175 小结 176 第7章 设计视觉效果 177 线框和图形设计 178 工具 178 风格 179 拟物设计 179 极简设计 180 扁平化设计 180 Material Design 181 光源 181 颜色 182 相关科学 182 选择颜色 185 木工应用 189 文本注意事项 189 文本对比 190 文字尺寸、样式和大写 191 文本间距 191 文本阴影 192 自定义字体 192 易懂的用语 194 其他注意事项 194 变化的文本长度 194 图片的有效性和尺寸 195 透明度和3× 规则 195 标准图标 196 导航和过渡 196 错误情况 196 设计步骤 197 小结 201 第8章 实现设计方案 203 和设计师一起工作 204 切出图形资产 205 简单切图 205 9-patch 图片 207 生成可替代尺寸 210 主题和样式 211 把comps拆为多个view 212 开发木工应用 213 主屏幕 214 工具列表 224 工具详情 238 多种设备上的基本测试 242 小结 243 第9章 用动画出彩 245 动画的目的 246 view动画(View Animation ) 246 属性动画(Property Animation) 247 控制Property Animation 249 监听器 249 类型Evaluator 250 Time Interpolator 253 关键帧 255 ViewPropertyAnimator 256 错误提示动画 256 动画图标 261 制作矢量图标动画 261 动画化栅格图标 266 简单的转场 267 屏幕转场 268 Activity 转场 272 圆形显现过渡 276 总结 279 第3 部分 Android 用户界面的高级应用篇 第10章 使用高级技巧 281 识别Jank 282 用Systrace理解Jank 283 优化图片 290 压缩图片 290 使用正确的大小 292 使用图片缓存 296 额外的性能提高 302 控制垃圾回收 302 View Holder 模式 303 消除过度绘制 306 Hierarchy Viewer 309 找到丢失的view 312 消除不必要的view 312 导出为PSD 文件 312 自定义字体 313 复杂的TextView 316 存在的Span 316 复杂文本的Spans 使用 318 RecyclerView 320 布局管理器 321 适配器 321 条目Animator 322 条目装饰 322 总结 322 第11章 处理Canvas和高级绘制 325 创作自定义Drawable 326 基本概念 326 其他的重要方法 327 Paint 327 Canvas 328 处理文本 328 一个简单的文本Drawable 328 更好的Text Drawable 331 处理图片 333 色彩过滤器 336 Lighting Color Filter 336 色彩矩阵 337 PorterDuff 图片合成 338 着色器 349 圆形图片 349 渐变淡化 352 总结 355 第12章 开发自定义view 357 基本概念 358 测量 358 布局 359 绘制 360 保存和恢复状态 360 创建一个自定义View 361 测量 363 处理布局Layout 364 建立Bitmap 365 保存和恢复状态 367 总结 375 第13章 处理输入和滚动 377 触碰输入 378 其他形式的输入 379 创建一个自定义View 380 创建初始自定义View 文件 380 测量 386 绘制 390 准备触碰输入 395 处理触碰输入 399 其他注意事项 416 总结 417 附录A Google Play资源文件 419 附录B 常用任务参考 437
郑磊 好大夫在线用户体验负责人,设计艺术学硕士,毕业于北京理工大学。曾就职于阿里巴巴、腾讯和搜狗科技,致力于互联网产品服务的用户体验提升。负责过的产品包括QQ阅读、QQ音乐、搜狗浏览器、搜狗号码通、搜狗手机助手等。