2012船票给了谁？——网站建设新元年的设计趋势

sxen

: @$ Z( k# m5 b, G2 O( R; z

                               
登录/注册后可看大图

他有些紧张的扶扶黑框眼镜，又习惯性的把裤子提到胸口，找到自己的位子坐下，上船的时候他就发现了，自己的票和别人的不太一样，难道被黄牛涮了？如今只好见机行事了……“这位先生”。他抬起头，只见一戴圆眼镜的外籍男子彬彬有礼的说：“请让一下好吗？您坐的这个位置是我的。”
1 W3 b; \+ U! y/ [老江和老乔，大家想必已猜到一二，一段小小深水区的船票开胃故事过后，我们步入今天的主题。
逆推网页设计这十几年，网络整合营销不断细化，面临着2012年的市场洗礼，哪些网站表现将被淹没在这滚滚洪流中，而哪些又将收到船票被带上诺亚方舟呢？让我们回头逆推网站出生和演变，站在2011年即将结束的这个节点，挑选属于2012新元年的视觉设计！
" V& j1 f5 j/ _. s% ~$ r一、网站设计的一次细分设计
为了能够更好的预测网页未来的变化趋势，我们先来梳理一下网站设计的发展演化史。
+ X/ G3 p% R; y8 Q* D. t1.网页设计的演化史

                               
登录/注册后可看大图

【网站设计的四极分化图】

（1）初期：
网页设计发展初期，由于技术的限制，作为一种新型的传播载体，人们只能简单的放置产品资讯，通过网址来访问资讯内容。
（2）中期：
) t* L1 G9 D7 j5 I. ^0 O" `1999年第一则网络广告在网易上投放，从此网页的访问分流向了广告。而正真的网络营销也便从这里开始。
（3）后期：
% i6 ?/ A- Q) o) {# ]产品信息传播的分工：
  x# s. q) e5 J/ `3 x随着技术的发展，FLASH、视频等技术的不断成熟，产品的在线传播可以通过多种形式进行，于是产品资讯也便分化为两类，一类是以视听为主的品牌建设，主要传达产品的理念、视觉映像。另一类是以资料为主的，主要传达产品的具体信息，通常以大量的文字或图文结合的形式表现。
3 O. Y1 y% L) I% z0 u$ ~" K. t5 E广告传播的分工：
在广告传播上技术的革新同样也给广告传播带来了更多的表现形式。其中WEB 2.0的到来为广告传播形式做了重要的贡献。由此产生的各类社区平台为用户和产品的进一步交流产生的帮助。资讯也因此进入了高速传播的阶段。平台交流和指向产品的软、硬广告进行了配合互动。
0 J  f9 t9 _/ K$ K! t- W0 H
2.网络整合营销流程

                               
登录/注册后可看大图

【网络整合营销流程图】

展示这个图表是为了更好的说明这几类网站在整合营销中的位置和作用。
3 F! g3 U6 r3 m/ v该图表做色彩归纳，大家可以将其对应于右侧图表。
我们从用户端出发，来了解一下现在网络整合营销是如何从用户到产品的。
早年许多产品是直接通过硬广告的方式将用户强行拉入产品，这对整个品牌建设的伤害度是很大的，现在的推广更趋向于软性的交流互动，在潜移默化中达成关系。
（1）平台互动
8 b3 S2 w# H1 H平台交流也是做为软广告的重要承载体，它通过社区交流或微博互动传播形式对产品或需求进行培育。并将需求顺利指向产品或品牌。
6 g+ g! @6 t4 O' Q& t, B9 ^3 [2 u（2）指向产品
6 t. `' o* A5 b& }活动站作为指向产品的硬广告的资料落地部分，延续了其广告的视觉化特性也包含了更丰富和具体的信息介绍。它会通过“利诱”和“色诱”对用户吸引，并指引其进行特定的行为活动，使其与产品产生关系和黏性。
（3）产品资讯拓展
0 Z  y$ A5 D+ H0 `% K如果活动推广的顺利，用户就会进一步对详细的产品或更多的产品信息进步了解和阅读，或通过门户站链接并参与更多的活动。
# t# ~: m) y; q  N$ b( Y（4）感受品牌
通过不断的互相了解从而建立品牌的忠诚度。而在品牌站也会通过丰富的视觉和概念引导树立品牌的个性和其它产品的区别度，使用户认识并记忆深刻。
3.网页设计的四个分类介绍
% Y# x/ N# a* ~6 L0 G

                               
登录/注册后可看大图

【四类网站介绍图】

我们可以看到由四项专职任务引出的四类网站类型，它们组成网络整合营销不可或缺的重要组成部分。
（1）平台站（Interactionsite）
5 f+ g, C' }, k% q9 c互动平台站更像是一个网络市集，不论是用户端还是产品端都可以在这里传播资讯，并进行频繁的互动，随着技术发展，互动形式也日趋多样化，从博客到社区平台、再到微博、手机终端，互动基本已经占领了我们日常的所有碎片时间成为了网民生活的一部分。
（2）门户站（Campaignsite）
门户站负责产品资讯的建设，主要承担着从各平台引入的需求的资料落地。它包括了涉及产品的各类资讯，产品介绍、版本更新、最新公告、最新活动等。它拥有对搜索引擎的友好表现和完好的内容支持、注重网站的易用性和强大的在线沟通功能、以及全面的网站监测与分析及市场推广策划。算是网站端的主力军。
（3）活动站（Minisite）
活动站作为精准营销的重要形式，为产品的针对性推广做出了巨大贡献，早年其受到带宽的影响表现形式较为单一，现在真正揭开了其广告的本来面目，强烈的视觉表现成为了它最重要的特征。它就像战争中的突击队，精准、迅猛、有力！
（4）品牌站（Brandsite）
如果说门户站是主力军，那么品牌站就是外交官，它主要通过视觉包装传达产品概念，随着技术的发展，FLASH、视频、多媒体因其生动的展示形式成为了品牌站的主要表现手段。
二、四类网站的二次执能细分设计1.互动站细分设计

) G7 t2 L( [. B! Z! O                               
登录/注册后可看大图

【互动站分解图】内容为王，交互设计从形式向功能转变，注重信息的传递、互动，设计变的不再重要。互动站的不断成熟也标志着网络整合营销建设的不断深入和细化。社区平台的信息传播形式、搜索平台的更精准语义学研究、手机平台的多样化互动都是未来可网络整合营销建设的重心所在。（1）社区平台减少获取信息的时间。通过生活化的交流方式获取产品广告信息，过滤垃圾信息和推送即时有效的信息。侵占用户使用时间，增加产品粘度。持续联系平台间的传播无处不在：强化了人与人之间持续联系，为信息传播拓展出了更阔的空间。

                               
登录/注册后可看大图

信息推送信息推送渠道精准化：系统整合信息、呈现有效信息的过程，可以是通知、私信、评论、电话、短信、微博信息、SNS中好友动态和阅读器中推荐阅读的内容等。

2 q0 v' v/ C& p6 V2 N' u' A7 P                               
登录/注册后可看大图

（2）搜索平台搜索平台加深对资讯的广告和深度的支持和判断。（由于搜索平台研究的专业性，本文不再对其进行深入的描述）（3）手机平台手机平台使用户间的社交行为更加便捷和频繁，人们对信息互动和分享更加热衷，从而也推动了产品营销在手机端的普及和发展，手机电子支付及二维码的应用实现了虚拟和现实的更有效接轨。另外基于智能手机Gps、触屏、3d陀螺仪的特点，也将涌现出更多优秀的产品运用我们通过一段视频来综合概括营销在手机平台的社交和商业的便捷应用。

$ h( z6 c3 j0 E$ F8 p! p/ J

sxen

2.门户站细分设计

                               
登录/注册后可看大图

【门户站分解图】

实现更多元化的资料落地支持和更精准的用户监测。
" Z3 o8 P8 \! Q# F随着网站承载功能的细分，门户站的建设的功能更倾向于对资料落地，门户站主要接引着来自各类社区、引擎和终端的用户，在进一步优化内容支持和满足搜索引擎的基础上如何去进一步支持多样化的终端成为了未来的首要任务和创新点。
（1）支持全方位的资料落地
对内容支持
对内容的支持主要表现在“内容信息的优化”和“内容管理的优化”。
0 B$ y+ C$ [) K内容信息的优化主要包括，内容素材、容量、编排，以及更新的频率与呈现方式。
内容管理的优化主要通过内容与用户、管理 、功能的完美结合使信息以良好的呈现方式输出给用户。在这方面语义学的发展将给信息更加精准的输出。
! q; Y7 n6 i/ N% }- U  p% s

8 m# }5 |# S) x/ r( x                               
登录/注册后可看大图

良好的信息管理将保证用户在接收信息中的连贯性，使信息持续不断的在潜移默化中被浏览和吸收。
对搜索支持
- i4 H3 R- N& ^很多网站都已经了解到了搜索引擎优化对于网站的重要性，除了从SEO的角度去设计之外（SEO属于另一通道的专业领域，这边就不再敞开深入描述），现阶段的动画视觉表现也纷纷对搜索引擎表示友好。从前由于FLASH将所有的文字信息对封装进了动画，使得搜索引擎无能为力，而现在出现了JS动画和具有独立信息 IP的FLASH技术。使得在满足资讯搜索的同时也兼备了较好的动画视觉体验。
使用JS动画

# Q6 ?3 E5 N7 L1 w% G0 }  V6 G1 a                               
登录/注册后可看大图

Mario Kart Wii Experience  nintendo.com.au/gamesites/mariokartwii/
支持引擎搜索的FLASH全站
  ^# E# `  ^& P' @3 [; ], V

                               
登录/注册后可看大图

洛克王国  roco.qq.com/
对终端支持
+ k; ?7 s2 b, f8 k' J多平台、多设备浏览的统一性，带来交互设计全新挑战，对多种终端的有效支持成为了资料完好落地的保证。

  E9 d: z0 }+ C& h7 k

sxen

                               
登录/注册后可看大图

动态流体布局
流动布局的设计主要解决了一些不同终端和显示器的浏览问题。它巧妙地重排元素，并填补了网页的所有空间，而且在每个浏览器和不同分辨率的显示器上都表现出色，也同样适用于移动终端的横向或竖向阅读，同时它通常配以流畅的动画效果，其中有些甚至针对不同类别有不同的效果。
7 z5 R0 V3 a; s$ o9 T+ e  l

5 T. V# M* G! f4 T: H. X! t                               
登录/注册后可看大图

基于栅格的多列布局
7 z8 e, v1 d, i# X" }4 I7 o1 K屏幕分辨率的增加，基于栅格布局基础上，使用多列在同一空间呈现更多内容。更多的网站在朝着多列布局，流动布局，以及前面讲到响应性设计。
网页栅格系统是从平面栅格系统中发展而来。使用栅格系统让网页的信息呈现更加美观易读，更具可用性。网页设计上将更加的灵活与规范。

* ]& P$ h; B; p7 E                               
登录/注册后可看大图

（2）全面的用户监测
( Y, @' m% s6 c4 y/ z8 O9 i全面的网站监测

& H" V, |5 ?; X, ?3 h' [                               
登录/注册后可看大图

网站易用性优化
网站的易用性主要表现在速度体验、操作体验、结果体验、信任体验四个方面。如何从资讯策划和交互设计上进行进一步优化相当重要。
$ I7 x; K5 B4 N' O  `* p) p速度体验：也便是网站的打开速度，它包括服务器优化、代码效率、图片和FLASH优化。防止焦躁心理，不让用户在等待过程中流失。
# e9 j0 m1 |9 j1 X' ]) U操作体验：是用户在使用网站过程中的功能性感受，它包含了6个关键点，页面导航、页面容量、页面结构、页面链接、路径设计、帮助中心。优秀的操作体验会让用户清晰了解自己在网站上能做什么，其次是用户知道如何操作，并感觉到继续看下去的意义。
5 ]9 O5 @! r" Z) e结果体验：就是用户通过操作行为获得结果的一种体验过程，友好达到用户预期的结果体验是我们的目标。
信任体验：对于网站来说，信任感决定了用户对网站信息的认可度，它由产品品牌和长期建立的良好的信任体验构成的。就网站信息而言信任体验依附于过去产品的市场影响力权威性的支撑，而对于信任体验的建设来说也依赖我们正在进行的不断的信任体验的支持。
在线沟通功能优化
在线沟通主要包括：在线客服系统、潜在客户跟踪系统。
0 A5 D: t. v: s, I: d' g: a" r利用现有更新的技术实现更即时和精准的沟通，并且在对后期的沟通跟进使潜在用户成为真正的客户。（这个部分可以结合整体的用户监测进行，未来可以有更专业的文章进行介绍）

$ }  }0 n  ~: @- w2 I' V  x' e

sxen

3.活动站细分设计
) _7 K4 K1 |/ Y8 k

8 H7 V1 C! V5 I' z9 w                               
登录/注册后可看大图

【活动站分解图】

活动页面恢复了广告的本来面目。
. d: {* E; {) K, m4 g% S4 U活动站作为广告营销的组成部分也伴随着带宽的增强恢复了其广告的本来面目。早年活动页面受到了网站优化的限制，视觉表现在更加注重延展性问题，近来，随着技术支撑的优化和带宽增加，活动站的设计呈现了大背景强版式化的设计趋势。
/ @& d# }7 B9 [2 R4 C2 r强有力的视觉充击+方便舒适快速浏览
( N; W9 [8 C4 V8 `+ R8 `3 u（1）精准营销
+ ?" n0 ?/ W2 ^$ w' M* U3 f/ y活动站的建立是根据产品的不同运营节点或功能开放或不同人群进行的营销活动，它具有较强的个性和精准性。（这块涉及到专业的产品策划，就不全方位展开说明。）
（2）视觉冲击
“三大”特点成为了活动页面广告化的突出表现。大背景的表现还结合了更多实际化的技巧方式这边不再拓展技巧方式，感兴趣的朋友可以关注《快速专题页面设计6大方法》
* e7 l9 P& c, q" V大背景
" e) q) T( h! O3 o$ K精致图片胜过千言万语。宽带的发展使其更具可行性。给人印象深刻的图片能为用户创造一个身临其境的体验。
, Q% f2 {. j7 p9 @( O% O

                               
登录/注册后可看大图

大标题
9 p! {. i7 C  {8 d6 d# X杂志、报纸的设计师一直使用的大标题，以吸引用户的注意和购买。大字体已证明更有吸引力和明晰沟通。

3 f4 _" {6 `9 @' W8 u                               
登录/注册后可看大图

teilharddechardin.org/
/ Q) F  ^4 k9 l: b4 e; t6 d大按钮
; o" l& o7 {4 |( j7 \  N从网站的可用性上讲，大按钮更有利于用对网站辨识清晰、方便快捷访问。
- Z4 B9 `2 P+ O  ?

                               
登录/注册后可看大图

（3）快速阅读
3 h6 u, D- m% X; c* h5 D资讯图表化主要解决了信息快速预览和阅读的需要。快速直观的阅读成为了现代资讯展示的基本要求，正如视频、搞笑、图片类的资讯更为人们所接受和传播一样。很少人愿意静心去啃长篇大论，所以资讯图表化成为了许多信息归纳总结的表现形式。另外对于那些复杂的关系和比例，纯文本是很难表达的，资讯图表化，以其简单而丰富的视觉外观成为了一种很好的沟通的方式。
0 f& b4 E3 ^$ H9 ?资讯图表化
具体方法可以关注《你看起来很好吃》等三篇系列文章。
' e+ U4 L# Z: b  `( b7 l% y0 t

                               
登录/注册后可看大图

Digital Podge digitalpodge.co.uk/2009/

sxen

缩略图设计

# H6 I6 w1 b; V/ Q- r6 l% l- h                               
登录/注册后可看大图

5 z+ `5 D9 Y# l$ k2 ]z-index Portfolio z-index.it/
/ Z5 D, O7 q2 ]' _4 L; u这是一种结合设计形式感的缩略图展示方式，它将进一步的文字说明内容隐藏在图片中，当图片被选择后，鼠标经过才会触发详细资料的显示。使画面更加简洁并具有形式美感。
' o5 B. A: I3 s. Z- Y9 t5 T$ {  Y

( a( H( Z" O! ]: \9 }+ y9 L                               
登录/注册后可看大图

过去我们只能通过点击链接才能看到网页的内容，现在你只需点击放大镜然后将鼠标悬停在链接上就可以预览该链接的网页内容。2011年的一般互联网用户变得更加精明，他们更希望看到更多人性化的导航设计。
单页布局
单页布局具有较好的视觉集中化的连贯性，可以强化主题逻辑性和主体表达。
' g" ^9 U! |6 t7 P! Q1 Y/ v. Y

                               
登录/注册后可看大图

campaign.naver.com/newnaverapp_event
这个页面的交互很有意思，它通过内容滚屏形式对应到手机上的相应功能，达到直观可视的效果。单页布局形式十分适用于这种中心单一明确的主题。
/ E0 _7 N6 c& j; p: A" p$ ^% b& H4.品牌站细分设计

( ?' G/ d) V( p' z                               
登录/注册后可看大图

, ^. [: g! z7 B, E+ |, O【品牌站分解图】
视觉多媒体化互动形式多样化
随着技术发展，多媒体的互动形式被网站设计所支持，品牌站从资讯式的企业网站中分离出来，形成了独立的营销路线，如何将产品从视觉和概念上深入人心成为了品牌站的首要责任。
（1）多媒体化视觉表现

                               
登录/注册后可看大图

) t/ W5 J6 m* q" Kgame.qq.com/happy/?ADTAG=media.free.gamecom.ulbanner&ADTAG=media.free.gamecom.single
在网速、硬件和技术不断革新的时代，更丰富的视觉体验进一步帮助网站品牌视觉的建设。而电子产品的泛娱乐化也逐渐受到推崇，或许一个更生活和综合的插管时代即将来临。
% e. M  Q+ ~4 ]2 G7 {（2）多样化互动形式

                               
登录/注册后可看大图

. Y  L! [/ K; hdoggelganger.co.nz/
5 d& P  C3 p1 ], D0 N结合手机、摄像头、音频等技术形成更多样化的互动形式体验将被人们更加热衷。
小结：
* H  B- Q5 f2 v8 h网站设计的演化受到了技术的限制和支持。视觉设计需要从切实的功能和应用上考虑未来的变化和发展，如何帮助实现更加精准良好的网络整合营销体验是我们未来的方向。做为营销整合战场中的一部分关注整体的营销环境是必需的。也希望由此立足点出发能够使未来的视觉设计更加行之有效，并一起配合推动产品更进一步的市场运营和推广。
- y  z* {! g& c% S5 z! x( P3 b5 D文章来源：tgideas.qq.com
8 v( p% ?- \+ K1 i/ u. f