交互设计——绘制流程图

在上一篇文章中了解如何寻找接触点、梳理接触点,在这篇文章中主要就是如何来绘制流程图。现在普遍对流程图的分类有四种:业务流程图、页面流程图、功能流程图、程序流程图。在这主要通过现有的APP分析来进行区分不同流程图以及如何交互设计师或者产品经理选择应该使的流程图。何为流程图在上文中讲到了流程,流程是事物进行中的次序或顺序的布置和安排。流程是自然而然就存在的,它可以不规范,可以不固定,可以充满问题。而流程图的核心就在于如何排布事物进行的次序,...

        在上一篇文章中了解如何寻找接触点、梳理接触点,在这篇文章中主要就是如何来绘制流程图。现在普遍对流程图的分类有四种:业务流程图、页面流程图、功能流程图、程序流程图。在这主要通过现有的APP分析来进行区分不同流程图以及如何交互设计师或者产品经理选择应该使的流程图。


何为流程图

        在上文中讲到了流程,流程是事物进行中的次序或顺序的布置和安排。流程是自然而然就存在的,它可以不规范,可以不固定,可以充满问题。而流程图的核心就在于如何排布事物进行的次序,不同的顺序可能造成截然不同的结果。

流程图作用

        对于交互设计师而言,其主要的作用是表达每一个页面的跳转逻辑是,这个页面是怎么样到下一个页面的。

        对于产品经理而言,可以保证产品的使用逻辑合理顺畅、传达需求,用流程图来更好地表达产品逻辑、查漏补缺,检验是否有遗漏的分支流程。

流程图种类

        现在大多数人将流程图分为业务流程图、页面流程图、功能流程图、程序流程图这四种,交互设计师主要要了解页面流程图与功能流程图。


(1)业务流程图

        定义:基本上按业务的实际处理步骤和过程绘制,是一种用图形方式反映实际业务处理过程的"流水账"。(360百科)

        在这里涉及一个细致程度的问题,当然是根据实际的情况。流程图的细致程度越高,产品设计就越准确顺畅。但实际情况中,过度的详细反而是浪费时间。但一般是抽象地描述事物进行的次序和顺序,不涉及具体操作与执行细节。在互联网产品的业务流程图中就是脱离了用户实际的操作行为,而只是表现没有业务的具体步骤。

交互设计——绘制流程图


(2)页面流程图

        定义:指电子产品具体所呈现的页面跳转流程图。其承载了业务流程图所包含的业务流转信息。页面设计流程图的一大重点是面向表现层,也就是说,描述的是界面(或叫屏幕)的变化,是用户看到的界面的行为流。何为行为,可以说是页面的跳转逻辑

交互设计——绘制流程图

        页面流程是表示每一个页面出现的跳转,表现的是每一个页面(注意,停留在表现层)。其次,页面流程图依然是包含在业务流程图之中的,可以说是将业务流程图进行了细化。将抽象的业务流程图以页面的具体形式很具象的表现出来。

(3)功能流程图

        定义:指单页面内或多页面之间的功能操作流程,其包含在页面流程中。任何功能都是被包含在页面内的,但一个页面内往往不止一个功能,所以单单页面流程图可能无法完整表达所有流程,而这时就需要用功能流程图来更加具体表达每个页面内所包含的功能

交互设计——绘制流程图

        例如“得到”与“淘宝”,在一个页面有不同的功能操作,所以现在需要用功能流程图来更加具体表达每个页面内所包含的功能。以“得到”为例:

交互设计——绘制流程图


(4)程序流程图

        与其它三种流程图不同,业务流程图大多以人为核心,每个节点都是在传递人的不同行为、页面流程图和功能流程图也类似,都是以人的操作行为为核心,在不同页面和功能间进行流转。但数据流程图不同,它是以数据为核心,展示整个系统中,数据是如何被处理的。程序流程图更会注意流程背后的的程序。还是以得到为例:

交互设计——绘制流程图

        简单来说,程序流程图更多会考虑背后的背后程序流程是怎么样的。


流程图的组成元素与组成部分


(1)组成元素

交互设计——绘制流程图

        画流程图的工具有很多种,AXURE/WORD/WPS都是可以的。

(2)组成部分

主要分为主干(用户的主要完成步骤)、枝干(分支流程)、子流程(将某几个具有逻辑关系的节点集合而成的,可以复用在各个地方),以上面的“得到”为例:

交互设计——绘制流程图


(3)流程图的结构类型

主要分为:顺序结构、选择结构、循环结构

交互设计——绘制流程图

总结

流程图主要表示了一种结构顺序,对于交互设计师而言,在进行信息架构的组建的时候,其实也进了部分的流程图的设计,只是在根据接触点的梳理再次将流程进行梳理。交互设计师主要是页面跳转逻辑,也就是要注重页面流程图与功能流程图——页面功能流程图。一般交互设计师根据页面交互流程图会产生这样的流程交互稿:

交互设计——绘制流程图

超sir 

第十一

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/36875/

(0)
交互精选交互精选
上一篇 2018-05-06
下一篇 2018-05-06

相关推荐

  • 在用户体验中询问用户的4个问题(译文)

    该客户的体验是一个思考的人从我们产品的认知度如何去成为一个真正有用的抽象用户,但抽象并非最终有意义。要真正改进您的产品,您需要与您的用户交谈。无论是面对面的,应用内的还是通过电子邮件发送的调查,都需要花时间与用户签到并保持对他们最重要的事情。这种双向反馈也是您可以用来帮助人们通过漏斗最有效的工具之一,并最终帮助他们坚持成为您产品的惯用用户。让我们看看如何从战略上使用问题从用户那里获得正确的信息 - 这种信息将帮助您采取行动。如何提出从收...

    2018-02-26
  • Sketch常用插件介绍

    sketch大家应该都不陌生,在互联网设计尤其是UI设计相对于老牌PS,sketch提升了工作效率,改变了以往的工作模式,sketch的强大除了软件本身,另一个不可磨灭的功劳就是丰富的插件。今天给大家介绍几款常用的插件:一、Sketch Measure一键自动生成 HTML 页面,离线下检查所有设计细节,包括 CSS 样式。在线演示: http://utom.design/news/二、Craft帮你提高效率的自动填充神器a.文本自动填...

    2018-04-12
  • 终极神器!Sketch 一键转成 PSD 格式!

    曾经有很多人问图翼君Sketch转PSD怎么弄?今天就给大家分享一神器,大招一放So easy!工具下载地址关注本公众号回复“39”支持PSD、XCF、Sketch、Any格式使用方法:1、打开神器,选择Open Frome Computer 打开要转换的Sketch文件2、选择你的Sketch文件,工作台会显示你的文件3、选择右上角File  -  选择Save as PSD, 保存成PSD文件。4、保存后,浏览器会自动下载转好的PS...

    2018-04-09
  • 动起来才好玩——创意交互设计景观

    设计是靠亮点征服人,吸引眼球,大部分方案构思雷同,建成后风格水平都差不多,如何让场地更加吸引人而脱颖而出,这就需要在新、奇上下功夫。电子梦幻天幕世贸天阶最著名的“全北京向上看”的“超豪华LED天幕”,这座天幕将为整条商业街带来富于梦幻色彩和时尚品位的声光组合,成为一座吸引人潮的世界级奇观。建成之后,人们在这里可以欣赏缤纷悦目的日夜景观,感受现代科技带来的富于梦幻色彩和时尚品位的声光艺术。而且游客可以把想说的话发送短信到平台号码,天幕上就...

    2018-02-03
  • UED中国最美民宿大奖十强榜单揭晓

    你的内心是否有一种渴望,在纷杂忙乱的都市生活之后,去放松身心,亲近自然?你会向往自由的空气与水,向往与有趣的人们相遇,你会需要一个有温度的空间,让你做回真正的自己。从山间居所到林中小屋,从海边美宿到都市一隅,最美民宿,它们的美只为打动你。它们或许承载着美丽的风景,或许被美好的人们所赋予的生活填满,又或者发生着许多奇妙的故事;它们也许出自专业的设计师之手,又或许是来自对生活有理想的人们坚韧而温柔的初心;它们在江南、在大理、在北京........

    2018-02-01
  • 用户体验设计 - 快问快答

    首先感谢大家关注我。上篇文章收到了很多小伙伴的反馈,很多人说想多看我更新与用户体验有关的文章,也有反应说有文章长度过长。所以这篇文章我用了快问快答的形式,回答了几个新手用户体验设计师比较关心的问题。因为我自己也是转行做UX,所以希望我走过的弯路大家可以绕过去一些。欢迎大家把我的文章发给其他小伙伴,一起共同进步。也欢迎大家给我意见与建议,你们的观点对我真的很重要!(这次文末有彩蛋)1.什么是用户体验(UX)?这是一个很大的问题,就像你问我...

    微信热点 2018-02-02
  • 交互设计 | 一部自嗨的头号玩家为什么吸引你?

    Create Your Difference. by CYD头号玩家头号玩家到底什么吸引你?情怀吸引了你?动漫迷的高达情怀电影迷的金刚情怀恐怖情怀或者跳舞机情怀?或许美国大片吸引了你?▲有坏美女▼坏boss▲坏人老出BUG▼好人老有神助▲英雄要崇拜▼大部队会赶来不管什么吸引了你把你所有的感触和情绪放大一万倍的东西是艺术和科技当然,我相信你们都知道不就是VR和AR吗整个电影都建立在VR和AR的基础上没有这牛逼地眼镜,这个故事还没开始就可以...

    2018-05-05
  • 又是高分!北京林业大学交互设计专业课143分复习方法分享

    又一个高分!北京林业大学交互设计专业课143分复习方法分享-孙跃桐我决定考研大概是在16年的9月份吧,因为决定的时间比较早,我以为我准备的时间很充足。真正开始准备是在17年我先开始报了新东方的英语政治课,想先将公共课的基础打牢,在后期复习专业课的时候会有更多的精力于是我将上半年的精力全部都用在学习公共课上面。想在9月份招生简章出来之后我就开始专心复习专业课。但是当九月份招生简章出来之后,我就开始慌了。我本身想考的就是本校之前也问过考研的...

    2018-04-22
  • 新知 | 在打造用户体验上,连雷军都要向这家企业学习

    在我们之前发布过的一篇文章《小米八周年:雷军揭秘四大成功之道》中提到过,雷军在创建小米时受到了美国零售连锁超市好市多(Costco)的启发,从价值体系上来看,小米与好市多相同,都是希望用户能以可承受得起的价格享用更好的产品。好市多以优质、低价出名,在全球拥有700多个分店。从2006年到2016年,好市多的市值增长了五倍,如今的市值约为670亿美元。好市多亚洲区总裁张嗣汉在2018零售业年会上分享了好市多的运营模式、会员制度,以及管理层...

    2018-05-04
  • 在Axure中,如何用动态面板实现banner的轮播效果(附Axure教程及软件)

    axure功能太强大,动态面板可能已经搞得你头晕眼花了,更别提7.0版本的中继器了。废话不多说,还是和大家分享一下动态面板实现banner轮播的效果,对动态面板还不熟的,不妨来看看这个效果的制作过程,然后自己试着做一做,绝对增加自己的信心。就拿某宝首页banner轮播效果为例进行说明:1前期线稿图,部件准备01先画个大概的位置线框图,如下图所示,做了3张banner的轮播效果02banner位置的占位符转换为动态面板(鼠标右键,转换动态...

    2018-03-06