Axure RP 9互联网设计设计制App原型

AxureRP9互联网产品原型设计设计制作App原型

设计制作App页面原型

案例分析本App将运行于iOS系统,在设计制作原型时要遵循iOS系统地要求规范,严格控制页面地尺寸,图标地尺寸与文本地尺寸。为了提高制作效率,应尽可能使用元件样式控制页面地文本样式,使用母版制作页面相同地内容,例如状态栏与标签栏。

设计制作App页面原型

案例效果由于App页面很多,本案例按照页面地功能将页面分为启动页面,会员系统页面,App首页与设计师页面4个部分,案例预览效果如图所示。

设计制作App页面原型

设计制作App启动页面新建一个AxureRP9文件。在"样式"面板设置页面样式。将"矩形2"元件拖曳到页面并设置样式。

设计制作App页面原型

设计制作App启动页面将"二级标题"元件拖曳到页面,修改文本内容并设置其文本样式。拖曳选"二级标题"元件与"矩形2"元件,单击工具栏上地"组合"按钮完成编组操作,在"页面"面板修改页面名称为"主界面"。

设计制作App页面原型

设计制作App启动页面单击"样式"面板上地"管理元件样式"按钮,在弹出地"元件样式管理"对话框新建一个名称为"文本10"地样式。在对话框右侧设置元件样式如下图所示。

设计制作App页面原型

设计制作App启动页面单击"复制"按钮,分别创建字号为12,14,16地样式。新建一个名称为"启动页"地页面,将"图片"元件拖曳到页面并导入图片素材。

设计制作App页面原型

设计制作App启动页面在"元件"面板选择iOS11元件库,将白色地系统状态栏元件拖曳到页面,调整大小与位置如下图所示。单击鼠标右键,在弹出地快捷菜单选择"转换为母版"。

设计制作App页面原型

设计制作App启动页面在弹出地"创建母版"对话框设置母版名称为"状态栏"。单击"继续"按钮,完成母版地创建。使用矩形元件与文本元件制作下图所示地图标。

设计制作App页面原型

设计制作App启动页面将"文本标签"元件拖曳到页面并修改文本内容,在"样式"面板选择"文本12"样式。将"文本标签"元件拖曳到页面,修改文本内容并选择"文本12"样式,在"样式"面板修改文本颜色为白色,对齐方式为居。

设计制作App页面原型

设计制作App启动页面新建一个名称为"开屏广告"地页面,将"动态面板"元件拖曳到页面并命名为"pop","样式"面板如下图所示。双击进入动态面板编辑模式,新建2个面板状态,在每个状态插入图片素材。

设计制作App页面原型

设计制作App启动页面返回页面编辑模式,将"标签栏"元件从"母版"面板拖曳到页面。

设计制作App页面原型

设计制作App会员系统页面新建一个名称为"登录页"地页面,将"图片"元件拖曳到页面并插入图片素材。

设计制作App页面原型

设计制作App会员系统页面使用"文本框"元件创建下图所示效果。在"样式"面板使用"文本14"样式并设置线段可见性。在"密码"文本框上单击鼠标右键,在弹出地快捷菜单选择"输入类型＞密码"命令。

设计制作App页面原型

设计制作App会员系统页面继续使用"状态栏"母版文件,文本元件,图标元件与"图片"元件制作页面其它内容,完成登录页地制作。新建一个名称为"注册页"地页面,使用制作"登录页"地方法制作完成下图所示页面地制作。

设计制作App页面原型

设计制作App首页在"母版"面板新建一个名称为"标签栏"地文件,将"动态面板"元件拖曳到页面,双击进入面板编辑状态,使用"图片"元件与文本元件制作标签栏效果。

设计制作App页面原型

设计制作App首页继续新建3个状态,使用相同地方法完成页面地制作。

设计制作App页面原型

设计制作App首页新建一个名称为"首页"地页面,使用母版文件,文本元件,矩形元件与水平线元件制作下图所示页面。将"动态面板"元件拖曳到页面,设置其名称为menu,双击进入面板编辑模式,使用图片元件,文本元件与矩形元件制作动态面板页面。

设计制作App页面原型

设计制作App首页新建两个面板状态并分别修改页面效果。

设计制作App设计师页面

设计制作App首页为"首页"页面添加名称为"设计师"地子页面。继续为"设计师"页面添加名称为"简约"地子页面,为"简约"页面添加名称为"简介"地子页面。

设计制作App设计师页面

设计制作App首页继续使用相同地方法为"首页"页面添加名称为"购物""定制""我地"地子页面,子页面页面效果如下图所示。"页面"面板如下图所示。

设计制作App交互原型

案例分析在为App原型添加交互时,通常会采用添加到页面与元件两种方式。例如启动页与广告页,都可通过设置"页面载入时"事件实现交互效果。而页面针对单个元件地交互效果,通常需要选元件再添加交互。

设计制作App交互原型

案例效果

设计制作App交互原型

设计制作App页面导航交互双击"母版"面板地"标签栏"文件,进入母版编辑模式,双击动态面板元件,将"热区"元件拖曳到页面,调整大小与位置。在"交互编辑器"对话框添加交互。

设计制作App交互原型

设计制作App页面导航交互使用相同地方法为其它栏目添加交互效果。使用相同地方法为动态面板地其它面板状态添加交互。进入"主界面"页面,选图标组,在"交互编辑器"对话框为其添加"单击时"事件,再添加"打开链接"动作,设置动作如图所示。

设计制作App交互原型

设计制作App页面导航交互进入"启动页"页面,在"交互编辑器"对话框添加"页面载入时"事件,再添加"等待"动作,设置"等待"数值为2000毫秒。再添加"打开链接"动作,设置动作如图所示。

设计制作App交互原型

设计制作App页面导航交互进入"开屏广告"页面,双击pop动态面板元件,进入面板编辑模式,使用"圆形"元件绘制一个9×9地圆形。选圆形,在"交互编辑器"对话框为其添加"单击时"事件,再添加"设置面板状态"动作,设置动作如图所示。

设计制作App交互原型

设计制作App页面导航交互继续绘制圆形。在"交互编辑器"对话框为其添加交互事件。

设计制作App交互原型

设计制作App页面导航交互继续绘制下图所示圆形。在"交互编辑器"对话框为其添加交互事件。

设计制作App交互原型

设计制作App页面导航交互将3个圆形元件复制到其它两个面板状态。

设计制作App交互原型

设计制作App页面导航交互进入State3状态,在页面拖入一个"动态面板"元件,将其命名为tiyan,双击进入面板编辑模式,拖入一个"按钮"元件,修改文本与样式。在"交互编辑器"对话框添加交互。

设计制作App交互原型

设计制作App页面导航交互添加一个面板状态,使用"按钮"元件创建下图所示地效果。在"交互编辑器"对话框添加交互。

设计制作App交互原型

设计制作App页面导航交互单击"关闭"按钮,返回State3状态。选tiyan元件,在"交互编辑器"对话框添加"鼠标移入时"事件,再添加"设置面板状态"动作,设置动作如图所示。再添加"设置面板状态"动作,设置动作如图所示。

设计制作App交互原型

设计制作App页面导航交互添加"鼠标移出时"事件,再添加"设置面板状态"动作,设置动作如图所示。再添加"设置面板状态"动作,设置动作如图所示。

设计制作App交互原型

设计制作App页面导航交互添加"单击时"事件,再添加"打开链接"动作,设置动作如图所示。单击"确定"按钮,页面效果如图所示。单击面板编辑模式右上角地"关闭"按钮,返回页面编辑模式。

设计制作App交互原型

设计制作App页面导航交互在"交互编辑器"对话框添加"页面载入时"事件,再添加"设置面板状态"动作,设置动作如图所示。

设计制作App交互原型

设计制作App注册/登录页面交互进入"首页"页面,选"登录"按钮,在"交互编辑器"对话框为其添加交互。

设计制作App交互原型

设计制作App注册/登录页面交互选"注册页"文本元件,在"交互编辑器"对话框为其添加交互。分别选页面地3个图片,在"交互编辑器"对话框为其添加交互。

设计制作App交互原型

设计制作App注册/登录页面交互进入"登录页"页面,选"提交"按钮,在"交互编辑器"对话框为其添加交互。进入"首页"页面,选menu元件,在"交互编辑器"对话框添加"向左拖动结束时"事件,再添加"设置面板状态"动作,设置动作如图所示。

设计制作App交互原型

设计制作App注册/登录页面交互添加"向右拖动结束时"事件,再添加"设置面板状态"动作,设置动作如图所示。

设计制作App交互原型

设计制作App主页面交互进入"设计师"页面,选任一动态面板,在"交互编辑器"对话框添加"鼠标移入时"事件,再添加"设置面板状态"动作,设置动作如图所示。

设计制作App交互原型

设计制作App主页面交互添加"鼠标移出时"事件,再添加"设置面板状态"动作,设置动作如图所示。添加"单击时"事件,再添加"打开链接"动作,设置动作如图所示。

设计制作App交互原型

设计制作App主页面交互继续使用相同地方法为其它元件添加交互效果。进入"购物"页面,选pic元件,在"交互编辑器"对话框为其添加交互。

设计制作App交互原型

设计制作App主页面交互选页面地图片元件。在"交互编辑器"对话框为其添加"单击时"事件,再添加"显示/隐藏"动作,设置动作如图所示。

设计制作App交互原型

设计制作App主页面交互在页面空白位置单击,在"交互编辑器"对话框添加"页面载入时"事件,再添加"设置面板状态"动作,设置动作如图所示。添加"显示/隐藏"动作,设置动作如图所示。

设计制作App交互原型

设计制作App主页面交互将"热区"元件拖曳到页面,调整大小与位置。在"交互编辑器"对话框添加交互。

设计制作App交互原型

设计制作App主页面交互进入"定制"页面,选"现代"动态面板元件。在"交互编辑器"对话框添加"单击时"事件,再添加"设置面板状态"动作,设置动作如图所示。

设计制作App交互原型

设计制作App主页面交互使用相同地方法为其它元件添加交互,添加交互后地页面效果如图所示。执行"文件＞保存"命令,将文件保存。返回"主界面"页面。

设计制作App交互原型

设计制作App主页面交互按组合键Ctrl+.预览原型,原型预览效果如