页面流程是什么:页面流程是指产品的所有页面以及相互间流向关系。
页面流程图
包含元素
页面,有向线条。
可能包含判断条件。
不包含具体功能。
不包含弹层、元件等视觉组件。
页面命名:从原型软件的角度命名
最好都用英文,如需中文命名在解压的时候注意选择编码。
注意尽量不要页面相同,导入其他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的下单功能为例来讲一下如何画下单这个功能的逻辑图。
然后按照子功能分别画出对应的功能逻辑图。注意这里只画了立即购买的下单功能,购物车结算的可以查看加入购物车,加载购物车,展示购物车,操作购物车。
选择商品
确认订单
提交订单
我的建议是能拆分就拆分成功能结构,不能拆分就画功能逻辑。