不积跬步无以至千里

前言 当我们面对生活中各种让你感动的创意、作品之时，一定有过这样的想法：假如这是我自己设计并做出来的，那该多好啊。是啊，假如有一件完全由自己产生的作品，能够带给别人方便与快乐，能够受到别人的欣赏，那该是一件多么幸福的事情。作为设计师的我们，作为程序员的我们，也许相比其他人，能够更加方便、容易的实现自己这个小小的心愿。因为把一个自己理想的App创意，变成一个实实在在的产品，并不会花费太多的经济成本，几乎

静态原型的Appbar折叠接下来，我们开始设计Appbar被滑动收缩以后的界面效果。可以看到，这个效果图绝大部分和展开时的效果图时一样的。所以我们可以将整个画板修改一个名字为-展开，并复制出一个新的画板命名为折叠，修改一下其中的元素就好了。使用Symbol这样做完全没有问题，但是可能会给以后内容的修改留下一个隐患：假如我要把风力从3级修改为5级，除了要修改展开画板，还要修改折叠画板，要修改两个地方。

动态原型设计动态的可交互原型产品，是产品经理和界面设计师向开发人员阐释自己设计的最高效工具。开发者不需要猜测设计师要什么样的效果，照着原型产品做就好了。很多创业团队也发现了产品人的这个刚需，做出了诸如Principle、Axure这类著名的原型设计产品。Facebook似乎也深谙此道，专门为安卓和iOS系统开发很有针对性的交互原型设计工具-Origami Studio。这是一个免费的工具，而且也能和

开发环境搭建开发安卓应用可以在Window系统 MacOS系统 Linux系统上进行。但并不是说打开一个写字板就可以了，它还需要编译器等开发工具的配合。所以在正式开发之前，需要搭建开发的环境，我们需要给开发平台（Window系统 MacOS系统 Linux系统）安装上：JDK（Java Development kit）：Java开发工具包，因为安卓使用java开发，而且安卓应用开发的其它部分工具也

应用的创建与部署现在我们开始创建一个全新的项目工程-天气预报，并在编译后让它运行到真实的设备上。创建应用工程运行Android Studio，启动Android Studio，选择Start a new Android Projcet；在Application name栏，为应用取个名字为WeatherApp；在Company Domain栏，按照网址的形式填上anddle.com－－当然，你

资源的创建界面原型已经设计完成了。不过离最后交付给开发人员开发还差一步：产品中使用的图片还没有准备好呢？设计师除了产品原型还要交付哪些资源呢？开发者最关心的资源就是应用中会使用到的各种图标资源和配色方案。在天气预报应用当中，我们已经确定好了界面的主要颜色， 颜色项目 颜色名称 颜色RGB值 Primary Color Indigo 500 3F51B5 Primary Da

开发产品当开发者拿到设计师提供的原型（静态或者动态）和资源后，也并不是就可以开始写代码了。开发阶段通常还会包含以下几个部分：功能验证 -> 设计文档 -> 编写代码 -> 测试 -> 产品发布 -> 产品升级在整个开发的过程期间，还需要对各种文档、代码、资源进行管理，引入版本控制的概念。功能验证如果产品的功能很复杂，开发者在正式开始编码前，还得做一番功能的验证。也就是，在创意阶段确定功能点的那些验

版本管理前面已经提到了，非常有必要对开发的代码进行管理。那么进行版本管理到底什么时候使用呢？我总结了使用版本管理的主要场景，有以下3种：对于个人开发者，版本管理能记录开发的变迁。它记录了所有文档的修改记录，就好比玩游戏时，我们都会时刻存档，就怕哪一次不小心，控制的角色挂了；假如不存档，出了问题，必须得从新开始。如果使用了版本管理，就可以随时保存文档修改的进度。一旦文档任何时候出现了问题，或者希望快

资源的导入在前面讲解产品原型设计的章节中，我们已经创建出了各种开发时需要使用的各种图标了，包括应用图标、系统图标等等。图标导入现在，我们先把开发过程中要使用到的图片资源添加到Android Studio工程目录当中。将Sketch创建的静态高保真原型中的图标，根据导出的尺寸，将它们分类整理到对应的文件夹当中，打开天气预报所在的Android Studio的工程文件夹-app -> src ->

界面的整体布局从这一章节开始，我们终于可以开始使用Android Studio写代码了。天气预报这个应用虽然功能很简单，但是对于从来没有接触过安卓开发的人来讲，开发完成还是需要很多步骤。为了减小学习的坡度，增加开发的阶段性成就感，我将天气预报分成2个阶段来开发，第1阶段：暂时不考虑Material Design的各种限制，比如Appbar的滑动效果，下拉刷新功能；用户点击左上角的刷新Refresh

天气详情的布局整体布局完成之后，我们开始进行天气详情区域的布局。这个区域由天气图标、当前温度、当日温度范围、地理位置等4个元素组成。我们可以选用Android SDK提供的现有控件，完成布局。 区域名称 区域尺寸 选用控件或布局 天气图标 96dp*144dp ImageView 当前温度 文字的字体56sp决定 TextView 当日温度范围 文字的字体2

天气指数列表的布局天气相关信息是通过列表方式呈现的。Android SDK提供的ListView控件就能实现这样功能。ListView需要和Adapter配合使用，ListView负责内容的显示，Adapter负责为ListView提供要展示的数据。要实现我们希望的展示效果，需要开发者自定义一个Adapter。那我们先看看ListView是怎么使用的。ListView的基本方法先在我们的工程项目中使

天气预报的布局现在我们开始进行天气预报区域的布局。可以看出，这个区域，由5个完全一样的组件组合而成。只要我们完成一个组件-天气预报项的布局，再把这个布局复制粘贴，很容易就完成了。天气预报项在layout目录上点击右键，选择New -> Layout resource file。输入布局文件的名字forcast_item，一个新的布局文件forcast_item.xml就被创建到了res\layout

静态原型的更多天气信息天气的更多信息，是通过列表的形式展现的。参数设计列表项的高度在Material Design中，被定义成了48dp；并且整个list的顶部还有8dp的边距。列表项由3部分组成，

静态原型的状态栏状态栏Symbol状态栏似乎很复杂，有wifi信号、手机信号、时间、电量等信息，幸好Sketch原生就自带的现成组件，你可以直接拿过来就用了。当然，你也可以自己一个一个去画，不过既然有了现成的轮子，又何必重复劳动呢。菜单栏中选择File -> New From Template，在弹出的菜单中选择Material Design。此时会创建一个新的工程文件。与之前空的工程文件不同的是，

静态原型的天气预报未来5天的天气预报，可以看成由5个类似的天气模块构成，只要完成一个，其他几个就可以通过复制+修改内容实现改变。首先来明确一下各个组件的尺寸和参数，整个区域的大小，我设定成360dp*100dp；左右边距设置成16dp；这样一来，每日的天气模块就是（360-16-16）/ 5 = 65.6dp，我将它们设定成65dp宽；天气的图标的大小设定成30dp的正方形区域（注意，这些图

图标的使用图标能给人带来最直观的印象，有的时候再多的解释也抵不过一个图标。安卓应用的图标分成两类，应用图标：在主界面上代表着整个应用的那个启动图标，是给用户第一印象的图标。一个应用开发成功后会不会被用户下载，也许就取决于用户看它的第一眼。系统图标：在应用里面使用的各种具有特别意义的图标，引导用户进行更多的操作。应用图标应用图标的设计也是对Material Design的一种体现：制作应用图标的

功能的确定产品的功能并不是在确定了产品之后才开始考虑的，功能与创意选择其实是一个“你中有我，我中有你”的关系。为了体现产品设计的阶段性，我才将它单独提出来分析。这里讨论的产品功能，是建立在选定了某个基础之上的。比如我们之前选定了天气预报，那么就将产品功能围绕天气预报讨论。头脑风暴一开始，我们可以对产品进行一次头脑风暴，找出它的核心功能和可以拓展的外延。什么是头脑风暴？简单来说，就是给定一个主题，让一

动画效果运动的物体总是能最有效的吸引住人类的注意力。在界面设计的领域，也是一样，当你希望用户的注意力从一个点转移到另一点，在这两点之间设计一个迁移的动画是在合适不过的了。动画基本上可以分成以下几类：平移动画：渐变动画：缩放动画：旋转动画其他所有的动画基本上都是这些单一的动画，或者多个动画的叠加。例如，一边平移一遍放大。动画由两个要素：一个是上面各种动画体现出的空间变化；另一个就是动画相对于

设计原理设计是一门让人感觉很抽象的艺术。设计需要从两个方面来考虑问题：实用：体现在功能上和交互性上；美观：体现在界面的布局，色彩的搭配，字体的运用上；对于我们的安卓应用来讲，设计的目的就是要体现需要显示给用户看的内容的价值，将用户所有的注意力都吸引到要呈现的内容之上。对安卓应用来讲，这些内容无非就是：文字和多媒体（视频、图片等等）。在这里游戏就不是我们讨论的范畴了。围绕内容，Google为此提

界面布局布局涉及到应用界面的整体。布局的层次感和逻辑，可以通过阴影来体现。举个例子。在一张纸当中，增加一条折痕，一个区域就分成了关联性很强的两个区域，将一张纸盖在另一张纸之上，就像是搭台阶一样，上层会在下层投下阴影，这两张纸代表了逻辑不同的两个区域，纸张在z轴的位置，被称作Elevation，很形象的比喻了纸片相对于别的照片被提升了起来。尺寸的度量张纸片之间的距离产生阴影，那么距离用什么来衡量呢？要

声音与触觉的利用之前我们对设计的讨论都是几种在视觉基础之上的。但除了视觉，我们人还拥有听觉、嗅觉、触觉、味觉等感知大自然的能力。现在由于技术的限制，嗅觉和味觉在移动设备领域的使用还无法派上用场，但是听觉和触觉正在扩大对我们使用的影响。声音的影响最经典的听觉案例有2个，和大家分享一下。一个是当年诺基亚的开机铃声，我想使用过诺基亚手机的同学每当听到这个声音一定会想到它那经典的台词，科技与人为本，然后就是

颜色的运用Material Design采用的是扁平化的设计，可以看到一大块一大块区域的颜色。这些颜色大多亮丽引人，整个界面上搭配的颜色也不会太多，基本保持在三种颜色以内。“没有错误的颜色的，只有错误的搭配”。颜色是没有对错的，我们要用经验和直觉来搭配它们，所以要先来认识认识颜色。颜色理论颜色是有语言的，红色代表这热情奔放，蓝色代表的沉着安静，绿色代表着生机活力。搭配一组颜色，就是表达作品要传递的含

组件与常用模式前面已经比较全面的介绍了Material Design相关的设计哲学、设计原理和方法论。这一章开始，我们将看看这些原理是如何在安卓系统当中得到实践的。一个应用并不是完全从什么都没有来组建的，至少会有一匹一匹的砖嘛。而在界面设计当中，这些能够拿过来就使用的砖块就是控件。例如，按钮 滑动条 列表等等，都是可以直接拿过来用的砖块。Material Design最基础的体现，就是看看这些砖长成

文字的使用文字是应用当中使用最多的要素。显示一段供用户阅读的文字，程序运行时的信息提示都离不开它。文字是内容的实际体现者，因此设计师需要将用户的注意力尽可能的吸引到文字当中。字体可以分成两种类型：有衬线的-serif；无衬线的-sans-serif，也简称sans。serif的笔划端部会多出来一截修饰；sans的笔划端部是平的。在过去，serif通常用来做文章的内容，sans用来做标题；但是现在

静态原型的Appbar我们设计的Appbar包括了两个部分，一个是toolbar，另一个就是flexible space-显示当日天气的详细信息，Toolbar参数确定添加Toolbar很简单，首先找到Material Design中对Appbar的描述可以知道，这是一个高度为56dp的矩形区域；当Appbar收缩时，应用的名字会显示出来，注意：这里显示的是中文-Dense类型的文字，所以文字的

Sketch静态原型设计对于静态原型的设计，我们使用Sketch。启动Sketch后，我们将看到类似如下的界面，工具栏它的顶部是工具栏，可以通过菜单栏View -> Customize Toolbar...来自定义工具栏。 在弹出的窗口中，将下方的图标拖拽到上方的工具栏中就可以了。导航栏左边是导航栏，用来展示这个项目拥有的page和page中包含的详细内容。page是一张张单独页面，每个页面上可

前期准备设计师首先在头脑中、草稿中勾勒出静态效果图，之后就需要收集制作时需要的各种素材、确定界面的配色方案。收集素材界面中需要使用各种天气图标：晴天、雨天、大雾、下雪、下雨、多云等等；还有天气信息中的风力、风向等等。我们可以使用Sketch工具进行完全的从无到有的自由创作，也可以适用现有的素材，减少设计的工作量。这里并不打算讲如何画出一个完美的图形，我想作为一名设计师，这点基本的艺术功底应该还是有的

原型设计通过前面几个章节，我们已经掌握了安卓系统Material Design设计的大致原则。接下来，我们开始尝试将这些原则和方式运用到实际的项目当中。效果图与交互原型产品原型的设计又可以分成两个阶段，高保真效果图：这是产品的静态效果图，图纸上的设计效果与最后实际产品基本上是一模一样。产品中使用到的各种图标都可以从高保真效果图中截取出来使用（这里其实指的是使用sketch进行界面原型设计，它可以从

界面模式Material Design的基础组件我们已经大体了解过了，现在我们看看Material Design在结合这些不同组件的过程中，有哪些套路，也就是有哪些常用的界面设计模式。了解了这些模式，可以帮助设计者们做出合乎开发者实现的方案。设计的套路有很多，列表-list 分页-tab 网格-Grid 侧边栏 下拉刷新等等。这里只列出几个常见的，更多的方式请参考设计规范，以及其他各种优秀应用的精

解析天气预报数据界面布局完成以后，就需要设计代码来控制界面上各个元素的逻辑了。从网络获取天气预报数据；解析获取的数据；根据解析的结果更新天气预报界面；天气预报的数据依赖于网络端的服务器，不是手机端的应用开发者自己能决定的。假如应用和网络服务器是两拨人同时在开发，极有可能出现这样的情况：手机端需要获取数据的时候，服务器端还没有准备好。遇到这种情况该怎么办呢？我们可以自己构造一个假数据，模拟已经