原型设计

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

效果图与交互原型

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

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

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

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

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

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

  • 高保真效果图:

     sketch_weather_app_static_effect_complete
  • 可以交互的原型产品:

     origami_weather_app_complete

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

这里我们的交互设计,参考了Material DesignAppbar可以上下滑动的效果,

 appbar_scroll_toolbar_txt

设计工具

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

 sketch_website

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

它的优点有,

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

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

 origami_website

使用它有两个原因,

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

SketchOrigami Studio一前一后互相配合,奠定了一个产品的牢固基石。