《UI设计》课程教学网站设计与制作
《UI设计》课程教学网站设计与制作[20191213193734]
摘 要
随着网络技术的迅猛发展，学生学习方式也在不断发生改变，而目前的设计类课程网站主要是一个课程展示平台,相关知识拓展较少，网站的交流互动性有待提高，因此建设成一个良好运转的学生学习互动交流平台迫在眉睫。
本论文首先对本网站的设计背景、设计趋势、设计意义做了简要介绍，接着对现有的精品课程网站及优秀设计网站进行了仔细的调研与分析，然后对网站系统做了详细的需求分析，之后给出了本界面设计精品课程网站所需的功能，重点探讨了精品课程网站的设计方案，并简要介绍了开发工具，本网站是基于Joomla！内容管理系统，采用PHP程序设计语言及MySQL数据库进行开发。最后对用户注册登录模块、搜索模块、评论模块、最新文章模块、最热文章模块等进行了重点详细介绍，并给出了最终界面设计效果及部分程序设计。
查看完整论文请+Q: 351916072
关键字:界面设计；精品课程；网站
目 录
摘要 I
ABSTRACT II
目 录 III
第1章 绪论 1
1.1课题背景 1
1.2设计类课程网站现状与设计趋势 2
1.3建设界面设计课程网站的意义 3
第2章 课题相关调研与分析 5
2.1界面设计 5
2.2同类课程网站案例分析 5
2.2.1国内同类课程网站案例分析 5
2.2.2国外同类课程网站案例分析 7
2.3界面设计网站案例分析 7
2.3.1国内界面设计网站案例分析 7
2.3.2国外界面设计网站案例分析 9
第3章 需求分析与整体设计 10
3.1需求分析 10
3.2栏目内容及功能设定 10
3.3网站规划与架构设计 12
3.4操作流程优化 13
第4章 网站界面视觉设计 16
4.1界面系统规划及设计 16
4.2图标系统及UI设计 17
4.3版式编排及文字设计 19
4.4系统配色方案 21
第5章 网站制作及其技术实现 25
5.1网站环境搭建及其实现 25
5.2网站开发工具 26
5.2.1Joomla！ 26
5.2.2 PHP 27
5.2.3 CSS 27
5.3网站功能模块的设计实现 27
5.3.1用户注册登录模块 27
5.3.2搜索模块 30
5.3.3评论模块 33
5.3.4最新文章模块 36
5.3.5最热文章模块 37
第6章 系统测试 39
6.1测试目的 39
6.2测试准则 39
6.3测试方法 39
6.4测试实例 39
第7章 结论 41
参考文献 42
致谢 44
图 目 录
图 1.1 国家精品课程资源网内艺术设计类精品课程及各级精品课程数 1
图 1.2 同济大学视觉传达设计课程网站 2
图 2.1 同济大学视觉传达设计网站互动交流页 6
图 2.2 Intro to the Design of Everyday Things课程网站 7
图 2.3 盒子UI首页 8
图 2.4 UI Patterns 首页 9
图 2.5 UI Patterns 博文页 9
图 3.1 界面设计网络公开课程平台系统架构图 13
图 3.2 学生（普通用户）操作流程图 14
图 3.3 教师（管理员）前台操作流程图 14
图 3.4 教师（管理员）后台操作流程图 15
图 4.1 一级页面中图片及文字效果 20
图 4.2 文章内容页中图片及文字效果 21
图 4.3 界面设计网络公开课程平台首页 22
图 5.1 WAMP界面图 25
图 5.2 响应式结构设置页面 26
图 5.3 未登录界面导航版 28
图 5.4 未登录界面网页版 28
图 5.5 导航版登录后界面 28
图 5.6 登录出错界面 28
图 5.7 搜索模块界面 31
图 5.8 搜索结果界面 31
图 5.9 登录前评论模块界面 34
图 5.10 登录后评论模块界面 34
图 5.11 最新文章模块界面 36
图 5.12 最热文章模块界面 37
表 目 录
表 3.1 栏目（一级页面）展示内容表 11
表 3.2 一级页面展示内容表 11
表 4.1 页面布局结构表 16
表 4.2 网站logo设计方案表 18
表 4.3 主要图标设计方案汇总表 18
表 4.4 鼠标点击前后及鼠标经过时的颜色变化表 23
第1章 绪论
1.1课题背景
2003年美国麻省理工大学开放课件（MITOCW）项目网站，发布了500门课程的教学课件，标志着开放课件项目正式启动。受此影响，国家教育部2003年也提出了国家级精品课程建设项目。精品课程是具有一流的教师队伍、充实的教学内容、高效的教学方法、完善的教学管理制度的示范性课程。在精品课程建设项目中，制作一个免费向社会开放教学资源的网站非常重要。精品课程网站旨在通过开放教学课件、教学视频等教学资源，达到资源共享、提高教学质量的目的。
目前，在本科教育层次，已经有20285门精品课程收录于国家精品课程资源网，其中3832门国家级精品课程、8284门省级精品课程、8169门校级精品课程。但是，艺术设计类课程仅占409门，其中国家级精品课程64门，省级精品课程181门，校级精品课程164门。由此可以得出，设计类课程网站数目较少，其建设仍处于起步阶段。
图1.1 国家精品课程资源网内艺术设计类精品课程及各级精品课程数
1.2 设计类课程网站现状及发展趋势
课程网站承担了展示教学内容、提高教师和学生之间以及学生和学生之间交流互动频率的重任，在课程建设中起到了重要作用。但是，目前的设计类课程网站主要集中于对课程概况，包括课程简介、教师团队、教学条件、教学方法、教学效果等内容的展示，课件、相关知识拓展、学生作品等内容相对较少，削弱了网站的实用性，无法形成一个良好的学生学习交流平台。以国家精品课程资源网上的省级精品课程——同济大学视觉传达设计课程为例，其课程概况详细完整，但是课程内容较为缺乏，教学课件仅有七篇，存在开发效率低、资源匮乏、未形成持续建设机制的问题。该网站并未在每篇文章下设置交流互动区域，而是重新建设一个互动交流页面，削弱了学生发表评价及回复的积极性，致使网站的交互性大打折扣，虽然可以形成一个学生学习平台，但较难形成学生交流平台，大大削弱了课程网站存在的意义。因此为改变这一现状，要以建设成一个良好运转的学生学习交流平台为目标。
图1.2 同济大学视觉传达设计课程网站
为建设成学生学习交流平台，首先需要建设成学生学习平台，提供给学生丰富的网络资源。包括课件、设计理论、设计技巧及国内设计趋势等相关设计资源拓展，使教育资源真正达到开放和共享。要以学习者为中心，充分发挥网络的特点，为学生创建一个虚拟的学习环境。将文字、图片及视频等完美地结合，使枯燥的学习变得更加生动有趣，增加学生学习的积极性和能动性。同时，课程网站必须具有不断更新内容的功能。教师或管理员可通过登录网站后台发布、删除或更新站内教育资源，保持教育内容的先进性及实时性。
其次，要建设成运转良好的学生交流平台。课程网站必须提供功能强大的交互平台，交互是整个网络课程中必不可少的环节，通过学生与教师之间及学生与学生之间的交流，解决疑难问题，促进学生对知识的理解及运用。可以通过发布优秀学生作品达到学生与学生之间互通有无的目的。也可以有规律地发布讨论话题，并提供学生交流讨论的空间。更为重要的是可以在每篇课件及其他内容后添加评论功能，鼓励学生发表对内容的思考及理解，同时也可以发表对课件的意见及建议。通过对学习者使用感受和真实评价等信息的研究分析，对网站内容进行迅速调整，完善教学内容，改善教学方法。
1.3界面设计课程网站设计与制作意义
1. 充实和完善教学内容，加快教学资源的更新和传播速度。
界面设计是一项复杂的，不同学科参与的系统工程。认知心理学、设计艺术学、语言学等学科领域的知识在其中都扮演着重要的角色。因此，作为一门跨领域学科，其包含的内容复杂多样。界面设计是一门理论及实践相互结合的课程，学生只专注于课堂时间是远远不够的，课下对理论知识的温习及根据所学内容进行实践极为重要。并且，目前的教学内容及教育方式仍有较大的漏洞。近年来，界面设计知识迅猛增长并加速更新，但是教学内容却无较大的变化，其与时俱进性仍有待提高。而随着网络的快速发展，其快捷性和普及性优势越来越明显。因此，建设界面设计课程网站对于充实和完善教学内容、加快教学资源的更新和传播速度具有重要意义。
2. 促进师生互动交流，改善教育方式，促进个性化教学。
目前的教育方式有较大的漏洞，传统科学与艺术分离、理论和实践脱节、教师和学生之间以及学生和学生之间的交流互动有待加强。同时，在人口众多的国情下，教学方式很难根据每个同学的特点进行个性化的改进。因此，建立一个学生学习交流平台迫在眉睫。在这个平台上，学生可以和教师及其他学生进行交流互动，加强对知识的理解和运用，也可以根据个人的具体情况选择性地浏览网站，温习回顾课堂内容、拓展所学知识的广度及深度。
界面设计课程网络平台建设完善了教学内容，增加了学生知识面的广度和深度。它改变了教学理念、教育模式、教学方法，促进了个性化教学。它提供给学生一个交流的平台，提高了教师及学生互动交流的频率，加强学生对所学知识的理解和应用。
第2章 课题相关调研与分析
2.1界面设计
在设计研究领域中“界面”一词的定义为：界面是一种由色彩、文字、图像、符号等视觉元素以及多媒体元素为主构成的，传达特定信息的，以方便人机交流为目的的中间媒体。由定义可以看出，视觉元素及多媒体元素的设计是界面设计的主要内容。界面设计作为计算机科学与心理学、设计艺术学、认知科学和人机工程学的交叉研究领域，其相关知识面较为宽广。因此，网站内容设计可以侧重于对视觉元素及多媒体元素这两方面的展示，同时也要能拓宽界面设计知识的广度，增加其深度。数字界面设计主要包括网页界面设计、游戏界面设计、便携电子产品界面设计、软件界面设计四大方向，因此可对其进行有针对性的阐述。
界面设计是一门理论与实践相结合的学科，因此在设计网站内容时要丰富理论基础，同时也要将理论应用于实践，将技巧与基础相结合。可针对有代表性的设计案例进行详细分析，加深学生对相关理论知识的了解，并通过课后习作等方式，增强学生的实践能力。
2.2 同类课程网站案例分析
2.2.1 国内同类课程网站案例分析
目前，国内各大高校已经在网上建设了许多设计类课程教学网站，现以上文提到的同济大学视觉传达设计网站为例进行深入分析。同济大学视觉传达设计网站采用左右结构式。左右结构式，又称二分栏式，即将网站明确地分为两侧的框架结构，左侧是导航条，最上方有标志和标题，右侧是正文，即内容部分。导航条主要分课程概况、课程内容、互动交流三个一级菜单，课程概况下设课程简介、教师团队、教学条件、教学方法、教学内容、教学效果六个二级菜单。课程内容下设教学大纲、教学课件、电子教案、教学设计、例题习题、所有资源、参考教材七个二级页面。而教学课件及电子教案中展示的内容重复。教学课件等学习资源展示形式为pdf阅读页，并可进行下载。网站中缺少与课程相关的其他资源，如视频资源、学生作品等。“互动交流界面”又分为“互动交流”及“我要发言”两个二级界面，而“互动交流”页已经有“我要发言”页面中的内容。而该互动交流页面其实就是一个留言及回复面板，与网站内容的关联性较弱。
网站主色调为蓝色，辅色调为白色，点睛色为绿色、红色、橙色。蓝色是该网站中运用得较多的颜色，作为一种比较沉静的颜色，它可以令人心境畅快，使用户较为快速地沉下心来进行学习。页面中的绿色、红色及橙色是具有较强扩张力的色彩，起到了活跃页面的作用。
图2.1 同济大学视觉传达设计网站互动交流页
综上所述，设计课程网站在设置上有很多不合理的地方，主要问题有：
摘 要
随着网络技术的迅猛发展，学生学习方式也在不断发生改变，而目前的设计类课程网站主要是一个课程展示平台,相关知识拓展较少，网站的交流互动性有待提高，因此建设成一个良好运转的学生学习互动交流平台迫在眉睫。
本论文首先对本网站的设计背景、设计趋势、设计意义做了简要介绍，接着对现有的精品课程网站及优秀设计网站进行了仔细的调研与分析，然后对网站系统做了详细的需求分析，之后给出了本界面设计精品课程网站所需的功能，重点探讨了精品课程网站的设计方案，并简要介绍了开发工具，本网站是基于Joomla！内容管理系统，采用PHP程序设计语言及MySQL数据库进行开发。最后对用户注册登录模块、搜索模块、评论模块、最新文章模块、最热文章模块等进行了重点详细介绍，并给出了最终界面设计效果及部分程序设计。
查看完整论文请+Q: 351916072
关键字:界面设计；精品课程；网站
目 录
摘要 I
ABSTRACT II
目 录 III
第1章 绪论 1
1.1课题背景 1
1.2设计类课程网站现状与设计趋势 2
1.3建设界面设计课程网站的意义 3
第2章 课题相关调研与分析 5
2.1界面设计 5
2.2同类课程网站案例分析 5
2.2.1国内同类课程网站案例分析 5
2.2.2国外同类课程网站案例分析 7
2.3界面设计网站案例分析 7
2.3.1国内界面设计网站案例分析 7
2.3.2国外界面设计网站案例分析 9
第3章 需求分析与整体设计 10
3.1需求分析 10
3.2栏目内容及功能设定 10
3.3网站规划与架构设计 12
3.4操作流程优化 13
第4章 网站界面视觉设计 16
4.1界面系统规划及设计 16
4.2图标系统及UI设计 17
4.3版式编排及文字设计 19
4.4系统配色方案 21
第5章 网站制作及其技术实现 25
5.1网站环境搭建及其实现 25
5.2网站开发工具 26
5.2.1Joomla！ 26
5.2.2 PHP 27
5.2.3 CSS 27
5.3网站功能模块的设计实现 27
5.3.1用户注册登录模块 27
5.3.2搜索模块 30
5.3.3评论模块 33
5.3.4最新文章模块 36
5.3.5最热文章模块 37
第6章 系统测试 39
6.1测试目的 39
6.2测试准则 39
6.3测试方法 39
6.4测试实例 39
第7章 结论 41
参考文献 42
致谢 44
图 目 录
图 1.1 国家精品课程资源网内艺术设计类精品课程及各级精品课程数 1
图 1.2 同济大学视觉传达设计课程网站 2
图 2.1 同济大学视觉传达设计网站互动交流页 6
图 2.2 Intro to the Design of Everyday Things课程网站 7
图 2.3 盒子UI首页 8
图 2.4 UI Patterns 首页 9
图 2.5 UI Patterns 博文页 9
图 3.1 界面设计网络公开课程平台系统架构图 13
图 3.2 学生（普通用户）操作流程图 14
图 3.3 教师（管理员）前台操作流程图 14
图 3.4 教师（管理员）后台操作流程图 15
图 4.1 一级页面中图片及文字效果 20
图 4.2 文章内容页中图片及文字效果 21
图 4.3 界面设计网络公开课程平台首页 22
图 5.1 WAMP界面图 25
图 5.2 响应式结构设置页面 26
图 5.3 未登录界面导航版 28
图 5.4 未登录界面网页版 28
图 5.5 导航版登录后界面 28
图 5.6 登录出错界面 28
图 5.7 搜索模块界面 31
图 5.8 搜索结果界面 31
图 5.9 登录前评论模块界面 34
图 5.10 登录后评论模块界面 34
图 5.11 最新文章模块界面 36
图 5.12 最热文章模块界面 37
表 目 录
表 3.1 栏目（一级页面）展示内容表 11
表 3.2 一级页面展示内容表 11
表 4.1 页面布局结构表 16
表 4.2 网站logo设计方案表 18
表 4.3 主要图标设计方案汇总表 18
表 4.4 鼠标点击前后及鼠标经过时的颜色变化表 23
第1章 绪论
1.1课题背景
2003年美国麻省理工大学开放课件（MITOCW）项目网站，发布了500门课程的教学课件，标志着开放课件项目正式启动。受此影响，国家教育部2003年也提出了国家级精品课程建设项目。精品课程是具有一流的教师队伍、充实的教学内容、高效的教学方法、完善的教学管理制度的示范性课程。在精品课程建设项目中，制作一个免费向社会开放教学资源的网站非常重要。精品课程网站旨在通过开放教学课件、教学视频等教学资源，达到资源共享、提高教学质量的目的。
目前，在本科教育层次，已经有20285门精品课程收录于国家精品课程资源网，其中3832门国家级精品课程、8284门省级精品课程、8169门校级精品课程。但是，艺术设计类课程仅占409门，其中国家级精品课程64门，省级精品课程181门，校级精品课程164门。由此可以得出，设计类课程网站数目较少，其建设仍处于起步阶段。
图1.1 国家精品课程资源网内艺术设计类精品课程及各级精品课程数
1.2 设计类课程网站现状及发展趋势
课程网站承担了展示教学内容、提高教师和学生之间以及学生和学生之间交流互动频率的重任，在课程建设中起到了重要作用。但是，目前的设计类课程网站主要集中于对课程概况，包括课程简介、教师团队、教学条件、教学方法、教学效果等内容的展示，课件、相关知识拓展、学生作品等内容相对较少，削弱了网站的实用性，无法形成一个良好的学生学习交流平台。以国家精品课程资源网上的省级精品课程——同济大学视觉传达设计课程为例，其课程概况详细完整，但是课程内容较为缺乏，教学课件仅有七篇，存在开发效率低、资源匮乏、未形成持续建设机制的问题。该网站并未在每篇文章下设置交流互动区域，而是重新建设一个互动交流页面，削弱了学生发表评价及回复的积极性，致使网站的交互性大打折扣，虽然可以形成一个学生学习平台，但较难形成学生交流平台，大大削弱了课程网站存在的意义。因此为改变这一现状，要以建设成一个良好运转的学生学习交流平台为目标。
图1.2 同济大学视觉传达设计课程网站
为建设成学生学习交流平台，首先需要建设成学生学习平台，提供给学生丰富的网络资源。包括课件、设计理论、设计技巧及国内设计趋势等相关设计资源拓展，使教育资源真正达到开放和共享。要以学习者为中心，充分发挥网络的特点，为学生创建一个虚拟的学习环境。将文字、图片及视频等完美地结合，使枯燥的学习变得更加生动有趣，增加学生学习的积极性和能动性。同时，课程网站必须具有不断更新内容的功能。教师或管理员可通过登录网站后台发布、删除或更新站内教育资源，保持教育内容的先进性及实时性。
其次，要建设成运转良好的学生交流平台。课程网站必须提供功能强大的交互平台，交互是整个网络课程中必不可少的环节，通过学生与教师之间及学生与学生之间的交流，解决疑难问题，促进学生对知识的理解及运用。可以通过发布优秀学生作品达到学生与学生之间互通有无的目的。也可以有规律地发布讨论话题，并提供学生交流讨论的空间。更为重要的是可以在每篇课件及其他内容后添加评论功能，鼓励学生发表对内容的思考及理解，同时也可以发表对课件的意见及建议。通过对学习者使用感受和真实评价等信息的研究分析，对网站内容进行迅速调整，完善教学内容，改善教学方法。
1.3界面设计课程网站设计与制作意义
1. 充实和完善教学内容，加快教学资源的更新和传播速度。
界面设计是一项复杂的，不同学科参与的系统工程。认知心理学、设计艺术学、语言学等学科领域的知识在其中都扮演着重要的角色。因此，作为一门跨领域学科，其包含的内容复杂多样。界面设计是一门理论及实践相互结合的课程，学生只专注于课堂时间是远远不够的，课下对理论知识的温习及根据所学内容进行实践极为重要。并且，目前的教学内容及教育方式仍有较大的漏洞。近年来，界面设计知识迅猛增长并加速更新，但是教学内容却无较大的变化，其与时俱进性仍有待提高。而随着网络的快速发展，其快捷性和普及性优势越来越明显。因此，建设界面设计课程网站对于充实和完善教学内容、加快教学资源的更新和传播速度具有重要意义。
2. 促进师生互动交流，改善教育方式，促进个性化教学。
目前的教育方式有较大的漏洞，传统科学与艺术分离、理论和实践脱节、教师和学生之间以及学生和学生之间的交流互动有待加强。同时，在人口众多的国情下，教学方式很难根据每个同学的特点进行个性化的改进。因此，建立一个学生学习交流平台迫在眉睫。在这个平台上，学生可以和教师及其他学生进行交流互动，加强对知识的理解和运用，也可以根据个人的具体情况选择性地浏览网站，温习回顾课堂内容、拓展所学知识的广度及深度。
界面设计课程网络平台建设完善了教学内容，增加了学生知识面的广度和深度。它改变了教学理念、教育模式、教学方法，促进了个性化教学。它提供给学生一个交流的平台，提高了教师及学生互动交流的频率，加强学生对所学知识的理解和应用。
第2章 课题相关调研与分析
2.1界面设计
在设计研究领域中“界面”一词的定义为：界面是一种由色彩、文字、图像、符号等视觉元素以及多媒体元素为主构成的，传达特定信息的，以方便人机交流为目的的中间媒体。由定义可以看出，视觉元素及多媒体元素的设计是界面设计的主要内容。界面设计作为计算机科学与心理学、设计艺术学、认知科学和人机工程学的交叉研究领域，其相关知识面较为宽广。因此，网站内容设计可以侧重于对视觉元素及多媒体元素这两方面的展示，同时也要能拓宽界面设计知识的广度，增加其深度。数字界面设计主要包括网页界面设计、游戏界面设计、便携电子产品界面设计、软件界面设计四大方向，因此可对其进行有针对性的阐述。
界面设计是一门理论与实践相结合的学科，因此在设计网站内容时要丰富理论基础，同时也要将理论应用于实践，将技巧与基础相结合。可针对有代表性的设计案例进行详细分析，加深学生对相关理论知识的了解，并通过课后习作等方式，增强学生的实践能力。
2.2 同类课程网站案例分析
2.2.1 国内同类课程网站案例分析
目前，国内各大高校已经在网上建设了许多设计类课程教学网站，现以上文提到的同济大学视觉传达设计网站为例进行深入分析。同济大学视觉传达设计网站采用左右结构式。左右结构式，又称二分栏式，即将网站明确地分为两侧的框架结构，左侧是导航条，最上方有标志和标题，右侧是正文，即内容部分。导航条主要分课程概况、课程内容、互动交流三个一级菜单，课程概况下设课程简介、教师团队、教学条件、教学方法、教学内容、教学效果六个二级菜单。课程内容下设教学大纲、教学课件、电子教案、教学设计、例题习题、所有资源、参考教材七个二级页面。而教学课件及电子教案中展示的内容重复。教学课件等学习资源展示形式为pdf阅读页，并可进行下载。网站中缺少与课程相关的其他资源，如视频资源、学生作品等。“互动交流界面”又分为“互动交流”及“我要发言”两个二级界面，而“互动交流”页已经有“我要发言”页面中的内容。而该互动交流页面其实就是一个留言及回复面板，与网站内容的关联性较弱。
网站主色调为蓝色，辅色调为白色，点睛色为绿色、红色、橙色。蓝色是该网站中运用得较多的颜色，作为一种比较沉静的颜色，它可以令人心境畅快，使用户较为快速地沉下心来进行学习。页面中的绿色、红色及橙色是具有较强扩张力的色彩，起到了活跃页面的作用。
图2.1 同济大学视觉传达设计网站互动交流页
综上所述，设计课程网站在设置上有很多不合理的地方，主要问题有：
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/ysl/szmt/1.html
