不积跬步无以至千里

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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