国内外高校门户网站的交互式研究.pptx

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2019/11/6,#,高校门户网站是高校建立的学校内外公共服务的网络信息平台，但是国内高校的信息化建设却是标准不一、管理系统林立。高校门户网站是实现教育资源分配的桥梁网络有巨大的教育资源库，众多的资源找起来却很不方便。高校门户网站的交互式设计不仅能让地区内的人们了解学校在互联网络高速发展的今天，高校门户网站的制作正成为学校进行形象展示、信息发布、业务拓展、网站服务、内部沟通的重要阵地，它不但具有快捷、无距离及随时随地均可更新的特性，更能提供一些互动性的功能。符合互联网即时互动的发展趋势。,项目背景调查,第,2,页,/,共,21,页,网站功能调查,公告功能：,教师能够随时更新公告板内容，发布教学信息，包括课程安排、授课通知、教学进度，并在网上发布作业，包括发布作业题目、内容、作业完成时间等等。,下载中心：,教师在网上发布媒体课件、教案、授课计划等等的教学资料。学生通过下载中心可以下载这些教学资料。,BBS,学习论坛：,学生可以在论坛谈中发表、浏览文章，寻求帮助，教师可以在论坛里解答疑惑,;,聊天室实现了实时答疑功能，而,BBS,论坛则实现了非实时答疑。,在线辅导以聊天室,的形式实现教师对学生的实时在线辅导，当教师和学生登录到聊天室后，通过键盘或麦克风相互实事讨论。,作业功能：,教师接受学生上传的作业，通过公告板发布批改信息，学生查询批改结果。,网上调查：,就学习难点等问题，进行网上投票，并统计，为教学活动提供参考。,第,3,页,/,共,21,页,国内外高校门户网站进行对比与研究,初期考察时，我们对比了国内外高校主页交互式设计的优缺点。我们主要从排版布局和互动性这两点进行了分析。,一、国内外高校门户网站截图分析比较,二、排版布局,三、互动性,第,4,页,/,共,21,页,图 片,国内外高校门户网站截图分析比较,牛津大学,使用一种简单的配色方案和清洁的布局，使负空间充分了利用。,第,5,页,/,共,21,页,图 片,国内外高校门户网站截图分析比较,英国利兹大学,有一个简单的布局，简约美学，和良好的板式。他们还利用优良的图标，以简化导航,。,第,6,页,/,共,21,页,图 片,国内外高校门户网站截图分析比较,内布拉斯加州卫斯理大学,此大学是那里最漂亮的大学网站之一，拥有梦幻般的背景图像和卓越的排版。,第,7,页,/,共,21,页,图 片,国内外高校门户网站截图分析比较,总结：,国外的学术思想相对比较宽松自由，而国内的则比较严谨教条。这是导致国内外高效主页上产生鲜明差,别的比较重要的原因。,第,8,页,/,共,21,页,波尔州立大学采用了先进的配色方案和字体与负足够的空间相结合。,本宁顿学院采用独特的布局和设计。,伯里亚学院使用一个干净的布局，并在导航栏上的标志剪影真的套它拆开。,在赫尔大学有一个独特的布局，简单的导航和巨大的辅助功能。,英国利兹大学有一个简单的布局，简约美学，和良好的版式。他们还利用优良的图标，以简化导航。,伯恩茅斯大学使用明亮的颜色和标签导航口音。,一个简单的配色方案和清洁，基于网格的布局给人以内布拉斯加林肯大学的网站和精密抛光的外观。,大背景图片和非标导航设置罗切斯特大学的网站外。,凯斯西保留地大学采用独特的布局和颜色选择。,尚普兰学院采用先进，静音配色方案和优秀的字体。,科尔比-索耶学院有一个简单的负足够的空间布局。边山大学有一个标题幻灯片，最低限度的调色板，以及大量的负空间,第,9,页,/,共,21,页,国内的高校主页布局条理比较清晰、分类明确，浏览起来方便快捷，一目了然。但是在主页的装饰格局上比较呆板单调，我们观察了一些国内高校的主页后发现，各大高校的主页都似曾相识，没有特色，在主页的用色上也比较单一，几乎都为最简洁的白色。,国外的一些高校的主页，则各有不同，个性鲜明。不论是在布局还是用色上，都有自己的学校特色。但是在分类条理上，不如国内的一些高校那样清晰。,国内网站注重单方面的介绍，类似于说教性的展示。虽然信息分类等比较清晰。但是提取信息重点起来比较难，因为比较枯燥。,国外的在互动性这一点就比较强，图文并用，生动好看，而且国外的主页通常都会有一些知名社交网站的链接，如推特、facebook等，可以更好的方便人们了解交流学校的一些相关内容。,一、排版布局,二、互动性,第,10,页,/,共,21,页,关于扁平化设计,一、扁平化设计简介,二、扁平化设计的启发及运用方法,三、如何做到做到交互扁平化,第,11,页,/,共,21,页,一、扁平化设计简介,随着网站和应用程序在许多平台涵盖了越来越多不同的屏幕尺寸，设计正朝着更加扁平化的设计上发展，一次性保证在所有的屏幕尺寸上它会很好看，扁平化设计更加简约，条理清晰，最重要的一点是，更好的适应性。,扁平化设计具有着哟中让人心醉的魅力，没有大量的修饰，它能以一个简单只把的方式来传递一个信息或者帮助一个产品一级思想变得更加深入人心。,第,12,页,/,共,21,页,二、扁平化设计的启发及运用方法,启发方法,描述,系统状态的可见性,系统要在合适的时间内，通过适当的反馈，始终让用户知道当前的状况。,实现系统与真实世界的匹配,系统应该使用用户的语言，包括用户熟悉的单词、词组和概念，而不是系统用语，遵循真实世界的习惯，使信息的表达自然且有逻辑。,用户的操控和自由,用户经常由于操作失误而选择某项功能，需要明确标示,“,紧急出口,”,，以便离开不需要的状态，而无须经历更多的来回对话。支持撤销和重复功能。,一致性和标准化,用户不必去想不同的单词，状态或者操作是否相同一件事情。要遵循操作平台的惯例。,错误预防,通过谨慎的设计预防错误发生比设计一项好的错误提示信息更有益处。,认知而不是记忆,保持对象、动作和选项的可见性。用户不必去会相对话中的某部分信息。系统的使用和指示应该清楚易见。能够在任何需要的时候轻而易举地被追溯到。,灵活性和使用频率,加速器，新手看不到，但是它可以帮助专业用户和系统之间的互动，这样，系统就可以迎合新老用户。要允许用户根据自己的所需设置常用操作。,审美和极简主义设计,对话不需要包含无关或无用的信息。对话中多余的信息单元会跟有关的信息单元做竞争，而相对减少有用信息的可见性。,帮助用户确认，诊断，纠正错误,错误提示应该用直白的语言标识（不要用编码），精确地标示出问题，提出建设性的解决方法。,提供必要的帮助和文档,如果无需文档也可以使用系统，虽然这样很好，但是提供帮助和文档可能是必要的。此类短信应该易搜索，针对用户任务，列出执行的主要步骤，而且信息不要太多。,第,13,页,/,共,21,页,三、如何做到交互扁平化,1.结构层次减少,从表面上来理解“扁平化”，也就是“结构层次”。在这里我们理解为交互步骤，以前也一直在强调交互步骤，想要用户最少的步骤就可以完成任务，所以减少了步骤，减少了时间。,视觉结构对于信息架构起着至关重要的作用，因为视觉结构中承载着信息，所以在某种程度上它也起到诠释、部分验证信息架构是否合理的作用。换句话说，信息架构如果考虑不明白，视觉结构做得再好也没用。,2.表达方式直白准确,尽量不要使用专业术语，不便于理解。,3.信息直观、有序,整理的前提是分类，不分类就会出现散乱，不规整的情况。干净整洁有序，永远比脏乱无章更让人赏心悦目，及时在信息量很大的情况下，在有序的环境里面找起来也方便快捷。,第,14,页,/,共,21,页,以苏州科技学院门户网站为例进行设计与分析,国内高校门户网站图像质量整体较低，在图像运用方面比较呆板。首页图片素材大都是楼宇建筑，会议讲座，活动现场等素材，题材比较局限，不能够给人深刻印象，且容易视觉疲劳。,以下是我们组借鉴学习优秀的高校门户网站的长处并设计出的，以苏州科技学院为例的门户网站设计截图。,第,15,页,/,共,21,页,图 片,截图,首页,我们色彩方面以灰色和蓝绿色为主，以纸质感和简化的苏州特色的房屋简笔的图案为背景。网页和背景相融合。充分的表达了“天堂学府”的特点。,布局深浅不同的灰色块面具有层次感，和谐感。蓝绿色为标题比较醒目，一目了然，减少了浏览者寻找的负担。简单的设计更容易使用和理解，信息传播也更加明确。,第,16,页,/,共,21,页,图 片,截图,学校概况,网页内容直接在当前页面切换，没有转跳，减少获取信息的时间。有效的整理信息，减少层级结构，功能表达方式直白。是现在交互式设计的重点。,在页面右上角放置了新浪微博，百度，QQ空间等网址链接，把这些网址作为重要的沟通工具增加用户与学校之间的持续联系，分享一切，强化交流互动提，而目前国内高校门户网站中只有少数网站提供了移动应用，如复旦大学,中国人民大学等。,第,17,页,/,共,21,页,图 片,截图,校园文化,对于那些复杂的关系和比例，纯文本是很难表达的，图形是一种很好的沟通的方式。资讯图像往往有一个简单而丰富的视觉外观，,第,18,页,/,共,21,页,图 片,截图,科学研究,第,19,页,/,共,21,页,我们小组通过对国内外高校优秀门户网站的分析与研究，对这些网站进行访问与研究分析。在这个过程中,除了学习和借鉴国内外优秀网站作品的设计经验,更要注重从艺术设计的角度对高校门户网站建设进行分析研究，改善学校网站的设计布局，从艺术设计的角度出发，进行交互设计，使学校网站更加的人性化。我们将会对国内外部分高校门户网站的排版设计，界面设计，网站的设计，提出改良建议、并运用于我们的设计中。,小结,第,20,页,/,共,21,页,免,指导老师：陈卫东，刘志文,谢谢！,小组成员：陈姬秀、刘颖、周瑜、陆梓豪、杨军杰,第,21,页,/,共,21,页,