网页界面设计论文范文

引言：寻求写作上的突破？我们特意为您精选了12篇网页界面设计论文范文，希望这些范文能够成为您写作时的参考，帮助您的文章更加丰富和深入。

篇1

引言

格式塔一词来源于德文“Gestalt”的音译，本意指的是形式、形状、方式、实质。格式塔心理学是一种与艺术有缘的心理学理论，其主要目标是探讨视觉感知及其与学习、思维的关系，它所研究的出发点就是“形”，“形”是经由知觉活动组织成的经验中的整体，与视知觉活动密不可分。而网页界面设计是视觉传达设计向网络媒体的延伸，主要是通过浏览者的视觉感知来接受网站信息。因此，研究格式塔理论在网页界面设计中的运用，无疑对网页界面的设计具有很大的指导作用。

格式塔理论在网页界面设计中的应用

网页设计是将特定的视觉信息要素，根据主题表达的需求在特定的页面上进行的一种编辑和安排，其基础是视觉生理学和视觉心理学。格式塔心理学派通过对视觉感知的生理研究，提出了一系列视感知规律，其中包含了“图底”这个核心概念，和“简明原则”“接近原则”“相似原则”“闭合原则”等视感知特性，将这些规律引入页面设计，有助于我们优化视觉时代“形象过剩”状态下盲目的网页设计，提高信息传达的速度与准确度。

1.图与底

在人的知觉系统中最基本的一种知觉能力是在图形与背景间作出区分。“图”是居于前部的区域，“底”被看成是用来衬托图的背景。相对而言，图比底，轮廓较为完整、封闭，形状较为规则，面积比较小，色彩比较鲜艳；此外，更重要的是，能组织成为一定意义的区域倾向于被感觉成图。

由于图与底之间存在的这种相对性质，在网页设计中，应当明确区分图与底，主体与背景。另外,主体自身结构要清晰明了，背景不能过于复杂，这样才有利于浏览者辨别需要了解的信息。在背景的色彩搭配上应尽量选用同一色系的颜色，尽量避免同时使用色相环中相对的颜色，大面积同一颜色宜采用低对比度，避免用强烈刺激的颜色引起浏览者的视觉疲劳与厌烦情绪。格式塔理论的图－底规则不仅说明了主体从背景中分离出来的条件,而且指出了背景在一个格式塔中的重要作用。因此在网页设计中我们同样不能忽视背景的作用，图形是依赖于背景而存在的，要使主体感到存在，必然要有底将它衬托出来。因此无论在文字、色彩、图像，还是动画和视频方面都要坚持图底原则。

2.简明原则

格式塔心理学家认为，人们的知觉有一种“简化”倾向，所谓简化并非仅指一般意义上的“简单”，即物体中包含的成分少或成分之间的关系简单，而是一种将任何刺激以尽可能简单的机构组织起来的倾向。我们的眼睛只能接受少数几个不相关联的整体单位，如果一个格式塔中包括太多不相关的单位，眼睛就会试图将其简化，把各个单位加以组合，使之成为一个知觉上易于处理的整体，否则，整体形象将无法被正确感知，这种形象势必会被人们忽视，以至拒绝接受。

我们可以将这一观点延伸到网页界面设计中。首先，在网页界面结构的设计上，应避免使用过于复杂的网格结构，结构的设置应尽量简单明了，符合人的视觉流程，也符合人们对规则形的喜好，利于浏览者以最短的时间找到最需要的信息。

其次，在图像的选择上，应避免使用过于繁复杂乱的、容易分散浏览者注意力的图像，这样会增加浏览者找寻信息的难度。

再次，在进行文字编辑时，应该考虑编辑的最终效果。文字应给人以清晰的视觉印象，避免页面繁杂凌乱，减少不必要的装饰变化，使人易认、易懂、易读，不能为造型而编辑，忘记了文字本身是传达内容和表达信息的主体。在字体的选择上，虽然可供选择的字体很多，但同一页面上的字体种类最多只能有三四种，这样才不会显得花哨。字体的选择应依据段落大小和内容层次,由重到轻、由粗到细。字号的选择也应该依据内容层次由大到小，但到了节以下的层面，可以选用同一字号但用不同的字体加以区分。在文本密度方面，文本应该以短小的组块形式出现，并且应该经过编辑，以简化内容。3.接近原则和相似原则

接近原则和相似原则的本质上都是简化和整体化知觉对象的组织原则，与前面的简明原则类似，人们在倾向于简化认识对象的同时，也倾向于将近似、接近的元素组合起来作为一个整体加以认知。也就是说如果不同的文字或图形组成部分位置靠近，浏览者就比较容易看出它们是一起的。根据这一原理，对于页面上的任何元素，如果在功能或内容上是相同或相近的，就应在一定程度上保持相对较小的空间距离，做到“物以类聚”。比如，页面中用以解释图形或用以表明某一部分图形的文字就应当紧挨其所指的图形或部分图形。

相似的物体也很容易被认为是从属于一个系统，具有相似的功能。因而，需要通过将浏览者注意力集中于视觉范围内的关键概念，帮助他们获得信息。在网页界面设计中，可以通过强调、动画、对比色的使用或其他手段达到这一目的。假如一个图形中的组成部分都属于同一风格，这个图形就被视为一个整体。为了使浏览者重点关注图形中的特定部分，对这一部分可采用不同的颜色、动画、闪烁或其他区分方式。但是，如果一幅画面中区别过多，也会使浏览者难以注意需要获得的信息。因此，这些方法应该用于强调关键信息或图形的关键部分，而不宜用于大片信息。

4.闭合原则与网页界面设计

闭合原则是指一种完成某种完形的行动。这一规则表明，每一种视觉样式都可以被看成是一种陈述，对于模棱两可的视觉样式，人们会根据以往的经验按照不同的样式加以组织，这时不同的人会看到不同的东西。因此，在网页界面设计时,应当避免出现不完整的图形，以免使浏览者花费过多的时间去琢磨图形的含义，而不是从网页上获取信息。

闭合规则还表明,视觉形象被知觉的形式是首先作为一个统一的整体被知觉，然后再以部分的形式被知觉。因此，在进行网页界面设计时，要强调整体风格的统一，内容与形式的统一。

结语

将格式塔心理学引入网页界面设计，目的是希望网页设计向理性化的方向发展。随着网络的不断发展，浏览者对页面的要求也越来越高，但现在的页面设计大多还是从直觉出发，离科学的页面设计还有相当大的距离，因此要想达到科学的页面设计，就要在设计时遵照人类的认知规律，并且将这些规律正确地应用到设计实践中。而如何将格式塔理论与设计结合起来,仍是我们需要投入大量精力去研究与探讨的问题。

参考文献：

[1]曹方著.视觉传达设计原理，江苏美术出版社

篇2

随着移动通信技术的高速发展和信息终端设备被人们所广泛适用，过去由电脑作为主要的网络信息共享、传递、存储设备的方式已逐步被多元化的设备形式所分流。人们不再需要保持在固定的网络环境中，就可以随心所欲地依靠自身携带的智能移动设备终端随时随地地享受互联网带来的便捷。而以个人电脑、智能手机、平板电脑等为重要代表的多元化设备形式被广泛应用，其最为显著的变化表现为基于各个设备中的屏幕大小和输入输出的呈现方式上的差异化，也使得界面设计的表达方式和表现形式变得更加复杂多变。介于这样的多设备模式的发展情况，今后的发展方向想必是更加多元而又复杂多变的。

1 多设备时代下的界面变化

基于同一界面设计表现在不同的设备及其操作平台所表现出来的差异化，使得我们在设计中如何适应这些多元性进行有效呈现，从而为用户提供更好的操作体验则成为了重中之重。压力感应屏已逐步投入量产，即可预知会有越来越多的不同类型的高科技设备等着我们。而在多元化的趋势之下，作为设计工作者必须具备的前沿就要求我们需要以现在和未来的角度来观察这些设备的多元性造成的现象。我们抛开不同的设备所呈现的处理器运算速度和操作系统差异化等硬件设备的条件限制，影响界面设计的物理性因素是基本相同的，其中就主要包含了屏幕的大小尺寸（屏幕尺寸一般由屏幕物理尺寸、屏幕分辨率和屏幕密度所影响）、屏幕的长宽比例、设备的操作方式、输入输出方式等等。

就目前网络环境而言：我们现有的解决方法基本是利用自适应界面模式进行界面设计：根据设备界面的差异性产生的不同需求和其运行的环境进行自动化裁减，用以定制系统的显示和交互行为。但这也只能在一定区域范围内进行有效的自适应变化，设备界面差异过大也是无法完全兼顾的，而对于过于繁杂的界面构成体系甚至会造成系统的负担。因为随着未来数字媒体产业的发展变化，越来越多设备类型蜂涌而出，就单一设备形式去设计其专有界面模式是难以完成的。自适应用户界面就是在满足设备差异化的前提下，提供一种折中的方式去极大限度展现内容的有效手段。而现有的“响应式网页设计”就是依照设备屏幕的宽度，提供最佳版面设计的自适应界面模式中的一种表现方法：以一个HTML用以支持多种屏幕尺寸不同的设备。以一个设备模块自适应于多个屏幕设定，预先根据屏幕尺寸大小设定几个切换版面的页面尺寸的断点，让版面在断点前后的尺寸产生较大的变化，进一步设定切换基准以契合更多得屏幕进行版式设计。尤其是优秀的自适应界面方式：不但可以通过这样的折中方式用户界面进行精简，还可以及其有效地提升工作效率和用户满意度，更从容的应对用户不断变化的需求。因此智能移动终端的自适应界面有较广阔的应用空间，成为解决移动端设备多样性的重要方式。

正是响应式网页设计这样的设定方式，使得网页的显示一样会有适用和不适用的问题，如若网站本身的结构太过复杂，就会导致系统难以应付造成一定的界面混乱。鉴于这样的表现模式所呈现出来的限定性，对网页设计中的界面表现也就有所要求。而就目前的技术而言，未能有根据各种终端设备最优化网页的解决方法。因此，如何通过界面设计自适应于多设备的显示应用也成为了网页设计中重要的一步。

2 设备变化造成的视觉化影响

在某种程度上正是因为这样的多设备带来的变化，设计中的网格化框架就显得尤为重要了。而界面设计（尤其是网页设计）在设计当中，不管版式再怎么多元化，其使用的版式还是基本以网格化模式进行划分的。而一般来说，内容越是复杂，所使用的版式也就越是相通。而这样的网格化组织模式也为我们界面板块化发展奠定了基础。区域的板块化的一致性划分不但能够极大程度的为用户在进行页面浏览的时候提供便利，而且在一定程度上压缩了版面的使用面积。因为区域的板块化划分，实际上也就是在一定程度上划分了其板块的视觉一致性、操作行为一致性、目标的一致性、表现方式一致性。

尤其是板块的视觉一致性尤为显著。我们通过视觉元素的趋同化来保持界面的一致性，其实也是在一定程度上对其信息内容进行了分类，为整合版面提供了基础。其中，视觉符号作为信息传达的重要载体，界面设计者通过视觉化的形式表现去传递信息的功能，以达到形式与内容的统一。界面用户也通过元素的联系性来判断所处浏览界面的位置。而换掉的元素越多，说明内容的关联性越小。掌握页面的“变化量”是能够让用户单就经验就足以获知页面逻辑关系的视觉方式。在界面设计中运用这样形式化的视觉表现形式很好地将整个界面的逻辑关系客观地呈现出来，以供人们能够很好地寻找到网页之间的参照关系和逻辑上的直觉感。通过这样的一致化的表现方式可以在一定程度上整合各资源内容：一是为版面网格化划分提供条件，二是在视觉层面上为受众提供直觉引导，为操作提供便利。

3 操作方式与交互式变化

过去的个人电脑是较为单纯的信息交流存储设备，现在的设备更多元，种类也变得更加复杂。随着手机、平板电脑为代表的数码产品高频率地更新换代。不但如此，随着微软Surface系列等个人电脑的普及应用，触摸式设备几近成为界面设备主流，可想而知其发展空间之巨大。设备更新换代，尤其是屏幕的变化对用户的操作行为模式的影响也是最直接的。在操作行为的引导下，也在一定程度上决定了视觉板块划分。最直接的变化就是：我们从精确点击转化为触摸式滑动、拖拽、轻击...当然，这也为越来越多的交互式界面提供了设备基础。我们虽然需要为精确点击转化为手动触摸提供更多的选择区域（在某种程度上需扩大点击的选择区域，缩小了可用率。），以便不失去其本该有的点击准确率。与此同时，触摸屏控制手势的加入也大大的弱化了人机之间的距离，交互性不由而生。对比鼠标的左右二键和滚轮，手势的变化就显得更为丰富而多变了。不但在一定程度上增加了的可塑性，交互式的出现也极大地影响了界面的版式划分：比如隐藏式信息栏，俨然变成为一种主流的导航设置方式应用于各界面设计当中。这无疑在很大程度上改变了界面设计中对屏幕大小、尺寸比例的限制，大幅地增加了版面设计的自由度和灵活性。界面与界面之间的翻转滑动变得简单起来。它消除了界面和界面之间作为个独立的页面而存在的方式，内容的直观连贯就变得轻而易举起来。同时，这也为界面的交互式延伸及转化提供了更为有利的条件。

4 结语

在这个第四媒体广为适用的时代，科技的进步带来的信息全球化可显其重要性。而科技的可贵之处便在于在其不断的变化发展中彰显其价值所在，每一次的发展进步都给我们的体验带来了或大或小的改变。界面设计作为科技显现的重要视觉化表现方式，如何在这样一个发展中的多设备时代下，保持其时代的一致性就变得尤为重要。本文希望通过对多设备时代下设备的差异性对设备变化造成的视觉化及其操作方式变化带来的一系列变化进行个简要分析。

参考文献：

篇3

1、网页界面设计的现状和问题

近年来，随着网络的广泛普及，网站已然成为人们吸收了解外界的载体，人们通过上网浏览网页便可以做到足不出户就可以获得所需要的信息和物品，网购行业也随之快速的发展起来，这是因为网页可以承载图片、色彩、文字等多种元素，能够提供给浏览者足够的信息，方便了人们的生活。但是网页设计迅猛发展的同时，也产生了整体水平良莠不齐的问题：1.信息多且杂乱无序，把相关的信息和元素全部罗列出来，不分层次和重点，没有规范性，有多少内容就挤多少内容，使浏览者难以快速找到所需信息；2.喧宾夺主的设计，使用花哨的图案作为背景，干扰读者的视线。有些网站为了追求视觉的冲击力，放一些绚丽的，风格各异的图片，导致网页调性不统一，整体性差；3.一味的追求视觉美感而忽略网站的实用性，凸显不出产品的优势和特点，缺少与浏览者的互动性。视觉效果固然重要，但是一味的追求视觉效果是否真的能够提高网站浏览量和产品销售量？

我认为网页界面设计应该符合美观性和实用性双重要求。简约主义下的网页设计已经不能单纯的追求信息承载量，有一些网站把企业简介、企业荣誉和资质，全都展现在一级页面的位置，长篇大论的写公司的优势获得的荣誉，希望消费者一下子就能够了解自己的公司实力，反而将消费者更加关注的各类产品和主要信息模糊放在在一起，看似信息多了丰富了，效果却恰恰相反，这让很多消费者很难在网站里快速找到所需的信息，浏览者更是不会看长篇的介绍，这不仅没有让消费者了解自己，还会引起消费者的反感导致销量减少。简约主义下的网页设计也不能够单纯的追求色彩，绚丽画面，过多的颜色会扰乱消费者的视线，找不到重点，反而体会不到视觉的美感，从而降低了用户体验。

2、简约主义在网站设计中的应用（结合苹果官网分析）

简约主义源于是20世纪西方现代主义，欧洲现代主义建筑大师与设计大师米斯・凡德罗所提出的“少即是多”的理论，换句话说就是把设计简化，强调它本身内在的东西。这一理论被称为简约主义的核心。当今社会，人们工作强度高，节奏快生活压力大，人们需要一种可以互补的东西来调节神经高压。简约主义以简洁的表现形式来满足人们对产品那种感性的、本能的和理性的需求，符合了当今人们快节奏、高效率和高审美的要求，越来越多的设计师把眼光放在了简约主义风格的设计上，网页设计在简约主义风格的影响下也发展迅速。以苹果官网为例，苹果公司一直追求简而精的风格――简约主义风格。自乔布斯iPhone4，苹果官网界面设计风格越发简约。苹果官网新推出的产品――苹果7为例，风格依旧遵循着简约风格，整个页面除了黑色，找不到其它的色彩，网页上没有放置很多的文字内容，也没有很多绚丽的图片和色彩，通过极致的黑色和几根流畅的线条充分的展现出苹果7的简约奢华和精致，一张满屏幕的产品大图不用长篇文字的描述就已经让人感受到苹果公司强大的实力，这种简约风格的形式远比那些人们从不会去阅读的长篇大论更有力量！更有说服力！更加吸引浏览者的眼球！大大增强了消费者的购买欲望。然而单纯的追求简约主义设计风格，简约的画面和几张高精大图就是提高网页浏览量和销售量的关键吗？显然不是。

3、简约主义风格下如何与浏览者产生互动，提高用户体验

简约的画面只是网站设计最终显示出的效果，在网站设计过程中不仅仅只是考虑网站设计的画面效果，当然画面效果也很重要，但更重要的是要考虑消费者和浏览者在浏览网页的时候能否产生良好互动和用户体验。在简约主义风格下，如何才能与浏览者产生互动，提高用户体验呢？1.增加细节的设计。细节决定成败，网页设计也是如此。2. 建立清晰的视觉信息导向，使浏览者在众多同类产品中能够快速明确的定位所需要的信息。

简约主义下的网页设计不是空洞的，单调的而是让人感受舒适、放松的设计。简约主义风格的网页设计细节处理是非常重要的。如何才能做到网站设计细节丰富，版式简约，有内涵而不繁琐，有形式而又实用呢？ 以云米官网为例，云米净水器网页设计综合了视觉、布局、交互综合设计方法。用扁平化的图标设计代替了人们看不懂的数据表格，因为产品特点和优势不仅仅是一句话就能够让人信服的，需要用人们能理解的语言展示出来，才更有说服力。用图片的形式展示产品结构更清晰更加直观，从视觉上提升了科技感和冲击性。将实用性与美观性相结合，画面更加简约，细节处理更加丰富，更加吸引浏览者的眼球。让消费者看到这样的产品就产生一种感觉――买！

良好的可用性和清晰的视觉信息导向引导消费者快捷简便的定位到所需要的信息，增强用户的体验。网页信息筛选也决定了消费者浏览网页所耗费的时间，云米官网一级页面展示了品牌故事，超能净水器，超能滤芯，全屋净化以及生活周边。当浏览者鼠标放在所需要的类别时，网页在一级界面自动拉出小的产品框，方便消费者快速找到所需要的产品。二级页面直接的展示出产品以及产品细节各类信息，高清晰、高品质产品细节图更加具有吸引力，让人一下感受到产品的品质。

结论

当下，国内网页仍存在着很多的问题，在简约主义风格的带动下越来越多的设计开始关注并且完善网页设计的美观性与实用性的结合，以提高客户体验和互动性为目标，用简明易懂的图形文字组合代替长篇的数据，把“简而精”的概念融入到网页设计中去。

篇4

【论文摘要】在互联网飞速发展的今天，网络已成为人们生活中不可缺少的一部分，无论是在商业、工业还是政府部门中都早已普及开来，如今就连教育事业也都承载着网络这四通八达的命脉迅速的发展起来。网站建设越来越接近于一门艺术而不仅仅是一项技术。网页界面艺术设计，日益被网站建设者所注重。结合自身的经验，阐述了如何制作一个完整的丰富多彩的页面，主要从色彩、框架，布局、优化这几个大方面对页面设计进行描述，对网页界面艺术设计的文字、图形、色彩、多媒体四个要素做了具有特色的分析和归纳，最后对其艺术设计风格进行了深入的分类和阐述，这一部分的重点是对网页界面艺术设计风格的研究。网页作为新兴媒体，有着比报刊、杂志、广播、电视等传统媒体更多的构成要素，如文字、图形、声音、图像和动画等。最后得出页面设计需要时间和耐心去钻研，才能做出好的网页界面艺术设计这一观点。

网页界面艺术设计是伴随着计算机互联网络的产生而形成的艺术设计新课题，是网页设计者以所处时代所能获取的技术和艺术经验为基础，依照设计目的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动，必然要成为设计艺术的重要组成部分，并随着网络技术的发展而发展。表面上看，它表面上看，它不过是关于网页版式编排的技巧与方法，而实际上，它不仅是一种技能，更是艺术与技术的高度统一。?网页设计包括风格定位、版面编排、色彩处理、浏览方式、链接功能等诸多方面，其中色彩处理有着举足轻重的作用。色彩既是网页作品的表述语言，又是视觉传达的手。所以首先要了解一个问题那就是：

1 制作网页包括具体都包括哪几部分呢?

1.1图形、图像处理制作网页界面艺术设计，提到界面还有艺术，那在网页上插入一些精美、适当的图片是必要的，否则，不会有人去浏览你的页面，因此，在设计网页之前，就应搜集或制作一些好看、适用的图片。提到图形、图像处理，大家都会想到的软件是Photoshop这个软件，对，这个软件是进行图形、图像处理的软件，但是，它不是专门的处理网络图像的软件，Photoshop这个软件会用到去进行一些平面的图形图像，我们网络的图形、图像处理用的是Fireworks软件，它可以制作出传输较快的gif格式的图片，占的空间也比较小，一般大小也就是KB，而Photoshop制作出来的是jpg格式的位图，并且是有损压缩，象素大了图像就清晰，但这样的话上传到网上会影响浏览速度，象素小了就会出现模糊或者马赛克小方格，所以我们采用的是Fireworks软件进行处理图形、图像。

1.2动画制作网页界面艺术设计，肯定也少不了动画的加入，并且还要有艺术气息在里面，这就要求我们的设计者要有艺术修养和对颜色的综合把握了，在没有FLASH软件之前，用的是Go live这个软件，再后来就用传统的做法，在html中嵌入Java程序编写的动画，但这要求设计者要对Java语言熟悉。随着软件的发展，如今有了许多制作动画的软件，二维的、三维的等等，如现在我们用的FLASH软件，用它制作的动画，小巧迷人，只需作为一个.swf格式文件导出，再导入到网页编辑器里就可以了。

1.3文本的编写一般是采用在网页中用html语言中的标签编写，也可以用网页编辑工具的“所见即所得”功能直接写入文字，如：Dream weaver软件或者Front page软件等都可以进行文本的编写。还有一点要注意的就是，显示文本的时候，设计者的机器上装了很多漂亮的字体，设计的时候采用了，但是等上传到网上以后，别人在浏览的时候，如果别人机器上没有安装字体，那就显示不出来我们采用的漂亮样式字体，因此，在考虑网页界面艺术设计的基础上，我们是把文字提前在Photoshop或Fireworks可以将字体先选择自己喜欢的样式，然后转换栅格化图片再用切片切成小块，分别进行优化。输出的格式可以为gif或jpeg，再导入到Dream weaver进行具体编辑，做链接可以用图片特有的属性进行热区链接，这样就完成我们想要的字体样式效果了，就不会出现字体样式显示不出来的情况啦。

1.4框架的应用框架是网页的常用形式，它可以使网页更为清晰，可以把不同的页面超链接到同一框架中，使的页面更加紧凑。一般框架用在小说浏览页面，或者介绍图书章节的部分，或者教学网页用到的的框架比较多。

1.5表格的应用表格是网页中用处最广泛的，可以布局，定位等等，它是网页中最活跃的元素。它的应用可以使用网页更加灵活。表格(table)是页面中的重要元素，是页面排版的主要手段。我们可以设定表格的宽度、高度、边框、背景色、对齐方式等参数。很多时候，我们将表格的边框设为0，以此来定位页面中的元素，或者籍此确定页面中各元素的相对位置。我们知道：浏览器在读取网页html源代码时，是读完整个table才将它显示出来的。如果一个大表格中含有多个子表格，必须等大表格读完，才能将子表格一起显示出来。我们在访问一些站点时，等待多时无结果，按“停止”按钮却一下显示出页面就是这个原因。因此，我们在设计页面表格的时候，应该尽量避免将所有元素嵌套在一个表格里，而且表格嵌套层次尽量要少。在使用Dream weaver制作网页时，会自动在每一个td内添加一个空字符。如果单元格内没有填充其它元素，这个空字符会保留，在指定td的宽度或高度后，可以在源代码内将其删去。

2 色彩的运用

网页界面艺术设计离不开色彩的应用，当打开一个网站的时候，给用户留下第一印象的既不是网站丰富的内容，也不是网站合理的布局，而是网站的色彩，尤其是在体现界面的时候，色彩对人的视觉效果非常明显，一个网站设计的成功与否，在某种程度上取决于设计者对网页界面设计颜色的运用和搭配。

网页界面设计是一种审美活动，成功的设计作品一般都很艺术化。但艺术只是设计的手段，而并非设计的任务。设计的任务是要实现设计者的意图，而并非创造美。网页界面页面设计的任务，是指设计者要表现的主题和要实现的功能。站点的性质不同，设计的任务也不同。从形式上，可以将站点分为以下三类：第一类是资讯类站点，像新浪、网易、搜狐等门户网站。这类站点将为访问者提供大量的信息，而且访问量较大。因此需注意网页界面设计页面的分割、结构的合理、页面的优化、界面的亲和等问题。第二类是资讯和形象相结合的网站，像一些较大的公司、国内的高校等。这类网站在设计上要求较高，既要保证资讯类网站的上述要求，同时又要突出企业、单位的形象。第三类则是形象类网站，比如一些中小型的公司或单位。这类网站一般较小，有的则有几页，需要实现的功能也较为简单，页面设计的主要任务是突出企业形象。这类网站对设计者的美工水平要求较高。

3 网页界面的优化

在页面设计中，网页界面的优化是较为重要的一个环节。它的成功与否会影响页面的浏览速度和页面的适应性，影响观者对网站的印象。

在资讯类网站中，文字是页面中最大的构成元素，因此字体的优化显得尤为重要。使用css样式表指定文字的样式是必要的，通常我们将字体指定为宋体，大小指定为12px，颜色要视背景色而定，原则上以能看清且与整个页面搭配和谐为准。在白色的背景上，我们一般使用黑色，这样不易产生视觉疲劳，能保证浏览者较长时间地浏览网页。一般我们网页默认的字体是宋体。为了体现站点的“与众不同”和特有风格，我门可以根据需要选择一些特别字体。例如，为了体现专业可以使用粗仿宋体，体现设计精美可以用广告体，体现亲切随意可以用手写体等等。当然这些都是个人看法，你可以根据实际情况，选择更贴切的字体。目前常见的中文字体有二三十种，常见的英文字体有近百种，网络上还有许多专用艺术字体下载，要寻找一款满意的字体并不算困难。需要说明的是：使用非默认字体只能用图片的形式，因为很可能浏览者的PC里没有安装你的特别字体，那么你的辛苦设计制作便将付之东流。

网页的适应性是很重要的，在不同的系统上，不同的分辨率下，不同的浏览器上，我们将会看到不同的结果，因此设计时要统筹考虑。一般我们在800×600下制作网页，最佳浏览效果也是在800×600分辨率下，在其它情况下只要保证基本一致，不出现较大问题即可。现在我们设计网页，一般要考虑800×600和1024×768两种分辨率，因此我们的表格一般为居中的770左右的表格，表格的宽度最宽不要超过778。事实上，"做网页"不是单纯意义上的"制作网页"，如果想让自己制作的网页美观大方，就必须要考虑"设计网页"的过程，一个好的作品，不通过仔细的"设计"就成形是绝对不可能的。

我国的网页界面页面设计水平总体上不及韩国，创新的页面极少，基本都是一种风格，这也是因以前我国的宽带水平跟不上有原因，一个漂亮的页面，必然体积会比较庞大，网络比较慢的话打开的速度也就可想而之，打开速度慢正是网页的一个最大杀手，所以我国以前的页面基本都是以框架式居多。随着我国宽带的普及，我们也迅速括起了一阵韩风，很多大胆创新的页面出现，这是一个好现象，但是一味的模仿韩国也不行，我们也要有自己的特色，不能一味的拿来主义。

网页界面页面设计的一个基本特色便是吸引浏览者，一个美观漂亮的页面不管内容多么空洞，也会有人欣赏，反之一个内容充实但页面简陋却往往不会有人去浏览，从这便可看出网页界面艺术设计是多么的重要。

篇5

中图分类号：TP311.52 文献标识码：A 文章编号：1007-9599 (2011) 23-0000-02

Analysis of Online Graduate Thesis Management System

Li Wei,Gao Min

(State Grid Xinyuan Company,Xilongchi Pumped Storage Power Station,Wutai 035503,China)

Abstract:This paper online management system is a very typical information system,it is generally divided into two platforms:platform for students and teachers,backstage management platform.The former requires full-featured,user-friendly,easy to use and so on.While the latter requires data integrity and security of strong,taking into account the background of the management convenient and appropriate to simplify the operation.After analysis,I use Microsoft's development tools as 2.0 and ASP,because ASP file upload a lot of trouble to do so using 2.0 technology file upload,front of the home page using technology papers to search for good results,the formation of a viable system to make customer satisfaction.

Keywords:Online;Papers;Management;Data

随着电子计算机和通信技术的发展，人类已经逐渐地进入信息化社会。计算机虽然与人类的关系愈来愈密切，还有人由于计算机操作不方便继续用手工劳动。为了适应现代社会人们高度强烈的时间观念以及享受科学技术的快速发展带给人们在生活、工作、管理等各个方面的方便性，大量计算机软件应运而生，从而进入了更加高效的信息时代，顺应了党的“十六大”提出的“以信息化带动工业化”的发展战略，也顺应了我国信息界前进的方向。

本系统是毕业生网上论文管理系统，使用了ASP和Access作为开发工具，由于考虑到用ASP做文件的上传比较麻烦，本系统还采用ASP.省略 2.省略)+Access构建。ASP是基于Microsoft Windows NT 4.0和Microsoft Internet Information Server3.0（IIS3.0）的开放式脚本开发环境，它很好地把HTML和脚本开发融合在一起，提高了编程的灵活性，降低了开发难度。ASP中的脚本在WEB服务器端运行，而不是传统的在客户浏览器中运行，这一措施使客户的浏览器无须担心服务器端的网页使用何种脚本，ASP都会生成一个符合HTML标准的网页送回客户端。由于本系统需要做文件的上传考虑到ASP比较烦琐，所以这里运用了 2.0来开发文件的上传（也就是整个系统的后台部分）。

提供了数个重要的优点：（1）增强的性能。（2）世界级的工具支持。（3）威力和灵活性。（4）简易性。（5）可管理性。（6）可缩放性和可用性。（7）自定义性和扩展性。（8）安全性。

二、需求

（一）系统特点需求。考虑到现在的工作人员大都不是计算机及相关专业出身，所以本软件考虑到了这些情况，有针对性的开发了此软件：

1.操作人员普遍计算机水平不高，系统要有良好的人机界面，绝大多数人能够一学就会。

2.该系统使用的对象多，比如教师，学生，管理人员等，要求有较好的权限管理。

3.添加数据简单便捷，支持批量数据的添加。

4.原始数据修改简单方便，支持数据的批量修改。

5.方便快捷的检索功能，可以通过毕业年份，姓名，学号，论文题目等进行查询。

6.方便的数据上传和下载功能，管理人员可以通过后台添加删除论文，学生可以在前台进行论文的查询，浏览，和下载功能。

（二）总体功能需求。经过对学校论文管理体系的详细调查和分析之后，发现一个完备的网上论文管理系统必须具备以下一些主要功能：

1.管理员功能。

（1）综合设置。院系管理，毕业班级管理，论文类别管理等。

（2）论文管理。这里可以上传论文（包括论文文档上传和毕业设计上传），和删除论文等操作。

（3）安全设置。管理员密码修改和添加管理员等操作。

2.学生和教师查询功能。

根据知道的信息，如院系，姓名，学号等等查询论文，并可进行论文和毕业设计的下载。

三、系统首页

本界面是系统的前台界面，用户不需要注册即可进入该页面按照查询内容进行论文的查询操作，其界面设计如图1所示。

图1系统主页面

（一）检索页面。此界面是用户根据需求输入不同的检索条件（比如姓名，班级，论文名等等）以后，检索出来的论文。

（二）论文详情查看页面。此界面是用户根据需要，查找到自己想要的论文以后，查看论文的详细情况的界面，用户可以浏览论文的关键字，摘要等等，如果需要的话，可以根据自己的情况，下载论文，和毕业设计。

（三）后台登陆页面。本界面是整个后台的登陆界面，管理员需要从此登入才能进行论文的添加和删除等操作。

（四）后台主体框架。本界面是整个后台的主要功能，包括院系管理、毕业班级管理、论文类别管理、论文管理、添加论文、管理员密码修改，添加管理员等功能。

（五）院系管理页面。本页面是面向学校设计的，可以根据学校的需要添加院系，并可以对已经添加的院系进行修改，和删除等操作，

（六）毕业班级管理页面。本页面是用来管理毕业班级的页面，用户可以根据需要来添加班级，例如先根据毕业年份，选择好哪个学院，然后根据实际情况来添加所需要的班级数量。并且可以对已经添加的班级进行修改和删除等操作，

（七）论文类别管理页面。此页面是输入论文的类别的页面，即论文的性质，是论文查询的条件的一个重要部分。可以添加论文类别，并可对其进行编辑和删除等操作，

（八）添加管理员页面。本页面是添加用户页面，管理员可以从后台登陆后，进入此项功能，根据具体情况添加用户，以方便多人管理此系统的目的，

（九）添加论文页面。此页面是本系统的核心，论文上传和毕业设计上传的页面，管理员根据论文的情况按照院系、毕业年份、班级、姓名、学号、论文题目、论文关键字、论文类别、论文摘要把论文添加进去。如果有毕业设计的话，还可以把毕业设计也上传进去，其界面设计如图2所示。

图2 添加论文页面

（十）论文管理页面。此页面是对已经添加的论文进行管理的页面，管理员根据实际需要，比如已经不需要的论文就可以删除，其界面设计如图3所示。

图3论文管理页

（十一）管理员密码修改页面。此页面是管理员密码修改界面，为了安全考虑，管理员可以在此页面进行密码的修改，修改以后点确认修改下次登陆就是已经修改的密码

四、系统测试

测试是为了发现程序中的错误而执行程序的过程，好的测试方案是极可能发现迄今为止尚未发现的错误的测试方案，成功的测试是发现了至今为止尚未发现的错误的测试。

由于软件编出来以后是让普通用户使用的，而这些使用人员大都不是计算机相关专业出身，不一定了解软件是怎么做出来的，只会使用，所以说从普通用户的角度来测试系统有它的好处。这么做可以测试出一些软件的异常问题，可以为系统以后的使用起到非常大的作用。用这样测试的方法，我把程序中所有没考虑到的细节问题都查出并改正过来了。

五、结束语

篇6

中图分类号：U46 文献标识码：A 文章编号：1009-914X（2016）04-0216-01

我们生活的21世纪已经进入了信息时代，近年来随着智能手机，平板电脑的不断发展发展。人机界面的设计和开发已经成为国际上计算机设计领域最为活跃的研究方向。在网站策划、网站设计和网站运营的过程中，人机交互和用户体验是经常被谈及与运用的概念。一个网站布局得不合理，首先会表现在功能和页面设计的契合度上，具体表现就是用户在网站上找不到需要的信息，或者是我想完成一个操作找不到相应的按钮。这就是在设计网站时没有从用户的角度出发所造成的。为了让学生运用网站配色与布局知识设计出人性化的网站，更好的与就业岗位对接，在本阶段的课题研究中我将“网页布局与人机学的研究与实践”作为我研究的课题。学生在设计作品时能够运用人机学的知识，提高用户体验的舒适度。

一、网页布局与人机学的研究意义

通过本课题的研究，学生能够运用色彩原理进行网页颜色的搭配并且能够运用布局技巧进行网页的布局设计。同时能从临摹网页到自主设计，让网页效果设计真正从想法逐渐变成现实。在综合项目实战中，贯穿网页配色与布局的知识，综合运用人机学的原理，达到对网页设计制作的整体把握。有助于提高中职学生网页制作的能力。

二、网页布局与人机学的研究目标

通过对网页布局与人机学的研究与实践，不断改进网页布局综合案例的教学策略，力求找到提高我校学生网页设计能力的方式方法，提高教育教学质量，有效的把课堂变为真正的工作室。在综合项目实训中设计出与就业岗位充分对接的网页作品，为学生就业打下坚实基础。

三、网页布局与人机学的研究过程

（1）准备阶段（2013年7月～2013年8月）

专题研究准备阶段的主要任务是学习与课题研究有关知识，确定专题研究目标、研究对象、研究方法和研究内容，制定研究实施计划。

（2）实施阶段（2013年9月～2014年6月）

根据市场调研结果明确专业核心能力，制定相应的计划，编写技能检测手册。

（3）总结阶段（2014年7月～2014年9月）

对本课题研究过程及资料进行收集整理，形成课题总结报告，并将专题论文、调查报告和研究个案汇编成集，撰写个人结题研究报告。

四、教学实践的成果和结论

在学校课题的研究分类中，我主要承担的是《网站配色与布局》这本教材中网页布局与人机学这部分的教学研究。在几年的网页制作课程的教学实践中，不断尝试应用多种信息化教学手段，以“学生为主体教师为主导”的教学理念贯穿整个教学过程。体现了“做中学，做中教”的职业教学理念，充分调动了学生学习的主动性和积极性，较好的培养了学生独立思考，分析与解决问题的能力，取得了很好的教学效果。在教学中旨在网页布局与人机学的教学实践中有更为突出的成果，培养中职学生的职业能力，为学生今后成为一名优秀的网页设计师打下坚实基础。2013年7月在抚顺市信息化教学设计中获得一等奖；2013年9月辽宁省“创新杯“信息技术说课大赛一等奖；2013年11月获得国家级”创新杯“信息技术说课大赛一等奖；2013年12月获得抚顺市级优秀课。2015年11月获得国家级信息技术教学设计大赛二等奖。

1.网页布局与人机学的相关概念研究

通过对此概念的研究，在教学过程中，我采用实例讲解的方式。从iPad看人机学。iPad是当今社会较为流行的电子设备，也可以称之为街机。同学们对我列举的实例会非常感兴趣，由此学生会非常渴望即将要讲解的知识。iPad是著名的苹果公司出的平板电脑。iPad在人机交互操作上做得非常细致。为什么iPad无论老人小孩都会用，其基本操作甚至很少需要别人的协助和说明书？究竟是孩子容易接受iPad？还是iPad容易让孩子接受？iPad的设计可谓“童叟无欺”，老人、孩子都可以流畅使用。人机学应该是“傻瓜式”的，去追求一种更“本能”的操作，就像吃饭穿衣一样简单。通过以上实例的讲解，学生很快理解人机学的概念，并且知道在网站配色与布局这本书中为什么给我们介绍人机学的概念。让学生充分理解了网页的易用性和美观性非常重要，这样同学们就能很认真的学习人机界面设计的原则及设计方法。在教学中有效的突出了教学重点，突破教学难点。

2.网页布局综合案例的设计风格研究

引入案例――网页布局的风格类型。本案例的主要目的是在不改变网页内容的前提下，改变网页的风格类型。这就需要用的布局的知识。在之前的学习中我们已经掌握了各种网页布局的知识与技巧。不同的网页有不同布局。这样综合起来就形成了不同的网页风格类型。那我们常见的网页风格类型有哪些？有什么特点？引入理论学习知识，教学过程很自然的过度。经过理论讲解后，进行实战案例――设计临摹典型商业型网站。

在教学过程中引入实际案例，教师通过案例讲解相关理论知识，再让学生应用所学理论知识完成实战案例，使学生能够 “学以致用”，完成本课的技能目标。这样不仅增强了讲解的直观性，降低了学生学习的难度，还可以有效的激发学生的学习兴趣，充分调动和发挥了学生学习的积极性、主动性、创造性，培养职业核心能力，实现教、学、做一体化。

3.电子商务网站个案研究

网页设计是一项系统工程，它包含了从用户调研到最终上线的全过程。我将以一个电子商务网站为例，系统地讲解整个网页的设计过程。

在项目实战案例――新蛋购物网站主页制作讲解过程中。首先了解技术要点，包括（1）确定网站整体风格。（2）网页色彩搭配。（3）网页布局技巧。其次进行案例分析：随着网络的普及，网购已经火起来，给同学们阐述 “没有人上街不代表没有人逛街”的现象。同学们在这个过程中就会纷纷议论都在哪些网站上买过东西，喜欢浏览哪些网站，为什么喜欢去浏览那些网站，引出网页设计的重要性。电子商务网站作为网购的首要利器，是用户和商家的唯一互动平台。所以界面设计的好坏，对其销售额起着重要的影响作用。在授课过程中自然引入案例，要求在设计制作过程中注意体会如何运用网页配色与布局的知识来设计出人性化的购物网站。使学生能够自主学习、独立操作和自我评测。

通过对新蛋购物网站首页的制作，更加熟练的使用之前学过的技巧。深入了解页面的合理用色和颜色之间搭配使网页更有效果；图片在画面中的合理摆放；准确划分页面结构等。对前面所学的知识融会贯通，学以致用。在设计网站的时候，要分析网站的主题内容，选择符合主题表现形式的布局，采用搭配合理的色彩表现主题的风格，加上细心的构思和新颖的创意，必然可以设计出优秀的网站。

五、存在的问题和今后的设想

学生到企业学习的机会太少，没有实际开发项目的经验。每个企业都有自己的团队，每个人都有自己指定的设计项目，这就要求都得是有经验的设计师。而我们的学恰恰就缺少这中间的锻炼过程，很少会给我们中职学生提供实践的机会。这使我们中职学生不能够很好的与企业对接。

要想解决这一问题，我觉得我们任课教师必须走入企业，先接触一些开发网站的公司，在企业参观学习。在网页制作的课堂上，拿一些企业的真正案例让学生实践，制作网页配色和布局的整个流程，这样同学们才能真正的得到锻炼。让学生深刻体会网页界面布局的人性化设计，真正的将课堂变为企业的创作工作室，使学生能快速适应工作环境，提高中职学生的就业率。

篇7

三年前，当windows phone开始扁平化时，面对的是世人嘲笑的眼光。两年前，当安卓4.0开始扁平化时，世人只当是与苹果区别的挣扎。一年前，扁平化通过iso7.0逆袭成功，成为如今交互设计主流。“扁平化”通过三年时间在我们生活中扎根，我们可以看到质感厚重，图层样式繁多的网站越来越少，反之各种轻质感、布局大胆、创意新颖的网站越来越多地进入了人们的视野。那么将这一趋势带来的扁平化到底意味着什么，扁平化的设计理念又将会带领交互设计带往何方？

在交互设计中什么是扁平化设计

首先说说什么是扁平化设计。“扁平化设计”一词所指的是抛弃多年来流行的渐变、阴影、高光等拟真视觉效果，从而打造出一种看上去更“平”的界面。扁平化设计正是通过这种放弃任何附加效果的方式，创建了一个完全不带3D属性的设计方案。在这里，没有阴影效果、斜角、浮雕、渐变等其他方法来帮助元素产生相对于屏幕的凹凸效果。完全没有任何效果的图标和UI元素通过色块的搭配也都是看起来非常鲜明。

交互工具的界面设计为什么会选择扁平化设计？我们先来看看web UI的发展史，在互联网制作的初期，由于技术的局限，网页只是作为呈现信息的一个平台而已，毫无设计可言，随着科技的发展，CSS的广泛运用、才开始有了网页设计的概念，在这个阶段已经有大量个人网站出现了'许多网页使用Ps切图制作个性的UI效果，拟物化设计登上UI设计舞台。在javascript网页特效以及Flash流行起来后，静态的高光立体拟物效果已经满足不了大家的视觉需求了，于是开始使用简单的静态交互（javascript或flash本地交互）来产生更仿真的效果，设计师想让webUl更像是一件实物，可以带来一种更为生动的感觉。希望能消除科技产品与生活的距离感，在无论是网页，或是各种获取资讯的软件所提供的信息量相对较少的情况下，网页更倾向于UI带来的视觉冲击，软件的UI设计也更为大胆。

2005年后，web2.0的出现使得设计师更专注于内容呈现和交互，同时开始去掉了各种不必要的视觉效果。web2.0概念伴随着几何次方增长的信息而生，带来了更大的信息量和更复杂的交互，使webUI回归了它应该做的，就是以更好的体验呈现更大量的信息，让内容展现自己的生命力，而不是靠UI设计喧宾夺主。

这使我们想到在说到扁平化的同时，我们必不可少的会说到另一种设计分格――拟物化（skeuomorphism），拟物化作为与扁平化设计极度相反的设计风格，从web UI诞生起就一直占领UI设计的主流。拟物化设计的特点是界面模拟真实物体的材质、质感、细节、光亮等；人机交互也拟物化，模拟现实中的交互方式。拟物设计会让任何人都知道这个图标是用来干什么的，同时这也是拟物化最大的好处，它能让上至八十岁的老人，下至几岁的孩童都能看懂IOS里面几乎所有自带应有的图标。在ISO系统中各种按钮的视觉质感和点开之后的交互效果，有力的与现实所结合，养成用户对这类应用有统一认知和使用习惯。让用户在使用此类应有的同时感受到来自应有本身的人性化体贴。但是拟物化本身同时也是个约束，它限制功能本身的设计。在电子设计领域使用拟物原理直接导致了在苹果控制面板中的模拟时钟比电子时钟更难读，点击计算器的按键要比用键盘输入花费更多的时间。坚持使用拟物设计产生了不少的问题：由于一直使用与电子形式无关的设计标准，拟物化设计限制了创造力和功能性。将拟物化元素与少维的元素相融合时，拟物元素看起来有些不一致，而且这些模仿并没多少逻辑。比如，苹果的找朋友应用就有一个看起来像缝合皮革的背景。但该元素与现实世界没有任何关联。拟物化元素以无功能的装饰占用了宝贵的屏幕空间和载入时间，当与其他无拟物效果的元素组合时，拟物元素看起来有问题，这样就限制了整体设计和其他的元素的效果。我们可以看到现在的UI设计，也开始像当初webUI一样，回归内容的本质，开始走上由繁至简的道路。

扁平化设计成为交互设计主流风格的几大原因

扁平化对于互联网巨头直接意味这两个词：快速，突出。

快速高效是扁平化设计的一个很重要的基因，时间就是金钱，如何在信息更新如此之快的互联网即时的跟上它的脚步呢-那就是快速， 快速同时也意味着更低成本的运作，采用扁平化设计，可以再最短的时间内更新所需的页面，只需要给制作提供相应的色值就行，大大的节省了项目时间，也方便下次再更新。这也是很多互联网巨头们为什么选择扁平化设计的原因之一。

信息突出，是在信息大爆炸时代，网站取胜的关键，扁平化设计通过颜色的对比，大小不同的字号，让重要的信息放在首要位置，不重要的元素弱化，除了几个主要的动作按钮当中使用了轻微的斜面效果以外，其他界面元素全部采用扁平风格，这样的设计让访问者可以很容易的将注意力聚焦在品和信息上，而不会被网站界面上的视觉元素所干扰。从而突出核心信息和操作。这些都增强了网站的易读性和可读性。

对于用户，扁平化则是简洁明了的，简洁的东西总是让人喜爱的，在一个设计简洁逻辑清晰的网站你能很快找到自己所要的东西，从而提高用户体验。

目前大多数对于界面风格扁平化的讨论，主要在于界面与图标中材质、阴影、立体感的消失等等。实际上对于界面设计来说，正如人们对于视觉感官的新鲜需求和疲劳度是与生俱来的，各种视觉风格的流行和更迭―直在持续进行着。然而过去的很长一段时间内，界面设计的风格都处在循序渐进的改变，“扁平化”的设计却是在短短十几个月的时间内迅速流行起来。从本质上看，这不仅仅是一种视觉风格的改变，而是一种设计语言和思维方式的演化。

对于打造交互设计中扁平化设计风格的几点建议

形式遵循功能，少点再少点

一些伟大的设计中所运用的“形式跟随功能（form followfunction）”和“少即是多（1ess is more）”的理念依然是我们今天还在谈论和学习的。简单的说，在用户界面设计，常常去掉真正将界面带入生活的那些东西。在扁平化设计的世界中设计师必须专注于产品的本质，它是用来干嘛的，而不是它们要看起来像什么。

细节永远是追求的方向

设计中所谓细节决定成败，有时候一点点行距一点点色值的不相同也会对整体视觉效果照成很大的影响，细节的调整是很有必要的。字体作为扁平化设计中的重要元素。你可以使用字体帮你创建你期望的风格和基调并且使界面更加简洁。

色彩一定要酷点再酷点

由于少了些质感，所以颜色也变得尤为重要了，运用搭配合理的颜色能起到决定作用。设计界面的基础之一是定义调色板。扁平化界面设计所采用的色彩的模式与其他调色板相比倾向于更加醒目和更加明亮。当你选择好调色板后，确保给主要交互动作指定色彩：比如“提交”、“发送”、“更多”等按钮都应当是同一个色彩。理想情况下鲜明的色彩与背景形成了鲜明的对比。如果你的徽标或者商标采用主色的话，那么它应当是主要控制所使用的哪个色彩。不要自始至终过分的使用它，否则你将冒着在用户眼里这个色彩不太重要的风险。

在扁平化设计里色彩的选择尤其重要，因为当你使用扁平化按钮的时候，色彩将是帮助用户识别彼此的主要手段之一。

最关键的是创新

优秀的设计是创新。我个人比较喜欢苹果首席设计Jony Ive的方法：先打破以前的框架。比如说设计一个饭盒，那他先要把“盒”这个概念抹去，不要被这个“盒”所困住思维，只想这个器皿最佳的使用方式和设计形式。比如时间，不只是想到钟表，还可以想想有没有其他更好方式来呈现。

结论

目前大多数对于界面风格扁平化的讨论，主要在于其艺术表现形式的变化。实际上对于界面设计来说，人们对于各种视觉风格追求―直在持续进行着。然而过去的很长一段时间内，界面设计的风格都处在循序渐进的改变。“扁平化”的设计却是在短短的时间内迅速崛起，从本质上看，这不仅仅是一种视觉风格的改变，而是一种设计语言和思维方式的演化。扁平化设计风格最大的优势就是它可以更加简单直接的将信息和事物的工作方式展示出来，减少认知障碍的产生，这不仅是设计视觉风格的突破，更是功能性在交互设计风格中的重要体现。

如今各种不同尺寸和配置的产品出现，填补了不同级别间的空缺，同时要求更高的界面适应性，这些都要求我们将界面设计回归到如何理解功能内容和应用本身，但是否“扁平”并不应当成为交互界面的评价标准，良好的交互易用性、理解识别度、情感传达、操作反馈、图形隐喻、视觉舒适度、动态表现和音效设计等等方面，才能构成一个优秀的交互设计产品。

参考文献

[1]范圣玺行为与认知的设计设计的人性化[M].中国电力出版社.2009-3-1

[2][美]维克多・帕帕奈克（VictorPapanek）著，周博译为真实的世界设计[M].中信出版社.2013-1-1

[3][英]科制白恩著李松峰，秦绪文译简约至上：交互式设计四策略[M].人民邮电出版社.2011-01-01

[美]加瑞特著范晓燕译用户体验要素：以用户为中心的产品设计[M].机械工业出版社.2011-07-01

篇8

中图分类号：G4 文献标识码：A 文章编号：1674-3520（2015）-04-00-01

网络课程是一个由知识点、跳转关系、导航策略和交互界面组成的教学系统。《汽车电子技术》网络课程的系统设计包括结构设计、导航设计和界面设计三个方面。课程内容主要以《汽车电子技术》第一章的教学内容和辅助学习两大部分组成。

一、结构设计

由于网络课程有其特定的教育性，在设计结构时，十分注重对知识结构的设计，以便有利于体现教学内容的层次关系，有利于实现自主学习。在进行本课程知识结构的设计时，以《汽车电子技术》为框架，按章节进行选择，在各章节内部，根据知识点之间的联系设置超链接。我们还根据学习者的需要，设置了各种辅助学习方式，方便学习者自学。

（一）网络教学模块。网络教学模块（网络课件）是根据教材内容而编制，是教学目标、学习任务的具体体现，教学目标的实现主要依靠具体的网络课件来完成，所以这个模块是整个网络课程的重点。

1、内容的呈现方式。主要以平铺方式来组织教学内容，方便学习者按各自的基础、兴趣和能力有选择地进行学习，满足学习者的不同需求。教学内容以课本的每一章节为纵向结构，以学习目标、辅助学习、作业系统、教师答疑、实验指导作为横向结构编织成一张纵横交错、非线性的知识网络体系，让学习者掌握充分的学习自进行有效的学习。

2、课程导学。为了帮助学员实现网络课程的自主学习、掌握正确的学习方法 ，提供了课程大纲、课程目标、实验指导、作业系统等助学信息。

3、重点难点的处理。在对汽车电子的学习中，学习者需要掌握理论与技术的相结合，这是课程内容中的重点。我们在对课程的学习时，加入实验指导，让学生边学习理论，边熟悉技术的操作。重点解析内容也可采用 Flash动态教学效果或视频教学，配以文字和语音讲解，利于学员更好接受和理解。

（二）师资队伍模块。“师资队伍”主要是介绍了有关该课程的教师资料，学生通过“师资队伍”可了解自己老师的信息。

（三）作品欣赏模块。“作品欣赏”又分为“优秀个人作品欣赏”、“优秀小组作品欣赏”、“教师推荐作品欣赏”。“优秀个人作品欣赏”和“优秀小组作品欣赏”是教师从学生的作业中选出的优秀作品，这些作品上传到学习网上，学生不仅可随意浏览欣赏，给出评价，更重要的是学生可将自己的作业与之比较，找出不足，总结经验，在激励中求上进。“教师推荐作品欣赏”是教师在网上或其它杂志上寻找的优秀作品，供学生学习。

（四）常见疑问模块。“常见疑问”中给出了在电子设计方面经常出现的问题及解决方法。这和“教师答疑”不同，学生直接到页面进行查找，就可解决疑问，效果更快。

（五）学习交流模块。“学习交流”分为两部分，一是在线论坛，学生通过在论坛上发表文章，和同学老师们共同交流。这种讨论模块 ，目标是发挥教、学两方面积极性 ，活跃气氛和鼓励学习者显示才华和创造力 ，以及提供答疑解惑的场所。二是虚拟聊天室，学习者因为学术观点相近或兴趣爱好一致等原因更愿意在一起学习或交流，从而形成学习伙伴或网上好友的关系。不管是教师还是学生，都可以在这两个板块中畅所欲言，就学习、生活、实践中遇见的难点、重点、热点问题进行交流、解答。

（六）资源下载。“资源下载”主要是与学习有关的电子课件、电子杂志、相关学习软件等，方便学习者学习。

（七）授课录象。“授课录象”是多媒体演示模块 ，目标是形象化教学。其中包含大量的视频资料 ，使学习者可以从感性的角度加深对知识的了解。

（八）特色项目。“特色项目”是教师或学生在汽车电子技术方面做出的某种研究，最终目标也是供学习者学习探讨。

二、导航设计

由于学习者在网络课程的学习过程中是以自主学习为主，缺乏教师的指导，易产生迷航现象，因此清晰明确的导航在网络课程设计中显得尤为重要。在本课程中，为方便学习者学习，站内链接导航条始终出现在屏幕的右上方。在网络学习模块中，左边提供卷轴模样的下拉式导航条，学习者可随时选择某一章的学习栏块，直接进入相应的页面学习。

三、界面设计

《汽车电子技术》网络课程运用先进的网页制作工具，设计大量形象生动的图片和动画，激发学习的热情。界面是学习者与计算机进行人机交互的窗口，包括显示界面和操作界面。在设计时要时刻注重界面清晰；在操作方面，交互性、可控性强。

网络课程是由一页一页的网页按照一定的顺序和结构组织起来的。页面既是网络课程的组成部分，也是《汽车电子技术》所有教学内容的展现形式，也就是说网页设计是构建整个网络课程的灵魂。

（一）页面的布局。在《汽车电子技术》网络课程的页面设计中大都使用了“T”型页面结构设计，将导航和呈现的内容合理的分开设计，页面布局清晰可见。

（二）页面文字。页面文字本着尽最大可能突出主题的原则组织的。文字的字体不超过三种字体，字号的选择不宜过大，否则会使页面显得非常杂乱和拥挤，令学习者眼花缭乱，无从下手。字号的选择也不宜过小，这样会使学习者容易疲劳。

（三）页面颜色。页面的色彩是页面设计中一项重要内容 ，它贯穿于整个页面设计的过程中 。恰当使用不仅可以增加网络课程的艺术欣赏性 ，而且可以吸引学习者注意力 ，促进对屏幕上各部分的识别、突出差异 。但如果使用不当 ，则会分散人的注意力 ，使视觉容易疲劳 。在选择时应考虑课程内容表现的需要、课程的总体风格、教学对象的色彩心理特点以及色彩本身所表达的含义等等因素 。总的来说 ，网络课程的页面色彩搭配要和谐、自然 ，给人以美感 ，注意颜色数量的多少 ，避免色彩过多过杂 ，尽量作到风格统一 。色彩的选择尽量鲜明、独特、与所设计的内容相协调一致 。

（四）页面图形。用图形说明、解释问题具有形象、直观、生动的特点 。本网络课程的图形图像大多采用photoshop工具进行处理过，使用起来更鲜明生动。

（五）页面趣味性。为了增加学习者的学习兴趣 ，减少学习过程中的枯燥性 ，在网络课程中加入适当的动画来展现教学内容，效果会比较好。

篇9

中图分类号：TU-024

文献标识码：A

文章编号：1008-0422(2009)05-0109-02

1　背景介绍

自从1991万维网(www)出现以来，相关技术及其应用一直呈现着革命性的进步。展现出蓬勃生机和无限潜力。但是网络界面一直相对稳定地保持着以浏览器、按钮、图形和文字为构件，以视窗为框架的基本形式。界面设计师应该以一种前瞻的态度来审视现有的网络界面设计，开创设计新思路，从而在界面设计方面为未来新技术的发展提供铺垫和激励。

2　文献综述

在Webster字典里，“界面”被定义成为：

1)分割两个物体，空间，或相态的边界：

2)一些独立的，又往往不相关的系统相互接触，相互作用，又相互交流的场所。

可以看出，第一个定义强调了界面的几何特性，第二个定义强调了界面的功能特性。因此，界面设计应围绕着不同的但又相互联系的三个方面――视觉性，功能性，及实用性。其中，实用性本是人―机界面的功能性的一个重要组成部分。

Mullet and Sane(1995)指出，在包括图形设计，工业设计及室内设计在内的各类视觉设计领域中，许多设计原则都非常适合用于处理图形用户界面设计的问题。然而，在现有的以视屏窗口为基础的图形用户界面设计当中，其以二维构型为主体的基本形式极大地限制了室内设计原则的应用。

三维的应用在界面设计中逐渐出现，比如，在Tactile 3D界面中，(http：//tactile3d.corn/)，用户可以在一个三维环境中方便地进行各类文档操作。Bowman，et.al(2004)从技术的角度对三维用户界面做了全面的概述，并对其中的硬件设备及软件技术，以及三维互动技术的设计原则进行了探讨。这些技术方面的进展为网络界面设计方面的研究提供了难得的机遇和挑战。

3　理知空间及网络界面的特性及设计要素

本文的一个基本前提在于把“网络界面”理解为一个联接实体及虚拟世界的复杂时空环境。由此，网络界面的“虚拟性”及“互动性”能够通过利用三维环境的丰富空间特性从而获得超越传统上二维图形及文字说明(本质上一维)等方式的表现效果。

作为以三维空间为背景的卓越艺术形式，建筑和室内设计与网络界面中的虚拟环境设计有直接的可比性和通用性。不仅如此，在一个更抽象的层面上，实体与虚拟三维环境的相关性可通过“理知空间”的概念进一步理解并得以强化。

本文引入一个“理知空间”的概念来理解网络界面环境及其与实体和虚拟环境的相互关系。具体而言，我们把理知空间定义为多重实体环境以及它们的多层次多角度的具体化和抽象化形式的总和。而网络界面则可理解支持实体及虚拟空间之间相互作用的基础环境。由此，网络界面必然地在一定程度上继承了实体空间，虚拟空间，甚至理知空间的各种空间及功能特征。参考图1显示了理知空间，实体空间，虚拟空间及网络界面之间的逻辑关系。

基于上述理论框架，我们不难提炼出网络界面的七大基本特性：

1)共生性：多重结构，多种形式可并存于一个网络界面当中。

2)高维性：如果说虚拟空间可被抽象地理解为一个复杂的数据库，那么数据的可视性则需要经由网络界面来实现。数据库的复杂性直接地导致了界面环境的高维性。

3)动态性：网络界面时时刻刻通过动态的方式来表述或控制信息的输入输出。动态性也可理解为网络界面的时间维。

4)互动性：界面最关键的动态性是通过人一机互动而实现。由此，用户指令可通过界面传达，而指令的执行结果也通过界面得以反馈。

5)变换性：网络界面中的对象不必遵循实体空间中通常的物理规律，从而其几何特性可通过各类简单变换而相对灵活地改变。

6)多重尺度：由于网络界面可包含多重虚拟或实体空间以及它们之间的各种相互作用，人们往往需要有多种方式来进行评估或量化，

7)“病态结构”：在参照传统经验的时候。复杂的网络界面结构往往会呈现出异常特性，以万维网页为例，由网络联结连接的网页具有比任何书本格式更为复杂的拓扑结构，因为后者本质上是线性的，换句话说，只是个一维的结构形式。

以上总结的七大特征可引申出以下关于界面设计的四条基本建议：

1)关于界面符号及几何对象的设计

符号及几何对象的应用有其审美上和功能上的需要。通过对界面环境的多重性，高维性及互动性的认识，我们能够自然地理解为什么网络界面中三维环境能够较二维环境更为有效地用于表达复杂信息，支持人一机互动，进而模拟实体世界中的切身体验。

2)关于界面智能设计

网络界面的智能性决定了人一机系统的功能性。如果没有智能性，上述符号和几何对象不过是没有大脑的躯体，不具有完备的功能性。

3)关于界面性能设计

认识到网络界面仅仅是连接实体与虚拟空间的场所，设计者必须考虑到隐藏在网络界面以下的系统本身的性能特征(例如中央处理器的速度，网络带宽等)，从而保障上述所提及的智能性具备充分的系统软硬件支持。

4)关于界面虚拟性设计

尽管三维虚拟环境能够很大程度上借鉴人们在实体三维环境中的经验，虚拟环境同时也具有一些与实体三维截然不同的特征。合理利用这些特征可以成为进一步提高网络界面实用性的重要手段。

三维虚拟环境的引入为实现上述界面特征以及应用上述设计原则提供了广阔前景。具体而言，三维虚拟环境能够让用户重温置身于实体世界中的体验，而这种体验帮助用户对新的界面系统更快地建立认同感，更方便地定位和浏览，从而对使用本系统更有兴趣。其次，三维空间的采用能够更为有效地组织和表现复杂信息。此外，在三维环境中人一机互动可通过连续光滑的运动而完成，智能性可由此而得以更充分的实现。

本文在理论探讨之外也开发了一个包含三维环境在内的界面设计原型，用以校验文中所提及的各种概念。鉴于目前三维购物网站仍很缺乏，而其间最大障碍是基于网络资源方面的限制，本文以此为出发点来探索未来三维化网上购物环境设计的一些可能性。

本设计是在文中提出的四条原则的指导下完成，包舍了作者对网络界面七条特征的理解。一个具体设计目标在于通过合理地结合二维、三维以及文字描述等方式来有效地组织表现信息，并为用户提供一个方便、愉悦的网上

购物环境。

在本设计中，我们尽量保持主界面的单页感受。图2概括了主界面的逻辑结构。首先主界面横向分割成两大模块：左为定位模块，右为购物模块。定位模块又细分为四个区域。其中第四区为三维商场，在整个界面中处于核心地位。另外三个辅助区域提供各项便利手段。其中，区域一支持文字定位方式；区域二根据用户位置实时提供商场信息；区域三陈列三维商场的平面图，并支持用户在商场内各摊位之间随意跳跃。这些区域之间的协同合作为用户营造了方便而丰富的购物氛围。显然，该商场平面规划及三维区域中的摊位设计，自然而然地直接用到建筑和室内设计的各项知识和经验。根据主界面的逻辑结构设计的网络界面样板。

为了体现网络界面变换性的应用，我们设计一个横向滑动的滑标来控制空间变换，从而达到迅速定位的最佳效果。具体而言，通过移动滑标，用户可以根据自己的需要来调整商场中各摊位的大小及其相对位置，从而使得商场摊位陈列与用户的兴趣保持一致。这样既保持了平面图的整体美观性，同时又具备了辅助定位的功能。此外，这个商场的平面设计中所包含的自相似性使得该商场具有良好的延展性。而由滑标实现的空间变换则在个体摊位层面上保证了高度的公平性。

关于虚拟性的设计，我们在三维区域中给每个摊位设置了一个转动环，当鼠标置于环上，整个购物单元顺时针旋转，并依次展现不同的商品。显然，在现实世购物环境中，这样的装置是既不现实又不适用的。

4　结论

尽管计算机屏幕是一个二维平面，网络界面仍然应当理解为一个具有一些明显特征的多维环境，而此环境的三维表现赋予界面用户以“走进”屏幕并享受由第三维数而衍生的丰富信息与功能。换句话来讲，三维空间模型在网络界面设计中的应用，为理解和体现“理知空间”的复杂性提供了一系列强有力的手段，而传统的设计领域，特别是建筑及室内设计在这个过程中有着不可替代的地位。

参考文献：

[1]Bowman, D.A., Krui]ff, E., LaViola, J.J., &Poupyrev, I., (2004). 3D User Interfaces:Theory and Practice. Addison-Wesley.

[2] Mullet, K., & Sano, D., 11995). DesigningVisual Interaces. Sun Microsystems, Inc.

篇10

中图分类号G206.2 文献标识码A 文章编号 1674-6708（2013）107-0287-05

笔者从设计流程角度讨论在线学术论坛用户体验的主要要素。设计流程角度的主要要素已有较为成熟的研究成果，笔者仅是从在线学术论坛的特点出发，整合前人的研究。具体操作是：笔者首先对用户体验主要要素做出初步假设，然后设计调查问卷，通过网络收集问卷，以问卷数据检验假设。

1理论与初步假设

根据用户体验要素和内容的研究成果，结合在线学术论坛的特征，笔者依据James Garrett对用户体验内容的战略层、范围层、结构层、框架层和表现层的划分来讨论设计流程方面在线学术论坛的主要要素。James Garrett从网页作为软件界面和网页作为超文本系统两个不同角度从五个层面讨论具体的内容（如图1），战略层无论是软件还是超文本系统均要考虑网站的目标和用户需求；范围层从软件角度需要考虑功能规格而从超文本系统角度需要考虑内容需求；结构层从软件角度需要考虑交互设计而从超文本系统角度需要考虑信息架构，框架层从软件角度需要考虑界面设计而从超文本系统角度需要考虑导航设计，二者均要考虑信息设计；表现层无论是软件还是超文本系统均要考虑均要考虑视觉设计。

本文的研究对象为在线学术论坛，主要讨论各层超文本系统的内容，除了范围层和框架层，因为范围层中的功能规格（对于在线学术论坛，笔者称为功能设计）和框架层中软件界面考虑的界面设计对于在线学术论坛来说也比较重要，因此也作为在线学术论坛用户体验内容的一部分。另外，由于在线学术论坛的内容是由用户产生的，所以不涉及到信息设计，故在框架层不讨论在线学术论坛的信息设计。

对于整个用户体验要素框架而言，笔者有两个假设：第一，在线学术论坛用户体验的五个层次的各要素（论坛发展目标、了解用户需求、论坛组成板块、信息架构、帖子包含内容、帖子的外观、帖子的质量、论坛按钮/输入框等要素的形式、导航、论坛的外观风格）都很重要；第二，在线学术论坛用户体验各要素的重要程度排序为论坛的发展目标——了解用户需求——论坛组成板块——帖子的质量——帖子包含内容——帖子的外观——信息架构——导航——论坛的外观风格——论坛的按钮/输入框等要素的形式。

1.1战略层

在线学术论坛用户体验的战略层主要回答两个问题，其一，作为在线学术论坛的管理者希望得到什么；其二，论坛的会员希望从中获得什么。简言之，就是要弄清在线论坛的目标和会员的需求。网站的目标一般可以分为商业目标、品牌识别、成功标准（具体要看网站注重什么，可以是用户单次访问停留时间、页面浏览量）等[2]。会员的需求是用户体验的关键内容，不同的用户对同一产品的体验需求更不相同，只有弄清楚在线学术论坛会员的真实需求，才能做好用户体验。

关于战略层的两个重要问题，笔者的假设是：在线学术论坛的发展目标应该是营造良好的学术氛围，促进科研人员的有益讨论；在线学术论坛的用户一般希望在论坛上获得以下服务：发表学术观点、以回帖形式与他人讨论学术观点、获得某一领域的最新研究摘要、获得某学科的考研考博信息、某课程的讨论专区、参加学术活动例如征文。

1.2范围层

在确定在线学术论坛的目标和用户需求之后，进入范围层需要考虑的问题是我们的论坛需要什么内容，提供哪些操作功能，也就是在线学术论坛应该包含那些频道。

关于在线论坛应该包含的频道，笔者假设为：课程讨论、学术前沿、学科时事、论文写作、考试就业、学校专区、精华区、留言反馈区、帮助等是必须的。

1.3结构层

在线学术论坛用户体验的结构层主要涉及内容建设的信息架构，通过信息架构来构建用户体验，用户可以更高效率、有效地浏览论坛的内容。这里的信息架构主要是指在线学术论坛中各个网页之间的关系以及每篇帖子的元数据，一般的信息架构的结构形式有层级结构、矩阵结构、自然结构和线性结构。

笔者假设在线学术论坛的信息架构应该采用层级结构，因为层级结构的树形状时人们习惯的分类思维，也是计算机熟悉的数据结构，不仅在技术层面易于实现，而且符合用户的体验需求。每篇帖子的元数据应该囊括帖子作者、发帖日期、帖子标题、内容类型、参考文献、作者联系方式（邮箱等）、帖子权威性评价。

1.4框架层

在线学术论坛用户体验的框架层包括导航设计和界面设计。全面且准确的导航是一个网站并不可少的，导航的作用主要体现在为用户提供在网站页面间跳转的方式，传达各网页之间的关系，传达内容与网页的关系。目前大多数网站都使用多重导航，同时使用全局导航、局部导航、辅助导航、上下文导航、友好导航和网站地图等。界面设计在此主要是指各种按钮和输入框的使用，某些按钮和输入框在节约网站空间和提升用户体验上存在一定矛盾性，在设计时应该着重考虑网站目标和用户需求的权衡。

关于在线学术论坛的导航，笔者假设多重导航是必要的，主要匹配的导航类型应该是全局导航、局部导航、辅助导航和上下文导航。在界面设计方面设计的要素很多，帖子的展现形式对于用户的体验效果是重要的，相比于下拉框和多选菜单用户更喜欢单项框和复选框，用不希望在在线学术论坛上看到太多的需要自己输入文字的文本框，用户不仅习惯于点击“确定”来发送操作也习惯于点击“回车键”。

1.5表现层

在线学术论坛用户体验的表现层主要体现在布局风格、配色和排版等。表现层是比较难以把握的，因为对于外观设计的感觉是比较主观的，可能一百个用户就有一百种偏好。

笔者关于表现层的假设是：在线学术论坛的页面布局风格应该具有对比性，突出重要信息，但是不能过度；在线学术论坛的页面颜色不超过3种；在线学术论坛的字体应该是稳重正式的风格。

2问卷调查

本文主要通过网络问卷调查的方式，获取用户体验数据（即各层次内容的态度和看法），以验证笔者最初的假设。本次调查利用问卷星（）这一专门的问卷调查网站，问卷、收集数据和进行分析，共收回问卷139份。样本用户的基本情况是：男性用户86人，女性用户53人，比例如图2所示；样本用户中学生超过九成，共126人，大学教授5人，科研工作者2人，其他职业6人；51人注册过学术论坛用户，79人没有注册过，9人不清楚是否注册过；将近一半的用户没有登录过在线学术论坛，剩下的一半仅一半的用户一周内会登录一次，具体的比例如图3所示。

对于用户体验元素的重要性这一问题，问卷的结果显示笔者给出的10个要素基本上是重要的，具体选项的比例见表1，各要素的平均得分均在3（选项从左到右依次从1到5分）以上，整体的平均得分为3.78。

对于重要性的排序得到的结果与笔者最初的假设存在差异，问卷数据显示的重要性顺序是：帖子质量——了解用户需求——帖子包含的内容——信息架构——论坛发展目标——论坛组成频道——导航——论坛的按钮/输入框等要素的形式——论坛的外观风格——帖子的外观。这样的排序结果与上题的重要性矩阵大体一致，但是仍存在误差，主要是论坛发展目标这一元素的得分仅为5.9排在第5位，这可能是部分被试者填写问卷不一致导致的误差，不过这不影响大致的重要性判断。

3 数据分析和假设验证

3.1战略层

图5数据显示：在线学术论坛对用户的吸引力主要在于获得某一领域的最新研究摘要、回帖形式与他人讨论学术观点、某课程的讨论专区、发表学术观点、获得某学科的考研考博信息。虽然顺序上有点出入，但是基本上与笔者原先假设的战略目标是“在线学术论坛应该将营造良好的学术氛围，促进科研人员的有益讨论作为发展的目标”基本一致。表明用户使用在线学术论坛主要的目的还是在于学术活动，而交友、聊天等功能对用户吸引力不大。所以，在线学术论坛在设计时应该充分重视如何才能便于用户之间的学术交流这一重要目标，这也是满足用户获得良好体验的关键。另外，值得注意的是，数据显示用户并不看重在论坛上“发表学术观点”的功能。这一点与其他一些调查数据很相似，即科研人员一般不积极在在线论坛公开发表自己的看法，而愿意在更小的知己圈子里敞开心扉。

3.2范围层

数据显示：学术前沿、课程讨论、精华区、学科时事、论文写作、疑难解答的支持者均过半数，其次分别是留言反馈、考试就业、学校专区或其他（资源交流等），具体百分比如图6所示。由此可见，在设计在线学术论坛的频道时应该着重发展和管理前几个频道，再逐渐发展后几个频道。

3.3结构层

图7数据显示半数以上的用户偏好层级结构的信息架构。

图8则显示：对于假定帖子应该包含的每一项内容，被试的呼声都比较高，依次顺序为：帖子标题、帖子作者、发帖时间、内容类型、参考文献、作者联系方式（邮箱等）、帖子权威性评价。

3.4框架层

图9数据显示，87.8%的用户认为在线学术论坛应该提供全局导航，超过一半的用户认为应该提供辅助导航和上下文导航，剩下的导航被选人数占总人数比例也不低。表明在技术允许的条件下，设计者应该提供尽可能多样的导航功能。

帖子的表现形式对于用户体验而言是非常重要的，调查数据也基本上肯定了这一假设。对于与帖子相关各要素的重要性得分排名为：内容质量、提供附件下载、权威性评价、更新频率、承载音视频能力、图片像素、文本字体、字数。重要性的平均分为3.81，具体的选项分布如表2。

用户对下拉框和单项框、多选菜单和复选框之间的选择结果（如图10和图11）出乎笔者意料之外：55.4%的样本用户选择更加偏爱下拉框，25.2%选择更加偏爱单项框，19.4%觉得两者都一样；36%样本用户选择更加偏爱多选菜单，34.5%选择更加偏爱下拉框，29.5%觉得两者都一样。可以看出比起单项框和复选框，用户更喜欢下拉框和多选菜单。

对于文本框的态度样本用户的选择（如图12）与笔者的假设一致，52.5%的样本用户不希望在在线学术论坛中看到过多的文本框，而只有1/8的样本用户认为文本框越多越好。故在设计在线学术论坛的过程应该尽量避免过多的文本框。图13数据还显示42.4%的样本用户习惯在完成任务后点击“确定”发送命令，32.4%习惯点击“回车键”，25.2%两者都习惯。

3.5表现层

图14中的四种页面布局形式是来源于James Garrett的著作《用户体验的要素——以用户为中心的Web设计》，1号图表示视觉上的中性分布，没有任何一个元素突出，2号图表示通过对比引导用户在页面上的视线，3号的表示将用户的注意力吸引到几个关键要素之上，4号图则表示由于过度对比导致了混乱的视觉。调查结果显示：样本用户更倾向于3号和2号图的布局效果，分别是41%和31.2%，选择4号图的有14.4%，而选择1号图的是12.2%。

图15数据显示，近八成的样本用户认为在线学术论坛的配色最好在2到3种，这和笔者原先的假设基本一致。另外，对于字体，多数用户倾向于使用稳重正规的宋体、楷体等字体，但是也有一部分用户希望能够自己选择，那么在设计时可以采取两者相结合，默认字体为宋体，用户可以通过下拉框选择其它字体。

4 结论

综合上述的统计分析，可以发现，从设计流程的视角，影响在线学术论坛用户体验的主要因素是：

在战略层，在线学术论坛是否将“营造良好的学术氛围，促进用户开展有益的学术讨论”为主要目标；是否能满足用户希望获得某一领域的最新研究成果摘要或者获得业务进阶机会的需要。

在范围层，在线学术论坛重视提供诸如学术前沿、课程讨论、精华区、学科时事、论文写作、疑难解答等频道的设置。

在结构层，在线学术论坛的信息架构一般宜采用层级结构；帖子的元数据应当包括标题、作者、发帖时间、内容类型、参考文献、作者联系方式及权威性评价等项目。

在框架层，在线学术论坛宜采用多重导航，优先考虑实现全局导航。宜多采用下拉列表和多选菜单，少用文本框。帖子的价值主要表现在内容质量、提供附件下载、权威性评价、更新频率等方面。

在表现层，论坛提供的页面的布局形式需要体现出对比性，但是又要避免对比过度而造成视觉混乱。页面的配色以2-3种为佳，字体要稳重。

本研究存在一些局限性，例如，量化评价表的设计比较匆忙，没有经过专家的检验，参与测试的人数较少等。

参考文献

篇11

前言

多媒体课件以丰富的视听信息，生动的图形、图像，高科技表现手段使教学内容化繁为简，化宏观为微观，形象生动，创设情境，使理论学习、问题辅助学习、激发兴趣和协作学习等在教学中得以体现，使学生由被动学习变为主动学习，由个体独立学习变为群体合作学习，由复制性学习变为创造性学习[1]。本文采用的Authorware7.0软件，通过Fireworks8.0创作动画辅助，将多种教学媒体和教学方法有机结合，完成《电子测量技术》课程的课件设计。

1 课件的设计

《电子测量技术》课程是高等职业教育电子信息、应用电子、自动化等专业的专业基础课，同时也是新知识点较多的一门课程。针对职业教育特点，我们主编了《电子测量技术》规划教材，2003年由电子工业出版社出版，教材目前印刷7次，印数已达3万册。因此，从教学角度出发，考虑该教材已获得广泛承认，课件内容以该书为基础，涵盖《电子测量技术》全书12章节内容，并且借鉴原来基于PowerPoint课件的经验，各章节自成体系，按教学大纲划分出知识点；其次是课件应具有良好的用户界面和视觉、听觉效果，课件所使用的计算机硬件和软件开发环境相对兼容，便于升级扩展。

1）脚本的编写

编写详细的脚本，是整个多媒体课件开发过程中的一个重要环节，它把课件设计与制作紧密地联系在一起，成为课件制作的重要依据。毕业论文编写脚本包括界面设计、交互设计和风格设计3个方面[2]。

界面是教学信息在屏幕上的显示区域及用户操作区域，设计时我们主要突出“教为学”的思想，围绕教学内容这一中心，既防止课件界面色彩、声像效果等过分浓烈、喧宾夺主，影响学习内容；又考虑课程部分内容如仪器内部电路抽象、枯燥，而学生需要感官刺激，激发兴趣的特点。

同时，我们体会多媒体课件的强大生命力主要体现在交互能力上，比如只需通过单击屏幕上某个特殊的链接设置，方便实现不同对象之间的跳转。本设计中创建了两个导航结构，一种是利用“导航”图标指向框架图标中的某一页，来实现程序内部的跳转和调用。另一种是通过“框架”图标内嵌的导航控件来实现不同页面间的浏览、翻页。除此之外还可以通过设置相应的超文本链接来实现交互性能。

在风格设计上主要体现界面、字幕和显示对象上整体的和谐统一。

2）框架结构的设计

编辑之前考虑到有大量的文本的输入，实现各个章节之间的翻转如果只使用“交互”图标，也是可以实现翻页功能，但硕士论文制作起来比较麻烦，而且在查找页和指定固定页方面力不从心。因此运用“框架”图标及“导航”图标制作文本浏览，就方便多了[2]。

“框架”图标和“导航”图标密切相关，经常放在一起使用。导航结构提供了选择路径的方法，可以根据设置自动跳转到指定的目标页上；“框架”图标可以方便地设计含有图形、声音、动画等组件的页面，最重要的是在“框架”图标的内部内嵌了一整套导航控件，通过这一控件可以更容易实现页面之间的来回翻转。

基本框架结构设计后，对有的地方进行了编辑，如更改控制按钮的位置和图标、设置按钮防止页面回绕、编辑进入和退出画面等，使其更适合课件的使用。

2 多种媒体素材的使用

要实现多媒体课件的内容丰富多彩，使用多种媒体素材是必不可少的。其中文本、图形、图像是最基本元素，此外还有声音、动画、视频等媒体信息。考虑到职业教育“淡化理论、够用为度、培养技能、重在应用”的特点，我们认为对测量原理部分的讲解应力求突出基本概念，通俗易懂，工作总结便于自学，因此课件这部分主要以文本、图片形式，比较详细；而测量方法则应突出操作应用，在设计时则主要以视频演示为主；对测量仪器仪表则重点讲清工作原理和组成框图，在设计时主要以动画、网页内容为主，整个课件设计力求对多媒体资源的合理布局，使它们既符合教材要求，又突出多媒体特征。

1）文本的输入

Authorware可以直接将外部的文本输入到其内部，但是它有一特点就是在文本的输入格式方面有一定的限制，它只能输入TXT、RTF格式的文件[3]。对于不是这种格式的文档如果采用常规直接进行输入势必会占用很多时间，不利于课件的开发。因此借助系统剪贴板使用复制、粘贴的方法来添加文本。当文本过长时，或者输入的文本篇幅较大，采用滚动文本的输入方式，这样在预览时会显得更方便。

2）图片的应用

使用系统本身的绘图工具箱可以绘制出比较简单的画面，但对于《电子测量技术》这门课程仅仅依靠绘图工具箱不能达到实际的要求，如大量的仪器原理图、接线图、仪器面板图等，我们采取的第一个方法是采用Authorware7.0提供的插入外部对象的功能，将原来以Protel99SE、Word、LabVIEW等制作转换为图片形式，医学论文使设计的原料变得更加丰富。

3）添加背景音乐

在Authorware7.0系统中可以支持多种类型的声音文件格式，如WAV、SWA、AIFF、PCM、MP3等[3]，在制作课件时，通过“声音”图标来插入音频和设置声音播放，如控制播放次数、设置播放时间、速率等，可以轻松引用这些声音素材添加到课件中。在课件中导入背景音乐有它的优点，但是并不是每个人都喜欢有音乐，因此通过对“计算”图标和按钮响应的设置，编写按钮激活代码使课件在播放时可以由使用者根据自己的意愿单击相应的按钮，实现有声和静音之间的转换[4]。

4）动画的调用

动画是多媒体作品中不可缺少的一部分，也是设计中的一个亮点，但使用Authorware本身只能制作出二维的动画，即动画的对象只能在一个平面内运动，这样使演示的效果大打折扣，然而这并不说明Authorware不能演示三维动画，它可以通过文件插入的方式来演示其他软件制作的三维动画，同时系统本身也提供多种效果的页面切换功能，对各种外部和内部资源加以利用同样可以达到理想的效果。

制作动画的软件有很多，使用起来也各有特色。选择合适的创作工具是设计成功的关键，通过查阅相关的资料，了解Authorware系统提供了对GIF动画图像的支持，可以将其应用到课件中。GIF动画是一种特殊的图像格式，其中包含了多帧图像，这些图像按照一定的时间频率交替显示，从而达到动画显示的效果，具体是通过Macromedia Fireworks 8.0来设计。在Fireworks中制作动画的一种方法是通过创建元件并不停地改变它们的属性来产生运动的错觉。当按顺序播放所有的帧时就成了动画[5]。

5）智能对象与数字电影

智能对象就像一个插入Authorware作品的逻辑包，它是一个强有力的开发工具，它的不同之处在于它与向导的联接，向导可以给Authorware作品提供设置界面，职称论文并且可以在插入智能对象的位置添加各种变化、新的内容和逻辑关系。它能使看似繁琐的工作变得更加容易完成，即使是没有经验的开发人员也更容易更有效地完成任务。实际上智能对象在多媒体编辑上做出了根本性的改革。比如智能对象与数字电影的结合应用[3]。在课件中引入数字电影如果只是采用之前的方法，就是在流程线上添加相应的图标进行导入，在程序运行过程中当执行到该图标，系统会直接弹出播放的窗口，不利于下一操作，但是通过Movie Controller智能对象可以容易实现播放进度的调节。

6）网页链接

在课件设计时，考虑到有些仪器由于价格昂贵或者其他原因，学校无法购置，如数字通信测试用误码仪、逻辑分析仪等，课件设计中考虑实现网页的链接，链接到知名企业的网页上，已加强学生感性认识。这一功能是通过Fireworks中使用URL来实现，编辑选中的热点并对其指定URL路径，最后导出此URL即可实现指定网页的链接。

课件的主界面如图1所示，课件第1章界面如图2所示。

3 课件的调试与打包

课件主要是为《电子测量技术》教材而制作的，因此为方便发行和使用，课件的后期工作就是进行调试和打包处理。

由于课件发行打包后将不允许用户再修改，打包之前应尽可能排除其中的错误，确认课件可以正常运行。英语论文调试可以通过两种方法来实现。一种是利用区段标志（开始/停止标志），另外一种是通过控制面板的使用。通过使用调试工具可以控制程序流程执行的区段，逐个执行程序流程中的设计图标。将制作好的课件与课件中的库文件一起打包能够提高文件的性能，减少文件的数量，使最后的作品的安装、运行更为容易，并且增加了作品运行的可靠性，避免运行时因为找不到外来函数或库文件而发生错误。

打包好的课件进行设置，可以运行在Windows95、Windows98、WindowsXP、或者是WindowsNT、Windows2000这样的32位操作系统中。其中要求的CPU应该是Pentium166以上兼容机种、内存是64M以上、硬盘容量780M、支持DirectX的显卡、光驱是8倍速以上的光驱，此外由于演示窗口大小设置为832*624像素，因此可以用于不低于16英寸显示器。制作好课件并打包后，就可以，课件时必须随同程序中用到的外部媒体文件或外部函数文件一同，Authorware7.0提供了作品的功能，该功能可以将运行作品所需的各种文件及外部函数输出到指定的目录中，从而形成用于发行的最终作品[3]。

4 结论

随着各种多媒体教学的推广和普及，计算机辅助教学作为一种先进的教学手段，以其直观性、灵活性、实时性、立体化的优势，留学生论文越来越受到大家的青睐。要想运用好计算机辅助教学这一现代化的教学手段，其关键是要设计和制作出符合教学要求的多媒体课件[6]。我们的作品虽然完成了，但是在各院校使用过程中，一定还会发现很多不尽人意之处，我们将与时俱进，将作品更加完善，以更好的实现教学目的，达到教学效果。

参考文献

[1] 胡欣杰.时尚教师多媒体课件DIY[M].北京：中国宇航出版社，2005.14-18

[2] 孙印杰，李春晖，封新亚.新世纪多媒体CAI课件制作培训教程[M].北京：电子工业出版社，2004

[3] Naheeda Ravjani.Using Authorware7[M/CD]. Macromedia，Inc.600 Townsend St.San Francisco， CA 94103， 2003

篇12

随着高校招生规模的扩大，教学管理的复杂度也越来越高，在日常的教学管理工作中产生了数量庞大的教学数据。为了应对这种情况，我国的高校逐渐开始引入基于网络平台的教学教务管理系统，以实现教学各个环节的信息化管理。教学管理系统不仅简化了教学管理的工作流程，也降低了教学管理的工作强度，从一定程度上改变了传统的教学管理工作模式。信息管理系统的出现使得行政人员、教师、学生都能够从中受益，信息系统可以帮助相关人员高效地完成日常教学常规工作。在这个过程中，人机操作的界面则扮演了人机交互的桥梁作用，但是信息管理系统的交互界面恰恰又被很多的信息系统所忽视。

1高校教务管理信息系统界面设计现状

目前，各高校使用的教学管理系统多由专业的软件公司进行开发，以产品的形式向各客户院校进行提供，客户学校根据产品的具体情况进行二次定制以适应本学校的管理模式。这种二次定制能够在一定程度上使软件的工作模式与客户学校相贴合，但这种二次开发却更多的是停留在模式与流程上对软件进行修改。在软件的表现层上却忽略了软件界面与本地用户的贴合度，造成了用户体验下降。

1.1界面设计理念陈旧

界面是人机交互的重要交互媒介，伴随着计算机技术的发展而发展迅速。随着计算机软件和硬件技术的发展，界面大致分为了手工交互、命令行交互、图形交互、综合交互四个阶段。目前，基于声音、光、手势等的综合交互界面已经出现，但是受制于硬件水平，绝大部分的交互界面依然是图形交互界面。图形交互界面的设计从交互逻辑上，已经由线性的菜单式的分级界面转向了扁平化与导向式的逻辑交互。其次，在交互设计风格上，从拟物化的风格逐步向注重信息展现的现代交互风格。以手机交互系统为例，三个主要的交互系统IOS、Android、Windows均向扁平化现代交互风格转变。这种设计风格的转变更加注重操作体验，其采用的导向式的操作逻辑极大地降低了系统的培训成本，有助于帮助计算机水平参差不齐的操作人员很快地适应系统的操作。目前，高校使用的信息管理系统大多采用了传统的拟物化、线性操作逻辑的界面。这种操作界面项目繁杂，随着信息管理系统管理项目的增多，会产生较多的功能分支，表现在其误操作的上升和用户体验的下降。例如，在图1这种传统的界面设计中，设计人员对各个功能项目进行了简单的罗列，各二级功能置于主目录下方，导致了较多的功能项目，从而不利于对于管理人员的技术培训，实践证明对于这种界面的培训成本非常高昂。

1.2设计风格落后

在设计过程中，色彩、材质、造型等一系列设计元素所呈现出的一种美学感受可以体现出产品的设计风格。设计风格体现在计算机软件产品上，通常指的是软件界面的设计元素――色彩搭配、线条设计、图标排列等元素结合时体现出的一种美学感观。在计算机软件系统的设计上，极简主义已经逐渐占据了设计潮流，色彩运用平淡柔和，线条和图标都追求抽象化处理。对于高校的信息管理系统来说，其需要处理的信息量较多，容易产生疲劳，对于配色和线条等设计元素更应当采用较为抽象扁平的设计风格。但是，目前的很多信息管理系统采用了原色搭配，色彩对比度较大，虽然有醒目的作用，但是容易产生视觉疲劳，同时在操作时，计算机鼠标点击的反馈动画较少，不宜提升操作的效率。

1.3不关注普适设计

高校使用的信息管理系统大多由专业的软件公司以产品的模式进行售卖，对于用户的本地化操作却产生了一定的障碍，其产品未必符合用户单位的实际情况。许多信息管理系统需要进行二次开发，才能在工作模式上满足用户的需求。界面设计上更是如此，对于界面的元素缺乏调整，字号字体与操作模式缺乏客户选择项。

1.4不同系统的界面集成度不高

高校的信息管理系统不可能是一个独立的单一系统，以笔者所在的学校为例，它由教务、学生管理、档案、论文、实践、教材征订等多个子系统组成。各子系统之间的界面各不相同，由不同的厂商进行开发维护。从界面的设计语言来看，设计语言涵盖了ASP、PHP、ajax等不同的设计语言，其界面设计风格各不相同，操作逻辑也不一样。对于这种松散的管理系统来说，这种界面风格不统一的系统无疑会对日常的管理工作造成一定的困难。

2高校管理信息系统的设计原则

2.1贯彻以面向用户为中心的设计理念

UCD（User Centered Design）是指在设计过程中，以用户体验为设计决策的中心，强调用户优先的设计模式。高校信息管理系统面对的用户通常涵盖了高校的各个用户层面，其中包括高校行政管理人员、高校的教师和学生群体。高校信息系统的建设从界面的定制设计上也应当体现出以用户为本的设计理念。界面的设计不应以管理层的便利度来衡量系统界面的有效性，而是应以用户的操作体验度的高低来衡量系统的可靠性和有效性。

2.2贯彻通用设计原则

通用设计，是指一种对于产品的设计和环境的考虑是尽最大可能面向所有的使用者的创造设计活动。通用设计要求设计者充分考虑产品所面对人群的各种情况。高校的信息管理系统需要面对的用户年龄层次不是一个单一的年龄层次，其包括了青、中、老年人群。这种用户结构导致用户群在其生理能力上具有明显的差异，其视力能力、操作能力、记忆能力各不相同。对于设计者来说，必须考虑到不同人群的操作差异，在设计界面上做出合理的安排，即通过模式选择、界面定制、色彩提示等手段来弥合这种生理差异。同时，在系统中做出一定的辅助功能来对操作障碍进行辅操作。

2.3注重“再设计”环节对系统进行整合

“RE-DESIGN”是以重新审视已经存在的日常用品为目的的设计，这种设计理念来源于设计师的设计反思环节。这个设计环节要求设计师和用户对已经存在的产品、系统进行反思，通过对产品进行“再”设计，从而将产品调整到最佳的工作状态上。再设计不仅仅可以修补设计师在初次设计时所产生错误，也可以对产品的设计理念进行修改，通过不断的修改和调整将产品和界面调整至一个多方用户群都可以接受的平衡状态。

3对高校信息管理界面的设计建议

3.1以导向任务式代替传统的选择式界面

高校信息管理系统具有项目复杂，流程严格的特点，并且大多以工作时间为线索进行排列。以毕业论文系统为例，学生的整个论文流程大致包含了题目拟定一开题环节一中期检查一初稿审查一二稿审查一终稿审查一学术一答辩与评分等环节。这种以时间排序的档案管理系统如果在实际中采用罗列式的界面设计，会造成学生材料提交不全，用户培训和使用有困难，提交时间不契合等情况。并且，对一些计算机水平不高的用户，会造成使用障碍。如果换用引导式界面设计，可以严格控制工作环节，并且对于用户的工作安排能够有一个非常清晰明快的指示。

3.2采用简洁化的设计界面

高校的信息管理系统往往产生大量信息，在界面设计时并不适合采取具有大量装饰风格的设计。装饰拟物的设计风格在视觉上易对信息本身产生关注上的干扰，操作人员往往被细枝末节的装饰细节所吸引。目前的扁平化、简洁化在界面设计时应当采用间接明快的设计风格，突出系统的信息展示，消除工作时的视觉疲劳。

3.3界面可定制或采用多模式预定制

由于高校信息管理系统面向的使用者涵盖了青中老等年龄阶层，使用者的计算机操作水平参差不齐，使用者的使用习惯各不相同。在进行界面设计时，需要对界面中呈现的信息元素采取可定制的操作模式，对于字体的颜色、大小等属性应当给予用户修改权限，或者对界面采取预定制。设置简单用户、管理用户、专家模式等不同的管理界面，这样可以满足不同操作水平用户的操作需求。

3.4提高系统的适配性

高校信息管理系统应当具有跨平台的适配性，特别是基于网页的信息管理平台更是如此。在系统上线前应当对本学校的计算机平台进行一定的调研摸底，统计主流的操作系统与浏览器系统的型号，对主流使用的操作平台进行设备适配，防止出现乱码和不兼容问题的产生。

3.5加强辅助与提示

高校信息管理系统应当注重其提示功能的设计，对于项目输入项的错误进行色彩或声音的提示。增加系统的辅助功能，对视力不佳的用户人群应当增加诸如“放大镜”“语音阅渎”等方面的功能，充分照顾老教师群体。

3.6注重系统的测试和调整