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

相关推荐

  • 如何完美碾压用户体验职位面试 【UXRen译#152】

    作者: Patrick Neeman |  翻译:Shea ,校审:Ariel   当你成功进入了电话面试或者面对面面试的阶段,这就意味着你已经通过了最艰难的考验:你已经具备了在该公司工作的技能。现在要被评估是否具备软实力以及能否…

    交互专题 2017-08-07
  • 怎么策划一个成功的活动——线上篇

    怎么策划一个牛逼哄哄的线上活动?大家都说网络营销火爆,都在搞线上活动,那么,一份完整的线上策划案,应该怎么准备呢?知乎用户柒石二为我们提供了一份可行的回答。 始。 先问度娘: “线上活动是指依托于网络的…

    交互设计 2014-12-13
  • Android 和 iOS:两个系统交互设计的不同之处在哪?

    iOS 和 Android 的设计还有许许多多的不同之处,比如字体、Tab bar 设计、物理键操作方式、编辑模式、APP 体现个性的方式……在设计移动端产品的过程中,设计师们可以更多的去思考两者的异同,并且更多的关注一下 Android 系统独有特性的运用,不仅仅节省了开发成本,同时也更好的为 Android 用户所接受。1dp(Android)=1pt(iOS)
    以48dp@160dpi计算的话
    mdpi 48px (160dpi, 1x) 基础尺寸,已经非常少使用
    hdpi 72px (240dpi, 1.5x)低分辨率
    xhdpi 96px (320dpi, 2x) 同iOS @2x
    xxdpi 144px (480dpi, 3x) 同iOS @3x
    xxxdpi 192px (640dpi, 4x) 更大更高更强的分辨率

    2017-05-06
  • 双11的电商设计风格:5个角度分析天猫视觉页

    天猫官方的双十一预热页面刚刚上线,本文作者就帮大家分析双十一电商设计的流行趋势,包括场景、配色、角度、标题、辅助性元素等。干货+趋势,绝对值得一读!

    2017-05-17
  • 四个小故事 每一个都是“极致用户体验”的用心诠释(上)

    古老的印第安人有个习惯当他们移动得太快的时候会停下脚步,安营扎寨耐心等待自己的灵魂前来追赶而身为现代人的我们在开启一段旅程前最重要的事情莫过于挑选一家“想客户所想”的旅行社只有这样才能安心这次我们透过四个小故事向你娓娓道来为什么说驴妈妈客服是“极致用户体验”的先行者即便是大家族,也“一个都不能少”王女士来自苏州,今年40多岁,她十分看重亲情,每隔一段时间,就会带上全家出国旅游——由于出身于一个大家族,王女士每次在驴妈妈报团,几乎没有少于...

    2018-04-11
  • 不能不说的设计秘密:4个步骤提升交互思维

    良好的用户体验包含很多内容:服务、产品、参与者的感受等等,显然产品功能的强大、界面的美观并不能完全概括体验。体验还包含在产品与用户之间的互动、产品与场景的交互、产品对用户的情绪上的影响等等的细枝末节中。第一阶段回顾:分析商业目标,描述了典型的用户模型、通过故事细化了用户的心理模型和行为模型。第二阶段回顾:交互设计师通过综合分析、发散收敛思维、提炼精化的过程,理清了流程中各个组件的关系,形成完整的产品图景。第三阶段回顾:主界面的打磨,细节体验的关注都是塑造良好体验的方法,好的产品应该让用户感知丰富、情感投入。第四阶段回顾:全面审视设计流程,通过专家评审等方式改进方案,规范总结设计方法。

    2017-05-14
  • 用户体验与故事大王的创新火花

    嗨,亲爱的小伙伴们,2018年4月25日,我们又一同相约创新的周三,每周一次的创新工程实践如期而至。此次见面课主场是北京大学,由黄文彬老师主讲的《用户体验创新》。首先带大家了解一下黄老师。来自北京大学、南开大学、北京科技大学、西安电子科技大学、新疆大学、暨南大学、西北农林科技大学、西安交通大学、南昌大学、东北农业大学、哈尔滨工程大学等全国285所高校、九万六千多名师生共同收看了此次课程直播,其中江苏工程职业技术学院和山东财经大学参加了本...

    2018-04-25
  • 【设计竞赛】2018UIA-霍普杯竞赛开题!扎哈事务所新任掌门人帕特里克 · 舒马赫担任主席

    编者按 :期待已久的2018UIA-霍普杯国际大学生建筑设计竞赛题目新鲜出炉啦!扎哈 · 哈迪德建筑师事务所(ZHA)负责人帕特里克 · 舒马赫担任本次竞赛主席并拟定题目。帕特里克 · 舒马赫Patrik Schumacher扎哈·哈迪德建筑师事务所负责人竞赛主题演变中的建筑Architecture in Transformation竞赛题目城市共生:定制化社区模块Urban Co-living: Customizing Modules...

    2018-02-02
  • 动态与富态

    一、动态:动画表达的设计应用 ”动态“的设计常常能使页面的呈现更加动感,有活力,富有吸引力。具体来说,”动态”的设计在产品应用中常用于以下几种情形: 1.1. 丰富内涵 先试试为这段产品介绍做设计: Dropbox可让…

    2015-10-08
  • 打造一个平台的用户体验,从需求方和供给方入手

    这几年做平台,我一直在思考平台的价值究竟是什么?后来我认识到:满足供需双方的需求,提供超越传统线下方式的用户体验,就是平台的价值。平台圈住的用户并不是它的价值,而是因为这个平台具备价值,所以用户愿意留在这个平台上。

    2017-05-11