企业网站界面信息架构视觉表达

前言：想要写出一篇引人入胜的文章？我们特意为您整理了企业网站界面信息架构视觉表达范文，希望能给你带来灵感和参考，敬请阅读。

引言

互联网技术的发展使得越来越多的企业选择建立企业网站来宣传企业文化、扩大品牌影响力，通过让服务持久地面向大众群体来提高公司效益。但紧迫的需求与开发周期之间产生冲突，一些中小型企业为了节约时间成本，只注重网站的信息架构的建设与开发、忽略了网站外观的视觉化设计，大大降低了企业“软价值”。不仅未能得到用户的品牌认同感、反而在初步的视觉体验阶段就使用户退却，不利于企业的长久发展，因此企业需要建设适配自身品牌形象与信息架构的网站界面。

一、企业网站界面的信息架构的作用与研究现状

（一）企业网站的界面特点

企业网站的本质是企业为了提高行业内知名度与竞争力、拓展服务渠道而展开的宣传手段。受限于互联网规则，网站容纳了一系列承载企业相关信息的网页界面。企业网站界面的形式特点受到企业特性的制约，总结起来主要有三点：企业类型决定界面风格要素；企业业务需求决定界面功能要素；企业文化决定品牌形象要素。

（二）理想的企业网站界面的信息架构

信息架构（InformationArchitecture）是由LouisRosenfeld企业网站界面信息架构的视觉表达THEVISUALDESIGNOFTHEINFORMATIONARCHITECTUREOFENTERPRISEWEBSITEINTERFACE和PeterMorville于1957年提出的概念，他们认为网站的信息架构由组织系统、标记系统、导航系统和检索系统四个部分组成的[1]，通过结合自上而下与自下而上两种分类体系归纳信息，理想的信息架构能够帮助用户更成功地获取和管理信息，从而有效地解决用户的信息需求[2]。理想的信息架构应基于用户体验，首先保证信息的有效性及信息架构的逻辑性；其次，信息架构的构建应兼备灵活性与高效性；最后良好的信息架构可以将科学与艺术结合，进行视觉上的美化。

（三）信息架构视觉化的研究现状

随着互联网产品不断强调用户视觉体验的背景下，已经有不少学者对信息架构视觉化领域做了相关研究：方学兵和金丽丽认为视觉信息设计的可用性设计在于对视觉形态、视觉层次、视觉定义和视觉图标的拓展等四个方面的把控[3]。李文今、侯文君等人从认知理论与交互定律出发，进一步探究了网站信息架构的展现方式对用户认知的影响[4]。王苗辉认为，用户对视觉信息界面的认知主要体现在视觉元素的分组和布局、视觉元素的属性和视觉元素含义三个方面[5]。但这些研究都偏向于对信息结构或视觉元素的单侧论述，没有展开研究信息结构和界面视觉之间的关联。文章将从信息架构和界面视觉元素的关联性展开，研究企业网站界面的信息架构的视觉转化和表达。

二、企业网站界面中的视觉元素

界面的视觉设计是连通用户体验与产品内核的重要途径。企业网站能否触动用户，首先体现在界面的视觉效果能否吸引用户愿意继续体验下去。如果一个良好的信息构架没有经过视觉美化，那么用户留存率和转化率都将大大降低。界面的视觉要素主要有以下几类：文字。文字是人类传递信息的主要载体，网站中的文字设计主要体现在字体、字号、字重、字距、行距、跳跃率、排版方式等方面[6]。文字属性的选择除了考虑美学层面的内容，也要考虑人机尺度的问题。图形。木村博之从视觉表现形式的角度，将信息图形分为图解、图表、表格、统计图、地图和图形符号[7]。色彩。色彩是视觉言语的重要表现形式，是界面视觉呈现的首要元素。相比起界面的其他视觉要素，界面的色彩特征更容易影响用户对界面第一印象。网站中的色彩往往指的是色彩搭配，色彩搭配的应用涵盖了界面上其他所有视觉元素，合理的色彩可以体现出界面信息的关联性、层级位置、重点内容和信息状态，也能够传递企业风格、企业文化，展示企业品牌形象。肌理。肌理是物体材质的表面特征，最原始的肌理体验来源于触觉，但随着日常经验的丰富，人们可以从视觉上感受到肌理和质感，这种通感行为的产生让界面的视觉元素有了更大的发挥空间，随着3D设计效果和新拟物风格（Neumorphism）在界面视觉中有了越来越广泛的应用，这也让视觉质感备受关注。流媒体。随着互联网技术的发展，网络传输数据的速度明显提升，音视频可以打破宽带和流量的限制，被应用在网页中。相比起图片与文字，音视频、动画可以用较少的页面空间传递更多的信息，让网页内容更加丰富[8]。

三、企业网站界面信息架构的视觉转化

（一）企业网站界面信息架构的视觉转化难点

本文主要是对网站的信息架构向网站视觉表现的转化过程与方法进行研究，首先要从企业网站界面的信息架构视觉转化的难点切入，主要体现在以下4个方面：1.信息权重与视觉元素的优先级：信息的权重以企业网站目标为导向，具体关注网站所解决的问题或期望的收益是什么、收益过程是否伴随着风险及风险程度如何、追求怎样的用户体验及用户的可接受度如何等。信息权重参考信息的等级、价值、重要性和时效性。信息权重值的高低直接限制了视觉元素的优先级别。2.信息异质与视觉元素的准确性：企业网站的信息种类繁多，具体表现为界面信息的内容、长度、格式、状态等特征的差异性。信息的差异性使视觉元素在体现相关信息时存在定义准确度的问题。视觉元素必须要准确地将信息内容传达给用户，并且保证用户可理解。3.信息超载与视觉元素的简化：信息超载指的是信息接收者承受了超出其处理能力范围的过量信息，以致于无法理解相关信息、无法明确所需要的信息、没有获取信息的途径。在企业网站中，企业想要把尽可能多的信息传递给用户的同时，应考虑到用户的接受信息的能力。为了使用户能在能力范围内尽可能多地接收有效信息，需要借助信息视觉化来使信息的呈现方式更为集中有效，并且容易被注意、被理解。因此，在界面信息得到合理规划和组织的基础上，对视觉元素进行尽可能简化，避免视觉元素给用户带来不必要的认知负荷。4.信息逻辑与视觉元素的艺术化：信息架构是企业网站的骨架，决定了网站界面的信息容量、界面的布局形式和网站未来的发展方向。用户能否体验到网站的功能，以及是否愿意继续体验的核心就在于网站的信息架构是否科学。信息架构越是严谨，网站的用户体验越好，但高度的逻辑观给界面科学性与艺术性的结合带来一定的难度。界面的视觉化不能一味追求艺术性，信息的架构方式也要考虑到界面的呈现方式。界面的视觉元素要以“形式追随功能”为宗旨，在满足信息架构、体现网站需求的基础上发挥艺术功能。

（二）企业网站界面信息架构的视觉转化方法

1.构建视觉元素的信息显示秩序：网站界面视觉元素的信息显示秩序表现为视觉内容的关联性与层级性。（1）视觉元素的关联性：视觉元素的关联可以通过色彩、文字、图形等视觉元素的一致性与相似性以及元素的在空间内的亲密性体现。其中文字除了可以通过字体、字号、字重等基本属性关联视觉元素，还可以通过文字的字距、行距、跳跃率、排版方式对信息类别进行归属，视觉分布依据距离原则和相似原则，近距离的文字属性会被关联在一起。“ClassicCarsontheBigScreen”是一个以插画展的形式展示经典老爷车的网站，网站的文字内容包括这些经典款车型的故事以及原产地、总销量、推出时间等官方的数据，如图1。“ClassicCarsontheBigScreen”对于信息的视觉关联性处理得十分优秀，对不同车辆的同种类别信息使用了相同字体、字号和字重，并均以灰色的圆形背景衬托车型图案，这些信息的距离较远，但用户可以明白它们属于同一类信息。其次在空间的处理上，“ClassicCarsontheBigScreen”将对一款车型的所有介绍内容集合在一起，在排版中表现空间的亲密感，虽然一些文字的属性不一致，但通过距离原则，用户可以明确它们表述的信息所属同一辆车型。不同车型的信息依次依据时间线分列在界面左右两边，通过制造疏离感，使不同车型信息的空间关系更加清晰。（2）视觉元素的层级性：网站界面中视觉层级不明确会给用户带来视觉干扰，视觉干扰在企业界面中的体现方式是：不传递界面信息构架内容的显示元素对传递信息构架内容的显示元素产生干扰、次要的信息显示元素对主要的信息显示元素产生干扰、同级别信息显示元素之间的相互干扰。在企业网站界面设计中，应该消除无意义的显示元素，强化权重高的信息、弱化权重低的信息，使较重要的信息先引起用户的注意，为用户高效地筛选信息、辨别信息提供基础。视觉的层级性可以通过色彩特异、方向特异、尺寸特异、形状特异以及运动特异等方式实现[9]，以视觉元素之间的对比完成注意的捕获。“ClassicCarsontheBigScreen”中，车型的图案和色彩与视觉元素形成对比，让车型的外观特征更吸引浏览者注意，同时，界面的文字信息通过字号、字重等属性传递层级性，字号大和字重强的文字容易被阅读，页面中车型首次出现在荧幕上的时间、经典的别称等内容会被浏览者一眼看到，如图2。2.提高视觉元素的信息表达效率（1）视觉元素的准确性：界面信息架构的转化中视觉元素能否准确传达相应的信息内容一直是设计的重点之一，许多公司将界面设计工作分设为交互设计和UI设计两个部分，前者关注用户体验，从界面信息布局和操作流程上进行思考，后者专注于界面的视觉表现形式，即如何优化界面视觉元素，使其更准确高效地传递信息，易于用户对信息的接收。易理解的视觉元素应符合用户认知、依据用户习惯、基于企业文化。符合用户认知。从用户认知来看，视觉元素的准确性在于设计师对于信息内容的视觉表现符合用户的心智模型。依据用户习惯。在设计上帮助用户按照使用经验总结出的规律进行界面操作，方便用户将过往的使用经验直接迁移到新的产品中。如有需要打破用户习惯的需求，需要多方面考察这种需求是否能带来极大的效益。基于企业文化。企业网站的设计必须体现企业的品牌形象和文化理念，明晰的企业形象展示可以使用户对品牌有更直观的认识，增加用户对产品的忠诚度。为了使企业文化深入人心、扩大行业影响力，不少企业建立了成熟的设计规范，例如苹果、谷歌、微软、IBM等行业巨头都建立了视觉、操作和风格相统一的规范性设计语言。通过制定规范使用户的体验更流畅、助于加深对企业文化的理解与认同，从而提高用户黏度。苹果公司的官网对于视觉元素准确性的把握十分到位。苹果公司遵循“少即是多”极简主义设计理念。在网站的设计也体现了这样企业文化，苹果官网的大部分页面，除了展示的产品固有色彩和按钮蓝之外，文字、背景、企业标识均为黑白灰色系，此外界面会以大量留白营造广阔的空间感。图3是苹果官网的首页，设计师通过低饱和度的背景色彩以及留白空间为界面降噪，主图产品的光泽与质感体现出产品的流线造型与科技感，运用大标题的字体风格使信息的识别度更强、界面更具高级感。图4是苹果公司官网的音乐产品页，设计者在网页中以视频作为背景，不同于传统网页依靠文字和图片展示信息给用户留下刻板与单调的印象，苹果官网展现出信息时代的活力，通过视频迅速将用户带入音乐世界，使产品尊重自由与热爱的理念更直观地传达给用户，达到点题和强化记忆的效果。同时以该界面为例，用户点击官网顶部导航栏内任意一类产品标签时，会在导航栏下方显示二级导航。二级导航包括该类型产品下的系列型号与配件，设计人员通过将复杂信息视觉化，以简易的产品图形符号向用户展示产品信息，既能让用户快速地认知与理解界面所要传达的内容，又可以使界面具有艺术性。（2）视觉元素的美化与简化：视觉元素的美化功能应建立在完善的信息架构功能之上，视觉表现层面的设计给予信息框架层支持，以弥补信息框架逻辑排布的视觉呈现问题。视觉元素的设计有助于用户感受网站的文化氛围，如图5；视觉元素的美化涉及到：视觉元素的对比性与一致性、网站界面布局的条理性、配色方案、界面质感、页面文字排版等。例如通过在界面中使用不同的肌理可以增加界面视觉元素的对比性，呈现更加丰富的视觉效果，使界面信息更具感染力，如图6。在美化视觉效果的同时应该持理性克制的态度，例如界面颜色的数量过多时会加重用户的认知负荷[10]，反而失去了信息视觉化的意义。图7“Amundi”是欧洲市值第一、同时也是全球前五的投资管理公司。得益于全面的专业知识和研究驱动的投资文化，Amundi能帮助客户做出更明智的投资决策。其网站的视觉整体呈现内敛的设计风格，尽可能地简化了视觉元素。设计者对网站主页板块的布局规划采用顶部复合导航配合动态banner大图，复合导航可以使复杂信息结构有条理地展示出来，这种布局干净清爽，有较强的视觉表现能力。网站内的信息浏览入口被设计为卡片形式，并以文字对相应卡片内容进行简要描述，方便用户筛选信息，也使界面简洁有效。色彩上以饱和度偏低的蓝色和灰白色为主，使用大量留白，在对信息内容进行居中处理并融入线性设计结构，形成了亲切的卓越资产管理形象，如图8。3.规划视觉元素的信息引导路径：视觉元素的信息引导是以网站的任务流程为导向的，在信息架构视觉化的过程中要有意地引导用户做出预期的操作行为。在初次访问网站时，用户会通过扫视网站内容来快速获取想要的信息，视觉浏览模式都以“Z”字型为基本路径。有相关研究表明，在一个版面中，观者会花约1.5倍的时间停留在版面上方约55%的面积上，观者的注意分配的时间从高到低依次为左上方、右上方、左下方和右下方[11]，如图9。根据用户的操作习惯和视觉浏览路径，把下一个任务的视觉元素布局在上一个任务的下方、右方或右下方，如图10。影响用户视觉搜索的还有搜索目标的数量和类别，在网站的视觉设计中，应该对该界面即将承担怎样的“任务”作出提前规划，设置数量合适的搜索目标，根据信息的优先等级有序地将信息内容以用户视觉搜索路径进行布局。清晰的交互反馈也是引导用户操作的重要方式，在交互中加入动效可以增加操作的连贯性，经过多次操作能够帮助用户理解网站的信息架构。交互动效要以功能为主，遵循清晰聚焦、克制有度、自然流畅这三个核心原则，避免动效给使用者带来信息干扰。

四、结论

企业网站界面视觉化设计应结合企业的信息构架，体现企业的文化理念，使企业品牌深入人心。企业网站界面信息架构的视觉化设计要遵循用户体验至上的原则，克服视觉转化过程中因信息权重、信息异质、信息超载、信息逻辑等方面带来的困难。从视觉元素的信息显示秩序、视觉元素的信息表达效率、视觉元素的信息引导路径三方面进行网站界面的视觉化设计。

作者:李慧君 陈净莲 单位:北京林业大学艺术设计学院