微信小程序项目：粤语教学平台 - 粤语 - 3 详细设计

3.1 系统结构设计

3.1.1 技术架构

本项目使用微信小程序开发，从小程序的特点来看，⼩程序都⾮常类似于⽹页：主要的业务逻辑在服务端、客户端无需安装应用程序、⼩程序的开发采用的HTML+JS+CSS技术。
所以，可以把小程序看成⼿机端的Web页，采用B/S架构，其优点是，用户不需要安装客户端，只要有网络、浏览器，可以随时随地访问网页，进行查询、浏览等操作。 并且方便维护，业务扩展简单方便且共享性强。

3.1.2 功能模块设计

小程序模块的划分按照“高内聚，低耦合”即尽可能使每一个模块只完成一件事，并且减少类内部，对其他类的调用的原则来进行划分。
系统的功能划分将由SC图来展示。

3.1.3 关键功能设计

3.2 数据存储设计

粤言粤语小程序所采用的存储方式是微信小程序自带的云数据库，该数据库是一个既可以在小程序端操作，也可以在云函数中操作的json类型的非关系型数据库（基于MongoDB）。所以在数据存储设计中，我们也采用了集合存储数据的形式来减少时间的损耗。以下一一介绍创建的数据库集合字段含义。
1、userlnfo（用于整个使用过程）
当用户点击登录时，如果用户允许使用微信登录，小程序会记录用户的_openid、avatarUrl、name、sex。

2、listen_text（存储用于听力练习的内容）
文本的音频数据没有存储在数据库中，当用户点击播放按钮，小程序会根据文本编号从云存储中获取文本音频。

3、listen_record(用户听力记录）
该部分用于个人中心中学习记录的使用，当用户选择相应的日期后，小程序会根据日期和个人的——openid来获取当天的数据。包括：用户当天的学习计划、用户的学习内容。

4、life_text（用于朗读中的日常情况）
该部分存储了不同场景下的不同片段，同时每句话中也通过集合存储了用户在该句话的读音数据和评分数据。

5、movies（用于朗读中的电影片段）
该部分存储了不同电影场景下的不同片段，同时每句话中也通过集合存储了用户在该句话的读音数据和评分数据。

6、transition（用于记录用户翻译数据）
该数据主要用于翻译模块，小程序记录每个人用户翻译的文本，然后在页面展示用户最近几次翻译的内容，通过这种方式可以方便用户查找最近的翻译记录。

3.3 界面设计

我们的小程序主要才用蓝色作为主色调，内部的一些组件采用渐变的形式展示，整个布局看上去虽然朴素但内容丰富。以下具体介绍我们小程序的主要界面设计风格。

3.3.1 界面设计风格

该部分我将从以下几个方面介绍：整体色调、初次进入的动画、各个页面的跳转以及页面内部的细节展示。
整体色调：粤言粤语小程序使用最多的颜色是蓝白。蓝白搭配是自然界最经典的搭配之一，这是蓝天白云的缩影，这是天空的颜色，白色能让整个页面显的不那么拥挤。而蓝色调能够带来一种宁静的感觉，让人感到放松和舒适。蓝与白的配色组合，会有种在云层里的感觉。总能给人一种浩瀚无垠的包容之感，又有流动的柔和与不可破坏的洁净感。同时，小程序的按钮大多采用渐变色的形式来展示。我们希望用户在学习粤语的同时能够放松心情，快乐的学习粤语、了解粤语文化与特色。
初次进入的动画：我们希望用户在第一次进入小程序的时候能够大致了解粤言粤语的主要功能。同时，为了使小程序更具有美感，我们采用轮播的方式在主要功能页面之前让用户提前了解小程序主要功能。

各个页面的跳转：我们小组采用最常见的导航栏的方式来展示主要功能，导航栏固定在页面的底部方便用户点击。同时，当用户停留在对应页面的图标下时，对应的图标也会以蓝色来高亮显示。
页面内部的细节展示：小程序的整个页面布局中我们都加入了一些关于粤语的小细节。广东塔的添加、粤剧文化、粤语歌曲代表人物等等。最后适当添加了一些繁体字让整个小程序充斥着粤语文化。
总的来说，整个界面风格比较朴素而不累赘，尽量给用户粤语文化的熏陶感。接下来是主要功能界面的介绍。

3.3.2 主要功能界面

1、听力练习界面：
该界面主要让用户以答题的形式来帮助用户练习粤语听力能力，该界面记录用户当天的学习记录以及登录的天数。用户可以根据自己的学习能力来修改每天的学习计划，用户也可以对今天的学习成果进行打卡生成海报分享到朋友圈。该页面添加了搜索功能，用户可以搜索想要翻译的汉语，然后页面会跳转到翻译页面进行翻译。

2、发音练习界面：
该界面主要让用户学习一些粤语的常用语，我们针对每一种场景用情景对话的方式来帮助用户学习。该界面提供了生活中常见用语以及26个电影片段。用户可以根据自己的需要和喜好点击进入详情页面。同时页面顶部的轮播图也可以点击，用户点击可以跳转到粤语文化的详情页。
在日常情景的详情页中，用户可以听到每一个场景的所有对话，也可以进行跟读来学习，我们通比对用户读的音频与标准音频给出比较科学的评分。
在电影情景中，26个电影片段是我们团队精心挑选的比较经典的粤语电影。用户可以观看我们截取的片段来学习，也可以进行跟读训练。

3、粤语翻译界面：
在粤语翻译界面，我们运用常见的翻译网站的设计风格，用文本框来让用户输入汉语，然后点击翻译便可以在几秒钟给出粤语的发音。我们也在翻译的下面给出了用户可能想要搜索的建议。在界面的剩余部分给出了该用户的最近翻译记录。整个界面布局内容充裕而不繁杂，基本可以满足用户的所有要求。

4、知识科普界面：
知识科普界面算是我们小程序的一个特点，我们在给用户提供学习平台的同时也让用户了解了一些关于粤语的文化。包括：粤剧、粤语歌曲以及粤语的发音。
用户可以根据自己的喜好点击相应版块，然后通过一边浏览文章一边观看相关例子的方式了解相关内容。在粤剧版块，我们提供了几个比较经典的粤剧片段。在粤语歌曲版块，我们选取了大众比较喜欢的几首经典粤语歌曲。在粤语发音版块，我们的小程序介绍了粤语的声母、韵母以及声调。用户可以根据我们提供的发音标准来练习。同时我们也会给出发音的小技巧。

5、账户管理界面：
该页面主要为用户个人学习记录以及客服两大功能。在个人学习记录中，用户可以查询某一天自己听力学习的内容。如果用户对小程序的使用有一些建议和不满意的地方，用户可以通过点击右下方的耳机按钮来向我们反馈。最后，我们给出关于该小程序的简单介绍和使用帮助。