• slidebg1
  • slidebg1
    校史校情知识竞赛
    还未注册？
  • slidebg1

    一致性

    遵循用户习惯
    操作流畅自然
    用户体验至上

前端设计

迎合“校史”主题，展现东大文化

活力，多彩，就像东大学子

直观，易用，用户体验至上

响应式布局，支持IE

登陆页

动态 & 交互

刚进入登录页，你就会发现我们在用户体验和交互细节上的用心。登录页的背景图片是最具特点的东大校园景观，利用动态背景，给新生们带来一场视觉之旅。操作交互平滑自然，符合用户习惯与心理预期。

清空cookie

进入登录页时，我们会自动清空cookie，以免受到上一个用户的影响。

提示信息

从登录页起，我们就考虑到做题中可能发生的情况，在网页的设计中预留了足够的提示信息，引导用户排查和解决可能遇到的问题。

用户识别

通过判断身份和答题状态，将用户引导至答题页/结果页或后台页

登录页的引导细节

（1）提示用户账号密码应该输入什么。

（2）登录失败则提示是网络异常或是用户尚未注册。

（3）对用户输入的帐号密码进行有效性检验。

（4）利用动态出现的提示信息和模态框，而不是“十分恼人”的浏览器弹窗。

答题页

来自“明信片”的启发

为了避免千篇一律的答题界面，我们从“明信片”中找到灵感，题目如同一张张“明信片”，逐道展现在学生眼前，辅以精心调教过的背景，赏心悦目。

人性化的设计

我们设置了欢迎页，对用户进行了对于竞赛而言必要的提示和引导。答题中，我们考虑到“明信片”设计可能给用户带来换题的不便，我们加入了自动切题功能。

流畅的答题体验

我们设置了“答题卡”，借助不同的样式，用户可以轻而易举地从中知晓哪些题已答，哪些题未答，以及当前题是什么。

知道哪儿做错了

提交答案之后，用户可以直观地看到答题情况和题目分析。为了防止用户提交后忘记关闭网页，我们设置了30秒的时限，30秒后会自动注销并跳转至登录页。

后台页

信息可视化

我们很注重信息的展现，四张饼图各司其职，可以让辅导员迅速获取主要的信息。

可搜索和排序的表格

表格可展现具体信息，精确、详细，可搜索。借助表格的搜索和排序功能，可以极大程度方便辅导员对学生进行管理。

导出EXCEL

辅导员可以根据需要将答题情况信息的表格下载至本地。

花絮与演示

技术细节

前端开发中，我们经历了几个阶段，主要用了如下的技术。

传统模式（学习阶段）

HTML5+CSS3+JavaScript

前端开发库

jQuery+BootStrap+Chartist

模拟后端，实现“前后分离”

Mock.js

前端模块化

NPM+CommonJS+TypeScript

打包上线

Vue+Webpack

接入后端

JSON+AJAX+CSRF-TOKEN

关于我们

我们是一个名字很长的校史系统开发组

胡黛琳

前端

罗崟洪

前端

叶志浩

后端

杨航源

后端

前端演示结束，感谢

95%

html/css

75%

C#

55%

javascript

35%

photoshop