交互设计——绘制流程图

在上一篇文章中了解如何寻找接触点、梳理接触点,在这篇文章中主要就是如何来绘制流程图。现在普遍对流程图的分类有四种:业务流程图、页面流程图、功能流程图、程序流程图。在这主要通过现有的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

相关推荐

  • UI设计、交互、产品、都应该具有这十种思维模式!!

    注:文章由 集创堂联合创始人CEO纯色老师和设计帮联合出品!这篇文章从十个维度深入挖掘交互设计的思维模式,如果你是UI设计师、初级交互设计师、产品经理、那么这篇文章很值得你学习。笔者在和纯色老师探讨交互设计思维时,老师说“不管你是UI、交互、产品,在团队中都不能是孤立单一的技能,要用联系的观点去看设计,不能分裂来看”。老师说的很对,做UI设计到最后是离不开交互知识支撑的,同样交互、产品也应该具备对设计的审美,这样每一个角色再探讨产品时才...

    2018-01-30
  • AxureRP8.1简体中文汉化包V1.6.5版发布!

    Axure RP目前最新版本更新至Axure RP 8.1.0.3372。版本更新后,会发生无法登陆Axure Share的问题,导致无法在线发布原型项目。这个问题是因为新版软件不兼容旧版汉化包所导致。经排查,对旧版汉化包进行更新,修复了这个问题,并对一些新版导致的汉化失效同时做了修复。之前发布的V1.6.4版仍然无法连接Axure Share,已进行修正。带来不便敬请谅解!注意:本次汉化更新后Axure RP 8.1的名称汉化由《团队...

    微信热点 2018-03-22
  • 交互设计的进阶三重境

    ✨交互设计师的迷茫作为交互设计师,工作几年之后,如果还处在 “从产品接需求输出线框图” 的循环中,或许就会产生一些迷茫:自己的价值和竞争力在哪里?如何突破,进一步提升自己的能力与话语权?迷茫,是因为无法定位自己,寻不得方向,找不到出路。所以,当我们提问该如何提升时,不妨先想一想,【用户体验设计】这座高塔,究竟是个什么模样,而自己又在什么位置。此文中,我根据自己的一些工作经历和理解,将交互设计师的能力成长分出三个阶段:功能完善者、产品推动...

    2018-02-26
  • 不会Sketch的设计师将要被淘汰!

    这  是 一 本 让 我 废 寝 忘 食 的 书前几天小花闲来无事逛知乎被一篇名为《写一本书出版是怎样一种体验?》的问答吸引了目光,里面有一位作者黄方闻详细的介绍了他的第一本书《动静之美——Sketch移动UI与交互动效设计详解》筹备历程。Sketch这款软件在UI设计上确实有着无可比拟的优势,很多大公司都在用sketch工作,再不会Sketch会被淘汰掉。目前用sketch跟ps的人数比越来越接近了。Sketch因其强大的功能以及极低...

    2018-03-02
  • 交互设计的门类 & 英国综合类院校及艺术院校在如何定义交互设计?

    艺麸大大带你了解英国交互类TOP院校要知道你离名校并不遥远别走神,好好看完哦~随着科技日新月异的发展,让交互设计一时成了“网红专业”,很多学平面设计或视觉传达的童鞋们纷纷转专业到交互设计大本营。然而各大顶尖院校对于交互设计的专业命名也是“五花八门”,如,服务设计、交互设计、用户体验设计等。交互本来就是一个艺术与科技的完美结合,国内很多院校都不能将其做的很突出和优秀,这就导致了出国学习交互设计成为许多人的想法。那么你有多了解交互设计呢?我...

    2018-04-19
  • 交互设计七大定律

    除非有更好的选择,否则就遵从标准。——阿兰·库珀(交互设计之父)1、费茨定律(Fitts’ Law)使用指点设备到达一个目标的时间,与当前设备位置和目标位置的距离(D)和目标大小(S)有关。用数学公式表达为:时间 T = a + b log2(D/S+1)。T指的是:移动设备所需时长;S指的是:目标区域的面积大小。D指的是:设备起始位置和目标位置之间的距离;a、b指的是:经验参数,它们依赖于具体的指点设备的物理特性,以及操作人员和环境等...

    2018-02-03
  • 在007里的用户体验是“爽”还是“不爽”

    有一天在微信上和007社群的班级一位同学聊天,一通天南海北的乱扯后,话题就回到007这个社群上了,因为这段时间我参与007社群的一些活动,对这个话题特别敏感,然而他却流露出对这个社群的很多不满意,我们之间的一段对话让我思考了很久很久。对了,这两天你看了你们小组的信息了吗?小组信息?刚看,不过我最近在考虑要不要直接退出007,感觉没意思,也啥时间整这些了。那你当初为啥参加007啊?没啥,就是觉得应该养成一个写作的习惯以及可以认识一些稍微志...

    2018-04-11
  • Axure RP 8.0软件安装教程及下载地址

    破解文件下载地址在文末,请查看!1.双击AxureRP-Setup.exe安装文件。2.点击Next。3.勾选I Agree,然后点击Next。4.一般是默认安装路径。5.点击Next。6.点击Next。7.等待安装。8.取消勾选!取消勾选!Run Axure RP 8使其处于未选中状态,然后点击Finish。9.在桌面找到Axure RP 8,鼠标右击选择打开。10.点击确定。11.勾选Don’t  show this at star...

    2018-03-27
  • 美国交互设计综合类&艺术类院校申请侧重点有哪些?

    回复【交互】,获得专业老师一对一专业指导随着现今数字智能等高科技的发展,交互设计成为近些年众多艺术留学生的热门首选专业。但热门并不代表很多同学都对交互设计有所了解,比如,根据向汉艺咨询的学生情况分析,90% 的同学都分不清什么是到底什么是交互,只是很表面的认为交互就是各种“APP”、“UI设计”或者VR/AR。实际上,即使国外最顶级的院校,你也找不到一所专门设立“APP”的专业,“UI设计”严格上来说只能算是“平面设计”,而设立VR/A...

    2018-04-13
  • 02案例:用户体验与结婚教练

    02 案例:用户体验与结婚教练来自信息读书00:0017:04用产品经理的视角来看人今天我想讲一个结婚教练的故事。她是我的一个朋友,现在做的工作就是指导30多岁下定决心要结婚的女生,如何能够在一年半之内搞定结婚。她的方法已经帮助了30多个30多岁的女生完成了结婚。这个结婚教练以前是干什么的呢?她以前是一个互联网公司的产品经理。她的这一套结婚的体系内容挺多的,这堂课我想把她最重要的一个环节拿出来分享。这个环节就是如何观察和判断一个人。因为...

    微信热点 2018-03-27