1、J2EE 项目实训教学中的项目热身各种 Web 页面设计效果欣赏1、中国网站首页设计有四大特色：“长，闪，挤，花” （摘录自http:/ ，再在每两块之间加一条广告，最后再在页面的最上面加一个更综合的区域，所谓的重中之重，这样以来页面想短都短不了。看下面的 http:/ Jakob Nielsen 的说法网站首页的长度不应该超过 4 屏。当然这个准则也未必就那么准确，但是至少应该承认页面不是越长越好的。（2）说说“闪”就是网页上能动的东西动画。主要是 Gif 动画，flash 动画，脚本语言实现的图片交替效果，还有就是弹出窗口。动画对网页表现本应该是个很好的补充，但是现在的实际效果是对网页的干
2、扰，因为动画从一开始就扮演着广告的角色。虽然将各种形式的动画应用于网站在国外的网站上也常见，但是中国网站上的动画实在是太多了。恐怕也是因为中国网站页面长吧，能放动画的空间自然也就大了。整个页面到处都在不停的闪。科学家已经证实，在月球上是看不到万里长城的，但是我想，应该是可以看到中国网页的，它们不仅长，而且还在不停的闪烁。这些动画通常是广告，网站要生存，要有经济效益，这是可以理解的，但却不可接受，尤其是太多的时候。最不可接受的是一些网站会把自己的栏目名称，网站 logo 之类的很重要的内容也做成动画，以为这样可以更醒目，要知道，绝大多数用户是经验丰富的，他们看到动画闪来闪去就会认为那是广告的，尽
3、管你不是，那也活该，谁让你乱闪来着。虽然弹出窗口里的内容不一定是动画，但是它“噌”的一下弹出来，着实是够“动”的，就动画的效果而言，绝对是最具视觉冲击力的。还好，现在有越来越多的雷锋式的好公司提供了能屏蔽弹出窗口的工具。脚本语言实现的图片交替效果目前主要是用在网站头条的图片报道上，虽然是动，分散用户的注意力，好在这种方式还是为了给用户提供尽可能多的信息，应该值得肯定，也应该是动画应用于网络的发展方向，只是不知道什么时候，哪位设计师灵感突现，把广告也伪装成这种样子，应该能在一片骂声中为公司赢得不少经济效益。（3）第三是“挤”我们的网站看上去满满当当的，比公共汽车还挤。每天早上都是挤公共汽车，然后
4、挤地铁，挤电梯，挤着打卡，好容易坐下了，打开电脑就不要再那么挤了，大家站开点儿吧，网页上有的是地儿。与英文相比，中文本身就显得比较复杂，对于有链接的文字中国网站又往往更倾向于传统的随时保持下划线的方式，再加上小的几乎不存在的行间距（显然，这里夸张了，至少还要有划下划线的地儿），使得页面看上去分外丰满。（4）第四是“花”中国网站的色彩之绚烂，几乎无以复加。前面分析了首页的构成方式将各个栏目摘要排放在首页上，通常每一个栏目会有一种主色调，这样一来，首页上的色彩自然就很丰富了。当然，分栏目确定主色调的设计方式本身并没有错误，也不足以搞“花”页面，然而实际情况却更复杂，以文字为例，未点击的链接文字有黑
5、色和蓝色，重点的文字会用红色（重点通常还很多） ，点击后的文字链接是紫色，无链接且不重要的文字是灰色，此外为了突出某一个重点内容会添加一个醒目的背景色或文字颜色网页设计师为了表明自己工作用心，会给每一个子栏目的标题部分设计一个很具有特色的背景，这些文字再与数不胜数的图片、动画交相辉映，使得用户可以在一个页面上将电脑可以显示的全部色彩尽收眼底。网页设计师实际上根本不需要绞尽脑汁为页面设定主色调了，所有的页面色调都已经设定好了彩色。2、为什么中国网站会设计成这个样子呢？（1）造成“长，闪，挤，花”问题的实质是一个“多”字中国网站首页上内容多，重点多，栏目多，图片多，广告多，该多的多，不该多的也多，
6、要多多，有多多。“多”是中国网站的特点，更是中国社会的现实状况。无论是超级市场里还是购物中心里，到处是商品，到处是人潮，即使是象书店，美术馆这样的场所也是相似的场面，人们相信人多的商场里的商品会更好，人多的书店里的书会更全，人多的美术展会更有水平，卖家只能尽可能的展现自己的产品，从而证明自己的实力，而其他更高级的要求，诸如：环境，风格，品味，服务都要为展示产品让路了。在目前的中国，无论是物质产品还是精神产品，广大受众的需求都远远没有得到满足，所以大家都希望能看到更多产品，这样就形成了“多则好”消费心理（浏览网站的消费形式显得更间接） ，网页设计师在应聘时经常会被问到：你是否能胜任“大型”网站的
7、设计，即“能不能把页面做的很长。 ”（2）中国网页内容多，给人忙乱的感受正象我们自己经常会向别人抱怨自己忙的要死，以此来表示我们自己的价值。3、设计可以分为三种层次引用 Donald Norman 在 emotional design一书中的理论，设计可以分为三种层次：本能水平的设计、行为水平的设计、反思水平的设计。（1）本能水平的设计是满足人类本能审美需求的设计，也就是漂亮、美观的设计；（2）行为水平的设计是注重效用的设计，注重功能、易用性、可用性；（3）反思水平的设计注重信息、文化的作用，一件产品被设计的很独特、出众、引人瞩目，用户会因为始终这个产品而产生乐趣，产生满足感。4、各种网站的页
8、面欣赏（1）丰田中国网站 http:/ http:/ http:/ 网站是企业向用户和网民提供信息(包括产品和服务)的一种方式,是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。企业的网址被称为“网络商标” ，也是企业无形资产的组成部分，而网站是 INTERNET 上宣传和反映企业形象和文化的重要窗口。企业网站设计显得极为重要，下面是一些网站设计中应注意的原则。（1）明确建立网站的目标和用户需求Web 站点的设计是展现企业形象、介绍产品和服务、体现企业发展战略的重要途径，因此我们必须明确设计站点的目的和用户需求，从而做出切实可行的设计计划。我们会
9、根据消费者的需求、市场的状况、企业自身的情况等进行综合分析，以“消费者（customer)”为中心，而不是以“美术”为中心进行设计规划。在设计规划时我们应考虑：1) 建站的目的是什么？2) 为谁提供服务和产品？3) 企业能提供什么样的产品和服务？4) 网站的目的消费者和受众的特点是什么？5) 企业产品和服务适合什么样的表现方式（风格）？ （2）总体设计方案主题鲜明在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站的整体风格和特色作出定位，规划网站的组织结构。Web 站点应针对所服务对象（机构或人）的不同而具有不同的形式。有些站点只提供简洁文本信息；有些则采用多媒体表现手法，提供华丽的
10、图像、闪烁的灯光、复杂的页面布置，甚至可以下载声音和录像片段。好的 Web 站点把图形表现手法和有效的组织与通信结合起来。为了做到主题鲜明突出，要点明确，我们将按照客户的要求，以简单明确的语言和画面体现站点的主题；调动一切手段充分表现网站点的个性和情趣，办出网站的特点。Web 站点主页应具备的基本成分包括：页头：准确无误地标识你的站点和企业标志；Email 地址：用来接收用户垂询；联系信息：如普通邮件地址或电话；版权信息：声明版权所有者等。充分利用已有信息，如客户手册、公共关系文档、技术手册和数据库等。（3）网站的版式设计网页设计作为一种视觉语言，特别讲究编排和布局，虽然主页的设计不等同于平面
11、设计，但它们有许多相近之处。版式设计通过文字图形的空间组合，表达出和谐与美。多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系。为了达到最佳的视觉表现效果，我们将反复推敲整体布局的合理性，使浏览者有一个流畅的视觉体验。（4）色彩在网页设计中的作用色彩是艺术表现的要素之一。在网页设计中，我们的设计师根据和谐、均衡和重点突出的原则，将不同的色彩进行组合搭配来构成美丽的页面。 根据色彩对人们心理的影响，合理地加以运用。如果您的企业有 CIS（企业形象识别系统） ，我们将按照其中的 VI进行色彩运用。 （5）网页形式与内容相统一为了将丰富的意义和多
12、样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。灵活运用对比与调和、对称与平衡、节奏与韵律以及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。如对称原则在页面设计中，它的均衡有时会使页面显得呆板，但如果加入一些富有动感的文字、图案，或采用夸张的手法来表现内容往往会达到比较好的效果。 点、线、面作为视觉语言中的基本元素，巧妙地互相穿插、互相衬托、互相补充构成最佳的页面效果，充分表达完美的设计意境。（6）三维空间的构成和虚拟现实网络上的三维空间是一个假想空间，这种空间关系需借助动静变化。图像的比例关系等空间因素表现出来。在页面中，图片
13、、文字位置前后叠压，或页面位置变化所产生的视觉效果都各不相同。通过图片、文字前后叠压所构成的空间层次不太适合网页设计，根据现有浏览器的特点，网页设计适合比较规范、简明的页面，尽管这种叠压排列能产生强节奏的空间层次，视觉效果强烈。网页上常见的是页面上、下、左、右、中位置所产生的空间关系，以及疏密的位置关系所产生的空间层次，这两种位置关系使产生的空间层次富有弹性，同时也让人产生轻松或紧迫的心理感受。现在，人们已不满足于 HTML 语言编制的二维 Web 页面，三维世界的诱惑开始吸引更多的人，虚拟现实要在 Web 网上展示其迷人的风采，于是 VRML 语言出现了。VRML是一种面向对象的语言，它类似
14、 Web 超级链接所使用的 HTML 语言，也是一种基于文本的语言，并可以运行在多种平台之上，只不过能够更多地为虚拟现实环境服务。 （7）多媒体功能的利用网络资源的优势之一是多媒体功能。要吸引浏览者注意力，页面的内容可以用三维动画、FLASH 等来表现。但要由于网络带宽的限制，在使用多媒体的形式表现网页的内容时不得不考虑客户端的传输速度。 （8）结构清晰并且便于使用如果人们看不懂或很难看懂您的网站，那么，他如何了解你的企业和服务呢？使用一些醒目的标题或文字来突出您的产品与服务。并且即使您拥有最棒的产品，如果客户从您的网站上不清楚您在介绍什么或不清楚如何受益的话，他们是不会喜欢您的网站的。 （9
15、）导向清晰导航设计使用超文本链接或图片链接，使人们能够在您的网站上自由前进或后退，而不会让他们使用浏览器上的前进或后退。我们在所有的图片上使用“ALT”标识符注明图片名称或解释，以便那些不愿意自动加载图片的观众能够了解图片的含义。（10）快速的下载时间很多的浏览者不会进入需要等待 5 分钟下载时间才能进入的网站，在互联网上 60 秒的等待时间与我们平常 10 分钟等待时间的感觉相同。因此，我们会建议您尽量避免使用过多的图片及体积过大的图片。我们通常会与客户合作，将主要页面的容量控制在 50K以内，平均 30K 左右，确保普通浏览者页面等待时间不超过 10 秒。（11）非图形的内容我们在必要时适
16、当使用动态“Gif”图片，为减少动画容量，应用巧妙设计的 Java 动画可以用很小的容量使图形或文字产生动态的效果。但是，由于在互联网浏览的大多是一些寻找信息的人们，我们仍然建议您要确定您的网站将为他们提供的是有价值的内容，而不是过度的装饰。 （12）方便的反馈及订购程序让客户明确您所能提供的产品或服务并让他们非常方便地订购是您获得成功的重要因素。如果客户在您的网站上产生了购买产品或服务的欲望，您是否能够让他们尽快实现吗？是在线还是离线？ 6、网页设计在技术上所应该满足的一些要求（参考 http:/ 放置一个导航在人们容易看见的地方。一致性在这里是最重要的事情。你应该努力建成一个在整个网站中所
17、有网页上一致、有序的导航系统。 （2）字体大小 你的字体尺寸应该足够大，以便使浏览者毫不费力地阅读。很多人都讨厌阅读非常小的字。不要因为字小而丢失了浏览者。优化的尺寸一般是 12-13 点。浏览着应能轻松地阅读网站上的文本。将大块的文本分成若干段，以便浏览者浏览。 （3）每行长度 文本的行长度要便于阅读。优化的为了打印用的文本一般是 10-20 个单词，或者 60-70个字母。在比较大显示时，选用 40-50 个字母的也许更合适。如果每行太长，阅读者就不得不去寻找下一行的头；如果太短，就会将太多的单词和段落切断。 （4）突出重点 突出重点是设计和排版的一部分工作，它是非常重要的。明显和容易识别
18、重点，有助于浏览者的阅读；反之，当这个工作欠缺时，就会是一些人感到这里的每句话都很重要，使网站的阅读性变差。 （5）图象众所周知，一幅图片胜过万句话。这个规律在互联网里也适用。最好用清晰、有吸引力的照片来展示你的产品。如果你提供的是一项服务，找一张最能表现它的图片。在这里要注意文件的大小。即不要压缩你的图片到不够清；也不要将图片做得过高的质量，这样会使文件尺寸太大，增加了下载的时间。 （6）Gif .vs. JPEG 格式的问题缺乏经验的网站设计者经常会将图片存成错误的格式。这里有几条避免犯这样错误的指南。如果你的图象色彩数不多（小于 64） ，GIF 是较好的选择，并且要减少色数。假设图象有
19、 10-15 种色数，你就可以减少到 16-23 种。另外，你的图象中含有文本，你也应该选择 GIF。JPEG 用的失真压缩模式，它会造成文本和边缘模糊。 如果你存的是照片，那你应该存为 JPEG。JPEG 图象可以包含 3200 万种不同的颜色。它已经大大地超过了人眼所看的范围。 如果你要将一个大文本和一幅照片组合起来，JPEG 也许是个好格式。即使这些边缘可能有些模糊，但不至于无法阅读。如果你认为你的图象比文字更重要，那么还是用JPEG 格式吧。 （7）速度 要尽量减少下载时间。我们生活在一个忙碌的世界，人们不可能等待太长的时间。在不损坏你图象的前提下，尽量地减少图象的容量（应在 KB） 。 7、总结“网页制作应遵循的基本原则” 应该尽量避免“长，闪，挤，花”的页面，同时应该遵守下面的一些基本的原则。（1）合理的网站架构（2）优化的网页布局（3）友善的访问浏览（4）精美的视觉效果（5）适宜的创意设计
