沉浸就是让人专注在当前的情境下感到愉悦和满足,而忘记真实世界的情境。心流理论能有力解释人们废寝忘食地投入一件事情的状态。

心流理论的核心就是说当人的技能与挑战最佳匹配时能达到心流状态。比如玩一个游戏,如果游戏太难,游戏者会感到焦虑;如果游戏太容易,游戏者会感到无聊;当游戏者觉得有能力挑战游戏时,才会投入地玩游戏。

通过怎样的方式才能达到沉浸式体验呢?一个是通过感官体验,比如座过山车,一个是通过认知体验,比如玩游戏,而同时包含丰富感官、认知体验时就极有可能创造最佳的心流状态。

当用户会花较长时间并集中绝大部分注意力去与产品进行交互时,可以使用沉浸式设计。

在Web设计中,如何达到沉浸效果呢?来看几个例子:


http://gaetanpautler.com/

以上,在页面加载的时候,在内容或菜单切换之际都用了动画,让用户对网页有所期待,感到有趣。当然,动画效果还可以用来提示用户,显示重要信息,实现菜单效果,以及实现鼠标滚动效果,等等。


http://www.psd2html.com/10-years-in-review/

以上,通过鼠标的滚动逐步展示该公司10年来的数据。

我想,在将来,这种互动式的、沉浸式的Web会越来越多。

沉浸式Web初体验的更多相关文章

  1. 第59讲:Scala中隐式转换初体验

    今天学习了下隐式转换的内容.所谓隐式转换,就是说,一个实例拥用1 2 3方法,但是当它需要4方法的时候,它没有,但是却可以通过转换成另一种类型来调用4方法,而且这种转换是自动转换不需要人为干预的,这种 ...

  2. 移动web初体验

    1.可视宽度.物理宽度.虚拟宽度,通常自适应都是可视宽度满屏.即设置meta <meta name="viewport" content="width=device ...

  3. Spring AOP基础概念及自定义注解式AOP初体验

    对AOP的理解开始是抽象的,看到切点的匹配方式其实与正则表达式性质大致一样就基本了解AOP是基本是个什么作用了.只是整个概念更抽象,需要具化理解.下图列表是AOP相关概念解释,可能也比较抽象^_^ 比 ...

  4. Android UI体验之全屏沉浸式透明状态栏效果

    前言: Android 4.4之后谷歌提供了沉浸式全屏体验, 在沉浸式全屏模式下, 状态栏. 虚拟按键动态隐藏, 应用可以使用完整的屏幕空间, 按照 Google 的说法, 给用户一种 身临其境 的体 ...

  5. Android 沉浸式全屏

    Android 4.4 带来了沉浸式全屏体验, 在沉浸式全屏模式下, 状态栏. 虚拟按键动态隐藏, 应用可 以使用完整的屏幕空间, 按照 Google 的说法, 给用户一种 “身临其境” 的体验. A ...

  6. 第六章 大数据,6.3 突破传统,4k大屏的沉浸式体验(作者: 彦川、小丛)

    6.3 突破传统,4k大屏的沉浸式体验 前言 能够在 4K 的页面上表演,对设计师和前端开发来说,即是机会也是挑战,我们可以有更大的空间设计宏观的场景,炫酷的转场,让观众感受影院式视觉体验,但是,又必 ...

  7. Android隐藏状态栏实现沉浸式体验

    转自: Android状态栏微技巧,带你真正理解沉浸式模式 什么叫沉浸式? 根据百度百科上的定义,沉浸式就是要给用户提供完全沉浸的体验,使用户有一种置身于虚拟世界之中的感觉. 那么对应到Android ...

  8. Android如何实现超级棒的沉浸式体验

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由brzhang发表于云+社区专栏 做APP开发的过程中,有很多时候,我们需要实现类似于下面这种沉浸式的体验. 沉浸式体验 一开始接触的 ...

  9. MEF 插件式开发之 DotNetCore 初体验

    背景叙述 在传统的基于 .Net Framework 框架下进行的 MEF 开发,大多是使用 MEF 1,对应的命名空间是 System.ComponentModel.Composition.在 Do ...

随机推荐

  1. 采用MiniProfiler监控EF与.NET MVC项目(Entity Framework 延伸系列1)(转)

    前言 Entity Framework 延伸系列目录 今天来说说EF与MVC项目的性能检测和监控 首先,先介绍一下今天我们使用的工具吧. MiniProfiler~ 这个东西的介绍如下: MVC Mi ...

  2. 使用nginx统一代理dashboard,grafana,Prometheus二级目录访问

    k8s上的这些管理工具必不可少,可以统一在nginx下的二级目录下. ingress是好,但我们不方便使用内部域名,相信么...:) 一,prometheus改造 在prometheus的deploy ...

  3. 什么叫“回归”——“回归”名词的由来&&回归与拟合、分类的区别 && 回归分析

    http://blog.csdn.net/denghecsdn/article/details/77334160

  4. web程序快速开发

    关于web程序快速开发个人见解以及经历 由于在之前公司业务的发展,需要在基于核心业务的基础上开发其他较为独立的业务系统,所以就有了这个基于Dapper,DDD概念的基础框架,由于个人基于这个框架已经经 ...

  5. Codeforces Round #257 (Div. 1) D - Jzzhu and Numbers 容斥原理 + SOS dp

    D - Jzzhu and Numbers 这个容斥没想出来... 我好菜啊.. f[ S ] 表示若干个数 & 的值 & S == S得 方案数, 然后用这个去容斥. 求f[ S ] ...

  6. 日志收集框架flume的安装及简单使用

    flume介绍 Flume是一个分布式.可靠.和高可用的海量日志采集.聚合和传输的系统. Flume可以采集文件,socket数据包等各种形式源数据,又可以将采集到的数据输出到HDFS.hbase.h ...

  7. C语言结构体在内存中的存储情况探究------内存对齐

    条件(先看一下各个基本类型都占几个字节): void size_(){ printf("char类型:%d\n", sizeof(char)); printf("int类 ...

  8. 016.Zabbix聚合监控

    一 Zabbix监控机汇总计算 用Calcuated Items可以对Items进行汇总计算,如求磁盘总容量.网络流量,只依赖于Zabbix-Server,与Zabbix-Agent和proxy无关. ...

  9. VScode 光标乱跳

    JS-CS_html formatter 卸载这个插件 如果没有,或者卸载跟这个类似的,如果还是没有就忽略这个 如果设置过自动保存 在配置上修改为 "files.autoSaveDelay& ...

  10. vue-video-player的使用总结

    由于公司的项目是网上教育的,像网易云课堂那种教育网站,因而会有很多课程需要在线观看的,所以视频插件是必不可少的. 由于我用vue开发项目,所以找视频插件也找和vue贴近的.最后选择了vue-video ...