小海心灵-介绍文档

–中国海洋大学-Psyche团队作品

一. 小程序简介

1. 简要介绍

1) 简介

2) 产生背景

2. 交互设计

1) 设计思路

2) 界面展示

3. 使用说明

二. 技术开发方案

1. 小程序端

2. 服务器端

3. 网页管理后台

三. 团队组成与分工

四. 自我评价与产品定位

1. 自我评价

2. 产品定位

3. 运营维护方案

身份认证测试账号: 见pdf版此处同位置

网页后台管理测试账号:test 密码:123

一. 小程序简介

1. 简要介绍

1)简介

小海心灵是一个致力于帮助大学生，解决心理情感问题的微信小程序，采用联合高校心理咨询中心的方式，

为大学生提供心理方面的图文教程, 这里是本小程序特别优化的部分，兼容html富文本，markdown等排版，支持各种表情，支持音频，视频等多媒体内容，同时提供了网页版的后台编辑器，赋予了它强大的文章排版能力，这也为它可以发布各种文章创造了有利的条件。这里覆盖了各种类型的文章，抑郁，情感困惑，就业压力，学业压力，自卑等，还可以分享故事，经过向本平台投稿后，精选出好的文章，将投稿的情感故事分享给大家。

提供暖心的情感音频，这里是平台管理者精选的情感音频，当你心情低落时，当你感到孤独时，来这里这里为你提供了各种暖心的音频，陪你走过每一个心情低落时期。

组织心理健康相关活动，现在大多数校园组织活动都是通过建立群，再邮件发送报名表格的方式，而本小程序借助于文章功能，可以快捷的发布活动信息，同时在页面中提供了报名按钮，快捷的报名。

提供在线的心理测试，借助于中国海洋大学心理咨询中心的帮助这里提供了专业的心理测试，测试完成还能得到可视化的分析结果。

提供心理加油站，每隔一段时间精选三个不同类型的激励鼓励充满正能量的话语，作为情感加油站的内容，大家可以在这里相互加油传播正能量。

提供便捷的在线心理预约服务，通过与心理中心合作，在小程序端展示了一个预约页面，可以参看到可预约的咨询师信息，咨询师擅长领域，同时具有可视化的预约安排，大家可以按照自己的时间选择适合的咨询时间。一改往日大多通过电话预约的不便。

2）产生背景

小海心灵的产生最初产生于2019.3，偶然了解到当代大学生存在很大心理健康问题，与情感困惑。而大家却不倾向于寻求老师，同学的帮助，更不用说专业的心理咨询了，这当然就会产生一些问题。同时经过一些调查发现问及同学很多人却不知道心理咨询中心在什么地方，以及如何进行心理咨询，对心理咨询的了解度也不够高，进行心理咨询预约页不太方便。于是便产生了将微信小程序与心理咨询中心结合起来的形式，普及心理健康知识，提供便捷的心理咨询预约服务，帮助大家解决情感问题，情感困扰。

2.交互设计

1) 设计思路

本小程序主体颜色为浅蓝色，浅绿色，黄绿色等切合小程序主体，具有心理治愈效果的颜色。以此为主色调进行页面布局。

UI的设计采用了开源的ColorUI风格,高饱和,高颜值,贴合学生群体的审美习惯.同时本小程序内的colorui为团队修改过的ColorUI界面风格大体类似,但布局上是具有小海心灵微信小程序特色.大部分页面都为团队自行设计,虽然花费了很多时间,但是为了用户的使用体验,这一切都是值得的.

小程序下方使用了三个tab按钮,分别是首页,咨询页,关于页,页面功能分工明确.

小程序内播放器,按钮(按钮颜色以绿色为主),文章列表,音频列表,都相应的增加了边框圆角,边框阴影,增加了美观性.

相比与其它页面,身份认证这个页面设计的较为简洁,因其不常会被用户打开,但也兼顾了它的美观性.

小程序设计

下面是本小程序中主要用的颜色.

小程序内图标的选取

图一：底部tabbar

图二:播放器图标

图三:menu图片

图四:身份认证页图

=此图标来源于阿里IconFont图标库, 配色为自行搭配=

2) 界面展示

图一: 启动页面

图二:tab三个页面-主页-咨询页-关于页

图三:文章咨询列表页-音频列表页-心灵加油站页

图四-心理测评与图表结果展示页

图五:文章详情页（夜间模式与白天模式）与心灵加油站详情页

图六：预约师详情介绍页-预约时间选择页-预约表单信息填写页

图七:身份认证界面

3.使用说明

小程序的首页下方的最新资讯展示了最新的五篇资讯文章,上方的轮播图则展示了小程序运营者想要传达的信息.

中间的四个menu按钮,最右边的心理测评按照提示完成即可得到测评结果,小海知道是文章资讯列表,可选择自己感兴趣的打开查看;小海心声是音频播放列表,点击左侧播放按钮可切换播放(注:此播放列表内音频来源网页云音乐,此处仅做功能展示,正式版本将会是授权或原创的音频.).

其下的播放器是一个全局播放器,可以按照用户自己意愿切换要播放的音频,播放进度,由于是全局播放器的关系,即使在退出小程序后也可以继续播放.

心灵加油站,此处是三个卡片式的方块,有上方是主题标题,中间是一句正能量的话语.这个三个是平台管理者每隔一段时间精选三个不同方向的励志正能量的短语;普通用户无法发布.但用户可点击进去发表对这句话的看法,大家可以互相鼓励.这个想法是来源于”有时一句话可以深深地影响一个人”;

在咨询页展示了平台的咨询师,点击可以查看咨询师信息,便于选择适合自己的咨询师,下方还有客服按钮方便用户有疑问联系平台,点击咨询后进入咨询时间选择页面,可以选择自己合适的时间,同时也显示了咨询师被预约而导致不能预约,和可预约状态,

状态又后台逻辑处理,一改往日电话预约,人工处理的不便.同时选择预约时间后还可以在线填写预约咨询信息,相比与现场填写简化了操作.(注:这里由于目前还是体验版没有正式上线,预约仅作为展示,暂时还不会真正的预约;为了方便评委体验功能,预约表单提交并没有进行表单验证无需全部填写即可发送预约申请.)

在提交预约申请后,可以在我的-我的预约查看预约状态,共有四个状态申请中,已预约,被拒绝,已完成.申请通过会给用户发送一个模板消息进行通知,拒绝也是同样的有消息提示.

对于平台运营者可设置预约时间,目前小程序内展示是未来五天工作日,可预约状态,周末不工作.

在最后的关于页,用户可以了解本小程序的信息,查看预约申请状态,同时展示了当前用户的身份是否已经认证,没有认证则可以点击后输入相应公司机构学校提供的账号密码进行验证,而验证通过后再次点击则可切换用户.

最后的说明只有经过身份认证才可以查看心灵加油站的留言以及进行留言,才可进行预约.

二. 技术开发方案

1. 小程序端

首先此小程序采用的是微信小程序的原生开发,没有使用wepy,小程序版vue等框架.即采用的方式是js+wxss+wxml+json的方式进行原生开发.

界面方面使用了float浮动,flex弹性盒子,相对定位,绝对定位等小程序常用的布局方案.小程序下方tabbar样式使用组件构造器自定义, 顶部的navigatebar同样是自定义了样式.
界面布局是花费时间精力最长的部分虽然看似用到的技术不多,但是为了使其美观进行了很多尝试,并且不断调试.Wxss使用了伪类选择器,子元素选择器,第N个元素选择器,轮廓,边框,列表,文字,背景等都进行了精心的设计.

组件上使用了小程序大部分常用组件,及小程序中唯一的全局播放器,组件构造器,模板,引入自定义组件等进行开发;对话框为自定义对话框,加载效果也部分采用了自定义方案.
页面之间参数的传递方式根据类型的不同采用了,保存到缓存读取缓存,设置app.js的全局变量,data-自定义属性进行传递参数.页面打开后进行相应的处理.

为了提高用户体验,对于小程序中不变动或几乎不变动尽量采用了写到小程序本地的方式而不采用网络请求.

对数据的处理，由页面生命周期函数分成两类：onLoad时请求加载页面基本数据；onShow处理页面切换时数据的变化
文章页采用了towxml开源框架,实现了对html格式markdown格式文件的支持,同时把个转化过程放到了服务器端,避免了请求到文件后还需转换后显示,改善用户体验.

测评页使用了Echarts百度开源图表,对测评结果进行了可视化的展示.

同时团队内部使用github进行团队协作,版本同步,版本回退,等操作.

项目开源地址: https://github.com/Cherrison/matchHeart

下面是本小程序的小程序端的功能页面结构

2. 服务器端

服务器端使用了PHP作为后端语言,使用了两台服务器,分布式处理不同的功能,www.cheery.pro ;存储了图片资源,文章,音频文件. www.clearn.site ;这台服务器上面则搭建了小程序的后端接口,后端逻辑,同时网页版后台管理也部署在这上面.
根据使用的功能的不同服务器使用了不同的搭建结构

Cheery.pro这台服务器采用的是LNMP(Linux+Nginx+Mysql+PHP)的架构,Clearn.site这台服务器的架构是LAMP(Linux+Apache+Mysql+PHP)

鉴于小程序所需数据请求方式较为简单，采用不同页面对应不同请求文件的方式，方便管理；为每一份传递过来的用户数据在数据库中采用Id作为索引，加快搜索速度。
数据库mysql设计了多个数据表进行处理

处理预约申请,文章用户管理,评论管理学生,咨询师信息等.

3.网页管理后台

网页管理后台使用了H+框架bootstrap模板进行开发, 文章编辑器使用了百度开源富文本编辑器和 editor.md开源markdown编辑器

后台地址 https://www.clearn.site/wx/index.html, 账号test 密码123 ,可以进行体验,因其并不属于小程序大赛所要求实验功能,目前尚不完善,仅做展示,后期会进行完善开发.

注:非团队开发成果:

1、使用了bootstrap模板H+框架用于开发后台页面，方便管理后台数据
2、使用了部分colorui用于开发小程序端的页面
3、使用了WxComment开源组件用于评论功能的实现；
4、使用了ec-charts开发显示图表
5、使用了towxml小程序插件对html markdown进行解析

三.团队组成与分工

1.成员组成

团队成员有四名: 均来自 中国海洋大学;均为大二2017级在校本科生

我们团队跨专业选择队友，结合各自擅长的部分，力争将小程序做得应用性强，适应广大大学生群体。

2.成员分工

宋春雨: 大部分前端开发,界面设计,少部分后端开发,大部分文档编写,少部分视频剪辑,产品规划设计,测试.

张根: 主要负责后端开发, 少部分前端开发, 对接小程序端与后端接口

刘敏: 视频剪辑,界面设计,功能体验,测试反馈

张甜甜: 部分文档编写,界面设计,功能体验,测试反馈

四.自我评价与产品定位

1.自我评价

在开发这个小程序之前团队成员,均无相关开发经验, 即使是两个计算机的同学也没有系统的学习过html js css等知识,也没有服务器端知识基础,没有开发php的经验,因此开发制作小程序经过了一个学习期,边学边做期,到开发期,至此掌握了开发小程序的开发能力.
小程序开发过程中,由于是边学边做的原因,部分功能使用到的技术难度并不相同.
谈论到这个小程序, 我们觉得它的使用体验是不错的,首先界面是美观的,交互式友好的,功能是相对全面的;

—宋春雨

1、功能方面：
整个小程序功能较为完备，满足了预约咨询需求的同时又具备了留言、浏览文章、听音乐放松的功能。能够帮助学校摆脱繁琐的预约流程。美中不足的地方是部分页面的功能仍然具有较大的扩展潜力，需要之后进一步完善。

2、外观设计：
整体外观经过精心设计，多采用绿色、蓝色，界面较为清新自然，契合心理主题。不过页面模块的布局仍然需要在运营的过程中结合实际进一步完善。

3、前后端交互：
后端数据在自建的服务器上通过接口与小程序端交互，同时在服务器端布置了后台管理页面，较好地解决了运营过程中对小程序内容、咨询信息的管理

— 张根

现阶段小程序致力于服务广大学生,教师,教职工;为大家提供一个心理服务的平台.当前大学时面临的心理情感问题是比较多的,各种事件也是经常地发生,而大家却普遍缺乏这方便的知识,有心理问题时也只有少部分人会选择心理咨询,
这个小程序的诞生就是为了解决这个问题.

团队的开发过程是一个团队合作的过程,共同解决了遇到的疑难问题.小程序当前虽然只是体验版,我们找来朋友添加体验版小程序权限,在10几人的小规模上进行了测试.目前的测试结果相对满足要求.

—Psyche团队

3. 产品定位

近年来，高校中因大学生心理问题引发的事件越来越多，引起学校和社会的高度关注。我们的产品灵感来源于此.
虽然当前只有中国海洋大学在使用(正在提交审核中),但我们对它的定位重来都不是一校专用
本小程序是一个组织结构式的小程序, 我们希望它使用与一个组织,一个公司,一个学校,一个团体;
待本校运营稳定后便会改名(后期名字还在讨论中…)然后开放外校社会使用. 使用方式是结合各组织内部相应的心理咨询机构,部门;来进行运行使用,提供方便的咨询预约,心理测试,心理知识普及,组织心理活动.因此来提高大家对心理咨询的认识,解决情感困扰心理问题.

三.运营维护方案

程序的运营初步计划采用公众号+小程序的方式

第一阶段运营:

测试稳定后开放网页版管理后台的文章编辑,供专业的心理咨询师发表他们的简介,分享他们的情感故事.

第二阶段运营

第三阶段运营

在上一阶段,在本地区具备一定的影响力后,向学校外开放,由此开始盈利,但是对校内依然为免费咨询, 这个咨询相当于为学校咨询师提供一个兼职的平台,在他们的空余时间,为社会提供给心理咨询服务.采用平台抽取一部分咨询费用的平台抽成方式.

同时在这个阶段向青岛外高校推广小程序(到了这个阶段应该无论是小程序还是后台都发展的比较完善,其它高校没有理由拒绝一个免费的功能完善,易于使用的小程序来方便他们的心理咨询服务) 以此进一步扩大小程序的影响力,并开放相应的高校心理咨询师校外兼职心理咨询服务.

第四阶段运营

如果可以到达这个阶段,那么小程序应会变得更加完善,这个时候开始借助于高校心理咨询师,心理学教授的人际关系,向社会其他组织,企业开放使用小程序, 依然采用前面几个阶段类似的运营方式.

此为当前运营方案,及运营规划,后续如因情况变动,会进行相应的调整.