探讨提升网站用户体验的视觉设计要素

【前言】探讨提升网站用户体验的视觉设计要素由文秘帮小编整理而成，但愿对你的学习工作带来帮助。网页作为Internet上的一种应用架构，其首要任务是向用户提供信息及服务。从这个角度来说，就是看能否在最恰当的时间和地点，以合适的方式，为用户提供相关的信息服务，满足用户的需求。以用户为中心的网站设计，需要在关注用户需求的前提下，提升用户浏览过程中在感官...

【摘 要】本文主要探讨视觉要素与网站可用性之间的关系，阐述了网站的视觉要素设计对于提升用户体验的重要性。视觉体验是用户体验的一部分，通过合理的设计提升网站的视觉体验，可以提高网站的可用性，带给用户舒适的浏览体验，更好地帮助用户有效的浏览网页内容，引导用户便捷地操作以完成其需求。

【关键词】网页设计 可用性 新浪网 视觉要素 用户体验

随着计算机和网络技术的发展，互联网已经成为人们生活中必不可少的一部分，越来越多的人习惯于在网上查找资料、浏览新闻、购物等。设计师在进行网站设计的时候，要想获得更高的用户粘度，除了要抓住用户的“痛点”，考虑到用户固有的网页浏览、观察、思考方式，在设计中还要做到实用和美观。在用户使用内容、建立信任的过程中，视觉设计起到了很大到的作用。色彩、文字、排版方式等视觉要素控制着用户的阅读体验。所以，如何通过视觉要素提升网站可用性，成为网站设计中十分重要的环节。

1 视觉设计对用户体验的影响

用户体验最初指的是用户在使用产品或者享用服务的过程中建立起来的心理感受，涉及人与产品、系统或者服务交互过程中的每个方面。2010年3月召开的ISO大会制定了新一代的人机交互设计指导国际标准ISO 9241-210：2010，其对用户体验的定义是“人们对于针对使用或期望使用的产品、系统或者服务的认知印象和回应。”

网页作为Internet上的一种应用架构，其首要任务是向用户提供信息及服务。从这个角度来说，就是看能否在最恰当的时间和地点，以合适的方式，为用户提供相关的信息服务，满足用户的需求。以用户为中心的网站设计，需要在关注用户需求的前提下，提升用户浏览过程中在感官、操作、以及心理等方面的体验。网站目标和用户需求不同，因此会在信息架构、交互方式、视觉表现上呈现出不同的方式和样貌，给用户的印象也各不相同，也会带给用户不同的体验。而视觉体验是用户体验的重要组成部分，视觉风格是视觉体验元素中最容易被用户感知的元素。

2 网站视觉设计的基本要素

网页上的视觉信息有很多，如标志、文字、图片、动态效果等，但最基本的视觉传达构成要素是文字、图形和色彩。设计师对于这些基本构成要素进行合理布局和有效的空间处理，有利于提高设计质量，增加设计的使用功能。它既体现在可视的、有形的各造型元素在页面的面积、大小及位置上，即对实的空间构成要素的相互关系的安排上，也体现在对实虚空间的经营上。合理的布局加上明确的视觉效果，可以形成网站独特的视觉风格。

2.1 文字

文字是信息传达中最普遍使用的视觉要素，对于网站的信息传递的作用可以说是无可替代的。文字是实现网站功能最重要的手段，网页上的文字不仅种类很多，功能也各不相同。引导页上的文字及其形态可以使用户形成对网站的初步印象，了解网站的基本信息；首页上的标题文字可以使浏览者明确网站的内容结构，并具有导航的作用；内容页面上的文字则会使用户最终获得详细的信息。同时，文字对网站的气质风格会产生有很大的影响，具体体现在文字的字体、字号、字距、行距，以及跳跃率、编排方式等。传统而规整的字体，偏小的字号，整齐、低跳跃率的编排，会给用户带来平静、大气稳重、的感觉，营造一种安静的气质。反之，使用字形活跃的字体，不规则的排版，高跳跃率的组织，会使网站形成清新活泼的氛围。

2.2 图形

图形是现代社会人与人进行交流与沟通的重要的视觉形式。在信息传递方面的表达更加的直观和生动，更加容易吸引用户的视线，帮助用户聚焦相关信息和引导用户行为。同时，图形具有很强的视觉表现力，不仅可以强化网站的视觉风格，而且创造了更加具有企业特色的品牌氛围。随着读图时代的到来，图形元素在网页中的使用日趋增多，演变成为一种流行时尚的设计风格。

2.3 色彩

色彩是人类视觉所能感知的、客观存在的物象，是人类认识事物的重要媒介之一。不同的色彩配置所呈现的色彩效果，或清新淡雅，或明亮艳丽，具有直接感染力。搭配巧妙色彩给用户以强烈的视觉冲击力和艺术感染力，能引发用户从美学意义上了解和鉴赏其表达的形象和内容。设计师也会利用色彩的特征，强化网站的视觉形象，体现企业内涵，从而给用户留下深刻的印象。

2.4 布局

布局设计是根据网站的相关内容，运用版式设计原理，将网页上的视觉元素进行合理配置与表现的过程。布局的目的实现信息传递的清晰化、合理化、提高用户的浏览时的舒适度，布局设计虽然没有文字、图形、色彩、对网站风格的影响来得直接，但是网站建立视觉秩序和规范必不可少的。一个好的网站布局能将各个部分系统化，整体化，处理好整体和部分的关系，在秩序中体现美感，引导用户的视觉动线。

3 视觉优化对提升用户体验的作用

让用户建立对网站的信任，是网站追求的目标。网页设计最大的特点在于交互性，用户浏览相关内容的同时是建立信任的过程，网页设计的视觉要素影响着用户的浏览体验，视觉设计是信息传递者与被传递者间的直接桥梁。因此，网页设计的重点在于根据用户的感知功能和认知特点，要求设计不仅要具有审美需求，更要注重通过视觉要素提升网站的可用性。以一种合理的方式，直观、有效地传达信息，暗示产品的功能和行为。

现在笔者以新浪网改版为例，分析网站视觉要素的提升对用户体验的影响。新浪网以“为全球用户24小时提供全面及时的中文资讯”为经营理念，主要提供网络媒体及娱乐服务，以成为世界各地中国人的全功能网上生活社区为发展方向。它涵盖了20多个频道及数十个板块，因此如何将种类繁多、数量巨大的信息合理布局是一个非常重要的问题。

作为综合性门户网站，为了保证信息传递的快捷性和有效性，提升网站可用性，优化用户体验，改版后的新浪网视觉风格更加趋向于简洁和清晰，整体风格跳出了国内很多门户网站首页拥挤、杂乱的状态，改版后增加了1.5屏，使得首页整体空间留白大幅增加，视觉空间变得更加流畅，提高了网页阅读的易读性和舒适度，以及信息的可视性。由于新浪网改版后优化了用户浏览网页时的视觉发散空间，因而提高了网页的整体使用性和艺术性。合理利用网页留白能够使得整个页面疏密有致、清新活泼，并且更加有效的表达网页主题。简化了页面、风格变得更加疏朗，通过频道与板块之间的合理搭配达到最佳的视觉表现效果，从而使用户有一个非常流畅的视觉体验。

3.1 文字的优化

文字对网站的气质风格有很大的影响。改版后的工具栏、导航栏、标题栏目的文字变为微软雅黑，内容文字依旧使用宋体，通过字体的改变，字型的粗细对比，使文字层次更加丰富。增加了字号的大小，提高了可读性，降低了阅读时候疲劳感。调整了行距，页面变得更加通透、舒服、稳定，整体视觉呈现出非常适合阅读的协调风格。

3.2 图形的优化

导航下面新闻的图片不仅丰富了网页信息传递的方式，为文字信息提供了补充，同时突出了重点新闻，便于信息的传递。新浪网改版后的广告尺寸由之前的16种变为新版的8种，大幅度地精简使页面变得更加干净。现在广告位投放主要分布在3部分。导航下的banner像一条横幅挂在网站上，且广告经常是以动感绚丽的形式展现出来的，使得网站风格整体上比较轻松灵活。更为重要的是带有艺术气息的、生动形象的广告位经常以图片、视频并辅助以文字展现出来。左侧导航下的广告位常采用图片配文字说明展示，图片与网站风格统一给用户带来视觉上的和谐。

3.3 色彩的优化

改版后橙红色和黑色的搭配十分巧妙，同时增加了无色彩面积，较之旧版简洁清爽了很多。网页设计色彩搭配是否合理，讲究艺术性和使用性在一定程度上影响着网页能否获得较高的用户体验。设计师也会利用色彩的情感象征，来强化网站的视觉形象，体现企业的内涵和气质。作为一家综合性门户网站，新浪网主色调为黑色和橙色，黑色代表着庄严、高雅、稳重，而新浪网大胆采用橙红色标注重要、新鲜事件，橙红色能够在众多信息中迅速抓住用户眼球，带给用户极强的视觉冲击力，从而较为便利地推送了信息并提高了用户体验。橙红色和黑色的搭配力量感十足，利用了色彩的对比和调和，既醒目又和谐统一。同时，字体的颜色发生了改变，由蓝色、黑色、红色变为蓝色、橙色、黑色，与整体色调搭配更加和谐。

3.4 布局的优化

改版后，网页的版心宽度由原来的950px增加为1000px，不仅增加了容量，也增加了栏间距的距离，更宽的版心也更符合设计的趋势。网页的布局总体是上中下结构，在这个结构中，又是川字形三列布局或广告通栏两种形式，是目前非常流行的布局方式，颇具时尚感，会给用户一种平静、安定的感觉。

3.5 导航的优化

导航设计对于一个网站的可用性与整体风格有着至关重要的影响，是用户体验的重要考量标准之一。新浪网改版后最顶端的导航栏虽然仍保持原有的21个，但由于间距的增加，看起来更加清晰舒适。并且删除了导航左侧的logo，变得更加精简。改版后网页上的视觉元素得到了更合理地配置，简洁的设计提高了网站导航的可视性，有利于用户更容易找到和使用导航，使信息的传递更加清晰化、合理化、人性化。新浪网的导航频道，以精致简短的2字词语排列整齐地展现出来，保持了导航的一致性和连贯性。其中每个导航频道都将当今最受关注和点击量最高的词语展示在导航后面，其设计的过程与结果均从用户体验的角度出发。同时，导航关键词用加粗格式予以展现，能使用户十分清楚地进入自己的目标页面，从而增强了导航的可用性。

3.6 体现个性化需求

改版后的新浪网，基于用户点击追踪和兴趣数据挖掘，为用户提供兴趣匹配度高的内容并辅以精准广告。同时用户可以把自己感兴趣的细分内容板块从二级、三级甚至更深的导航路径中呈现在首页的个人菜单中，更好地满足了用户个性化需求。例如，体育内容板块中，如果你每天看的都是大量NBA的信息，然后基本你的页面就是NBA为主；如果你看的大多数是和网球相关的，就是以网球为主。新浪网会根据用户的行为做出判断推送信息，很大程度上降低了过去编辑人工干预的权重。

3.7 融入社交化

将新浪微博和新浪网打通，依托新浪微博平台衍生的社交关系和碎片化信息，向用户发送智能推送，并且改版后新浪网增加了顶部固定通栏，引入了我的菜单、手机、新浪网移动客户端、微博、博客、邮箱等产品的快捷入口，突出体现了社交化元素。

结语

综上所述，网站的视觉设计对用户建立信任和初步印象有着至关重要的作用，网站设计中视觉要素的创新运用是今后设计发展的趋势。一个主题突出、色彩鲜明的网站才能在第一时间内吸引用户，设计师应当巧妙运用视觉元素进行有效地视觉编排，提升网站可用性，给用户带来的愉悦的浏览体验，从而给用户留下深刻印象，吸引用户再一次访问网站。

参考文献

[1]余小芬，网页设计风格的审美效应，[J].大众文艺，2012-3-25.

[2]（美）特里斯，（美）阿伯特著，周荣刚译.用户体验度量.机械工业出版社，2009，8.

[3]（美）霍夫曼著，向怡宁译.瞬间之美：Web界面设计如何让用户心动.人民邮电出版社，2009，7.

[4]隋涌.互联网产品视觉设计[M].清华大学出版社，2015.3.