轻松入门UX 交互设计基础 交互之原型设计 交互设计高级进阶 用户体验设计 web端产品设计

ux页面流程图


表达用户通过什么操作进入什么页面以及后续的操作和页面。



业务流程图和页面流程图


产品经理和互联网产品常用业务流程图。表达了用户在什么条件下做了什么事。页面流程图具体到系统、网站、app产品他们之间的关系是什么样的。有了图示帮助我们了解人物场景具体是什么样。先通过系统性的规划,让我们不去考虑细枝末节、更多地聚焦在系统性的角度考虑整个流程。



页面流程图的价值


1.聚焦用户目标和任务


专注于用户目标和人物,不必考虑不必要的细节。


2.简化繁杂不必要的流程


有了全局的了解,找到冗余的信息,简化掉冗余的信息。


3.提升重点交互环节效率


有了流程,能看到哪些地方是我们最关注的用户流程。对于这些流程,把工作重点转移。


4.评估用户行为路径


通过流程记录用户从起点到终点的转化率及耗时。能评估效率找出痛点。


5.评估工作量


评估能做出多少个页面,告知产品经理耗时多久。对于开发人员,能全面了解系统解决什么问题、细节,方便开发人员了解业务,可以对业务实现逻辑进行初步预估。



制作工具

 

1.笔纸


最推荐,能够不被形式所束缚。


2.OmniGraffe


对于流程图细节把握比较到位,可以实现出漂亮流程图。


3.Visio

 

有预知模板可以用。


4.Keynote



图示形状


flow.png


操作和页面构成整个流程图,页面中通过展示重要功能判断页面主要是做什么的。清楚页面将来扮演什么角色,实现什么功能。页面和页面之间,可以形成跳转,操作非常重要,跳转需要通过什么操作做到,需要考虑有些地方的功能得到的是一个应用程序,需要通过一个矩形框告知,矩形框不仅仅表达了页面的概念。除了操作,还有一种状态,通过某些功能会有状态的判断。



案例


阿强要买一桶桶装水,能在手机上预约送水,写明要送的桶装水品牌,数量,上门时间,地址……送水站确定预约,APP显示预计送达时间,到了预定时间,送水工上门送水,拿出手机打开订单二维码,阿强扫码支付,获得积分。送水工取走水桶。阿强购买了10桶水后,发现拥有不少积分,阿强在【我的积分】中兑换一张水票。


典型的场景,如何通过页面流程图形式实现,分析用户需求和用户体验设计是一样的。


1.确定用户角色


小区住户(阿强)、送水工


2.数据分析、聊天收集用户需求


flow1.png


3.借助业务流程图,形容出


flow2.png


有了流程,就可以借助其转化为页面,最终的产品形态通过页面形式来展现。


4.绘制页面流程


flow3.png


建议页面编号方式为信息架构分层。编号形式反映了整个页面的层级关系。流程图的形式清晰直观地表达出全过程,可以通过6个页面实现。



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

logo
? 2012-2016 葡京国际首页 www.ybxiongdi.com
蜀ICP备13014270号-4 Version 5.0.0 release20160127

您有一个聚会大礼包未领?。。?!

客服热线 400-862-8862

回到顶部