android应用开发-从设计到实现 3-1 原型设计

原型设计

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

效果图与交互原型

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

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

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

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

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

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

• 高保真效果图：

• 可以交互的原型产品：

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

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

设计工具

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

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

它的优点有，

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

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

使用它有两个原因，

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

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

本文是《从设计到实现-手把手教你做android应用开发》系列文档中的一篇。感谢您的阅读和反馈，对本文有任何的意见和建议请留言，我都会尽量一一回复。

如果您觉得本文对你有帮助，请推荐给更多的朋友；或者加入我们的QQ群348702074和更多的小伙伴一起讨论；也希望大家能给我出出主意，让这些文档能讲的更好，能最大化的帮助到希望学习开发的伙伴们。

除了CSDN发布的文章，本系列最新的文章将会首先发布到我的专属博客book.anddle.com。大家可以去那里先睹为快。

同时也欢迎您光顾我们在淘宝的网店安豆的杂货铺。店中的积木可以搭配成智能LED灯，相关的配套文档也可以在这里看到。

这些相关硬件都由我们为您把关购买，为大家节省选择的精力与时间。同时也感谢大家对我们这些码农的支持。

最后再次感谢各位读者对安豆的支持，谢谢:)