• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >axure > Axure教程:微信聊天列表原型制作(一)

Axure教程:微信聊天列表原型制作(一)

作者: @有趣的程序员 字体:[增加 减小] 来源:互联网 时间:2017-06-13

本文主要包含axure原型图教程,axure app原型教程,axure原型设计教程,axure制作app原型教程,原型工具axure教程等相关知识, @有趣的程序员 希望在学习及工作中可以帮助到您

对于Axure的学习,就是要多做练习,本文是微信原型制作的第一章,希望对同样正在学习的朋友有所帮助。

本章主要制作聊天列表原型,实现滑动效果。原型基于Axure8制作。

第一步:拖拉摆放一个中继器以及相关控件

1.拖拉一个中继器,标签名设置为msg_list,双击中继器,进入中继器设置,矩形标签名称设置为msg_item,长设置480,宽设置80,在样式中设置边框,设置为仅下边框,边框颜色为E4E4E4。

2.拖一个占位符,放到矩形框前部,大小55*55,作为头像。

3.拖一个81*24的文本框,作为姓名框,标签名称设置为Name,字体颜色黑色,字体大小20。

4.拖一个57*16的文本框,作为消息内容快照,放到姓名框下面,标签名设置为Msg,字体颜色999999,字体大小为14。

5.拖一个57*16的文本框,作为时间显示,放到最后,标签名设置为DateTime,字体颜色999999,字体大小为14。最终效果如下。

6.设置msg_item交互属性,选择属性–>鼠标按下–>填充颜色,设置为cccccc。

第二步:设置聊天列表信息

1.在中继器msg_list的属性中,添加一些字段。

2.设置msg_list属性中的交互。每项载入时,将第一步中设置的相关控件文本初始化为属性中配置的字段内容。选择“每项载入时”–>“设置文本”–>选择msg_list(中继器)DateTime–>“设置文本为”–>选择函数fx–>“插入变量或函数”–>选择“中继器/数据集”的item.datetime。其他以此为例。

3.设置好交互之后,就可以看到属性中填写的内容,已经加载到了中继器的列表上,然后在属性中多添加些数据,模拟聊天列表。

第三步:设置微信聊天页相关控件

1.在中继器msg_list上右键,将中继器转换为动态面板,动态面板标签名设置为“消息列表动态面板”。

2.在动态面板上继续右键,再转换为动态面板,该动态面板起名为“窗口动态面板”,双击窗口,将“State1”修改为“窗口动态面板-聊天列表状态”,完成后的逻辑为:“窗口动态面板”–>“窗口动态面板-聊天列表状态”–>“消息列表动态面板”–>“State1”–>“msg_list”。

3.将“窗口动态面板” 的尺寸修改为480*572,这是为了与微信尺寸保持相同比例,然后需要微信的顶部标签和底部导航,本章原型主要涉及聊天窗口,顶部标签和底部导航先通过对微信图片进行截图,以后的章节模拟导航和顶部标签原型是,再从新制作。

第四步:设置“窗口动态面板”的交互

第四步主要实现消息列表上下滑动的效果

1.选择“窗口动态面板”交互属性“拖动时”,添加动作选择“移动”,“选择要移动的元件”选择“消息列表动态面板”,动作选择垂直移动,动画“无”,单击“添加边界”。

2.如果不设置边界,消息动态列表移动时会出现上下边界进入“窗口动态面板”的情况,如下图:

3.因此在设置交互动作时,要添加顶部和底部边界。消息动态面板的顶部不能进入窗口动态面板,因此顶部应该小于0(窗口动态面板顶部为相对值0),而消息动态面板的底部不能进入窗口动态面板,也就是底部要大于窗口动态面板底部的相对值,该相对值等于窗口动态面板底部的绝对值,减去顶部的绝对值,通过fx功能实现。

完成后通过预览观看效果。

该原型连接:http://interestingprogrammer.coding.me/yanjingProject/微信聊天

本篇文章先进行第一部分原型的介绍,后面章节会逐渐实现更多的微信原型功能,力求最终能完成一个完整的微信原型,希望与大家多多交流,共同进步。

您可能想查找下面的文章:

  • Axure教程:微信聊天列表原型制作(二)
  • Axure教程:微信聊天列表原型制作(一)
  • Axure教程|原型设计之抽屉列表
  • Axure教程:原型设计之多用户注册登录
  • Axure教程:如何制作一个不区分大小写的验证码原型?
  • Axure教程:原型设计之转盘抽奖
  • Axure教程:原型设计之水泡导航栏
  • Axure教程:原型设计之播放控制条
  • Axure教程:微信面对面建群原型设计
  • Axure教程:原型设计之弹幕

相关文章

  • 2017-06-13Axure原型设计之轮播图
  • 2017-06-14建立自己的元件库(二)——验证码
  • 2017-06-14五分钟教你快速上手Axure交互设计
  • 2017-06-14Axure RP设计顶部导航冻结,注册模块互切换,滚动条设计的方法
  • 2017-06-13Axure 8.0 实例 | 模拟一个上传图片的原型
  • 2017-06-14Axure PR 7.0 实现页面纵向滑动效果
  • 2017-06-13Axure教程:实现倒计时获取验证码效果
  • 2017-06-13Axure中继器实践:如何制作一个「记忆翻牌」小游戏?
  • 2017-06-13矩形框:深度理解和应用元件样式(二)
  • 2017-06-13Axure设计:制作iOS列表左滑菜单效果

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Axure教程:中继器如何切换标记状态?
    • Axure教程:微信面对面建群原型设计
    • Axure实例:创建浏览器顶部固定菜单及子菜单
    • Axure教程:原型设计之侧滑菜单
    • Axure7.0教程(七)math函数的使用(2)Math函数简介
    • axure实现坦克游戏原型
    • Axure教程 | 聊一聊原型组件化设计——从淘宝购物车按钮说起
    • Axure教程 | 详解中继器的九宫格
    • 用Axure8.0制作简单的登录窗口
    • Axure原型技巧 | 这回我们模拟下键盘输入

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有