春哥技术源码论坛

 找回密码
 立即注册
 

响应式网站源码任意下载

2020最新暴利项目海量素材源码任意下载
阿里云优惠码

低价定制APP

低价H5响应式网站建设
阿里云备案码广告位招租50元/每月轻松暴利赚钱
查看: 5380|回复: 3

Axure教程:微信启动闪屏界面制作(附录源文件)供大家学习参考

[复制链接]
  • TA的每日心情
    开心
    4 小时前
  • 签到天数: 82 天

    [LV.6]常住居民II

    1416

    主题

    1190

    回帖

    3万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    39103
    发表于 2016-3-1 14:06:00 | 显示全部楼层 |阅读模式

    现在绝大部分APP都有自己的启动画面,那么在原型图的制作中,如何制作这种带有延迟自动消失的启动画面呢?
    在这以iOS版微信为例,来为大家图解如何使用Axure进行启动画面制作。

    一、功能描述点击界面中的APP图标,微信启动画面渐变出现,一段时间后显示微信主界面。

    二、素材准备苹果iphone5s.png、AppIcon.png、发现.png、微信.png、启动画面.png、通讯录.png、我.png、桌面背景.png

    三、教程学习1、制作iPhone手机桌面控件。
    打 开Axure,拖入“苹果iphone5s.png”作为手机框架,“桌面背景.png”置于“苹果iphone5s.png”上方作为桌面背景,利用 label及rectangle等控件作为iPhone手机顶部栏并组合,拖入“微信.png”作为微信APP图标。完成效果如下图所示:

    2、启动画面图片加入
    拖入“启动画面.png”至home,我们将其大小和位置数值设置为与桌面背景相同的值,并取名为启动画面,一定要记得取名,方便之后在操作中选中。之后再右击“启动画面.png”设置为隐藏。

    3、微信主界面制作
    在部件中选择动态面板,将此动态面板命名为“微信主界面”,我们将其大小和位置数值设置为与桌面背景相同的值,双击state1将其打开。

    在state1中,利用基本部件组合及图片添加进行微信聊天界面制作,这里就不详细介绍。效果图如下:

    制作完微信聊天界面后,回到home选择动态面板将其设为隐藏。
    注意事项:手机顶部栏一定要选中它们置于最前方,这样才能在动态面板中显示出来。
    4、启动画面动画添加
    在添加动画之前,先看一下我们的图层顺序是否正确。置于最前方的是手机顶部栏,之后是微信主界面,再是启动画面,微信app图标,微信背景。
    (为了方便看清楚图层顺序,可以先将启动界面和微信主界面设为可见,看其图层顺序是否正确)
    为了便于操作,我们先将启动画面和微信主界面从手机页面移开至空白处。
    选中微信app图标,选择界面右侧交互事件中的点击事件。

    一共添加5个事件:
    • 渐变1000毫秒之后显示启动画面,并且启动画面置于前方(置于前方是为了挡住手机顶部栏,因为微信在启动画面中不会显示顶部的时间等信息)
    • 等待1500毫秒
    • 显示微信主界面
    • 渐变500毫秒之后隐藏启动画面
    • 将启动画面置于后方(置于后方是为了在日后微信主界面的过程中其他控件可被点击,如果启动画面位于微信主界面之上会影响点击效果)

    5、最后一步:
    点击预览,就可以看到啦


    四、总结启动画面的制作其实很简单,想清楚启动过程是怎样的,在事件中依次设置便可以。Axure中可以设置图片淡入淡出,因此可达到很好的动态效果。
    在此过程中容易犯的错误就是图层顺序问题。在原型制作的过程中,如果没有事先想好图层顺序很有可能预览时会发现后面的图层竟然冒了出来。
    原型图要注意其可扩展和修改性以及图层的取名。当原型图变得越来越复杂的时候,需要对每个部件有一定的命名标准,不然很容易混搅。

    最后,所需要的素材及本次启动画面源文件以及整个微信原型图源文件免费下载地址
    游客,如果您要查看本帖隐藏内容请回复


    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有账号?立即注册

    x
    春哥技术博客,精品商业VIP源码,我们致力于为中小站长建站降低成本,所有源码放心购买,没有春哥币?点击这里,或者手动付款后给客服QQ留言:2931393342,手动付款,点击这里
    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    43

    回帖

    173

    积分

    注册会员

    Rank: 2

    积分
    173
    发表于 2016-3-13 16:07:13 | 显示全部楼层
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    0

    主题

    4

    回帖

    16

    积分

    新手上路

    Rank: 1

    积分
    16
    发表于 2016-8-25 21:49:33 | 显示全部楼层
    强烈支持楼主,感谢春哥技术源码论坛!
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|手机版|小黑屋|春哥技术源码论坛 |Sitemap

    GMT+8, 2024-4-29 18:49 , Processed in 0.078330 second(s), 41 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表