App的快速实现04-通过WWF案例谈APP的框架搭建(原创文章)

王朝学院·作者佚名  2016-05-05
窄屏简体版  字體: 小  |  中  |  大  |  超大  

[flash=500,400]http://s1.knowsky.com/20131005/nqewdbvk5cl062084725.jpg[/flash]

每一次写关于如果快速创建APP的分享,都想带给大家一个不一样的内容。一个很棒的功能点,或者一个对Celluloid的使用心得,或者……

今天模仿《WWF》制作一个案例,来讲如何通过Celluloid实现一个独立APP的快速搭建。

见视频效果:

[flash=500,400]http://player.youku.com/player.php/sid/XNTQ4NDI4MTg0[/flash]

一个APP的开始,我更喜欢梳理自己的想法,把自己的想法以图文的形式展现出来,并进行深加工和创意,通过Celluloid进行交互设计,终将一个app实现。

[flash=500,400]http://s1.knowsky.com/20131005/fd320lcdgem062084825.jpg[/flash]

我自己的流程图,供大家参考,如果大家有更好的工作方式,欢迎拍砖:

创意IDEA——设计流程图——UI界面设计——Celluloid交互设计——实现APP

[flash=500,400]http://s1.knowsky.com/20131005/d5ccw2cbzbw062085025.jpg[/flash]

通过Celluloid的几次更新,ipS带给了大家对全局导航内容的创建,Celluloid里叫它公共页面,也可以理解为作用在其他页面之上,供多个页面共同使用的一种交互方式。

这样,我可以在整个APP的框架技术上,通过幻灯片、按钮等方式,创建一个全局导航,在不同的内容上快速跳转,或者播将一段优美的音乐,连续播放的作用在几个不同的页面里。

[flash=500,400]http://s1.knowsky.com/20131005/4dkq4s2kw4y062085225.jpg[/flash]

公共页面的设置:

[flash=500,400]http://s1.knowsky.com/20131005/aodwrrlkwmk062085325.jpg[/flash]

通过对整个APP的梳理和设计化操作,很简单的就能搭建出一个APP框架,剩下的,就是制作每个子页面的内容、交互、动画等。

在这里,我就暂时不一一介绍子页面里的交互和动画是如何实现的,在未来,我会集中几期,通过简单的图片演示配合视频教材,来把Celluloid所有的交互方式和动画操作,一点一滴的梳理出来,供大家快速的学习使用。

希望大家喜欢本期内容,也敬请期待以后关于如何快速创建APP的其他内容。

本期案例文件下载地址:http://pan.baidu.com/share/link?shareid=545283&uk=4228735718

使用工具:

Celluloid 制作交互动画

下载地址: http://www.mcitech.cn/download.html

IPS viewer APP真机测试工具

下载地址:http://setup.mcitech.cn/

或者通过appstore下载

往期教程:

App的快速实现01-写在最前面的话,初学者从这开始

http://www.zcool.com.cn/article/ZNDM0NjQ=.html

App的快速实现02-三步实现产品360°展示

http://www.zcool.com.cn/article/ZNDM2MDA=.html

App的快速实现03-快速实现电话、短信、邮件的通信快捷方式

http://www.zcool.com.cn/article/ZNDM3NjA=.html

快速实现APP里的图层时间错位延迟(屌丝钢铁侠)

http://www.zcool.com.cn/article/ZNDI0Njg=.html

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航