原型设计
通过前面几个章节,我们已经掌握了安卓系统Material Design
设计的大致原则。接下来,我们开始尝试将这些原则和方式运用到实际的项目当中。
效果图与交互原型
产品原型的设计又可以分成两个阶段,
高保真效果图:这是产品的静态效果图,图纸上的设计效果与最后实际产品基本上是一模一样。产品中使用到的各种图标都可以从高保真效果图中截取出来使用(这里其实指的是使用
sketch
进行界面原型设计,它可以从效果图中提取图标素材)。可以交互的原型产品:为了向产品的规划者(PM-产品经理)确认设计的正确性,同时向后继的开发人员展示正确的设计意图,设计师需要创建出一种能具有交互功能的原型产品。这种原型产品就像是一个已经开发完成了的最终产品,可以进行点击操作,具有互动性。
当然这毕竟只是一个“虚假”的产品,只是具备了展示的功能。
接着创意阶段的工作,需要我们将天气应用
框线图的规划,变成一个像模像样的产品原型。设计师需要根据功能点,结合Material Design
的设计里面,创造出一个让用户在视觉和交互上满意的产品。这种创造需要结合设计师的个人能力和经验。
我们的天气应用
很简单,它简化了很多的功能,按照原型设计的两个阶段,可以将他们设计成下面这个样子,
高保真效果图:
可以交互的原型产品:
假如设计师设计的产品交互方式,很容易被开发者理解,那么动态交互原型也是可以不用设计的。不过,为了更加全面的展示设计的具体过程,我们这里会首先设计一套天气应用
的高保真效果图。然后在此基础上,设计一套可以互动的产品原型。
这里我们的交互设计,参考了Material Design
中Appbar
可以上下滑动的效果,
![appbar_scroll_toolbar_txt](http://7xrwhw.com1.z0.glb.clouddn.com/appbar_scroll_toolbar_txt.gif)
设计工具
设计高保真的效果图时,我们选择采用了MacOS上才能使用的Sketch
。这是一款付费软件,大家可以在它的官网看到详细的信息。官网也提供了功能完善的试用版
,作为初次的学习,大家可以通过它来练练手,实际的感受一下。
![sketch_website](http://7xrwhw.com1.z0.glb.clouddn.com/sketch_website.png)
Sketch
绝对是当今甚至未来几年应用程序界面设计行业中的主角,越来越多的设计师使用它来进行原型设计。
它的优点有,
- 体积小,运行时占用的资源少,性能高;
- 可以从设计的效果图中,直接导出开发时需要使用的图片;
- 导出的图片可以针对不同屏幕解析度的设备;
- 内置了安卓系统、iOS系统常用的公共组件(例如状态栏、常用控件、屏幕标准尺寸),可以拿来就用,不必全部重新设计;
设计可交互原型时,使用了FaceBook
推出的Origami Studio
,它可以把我们的静态效果图,转化成一个可以交互的原型。
![origami_website](http://7xrwhw.com1.z0.glb.clouddn.com/origami_website.png)
使用它有两个原因,
- 这是一个免费的工具,有着强大的动画交互功能;
Sketch
制作的原型文件,可以直接导入到Origami Studio
当中,减少设计的工作量;
Sketch
与Origami Studio
一前一后互相配合,奠定了一个产品的牢固基石。
本文是《从设计到实现-手把手教你做android应用开发》系列文档中的一篇。感谢您的阅读和反馈,对本文有任何的意见和建议请留言,我都会尽量一一回复。
如果您觉得本文对你有帮助,请推荐给更多的朋友;或者加入我们的QQ群348702074和更多的小伙伴一起讨论;也希望大家能给我出出主意,让这些文档能讲的更好,能最大化的帮助到希望学习开发的伙伴们。
除了CSDN发布的文章,本系列最新的文章将会首先发布到我的专属博客book.anddle.com。大家可以去那里先睹为快。
同时也欢迎您光顾我们在淘宝的网店安豆的杂货铺。店中的积木可以搭配成智能LED灯,相关的配套文档也可以在这里看到。
这些相关硬件都由我们为您把关购买,为大家节省选择的精力与时间。同时也感谢大家对我们这些码农的支持。
最后再次感谢各位读者对安豆
的支持,谢谢:)