干货 | 页面流程图 & 功能流程图 & 功能逻辑图

页面流程是什么:页面流程是指产品的所有页面以及相互间流向关系。

产品设计-页面流程图--运营喵的世界

页面流程图

包含元素

页面,有向线条。

可能包含判断条件。

不包含具体功能。

不包含弹层、元件等视觉组件。

产品设计-页面流程图--运营喵的世界

页面命名:从原型软件的角度命名

最好都用英文,如需中文命名在解压的时候注意选择编码。

注意尽量不要页面相同,导入其他rp文件的时候会覆盖同名页面。

由于页面会生成同名文件,建议不要使用Windows系统不允许的字符< > / \ | : ” * ?

控件命名

注意事项同上

(1)下划线命名

比如first_name,last_name

良好的命名方式一方面方便自己修改,另一方面有利于和开发人员的对接,改动时快速查找。

(2)小驼峰式命名法(lower camel case)

第一个单字以小写字母开始,第二个单字的首字母大写。比如firstName、lastName。

(3)大驼峰式命名法(upper camel case)

每一个单字的首字母都采用大写字母,比如FirstName、LastName、CamelCase,也被称为Pascal命名法。变种StudlyCaps,是“驼峰式大小写”的变种。

传达需求

对视觉设计师,知道要做多少视觉稿,具体每个页面有哪些视觉元素。

对前端工程师,知道自己该写多少个页面,搭建页面代码结构。

重新画一下上面的页面流程图,正确应该如下:

产品设计-页面流程图--运营喵的世界

案例:

我把这个产品原型所有的页面都进行了梳理,并绘制了线框图。

在绘制过程中,对页面的结构做了一些优化调整和补充。

产品设计-页面流程图--运营喵的世界

并且,对思维导图也做了一些细微的调整。

当完成了这些工作之后,我在页面管理模块中,新增了一个Flow文件夹和一个page_flow页面(见上图)。

接下来,我使用了Axure RP 8中的页面快照元件。页面快照元件能够呈现指定页面的缩略图。

我在page_flow页面中,放入了一个页面快照元件,并且双击指定了要显示缩略图的页面。

产品设计-页面流程图--运营喵的世界

这里,我将页面快照元件的宽高设置成了180*320。并且,为了美观,在属性中取消了缩略图四周的填充。

产品设计-页面流程图--运营喵的世界

接下来,通过Ctrl+D,把这个元件进行复制,并且双击指向不同的页面。

这样,就把这个原型的所有页面的缩略图都放在了同一个页面中。

并且,通过连接线,将这些页面进行关联,形成了一张完整的页面流程图。

这张图,能够体现原型的整体结构、页面关系以及用户访问路径。

产品设计-页面流程图--运营喵的世界

添加连接线,我们需要在顶部功能菜单中,点击【连接】图标。

产品设计-页面流程图--运营喵的世界

连接线样式的设置,则是在顶部快捷功能菜单中或者【样式】模块中进行设置。

产品设计-页面流程图--运营喵的世界

通过以上步骤,我们就结合页面快照元件以及连接线,完成了页面流程图的绘制。

功能流程图

功能流程是什么:功能流程是指产品的所有功能以及相互间关系。

得到功能流程图

根据上面的步骤,我大概画了一下微信客户端主要的功能流程图。

产品设计-页面流程图--运营喵的世界

功能逻辑图

功能逻辑图是什么:表现功能内部的逻辑走向。可指导设计具体的页面和交互。

如果以某电商APP的下单功能为例来讲一下如何画下单这个功能的逻辑图。

产品设计-页面流程图--运营喵的世界

然后按照子功能分别画出对应的功能逻辑图。注意这里只画了立即购买的下单功能,购物车结算的可以查看加入购物车,加载购物车,展示购物车,操作购物车。

产品设计-页面流程图--运营喵的世界

选择商品

产品设计-页面流程图--运营喵的世界

确认订单

产品设计-页面流程图--运营喵的世界

提交订单

我的建议是能拆分就拆分成功能结构,不能拆分就画功能逻辑。

参考文章:

备注:新增文章的内容有待确定。

  1. 产品的三种流程图,你都知道吗?
  2. 如何绘制业务流程图
  3. 如何绘制业务流程图
  4. 产品经理业务流程图的绘制流程分享
  赞 10