Axure8小练习-简单的微信Demo(Round 1)

这是一个很简单的Demo。

这是一个很简单的Demo。

这是一个很简单的Demo。

所以,随便瞅瞅吧。

小白,想做一个App的Demo,想了几个自己比较喜欢的app,发现微信比较简洁,而且还可以看到好人们做的一些微信Demo,所以,就耍耍。

感谢好人们的分享 

这里只用到基础的母版,动态面板,中继器的概念,比较难的还没有涉及,会继续做好 。


微信Demo-Round 1            系统:安卓            微信版本:6.3.25

先上效果图:

Axure8小练习-简单的微信Demo(Round 1)_第1张图片
微信界面


Axure8小练习-简单的微信Demo(Round 1)_第2张图片
通讯录界面


Axure8小练习-简单的微信Demo(Round 1)_第3张图片
发现界面(有的图标没找到,所以灰了)


Axure8小练习-简单的微信Demo(Round 1)_第4张图片
我界面

看着好想挺逼真的样子哎。但是,目前只实现点击下面的4个按钮,实现页面的切换。单个页面的垂直拖动(具体的拖动还没设置好,呵呵呵...)

具体实现:

01:

现有一个简单的思路,比如:


Axure8小练习-简单的微信Demo(Round 1)_第5张图片
比如这样 0.0

然后,再做好每个界面的内容。

02:

微信Demo页面,提供一个整体的框架,拖入一个手机的部件和一个手机顶部的矩形,中间加入一个内联框架(边框和滚动条隐藏),链接“主页”即可。

Axure8小练习-简单的微信Demo(Round 1)_第6张图片
02-1

03:

主页页面。


Axure8小练习-简单的微信Demo(Round 1)_第7张图片
03-1

这里解释一哈。之前是有参照(http://www.jianshu.com/p/bff9e436a78c)这篇文章,所以做了一个大的动态面板,然后在上面加了4个内联框架,但是后来,因为我没有要做左右滑动界面的功能(后面会完善),所以就用加了一个內联框架(空白的地方,下面覆盖了一个“微信”内联框架),然后用下面的4个按钮区链接“微信”,“通讯录”,“发现”和“我”页面。这一部分可以参考下上面那篇文章(感谢好人)。


Axure8小练习-简单的微信Demo(Round 1)_第8张图片
“微信“按钮添加的用例,其他的类似

注:参照那篇文章可以发现一个问题,那个Demo点击下面按钮是界面转换是通过动态面板改变坐标来完成的,所以通过点击按钮来实现界面跳转会看到其他界面滑动的样子。然后呢,真实的微信app通过点击按钮跳转的话,是直接出现的。(讲的不是很清楚,具体情况正在想改善方法)

05.

微信,通讯录,发现,我。这4个页面因为还没有做其他的功能,所以就是简单重复,中继器和动态面板的简单用法,看下源文件的页面布局就清楚了。(如果需要,可以点击最下面的链接下载)


Axure8小练习-简单的微信Demo(Round 1)_第9张图片
微信页面
Axure8小练习-简单的微信Demo(Round 1)_第10张图片
通讯录页面01
Axure8小练习-简单的微信Demo(Round 1)_第11张图片
通讯录页面02
Axure8小练习-简单的微信Demo(Round 1)_第12张图片
通讯录页面03
Axure8小练习-简单的微信Demo(Round 1)_第13张图片
发现页面
Axure8小练习-简单的微信Demo(Round 1)_第14张图片
我页面

06

没什么好讲的了。

07

说下一点点小问题。

为了美观,所以把整体布局放在中间。

Axure8小练习-简单的微信Demo(Round 1)_第15张图片
微信Demo

然后就很2的,在做其他界面的时候也把东西都放在中间,然后发现找不到了。。。

原因是因为,微信,通讯录,发现,我这4个页面用內联框架区链接,放在中间的话会显示在你看不到的区域,所以这4个界面如下图位置摆放。。。


Axure8小练习-简单的微信Demo(Round 1)_第16张图片
嗯,就是左上角 0.0

还有一个关于中继器的小问题,暂时也不知道自己对错与否,就不说了。。。


好无聊。。。

找图标是一件很烦的事,所以如果需要的话,以上用到的图标请点这里,头像也有哦(https://pan.baidu.com/s/1bpso2Xx)

源文件:https://pan.baidu.com/s/1gf6t1L5(不喜轻喷)

注:以上参照,纯属学习,若涉及私人知识产权啦啦啦,立刻删文章。好人一生平安。

你可能感兴趣的:(Axure8小练习-简单的微信Demo(Round 1))