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

相关推荐

  • loading做成什么样子,我才会等!

    文/Seven 来源/数英网 毫无疑问,每个人都不喜欢等待。尤其是在浏览自己喜欢的页面或电影时,对着千篇一律、毫无新意的加载页面,简直枯燥乏味无聊极了! 实际上,有研究表明,普通用户能够忍受的最长的加载页面的…

    2016-04-21
  • 一次关于梦想、音乐和代码的交互设计体验

    ▲ Arcade Fire··[Way to Go] 这是树林里的一次漫步, 这是一次惊人的互动体验。 一个不安分的全景, 一次手工制作动画, 用360度视频(精选)拍摄, 混合着音乐、梦想、还有…

    2017-08-02
  • Axure优雅装逼指南:开启原型高颜值形态

    作者寄语 / 一直想写的Axure小技巧分享,终于动手写了。望能对亲有所帮助,文笔粗糙请谅解。内容目录:啥是高保真原型?简单说明原型Axure可以画出什么水准的高保真?给示例,开启装逼模式特殊的技巧:核心内功:目标清晰/理解设计规范画图习惯:像素对齐/用浅色/上素材啥时候上高保真?:适用场景 and 不适用场景啥是高保真原型?啥是原型,从事互联网研发体系的同学,肯定非常熟悉,特别是产品岗同学。如果不是,那如下简单讲原型和高保真原型的:原...

    2018-04-28
  • 译文推荐:设计并非艺术

    “设计并非艺术”的观点让我有些困惑,与我一直以来的认知有些不同。我确实认同艺术是独立于现实目的而存在的创意表达方式,而另一方面,设计虽然有着明确的现实目标,但它不同样也是创意的展示形式吗?我目前很难完全认同你的观点,希望进行更多交流。

    2017-05-27
  • Microsoft将向合作伙伴开放 Windows Holographic,官方放出的宣传片

    Microsoft将向合作伙伴开放 Windows Holographic,以下为官方放出的宣传片,巨硬爸爸一出手果然不同凡响。 【微软向合作伙伴开放 Windows Holographic,打造混合现实新时代】魔术师妙手生花,孙悟空腾云日行万里,…

    2016-06-03
  • 交互设计的未来

    数十万互联网从业者的共同关注!译者:小媛作者:Terry Cao ,发表于DESIGN & DEV译文地址:http://www.jianshu.com/p/daaa353e6d95译者授权早读课发表,转载请联系译者。欢迎投稿到早读课,投稿邮箱:mm@zaodu…

    2017-08-04
  • UX案例学习:HubSpot如何重新设计他们的主页

    这个故事就是一个设计师如何集中研究,协作,坚持以用户为核心为底线,安排一份紧凑的时间规划。

    2016-08-24
  • 阿里设计师分享:UX设计心理套路

    在阿里巴巴国际站,我们对心理学理论进行了客观的数据验证,把科学理论应用至前线设计,提升设计效益。我们沉淀及过滤出一些行之有效的方法及案例与同业共享,希望普惠更多设计师能活化科学理论,共享知识协同促进中国设计走出去。

    2017-05-02
  • 交互设计师,如何建立自己的知识体系?

    高中毕业,我们完成了基础知识的学习。后续要掌握新技能或新知识,主要途径便是自学。每个人自学能力千差万别,这决定了一个人的成长与发展的天花板。

    2017-05-16
  • Sketch book 各种材质产品手绘表现-别人家的手绘本,拿走、收藏... [更新]

    ▲点击关注最不可思议干货今天给大家共享一波Sketch book 各种材质产品手绘表现...拿走、收藏...手绘飙车活动进行时,点击按钮加入...手绘零基础▼点击看>此方法,让零基础小伙伴们透视准确率达到98%...津美优设2017暑期1期课程|格物造型.第5天: 线稿基础-借体推敲Ⅱ点击看>此方法,让零基础小伙伴们形态推演能力爆棚!造型推敲、设计发散!津美优设2017暑期1期课程|格物造型课程.第6天:借体推敲Ⅲ点击看>此方法让零基础...

    2018-03-23