如何设计好一个教学成果奖网页

2021-12-17
820

一、产品定位:

(1)什么是教学成果奖

高等教育国家级教学成果奖是国家在教学研究和实践领域中颁授的最高奖项,每4年评审一次,获奖项目需在教育教学理论及实践中取得重大突破。

2013年已扩展为国家级教学成果奖,包含基础教育(含幼儿教育与特殊教育)、职业教育(含高等职业教育)、高等教育(含成人高等教育)。奖励等级分为特等奖、一等奖、二等奖三个等级,授予相应的证书和奖金。

(2)目标用户群体

    网站主要面向的是具体领域的资深专家,其次是申请教学成果奖的教学团队。

(3)用户需求

    不同的教学团队,需求会有所不同,但是普遍的需求有以下几点:

· 网页要突出成果奖特色,重点突出学校或专业特色;

· 以内容展示为主,版面要简洁;

· 字体要大;

· 版面整体长度不宜过长。

(4)网页特点

· 简洁;

· 主题明确,要具有专业/学校特色;

· 易操作;

· 内容至上。

二、设计师如何设计好一个教学成果奖网页

(1)教学成果奖网页设计类型

教学成果奖首页主要有两种,教学成果奖专栏及其子网站。

成果奖专栏以一个表格的形式展示,展示的是学校此次申报的所有成果奖栏目,一般为2~5项。

子网站为围绕某一主题展示教学成果的网站,通常情况下,有网页主题、导航、banner、首页调用及快速按钮。

(2)设计一般要点

教学成果奖网页设计,按照省教育厅颁发的文件精神要求及客户需求,需求栏目每年都不尽相同,但是对于设计师来说,设计要点变化不大,具体有以下几点:

① 用户使用设备终端及开发要求

   教学成果奖网站,为普通网站,只要求适配PC端,其他终端不考虑。

   网站制作语言,一般为博达、.net及新得实,在设计时,这几种语言开发对设计的影响不大,但是要注意新得实对设计排版的限制,避免出现平台限制无法实现设计样式的情况。

② 整体高度控制

 为了方便浏览,网页所有内容模块展示都要较为集中,网页整体高度不宜过高。其中,教学成果奖专栏高度要控制在一屏以内,920px为最佳高度;子网站高度要控制在一屏半以内,920px为最佳高度(浏览器内满屏展示高度)。

③ banner设计

· banner高度

Banner的高度建议控制在300px以内,若加上学校logo,则320~350px最佳,最高不超过400px。

· banner字体要求

教学成果奖的名称一般都很长,文字内容有:年度教学成果奖申报网站+教学成果奖主题名称+成果完成人+成果完成单位,有的项目还需要放上所获奖项的列表信息。

其中,重点突出展示成果奖主题名称,其次是年度教学成果奖申报网站,成果完成人+成果完成单位,一般都是放在成果奖主题下面,要与主题区分明显,展示具体内容即可。

若还需要加上所获奖项列表信息,由于banner文字内容太多,建议做两张banner进行分开显示,第一张banner显示主要信息,第二张显示获奖信息。

图1.jpg

banner1

图2.jpg

banner2

Banner字体,由于前端开发时,一般都是直接切图,不会随系统进行配置,所以建议使用免费可商用字体,这样就不影响网站在任何系统下显示了。字体要清晰显示、突出、一目了然,若无法与背景区分开,除了用背景对比色之外,可加上描边和阴影。

· banner背景设计

教学成果奖评审专栏,主要放的是学校申报成果奖的所有项,这时的banner设计除了传统的放在顶部外,还可作为整个网页的大背景展示,以突出学校专业特色为主,也可以选择学校建筑或学校风景,或具有学校专业特色、所在地区特色挂钩的风景。这样设计的目的在于:让评审专家一看就知道是哪个学校,并且加深第一印象。

另外一种则是评审专栏里的子网站,即具体的申报网站,这时banner设计,要优先考虑教学成果奖的相关主题,其次才是学校校园风景,或是两者相结合。

Banner的设计要求简洁大方,兼具网页特色,同时由于文字较多,所放的元素不宜过多。

④导航设计

教学成果奖网站的导航栏目不多,但是每个栏目都比较长,所以一般情况下,导航栏目要单独一行显示,不与logo并排。

导航高度为50~60px,字体大小16~20px(常用18px最合适),导航要求要醒目,字体与导航背景对比明显。

图3.png

⑤ 首页调用

调用展示最少的有1个,老师会根据实际需要增加调用内容,但一般不会超过4个。

调用大部分以文本内容展示为主,所以在排版时,要注意文字排版及可阅读性。正文文本字体设置为16px为最佳,字间距为100,行距28~32,文本展示不超过6行。

文字表现方式有如下几种:

· 纯文本展示

图4.png

茂名职业技术学院-服务粤西乡村振兴的高职建筑类专业“三融三阶三新”育人模式实践创新

· 文本+图片

图5.png

四川机电职业技术学院-基于“六个一”工程的德智体美劳全面发展人才培养体系构建与实践

 

成果展示,在没有老师提供素材的情况下,建议放与项目主题或学校相关的素材,一般都是以图片的形式展示,具体表现方式如下:

· 图片列表

图6.png

茂名职业技术学院-基于智能建造技术的高职土建类专业“双高”人才培养创新实践

· 多张图片轮播

图7.png

茂名职业技术学院-服务粤西乡村振兴的高职建筑类专业“三融三阶三新”育人模式实践创新

· 图片列表+标题

图8.png

珠海城市职业技术学院-基于腾讯云工坊的新一代工匠人才培养模式探索与实践

⑥ 快速按钮设计

快速按钮的个数,在4~11个之间,常见的有4个。按钮设计要求放在版面比较显眼的地方,通过颜色、图标等设计方式,突出显示按钮,方便专家快速找到具体内容。

图9.png

茂名职业技术学院-服务粤西乡村振兴的高职建筑类专业“三融三阶三新”育人模式实践创新

⑦内页设计

网站内页,最核心的内容就是材料的展示,故需要特别注意的是banner高度不宜过高,高度为180~280px之间。

(3)版面布局排版(仅供参考)

图10.png

(4)作品赏析

①湛江幼儿师范专科学校-2021年四川省职业教育教学成果奖评审专栏

· 设计亮点:版面的背景设计立足学校幼儿教育教学特色,加上学校风景作为点缀,深化学校教学成果奖特色。

图11.jpg

②珠海城市职业技术学院-企业视域下的智能制造专业群“四维三道双平台”人才培养模式改革与实践

· 设计亮点:根据专业特色及需求调用,将元素融入整个网页当中。

图12.jpg

③茂名职业技术学院-基于粤西地区“以助农三策促教提质”的高职经管类人才培养模式实践探索

· 设计亮点:banner直接用一张图来表达出整个项目的立意,并且与网站整体颜色的搭配相得益彰。

图13.jpg

三、总结

   以上是设计好一个教学成果奖网页的要点,除了技能性的知识外,我认为需要关键掌握以下信息:

(1)明确用户需求,设计之前一定要明确用户想要的是什么,可以从风格、配色、元素方面进行了解;

(2)设计要从用户角度出发,兼顾用户群体;

(3)用心、耐心、细心:用心输出版面,能够减少返稿的几率;耐心处理用户的修改意见,能够减少修改的次数;细心挖掘设计要点,能够让自己总能在类似的需求调用中发现新的乐趣。


Copyright © 2021 成都飞时文化传播有限公司 版权所有