原型设计

通过前面几个章节，我们已经掌握了安卓系统Material Design设计的大致原则。接下来，我们开始尝试将这些原则和方式运用到实际的项目当中。

效果图与交互原型

产品原型的设计又可以分成两个阶段，

  1. 高保真效果图：这是产品的静态效果图，图纸上的设计效果与最后实际产品基本上是一模一样。产品中使用到的各种图标都可以从高保真效果图中截取出来使用（这里其实指的是使用sketch进行界面原型设计，它可以从效果图中提取图标素材）。

  2. 可以交互的原型产品：为了向产品的规划者（PM-产品经理）确认设计的正确性，同时向后继的开发人员展示正确的设计意图，设计师需要创建出一种能具有交互功能的原型产品。这种原型产品就像是一个已经开发完成了的最终产品，可以进行点击操作，具有互动性。

    当然这毕竟只是一个“虚假”的产品，只是具备了展示的功能。

接着创意阶段的工作，需要我们将天气应用框线图的规划，变成一个像模像样的产品原型。设计师需要根据功能点，结合Material Design的设计里面，创造出一个让用户在视觉和交互上满意的产品。这种创造需要结合设计师的个人能力和经验。

我们的天气应用很简单，它简化了很多的功能，按照原型设计的两个阶段，可以将他们设计成下面这个样子，

  • 高保真效果图：

    sketch_weather_app_static_effect_complete

  • 可以交互的原型产品：

    origami_weather_app_complete

假如设计师设计的产品交互方式，很容易被开发者理解，那么动态交互原型也是可以不用设计的。不过，为了更加全面的展示设计的具体过程，我们这里会首先设计一套天气应用的高保真效果图。然后在此基础上，设计一套可以互动的产品原型。

这里我们的交互设计，参考了Material Design中Appbar可以上下滑动的效果，

appbar_scroll_toolbar_txt

设计工具

设计高保真的效果图时，我们选择采用了MacOS上才能使用的Sketch。这是一款付费软件，大家可以在它的官网看到详细的信息。官网也提供了功能完善的试用版，作为初次的学习，大家可以通过它来练练手，实际的感受一下。

sketch_website

Sketch绝对是当今甚至未来几年应用程序界面设计行业中的主角，越来越多的设计师使用它来进行原型设计。

它的优点有，

  • 体积小，运行时占用的资源少，性能高；
  • 可以从设计的效果图中，直接导出开发时需要使用的图片；
  • 导出的图片可以针对不同屏幕解析度的设备；
  • 内置了安卓系统、iOS系统常用的公共组件（例如状态栏、常用控件、屏幕标准尺寸），可以拿来就用，不必全部重新设计；

设计可交互原型时，使用了FaceBook推出的Origami Studio，它可以把我们的静态效果图，转化成一个可以交互的原型。

origami_website

使用它有两个原因，

  1. 这是一个免费的工具，有着强大的动画交互功能；
  2. Sketch制作的原型文件，可以直接导入到Origami Studio当中，减少设计的工作量；

Sketch与Origami Studio一前一后互相配合，奠定了一个产品的牢固基石。