【分享】最全界面设计模式、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

相关推荐

  • 基于Axure的移动端APP产品设计规范

    文章结构:① 全局元素与控件设计规范 ② 全局注释规范 ③ 一些基本的产品设计原则一、全局控件元素设计规范我们经常会看到很多产品都有一个标志颜色,来增加产品的辨识度,例如淘宝的橙色,小黄车的黄色等。在产品设计过程中,为了保持视觉的统一性,通常会有一套配色方案,配色方案确定了产品的主色调和辅色调,所有的控件和元素都应用这一套配色来设计。除了配色还有,还有字体元素,按钮元素,以及其他控件元素等,产品设计开始就应该定义好这些基本规范,不仅能保...

    2018-03-04
  • 基于任务的导航设计

    对于不同平台导航的交互形式与视觉样式,相信有不少的文章来介绍与总结。本文所介绍的是关于导航规划思路。一个比较小众的领域,基于任务的导航(Task based Navigation)。 目前产品主要使用基于对象的导航和基于…

    2015-11-03
  • 场景是如何应用到交互设计的?

    我想在互联网领域,大家对“场景”这个概念并不陌生,但组成场景的关键因素有哪些?场景是如何应用到交互设计的?在工作之余,整理下相关知识,相信对大家的产品日常工作有一定的帮助,感谢大家抽出时间阅读,欢迎批评指正。1.场景的基本概念场景是指用户在一定的时间、地点等特定的情景下为了满足某种需求而触发的使用某种方法解决需求的行动画面。其关键因素包括用户、情景、需求、方法。产品的应用场景就是用户使用产品来解决需求的实际应用场景,比如上班族小张在午餐...

    2018-03-02
  • 设计新趋势!超越扁平化设计的「化繁为简」有哪些亮点?

    我们在这个“极简主义”的世界生活已经有些时日了,之后又将去向何方?

    2016-07-18
  • 【笔记】北美大公司里做UX Designer是啥体验?(附视频)

      UXRen北美社区成立至今,旨在聚集华人UX设计师群体,为提供大家一个交流的平台。此外,我们希望大家也能够能线下碰面、聊天、互相认识,分享彼此的UX设计宝贵经验。   本期撰文/Leecy 会议记录/陈若涵 整理/Leecy…

    交互专题 2017-08-07
  • 机器学习相关——协同过滤,探索推荐引擎内部的秘密,第 3 部分: 深入推荐引擎相关算法 - 聚类

    机器学习相关——协同过滤,探索推荐引擎内部的秘密,第 3 部分: 深入推荐引擎相关算法 - 聚类 智能推荐大都基于海量数据的计算和处理,然而我们发现在海量数据上高效的运行协同过滤算法以及其他推荐策略这样高复杂的…

    2015-12-22
  • 设计师进阶:从UED向UXD转型

    UXD(User experience designer)概念为何在当下越来越热?这个新Title对设计师意味着什么?UXD对设计师提出了怎样的新要求,设计师们又如何去转型UXD呢?在设计师转型UXD的背景下,还需要讲求专业精深吗?纯视觉设计师VD(Visual designer)又有怎样的发展路径?

    三位阿里巴巴UED掌门人分别从自身视角对设计师转型UXD进行了解析。

    2017-05-12
  • 用Axure水平菜单做导航菜单原型

    哈喽,"梯子"们好,这么多天都没有更新过Axure的教程了,理由如果是"沉迷吃鸡,无心做教程"未免也太勉强了,额......这个理由好像并不勉强啊,其实就是休息了一段时间。 好了,下面就来介绍一下这几天收集的比较多的"A技",额......Axure的技巧在浏览网页的时候,我们会经常性的点击或者鼠标悬停在"总有一款适合你"的顶部选项,这个就是顶部导航菜单。有的"梯子"就直接从元件库中拖拽一个"矩形"或者"文本标签"直接使用,如下图:其实...

    2018-03-16
  • 18清美考研交叉学科交互设计高分学员黎娜经验分享

    Dream Big,Work Hard黎娜本科广州美术学院  工业设计我的一些基本情况:我本科毕业于广州美术学院工业产品设计系。大学期间由服装设计转为产品设计,产品设计主要是偏向于生活家居类小产品。我大概是在去年快毕业的那段时间第一次从考研的同学那里了解到“信息艺术设计交叉学科”,2018年6月底就决定报考这个专业。7月到10月:7月刚刚来北京备考时的状态大概处于仅仅很想考“信息艺术设计”这个专业,但是根本不知道考试内容是什么,更不用说...

    2018-04-17
  • Axure软件实现登录界面交互小教程

    先上效果图先首先在Axure里面布局好登录页面以及登录成功的页面(也就是红色的那个页面),在布局的过程中请输入账号以及请输入密码两个元件选择使用文本框元件。并编组好整个登录成功页。在布局好界面之后选中请输入账号的元件进行命,请输入密码的文本框也是一样的需要进行命名如图,将登陆成功页面进行编组命名,并且进行隐藏。然后选中账号输入框进行用例设置,选择获取焦点用例进行设置,选择用例动作中的设置文本如图步骤所示进行设置。同样的针对密码输入框进行...

    2018-04-07