l 掌握人机交互设计的基本概念和页面设计原则
l 画板界面设计开发和手写数字识别
l 实现深度学习的基础代码
1、阐述web界面和移动界面设计的基本原则。
2、利用脚本语言（js，jquery等）按照简洁明确的准则设计画板页面。
3、基于python-web项目按照MVC原则开发手写数字识别项目并考虑不同参数对准确率的影响（如，迭代次数，不同层数）。
4、多个数字同时识别的设计并实现方法。
1、阐述web界面和移动界面设计的基本原则。
*基本原则*
1）简洁性 设计并不再现具体的物像和特征，它要表达的是一定的意图和要求，在适当 的环境里为人们所理解和接收。 醒目的图形，要求简洁。 限制字体和所用颜色的数量。 页面上所有的元素都应当有明确的含义和用途。
2）一致性 页面的排版，各个页面使用相同的页边距。文本、图形之间保持相同的间距。 主要图形、标题或符号旁边留下相同的空白。 各个页面使用相同的图标。 色彩和风格的一致性，所有图片都应该具有相同的风格。 文字的颜色要同图形的颜色保持一致并注意色彩搭配的和谐。 一个站点通常只使用一两种标准色。
3）对比度 使用对比度是强调突出某些内容的最有效的办法之一。 使内容容易辨认和接受。 例如：内容提要使用蓝色，正文采用黑色。 也可以使用大标题。 图像对比，题头的图像明确地向浏览者传达本页的主题。
*我的实现：*
1）UI设计
2）项目目录结构
3）项目目录结构
4）网页静态页面实现
5）逻辑功能分析
6）逻辑交互实现
7）关键步骤代码
# 核心html5--canvas
<canvas>是HTML5新增的元素，可用于通过使用JavaScript中的脚本来绘制图形。例如，它可以用于绘制图形，制作照片，创建动画，甚至可以进行实时视频处理或渲染。
canvas有许多的API，可以插入图片，可以编写文字，可以处理视频,我们用其来完成我们的画板。
## 核心样式
对于大部分的界面交互，使用css的资源消耗是更少的，能满足我们的基本样式需求，借助css中的样式处理和少量的js对dom元素的操作，我们能完成整个页面的基础设计。如下就是弹窗的部分代码
*总结：*
考虑到现在手机端可以通过webview的方式所以采用web的界面设计，后面可能可以考虑多端适配，在设计的开始先用PS设计整个页面的布局，通过布局正好分析出整个web应该有的工具和具体的实现逻辑，紧接着先用html5（canvas）+css3实现整个页面的静态页面，使得整个项目的雏形出现。
2、利用脚本语言（js，jquery等）按照简洁明确的准则设计画板页面。
为了让页面有交互能力，我引入js语言，为了更好的操作dom元素我引入jquery,通过js的加入，我们就能完成整个页面的逻辑交互设计，那么接下来就是后端接口的实现了，以下仅以部分代码作为代表（其它代码见附件）：
3、基于python-web项目按照MVC原则开发手写数字识别项目并考虑不同参数对准确率的影响（如，迭代次数，不同层数）。
*分析：*
借助flask我们来搭建python-web项目，由于自己写的文字识别识别率很低，所以我采用百度的文字识别api，再前端的实现中，其实我们可以对获取到的图片直接提交到百度api的接口，最后将获得的数据结果进行展示，这也是符合MVC原则，不过全部在前端就实现了，在实现的过程中，难点就是在跨域的处理，由于域名的不同，在我的请求过程中，出现了跨域请求。
*跨域请求的解决：*
显然由于服务器不在我们手上我们只能通过1和2方式进行解决，最终，我选择了方式2。虽然方式1中我能用jquery很方便的解决，但是当请求方式是post的时候就无法实现了。
秉着学习为目的的方式，我觉得上面的方式是实现了，但是还是不够好，我应该通过后端接口的书写，来实现类似服务器代理的跨域解决，这样才是更合理的，这样整个项目也不再是一个简简单单的前端项目了，而是一个有前后端交互的完整项目，由于是练手项目，我也打算不用已经熟悉的jquery的ajax。选用axios来进行前端的网路请求（不考虑打包大小，真实开发不合理，但是可以练习）：以下是关键代码实现
**后端*
4、多个数字同时识别的设计并实现方法。
借助postman工具对其多个接口进行测试后发现对canvas手写文字的识别率中，网络图片通用识别接口的实现率最高。
5、总结
这次实验的收获很多，了解了整个项目的前后端逻辑，也学会在自己的学习的过程中给自己布置学习任务，如在第一次制作中，其实前端的调用接口已经能满足要求，但是这样就无法练习到后端的相关技术，在这个过程中学习到了前端的跨域请求，后来放弃这个版本，把逻辑迁移到后端，借助类似代理服务器的实现，在这个过程中，学会了接口的书写，通过api的调用也了解到了token验证的机制，很感谢老师一个学期的指导，最大的收获就是知道实践大于理论！
\6. 成功：
由于是动态演示，最终成功见附件视频，其中还有其他功能详解。