一、作业目标

• 基于实例分析，体会用户体验设计的 7 条准则。

二、作业要求

• 针对师路南通 ，开展UX分析。PS：对比另外2个学习网站：1. UMU学习平台 ；2. 学生安全教育平台
• 基于7 条UX评价准则，分析“师路南通” 在用户体验设计方面让你觉得满意的地方（不少于2点），请陈述理由。
• 同样，分析“师路南通” 在用户体验设计方面让你觉得最不满意的地方（不少于2点），请陈述理由。
• 回答上述问题时，附上截图。

三、分析

（一）欢迎界面

1.师路南通

点击进入“师路南通”，出现一个页面，是一个由欢迎界面（如图1）、南通教育简介（如图2）和4位南通教育家简介（如图3-6）所构成的动画。

图1 欢迎界面                               图2  南通教育简介                               图3 南通教育家——胡瑗简介

图4  南通教育家——沙元炳简介                图5  南通教育家——顾怡生简介               图6  南通教育家——张謇简介

该界面做了一个简单的动画，很好的吸引了新用户。使用统一的标准模板、布局清晰，在网页旁边有足够的留白，视觉清晰，显示的内容也简单易读。

但该界面由纯粹的动画构成，没有任何提示按钮提示用户点击进入首页面，新手使用时可能会产生疑惑，不知怎么进入。该动画简单介绍了南通教育及南通的4位著名教育家，笔者试验过，在不动鼠标且鼠标未放置在动画中的任意位置上时，大概3s后会自动出现下一张图，若鼠标放置在动画中的任意位置，将一直停留在该页面，这一设置对于大多数用户而言起的略显多余，大多数用户并不会去仔细去了解图片中显示的内容，更不会去发现接下来还有什么介绍，开发者应尽可能把这块做的简单，缩小内存，提高运行速度。

2.UMU互动学习平台

点击进入“UMU互动学习平台”，出现的是一个用户登录界面，如图7所示，显得十分突兀，没有给用户使用的愉悦感。

图7  UMU互动学习平台欢迎界面

3.学生教育安全平台

点击进入“学生教育安全平台”，出现常规的首页面。

图8  学生教育安全平台欢迎界面

4.总结

（1）“师路南通”欢迎界面的优越之处：设有动画，对于新用户来说有很大的吸引力。

（2）“师路南通”欢迎界面的不足之处：a.欢迎界面没有设置任何的提示按钮；b.设置动画的滚动方式不是很合理，许多内容会被忽略，随着网站内容的增多与完善，会浪费部分页面跳转的时间。

（二）用户登录

1.师路南通

“师路南通”在用户登录方面没有完善设计，点击用户登录，页面左侧的图跳不出来，右侧只提供“账号”、“密码”两栏，其中“密码”可以与“验证码”进行互换，但并没有提供“注册”按钮，普通用户不好自主注册登录，只有派发了账号和密码的用户才可以使用，没有账号的用户点击获取验证码会提示“手机号不存在，无法验证”。关于“确认”和“取消”按钮，点击“确认”按钮会有提示要求，错误信息给出了下一步操作提示，但“取消”按钮却没有进行设置，点击后没有任何反应。

图9   师路南通用户登录设置

2.UMU互动学习平台

UMU互动学习平台在用户登录方面做得比较好，在注册/登陆界面，可以选择用电子邮箱、手机号码或微信进行登陆，与另外两个学习平台相比，在输入密码时还设置了可以隐藏/显示密码，当用户不小心输错时可以查看已经输的，不用全部重输。

图10  UMU互动学习平台用户登录界面

对于首次注册/登陆的游客，需要进行信息完善后才能注册成功，正常登陆。在完善信息时，用户必须真实填写姓名，公司、单位或学校名称，手机号码及所在地区，提示语言简洁，没有专业术语，但不能跳过，在保证用户真实可靠的情况下，拒绝了一些特别注重个人隐私的用户。用户注册完成还要选择用户身份，方便网页推送服务。

图11  UMU互动学习平台注册“完善信息”

图12  UMU互动学习平台注册成功

UMU互动学习平台注册操作过程中做的不好的一点是不可以返回上一级进行修改，信息只有在“个人账户”中进行修改。

3.学生教育安全平台

学生教育安全平台的登陆窗口提供帐号、QQ、微博登陆，密码区分大小写。但是也仅限于派发账号的用户登陆，普通用户不可以自主注册登录，这和师路南通类似。

图13  学生教育安全平台用户登录

4.总结

（1）“师路南通”用户登录的优越之处：与“学生教育安全平台”类似，仅限于派发了账号的用户进行登录，保证用户真实有效。

（2）“师路南通”欢迎界面的不足之处：a.界面设计不好，图案跳不出来；b.部分按钮形同虚设，如“取消”；c.“登陆”设在主页右上角，不像其他软件主页就有显示，不直观；d.与“UMU互动学习平台”相比，不可以注册，限制了网站用户的数量，一般用户除了查看外不可以进行其他任何操作；e.与“UMU互动学习平台”相比，密码是隐藏的，不可以查看已输密码，一旦输错大部分情况下只能重输；f.与“学生教育安全平台”相比，虽然都是只供派发账号的用户使用，但界面设计与报错设计明显不人性化，设计的没有“学生教育安全平台”美观。

（三）主页面

1.师路南通

师路南通主页面由上中下三块组成，上部是导航栏及一张图片，主色调是蓝色，图片中有较为亮眼的橙黄色；中间是“近期研修”、“经典研修”和“推荐课程”三块，以蓝色为主色调，这样就显得上部图片中的橙黄色十分突兀；以滚动的“培训专家”为过渡，到主页面下部，由“培训课程分类”和“培训课程”两部分组成，底色为红色，与上方的蓝色为两个色调，十分突兀。

从截图中还可以看出主页面的其他一些问题：（1）主页面放置内容很多，但未考虑视觉效果，如“经典研修”的头条推送还没有上传图片、上传的课程图片背景色深浅不一、上传的专家图片未采用统一背景色的证件照，这些都导致整个界面很不和谐；（2）“培训专家”栏采用滚动的方式，用户没有控制权，不好选择回看滚动过的照片，只有等到循环过后再次播放，且只放了图片，没有任何的文字解说，对于大多数用户来说都是无用的，因为绝大多数用户都不认识这些专家，添加专家姓名和职位与照片一起进行滚动；（3）主页面下部的分类不合理，将“培训课程”拆为两块，放了几门不同的课程，但分别点击两个“培训课程”后的“更多”按钮，跳到的却是同一个网页。

图14  师路南通主页面

2.UMU互动学习平台

UMU互动学习平台的主页面十分简洁，导航栏下是新手指南，采用用户自主按键的方式查看相关视频指南。接下来是个人成就（包括完成的课程数、去过的城市数、学员数量）、课程日历以及课程情况，与其他两个软件的不同之处在于UMU互动学习平台将用户的课程情况按时间进行分类，分为今日、将来和过去三类，更直接地告诉用户哪些是已开课的、哪些是未来要开课的、哪些是今日就开课的，起到很好的提示与查询作用。UMU互动学习平台界面比较简洁，但也未注意到用户的视觉效果。

图15  UMU互动学习平台主页面

3.学生教育安全平台

学生教育安全平台从视觉效果上看比较好，界面符合惯例，整个页面的背景、颜色搭配协调。主页面显示了学校安全教育平台、学校安全教育试验区两个主页链接，包含安全新闻、共享资源、帮助中心、平台广告、意见反馈、我要留言几个模块，但唯一不足的是没有导航栏，没有清晰指示了当前的位置、没有清晰的定义首页的链接。

图16  学生教育安全平台主页面

4.总结

（1）“师路南通”用户登录的优越之处：与“学生教育安全平台”相比，设置了导航栏，清晰地显示当前位置、定义首页的链接

（2）“师路南通”用户登录的不足之处：a.与“学生教育安全平台”相比，界面视觉效果不好，颜色不协调；b.放置内容很多，但分类混乱，不像“UMU互动学习平台”突出课程管理，或者像“学生教育安全平台”每个模块都有相对应的内容，“师路南通”存在分类重复的现象。

（四）网站内容

1.师路南通

师路南通共有“师路话语”、“精品培训”、“高端研修”、“培训课程”、“人才培养”、“南通样板”、“职称晋升”、“国培省培”几块内容，其中“师路话语”、“南通样板”只有一内容，分别写了只有一段话，介绍了两位教育家；“高端研修”、“培训课程”从专家、课程和研修三个角度分类；“培训课程”提供了相关的课程资料；“人才培养”中是相关的老师信息；“职称晋升”、“国培省培”提供了一些相关信息或公告。这样的分类不是很合理，里面的内容有重复，如“精品培训”中的鞠九兵在“高端研修”、“人才培养”中也出现，且指向的是同一个链接。

图17  师路南通——精品培训

图18  师路南通——高端研修

图19  师路南通——人才培养

从图19还可以看出，虽然在导航栏下有“首页>精品培训”字样，但在导航栏中，深色方框仍停留在“首页”上，没有指向“精品培训”，这个问题在其他几个模块中同样存在。

再看“培训课程”，从图20可以看出，总共有20个类型，但只有59个课程，分类不是很完善，也会出现如图21所示的检索不到课程的情况。师路南通中的课程以PPT课件为主。该模块做的比较好的是用户有自主控制权，可以从类型中选择关注的内容，并将它按“默认”、“推荐”、“最新”三种方法进行排序，当选错时也可以将已选条件删除，回到初始课程列表界面。该模块中还提供了“推荐课程”和“课程排行”情况，帮助用户找到优质资源。

图20  师路南通——培训课程

图21  师路南通——培训课程——班主任大赛

2.UMU互动学习平台

UMU互动学习平台主要是供用户上传课件，包括“我的课程”、“学习项目”、“课程资源”、“会员升级”、“APP下载”、“帮助”几模块，用户可以按时间管理自己的创建的课程，在“模板”中选择相应的模板，在“帮助”中学习如何使用。“我的课程”、“学习项目”都提供了如图22所示的检索框可供用户进行搜索。因本人注册后只可以上传课件，不好搜索已有课程资源，不多做介绍。

图22  UMU互动学习平台检索框

3.学生教育安全平台

学生教育安全平台包含“安全新闻”、“共享资源”、“帮助中心”、“平台广告”、“意见反馈”、“我要留言”几个模块，其中“安全新闻”、“共享资源”提供了网站入口，链接到一个全新的网站，如图22所示。而其他几个模块归于“用户帮助”中，点开来是另一种排版，如图23所示。这样的布局会让用户觉得使用起来有点奇怪，像是在使用两个网站。

图22  学校安全教育平台——安全新闻

图22  学校安全教育平台——用户帮助

再谈可搜索的课程资源，点开共享资源，里面提供了多个不同系列的课程资源，包括“自然灾害”、“意外伤害”、“社会安全”等诸多方面，也提供了漫画、图片、视频、知识四种不同的课程形式。除了在网页左侧有具体的分类，在网页右上角还有检索框可供用户进行检索，十分方便。

图23  学校安全教育平台——课程资源

4.总结

（1）“师路南通”用户登录的优越之处：可对搜索结果按“默认”、“推荐”、“最新”三种方法进行排序，提供了“推荐课程”和“课程排行”情况，帮助用户找到优质资源。

（2）“师路南通”用户登录的不足之处：a.内容设置混乱，设置模块中的内容有重复；b.课程基本都是ppt课件，形式单一；c.检索类型设置不完善，存在某一类型下无检索结果的情况，且只可以按一种类型检索，当内容充足后不能通过多个类型进行进一步检索；d.每一个界面都没有搜索框，当用户不知道该去哪个模块下进行检索时，极不方便。

（五）其他

UMU互动学习平台、学生教育安全平台都有帮助功能，可以引导用户更好地了解与使用网页；UMU互动学习平台推出了移动APP版、学生教育安全平台推出平台移动版和平台官方微信号，解决了用户使用电脑不方便的问题。