交互设计流程图

1、这几天做IDEA下面是如何绘制流程图的文章放在这里，并写下自己的收获，方便以后查阅。收获如下：1操作步骤是用户正常情况下完成某项操作所需的操作，而交互流程图（严格意义上叫程序流程图）表达是执行逻辑的路径， 通俗地将是当用户点击某个按钮之后，程序执行命令的顺序。2、在绘制流程图的时候应该和大致的页面相互对应起来，同步进行思考，保证设计每一个 环节的紧密性，而不是最后页面出来之后再绘制流程图，或者再对照是否是按照流程来做的。学习产品设计初期肯定会遇到两个问题：第一，如何考虑更全面；第二，如何绘制交互流程图。开始产品设计前先要考虑所有可能性，如何才能以线性流程图的方法组织所需的设计元素。小郑老师的交

2、互设计表格中已经介绍了非常实用的表格穷举法，适合初学者使用。流程图是产品经理和交互设计都必须掌握的技能，一张流程图可以省去需求文档和交互设计文档的很多文字描述，让技术人员一目了然地明白设计意图，便于组织程序的逻辑顺序。绘制流程图准从简单的原则，流程图是设计师的产出物，体现设计意图，主要给技术人员和测试人员浏 览，至于自己是如何思考不应体现在流程图中。别人也要早点回家被老婆，没有时间关心你如何的细心 的考虑，也不关心用户会如何思考和操作的，请直接给他们展示设计的结果。复杂和纠结留给自己，简单留给别人。对用户是这样，对工作同伴也是如此。图例 1 ：手机程序开机检查更新的流程图流程图包括以下图形：矩

3、形表示交互环节菱形表示问题判断箭头表示工作流方向也有用圆角矩形表示 “开始”和“结束 ”，个人一般不要该图形，因为从上而下的线性流程图。最顶部的图 形或者箭头开始的部分是流程图的 “开始 ”，如图例中，开启程序触发了事件，程序开始检查更新；最底 部的图形或者箭头终止的部分是流程图的 “结束 ”，如重启程序和不再提示表示本次事件结束，无须以图 形区分表示 “开始 ”和“结束”。流程图容易和操作步骤混淆，比如交互设计表格中的登录框操作步骤是：点击登录，弹出登录框 点击用户名输入框，输入用户名 点击密码输入框，输入密码 点击登录 操作步骤是用户正常情况下完成某项操作所需的操作，而交互流程图（严格意义

4、上叫程序流程图）表达 是执行逻辑的路径，通俗地将是当用户点击某个按钮之后，程序执行命令的顺序。更复杂的系统流程图 可用于产品架构。当用户点击的登录框之后，文字描述程序执行的顺序：检查用户名是否为空。如为空，提醒用户 “请您输入用户名 ”。如果用户名设置要输入手机号码，还要检 查手机号码是否是否以 13/15/18 开头的 11 位数字。检查密码是否为空。如为空，提醒用户 “请您输入密码 ”。 检查用户名是否是已用账户。程序提交数据与服务器数据进行比对。如果不是，提醒用户 “用户名不正 确”。疑问：用户名有误和不存在是如何判断的 ?检查密码是否与账户匹配。如错误，提醒用户 “密码输入不正确 ”。

5、现多数登录框将 4 和 3 合并，只提醒 “用户名或密码不正确 ”，可能是告知用户过于准确的信息之后会增 加盗号风险。臀扎护m；;胃，点1F甘沿5图例2,wap站验证用户手机号码应该怎么做呢?设计时，既应该关注让任务流畅，又需要让结构清晰。 如果你认同了这个观点，那么，接下来的问题就是：下面介绍一个设计方法， 这是一个用于兼顾 为流程”与 为结构”的信息架构（IA ）的设计 方法。是2010年底，我和seven共同分析总结出来的。 在广州的“2010年首届中国交互设计 体验日”中的工作坊上，我俩曾现场介绍过这个方法：通常我们会在设计开始阶段分析出主要的用户任务，然后逐一任务画流程图。 然后呢直

6、接开始画信息架构图（IA图）了，IA图怎么画呢？设计者凭空想象着画，靠经验，靠见识。IA树状图标明了主要页面的组织形式，然后再逐一页面的细致设计。之前画的流程图呢？ 似乎没用到。流程图是保证最终的产品能任务流畅的，如果能在IA的设计过程中切实用上流程图，为任务流畅”就能保障了。这里要介绍的就是一个将流程图有效融合到IA设计过程中的设计方法一页面简图法：第一步：画流程图结合一个实例来看：这是一个基于QQ秀商城的网站产品。起个名字叫：搭配秀。用户A上传一张真实人物图片，展示在这个网站中。用户B看到这张图片后，照此搭配出一套QQ秀形象，与之匹配。搭配好的一对作品也会展示在网站中。我们先画流程图，首先

7、总结了这样几个用户任务：提交待完成的真实人物照片；完成作品； 随便看看。三个任务的流程图如下：施便看看为什么流程图没有作用到IA设计过程中？最终的产品是一个个页面的集合，IA是这些页面的组织形式，IA图上的每一个节点就是个页面。流程图的研究对象不是一个个页面，而是一个个行为，所以，在IA的设计中不知该如何使用流程图。有时候整个IA设计完成后，设计者们还能想起来当初画过流程图，可能会翻出流程图来， 校验一下设计出来的方案，看方案是否能让这些任务顺利。设计过程中并没为流程而设计， 事后的校验要想有好结果，恐怕要靠好运气了。肿么办？因为流程图的研究对象是行为而不是页面，所以，在最终的基于页面的产品设

8、计方案中难以应用，那么，我们想办法把流程图的研究对象转化成页面就成了呗第二步：将流程图转换为页面简图鶴交持搭配的真实人靭阍片完成作品开始 u F 丿选ib 待完成的作品特完成作品listd待完成作mdetailirm/" V搭配N是否己登录ID：密码：在咬藏中选择Y收藏中是否在Q Q秀商城 、貢满意赳/中搭配并收藏填写描述等资料登录在您的收猱中选ddd搭配说明ok I 不ok您兗成的1131 完成咸品list随便看看pa转换时，只要粗略想好每个页面大致的设计就好了，比如：这是一个列表页；这是一个登录页这些比页面原型更为简略的图是为了后面搭建IA用的，所以异常简略，你甚至可以只是给每个

9、页面一个名字就够了， 此时无需过多考虑每个页面内的具体设计。给这些超简略的图起个名字：页面简图。把它们组织起来，使其有序，这就是上面这些页面简图就是这个产品要包含的主要页面了, 第三步：设计信息架构触秀登录提交作品悠的items懸提交的dddddd慢完成的4*ddd铸完咸柞品li st成品list选團片10：密码:下V播記作島當逮''' ''-' -'' rIT H IT II If ti在逐的收茂中选菱配说明上T就'住W & N鼻N厅fl：匸（训览.上一完成“亮成的”“提交 対”餡内蓉昼都不 合尢大J所以合帥 了

10、一个页面也可 址分岀两个二级页 叛0登录完威作ndetail搭配dddd| dOk 不ok感品血询I特搭配与惑品合対一个一簸栏目便 提供一个包含待搭配利已完咸的全制 items列責*在第三步中需要说明的几个问题：?有些页面是重复的，只保留一个就好；?保留页面间跳转的那些链接、按钮，它们是任务流畅的保障；? IA的设计更侧重于关注合内容逻辑，易学习性。通过这三步的设计方法， 产品的架构就搭建好了。 页面简图中已经对每个页面有了大致的设 计，现在完成了 IA，接下来就可以去细致的设计每个页面了。总结页面简图法是一个信息架构的设计方法。这个方法通过页面简图将流程图翻译为页面和页面间的跳转关系，再组织

11、这些页面，形成信息架构（IA ）。产品的最终包含的页面是来自于第一步的一个个流程，并且在第二步、第三步中都一直保留着页面间的跳转，这些都保证了为流程而设计”。第三步是专门的设计IA，待组织的这些页面是根据任务流程一串串的，类似选图片”与 写描述”一定是得归在一堆儿的。IA的设计也会更有依据了。为结构而设计”也能做的更好了。页面简图法的三个步骤， 每一步都是在设计， 流程该怎么设计？怎么翻译成页面简图？信息 架构如何组织？不同的设计者会给出不同的结果。设计方法只是给设计者提供一个更为靠谱儿的思路、框架，并不能代替设计者的头脑。如果你尝试着应用这个方法，可能会发现，在有些时候，这个方法显得没啥价值，比如，要设计一个图形工具类的