互联网网页界面中的信息设计研究

员勃

摘要：研究了信息设计是如何在网页界面设计中运用情况。通过阐述信息设计的涵义，分析信息设计对于现今网页界面设计的重要意义，并结合现有的网站界面案例中对信息的处理经验，论述了如何进行网页界面中信息的设计方法。提出了要创造互联网信息快速、灵活的线上交流必须确保网页界面中的信息构架层次清楚，繁琐信息内容图形化，以及视觉色彩的合理划分。

关键词：见面界面；信息设计

中图分类号：F49文献标识码：A文章编号：16723198（2014）07017303

据中国工程院院士邬贺铨统计表示互联网上一天产生的信息量约有800EB，如果装在DVD光盘中要装1.68亿张、装在硬盘中要装80万个。互联网的网页界面里每天容纳着海量的讯息、图片和视频。那么面对如此巨大的信息量，各个网站的网页界面该作出怎样的变化，让浏览者能够快速轻松的寻找到他们希望了解的网络资讯呢？这就需要对网页中的信息进行设计。

1信息设计的涵义

信息设计的概念大约出现在20世纪70年代，是指用合理的设计方式分析并组织数据和信息，让数据、信息以合理的方式传播，让复杂难懂的数据易于理解。信息设计涵盖的范围很广，各种媒介中出现的信息数据以及相关内容都包含在内，其中视觉是信息设计最主要的表现形式。

信息设计需要把筛选过的数据按照一定逻辑思维展现出来，并且保证数据的真实性。它可以以不同的方式来陈述信息内容，比如图片、声音、材质或媒介等，让信息变得更有条理和针对性。

2信息设计对于媒体网页界面的重要意义

互联网正在进入一个新时代。电脑技术、网络、手机让收集数据变得越来越容易，现在我们每天通过网络接触到的信息量大到无法想象，通过电脑网页界面或移动手机界面我们获取全球资讯、网络购物、天气查询、在线订票…。

对于媒体网站来说，一个基本现实就是：用户界面是面向用户的。用户需要网站界面满足需求并易于使用，于是信息设计在网页界面的建设中具有重要意义。其一，大量信息在互联网网站界面中传输，假使没有合理的安排，信息的有效处理，网页界面上呈现出来的就会像一个没有抽屉而堆满各种物件的凌乱大橱柜。相同的空间虽然储存量没有变，但是查找辨认度减弱很多，对信息的整理就是在给这个储存信息的大厨柜安装抽屉，设置编码。通过划分区域、图形、色彩的识别度，方便受众在最短时间里获取必须的信息资源。

其二，网站界面除了信息清晰以外，还需要用美化的外观吸引用户，大量信息通过什么样的形式呈现成为核心问题。比如，用户在网上淘宝时，总希望以最快的速度得到某些信息，例如销售排名、成分、价格、物流情况、好评情况等等，大段的文字表述和评论总结，不如运用生动的图表、有趣的插画让信息显得醒目而有计划性，让大量数据可视化，使网站界面的互动更加灵活、快速。

3网站界面中的信息设计

3.1构建信息层次

网站的构架可以代表一个网站的定位，并且方便用户浏览使用。进入一个网站就好比我们走进一个陌生的大型购物商场，很容易不知所措，不清楚商场销售的品牌、商场售卖的产品分区。此时，我们第一反应是查看楼层的布局图，了解每层楼的信息，以及电梯通道的位置。

信息整理乃是籍由导入立场、穷究问题本质，以达成真正解决问题的目标。信息层次构建的关键是建立设计原因、作用、顺序，以及所涉及的对象，以此确保用户的体验可以理解设计师所要传达的内容。对于网站界面信息的整理和构建安排也需要如此，将网站元素高密度融合在一起的同时，需要对网站的定位、浏览主要人群、界面中不同内容版块、标题栏层次、链接等等信息进行分析、筛选、分类，以使得重要信息能够优先出现，成为网页首要链接以及出现的部分，见图1。对于现今比较流行的超长网页设计来说更是如此。长网页会堆积更多的内容，框架式信息分区设计可以基于内容的优先级来精简、删除及隐藏，使核心内容、次要内容或者非重要内容层次清晰，帮助用户走出迷宫，协助用户在滚动网页上行动自如。

图1信息层次整理示意图由于网络的信息传递越来越多，所以在整理好信息内容层次的同时，还需要设计好界面空间层次。预计未来网站页面中的内容会以Twitter风格的短内容呈现，内容会根据关注度进行筛选压缩。目标会过滤感知：与目标无关的东西会被提前过滤掉，而不会进入到意识层面。例如，超市中同类商品的货架台，主打品牌往往会放置在货架中间位置，也就是顾客伸手可得的位置，方便顾客的快速购买。而放在顶部或货架最下端的商品往往会被顾客屏蔽掉，这就是空间层次的导向作用。

在网站信息空间构建层次时，可以根据定性和定量研究，并通过头脑风暴、情景建立等方法对用户进行功能需求分析，得出用户的主要需求。经过筛选，以最适宜的结构展现访问信息内容可以使导向和所指内容不受阻碍地呈现。例如，爱迪生发明基金的网页界面内容就由不同的抽象排列模型框架组成。其中一个子页面的界面，主题信息是要展示出爱迪生的每一个专利情况，于是设计者根据每个发明的时间运用螺旋型列表框架进行展现。用户在浏览网站时，鼠标移动时标题会被旋转，跳出目录提供关于这个发明的PDF文件，旋转式的目录排列排除了许多不必要的图片以及文字解说，浏览者可以根据自己的兴趣最快速度的查找自己想了解的相关信息，见图2。

3.2内容信息的图形化

信息图形化是用视觉化的方式表达数据、信息，采用图片、符号、颜色和文字等要素组织信息，根据信息内容通过设计师的理解向大众更好地进行传达。在网站界面设计中可以运用视觉化的方式代替以往以大量枯燥文字为主的阅读方式。通过信息的组织、派生、浓缩、过滤和转换把复杂数据转换成视觉“信息”。

视觉是人类接受外部信息的主要途径，据统计有大约75%的外界信息从视觉进入大脑。视觉思维对平面信息获取效率远远高于深度信息。将枯燥的深度数据信息解读成平面化生动的图表分析讲解，将复杂的规则描述成易懂的图片信息内容，越来越受用户的欢迎。人们现在对阅读的体验变得越来越挑剔，希望利用有限时间更快速地获取信息，信息图形化设计是在讲述超越数据的故事，让数据更好地转化成信息、知识。

在网络界面中，通常一段内容用文字表示，很难突出需要传达信息的内在结构和内容重点。图形化的内容不仅能以结构化的形式更好地让用户理解，而且在移动平台上的浏览体验会更加有趣，通过对深度的内容加工，将内容用合适的形式表现出来，从而更容易打动用户。在我们熟悉的淘宝网站界面上，常常可以看到将繁杂信息概括为图表或抽象图形进行信息传递。例如天猫网站上也买酒品牌网站，就通过简单的流程图表示了该品牌层层挑选优质葡萄酒的全过程。对比运用大量文字解说品牌的选酒过程，简单明确的图列说明让顾客一目了然地了解了商品的筛选全过程，同时加强了顾客对于商品价值的可信度，见图3。在对冲锋衣的网站介绍上，淘宝运动的界面中也采用环形图表的方式将多个品牌在市场上的销售状况，以及资金成交情况非常直接的传递给了购买客户。大大节约了客户在网上进行筛选、比较信息上所浪费的时间，见图4。内容信息图形化是对已掌握的信息再加工，通过优化设计符合媒介传播的需要，它不仅可以展示实物无法看到的部分或细节，更重要的是还可以帮助顾客做好市场调查、分类和筛选，将主要信息一目了然的提供给用户，也使生硬的信息看起来比较柔和。

图3淘宝网“也买酒”选酒流程图图4淘宝网冲锋衣销量对比图表3.3内容信息的色彩引导

任何图形的视觉刺激力与视觉表象大都是由色彩和明度产生的。视觉对形状的界定是对外轮廓线在色彩与明度方面区别出决然不同的区域推导而来的。我们在地铁换乘的时候都有过这样的经历，因为地铁地图上都会用不同的色彩来区分各个线路的不同，所以通过地铁线路的色彩识别就能进行快速的线路选择。在互联网的界面中，色彩也在无声地引导着浏览者进行信息的划分和选择。

在互联网的各个网站间，我们可以看到不同的信息色彩表达。目前，点击率较高的网站都会依据品牌识别系统里的专色颜色进行整个网站的色彩定位，这样浏览者在点击网页时一方面可以快速锁定目标网站，一方面色彩的不断信息强化会让浏览者通过色彩记忆记住整体网站的设计风格。例如，我们经常浏览的新浪微博、美团、淘宝支付宝等等网站来说，都有自己明确的色彩体系。淘宝色彩为橘色，支付宝为蓝色，新浪微博为正红色，美团网则选用的是粉蓝绿色。当我们进入不同网站界面时，色彩在第一时间向我们传递出网站间的定位区别，见图5。

图5网站标识色彩在同一个网站下，对于不同专栏、内容的导航区分上也常常采用不同色彩的情感诉求来进行区分。“Rainbow”科技公司的网站按照界面内容信息进行“上、中、下”的三部分格局划分开来，中间的内容版块通过红色和蓝色图标以及文字的色彩进行分区化处理，上下部分的导航链接根据“Rainbow”单词的中文意思“彩虹”对不同链接信息进行色彩区分，打破传统导航信息并列在界面上方，并且色调统一的处理方式，使浏览者可以通过色彩关系快速地寻找到自己需要的信息内容，见图6。

图6“Rainbow”科技公司网站界面4结语

随着网络信息的不断扩大，数据需要快速地转化成信息才更有意义。面对信息环境所赋予的重重压力，人们会更向往轻松快捷的信息接收过程。按既定的目标把信息按一定的形式去表现和设计，将大量的信息有序分类、排列，并转化为图像的过程可以节约我们在网络中寻找重要信息所花费的时间，同时更加方便我们的生活和工作。

参考文献

[1]孙皓琼.图形对话——什么是信息设计[M].北京：清华大学出版社，2013.

[2]周陟.网页设计解析[M].北京：清华大学出版社，2009.

[3]（日）佐藤可士和·佐藤可士和的超整理术[M].南京：江苏美术出版社，2013.

[4]程萍，蒋哓.基于用户认知的购物网站导航系统交互设计准则[J].包装工程，2012，33（14）：73.

[5]张晴，张凌浩.基于移动互联网的交互式智能手机Widget设计研究[J].包装工程，2012，33（8）：62.

[6]（美）蒂莫西·萨马拉.完成设计—从理论到实践[M].温迪，译.南宁：广西美术出版社，2010.

[7]WARE Colin.设计中的视觉思维[M].陈媛媛，译.北京：机械工业出版社，2009.

[8]傅小贞，胡甲超，郑元拢.移动设计[M].北京：电子工业出版社，2013.