沉浸式Web初体验
沉浸就是让人专注在当前的情境下感到愉悦和满足,而忘记真实世界的情境。心流理论能有力解释人们废寝忘食地投入一件事情的状态。
心流理论的核心就是说当人的技能与挑战最佳匹配时能达到心流状态。比如玩一个游戏,如果游戏太难,游戏者会感到焦虑;如果游戏太容易,游戏者会感到无聊;当游戏者觉得有能力挑战游戏时,才会投入地玩游戏。
通过怎样的方式才能达到沉浸式体验呢?一个是通过感官体验,比如座过山车,一个是通过认知体验,比如玩游戏,而同时包含丰富感官、认知体验时就极有可能创造最佳的心流状态。
当用户会花较长时间并集中绝大部分注意力去与产品进行交互时,可以使用沉浸式设计。
在Web设计中,如何达到沉浸效果呢?来看几个例子:
以上,在页面加载的时候,在内容或菜单切换之际都用了动画,让用户对网页有所期待,感到有趣。当然,动画效果还可以用来提示用户,显示重要信息,实现菜单效果,以及实现鼠标滚动效果,等等。

http://www.psd2html.com/10-years-in-review/
以上,通过鼠标的滚动逐步展示该公司10年来的数据。
我想,在将来,这种互动式的、沉浸式的Web会越来越多。
沉浸式Web初体验的更多相关文章
- 第59讲:Scala中隐式转换初体验
今天学习了下隐式转换的内容.所谓隐式转换,就是说,一个实例拥用1 2 3方法,但是当它需要4方法的时候,它没有,但是却可以通过转换成另一种类型来调用4方法,而且这种转换是自动转换不需要人为干预的,这种 ...
- 移动web初体验
1.可视宽度.物理宽度.虚拟宽度,通常自适应都是可视宽度满屏.即设置meta <meta name="viewport" content="width=device ...
- Spring AOP基础概念及自定义注解式AOP初体验
对AOP的理解开始是抽象的,看到切点的匹配方式其实与正则表达式性质大致一样就基本了解AOP是基本是个什么作用了.只是整个概念更抽象,需要具化理解.下图列表是AOP相关概念解释,可能也比较抽象^_^ 比 ...
- Android UI体验之全屏沉浸式透明状态栏效果
前言: Android 4.4之后谷歌提供了沉浸式全屏体验, 在沉浸式全屏模式下, 状态栏. 虚拟按键动态隐藏, 应用可以使用完整的屏幕空间, 按照 Google 的说法, 给用户一种 身临其境 的体 ...
- Android 沉浸式全屏
Android 4.4 带来了沉浸式全屏体验, 在沉浸式全屏模式下, 状态栏. 虚拟按键动态隐藏, 应用可 以使用完整的屏幕空间, 按照 Google 的说法, 给用户一种 “身临其境” 的体验. A ...
- 第六章 大数据,6.3 突破传统,4k大屏的沉浸式体验(作者: 彦川、小丛)
6.3 突破传统,4k大屏的沉浸式体验 前言 能够在 4K 的页面上表演,对设计师和前端开发来说,即是机会也是挑战,我们可以有更大的空间设计宏观的场景,炫酷的转场,让观众感受影院式视觉体验,但是,又必 ...
- Android隐藏状态栏实现沉浸式体验
转自: Android状态栏微技巧,带你真正理解沉浸式模式 什么叫沉浸式? 根据百度百科上的定义,沉浸式就是要给用户提供完全沉浸的体验,使用户有一种置身于虚拟世界之中的感觉. 那么对应到Android ...
- Android如何实现超级棒的沉浸式体验
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由brzhang发表于云+社区专栏 做APP开发的过程中,有很多时候,我们需要实现类似于下面这种沉浸式的体验. 沉浸式体验 一开始接触的 ...
- MEF 插件式开发之 DotNetCore 初体验
背景叙述 在传统的基于 .Net Framework 框架下进行的 MEF 开发,大多是使用 MEF 1,对应的命名空间是 System.ComponentModel.Composition.在 Do ...
随机推荐
- 基于Consul的数据库高可用架构【转】
几个月没有更新博客了,已经长草了,特意来除草.本次主要分享如何利用consul来实现redis以及mysql的高可用.以前的公司mysql是单机单实例,高可用MHA加vip就能搞定,新公司mysql是 ...
- 大数据的常用算法(分类、回归分析、聚类、关联规则、神经网络方法、web数据挖掘)
在大数据时代,数据挖掘是最关键的工作.大数据的挖掘是从海量.不完全的.有噪声的.模糊的.随机的大型数据库中发现隐含在其中有价值的.潜在有用的信息和知识的过程,也是一种决策支持过程.其主要基于人工智能, ...
- idea项目左边栏只能看到文件看不到项目结构
1.点击file->project structure..->Modules 点击右上角+加号 ->import Modules 2.选择你的项目,点击确定 3.在如下页面选择imp ...
- 浅谈SpringMVC
M--模型(实体vo[视图对象]与页面对面) V--视图(JSP,,velocity,FreeMarker,html,thymeleaf) C--控制器(servlet,if语句控制M数据跳转到V进行 ...
- 第一届CCF软件能力认证
1.相反数 问题描述 有 N 个非零且各不相同的整数.请你编一个程序求出它们中有多少对相反数(a 和 -a 为一对相反数). 输入格式 第一行包含一个正整数 N.(1 ≤ N ≤ 500). 第二行为 ...
- hdu 2519 求组合数
求组合数 如果求C5 3 就是5*4*3/3*2*1 也就是(5/3)*(4/2)*(3/1) Sample Input5 //T3 2 //C3 25 34 43 68 0 Sample Outpu ...
- Eclipse导入Android项目的方法(转)
原文:http://www.cnblogs.com/SkyD/archive/2010/11/25/1887219.html 看网上流传的Eclipse导入项目的方法都是在新建Android程序时使用 ...
- 记2013年度成都MVP社区巡讲
上个周六在天府软件园A区的翼起来咖啡举行了MVP社区巡讲成都站的活动,这个巡讲活动去年也搞过一次. MVP社区巡讲是 @微软中国MVP项目组 支持的,由各地的MVP担任讲师,给本地技术社区提供的一种社 ...
- Spark streaming的正确使用。。
转自http://bit1129.iteye.com/blog/2198531 代码如下: package spark.examples.streaming import java.sql.{Prep ...
- 深刻理解this的指向和var 定义的变量的问题
一般来说,在编程语言里我们常见的变量作用域就是词法作用域与动态作用域(Dynamic Scope),绝大部分的编程语言都是使用的词法作用域.词法作用域注重的是所谓的Write-Time,即编程时的上下 ...
