网络中人与人在不同的空间通过网络进行交流沟通,聊天界面设计是要回归到空间中,聊天的内容文字在不同的空间中穿梭,互相传递信息.在输入框中输入文字,选择不同的表情,文字出现时会选择不同的运动状态表达说话人的情感,高兴,生气或惊讶!

欢迎体验 ;)

请点击:   http://chat.stoyard.com

毕业论文.

                                 等  待
                                               -----交互网站Loading多样性设计

                                                     版权所有.宋习文

摘要：
自1989年瑞士欧洲量子物理实验室发明了WWW(World-wide-web)万维网以来，全球互联网网页数量和用户成倍增加．发展迅速，网络成为续报纸，电视之后的第三大媒体．各大公司日渐注重对其在网络上的宣传。1997年，Macromedia收购FutureWave公司，FutureSplash软件更名为Flash，该软件凭借其优秀的矢量动画图形系统，小巧的文件体积和对编程脚本的强大支持，很快在网络上流行起来，相对让人乏味的静态页面，Flash制作的动态交互网站可以带给浏览者全新的用户体验。Flash8推出之后增强了对流媒体视频的支持，使网站可以使用流媒体作为互动元素，给网站设计师带来更多的发挥空间，但是过多的效果，素材也带来了新的问题，网站的体积不断膨胀，用户需要下载的资源越来越多，而在中国，普通宽带用户的网速少的可怜．浏览这种交互网站需要花费大量时间去下载页面．所以很多网站加入了载入进度条(loading)在浏览者下载页面时使用进度条来提示用户目前电脑已经下载了多少．但是千篇一律的进度条让用户感到乏味，很多人由于无聊的等待时间过长而关闭了网页．所以loading的制作变得非常重要．笔者的设计就是要提出一些在制作loading时候更多的可能性，让用户在等待载入网页的过程中不再无聊．不会在loading的时候关掉页面，防止用户的流失．

关键词：Loading，网站设计，Flash，交互体验，人机互动，ActionScript

目录：
一  思想来源  ……………………………………………………………………  1
二  问题分析  ……………………………………………………………………  1
三  使用Flash本身ActionScript语言制作交互式loading ……………  2
四  在loading过程中进行人与人之间的互动  …………………………   3
五  结论  …………………………………………………………………………  5
参考网站  …………………………………………………………………………  6
致谢  ………………………………………………………………………………  6

一、思想来源
Flash的出现，使得浏览网页的用户得到互动体验成为了可能，网页设计师也不再需要懂得那专业且复杂的程序语言就能做出丰富的动画和交互体验，Flash自身的特点使浏览网页的方式更自由，不必再枯燥的下一页，下一页的点击。近年来Flash发展迅速，全Flash网站逐渐增多，特别是注重自身品牌的大公司，如耐克、阿迪达斯、三宅一生、诺基亚、奥迪（行业包括：服装、科技、汽车、房地产、电影）等世界品牌，运用丰富的多媒体技术和交互体验展现自己的公司理念和产品。然而丰富的效果也增加了网站的体积。从原来20k-100k的单张页面到现在将近1M-10M，页面的体积越来越庞大，在中国，虽然宽带在城市中已经基本得到普及，但是对于如此庞大的文件量仍然需要下载1分-10分钟。在这几分钟当中如果用户对着的是一个没有任何提示的白色屏幕恐怕会令人发狂。好在Macromedia公司为Flash添加了两种监听事件getBytesTotal和getBytesLoaded一个为读取文件的总字节数 ，另一个为读取文件当前加载的字节数，于是便有了载入指示(loading)计算机会把当前读取的进度实时反馈给用户。Loading虽然原理很简单，但对于Flash网站来说却非常重要。它类似于Windows开机前的进度指示，手机的开机动画和最近火爆流行的手机彩铃。提示目前进行到的状态，请你耐心等候，如果没有任何显示的话用户可能会以为是电脑，手机死机了。所以在网站设计当中，loading的设计应该被设计师所重视。很有可能用户等待loading的时间要比浏览页面的时间还要长！
 
 
二、问题分析
Loading在Flash刚推出前期表现比较单一，常见的一种为横向的不断填充的横条　(类似windows拷贝文件时的指示条，图1)，一种为圆形填充的园　(类似苹果开机时候的进度指示，图2)。单一的横条和转动的园很难提起浏览者的兴趣，于是网站设计师在loading过程中增加了更多有趣的动画，使得在网站loading的过程中变得丰富多彩起来。但是loading过程中做一个补间动画也并不是十分完美。通常Flash网站需要将loading时候的动画放到已经被载入的页面当中。重复的去调用这段动画。这样做可以尽量的减小文件体积。但每个栏目使用同一个动画做loading ，在浏览者看过一次动画后重复观看并不能带来多少惊喜。动画也不能做的太复杂，因为loading的作用用来指示当前文件的下载量。如果loading本身的体积过大就失去它原本的作用。还有一个限制，在下载过程中根据用户的自身网速条件，有的网速快，有的慢，并且在下载过程中速度是变化的，不稳定。有时候会出现动画不连贯，或者重复播放的问题。所以用事先做好的动画做loading也不是很完美。

三、使用Flash本身ActionScript语言制作交互式loading
Flash在网页上的广泛运用得益于其功能强大的编程脚本支持。到目前Flash CS3中ActionScript已经升级到3.0，其中提供了大量的类和方法。使得编程变得简单而高效。本文上面说过，用户在浏览网页时网速在不断变化有快有慢的，造车这样的原因是因为网页在加载的过程中由于服务器，和网络服务商的原因下载速度是在不断变化的。何不利用这些资源，做出根据实际网络状况变化的loading?
总结有以下可利用的数据:
1．下载页面总字节数
2．当前已下载字节数
3．单位时间内下载的字节数(当前网速)
根据以上三点，配合ActionScript提供的物理引擎，可以制作出根据实际情况动态变化的loading。举例：如一个水族馆的网站，在页面loading时可以做一个注水的效果，当水注满后即页面载入完成。使用程序绘制一条曲线，来模拟水的表面，给曲线加载物理属性，使其在loading过程中根据网速的快慢改变曲线的弯曲度（原理和Illustrator中画曲线相同）。来模拟水的波纹效果。在实际使用中如果用户的网速相对较快，文件体积较小，程序计算出的曲线就会越弯曲，视觉上会感到水面上的波浪越大，好像把水龙头开打迅速的放水。而如果用户网速较慢文件体积较大 ，在载入过程中，水的波浪就会很微弱，水平面平静而缓慢的升高。这种loading充分利用了编程所特有的多变，随机，机械性，弹性等特点，即使用户看再多次，每一次也会略有不同，是对自然界的一种模拟，并结合了用户的网络状况，进行不同的运算得出不同的图形。让用户有新鲜感，每次都会有不同的画面。利用程序所能提供的这种随机，多变的特性结合多种视觉图形，可以把loading的过程更丰富起来。

 
四、在loading过程中进行人与人之间的互动
上边所说计算机根据实际网络状况实时绘制出相应的图形，是人与电脑之间的互动，而在长时间loading等待的过程中是否可以在同为浏览该网站的人之间进行互动?即访问者与访问者之间的互动。（该方法为我的毕业设计将做详细介绍）。在loading的过程中，A访问者可以发送图像，文字到B访问者的电脑。B也可以传递信息到A。人与人之间的沟通，会比人机互动产生更多的变化，让互动变得有意义，让等待变得有事可做。在我的作品中，虽然是文字与文字之间的传递，但是区别传统聊天一行一行更新文字的模式，文字不再只是存在于平面当中，而是将文字立体化，聊天的文字内容穿梭于空间当中，文字由远到近的飞入，好似从很远的地方传来， 自己的发言将反相由近向远飞去。互相看不见的人在空间中用文字交流。是对网络世界的一种模拟。信息从远方的固定位置传递过来。渐渐浮现在浏览者眼前。在交流过程中可以发送表情，利用Flash的脚本语言可以实现更有趣的效果。表情不再是一个笑脸，或某个图形，而是使用聊天内容文字本身制作动画，用活泼跳动的文字动画表达喜悦，用节奏缓慢的文字动画表达悲伤。利用文字本身表达情感。该聊天场景支持10人同时在线对话，当不同的用户输入不同的文字，做出不同的文字表情动画，所有的内容汇聚到一个空间中，平面上的文字在不断的产生立体的图形。在等待页面被载入的过程中用户可以选择参与到交流中来，也可以观看别人互相之间所发送的文字信息。从中忘掉时间的流逝，不需要让等待变得那样寂寞。

五、结语
自从从1984年苹果公司推出第一台带有鼠标控制，并带有平面设计界面的电脑开始，设计与计算机技术便紧密的结合在一起。新的计算机技术给设计师带来了更高的工作效率和一些传统方式无法实现的效果。特别是自互联网出现后，网络设计几乎完全依赖于计算机，特别是Flash制作的交互网站，软件更加的编程化，在Flash的一次一次升级中ActionScript动态脚本变得越来越重要。Macromedia公司最近推出的Flex已经去掉时间轴，完全使用程序来开发交互网站。网站设计师必须懂得编程才能做设计。当然网站制作是一个团队项目，没必要必须一个人完成。但是对设计师来说即使不会编程，也要对程序的结构和可实现的效果十分了解。只有这样才能创造出更多更好的交互形式。

参考网站：
http://www.thefwa.com
http://www.blueidea.com
http://pages.blueidea.com
http://www.newwebpick.com
http://www.adobe.com
http://developer.adobe.com
http://www.flashempire.com

致谢：
本文的写作与完成首先要感谢我的导师肖勇教授的支持和指导。同时还要感谢王敏、谭平、刘波、宋协伟、许平、航海、周至禹、王子源等老师一直以来对我的影响和教导。感谢蒋华老师、李少波老师对我毕业设计的帮助和指点。感谢在ActionScript编程上给予帮助和教导的Lorraine（孙璐俞）老师。感谢四年来一起学习成长的朋友和同学。最后感谢我的父母对我的支持与关怀。

更多文章请点击：2007全球设计院校毕业展专题报道