有故事的网页设计——Flash网站奇妙之旅

当浏览网页时,总有那么一类网站华丽而富有趣味性。在浏览信息的同时,足够让我们眼前一亮。它们在充分融入动画、视频、游戏、甚至是与众不同的交互操作而使网站效果令人惊奇,这些基于flash设计的网站,让网页从平面变身立体,从静态变得有故事有情节。 如果将fash技术用于个人作品集制作或者企业推广时,网页设计便成为了一种有故事有情节的艺术,它们是那样富有活力而创意独特。

下面让我们随着这些利用flash技术制作的网站,来一场奇妙的网络旅行吧~~

一、新奇的loading页

利用Flash技术制作的网站由于需要载入大量的美术和音乐素材而使loading时间变得很长,而此时,与众不同的设计可以使这个载入时间变得有趣,当用户等待时间中所有的操作变成网站体验的一部分,这便让我们的访问之旅有了一个很酷的开始。下面这些网站,便是拥有了一个很酷的loading页,让我在茫茫的网站设计海洋中记住了他们。

1.  http://bio-bak.nl/

这是荷兰一个设计师的作品集网站。不得不说loading页那两只欠扁掉毛还不停叨叨的鸭子看上去实在是太贱了,直接导致你想要用手把他们揍一顿,这个过程中loading的时间确实在不知不觉中就过去了。  另外一个亮点是 网页中鼠标移动的过程很有趣,很多流畅的flash交互融入其中,让你很快感觉到设计师是一个多么可爱的人。

2. http://www.oddodesign.com/

Oddo design是一个网页设计团队自己的网站,loading绘制了一辆公交车从起稿到完成的过程,很有趣。网站的设计从以行驶中的大巴车为世界观的小世界开始,每个用户浏览的细节风格都很统一很整体。

3.http://madeforeachother.com/

乐事食品的推广网站。从屏幕边远远跑来相互拥抱的的数字小人,组成了特别有爱的loading画面。但这个网站的设计亮点,不仅体现在loading页上,之后的入场动画像是好莱坞动画大片片头一样炫丽。再后来,进入网站像是一个游戏世界一样,从土壤下的生物世界、池塘里、火上小岛、云上世界到宇宙空间,每一部分都像是游戏的一个关卡,将乐事薯片的系列动画广告串联起来,娓娓道来。

4. http://www.hf3.coca-cola.com/

说到网站设计中好玩的loading页,我首先想到的就是这个可口可乐幸福工厂系列广告的推广网站。尽管这个网站已经发布了一段时间,但是这丝毫不影响它页面体验的有趣性。这个loading页加入了用户互动的游戏概念,你需要将空瓶放在可乐机下方位置上以便能灌装尽量多的可乐,在loading的从1%到100%的过程中,灌装完成越多的可乐越好。当然,进入网站后的画面故事也非常有趣,延续了它幸福工厂的系列视频广告的感觉,建造出了一个美好而庞大的可乐制作车间,整个浏览像观赏一部动画大制作片子一样。

二、特殊交互方式带来的奇妙体验

有这样一类网站,它们融入了更多元的交互方式,使用户在浏览的过程中获得不一样的快感,让网站的体验变得更加有趣,用户的参与度也更高。

1.http://laplanete.sldimension.com/

设计师的个人网站。一进入网站就可以感觉到设计师是个很有童心的家伙,网站启动页是需要用户制造爆炸的小操作,进入页面之后,制造的爆炸炸出了一个很可爱的的泥塑小星球,而用户在进行关于星球浏览的操作感觉非常爽。

2.http://www.maxshaman.com/#/friends/

这是一个有意思的个人网站,看上去设计师是相当豪放的人,不但不在乎陌生人用插小人的方式诅咒自己,反而还喜欢浏览者用这种方式表达对他的关注,于是,设计师在网页上放了个破布头小人,可以让浏览者用针头随意虐待,同时还能看到设计师对此作出的痛苦反应。有点暴力,但还是蛮有趣的。

3.http://www.bartleboglehegarty.com/#

一个设计团队的网站,尽管首页同样运用了立体地球转动的动画小操作,但是当响应点击后,地球的出现和消失转场过程还是非常有新意的。

4. http://www.matthiasdittrich.com/

这是一个运用了三维空间互动概念的网站,点击后页面转场的三维效果过的很好,带给人很流畅轻盈的科技感。这种三维感觉的应用,带给了人们不一样的专场感受,将网站从非常具有平面感束缚中挣脱出来。

5. http://soytuaire.labuat.com/

这是早前就看过的一个非常有意思的交互式网站,由鼠标的位置决定了线型笔触运动的方向。通过笔触的生长,讲述了一个流动的画面故事。整个网站呈现很迷人的水墨效果,中间由墨水滴落产生的动画也做得非常与众不同。一直都觉得这算是非常经典的flash动画网站。

6.http://www.arihirvonen.com/

同样是一个设计师的个人网站,除了loading页面中小人旋转效果很酷外,网页上设计师关于自己的介绍有个好玩的交互。整个网站设计让我想起某个动画中关于科学怪人的故事。

三、融入动画元素,制造有趣的网站风格

这些网站或拥有独特的世界观,或拥有个性十足的设计风格,在充分融入了动画、游戏等元素之后,让整个网站变成了一个不一样的小世界。

1.http://okaydave.com/

设计师的个人站点网站,将自己的成长经历、个人作品等全面的信息都囊括在了网站之中。很强的手绘风格,整体看起来像一本内容丰富的随身速写本。首页的点击设计显得非常独特。利用很炫的动画效果让鼠标点击后的响应看上去像是科幻动画片转场一样。

2.http://www.escriba.es/base_en.html

这是一个可爱的站点,整个网站设计看上去像一个蛋糕工厂,清新而童话般效果,不同风味的蛋糕变换出了不同的蛋糕工厂,特殊的世界观下,仿佛置身于一个美食世界。

3.http://www.xixinobanho.org.br/

今天介绍的网站中,这是个人最喜欢的一个网站,暖暖的小清新,点开之后心情一下子就敞亮起来。载入画面很赞,各个网页的切换动画做的很用心很有创意。相信设计师一定是个温暖的人,有孩子般纯净的微笑。

4. http://www.happyingreenville.com/

尽管网站的画面很随意,像是很简单的手绘草图,却在页面的切换间连成了好玩的故事,每个点击的选择都有对应不同的镜头转换。将一个网站当作一个故事来整体制作,完整,饱满。

5.http://scruffs-game.com/index.html

解密游戏游戏《史卡夫一家》的官网,和很多国外游戏或电影大片的推广网站一样,制作精良且非常注重用户体验的趣味性。画面很精致,操作和页面的切换都很流畅,让人感觉很舒服。

6. http://zzz.drinkzzz.com/

看上去像一个饮料广告的推广网站。网站页面的载入做的像MTV开场,而后来点击每个选项后的响应都有趣,风格很简约,但设计绝不简单。

7.http://www.starbuckscoffeeathome.com/

这是星巴克的一个推广网站,和星巴克店面的设计风格很想,亮点在于当鼠标落在中间插画的位置会有神奇的效果出现,华丽丽的漂亮。

8.http://food.barba.ru/

一个有点重口味的关于食物的网站,这样的插画风格让我想起保罗·德里森搞怪的动画短片,loading页一出现就看着那个被面条捆绑的小人怎样被一点点勒得快死掉。尽管有点血腥加恶心,但是这并不妨碍它绝对是一个非主流的好网站。

9. http://www.andyfoulds.co.uk/flash_design.html

这是一个设计很干净的个人作品网站,折纸效果的动画让页面切换变得很有意思。在整个网站的访问过程中,我一直有种在阅读一本就画册或者是就照片集的感觉。

10.http://www.sectionseven.com/index2.html

好了,今天最后分享的一个网站同样也是个人作品集站点,它的亮点在于把作品集制作成册的概念贯穿始末,设计师将自己的作品分类制作成册,点击之后会有很酷的翻页效果,仿佛真的在翻阅一本作品册一般。

(本文出自Tencent CDC Blog,转载时请注明出处)

http://cdc.tencent.com/?p=3470

时间: 2024-09-20 05:42:03

有故事的网页设计——Flash网站奇妙之旅的相关文章

网页设计对网站推广效果的影响

中介交易 SEO诊断 淘宝客 云主机 技术大厅 网页设计是一门很深奥的课程,而其对网站的推广.营销所产生的影响是毋庸置疑的.无论是网页布局.网页下载速度.导航系统的方便性.对用户的浏览效果会产生直接影响,从而影响网站在用户心目中的地位与形象,亦即网页设计效果直接影响网站的品牌形象与推广营销效果.下面就其网站设计的各个模块对网站推广效果的影响和分析作一总结:(部分内容一半段也说不清楚,会在以后的文章中逐个说明) 1. 网页框架结构对SEO用户的影响 许多网页设计人员为了简单.快速等原因而设计一些内

保持网站简洁外观:简洁的网页设计衬托网站内容

文章描述:通过本文你能从中学到一些经验.本文作者迈克·埃文斯(Michael Evans)是一位热情的博客写手.他擅长Photoshop,贡献了多篇网页设计和开发的教程,并且受到了读者们的喜爱. 导语:简洁并不等于极简主义,在保持网站简洁的外观的同时,辅以其它元素的使用,同样能够达到要求.那如何做到这一点呢?通过本文你能从中学到一些经验.本文作者迈克·埃文斯(Michael Evans)是一位热情的博客写手.他擅长Photoshop,贡献了多篇网页设计和开发的教程,并且受到了读者们的喜爱. 洁净

网页设计资源:网站首页jQuery滑块应用设计案例

文章简介:滑块已成为网页设计的流行要素,它以更加有趣的方式呈现内容,同时能节省网页空间.jQuery在现在的Web开发项目中扮演着重要角色,它让网站有更好的可用性和用户体验,让访问者对网站留下较好的印象.jQuery滑块在网站首页或组合页中的使用日渐普及,在这里有jQuery滑块 滑块已成为网页设计的流行要素,它以更加有趣的方式呈现内容,同时能节省网页空间.jQuery在现在的Web开发项目中扮演着重要角色,它让网站有更好的可用性和用户体验,让访问者对网站留下较好的印象.jQuery滑块在网站首

网页设计教程:网站背景设计案例分享

文章描述:我们将介绍几个实际网站来启发你的灵感,看看如何设计趣味而又令人感兴趣的网页背景.收藏本文,当你再次阅读时,你定会被某一个背景设计所迷恋. 如何选择一种最恰当的网页背景是网站设计中最常见的问题之一. 通常网站设计者都已准备好网站内容,而且版面布局大多也基本敲定.但背景要么是令人厌烦,要么是让人眼花缭乱,让设计者迟迟不能确定. 今天,我们将介绍几个实际网站来启发你的灵感,看看如何设计趣味而又令人感兴趣的网页背景.收藏本文,当你再次阅读时,你定会被某一个背景设计所迷恋. 1. 素描设计 这种

网页设计中网站背景的创意风格与设计趋势

正确的背景风格可以为整个网站确定基调.我们搜集了一批使用大幅图像.明亮颜色或出众图案来作为背景的优秀网站,希望从中探寻当下网站的流行设计风格. 什么样的背景最适合你的网站,这并没有一定之规,但确实有一些共同的要素: 互联网背景的内容应该有目的性. 背景应该与你的品牌风格一致. 背景之上的文字内容应该易于阅读(无论是颜色.反差还是尺寸大小.) 背景的主题在整个网站内应该连贯一致. 背景应该能很快下载并且不会让你的网站变得缓慢甚至卡死. 现在的流行趋势是什么? 就像服装和发型会变,网页设计的风格也在

网页设计理论:网站首页如何增加互动

网站首页应该静下来还是动起来,一直是值得商榷的事情.最近,和同事讨论网站首页,有部分用户反馈网站首页缺乏变化.那么如何在不影响用户体验的情况下,把静的网站动起来呢?这里主要考察的其实是那些非自身产出内容的站点. 首页增加互动因素:可以看看这个例子: 番茄树首页的"番茄树每天都在成长"这个设计很赞,其实可以理解为网站twitter的updates.通过Social Media的方式实现互动. 友商网的首页的"可动"的区域有两个:一个广告位,一个公告.动态交互性不足.

网页设计师参考:网页设计和网页工具网站

作为国内的网页设计师会经常访问一些国外知名的网页设计类网站,有提供网页设计欣赏的灵感类,有提供编码与工具下载的,还有提供网页测试的.这些网站对于网页设计师都十分有用,建议经常关注下. 本文将会展示一些web设计师应该经常会使用到的工具.如果你需要一些灵感,你可以访问最流行的设计展示站点来寻找你需要的好作品和好例子.一些设 计相关的工具,在线生成器,免费字体站点,模板站点都将帮助你更有效率测试和管理站点.记住,并不是什么都亲自完成才是最好的方式,一定程度的借鉴将会让 你以更轻松的方式完成任务. 我

从多层面来阐述网页设计的专业性

打开百度或谷歌,搜索一下网络公司,网页设计,网站建设等相关信息.找到的结果中,没有任何网络公司不是标识自己是专业网页设计的机构.但你很难看到网页设计专业性到底如何评判.网页设计专业性的体现,不能是一句空谈或自夸.需要实实在在的效果和评测标准. 我们从多层面来阐述网页设计的专业性. A.颜色和布局 在网页设计的众多环节中,页面布局.颜色搭配是最为重要的环节之一.有很多网站以其成功的色彩搭配.灵活布局令人过目不忘.专业的网页设计,应该遵循最基本的设计准则: 准则一:请珍惜网页使用的颜色. 准则二:颜

网页设计流行风格模板及评析-商业门户型

模板|设计|网页|网页设计 此类网站在中国已经被做烂掉,可以说都是三栏,上面是logo+banner . 其实门户因为信息大,更新频繁,在设计时应该充分考虑可扩展性,我的印象可以充分利用下拉特性,充分考虑左上位置的设计,主体争取结构明了简洁 . 卡通网站,广告栏很大,但通过精心设计使之醒目而不凌乱. 图片统一使用斜角,统一又不呆板.  使用曲线与直线的结合,兰灰色主色,画面沉静而不脏,这里的色彩难度很高,需要细心调试,色块分割,简单明了.  空白的使用,其实门户也可以空白,这个站给人空灵和舒服的