另辟蹊径谈创新！提升网站设计形式的几种方法

提到网页设计，最先想到的是当今主流的韩国设计和扁平化设计，当然个性化排版、视频代替文本、全屏大视野、滚动视差、多平台全适应等设计形式已经进入了我们的视野。西方简单、功能性的美学精神"少即是多"这一设计理念攻占了我们的大脑，很多时候，在开始做设计之前脑子里会来回浮现这些风格的设计。那么，怎样在主流设计方式中做出有自己特色的网站呢？我们从以下几点介绍在大环境下提升网站设计形式的方法。

那么，怎样在主流设计方式中作出自己的特色呢？我们从以下几点介绍些提升网站设计形式的方法：

> 赋予民族文化特点

在众多的设计师追逐主流风格的同时，民族文化感觉的设计越来越少，不光在国内，在世界各地都出现了这样的情况。当然不可否认还有很多设计师在为民族设计而努力。下面这几个站点虽然只有简单的设计和动态效果，但是却有一种非常淳朴的民族风格，这也是最吸引人的地方，每个细节都流露出民族的特点和气氛。不是只有文化性质的网站才能赋予文化设计风格，在商业产品类型的设计推广中同样适用。

日本眼药水网站，将现代工业社会的产物与传统鬼神文化中的五种妖怪以卷轴、插画传统形式展示，与漫天遍地的明星代言广告形成对比，同样是眼干、眼涩、眼疲劳，同样是以办公室、上班族为消费群，文化创意上的突破使人眼前一亮。

http://www.medical-youkai.jp/

(小编按：那个妹子是我的女神横山美雪，吗？)和风服装店，日本特色的风铃、简约的插画，"和风"，大和民族追求与自然的和谐之美，从这个服装网站上我们可以看到日本设计文化体现了对自然的尊重，反映了朴素美学的内敛性格。

http://hanamichiya.jp/

缅甸传统舞蹈音乐合奏网站，缅甸古代戏剧舞蹈，是从缅甸傀儡戏、古典戏剧及阿迎舞等古典艺术中产生的。傀儡戏中的一些节目和各种傀儡角色的不同的舞蹈动作被大量移植到现代缅甸舞中。傀儡舞中"傀儡步"、"傀儡爬跳"等成为现代缅甸舞的基本动作，是文化多样性的辉煌继承。黑白图片和大面积留白的海报设计形式，突出舞蹈者主体，用在网站上更显神秘。

http://www.itwillbeastounding.com/

俄罗斯莫斯科大剧院是莫斯科的地标性建筑之一，是莫斯科有名的芭蕾舞与歌剧剧院；是俄罗斯历史最悠久的剧院，享誉天下，是世界上最著名的剧院之一。它不仅继承了欧洲芭蕾的历史传统，更重要的是，在俄罗斯丰富的民族音乐与舞蹈的沃土上，建立和发展了自己的芭蕾体系。将沙俄古典风格融汇于设计版块中，同样大量留白处理给了图片展示更多的空间。

http://www.bolshoi.ru/

> 与网站主题相关的高清图片的应用

大面积整站或局部性使用高清图片，在之前设计分享中我们见到了很多案例，这里介绍几个日本以图片展示为主的网站，精致的图片不需要过多的装饰。

坂本龙一是日本当代最让人尊崇的音乐家之一，音乐领域涉猎甚广，在先锋电子乐领域拥有特殊地位。代表作有《Merry Christmas Mr. Lawrence》《末代皇帝》《遮蔽的天空》《桃太郎》《高跟鞋》等，为1992年巴塞罗那奥运会开幕式谱曲并担任指挥……坂本龙一成为"大众明星"的原因，一方面在于他个人对于电子、摇滚、爵士等多重音乐风格极具灵感的把握；另一方面则在于他能在商业、艺术和实验之间找到平衡点，作出既有实验意义又有动听旋律的作品。

http://moonlinx.jp/special_issue/003/

日本设计强调材料的内在之美，注重与大自然的和谐，珍惜自然材质，这与日本自然资源相对稀缺有很大的关系。日式风格中，回归自然是最大的特色，推崇贴近自然、强调自然主义，让使用者有置身自然的感觉。用产品的工艺制作图片作为网站的主体和背景，拉近了观者与产品的距离。

http://www.ishiyamasenko.co.jp/

传统工艺美妆店铺，单从cover引导页的图片就能看出该店铺的卖点。特色产品图加上柔美的动态散花效果，为网站加分，导航中加入商城外链可直接在线购物，利于用户体验。

http://www.kazurasei.co.jp/

日本联合新闻社，社内的场景图片很好的展示要表达的主旨。

http://go-jimbou.info/

街区是一个城市的重要标志性特色，将这样杂乱无章的旧街道作为网站通栏头图，配合简介的形式设计，也能很出彩。

美宝莲日本网站，将实体店作为网站背景，搭建成实景的巨幅海报展板，这种形式是否比存粹的明星代言更接地气些？！

http://www.maybelline.co.jp/

对比下面两个日韩服饰类网站，可以看出日本网站在图片选择上更注重产品本身，极具质感和张力的图片真实朴素，力求展示产品与人的关系。而韩国则更注重整体的氛围的搭配，通过环境的营造来提升产品的品味和档次，产品只是搭建系统中的一部分。

http://quael.jp/

> 对图片进行特殊处理

图素质量低是我们在设计过程中经常遇到的情况，我们通常用到最多的方法莫过于高斯模糊、柔光、滤色、添加纹理质感，将图片处理成做旧、仿古、年代感、单色……又会是什么效果呢？！

箔工艺，金银箔具有很好的延展性，将金银打展成薄膜状，与绢结合，应用于古代服饰中。此文化再京都有四百余年的历史，现在主要用于文物修复。取箔工艺品的一个局部，重新组合作为整张背景，贴片处理的文字与背景的融合更显古代文化的精妙。

http://www.hiroto-rakusho.com/

人物素材粗糙的情况下，采用水彩的滤镜效果，背景加入点状网格，极具形势感的箭头做引导，个性十足。

http://www.kanenavi.jp/

全日本剑道联合会，网站采用时间轴展示的形式，从1950－2000年每一期获胜者的照片和信息，可以看出由于70年代以前都是黑白照片且像素低，和近期的彩色照片反差较大，所以网站设计成了古朴做旧的年代感风格，加入很多早期照片中的截图作为插画元素，确保了风格统一。

http://www.kendo.or.jp/champ/#/about

Daum是韩国最大的门户网站之一，以邮件和社区产品为核心，是韩国第一个电子邮件服务网站Hanmail的前身。牛仔蓝单色照片处理更像电影和动漫场景。

http://www.daum.net/

也有整体黑白加入局部彩色色的案例，将复杂图片简化处理，对于简洁的页面设计来说，这是个不错的方法。每个版块都是黑白照片做背景，文字做JS动态移入效果，在图片的某个元素上加入VI主体颜色，故事感很强。

http://www.streetreach.org/

> 创意图形化环境的设计

手绘、矢量图形设计的图形场景环境，用在食品、旅游、地图、婴幼儿等方向的设计上更容易拉近消费者，给人放松愉悦的心情。相比图文混排更贴近生活。

狗粮推广网站，将网站设计成宠物乐园，各个品种的狗狗们都有自己的一段视频，内容是狗狗们对几种产品的喜好对比。

http://www.solvida.jp/solpa/#/MainPage/001

企划创意公司，技术上只是一个简单的FLASH站，但空间跨越性思维设计却给这个网站带来了不凡的效果。由局部的空间延伸出各种异空间的交汇，加入互动效果而引发的更多惊喜也进一步提升了用户参与度。

http://www.aquacp.com/

用3D拼图建造起一个小型城市，4个建筑代表网站要展示的4个心理学的具体分类，建筑物夸张的拟人化动作实现页面跳转。

http://www.soc.nara-u.ac.jp/kokoro/

日本儿童专用鸡蛋，此网站将所有产品相关内容装进鸡蛋中，食用后产生的剩余物可大变身继续用于其它物品的生产，循环利用避免环境污染，所以在首页展示上才会有类似瀑布流的大量周边产品展示。网站首页是自动向下播放展示的瀑布流效果，hover及跳转都伴随非常可爱的音乐和动态，恰当音乐的播放和触碰hover的小惊喜也会给网站增添色彩。

http://www.kewpie.co.jp/egg/

日本山形放送局的地区地形图，大家都看过现实版的景点手绘地图，该网站也用了这种形式。比较有意思的是他的功能非常强大，是一个可放大缩小的真实版地图，没有跳转，完整的手绘google地形图。以小青蛙作为代言人对每个景区的优势作手绘图形注解，以当前弹出的形式展示该地的历史、自然、观光、社会、祭祀、美食、传统等信息的详细图文、视频解析。

http://www.nhk.or.jp/yamagata/mitekero/

九州熊本天草村,用动态图形化完整的对天草村进行了设计演绎，重要景点默认做了动态处理，跳转后都是另一个完整的实景矢量图。对景点中的标志性小建筑做了页面弹出实景详细讲解。

http://www.amakusamura.jp/

这种形式在新加坡儿童乐园的设计中也同样得到了使用。

设计风格也是体现一个国家文化的重要方式，严寒漫长的冬季成为俄罗斯的标志，在页面上打造一个同色系的冰雪世界，反而使彩色的主体信息更加突出。

> 赋予与产品相关的交互形式，重视用户参与性

一个优秀的网站它的交互性也非常重要，拥有好的交互性可以让浏览者有着更高的参与感，并且也能增大网站自身传播效果，还可以提高用户对自己的网站的依赖性和忠诚度。

Panasonic剃须刀产品JS展示站，设计形式与松下电子实现"星罗棋布的网络社会"和"与地球环境共存"的理想呼应，整站的背景都是由动线点组成的动态图形面拼合而成，图片和文字的展示停留在这星罗棋布的空间组合中。此时网站要表达的不仅是展示产品，还有松下文化。

http://panasonic.jp/shaver/lamdash/dna/index.html

东京交响乐团，该网站对用户的参与性做到了极致，从网站主内容上没有关于东京交响乐团的图片文字信息，用户可以在页面专属音乐键盘提示的情况下，用独创音乐的新颖形式创作属于自己的个性音乐，并对音乐逐帧做了记录，可以返回欣赏创作成果，并分享到各网站。

http://tokyocitysymphony.com/

SPECIAL-T 绿茶网站，玩过网游的同学们都知道游戏中做任务有地图寻路功能，该网站采用了这个原理，在大海中建立类似于西游记的龙宫，用户在没有任何导视的情况下，360度无死角在海洋里自由探寻，最终的成果便是在一段时间的遨游后到达网站的终点产品引导页，阐释special的感受。

http://ogreen.special-t.com/en/

> 视频与特殊版式的结合

如果你想要一种优雅而直观的产品展示方式，全屏视频网站是一个不错的选择。全屏视频网站能一瞬间点燃人们的好奇心，当然也可能马上让访客失去兴趣，这都取决于你是否能够驾驭这类高大上的设计风格。

日本福祉大学，校园内外学生学习、活动氛围的场景视频作为背景播放展示，视频上一层则是手动切换的内容介绍字幕，一个大学的网站更像是一个微电影展示。

http://www.n-fukushi.ac.jp/lifestyle/

Mikihiko Kyobashi 海底摄影记录展示站，整站视频展示配上海洋真实的声音。透过视频看到的海洋不是一汪死水，阳光穿透海面，碧海蓝天，比静态的照片更能展示生命的气息。

http://www.mikihiko.com/

bc服装网站，暗色的动态视频做背景，与前层简单的图文排版形成反差，图片hover的3D立体效果令人耳目一新。

http://bananacafe.com.br/

图片与视频的混排切换展示，拉伸后展开整站播放效果。

http://getgoingtoday.org/beyond

日清食品，微距拍摄的视频，用时间倒数计时的方式，记录在这一碗日清方便面泡好的3分钟内，世界各国家不同肤色年龄的人群品尝日清食品的状态缓慢特写，加入了用各国语言描述倒数计时的声音，视频中间穿插有和日清logo呼应的装饰语言，隐藏在页面下方的时间轴可以找到每一分每一秒的画面祯，时间可自行选择切换到想要的那一帧。

http://www.nissin.com/jp/

结语：

以上五点都是当下主流设计中另辟蹊径找创意，简单五点很难将所有好的创意都涵盖在内，除此之外大家肯定也有更好更多的想法。网页设计总是立足于浏览者的审美、文化，以及信息传播的习惯、方式，还有网页开发技术的进步。对于绝大部份网站来说，没有强大的专业力量去研究用户新的习惯和需求，也不可能开发出新的技术功能，只能在一些大型的网站中窥见一些发展的趋势，再从中找到自身可借鉴的地方。这种借鉴如果成为普遍性，那我们也很难在互联网的大潮中有自己的一席之地。网页设计已逐渐往多元化方向发展，更好的创意、更新的想法都来源于我们真实的生活感受，想要我们的网站变得更强大、拥有更好的用户体验，无可厚非，我们应该做的是大胆、大步地去尝试。

关于畅游VC

搜狐畅游视觉设计中心团队。我们是从游戏和生活中汲取创意和灵感的一群设计精灵，用爱去释放奇妙的设计魔法，描绘让你我感动的虚拟人生。

官网博客：vc.changyou.com
新浪微博： @畅游VC
微信公众平台：cyou_vc

您也可以通过扫描下方二维码快速添加：

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

 
================关于优设网================
"优设网uisdc.com"是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量68万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：