发布时间:2023-2-1 分类: 电商动态
每个APP原型都包含一个页面,那么每个页面的线框如何由Axure绘制?我希望通过这篇文章,刚开始的PM可以绕道而行。每页的线框。
画出主要状态的线框图
可能包含多个状态显示的页面。例如,微信APP主页除了显示下面的常用图像外,还会显示效果,并点击显示效果的右上角,并删除所有聊天的显示效果……
但是,最核心的状态应该是用户在进入页面后应该正常看到的所有内容。 PM应该使用它来绘制页面的主状态线框。
补充次要状态的线框图
然后我们绘制一个二级状态的线框。我们可以将它放在主要状态的线框旁边。
有时,次级状态的线框可以放置在主状态线框上。理解原型更容易。
优化线框图的细节
在绘制此页面上的所有线框后,我们可以调整细节。这将使我们的原型看起来更专业。 PM无法追求原型的视觉美感,但它需要原型的逻辑美。
组件的大小是合适的并且看起来协调。
组件的位置是否合适。
相同的功能组件,大小不一样。
组件的颜色不仅是黑色和白色,建议使用较少的颜色。
添加交互
如果您的公司只需要静态地图或线框,那么就足以完成上述两个步骤。
如果你的公司,除了线框,要求PM绘制交互以更真实地代表APP原型。然后我建议你在主线框上绘制主要的相互作用。
继续上面的示例,如果我需要在右上角绘制交互+。
然后我需要制作浮动图层,生成为动态面板。
然后添加+以添加交互以显示和隐藏动态面板。
按照类似的步骤,绘制一个左键滑动聊天,显示“标记未读”&“ldquo;删除”,点击“删除”。按钮,并显示动作列表的交互。
写上逻辑
最后,我们需要补充主状态线框,辅助状态线框中的所有逻辑。逻辑似乎是由所有PM编写的,但许多PM都是一般编写的。原因是缺乏写作逻辑的规范。
需要考虑每个组件是否具有逻辑
不要错过组件的视觉,交互,技术和业务逻辑。
逻辑相似性,特别是类似的组件,建议将逻辑写入全局规范
逻辑图流程图也是逻辑表示
至于编写逻辑的具体方法,请转到我的其他文本产品逻辑的五种表示方法和Notes-Axure的最正统的产品逻辑表达式。
预览效果
如果我们已完成所有线框,以及主要交互。当我们生成原型或预览原型时,我们可以看到以下效果。点击查看Axure生成的原型效果,与WeChat APP基本类似。
总结
当您学习绘制页面的线框时,可以粗略地绘制整个APP的原型。然后补充如何正确绘制功能流程图以及如何正确绘制页面流程图。它可以交付给程序员进行正式开发。