关于产品经理对Axure的应用(2)

产品经理 小楼一夜听春语 6527℃ 0评论

这一篇,我们开始使用Axure构建页面布局,并且添加每个页面的功能、元素。

我们从第一步开始。

第一步,界定原型的尺寸。

原型的尺寸一般参考设备的逻辑分辨率(注意不是物理分辨率)。

一般来说有以下几种主流逻辑分辨率。

Android:宽度360*高度640

iPhone6/7:宽度375*高度667

iPhone6/7 Plus:宽度414*高度736

那么,我们制作原型时就可以使用这些分辨率,设定原型尺寸。

不过,如果想在手机上全屏显示,建议大家使用Axure Share APP,在应用商店中就有下载。通过F6的发布功能,上传至官方服务器,同步到手机本地后浏览。

这里需要注意,在发布之前,要在【移动设备】设置中勾选【包含视口标签】。

在确定了分辨率之后,我们先在页面中,通过创建全局辅助线,帮助我们确边界。

在页面中,点击鼠标右键,在【栅格和辅助线】的选项中,我们选择创建辅助线。

然后,我们按下图进行设置,创建全局辅助线,这个辅助线能够在所有页面中显示。

设置完辅助线之后,接下来我们进行第二步。

第二步,制作母版。

母版的内容,是多个页面中共有的内容。

这里我们要做的是顶部的状态栏。

在母版功能模块,我们添加母版,并且在母版名称上点击鼠标右键,选择【添加到页面中】。

然后,按下图设置,将母版添加至除了【加载页loading】和【引导页guide】的所有页面中。

母版设置完毕之后,就可以继续进行下一步。

第三步,创建页面。

这里我先把一级页面根据之前做好的产品信息结构图搭建出来。

一般来说,移动端的页面布局都是垂直布局,方便用户浏览。

不过,并不是所有产品都这样。

例如,移动营业厅的APP,业务分类界面中采用的是左右布局,左侧是分类,右侧是相应的内容。

我们应该根据需求,来界定布局,这样才能方便用户使用。

  • 加载页(loading)

  • 引导页(guide)

注:引导页是三张可切换图片,可以放在一个动态面板的三个状态中,通过交互进行切换。

  • 首页(home)

注:这里以首页为例创建页面,把页面功能、元素与思维导图一一对应,之后页面也一样创建。另外,文章列表内容较长,可以放在动态面板中,并在属性中设置【自动显示垂直滚动条】,这样在移动端浏览就可以通过手指上下滑动内容。下面的页面同样处理。

  • 精选页(select)

  • 话题页(topic)

  • 收藏页(favorite)

到这里,一级页面我们就创建完毕了。其他的页面,我们也这样逐一创建出来。

接下来,请大家关注我之后将发布的内容。↓↓↓↓↓

关于产品经理对Axure的应用(3),即将呈现内容:使用Axure绘制页面流程图。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战》系列视频------从零入门进阶的最佳课程------【点此查看详情】


转载请注明:Axure原创教程网 » 关于产品经理对Axure的应用(2)

喜欢 (35)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(6)个小伙伴在吐槽
  1. 楼湿 我做的湿以苹果6为基准的 然后我想问的是 我在375*667的页面外面自己画了一个手机的框 这样行不行?还有就是我们在做原型图的时候需要把所有的动画效果做出来吗?然后最后展示的时候需要做成像在手机那样吗?(就是全部有动作 比如点击这个页面切换到下一个页面 点这个图标弹出什么框之类的)原型图是分成一个一个板块做的 最后要在axure里面拿一个页面来把所有原型展示出来吗?axure好像不可以保存PNG格式把?最后保存什么格式啊?就是axure.rp?谢谢
    XX2017-03-25 12:52 回复
    • 小楼一夜听春语
      继续关注文章更新吧 没有必要加外框
      小楼一夜听春语2017-03-26 12:21 回复
      • expact
        xx2017-03-26 22:51 回复
  2. 老铁怎么这么慢?
    小楼的春风2017-03-27 10:03 回复
    • 小楼一夜听春语
      真男人 才够慢
      小楼一夜听春语2017-03-30 19:15 回复
      • 6
        春语夜夜听不尽2018-05-31 11:56 回复