佳宸学习和分享笔记的地方

0%

小程序 '冥想歇息' 介绍文档

小程序 ‘冥想歇息’ 介绍文档

—宸薇敏团队

简介:本程序想推广,用短暂休息和冥想来补充精神和提升学习工作效率。

1.产品定位

(1)需求分析

​ 人们在工作学习过程中,往往忽视了休息,大部分人只关注当时的任务。长时间的工作后会感到疲惫,如果闷头继续,往往会使效率下降,产生厌倦感。

​ 通过网络调查问卷调查发现,有工作和学习任务的人中80%的没有有意识地休息。心理学研究人们无法集中精力太长时间,平均全神关注一个事物15分钟,普通工作两小时,效率就会直线下降。

​ 所以,我们想设计一个小程序,来改善工作学习效率,提高生活质量。当工作累了,打开小程序,完成短暂休息,继续工作,事半功倍。

(2)产品方案

​ 有了目标我们就要努力,但是那些好胜心强的人看起来似乎一点也不快乐。如果用一个小时或一个半小时的时间来专注做一件事,然后用15分钟左右来放松,恢复,可以是冥想也可以听音乐,健身。将时间分割成小块,我们也更容易获得成就感。维持生活的灵活性。聚焦工作,聚焦修整。

哈弗幸福公开课中,TalBen Shahar说到了保持高效工作与幸福生活最好地方法,其中注意到两点:

​ 1.冥想

​ 冥想跟自控力有着千丝万缕的联系。通过冥想提升自控力,也可以通过平时对自控力的训练提升冥想的效率。冥想是管理我们思维的一种方法,当我们在做冥想练习时,看似什么也没做,其实我们大脑的某些构造已经因为冥想而产生了变化,我们思维模式,觉知及感受也相应的产生了变化。

​ 冥想在美国已经被广泛运用到心理治疗中,特别是针对由创伤所引发的心理健康疾病,其中包括最为大家所熟悉的创伤后应激障碍(PTSD)。同时,冥想在治疗焦虑,抑郁,成瘾,强迫及冲动控制领域也有显著疗效。美国老兵协会近年来开始在老兵创伤治疗中加入冥想练习,多项研究结果显示冥想起到了大大减少创伤后应激障的多项相关病征。美国一些大型的创伤治疗研究中心也开始为心理治疗师开设针对创伤的冥想培训项目,以便为患者带来更多选择 (Steinberg & Eisner, 2015)

​ Bruce Perry指出对这部分的神经系统提供重复性和有节奏的活动,都可以治疗和加强其功能。一些重复的,有节奏的体感活动包或舞蹈,呼吸,冥想,瑜伽等。这些活动可以大大减少焦虑,冲动,和其他由创伤带来的症状(Waechter, & Wekerle 2014)。

​ 此外,有研究证明,连续8周练习冥想的正常人,其杏仁核的脑细胞体积明显变小,从而恐惧,压力,焦虑等也大大减缓;其海马体皮层厚度会增加,从而学习能力,记忆,创造力也相应增加 (Holzel, Carmody, Vangel, Congleton, Yerramsetti, Gard,& Lazar,2011)

​ 2.短暂睡眠

​ 休息可以分很多形式,其中睡眠是最重要的投资。人们对于尚未处理完的事情,比已处理完的事情印象更加深刻。而睡眠是一个固化记忆的过程,往往思路不清的问题,大脑会在睡眠中处理。

​ 既然冥想和短时睡眠好处这么多,我们决定通过计时,记录来做这主要的两个功能。

​ 1.计时可以让用户感受时间流逝,延长心理时间,让用户专注于休息,而不是靠看碎片化信息,没有休息好,又消耗了时间。

​ 2.记录可以让用户了解最近休息情况,多次的休息记录让用户产生成就感。

​ 通过小程序即开即用的形式,当用户感到疲劳,即可使用冥想歇息,专注休息。调查问卷中,72%的用户休息是无意识的而且是玩手机刷抖音,微博。这样子使他们休息是无效的,而且大脑充斥大量无用刺激信息,进而影响接下来的专心工作学习。时间充裕的人往往能获得更多幸福感。请闭起眼睛,可以全神贯注地听喜欢的音乐,可以专注深呼吸。有时候,休息过程中会突现惊人的创造力。化学家门捷列夫试图寻找元素间的规律和统一,苦苦思寻,找不到答案,他在梦中梦见自己还在继续工作,仿佛自己梦见了元素周期表,醒来画下来这张表居然是完美的。

​ 心理学研究,物理时间是有限的,当专注于感受当下后,心理时间可以无限延长。歇息和冥想是一种很好的感受当下的方式。当代,手机与信息充斥着我们的脑子,很多人没有静下心来感受自己,放松休息了。所以我们仅仅是一个小程序,而是想推广一种健康,效率的生活方式。

2.交互设计

我们团队这一次小程序的整体色调选择的是粉色到灰色的渐变。因为我们小程序的主题是关于睡眠与冥想,这种渐变的颜色是让人心情放松,安抚情绪。粉色也是女性最喜欢的颜色。在粉红色的环境中小睡一会儿,能使人感到肌肉软弱 无力 ,而在蓝色中停留几秒钟,即可恢复。有人提出粉红色影响心理和生理的作用机制是:粉红色光刺激通过眼睛—大脑皮层—下丘脑—松果腺和脑垂体—肾上腺,使肾上腺髓质分泌 肾上腺素 减少,使得 心脏 活动舒缩变慢,肌肉放松。

利用渐变色椭圆层叠,位移制造出层次感,分离上下两块层区域。

backTop

其图标我裁剪植物类型然后染出渐变主题色,植物也能让人心情舒适平静。图案非常简洁,简单与文艺风格,整体色调是蓝紫渐变色图标与上方背景相呼应。![img](file:///C:\Users\吴佳宸\Documents\Tencent Files\2249038142\Image\Group\Image14\JZHJ943{XGT767_RC~Y6K58.jpg)

简约风格,音乐背景图片可以左右滑动切换,当睡眠倒数时间开始后,圆周随时间变化蓝色呼吸灯缓慢缩放,使用户跟随呼吸灯的节奏,平静深呼吸。![img](file:///C:\Users\吴佳宸\Documents\Tencent Files\2249038142\Image\Group\Image14\AETBF1]RZX3CSO%{[S}4M`Q.jpg)

睡眠记录,冥想使用了![Green think](C:\Users\吴佳宸\AppData\Roaming\Typora\draftsRecover\Green think.png)灯泡图标表示思考到了什么,而睡眠部分使用的床左边灰色记录日期,右边黑色大字体记录时间。

1559064901953

3.技术方案

(1)程序框架图

1559047200524

说明:总体为两个功能,冥想和睡眠 。其中的主要组件,计时组件。

(2)前端技术方案

  • 技术选型:采用原生WXML,WXSS,JavaScript。

  • 开发环境:使用微信原生框架,微信开发者工具,VS Code编辑器。

  • 开发重难点:

    计时器组件

    1. 当时才学完es6还不了解设计模式,从小程序中了解到MVVM的一些思想,其核心是一个响应的数据绑定系统。整个系统分为两块:视图层(View) 和 逻辑层(App Service)。
      这种模式可以让数据与视图保持同步非常简单。当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新。当睡眠时采用正计时,冥想时使用倒计时,两个页面复用一个组件。需要通过数据绑定的方式,页面传入逻辑层实现正倒计时。睡眠计时器从首页直接传入四个不同的时间。后台统计算的时间,也实时传入视图层。我们设了4个不同的睡眠时间,首页点击直接开始,减少用户操作步骤,操作的简单性,使用户快速进入休息状态,即开即用。

    2. 环形进度框,计时组件睡眠,团队讨论其时间大于一分钟时把秒数隐去,这样使用户专心于睡眠而不是看时间,为此我们加入了环形进度条来查看睡眠进度。

      而普通的CSS没有圆形进度条,最后我想出一个解决办法,设俩个半圆,另一半遮住,这样当JS控制其旋转时,多余部分旋转隐藏,当总设定小于一半时间时,左边角度设为135度全部遮住,右边部分开始旋转。

    3. 滑动时会有不同的背景和音乐,调用滑动函数,音乐的url地址变换从而切换背景音乐,当时理所当然用了wx.BackgroundAudioManager()接口,而他的属性tring src:默认为空字符串,当设置了新的 src 时,会自动开始播放。当时为了解决自动播放的问题,让他获取到url后立即暂停pause()方法,可这个方法在滑动swiper时pause()方法不奏效,冥思苦想后,再看官方文档 wx.createInnerAudioContext()接口完美地解决了这个问题。

    4. 在睡眠倒计时中,如果用户没睡到设定的时间,会有一个确认弹窗,如果点返回会继续睡眠,自动调用开始函数。可这个函数的数据还是初始数据,这时候需要把数据重新覆盖,覆盖之后出现了问题,时间与圆形倒进度开始紊乱,逐一排查发现进度条是按重新覆盖的数据来减的,我们设减的刻度是360/总的时间,导入函数的总时间被覆盖,所以我在pageLifetimes: show函数中,赋一个变量把初始时间存放其中,这样原始数据不会被新数据干扰。

      (3)后端技术方案

      本次我们小组开发的是一个小歇息的小程序,因为主要以控制时间、良好睡眠为主。这次小程序的后台开发环境用的是PHP,用的是thinkphp框架设计的api,搭配的是MySQL数据库,为了保证良好的性能,服务器选择的是Nginx。

      本次技术设计的首页设置了定位获取用户的天气预报。获取了百度天气的api接口,由经历前台传输用户的经纬度信息,传递给服务器端,获取用户的当地天气的信息,在传递给客户端,使客户端完成对前端首页的渲染。

      其中对用户的一些基本信息也存储在数据库中,用户的信息主要用过调用微信的接口,通过微信为个人用户设计的code码,让小程序端传递code码来获取用户独有的openid。在后台为了保证用户的个人信息安全和用户体验,后台对用户的openid进行了加密和封装,使用户生成了一个唯一对应的token令牌,并把token令牌存储在数据库中,而不存储openid,保证了用户信息的安全。同时为了用户的加载体验,后台把用户的token和一些不涉及用户安全的信息存储在缓存中,以此来加快用户的二次访问速度。

      小程序的首页的四个一键小睡和冥想,是由用户点击使用之后,由客户端实现对用户冥想和睡眠记录的收集,当用户结束冥想和结束小睡的时候,客户端会收集到用户冥想和小睡的时间。当获取到用户的小睡和冥想的时间后,客户端通过POST请求把用户的冥想和歇息的时间发给服务端,服务器再把用户的时间存储在服务器的MySQL中,完成对用户冥想和小睡时间的收集。同时在用户的信息页中,有冥想日志和睡眠日志,在冥想日志和睡眠日志中,小程序端通过用户的缓存来的token,通过POST请求来请求服务端,服务端获取用户在体验过小程序过后存储在数据库的冥想和小睡的数据,再反馈给小程序端,小程序端再完成对冥想日志和小睡日志的渲染。