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

从设计到实现 同时被 2 个专栏收录
31 篇文章 0 订阅
19 篇文章 12 订阅

原型设计

通过前面几个章节,我们已经掌握了安卓系统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一前一后互相配合,奠定了一个产品的牢固基石。


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

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

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


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

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

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

  • 0
    点赞
  • 1
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值