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

相关推荐

  • 项目文件管理,只需7个文件夹

    作为一名视觉设计师,将文件整理的井然有序是我们必须要具备的能力,如果你现在还没有一个完整的文件管理体系,可以先看看我的!

    2017-04-30
  • 浅谈视觉设计与用户体验的统一

    Dribbble,国内比较追捧的媒体。上面聚集了很多项目的视觉设计图,有的配色很漂亮,有的表现手法很新颖(一定程度上会激发我们灵感的火花),但我们在不了解设计场景、目标的情况下是无法判断出这样的视觉设计是否最终解决了用户的问题。脱离业务场景的设计是没有生命力的更谈不上产品体验、服务体验,只有视觉和体验统一起来才能更好的占有市场,设计才具备了商业价值。

    2017-05-24
  • 腾讯MXD:资讯app为什么都长一个样?

    作者: Celine Wang@腾讯MXD   打开手机,国内的资讯 app 除了品牌 logo 外,几乎都长一个样。就如你敲开不同的门,发现房间不光装修风格一样,还住着品味雷同的主人。是什么造就了它们? 资讯产品的本质是连接内容…

    交互专题 2023-03-03
  • Axure学习笔记:手机APP微信读书原型设计

    最近在学Axure,周末做了个案例练练手,选了腾讯新出的微信读书,主要考虑这是1.0版,所以功能不是那么复杂。做完之后回顾了一下自己的制作过程,既算是做一个总结,也希望能给同样正在学习的新手带来一点帮助。就…

    2016-01-06
  • 交互设计与服务设计视角下,谁才是用户,什么又是产品?

    服务设计,是2017-2018比较火热的一个专业了,相比于交互设计或工业设计,服务设计更关注与利益相关者之间的关系。今年的Aalto New Media 专业的申请中,有明确要求需要根据两篇文章的读后感写一篇Essay(1),其中一篇是“How to Fix Facebook—Before It Fixes Us(2)”,深入阅读之后,有一个明确的观点想和大家分享一下。之前从交互式设计角度或者用户研究角度对于 Facebook 的分析文...

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

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

    2018-04-12
  • 埃森哲设计思维成就价值创新:从“外在美”到“内在美”

    作者:杨鹏(埃森哲数字设计与创新经理);田晖(埃森哲数字咨询服务总监);王曦(原埃森哲数字设计与创新顾问)   领先企业已经认识到,设计不仅仅停留在产品的 “外在美”,而应聚焦在更具商业价值的“内在美”。那…

    交互专题 2017-09-18
  • 符合用户直觉的设计,才能更快地获得用户信任

    UI和交互设计中常常会强调某项设计需要足够的“直觉性”,但是直觉性的设计说来容易,实现却往往差强人意。但是不得不承认,它是目前交互和UI设计的刚需。想象一下,如果桌面上反过来一颗球让你去转动控制,感觉应该比鼠标运作顺畅些。我们原本认为这是个好点子……可是我以前从未观潮这种触感的细节。当孩子们操作鼠标和遥控杆的时候,会不自觉地低头看输入装置……后来有人想到,如果操作时运动肌肉群范围较大,也许他们可以不必低头。我们做了一个大型轨迹球装置,让他们可以用手臂甚至肩膀牵动来操作,这样就把问题解决了。我们先是观察什么样的操作方式比较合乎自然,然后提出想法,再进行测试。心智模型指一个人对于事物运作的思维过程,即一个人对于周遭世界的理解。心智模型的基础是不完整的显示、过去的经验甚至直觉感知。它有助于形成人的动作和行为,影响人在复杂情况下的关注点,并确定人们如何着手解决问题。

    2017-05-15
  • 超级干货:75条界面版式设计准则

    一个好的界面设计应该拥有高转化率且方便用户使用,换句话说:既能达到商业目的又能满足方便易用的要求。 有一个设计咨询公司根据自己的客户案例,总结了 75 个经过实践证明的原则: 1. 使用单栏布局代替多栏布局 …

    2016-07-14
  • 设计只在需要时 —— “暂停”按钮的消失又出现

      很多时候,不好的设计往往是因为思考的不充分或者思考的太多;而好的设计则正是因为它出现的恰到好处,哪怕它可能是在对传统习惯做出的挑战。以下我将通过现实产品中“暂停”按钮的消失又出现来说明这一点。
      对于现实中的声音播放工具,大家应该不陌生吧。录音机、walkman、CD随身听,虽然这是上个世纪甚至上上世纪的名字,但是也不至于让现在沉溺于虚拟世界的人们彻底忘记(90后除外)。我们只是去回味这些古老工具的播放控制按钮,也是能够品味出优良的设计思想的。

    2017-08-04