产品原型-APP导航栏如何用Axure画出来

发布于 2020-09-05  2,972 次阅读


移动端PM需要了解常见APP组件并学会画出点击下方链接学习视频教程。

咱们先看下Axure画出原型效果,然后再对该组件进行详细讲解。

img

一、组件介绍

img

二、实际案例

img

三、画出无交互原型

1、先画页面名称。从默认元件库拖动“矩形1”到工作区位置(0,20),尺寸修改为375*44。双击背景输入名称,字号修改为18。

img

2、再画左按钮。从默认元件库拖动“文本标签”到工作区位置(20,32),双击输入按钮名称。

img

3、再画右按钮。从默认元件库拖动“文本标签”到工作区位置(325,32),双击输入按钮名称,右侧对齐。

img

4、点击“预览”按钮,然后在浏览器中查看原型效果。

img

Tips:如需实现状态栏和导航栏的融合效果,请点击导航栏背景元件的边框可见性,取消“上”。

四、画出有交互原型

5、点击左按钮,右边侧边栏切换到“交互”,点击“新建交互”按钮,设置“单击时”事件,添加动作“链接-当前窗口”,目标选择 “返回到上一页”。

img

6、点击右按钮,根据具体需求设置交互事件。

7、同时选择相应的元件,右键点击“转换为动态面板”(最好选择状态栏一起设置)

img

8、选中该动态面板,点击右侧视图中属性的“固定到浏览器”。勾选“固定到浏览器窗口”,水平固定选择“居中”,其他保持默认。

img

9、点击“预览”按钮,然后在浏览器中查看原型效果。

img

Tips:

  • 需要页面内容高度超过浏览器屏幕,此时向上滚动页面即可看到状态栏固定在屏幕位置不动。
  • 返回上一页的交互事件,可以设置跳转到绝对路径,也可以设置到相对路径。特殊场景下不能返回上一页面,比如电商APP中提交订单后返回的应该是订单列表,而不是确认订单页面。

这是励志成为一个优秀产品经理的的学生的奋斗笔记。