交互设计——绘制流程图

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

相关推荐

  • 《2017中国设计行业价格报告》——交互设计

    《2017中国设计行业价格报告》——交互设计创意点亮生活设计美好人生创意设计一个有温度有格调的公众号合作、投稿:cda-zj@vip.163.com微信:13777850472微博:@浙江省创意设计协会

    2018-02-14
  • AxureUX电商平台WEB端交互原型模板正式发布

    01作品信息作品名称:AxureUX电商平台WEB端交互原型模板作品类型:模板类发布日期:2018-02-25最新版本:v1.0主要适用:Web端软件版本:Axure 8.0文件大小:13MB作品编号:TEM006作品售价:¥169.00详细介绍及演示:http://www.axureux.com/home/templateswebec.html复制以上链接在浏览器打开或点击文章底部阅读原文,建议在电脑上查看原型演示。02作品介绍本作品...

    2018-03-04
  • 《用户体验要素》读书笔记:要理解为何这样做产品

    《用户体验要素》是一本实用类书,试图回答如何以用户体验为中心进行产品设计。作者通过构建自下而上的五层模型:战略层,范围层,结构层,框架层,表现层;来将以用户体验用户需求为中心的设计方式层次清晰的表达出来。并指出;一开始对战略层的深思熟虑,会帮助我们在整个产品设计中节约大量的时间。作者这本书写于pc时代,大多案例都是网站的建设。但是整个思考产品的思路,直到今天;都没有过时。一、 以用户体验为中心设计产品用户体验是指产品如何与外界发生接触,...

    2018-04-08
  • UED 戊戌狗年第一波招聘已送达!

    14载,我们初心不变,依然要做行业最有力的的发声者。从一张纸到一串电波,媒介在变,我们的眼光始终如一大家都在说AI是未来,然而在这里,我们依然需要你无可代替的头脑。WE ARE HIRING这次招聘我们为什么要做这次公开招聘?信息爆炸,百家争鸣,越是瞬息万变,媒体的价值愈发凸显。我们不会随便说满意,而是希望在诸多嘈杂的背景声中,发出属于新时代建筑媒体人独到的观点,让关于建筑的解读,走进公众的视野;我们希望以全新的面貌去呈现UED对于中国...

    2018-02-28
  • U+敏捷研发体系

    “研发是一项创造性的工作,卓有成效的研发需要优秀的研发团队来完成,优越的研发流程始终能够发现最佳的机遇,推出有竞争力的产品和服务,并以最快的速度把这些研发成果投入市场。”△ △ △ U+敏捷研发体系流程 △ △ △需求分析1研发体系中的第一个环节,这一阶段要求需求分析人员针对待开发软件提供完整、清晰、具体的要求,确定软件必须实现哪些任务。其中包含的敏捷建模,要求需求分析人员对现实问题的抽象想法构画出草图,以规避需求的不合理等问题。原型设...

    2018-03-30
  • 澳洲留学交互设计专业名校有你的菜吗?

    出国留学,去往澳洲留学,澳洲留学交互设计专业名校有你的菜吗?一、澳洲留学交互设计专业的就业前景交互设计师在一些公司的职位列表中通常又被称为用户界面设计师、可用性设计师、用户体验设计师等。例如在淘宝ued团队内部把交互设计师的岗位命名为交互设计工程师,这意味着交互设计师职业定位朝着一专多能的复合型人才方向发展。交互设计的学生在中国的就业领域一般是:大型外企、通讯类企业、手机设计公司、专业的设计公司等。二、开设交互设计专业的澳洲名校1莫纳什...

    2018-04-24
  • 掌握交互设计思想,从用户视觉心理开始

    什么是交互设计师?在刚刚开始研究交互的时候,我也经常问自己:什么是交互设计师?这两年“用户体验”这个词非常火,以前在技术沟通中经常生硬的用“用户体验”这个词来说服技术,难免有些空洞。其实用户体验不止于产品的交互设计有关,还包含产品的内容和服务、表现形式,大部分情况下产品的内容和服务才是整个用户体验的核心。而我所理解的交互设计就是把表现形式、内容和用户行为相互协调的一门学问,是影响用户体验的关键因素之一。另外,按国内就业情况来看,目前交互...

    2018-04-26
  • 抖音|如何提升广告的用户体验

    最近发现越来越多的人开始分析抖音这款产品。小编接触抖音时间也蛮久了,到现在成为年轻人的标配。今天小编就来跟你唠唠抖音那些事儿。douyin抖音·  正·  文·  来·  啦·从产品的冷启动,到现在的野蛮成长期,抖音这款产品变化不得不说变化很大,当时的抖音很纯净,并没有什么广告,当然这也是符合产品生命周期的特性。以前的抖音技术流占据了大部分江山,如今的抖音变成了生活小百科,网红商品的发源地,产品内容标准也在随着产品所处的阶段在变化。如今...

    2018-05-05
  • Axure产品原型在手机上运行的完整教程

    图1 模拟丁香园的高保真原型在一般的开发工作之前,我们通常会设计产品原型,大部分为axure绘制的线框图作为产品的PRD文档,供UI和开发进行前期工作,但是有的时候客户、领导想在开发之前,看到产品的概貌,就必须做产品的高保真原型进行模拟,这时如果做出来的原型能运行在手机端,那再好不过,如图1(注:上图是仿照丁香园的家庭用药,做的一个高保真原型,算是免费给丁香园打广告,是不是考虑给我点广告费?哈哈)。原型制作软件有挺多,不过个人使用之后,...

    2018-03-06
  • SKD独家 | 英国交互设计排名

    同学们自从上次🇺🇸美国交互设计的排名一出打算去英国🇬🇧的小伙伴纷纷表示出英国版的排名👌先以交互的分类来划分一下英国的院校:以HCI为主,偏技术研发的院校有:伦敦大学学院(UCL)Human Computer Interaction(Msc)巴斯大学(Bath)Human Computer Interaction(Msc)以UX为主,偏交互装置、技术应用院校有:伦敦传媒学院(LCC)Interaction Design Communica...

    2018-04-17