项目展示 —— 课程表

课程表应该是学生党用的最多的功能了吧。
这次的项目是设计一款基于网页的课程表。
数据来源是正方教务系统的 Oracle 数据库的 Mirror,这里不详细介绍。
主要提供手机版服务,PC版为可选

最原始的设计是采用类表格的方法实现,手机端采用左右滑动切换周一~周五
电脑版效果如下:
QQ图片20140825194021.jpg

但手机版的设计却没那么简单,找不到较好的实现方式,不得已重新设计界面。

由于应用主要面向手机,所以重新设计的界面以手机为中心,电脑版再加优化。
根据自己使用手机的经验,手机上上下滑动远比左右滑动自然,于是考虑用其他展示方式替代表格显示。
手机上微博可以算是用得比较多的应用了,于是想是否可以将课程像微博一样一条一条展现出来。

经过不断优化和修正,最终效果如下:
(由于效果图太高,请到文章末尾查看)

其中课程的设计借鉴了 Android L 和 Google Now 的 Material Design。

电脑版将多个课程并排同行展示,这里直接用响应式的办法实现(手机端浏览器大多符合 HTML5 标准,这点不必担心),效果如下
无标题.pngQQ图片20140825193815.png

标签: