android应用开发-从设计到实现 3-9 Origami动态原型设计
动态原型设计
动态的可交互原型产品,是产品经理和界面设计师向开发人员阐释自己设计的最高效工具。

开发人员不须要推測设计师要什么样的效果,照着原型产品做就好了。
非常多创业团队也发现了产品人的这个刚需,做出了诸如Principle
、Axure
这类著名的原型设计产品。
Facebook
似乎也深谙此道。专门为安卓和iOS系统开发非常有针对性的交互原型设计工具-Origami Studio
。

这是一个免费的工具,并且也能和Sketch
互通,所以我选择了它来向大家解说互动原型的设计。
界面介绍
启动Origami Studio
后,能够看到相似例如以下界面,

悬浮在外的区域是虚拟手机屏幕。用户能够通过点击、拖动来模拟各种屏幕操作;
底部的暗色区域是工作区域。用来设置用户操作屏幕后。界面元素的各种响应方式;
右边的亮色区域是界面组件区域。展示了组成界面的各个元素,里面的布局方式。通过虚拟屏幕实时展示了出来;
点击虚拟屏幕右上方的摄像机
button。能够将屏幕上的内容录制下来,

创建屏幕界面
对于新创建的项目,整个工程都是空的,

我们能够通过菜单条的+
。为界面加入各种组件。

也能够直接将Sketch
中的图形。通过复制粘贴
的方式。直接加入到组件区域。
通过
Phone -> Nexus 5
将虚拟设备的屏幕。设置成Nexus 5
- 安卓设备。将组件区域中
Color Fill
的背景色改动成白色
。
然后。打开上一章节中Sketch
设计的静态高保真原型,
- 选中
Weather
页面的展开
画板,使用cmd + c
(复制); - 切换到
Origami Studio
。cmd + v
(粘贴);
整个界面就导入完毕了,

所以我之前说,使用Sketch
进行界面设计能够事半功倍,它与Origami Studio
配合的非常好。
设置滑动区域
当用户滑动Content
区域的时候,该区域要能够尾随手指,向上滑动。这里就有2个要点,
- 滑动
Content
区域:要能够感知到这个区域被滑动; Content
区域尾随滑动:滑动的位移能够作为输入。实时的影响Content
区域的位置。
感知交互
组件旁边有个touch
button。点击后会出现该组件可能会接收到的各种触控方式。
在本例中。我们是须要感知Content
组件垂直方向上的滑动,所以选择ScrollY
。

此时,工作区域
和虚拟屏幕
都发生了变化,

Content
区域的位置发生了变化。被“顶”到了整个屏幕的最上面。这是为什么呢?由于Content
区域的Y坐标被改动成了0
。
在紫色的Scroll
框图中,Content Layer
被指定成了Content
。说明须要关注Content
的滑动。Y
坐标的变化将被输出到蓝色框图代表的Content
区域,改动它的Y
坐标。
因此,当框图被这样组合之后,我们没有触控Content
区域。Content
的Y
轴就没有滑动,因此输出就为0
。0
作为Content
区域的新位置。就将其顶
到了屏幕的最上方。
因此,我这里能够给出一个小技巧来避免这样的错误的置顶
效果。
给
Content
加入一个壳-Group
(+ -> group
)。将Content
包裹在里面(通过拖动Content
到Group
中实现)。Group
的尺寸从屏幕的顶端開始计算,占领整个屏幕;

然后再给Group
加入响应,

能够看到,如今虚拟屏幕
上的界面就没有变形了。在屏幕上进行拖动,Content
区域就能够随着Y
轴的偏移,而实时的改动自己的Y
坐标。达到互动的效果。

Content
滑动的过程中,Weather detail
,也须要随着向上滑动,并隐藏起来。
有了上面处理Content
的经验,我们就知道须要怎样处理Weather detail
的滑动了。
给
Weather detail
加入一个壳-Group
,将Weather detail
包裹在里面;Group
的尺寸从屏幕的顶端開始计算。占领整个屏幕;鼠标按住紫色框图
Y
字符的位置。拖住不放,连接到组件
区域上方的Y
坐标处。工作区域
就会自己主动加入紫色框图到新Group
的连接,
注意:这样的拖拽端点到属性值的方法贯穿了使用Origami Studio
的各个地方。是非常核心的操作方式。
此时滑动界面的时候。Weather detail
也会跟着滑动了。

这时能够看到,状态栏被挡住了。
解决的办法非常easy。仅仅要在组件区域
,把Statusbar
拖动到最上面的位置就能够了,

标题的变化
如今開始加入标题-成都
的变化。
把成都
从Weather detail
中剥离出来,便于全局的控制,进行例如以下设置。

在界面滑动的过程中。字体的大小和X Y
坐标都要发生变化。说明须要找到内容区域Y
轴滑动时的比例。然后让成都
元素的相应属性发生变化。
滑动变化有自己的百分比:(当前值-原始值/变化范围)* 100% = 变化的百分比
原始值:0 变化范围:-245(245是Weather detail
的高度)
成都
文字的属性变化范围是:
属性 | 属性起始值 |
---|---|
X坐标 | 24 -> 16 |
Y坐标 | 244 -> 38 |
字体大小 | 34 -> 20 |
在Origami Studio
中确定变化范围。须要使用Progress patch
(究竟什么是patch
,会在后面介绍)。
在工作区域
双击,弹出patch
选择框,找到Progress
,

改动Progress patch
的Start value
为0
,End value
为-245
,

開始改动成都
文字的Y
坐标。
- 在
Progress path
之后。加入一个Transition patch
; Start
为244,End
为38;- 将
Transition patch
的输出,通过拖拽的方式,连线到成都
元素的Y
坐标值的位置;

開始改动成都
文字的X
坐标。
- 在
Progress path
之后,加入一个Transition patch
; Start
为24,End
为16;- 将
Transition patch
的输出。通过拖拽的方式。连线到成都
元素的X
坐标值的位置;

開始改动成都
文字的字体大小。
- 在
Progress path
之后,加入一个Transition patch
; Start
为34。End
为20。- 将
Transition patch
的输出,通过拖拽的方式,连线到成都
元素字体大小的位置。

至此。我们能够看到滑动时,标题变化的雏形了,

滑动的范围
上下滑动时,内容是收到了局限的。仅仅能在一定区域内滑动。所以要给眼下的设计添加一个滑动限制。
- 加入一个叫做
Clip patch
过滤器。 - 将它同意输出的最小值
Min
设置成-245
(也就是Weather detail
的高度)。将同意输出的最大值Max
设置成0
。 - 改动框图的连接方式例如以下。

滑动的保持
如今滑动虚拟屏幕
的时候会发现,当松手之后。原来滑动到的位置会自己主动还原,但实际上我们希望它能够保持当前的状态。
- 将
Content
所在的Group
向下移,放到Weather detail
所属的Group
的以下。 - 改动该
Group
的大小为1000
;

至此,动画的效果就基本完毕了。

尾巴
这里留下了一个小尾巴:滑动的过程中,状态栏的颜色也是须要变化的,从#3F51B5
逐渐变化到#303F9F
。
经过前面的实践,我想大家应该已经知道了实现的要点,那就開始自己尝试着做做吧。
提示:通过Color to HSL patch
Transition patch
与HSL Color patch
的配合,来改动状态栏背景元素的颜色属性。
整个工程的源文件,我放到了这里。供大家參考。
回想总结
通过详细的案例,我们初步了解了Origami Studio
的使用方法,对实现动画的方式也有了概念。
一切的动画效果都是通过以下几个步骤来实现的,
- 感知触发动画的事件,点击、滑动等等。
- 把触发事件后产生的数值,交给一个个串联起来的
patch
进行处理,获得新的数值; - 利用新的数值来改动某个界面元素的属性,比方文字的大小,文字的位置,文字的透明度等等。
知道了这样的套路,以后遇到其它动画就能够依葫芦画瓢来操作了。
至于什么是patch
,我相信一步步做到这里,也都能够心领神会了吧。
另外,处理虚拟屏幕
。Origami Studio
产生都可交互原型,也能在手机设备上执行,前提是在设备上依照相应的应用Origami live
。希望进一步了解的同学,请移步这里,有更为详尽的信息提供给你。
本文是《从设计到实现-手把手教你做android应用开发》系列文档中的一篇。感谢您的阅读和反馈,对本文有不论什么的意见和建议请留言。我都会尽量一一回复。
假设您认为本文对你有帮助,请推荐给很多其它的朋友;或者加入我们的QQ群348702074和很多其它的小伙伴一起讨论;也希望大家能给我出出主意,让这些文档能讲的更好。能最大化的帮助到希望学习开发的伙伴们。
除了CSDN公布的文章,本系列最新的文章将会首先公布到我的专属博客book.anddle.com。大家能够去那里先睹为快。
同一时候也欢迎您光顾我们在淘宝的网店安豆的杂货铺。店中的积木能够搭配成智能LED灯。相关的配套文档也能够在这里看到。
这些相关硬件都由我们为您把关购买,为大家节省选择的精力与时间。同一时候也感谢大家对我们这些码农的支持。
最后再次感谢各位读者对安豆
的支持,谢谢:)
android应用开发-从设计到实现 3-9 Origami动态原型设计的更多相关文章
- 【Android 应用开发】Android 开发环境下载地址 -- 百度网盘 adt-bundle android-studio sdk adt 下载
19af543b068bdb7f27787c2bc69aba7f Additional Download (32-, 64-bit) Package r10 STL debug info androi ...
- Android实战:手把手实现“捧腹网”APP(二)-----捧腹APP原型设计、实现框架选取
Android实战:手把手实现"捧腹网"APP(一)-–捧腹网网页分析.数据获取 Android实战:手把手实现"捧腹网"APP(二)-–捧腹APP原型设计.实 ...
- 《TheOne团队》团队作业三:团队项目原型设计与开发
项目 内容 作业所属课程 http://www.cnblogs.com/nwnu-daizh/ 作业要求 https://www.cnblogs.com/nwnu-daizh/p/10761596.h ...
- 实验七 《FBG》—-小学生课后习题答案原型设计
一.实验目的与要求 1.掌握软件原型开发技术 2.学习使用软件原型开发工具 二.实验内容与步骤 1.开发工具: 使用的工具:墨刀(APP端开发原型) 工具简介: 墨刀(MockingBot)是一款简单 ...
- 团队作业2——需求分析&原型设计
Deadline: 2017-4-14 22:00PM,以博客发表日期为准 评分基准: 按时交 - 有分,检查的项目包括后文的三个方面 需求分析 原型设计 编码规范 晚交 - 0分 迟交两周以上 - ...
- 学习Axure RP原型设计
1 概述 原型设计是应用开发设计的第一要素.好的原型设计不仅可以起到沟通的作用,而且对客户而言应用程序拥有更直观的体现.原型设计通过内容和结构展示以及界面布局编排,实现在开发前期用户与产品进行交互.提 ...
- 5 个关键点!优化你的 UI 原型设计
当你和你的团队着手开始一个产品开发的时候,最开始的一步一般是绘制线框图,这是大部分产品项目的第一步,它不复杂但是却对整个产品的完成形态和质量有着至关重要的作用. 很多刚开始工作设计师或者产品经理都会提 ...
- 《Coderxiaoban团队》第三次作业:团队项目的原型设计
<XXX团队>第三次作业:团队项目的原型设计 项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 实验七 团队作业3:团队项目原型设计与开发 团队名称 Coder ...
- 《ABCD组》第三次作业:团队项目的原型设计
<ABCD组>第三次作业:团队项目的原型设计 项目 内容 这个作业属于哪个课程 http://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https:// ...
随机推荐
- C内存管理一 概述
我们写了这么多年的程序猿.可能理论方面还比不上大学生.有人 "嘘"我了,假设有能回答下面几个问题的同学请举手: 1.面试常常遇到:同学请说说堆栈的差别? 2.同学请说说一个函数在堆 ...
- extjs Combox 调用数据
1方法一 从 json获取 var typeStore = new Ext.data.Store({ proxy : new Ext.data.HttpProxy({u ...
- neat算法——本质就是遗传算法用于神经网络的自动构建
基于NEAT算法的马里奥AI实现 所谓NEAT算法即通过增强拓扑的进化神经网络(Evolving Neural Networks through Augmenting Topologies),算法不同 ...
- react --- 路由传参的几种方式
1.params 优势 : 刷新地址栏,参数依然存在缺点:只能传字符串,并且,如果传的值太多的话,url会变得长而丑陋. 2.query 优势:传参优雅,传递参数可传对象:缺点:刷新地址栏,参数丢失 ...
- Kafka框架基础
* Kafka框架基础 官网:kafka.apache.org 框架简介 Apache Kafka是分布式发布-订阅消息系统.它最初由LinkedIn公司开发,之后成为Apache项目的一部分.Kaf ...
- 从C到OCblocks语法的声明
在过去的一段时间,我开始从C的一些简单声明到更复杂的学习直到我开始学习了Objective-C中的blocks.我花了很长的一段时间去理解他并且认识到一旦你理解它是怎样组织的并且是怎样产 ...
- PostgreSQL Replication之第七章 理解Linux高可用(5)
7.5 高可用性是所有冗余 让我们从一个不同的角度看一下前面的混合超市的例子.为了处理大量顾客无需长排队,无需关闭超市,混合超市雇用更多的出纳员以及安装许多(甚至更多)的收银机. 这样,如果一个收银机 ...
- WebSocket handshake: Unexpected response code: 404
在执行 http://www.cnblogs.com/best/p/5695570.html 提供的 websocket时候, 报错了 “WebSocket handshake: Unexpe ...
- UVa 729 The Hamming Distance Problem【枚举排列】
题意:给出数组的长度n,给出h,表示这个数组里面含有h个1,求其所有的排列 用next_permutation就可以了 #include<iostream> #include<cst ...
- 学习优化《机器学习与优化》中文PDF+英文PDF
正在学习机器学习中的优化处理,感觉<机器学习与优化>写得还是比较通俗易懂的,第七章特征选择我需要,特征提取:相关系数,相关比,熵和互信息..更高级的应该是文本挖掘的特征提取,比如LDA提取 ...