有一些同窗 看过了我写的《若何 绘制营业 流程图》，发私信过去 但愿 我谈谈页面流程图。

　　这个话题其实我也酝酿过，但一向 没有写出来。细究起来，除 懒，缘由 其实有好几条：

　　1. 这一年半来的任务 都是环绕 数据平台建立 ，不是很通用，没法举例。

　　2. 固然 本人 一向 画页面流程图，然而 说假话 属于偏方多一些，按直觉行事，要总结出一两条可通用的“划定规矩 ”对照 难。

　　昔日 由于 由于 天色 预告 号称有雷震大雨，作废 了原本的 外出企图 ，恰好 在家里，想起抛出这块砖头，希冀 这个话题能激起 更多的分享和会商 。

　　案例呢……想一个浅显 易懂又具代表性的案例真不轻易 ，它不克不及 太复杂 ，太复杂 的话几近 上没有甚么 页面，也不克不及 太庞杂 ，太庞杂 了我还hold不住。

　　恰好 前不久在拾掇 家里闲置的衣服，舍不得扔但又不穿，事先 絮聒 一句，说如果 有个中央 可以 提交下捐赠，有人上门收就行了 。在我头疼要怎样 举例演示页面流程图的时分 ，我就把这个也许 YY了一下，就用“公益捐物网站”为例来讲 明吧。

　　页面流程图是个好器材

　　营业 流程图主要 的是描写 谁在甚么 前提 下做了甚么 事。

　　而页面流程图是详细 到了网站、体系 、产物 功效 设计的时分 ，体现 页面之前的流转关系——用户经由过程 甚么 操作进了甚么 页面及后续的操作及页面。

　　从需求到到处理 计划 无疑要经由 良多 阶段。需求的剖析 ——用户是谁?用户的成绩 或需求是甚么 ?用甚么 功效 去知足 需求或处理 成绩 ?这些功效 的优先级是甚么 ?这些成绩 都需求 慢慢 得以明白 ，与此同时，你需求 用一些线框图、原型或 DEMO(这些在我以为 都是一个器材 )去匡助 本人 精密 化这些功效 ，想透辟 那些需求。

　　直接画单张页面的线框图固然 是可以的，然而 有能够 会呈现 一会儿 进入单页面，不先体系 性计划 ，思索 每项功效 的前置和后置，每项操作的高低 文，就很轻易 捉襟见肘 ，漏掉 主要 形态 或无视 本应简化的义务 。

　　说到这里，单页面的线框图很像PPT，我团体 在做PPT之前，实际上是 必定 要有脑图或 已 在一张大纸大将 目次 布局 、每页的重点都写出来、画出来的。所以真正做PPT则地道 是在做罢了 ，可以做得很快，只由于 心中早就有谱了。所以，在画线框图之前，我也习气 先将页面流程丹青 出来。

　　优点 之于关于 设计师或产物 司理 ：

　　页面流程图一张页面助你讲完完全 的用户与体系 的交互故事，借助它，你更轻易 晓得 流程中的潜伏 地雷是甚么 ，哪里的效力 对照 低，有助于体系 化、全局化、周全性的思虑

　　细化任务 量的基本 ，经由过程 页面流程图可正确 评价 需求 几何 张页面。

　　聚焦：页面流程图中的每一个 页面都不用 寻求 精密 ——你的方针 是计划 行动 途径 ，而不是单页面交互设计，所以完整 无需思索 页面内容、结构 。所以你会加倍 聚焦于用户方针 和义务 的完成。不用 过早堕入 细节。

　　关头 是很快。线框图有能够 有几十张，你画起来没那末 快，并且 一旦进入细节，则还需求 渐渐 深究。然而 页面流程图或许 就是几个小时的工作 。你就能够 对全部 项目心中无数 了。

　　优点 之于开辟 工程师：

　　他们会很愿意 你在没有原型的时侯，第一工夫 拿出页面流程图和他会商 需求。信任 我，这比纯真 的功效 列表或 有营业 流程图更让他们高兴 。

　　可作为评价 任务 量的主要 根据 ——可匡助 他们对任务 量也心中无数 。

　　可做为展开 代码任务 的主要 参考——出格 是前端开辟 ，必需 得晓得 每 种操作指向甚么 页面。

　　他们会映照 功效 逻辑，会给你更多好的建议。

　　绘制之前——

　　回到开首 咱们 说的案例——公益捐物网站，这个仅仅是idea，真缺乏 以让它酿成 一个产物 。如今 借着本话题，咱们 也测验考试 一下若何 把随机迸发的一个idea疾速 转化为产物 吧。

　　第一步：idea大拷问

　　此步的目标 是验证一下idea的靠谱水平 。怎样 说靠谱?

　　1. 有方针 用户——不是火星人，并且 有必定 的范围 性。

　　2. 对方针 用户有价值——保举 利用 Before&After(这个术语不必 谷歌 了，Heidi诬捏 的)体例 描写 清晰 。

　　Before——即近况 剖析 (需求、成绩 )。在没有你的产物 前，你的方针 用户碰到 的成绩 是甚么 ?他们明白 的及潜伏 的需求是甚么 ?市场上已 有哪些产物 ?这些产物 为何 没有知足 这些需求，处理 这个成绩 ?(固然 ，外部 产物 ，没需要 剖析 太多竞品，然而 头脑 里要过一遍这些成绩 ，没害处 。)

　　 After——这个产物 若何 知足 需求及处理 成绩 的?除此以外 ，潜伏 的好处 是甚么 ?可以分用户、公司多个维度阐释。

　　3. 方针 用户能用——有响应 的才能 储蓄 (不需求 经由 进修 、培训便可 用你的产物 )，可及性(你可以 去触及这些用户群体，让他们懂得 有这个产物 可以用)

　　本案例为了共同 页面流程图顺手 拈来，纯真 客不雅 描写 一下，诸位也能够 协助 诊断下是不是 靠谱。

　　我们 YY下吧。 

　　假定 咱们 是要做如许 一个网站，必需 有几个介入 脚色 吧。必需 有人去收衣物，可以和公益组织、社工群体、慈悲 组织获得 接洽 ，让他们成为第一种介入 方。这里不睁开 了。

　　固然 也必需 有人要捐赠衣物，这里，假定 定位于年老 人群体，舍得买也舍得捐，有足够的才能 储蓄 可使 用在线体系 而不是等收废品的大爷呼喊 。

　　方针 用户：各居平易近 区住户，年老 工资 主，岁数 在22到35岁

　　Before：

　　空间抵触 ：大户 型房子，储物空间无限 ;时髦 群体，花费 空间很大，对照 喜好 尝鲜，衣服和各类 生涯 物品只进不出，没有足够中央 包容 ，必需 要推陈应新。

　　处置 旧衣物的体例 无限 ：独生后代 群体占多数 ，也没有家人亲戚可以赠予 。即便 晓得 哪里有灾害 产生 ，哀鸿 缺衣少物也没有通道停止 捐赠;二手市场消耗 精神 ，且后果 欠好 。……

　　After：

　　可随时提交捐赠需求，守候 有人上门收取，轻松做到眼不见心不烦。

　　捐赠带来额定 优点 ：1. 换取公益积分(积分可用于定阅 杂志、享用 介入 举动 的商家优惠、换取书本 等)2. 公益积分可冲抵水电费……好吧，YY吧。

　　不外 写到这里，俺发明 仍是 根基 靠谱的吧，所以持续 往下吧。。

　　第二步：功效 列表及优先级

　　此步是进一步明白 要做甚么 ，和 用户也许 会怎样 介入 利用 。

　　介入 这个产物 的有担任 收衣服的，也有捐赠衣服的，单表这捐赠衣服的用户脚色 吧，以免 不当心 兜不住了。

　　营业 故事：小A有一批衣服需求 捐赠，他在手机上提交一份捐赠需求，写明本人 要捐赠甚么 衣服，新旧水平 ，几何 数目 ，甚么 体例 预定 上门工夫 ……小A提交捐赠后，收到预定 德律风 ，约好了3天后的周末下战书 上门取衣服。到了预定的工夫 ，上门取衣服的社工反省 了捐赠的数目 后，拿出手机查找到小A捐赠的那笔票据 ，确认收到几件衣服，并发送积分。小A捐赠了几回 衣服后，发明 本人 具有 了很多 公益积分，小A可以在积分频道可以兑换书本 ，也能够 兑换一些公益协作 商家的优惠卡，如洗车、吃饭等。

　　故事里也许 会包括 甚么 功效 呢？

　　关于 捐赠人：

　　登录/注册：撑持 用微博、QQ账户登录

　　填写并提交捐赠恳求 ：捐赠内容、图片、新旧水平 、上门工夫 (可选择提早 德律风 预定 )

　　检查 并追踪捐赠形态 ：看到曩昔 捐赠的各类 衣物及支付 的积分

　　捐赠衣物并获得 积分

　　公益积分检查 ：检查 本人 的积分情形 ，汗青 总积分，已兑换的及未兑换的

　　积分兑换：兑换各介入 的公益商家优惠券。

　　局部 营业 流程图示例：

　　可以说这两步的任务 是绘制页面流程图必不成 少的筹办 ，咱们 分明 了要做甚么 ，为哪些人做，次要 的功效 是哪些?功效 之间的流程是甚么 样的。然而 由于 是互联网产物 ，这些流程必需 以页面为承载体，好比 “提交捐赠”是一项举动 ，到了页面设计时，咱们 要用几张页面去完成这一个举措 呢?这些页面彼此是甚么 关系呢?

　　绘制页面流程图

　　如今 咱们 已 晓得 了体系 应当 有哪些功效 ，咱们 应当 供应 哪些内容，如今 就需求 将这些功效 及内容分派 到分歧 的页面去。

　　页面流程图扼要 ：

　　页面=操作+内容，操作是需求 用户触发的，包括 链接、按钮、表单等等。用户经由过程 这些操作，看到统一 个页面上分歧 的内容，或 跳转到其他的页面。

　　页面流程图方针 ：体现 用户的分歧 的操作指令下分歧 页面流转关系。

　　页面流程图元素：页面、操作或形态 、链接线

　　页面也有分类：请注重 有些操作能够 不会带你去一个实践 的页面，而是有能够 发个短信、发个邮件等，这些也需求 被体现 出来。

　　若何 入手下手 绘制？

　　即像讲一个故事，最复杂 的就是从用户的第一个初始页面入手下手 停止 。

　　或 有人问了: 我的用户脚色 或许 基本 用不到有些操作，条条亨衢 通罗马，他只选择了个中 一条途径 ，那我怎样 能把一切 的页面都画出来呢?

　　我的经历 是：不要细分用户类型，而是依据 页面穷举各项操作，基于假定 判别 用户若点击甚么 就会到哪里。

　　在这个案例中，我但愿 用户的第一个页面是首页。

　　他有两个次要 被引诱 的操作：1. 可以检查 捐赠或新提交一个捐赠。2. 可以检查 公益积分或兑换积分。

　　以下就是从这个页面入手下手 的一系列页面流程：

　　这个图受篇幅限制没有全体 画完，好比 到了积分商城后还有一系列页面呢，有乐趣 的同窗 持续 尝尝 。

　　【一些提醒 】：

　　页面普通 用矩形暗示 ，页面上要表现 关头 的内容块及次要 操作。

　　利用 圆角矩形放到毗连 线上暗示 各项操作。一个页面可引出多个操作指向分歧 的页面。

　　只表现 体系 判别 ，用户自己 的判别 不需求 表现 出来——好比 用户到了概况 页面是要购置 呢?仍是 到场 保藏 呢?仍是 分开 呢?这些直接用操作指向分歧 的页面便可 。

　　也有不合适 用页面流程图去体现 的网站，次要 是由于 操作类的更多不是纵深型的一步步流程，而是平行中跳转，如门户类网站检查 旧事 的用例、如音乐类网站等等。这类 情形 下，最好用站点地图(site map)去表达页面附属 关系就能够 了。

　　能够 人人 会寄望 到，上图中的操作有能够 就是设计时页面上实其实 在的按钮或 文字链接，没错的。

　　然而 有些页面流程图未必是可以 完整 按操作、页面来毗连 的，下图是我在3年前画过的一个页面流程图(请注重 这个流程图就不合适 我说的几条划定规矩 )。当用户抵达 概况 页后，他的下一步操作多是 甚么 ?概况 页的操作太多了……付出 、到场 购物车、到场 保藏 、保举 给伴侣 、分开 、再逛……下图中的“今后 再说”并非 操作，“对照 后再决意 ”也不是操作，这正像甚么 呢?是对操作做一团体 工的分类仍是 体现 用户的意图偏向 ?事先 我凭直觉去画这张图的时分 ，意图 是在于探访 购物途径 中有没有 可优化的空间，所所以 想要把用户操作前的意图罗列 出来。假如 用户喜好 这个商品的话，能够 会想做甚么 ?今朝 咱们 供应 了哪些功效 可以持续 往下走?当不喜好 的话，他们能够 想要做甚么 ?咱们 今朝 又做了甚么 挽留?

　　【点击图片可检查 大图】

　　所以，咱们 也能够 在页面流程图中到场 “意图”项，你可以用你喜好 的外形 去暗示 “意图”，好比 椭圆。

　　最初 ——

　　必定 会有人问绘制东西 是甚么 ……

　　文中所举的捐赠案例，我是用PPT顺手 画的。

　　假如 篇幅不需求 太大，完整 可以用PPT绘制，另存为图片，导入到AXURE原型东西 里，然后在每一个 页面上加一个通明 的矩形，再添加链接到响应 的线框图页面。

　　之前 也多用AXURE绘制页面流程图，如：(这个例子中，操作按钮没有放到链接线上，是由于 此用例页面数目 不多，页面可以对照 大，毗连 线可以直接从页面上的操作中画出)

　　最初 我想说的是，页面流程图重在把工作 讲清晰 ，把页面交卸 清晰 ，不用 寻求 太多的划定规矩 和条条框框，你可以用你最温馨 的体例 去表达。文中所举的体例 ，是我对照 习气 的，也接待 列位 同窗 交换 下你们是怎样 绘制页面流程图的。

　　作者：Heidi

　　微博：http://weibo.com/heidixie

产品架构是最底层的设计，这会直接影响到后续产品的不断发展PS教程。