有部分同学看过了我写怎样绘制业务步骤图，发私信过来期望我谈谈页面步骤图。这个话题其实我也酝酿过，但一直没有写出来。细究起来，除了懒，原因其实有好几条：1. 这十二个月半来工作全部是围绕数据平台建设，不是很通用，没法举例。2. 即使自己一直画页面步骤图，不过说实话属于偏方多部分，按直觉行事，要总结出一两条可通用“规则”比较难。今日因为因为天气预报号称有雷震大雨，取消了原有外出计划，刚好在家里，想起抛出这块砖头，期望这个话题能激发更多分享和讨论。案例呢想一个通俗易懂又具代表性案例真不轻易，它不能太简单，太简单话几乎上没有什么页面，也不能太复杂，太复杂了我还hold不住。刚好前很快在收拾家里闲置衣服，舍不得扔但又不穿，当初唠叨一句，说要是有个地方能够提交下捐赠，有些人上门收就好了。在我头疼要怎么举例演示页面步骤图时候，我就把这个大约YY了一下，就用“公益捐物网站”为例来说明吧。页面步骤图是个好东西业务步骤图关键是描述谁在什么条件下做了什么事。而页面步骤图是具体到了网站、系统、产品功效设计时候，表现页面之前流转关系用户经过什么操作进了什么页面及后续操作及页面。从需求到四处理方案无疑要经过很多阶段。需求分析用户是谁？用户问题或需求是什么？用什么功效去满足需求或处理问题？这些功效优先级是什么？这些问题全部需要逐步得以明确，和此同时，你需要用部分线框图、原型或DEMO（这些在我认为全部是一个东西）去帮助自己精细化这些功效，想透彻那些需求。直接画单张页面线框图当然是能够，不过有可能会出现一下子进入单页面，不先系统性计划，考虑每项功效前置和后置，每项操作上下文，就很轻易顾此失彼，遗漏关键状态或忽略本应简化任务。说到这里，单页面线框图很像PPT，我个人在做PPT之前，其实是一定要有脑图或已经在一张大纸上将目录结构、每页关键全部写出来、画出来。所以真正做PPT则纯粹是在做而已，能够做得很快，只因为心中早就有谱了。所以，在画线框图之前，我也习惯先将页面步骤图画出来。好处之于对于设计师或产品经理：1. 页面步骤图一张页面助你讲完完整用户和系统交互小说，借助它，你更轻易知道步骤中潜在地雷是什么，哪里效率比较低，有利于系统化、全局化、周全性思索2. 细化工作量基础，经过页面步骤图可正确评定需要多少张页面。3. 聚焦：页面步骤图中每个页面全部无须追求精细你目标是计划行为路径，而不是单页面交互设计，所以完全无需考虑页面内容、布局。所以你会愈加聚焦于用户目标和任务完成。无须过早陷入细节。4. 关键是很快。线框图有可能有几十张，你画起来没那么快，而且一旦进入细节，则还需要慢慢深究。不过页面步骤图可能就是多个小时事情。你就能够对整个项目心中有数了。好处之于开发工程师：她们会很愿意你在没有原型时侯，第一时间拿出页面步骤图和她讨论需求。相信我，这比单纯功效列表或有业务步骤图更让她们兴奋。1. 可作为评定工作量关键依据可帮助她们对工作量也心中有数。2. 可做为开展代码工作关键参考尤其是前端开发，必需得悉道每一个操作指向什么页面。3. 她们会映射功效逻辑，会给你更多好提议。绘制之前回到开头我们说案例公益捐物网站，这个仅仅是idea，真不足以让它变成一个产品。现在借着本话题，我们也尝试一下怎样把随机迸发一个idea快速转化为产品吧。第一步：idea大拷问此步目标是验证一下idea靠谱程度。怎么说靠谱？1. 有目标用户不是火星人，而且有一定规模性。2. 对目标用户有价值推荐使用Before&After（这个术语不用谷歌了，Heidi杜撰）方法描述清楚。 Before即现实状况分析（需求、问题）。在没有你产品前，你目标用户碰到问题是什么？她们明确及潜在需求是什么？市场上已经有哪些产品？这些产品为何没有满足这些需求，处理这个问题？（当然，内部产品，没必需分析太多竞品，不过脑子里要过一遍这些问题，没坏处。） After这个产品怎样满足需求及处理问题？除此之外，潜在利益是什么？能够分用户、企业多个维度阐释。3. 目标用户能用有对应能力贮备（不需要经过学习、培训就可用你产品），可及性（你能够去触及这些用户群体，让她们了解有这个产品能够用）本案例为了配合页面步骤图随手拈来，单纯客观描述一下，诸位也能够帮忙诊疗下是否靠谱。我们YY下吧。假设我们是要做这么一个网站，必需有多个参与角色吧。必需有些人去收衣物，能够和公益组织、社工群体、慈善组织取得联络，让她们成为第一个参与方。这里不展开了。当然也必需有些人要捐赠衣物，这里，假设定在年轻人群体，舍得买也舍得捐，有足够能力贮备能够使用在线系统而不是等收废品大爷吆喝。目标用户：各居民区住户，年轻人为主，年纪在22到35岁Before：1. 空间矛盾：小户型房子，储物空间有限；时尚群体，消费空间很大，比较喜爱尝鲜，衣服和多种生活物品只进不出，没有足够地方容纳，必需要推陈应新。2. 处理旧衣物方法有限：独生儿女群体居多，也没有家人亲戚能够赠予。即使知道哪里有灾难发生，灾民缺衣少物也没有通道进行捐赠；二手市场花费精力，且效果不好。After：1. 可随时提交捐赠需求，等候有些人上门收取，轻松做到眼不见心不烦。2. 捐赠带来额外好处：1. 换取公益积分（积分可用于订阅杂志、享受参与活动商家优惠、换取书籍等）2. 公益积分可冲抵水电费好吧，YY吧。不过写到这里，俺发觉还是基础靠谱吧，所以继续往下吧。第二步：功效列表及优先级此步是深入明确要做什么，和用户大约会怎么参与使用。参与这个产品有负责收衣服，也有捐赠衣服，单表这捐赠衣服用户角色吧，省得不小心兜不住了。业务小说：小A有一批衣服需要捐赠，她在手机上提交一份捐赠需求，写明自己要捐赠什么衣服，新旧程度，多少数量，什么方法预约上门时间小A提交捐赠后，收到预约电话，约好了3天后周末下午上门取衣服。到了预定时间，上门取衣服社工检验了捐赠数量后，拿出手机查找到小A捐赠那笔单子，确定收到几件衣服，并发送积分。小A捐赠了几次衣服后，发觉自己拥有了不少公益积分，小A能够在积分频道能够兑换书籍，也能够兑换部分公益合作商家优惠卡，如洗车、吃饭等。小说里大约会包含什么功效呢？对于捐赠人：1. 登录/注册：支持用微博、QQ账户登录2. 填写并提交捐赠请求：捐赠内容、图片、新旧程度、上门时间（可选择提前电话预约）3. 查看并追踪捐赠状态：看到过去捐赠多种衣物及领取积分4. 捐赠衣物并获取积分5. 公益积分查看：查看自己积分情况，历史总积分，已兑换及未兑换6. 积分兑换：兑换各参与公益商家优惠券。部分业务步骤图示例：能够说这两步工作是绘制页面步骤图必不可少准备，我们明白了要做什么，为哪些人做，关键功效是哪些？功效之间步骤是什么样。不过因为是互联网产品，这些步骤必需以页面为承载体，比如“提交捐赠”是一项活动，到了页面设计时，我们要用几张页面去完成这一个动作呢？这些页面相互是什么关系呢？绘制页面步骤图现在我们已经知道了系统应该有哪些功效，我们应该提供哪些内容，现在就需要将这些功效及内容分配到不一样页面去。页面步骤图简明：1. 页面=操作+内容，操作是需要用户触发，包含链接、按钮、表单等等。用户经过这些操作，看到同一个页面上不一样内容，或跳转到其它页面。2. 页面步骤图目标：表现用户不一样操作指令下不一样页面流转关系。3. 页面步骤图元素：页面、操作或状态、链接线4. 页面也有分类：请注意有些操作可能不会带你去一个实际页面，而是有可能发个短信、发个邮件等，这些也需要被表现出来。怎样开始绘制？即像讲一个小说，最简单就是从用户第一个初始页面开始进行。或有些人问了: 我用户角色可能根本用不到有些操作，条条大路通罗马，她只选择了其中一条路径，那我怎么能把全部页面全部画出来呢？我经验是：不要细分用户类型，而是依据页面穷举各项操作，基于假设判定用户若点击什么就会到哪里。在这个案例中，我期望用户第一个页面是首页。她有两个关键被引导操作：1. 能够查看捐赠或新提交一个捐赠。2. 能够查看公益积分或兑换积分。以下就是从这个页面开始一系列页面步骤：这个图受篇幅限制没有全部画完，比如到了积分商城后还有一系列页面呢，有爱好同学继续试试。【部分提醒】：1. 页面通常见矩形表示，页面上要表现关键内容块及关键操作。2. 使用圆角矩形放到连接线上表示各项操作。一个页面可引出多个操作指向不一样页面。3. 只表现系统判定，用户本身判定不需要表现出来比如用户到了详情页面是要购置呢？还是加入收藏呢？还是离开呢？这些直接用操作指向不一样页面即可。4. 也有不适适用页面步骤图去表现网站，关键是因为操作类更多不是纵深型一步步步骤，而是平行中跳转，如门户类网站查看新闻用例、如音乐类网站等等。这种情况下，最好用站点地图（site map）去表示页面隶属关系就能够了。可能大家会留心到，上图中操作有可能就是设计时页面上实实在在按钮或文字链接，没错。不过有些页面步骤图未必是能够完全按操作、页面来连接，下图是我在3年前画过一个页面步骤图（请注意这个步骤图就不符合我说几条规则）。当用户抵达详情页后，她下一步操作可能是什么？详情页操作太多了支付、加入购物车、加入收藏、推荐给好友、离开、再逛下图中“以后再说”并不是操作，“对比后再决定”也不是操作，这正像什么呢？是对操作做一个人工分类还是表现用户意图倾向？当初我凭直觉去画这张图时候，用意是在于探寻购物路径中有没有可优化空间，所以是想要把用户操作前意图列举出来。假如用户喜爱这个商品话，可能会想做什么？现在我们提供了哪些功效能够继续往下走？当不喜爱话，她们可能想要做什么？我们现在又做了什么挽留？【点击图片可查看大图】所以，我们也能够在页面步骤图中加入“意图”项，你能够用你喜爱形状去表示“意图”，比如椭圆。最终一定会有些人问绘制工具是什么文中所举捐赠案例，我是用PPT随手画。假如篇幅不需要太大，完全能够用PPT绘制，另存为图片，导入到AXURE原型工具里，然后在每个页面上加一个透明矩形，再添加链接到对应线框图页面。以前也多用AXURE绘制页面步骤图，如：（这个例子中，操作按钮没有放到链接线上，是因为此用例页面数量不多，页面能够比较大，连接线能够直接从页面上操作中画出）最终我想说是，页面步骤图重在把事情讲清楚，把页面交代清楚，无须追求太多规则和条条框框，你能够用你最舒适方法去表示。文中所举方法，是我比较习惯，也欢迎各位同学交流下你们是怎么绘制页面步骤图