从“瀑布流式布局”谈网页界面的创新设计

谢涛 XIE Tao黄冈师范学院,湖北 黄冈438000（Huanggang Normal University, 438000 Huanggang, Hubei）

从“瀑布流式布局”谈网页界面的创新设计

谢涛 XIE Tao
黄冈师范学院,湖北 黄冈438000（Huanggang Normal University, 438000 Huanggang, Hubei）

结构合理有序、信息传达准确且功能性强的网页界面设计，往往能给用户带来良好的浏览体验；而突破传统、设计独特并兼顾艺术性与时代感的网页界面，更能满足用户视觉体验上的审美需求。只有紧随时代发展的步伐来探索网页界面设计的创新，才能有力地拓展创造性思维，使网页界面的设计达到艺术与技术的完美统一。

瀑布流；网页；界面；体验设计

在互联网络引导的数字化传媒环境中，网站是信息传播的承载主体，网页界面则是用户与信息交流的平台，实现着内容的传递。网页作为网站构成的最基本元素，主要通过视觉呈现来传递信息，而网页界面的作用就是将信息转化成更易识别的视觉形态展现出来。尽管多媒体技术已经使用户与网页界面之间的人机交流方式，由传统的单向传播发展至双向甚至多向互动传播的层面，但是网页界面设计作为信息内容的视觉化过程，仍归属视觉设计的范畴。

技术的进步往往引发新的设计观念，综合新的设计语言与设计形态可以赋予网页界面创造性的视觉设计。对网页界面深刻的第一印象与美好体验，主要源于网页界面布局的独特形式。随着网站Pinterest①的“瀑布流式布局”被越来越多的网站所借鉴，用户也从潺潺流水般的图片序列中感受到新鲜的浏览体验，以至于业界一度引发了瀑布流式布局热潮。 作为前端的网页界面设计，在仿效瀑布流式布局的潮流中，能够积极累积经验并勇于探索，激发出创新思维与灵感，对于网页界面的设计创新具有积极与深远的指导意义。

一、解读网页界面的“瀑布流式布局”设计

瀑布流式布局，简称“瀑布流”，是当前比较流行的一种网站页面布局形式，具体视觉表现为参差不齐的多栏布局。随着页面的向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是基于视觉图片分享的社交型目录网站Pinterest.com（见图1）。

图1 pinterest．com 网站首页

Pinterest的瀑布流式布局固定了图形元素的宽度，而高度却可以灵活的纵向延展，不均衡不对称的布局方式使网页的视觉区域呈现出错落有致的层级感。瀑布流式布局区别于传统的矩阵式图片布局模式，巧妙地利用了视觉元素间的落差感来引导视线的流动，营造了一种轻松愉悦的浏览体验。这种清新简约的设计风格与别具一格的框架结构，使用户浏览网页时使用最少的操作就可以获得大量信息。Pinterest的成功使得一时间内瀑布流式布局设计备受青睐，国内外类似展现界面的网站纷纷涌现。从用户视觉体验与交互体验的角度来看，瀑布流式布局风靡的原因有如下几点。

1．清晰流畅的视觉感官体验

视觉焦点、视觉流程与视觉区域作为网页界面布局设计需要考虑的三大要素，构建起了网页界面的基本框架。用户在浏览网页时视线通常是处于流动的运动状态，整个视觉流程的轨迹是一条规则有序的迂回曲线。这个视觉感知的过程也可以被认为是视觉区域划分的形成过程，用户的主观意识会将获取到的内容予以价值评定并以此划分出主次区块，其中最受关注的视觉区域被称之为“最佳视域”。在网页界面设计中，重要的信息内容都会在最佳视域内给予展现。

在瀑布流式布局的网页界面中，主要的视觉元素是固定宽度有序排列的图形或图像，滚动式浏览引导用户视点的流动，运动轨迹呈现出一条不规则的水平波纹曲线，整个视觉流程是左右横向有序的进行而非跳跃式的。流畅的视觉流程决定了页面浏览是一个发现而非搜索的过程，没有刻板的图形用户界面框架，在尽情欣赏无间断精美图画的愉悦之中寻求感兴趣的信息，而为用户提供了完美的视觉体验。

2．沉浸感的视觉设计

版式是界面设计的骨骼，平面设计的版式规律与网页界面设计版式有相通之处，但也有明显的区别。相对于普通平面设计，网页界面的版式设计更强调识别性、交互性，它不仅指设计的具体版式，还包括比例、秩序、均衡、强调和统一[1]。网页界面设计除了更强调识别性、交互性以及信息传达的有效性之外，数字化的富媒体属性还赋予了其表现形式上强大的可塑性。

根据用户的视觉习惯及展示载体的特点，网页界面的布局普遍都有着固定的框架结构，除视觉元素及信息内容区域之外还有明显的功能性分区。优良的网页界面版式构成框架都比较规范，页面布局严谨精确、简捷有效，呈现出左右或者上下型的块状结构特点。在网页的浏览过程中，用户的视觉习惯是从上到下、从左至右的逐块浏览，获取大量的尽可能完整的信息量，再有目的性的筛选出所需要的内容。然而，从用户认知心理的角度分析，这种感知方式在一定程度上增加了视觉与大脑的负担，让原本随意性的网页浏览变得带有些许强迫性的意味。

瀑布流式布局的网页浏览中，信息传递与内容展示的方式是随机的、迅速的，是一种带有偶然性的扫描式信息获取，这种流式的随意浏览对于特定内容的传达而言具有便利性。作为一种图像浏览与信息获取的极致方案，瀑布流式布局在一定程度上给用户营造了具有沉浸感的视觉体验。

3．情感化的交互设计

情感，作为人对外界事物作用于自身时产生的一种心理与生理的综合反应，在得到满足时便会使人产生愉悦或喜爱之情。情感化、人性化是人机交互学科中很重要的研究领域，具有亲和力与独特视觉审美的数字产品设计更能获得用户的好感。从某种意义上言，只有情感化的设计才能真正满足人们精神互动层面的感性心理需求。

当今媒体的高度发达，特别是数字化媒体的出现，更是构筑起了视觉文化的全球化平台[2]。视觉文化符号传播体系已经成为人们生活环境中的一个重要组成部分，我们正处于一个视觉呈现的时代。“读图时代”，人们获得的是一种视觉上的快感；而瀑布流对于图像的展现，是高效并具有强大吸引力的。在瀑布流式布局的网站中，图片结合信息链接的方式，简化了浏览过程，用户快速扫视阅读就可以在短时间内获得大量清晰的信息。其次，看似散乱无序的碎片化内容，表现出强大的视觉吸引力。由于图像随机出现的不确定性，更能诱导和激发用户主动去搜寻自己所感兴趣的内容。而在交互体验上，用户无需进行点击翻页操作，随着鼠标的滚动就能加载新的内容，以最简化的操作步骤便可以获得连续性的浏览体验，让人沉浸其中却不被打断。

瀑布流式布局作为一种新颖的交互体验，完美地解决了图片信息的展示问题，但是同时也存在着很大的局限性，如表现形式过于单一，在内容信息的完整表述上也有所欠缺等。而且它的采用至少有3个前提：一是散乱无序的碎片化内容，二是用户对信息获取上的随机性与不稳定性，三是用户对内容只做极轻量的互动消费。因此，对于目的性强、注重内容与互动的网站而言，瀑布流式页面布局并不适合。

二、网页界面创新设计的思路与方法

从网页界面的瀑布流式布局设计中可以看出，网页的最终呈现能否获得满意的用户体验，根本在于网页界面设计的创新。符合时代审美需求的网页界面设计应该是艺术、技术与创新的完美融合，网页界面的设计不仅是一种传播形式的表达，更是设计者依照设计目的和要求对视觉构成元素进行艺术规划的创造性思维活动。只有独特的创意、新颖的格调、创新的表现手法，才能设计出匠心独运并且具有人性情感的网页界面。

1． 基于视觉体验的网页界面设计

网页界面结构的完整清晰、交互操作的简洁便利以及视觉设计的情感认同，基本上能够满足用户对网页的浏览需求。要使用户在网页浏览时始终保持兴趣盎然的愉悦感，网页界面所表现出的吸引力必须达到或超越用户的心理期望值。在符合用户心理需求的基础上，同时考虑更多视觉设计上的细节因素才能不断完善网页界面对浏览心理的迎合。

在网页界面布局的版式规划上，要从整体上把握好视域之间的主次层级关系，将所需的各视觉要素统一协调安排、合理划分并充分利用有限的展示空间。或许是受到惯性定向思维模式的制约，通常访客在浏览网页时，视线往往趋向于从上到下，由左至右的移动路径，在这个感知过程中寻求视觉心理上的平衡感。因此，遵循用户习惯性的眼动规律，网页界面采用具有平衡感的版式设计更能满足人的心理感受。随着各种终端设备屏幕显示的日趋精细化，网页的基本构成要素如文字、图像、导航条、菜单栏、音频、视频、动画等，除了注重视觉交互效果的呈现，还要从符合视觉规范的层面上来精化设计，达到所谓的“像素级的完美度”。

从根本上来讲，优秀的网页界面设计首先必须创建清晰直观的版式层次结构，还需要建立明确的视觉信息指示系统从而引导用户去完成浏览目标。与此同时，视觉体验设计上还要能在一瞬间抓住访客的目光。在http://www.moovents.com的网页界面设计中，显目的强化图形替代了标题文字的功能，用视觉隐喻来诠释晦涩的概念表达，设计细节上的微妙渐变强化了网页虚拟空间中的三维真实感，给予了用户畅快淋漓的浏览体验与视觉感受（见图2）。

图2 http://www．moovents．com/网站首页

2． WEB新标准下的网页界面构建技术

技术的迅速发展使得网页构建代码的进步和升级比之先前快了很多，新的网页规范与WEB标准也让网页界面的设计表现有了更大的渲染空间。HTML5与CSS3作为新一代WEB开发的标准，无论是针对内容结构还是媒体，都引入了更多新的元素，大多数的主流浏览器已经开始完美支持新的技术标准与新特性。在HTML5逐步完善的趋势下，网页界面设计技术也相应地提高到一个新的高度。利用CSS3的属性优势，可以轻松创建以前需要图片处理才能达到的视觉效果，如圆角、边框背景透明化、渐变光晕效果，还有文本的渐变阴影、倒影，以及各种不同凡响的交互动画等动态视觉效果。

随着网络接入环境的日渐宽松，智能手机、平板电脑以及各种移动互联网终端设备的普及，移动互联网时代呼之欲出。新一代开放的WEB标准使网页界面设计也表现出了优异的兼容性，能够跨越平台使每个细节都能得到完美的演绎。同时，触控技术的应用越来越广泛，页面访问不再仅只依赖鼠标进行操作，故此，网页界面设计还必须考虑到适应触屏设备。如采用能够适应所有分辨率的响应式网页设计和非固定宽度的流体布局，都可以使用户获得与设备本身和谐的流畅体验。显示屏幕的精度也越来越高，比如视网膜（Retina）屏幕的高清分辨率使得用户从垂直到水平浏览网页都能获得清晰绚丽的视觉体验（见图3）。面对技术的发展，在网页界面设计中要使信息的浏览与交互操作更具易用性，同时容纳和展示出更多的内容。

图3 苹果公司采用视网膜（Retina）高清屏幕的new iPad平板电脑

3． 与时俱进的网页界面设计风格

网页界面作为视觉设计而言注重的不是单纯的形式美感，而更加注重的是功能上的实用，直观的版式设计、良好的交互性和快速的响应速度才能带给用户美好的浏览体验。随着人们审美观念的逐渐提升，网页界面设计也越来越重视用户体验，强调人性化设计。这就要求设计者不仅要强化构建技术，还要紧随时代的发展趋势进行设计风格的更新。

如视差滚动就是现今网页界面设计中应用得比较成功的一个技巧②，新颖的视觉特效使其备受设计师与用户的青睐。作为计算机图形学中一个特殊的滑动特效技巧，视差滚动通过精确控制时间与计算合适的位置来展示出一种动态穿插效果，页面中的视觉元素因其显示速度、时间与位置上的差异性造成运动视差，从而形成深度错觉的多层运动图像。这一技术应用到网页界面设计中，可以在二维的平面上营造出极具动感与深度的视觉空间（见图4）。

图4 视差滚动效果的网页设计案例

在繁杂冗长的互联网海量信息中，用户往往不愿意面对一个包含大量信息的复杂网页，而是希望页面更加简洁，以便能够快速获取到所需的资讯，简洁型的网页界面设计正好满足了用户这样的需求。别具一格的单页或多页式主题性网页界面设计，可以在有限的页面中呈现出必需的内容，通过导航条引导的方式使用户在同一页面的不同视域进行跳转，易于阅读。同时，在页面链接层次不深的情况下，固定导航条位置的布局设计不仅可以提高网站性能，也更易于将其融入整个页面的布局之中。在这种设计形式中，导航条不会随着页面的滚动、切换而改变位置或重新载入，始终悬停在页面中的一个固定位置，使用户能够快速通过导航链接访问目的区域或页面。

在图形与图像的处理与应用上，网络环境的优化使得大幅尺寸图片的使用更具可行性。比如高分辨率的背景图像与高清图片能够产生极具冲击力的视觉效果，瞬间吸引住用户的注意力。而对于网页中文本很难表达出的逻辑关系与比例数值，将其图形化、图像化不失为一种高效的沟通方式，直观的图表和资讯图像能够表达更多复杂的信息。而简洁、清爽、明晰并略带透明感的图像所营造的独特视觉效果，使网页界面更为动人并且富有吸引力。还有类似于“Metro”风格的色块方格元素设计、明快直观的极简设计、强化视觉表现的超大LOGO图形、自定义艺术字体等，这些都可以让网页界面留给浏览者美好的视觉印象。

网页界面设计本身并没有强制性的固定规则，不论是布局、色彩体系，还是格调与风格。在可用性和易用性得到充分体现的情况下，都应该以用户体验为中心，以创新的视觉设计给网页界面设计注入新的活力。

三、未来网页界面设计的多元化趋势

[][]

② 视差滚动（Parallax Scrolling）是一种独特的网页内容表现形式，其基本原理是通过CSS技巧或jQuery插件来实现使多层背景以不同的速度移动，形成视觉上的运动落差效果。

[1]马福浚.基于视觉体验理论的WEB界面设计研究[D]．济南：山东大学，2011:28.

[2]孟建.视觉文化传播:对一种文化形态和传播理念的诠释[J].现代传播,2002（3）：1-7.

网页界面设计不仅是为了满足用户感官审美的需求，更是为了有效地传达信息。面对缺乏人性色彩的网络与显示屏幕，用户更乐于接受具有美感的、体贴的、有亲和力的、情感化的网页界面。由现今网页界面设计技术的多元化发展趋势可以推断出，指点触控的操作方式与多维度的交互式设计，将是今后一段时期内网页界面设计的主要技术特征。而网页界面的视觉呈现也不会再局限于传统的二维平面屏幕，3D立体显示技术将成就人们全新的终极视觉体验。

技术上的发展进步总是同步带来视觉艺术上的创新与突破，在网页界面设计的创新历程中，只有不断地深入了解业界最新发展趋势，具备勇于尝试新技术与新方法的超前意识，才能打破传统的固化思维，创造出不同凡响的优秀作品。未来的网络时代，网页界面设计必将肩负起崭新的时代使命，让用户与网络之间的沟通自然流畅、和谐完美，不再有任何的阻碍。

注释

① pinterest.com创办于2011年，是基于视觉分享的社交网站，用户可以将自己喜欢与感兴趣的内容通过图片的形式以瀑布流的浏览模式予以展现。

Innovative Design of Webpage Interface Based on “Waterfall Flow Layout”

A webpage with functional design, reasonable and orderly structure and accurate information can bring users favorable browsing experience, while web pages which break through traditions or are designed with sense of arts and time can better meet the visual aesthetic needs of users. Only exploring innovative design, along with the trend of times, can effectively expand creative thinking and bring perfect unity of art and technology.

waterfall fl ow；webpage；interface；experience design

J04

A

10.3963/j.issn.2095-0705.2013.02.007（0031-05）

2013-01-27

谢涛，黄冈师范学院美术学院助教。