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

Axure原型设计,单读APP原型分享

作者: @小L 字体:[增加 减小] 来源:互联网

本文主要包含axure手机app原型,axure做app注册原型,axure app原型素材,axure制作app原型,axure app原型下载等相关知识, @小L 希望在学习及工作中可以帮助到您

axureyuanxigndandu

之前自学过Axure软件,但是平常工作只用到了线框图,没有用到很复杂的交互效果,最近利用业余时间进行Axure软件的自学,在练习时选用了单读APP进行选型临摹,由于单读APP是款小众且具有文艺范的应用,结构也比较简单,符合我这个伪文艺青年的需求,所以便选用此作为原型。

个人觉得在学习任何软件,光是看教程或者书本是没有意义的,主要还是要动手去练,建议大家选择一个结构比较简单、自己又比较喜欢的应用进行临摹,在实践中学习、在实践中提供,这样就会事半功倍;本人通过此次原型临摹学到了以下几个知识点是之前没有掌握的,列在下面,希望对大家在使用该原型时有所帮助:

  1. 全局变量—页面之间的动态面板状态调用
  2. 局部变量—计时器的算法生成
  3. 条件筛选—部件文字、动态面板状态、值
  4. 动态面板状态之间的切换—模拟手机页面滑动(左右上下、淡入淡出)
  5. 动态面板拖拽—模拟手机页面拖拽效果、拖拽限制
  6. 动态面板接触后移动—模拟手机页面翻页效果
  7. 输入框获得焦点后提示消失—模拟搜索框、输入框效果

下面我大概介绍一下我的原型制作,水平有限,请多指正。

1、站点地图

我的站点地图分为首页、文字页面、搜索页面、登录页面,结构比较简单。主要是由于我在页面之间的切换大量运用了动态面板,因为动态面板状态的切换可以逼真模拟出APP在手机操作实际转场动效的效果。如在首页就设置了8个一级动态面板。

图片0

2、首页

1)用户第一次进入APP时需要载入启动页,所以在用例中设置载入时进入启动页,2秒后跳转至内容页;

2)由于首页所有页面都是通过动态面板的状态变化实现的,所以当其他页面需要跳转回首页时需要借助全局变量来进行判断以确定动态面板的状态。所以设置全局变量arrive_first,以判断跳转页面。

图片1

图片2

3、内容列表页

在内容列表页中我们要实现页面沿Y轴拖拽,向上拖拽、向下拖拽的限制,及拖拽至某一坐标自动翻页的效果等。

1)对内容页进行拖拽限制,需内容页只沿Y轴移动;

2)需要完成向上和向下拖拽的限制,即拖拽内容不能超过内容本身,当用户向下拖拽时我们以“我的图标”为参照,当用户向上拖拽时我们要建立一个隐藏的热区作为参照,当前动态面板没有接触该区域时,会自动将动态面板恢复至原有位置,这里有两点需要注意,第一、向上拖拽、向下拖拽动态面板恢复的坐标是不同的;第二、建议动画效果选择“弹跳”,这样既感觉变化不生硬,又可以模拟出手机动效的特点。

3)因为在应用中超过一页的内容,当用手指拖动超过某个临界值时,页面会自动上拉至下个界面,所以我在此也模拟了该效果。首先需要在页面中找一个坐标,即当页面拖拽到哪个临界值时,页面会自动下拉,在此我找的是标题作为坐标,当标题接触到我的图标时,页面会自动上拉到下一界面;当标题未接触到我的图标时,页面会自动回到当前界面。

?图片3

4、登录页面

1)当点击“我的图标”进入我的页面时,系统会自动检测用户是否为登录状态,如果是非登录状态则会跳转至登录页面,如果是登录状态则会进入我的页面。这里就需要引入第二个全局变量sign_up来判断用户是否进行登录。当sign_up变量值不等于“已登录”时用户跳转至登录页面,否则则进入我的页面。

图片4

2)在登录页面中,点击“登录”按钮需要对输入框中的“手机号码”、“密码”进行判断,只有当手机号码为“13866666666”、密码为“111111”时方可成功登录。

3)其他输入情况则需显示错误提示。

图片5

5、找回密码页面

在找回密码界面中重点要进行说明的是计时器的使用,当点击“点击验证”按钮时按钮消失,开启计时器,当“计时器”数字为0时,计时器消失、“点击验证”按钮恢复。

1)需要建立一个动态面板,命名为“坐标”并设置为隐藏,设置为2个状态,并设置用例,当该动态面板状态改变时,如果“计时器”数字大于等于1则倒计时数字-1,如果为0时则隐藏计时器,恢复“点击验证”按钮;

图片6

2)这里涉及到需要建立一个局部变量,并设定每触发1次,数字-1的算法;

图片7

3)给“点击验证”按钮设置用例,当点击该按钮时,动态面板“坐标”每1秒钟更换状态1次,这样通过动态面板“坐标”每1秒状态的更换可触发局部变量的计算,达成计时器的效果。

图片8

6、评论页面

评论页面要说的是,当输入框获得焦点后弹出键盘的实现方式。

1)需要建立一个键盘及输入框,将以上部件放置在动态面板中,新建用例,当输入框获得焦点时,整个动态面板向上移动216个像素(键盘的高度);所以当点击输入框时整个动态面板会上移216像素,这样在页面中就会显示键盘部件。

2)当输入框失去焦点时,整个动态面板向下移动216个像素(键盘的高度),所以当不再点击输入框时整个动态面板会下移216像素,键盘便会移出页面之外。

图片9

7、搜索页面

当用户点击搜索框时,搜索图标及搜索文字提示需自动移动至搜索框左侧,当用户点击别处时恢复。

1)此处需要考虑当搜索框获得焦点时,搜索图标与文字移动的位置,且动画需要选择线性移动,已给用户实时反馈。

图片10

以上说明只是针对该选型中的关键知识点和重点的交互进行说明,有一些细节在此没有说明,还是希望大家能够下载原型进行体验

特别说明:

此原型只是为了学习axure软件,实际工作中,产品经理是在UI之前输出原型,多为线框图,既不可能有如此完善的UI素材,也完全没必要做成这样,产品经理的原型最重要的是体现产品逻辑结构和功能点,工具的作用是为了提供效率达成目的,切勿陷入追求原型的完美而影响项目进度的陷阱中。为了防止给和我一样的产品初学者带来错误观点,所以特此说明。

原型分享

作者链接: http://pan.baidu.com/s/1eRsFhtg 密码: 6psw

官方链接:?https://pan.baidu.com/s/1sljhAih 密码: hf9q

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

  • Axure教程:原型设计之侧滑菜单
  • 三步教你 Axure 原型变身 EXE 程序
  • Axure原型设计,单读APP原型分享
  • Axure 美女浏览原型,内含:多层动态面板嵌套,拖动时函数设定边界
  • axure实现坦克游戏原型

相关文章

  • Axure教程:原型设计之弹幕
  • Axure7.0教程(八)函数介绍
  • Axure教程:验证码原型制作实例
  • axure实现坦克游戏原型
  • axure九宫格拼图的实现原理
  • Axure PR 7.0 实现页面纵向滑动效果
  • Axure RP设计顶部导航冻结,注册模块互切换,滚动条设计的方法
  • Axure实现多级联动下拉框
  • Axure RP8 动态面板之轮播图设置
  • Axure 8.0 实例 | 模拟一个上传图片的原型

文章分类

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

最近更新的内容

    • Axure实例:创建浏览器顶部固定菜单及子菜单
    • Axure教程 | 知乎注册与登录原型
    • Axure教程-锚点滚动效果
    • Axure教程:微信面对面建群原型设计
    • 用Axure 实现“打飞机”,骚年,来一发(下)
    • Axure8.0小案例:手把手教你画挖掘机
    • Axure教程|如何制作”返回顶部”原型功能?
    • Axure 美女浏览原型,内含:多层动态面板嵌套,拖动时函数设定边界
    • banner轮播axure最简易实现及手动切换
    • 五分钟教你快速上手Axure交互设计

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

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