【分享】最全界面设计模式、APP和Web交互流程图

这次设计夹的主编-晓黑同学为大家整理了史上最全面的APP和Web交互流程图的标准画法,内容非常的全面。通过结合自己的项目经验,把交互流程图做的更加清晰。在后面,还为大家整理一般的web设计模式及APP设计模式,以便使我们的设计过程更加的高效。

信息架构图对于一个产品起到了至关重要的作用,产品越复杂,信息架构越重要,比如淘宝APP这种体量的产品,信息架构做的是否合理,直接关系着产品的逻辑及运行效率,所以对于产品的信息架构在做创意设计阶段就需要考虑清楚。

▨APP交互流程表达

APP 交互流程图的表达方式,在这里不仅包括界面之间的信息流动连接,还有非常的重要的交互设计说明。我们在平时的设计过程中,一定要养成良好的标注习惯,把所有用户操作的可能性都要考虑清楚才行。

1468371878-3536-20160405231215-57628

1468371880-5308-20160405231216-16715

1468371882-5425-20160405231216-80845

 

1468371882-9593-20160405231216-92023

 

1468371881-1607-20160405231217-72770

 

1468371884-4657-20160405231217-45697

 

1468371885-7056-20160405231217-61946

 

1468371894-4406-20160405231219-53203

1468371887-4585-20160405231220-99772

1468371877-9690-20160405231009-55516

1468371889-1129-20160405231249-53835

 

1468371890-6353-20160405231250-55900

 

1468371894-8249-20160405231250-94424

 

1468371895-6855-20160405231250-96976

 

1468371895-9096-20160405231250-10365

 

1468371896-3958-20160405231251-85844

 

1468371898-7710-20160405231251-111121468371898-4487-20160405231251-392591468371899-6773-20160405231251-807981468371900-8858-20160405231251-19755

 

1468371905-3826-20160405231253-82600

1468371906-1092-20160405231253-885791468371903-6292-20160405231254-31091

1468371908-7107-20160405231353-53456

1468371909-8344-20160405231354-59729

Print

1468371911-8818-20160405231354-22422

 

1468371914-8687-20160405231355-26278

1468371916-4016-20160405231357-31956

1468371917-6012-20160405231357-99390

1468371918-3224-20160405231357-90123

1468371919-1941-20160405231358-44499

 

1468371923-4422-20160405231359-996151468371926-4355-20160405231359-50632

1468371926-8758-20160405231439-156331468371928-7951-20160405231440-71471

 

1468371929-4702-20160405231440-31184

1468371934-3362-20160405231441-11117

Processed with VSCOcam with c3 preset

1468371935-1229-20160405231441-63695

1468371935-8465-20160405231441-15311

1468371937-8087-20160405231444-66118

1468371938-5600-20160405231444-657581468371939-3175-20160405231444-454961468371941-5845-20160405231446-47990

 

1468371942-5913-20160405231446-66109

1468371942-5058-20160405231446-67788

1468372089-8765-20160405231447-811111468371950-5745-20160405231543-75604

1468371948-4929-20160405231544-35617

MDM_UserFLowsMDM_UserFLows1468371954-4601-20160405231545-20980

1468371956-3694-20160405231546-33771

1468371957-4691-20160405231547-20159

 

1468371958-8521-20160405231547-87217

 

1468371959-7733-20160405231547-90867

Web交互流程图表达

对于Web呢,信息架构一般会比APP信息架构要复杂的多,因为Web端能够承载的信息量更大,可兼容的程序更加的复杂,所以对于企业级的网站或者 软件,比如微软的OFFICE办公软件,就是一个非常非常复杂的信息架构图,每一个功能组件的交互逻辑,构成了整体,而且要是每一块的内容协调好,这是相 当的不容易的。

下面这些图,都是我们一般性的交互流程表达,同样的情况,也是需要表达清楚信息流之间的关系,及每一部分信息说明,这个在平时接触项目时就应该养成规范的习惯,绘制交互流程图的时候。

1468371960-3606-20160405231547-99967

1468371960-6744-20160405231548-439391468371962-8843-20160405231548-689361468371964-7886-20160405231550-76003

1468371971-1154-20160405231551-85272

 

1468371966-5918-20160405231552-81147

1468371967-5109-20160405231552-82180

1468371971-2387-20160405231618-45782

1468371973-2691-20160405231618-55195

 

1468371974-8835-20160405231618-36356

 

1468371975-4760-20160405231618-88370

1468371976-1830-20160405231619-99763

1468371978-5972-20160405231619-46455

1468371980-3477-20160405231620-29242

1468371981-9549-20160405231621-109001468371982-3039-20160405231621-550431468371984-3838-20160405231622-32736

1468371986-6851-20160405231622-31857

1468371989-7308-20160405231623-35161

原创文章,作者:Tinadmin,如若转载,请注明出处:https://www.iamue.com/16282/

(0)
TinadminTinadmin
上一篇 2016-07-12 13:30
下一篇 2016-07-14 07:48

相关推荐

  • 三招两式讲需求,看完你们也懂需求了

    美国一家市场研究公司通过分析101家科技创业公司的失败案例,总结出了创业公司失败的20大主要原因,排名首位的就是:No Market Need!据统计42%的失败创业公司出现过这个问题,创始人执着于执行自己的创意,却没有…

    2023-03-03
  • 每个用户体验设计师都要懂的UX移情图

    点击信息与交互设计关注我们!欢迎大家踊跃投稿哦!投稿邮箱:iidc@iidc.org.cnEmpathy,同理心,或者说移情,是UX设计师在为产品进行用户体验设计的时候,最强的能力和工具之一。移情是人类情绪和心智中最重要的功能之一,在很多时候,它是产生情感共鸣和理解的基石,它也是改善用户体验的重要途径。通常我们所说的换位思考,就是移情。借助移情,设计师站在用户的角度来看待问题,了解用户的需求,理解用户的心态,这是改善用户体验的第一步。在...

    2018-02-01
  • 屏幕尺寸越来越多,“首屏为王”还有效么?

    作者:Amy Schade@nngroup,翻译:小球娘   几句话概述:把什么内容放在页面顶部(第一屏的位置)以及把什么内容藏在第一屏位置之后将始终影响用户体验——无论屏幕大小。有平均84%的用户会区别对待页面第一屏内容和…

    交互专题 2017-08-07
  • PC端web管理系统的交互设计规范分享

    前些时间正准备写交互规范,就去网上搜罗了一下交互规范的一些范本,想作为借鉴参考,但却没能找到比较满意的,找到了一些零散的内容(当然有些还是有参考价值的),所以就觉得交互规范这方面的内容比较少,就来此…

    交互设计 2016-10-18
  • 奥斯陆建筑学院国际建造课程招募!| 2018楼纳教育启航

    📌 编辑 | YHz奥斯陆建筑与设计学院(AHO)位于挪威首都奥斯陆,是挪威顶尖的建筑学院,也是挪威研究型大学系统中的自治机构。学院提供建筑与工业设计领域的教育,在建筑教育领域有很大影响力。- 课程背景 -2018年4月,奥斯陆建筑与设计学院(AHO)将首次在中国楼纳开设建造课程——“传统木构节点的数字化演绎”工作坊,将由于2012年在奥斯陆建筑与设计学院成立的Scarcity and Creativity Studio(以下简称“SC...

    2018-03-13
  • 一个产品小白如何理解尼尔森交互原则的?

    上完培训课,又开始投入忙碌工作中,由于目前公司是做汽车后市场服务,并且近期在准备新产品开发事宜,因此每天跟产品经理、研发同事少不了一些探讨。与之前有所不同,现在工作过程中,可能会下意识地用Blues老师讲解的一些知识来思考、理解、验证产品。

    2017-06-01
  • 走进交互设计——感受生活中的交互设计

    交互设计交互设计(英文Interaction Design, 缩写IXD),是定义、设计人造系统的行为的设计领域,它定义了两个或多个互动的个体之间交流的内容和结构,使之互相配合,共同达成某种目的。交互设计努力去创造和建立的…

    2017-08-01
  • web表格设计攻略

    在后台管理系统、数据类产品等的设计中,表格作为一种常见的信息组织整理手段,甚至是web页面的基础设施之一,其重要性不言自明。结合最近做的几个项目和相关设计经验总结,特此整理出这样一篇设计攻略,希望能够对你的设计有所帮助。

    2017-04-28
  • 新版MATERIAL DESIGN 官方动效指南(三)

    新版Material Design 官方动效指南已经翻译到第三章了!今天这部分,从动效的运动和材料形变入手,让你的动效自然真实,贴近现实状态。再系统的干货都比不上官方的动效指南,西瓜就在这,赶紧来捡。

    2017-05-23
  • 立足用户体验 “好换灯”助力雷士赢得好口碑

    2018注定是不平凡之年。全面开展质量提升行动,推进与国际先进水平对标达标,弘扬工匠精神,来一场中国制造的品质革命。2018年,雷士照明将迎来20周年庆典。雷士照明正在以此为契机,潜心修练,以促进雷士品牌再上新台阶。2018年被雷士照明定义为“品质服务提升年”,并于近期在全国开展了“诚信3·15,惠民大行动”为主题的“好换灯”主题推广活动,帮助千家万户升级改造居家光环境,传递雷士照明“全国性升级服务”“免费服务”理念。雷士“好换灯”全国...

    2018-03-16