打造友好的排课界面

  • 这是一篇关于产品设计中界面设计的记录。

    视觉传达是通过可观看的方式传达信息或想法。

    背景:在线教育的一个数字化系统,该业务的核心特点是 固定班级、固定时间端、固定老师。为此,定义了一个基本单位“课节”来标识一节课,定义“周期课程计划”来根据规则生成课节。整个固定课程的逻辑就是在一个班内,按设定好的课程计划,每周的某个时间段安排某个固定的老师来完成上课。

    将基本的系统逻辑设计完成后,需要设计一个排课操作台提供给使用者。这个排课的操作台设想中就和一个周日程表类似。日程表横轴为星期,竖轴是时间。而排课操作台,老师之间的对比比时间更为重要,所以x横轴为星期,y竖轴是老师,时间维度通过额外的z轴来选择,而不作为直接比对的值。

    日历中的周

    课程类型上,由于售前的试听上课和售后的常规上课结构完全不同,支持角色不一样,支持的时间也不一定通用,故将其分为:支持试听课的试听时间端和支持课程计划占用周期的常规时间端。


    赋予图形语义

    利用颜色、颜色深浅、背景色、边框线、文本、图表来代表不同维度的意义。每种维度定义2-3种选项,避免过多的属性带来的认知障碍。

    将只能排试听类型课的时间端定义为绿色、将只能排常规类型课的定义为黄色、而试听和常规皆可的时间端定义为蓝色。

    color

    这里定义了3种颜色属性,但是在大部分使用场景内,同一场景只会出现2种颜色。比如安排一个节试听课,那么搜索出来的时间端都是 绿色 和 蓝色。再比如安排一个节常规课,搜索出来的时间端都是 黄色 和 蓝色。


    利用颜色的轻重程度来代表 对于使用者而言这个时间端是否可用。

    shade

    深浅色:定义深色为该时间端空闲没有排课,定义浅色为已排课。

    在白色背景下,深色会对比的更为凸显。对使用者而言,他最直接的目的是找到可用的时间端,所以通过深浅的明度关系,能直接从视觉上一眼将可用和不可用的色块区分出来。


    由于是小班课的场景,关于时间端的可用状态,还需要考虑班级内学员的容量,实际上已排课状态还需要分为2种状态信息:已排课但还有空位可插班;和已排课没有空位。如果还是使用深浅的方式来传达这个信息,从视觉上会出现同种属性过多带来的认知障碍,中间状态和深浅的命中判断将有可能出现失误。

    shade3

    为了解决这个问题,引入另一维度的图形信息——边框。

    利用色块边框的有无来区分是否满员。

    border

    利用颜色的深浅+色块的边框结合,再将中间状态的边框从视觉角度修正为虚线。

    border2

    边框线:虚线代表未满可插班,实线代表空闲可新建,没有边框代表已满,也就是视觉上最不起眼,并且也不需要关注。

    graphic_language


    确定了描述时间端状态的图形语言后,将其作为容器,在其中附加其他属性。

    如果有课未满员的情况下,希望使用者能知道学员的一些基本信息

    • 年龄(年龄的不同会有很大的心智差距,所以年龄是组班的重要因素)
    • 是否请假
    • 是否插班学员
    • 是否是预排班学员(预排班是另一套提前占位的排班系统)

    通过色彩来标注该学员的状态

    student

    在其中使用数字来表达学员的岁数

    student_age


    此外还有一些信息

    • 班级的等级
    • 如果还未开班,那么它的开班日期
    • 如果遇到中外节假日
    • 前文提到的锁定状态

    演绎法梳理出各种状态下的图形,并针对不同的场景做一些显示优先级的调整。

    class

    使用有锁的图标,来单独指示已被固定班级周期占用的时间端。

    简化的效果