网页动态元素设计与运用

　　第三章 网页动态元素设计与运用

　　一、用户对信息的视觉反映与视觉设计的要求。

　　网络页面和媒体版式二者之间的设计存在一定区别，一般情况下，网络页面保持时间较长，往往几个月甚至几年都不会更新，而传统媒体版式则经常改变页面。出现此种情况的主要原因在于，与媒体版式设计相比，在对网络页面进行设计时，需要应用的技术更为复杂，成本更高，且需要较长的时间，除了以上几个因素以外，倘若网络页面经常变更，用户会产生一种不适应的感觉。此外，因为网络不具有较强的移动性，且用户长时间盯着电脑屏幕阅读，会产生一定的视觉疲劳，而且网络阅读需要支付一定的费用，基于此，用户在网络中进行阅读操作时，通常会选择固定的阅读方式和习惯，以此种方式缓解眼镜疲劳和节约上网费用。基于此情况，在进行网络页面设计时，就必须对用户阅读习惯这一重要因素进行充分考虑，使设计的页面可以吸引用户的目光。

　　1.1 CVI 与视线聚焦点。

　　视觉接触中心，简称 CVI,这一概念主要指的是，用户在进行网络页面浏览时，在打开页面的一刻，视线的关注点将立即落在页面中的某个范围，用户视线的关注点即为页面浏览初始位置，被称为视点。对于广大网络用户而言，在浏览不同的页面时，用户视线的初始关注点是不同的，通常视点出在不同的位置；但是，在浏览同一个页面时，除少部分用户外，大部分用户的视点都是固定的。产生固定视点的原因主要是由页面中的重要内容、设计亮点以及服务等因素所决定的。在网页设计过程中，通常都会使用部分强化引导方式，以此突出主题或者将重点内容呈现给用户。

　　根据用户的阅读习惯，在视线接触网络页面的一刻，视线的焦点会首先关注两个方面：第一方面是对视觉具有吸引力的部分，比如，页面中的图片、鲜艳颜色的标题或者色块等，第二方面是把页面的每个部分组合起来，会对用户的视觉造成强烈刺激，此时，用户会被页面的整体外观所吸引。简单来讲，用户在浏览页面时，存在一个视觉心理中心。

　　1994 年，心理学家 B.F.斯金纳首次提出了 CVI 的概念。当时，斯金纳提出观点：要使一个网络页面具有活力和创造性，就必须在设计页面时加入一个 CVI.如果一个页面只是一个固定的表面，将不会对用户产生吸引力，同时，也无法引导用户浏览页面的信息。举个例子来讲，如果在一个白色的页面中，在中间放置一个红色的圆点，用户在浏览该页面时，视线的关注点必定会沿着红色点的方向移动，最终会视线关注点会停留在红色点范围内。

　　换句话说，倘若把红色的点换为一个图片或者鲜艳颜色的标题，此时，不管图片或者标题放置在页面的哪个位置，用户的视线关注点依然会移动到此范围内。以实际层面来讲，此时的图片或者标题已经成为了用户浏览网页时的初始关注点，即产生了一个 CVI.当今，大部分广告都是以此种形式在页面中展示出来，以此吸引用户的注意力。

　　1.2 网络用户浏览过程的运动轨迹、速度与关注率一般情况下，用户在浏览页面的过程中，视线不可能会细致的扫过页面的每一个地方，用户往往会对页面的核心区域进行细致浏览，在页面核心区域以外的地方，用户只是用眼睛的余光粗略扫过。

　　除非在页面的非核心区域中，恰好有吸引用户的内容，此时，用户的视线浏览轨迹才会停留在此部分区域中。

　　页面中的区域一般都是一个宽度有限、自上而下的范围。在此情况下，用户在浏览页面时，需要利用鼠标向下拖动页面的滚动条，以此页面中包含的其它内容进行浏览，可以说，用户在浏览页面时，视线都是自上而下移动的。在此情况下，由于滚动条在页面右边，用户会更容易关注页面的右侧部分。此外，页面核心区域的形成，主要是受到用户初始关注点等因素的影响，根据用户的浏览习惯，以用户的初始关注点为起点，往下垂直的范围就是用户浏览网页时的视线运动轨迹。因此，在设计网页时，应当充分考虑此部分因素，把重要的信息和内容展示在页面自上而下的一个范围内，同时，需要注意的是，页面浏览区域不能设计的过宽。

　　根据调查表明，人们在观察某个页面时，首先会被页面中的某个点或者某个部分所吸引，之后，人们的视线会向上运动，进而视线会以顺时针的方式，对该点或者该部分的周边区域进行观察；对于纯文字的网络页面，由于人们阅读书籍时养成的习惯，通常会从左上角开始浏览，且视线依次向右平移。为了将信息有效传递给用户，设计的页面要符合用户的阅读习惯，在分配版面时，注意把重要信息、图片等内容放置在页面的核心区域，吸引用户的目光。

　　此外，由于阅读环境不同，与传统纸质媒体相比，用户浏览网络页面的速度要更快，一般都是对页面的核心区域自上而下的快速阅读。因此，在设计页面核心区域的宽度、字符间距、字体大小以及行间距等内容时，都需要根据受众群体的特点，对受众浏览时视线扫面速度进行调查，并以此为依据，有针对性的设计，提高用户浏览页面的舒适性。

　　在网络中，蕴含了多种多样的信息。对于不同的网络用户来讲，在浏览不同信息时，会产生不同的心理，从而可能会对用户的阅读习惯产生一定影响。根据调查显示，大部分网络用户对页面中的文章和标题较为感兴趣，其次则是页面中的图片和图标，而大部分用户表示对页面中的广告最不感兴趣。因此，在设计页面时，要充分考虑各方面的细节，使设计出的页面具有人性化的特点。

　　二、动态元素设计中的生命力呈现与表现类型。

　　2.1 设计中的生命力。

　　一个具有创意、富有生命力的网络页面，会给用户带来优质的浏览体验，同时，此种页面也会产生较大的影响，生存的时间也会比其它页面更长。在网页设计过程中，不但要注意内容板块的合理分配，还要使页面具有一定的美感。因此，要成为一名优秀的页面设计者，要同时具备专业技术和艺术鉴定两方面的能力。其中，页面的美感和功能要以专业技术为前提，页面设计者首先要掌握牢固的页面设计知识，才能顺利开展设计页面的工作。总的来讲，在展开页面设计工作时，必须要以网格的骨式结构为基础。由于技术方面的约束，因此，页面设计师无法像平面设计师一样，不受任何制度的束缚，只需根据自己的灵感自由的创作，而对页面设计师来讲，首先要以技术为前提，进而将技术和艺术相结合，才能设计出优秀的作品。

　　2.2 设计过程中的规律及表现。

　　2.2.1 设计的任务。

　　要设计出优秀的作品，不但要使页面具有一定的艺术性，同时也要符合用户的浏览习惯，使用户在浏览的过程中感到舒适。可以说，在浏览优秀的页面设计作品时，就像是在进行审美活动。但是，设计的主要目的是使受众接受设计者的意图，而并非一味在页面中融入艺术。

　　页面设计的主要目的就是利用艺术的方法将页面主题表达出来，使用户在感受到美的同时，实现页面的各种功能。由于各类网站的性质不同，导致受众不同，需要进行的设计工作内页也不相同。

　　在页面设计时，首先要明确页面的受众，进而确定页面需要实现的功能和任务。

　　2.2.2 设计的实现。

　　页面设计的内容主要可分为两个部分。第一部分是页面的整体规划，包括页面布局等内容，此部分需要将页面的草图以手绘的方式制作出来。第二部分需要设计软件以实现页面的各种功能，此部分的操作需要在计算机上完成。

　　另外，页面设计的基本要求就是要具有一定的创意。如果页面完全和其它页面相同或者类似，将无法对用户产生任何吸引力，同时也很容易造成用户的视觉疲劳。通常情况下，在页面设计的过程中，需要特点注意页面色彩的布局，使页面色彩对用户视觉造成冲击，吸引用户的注意力。

　　2.2.3 色彩的运用。

　　色彩在生活中具有重要的作用，不但会给人们带来美的感受，同时也会对人们的心理造成一定的影响。根据色彩心理学来讲，色彩会使人们联想到相应的事物，比如，在生活中，红色会特别引起人们的注意，在看到红颜色之后，人们会联想到喜庆的事物，通常情况下，在广告板、标识中都会运用红色作为主要色彩。黄色是一种柔和的光，但是光感却是最强的，看到黄色，会使人感受到辉煌、纯净的感觉。比如，古代的宫殿，都会以黄色为主色调，以显示帝王的威严。在自然界中，花朵的黄色是十分娇嫩美艳的，会使人感到清新自然。绿色介于黄和蓝之间，属于综合色彩，因此，绿色会给人一种平和、宽容的感觉，是一种比较受人欢迎的颜色。通常，人们看到绿色，都会联想到大自然，因此，绿色是一种欣欣向荣的颜色，具有美好的象征，同时，绿色也富有青春的气息。绿色通常被用来象征健康和大自然，在教育或者公益平台的网络页面设计中，都会大面积使用绿色。黑色可以给人们带来多种心理感受，包括神秘、沉重、寂静等，其中，黑色的运用范围十分广泛，可以和多种颜色搭配形成良好的视觉效果。

　　2.2.4 设计的原则。

　　页面设计不是根据设计师的灵感随意设计，而是需要遵循一定的原则。在设计的过程中，不管使用什么方式对页面的各个部分进行排列或者组合，都需要遵从连贯、分割、和谐、对比以及统一五个原则。

　　和谐原则指的是在页面的设计过程中，页面的布局和色彩的搭配需要满足人们的审美要求，各元素的展示要显的自然，给人以舒适的感觉。在设计页面时，倘若仅仅将色彩、图片、线条等随意组合，再将字符信息突兀的加进去，会给人以十分杂乱的感觉，同时页面也不会具有生命力。此外，实现页面整体的良好布局仅仅是和谐的最基本要求，要设计出优秀的作品，就必须达到和谐的更高境界，即使页面产生的视觉效果与人的视觉形成一种沟通，与用户的心灵产生共鸣。因此，页面是否达到了和谐的要求，是决定页面设计成功与否的关键因素。

　　2.2.5 设计的过程。

　　在对页面进行设计的过程中，首先，应当把文字、符合以及图片等内容的相互作用整合起来，形成一个信息束。其次，站在用户的立场考虑，设计的网页要以给用户提供便利为主要目的之一，因此，在设计时，应当分清内容的主次顺序，将内容有秩序的显现出来。合理搭配点、线、面以及色彩等元素，使设计出的页面具有美感。此外，采用在矛盾中寻求统一的方式，可以有效增强页面的视觉效果，对用户产生视觉冲击力。以导入页的设计为例：一般情况下，在网站的首个页面中都不会出现复杂的内容和色彩，只会显示网站的名字和链接，以此种方式设计出来的页面，会给人简洁精美的感觉，并具有缓冲用户视觉的作用，同时也会给用户带来一定的视觉美感。而主页是一个网站的门户，用户在浏览网络页面时，往往都以网站的主页面作为评价网站的标准，因此，在主页的设计中，必须符合醒目、简明的特点，加上一定的视觉冲击和艺术感，吸引用户的注意力，提升网站在用户心中的评价。

　　在个性化页面设计过程中，还要特别注意动态和静态两个类型颜色的合理搭配。一般情况下，页面中的标志、导航等都采用静态颜色的形式表示，而在页面中的部分页面中，由于需要显示过多的内容，需要多次更换颜色，通常采用动态颜色的形式表示。然而，颜色在变换时，很容易造成与周边颜色不协调的情况。因此，只有处理好动态颜色和静态颜色之间的关系，才能给用户带来良好的浏览体验。

　　在页面设计时，首先要确定网站的主题和任务，进而调查受众的心理特点和接受程度，并以此作为设计的依据，确保设计的页面内容符合受众的需求。

　　设计贴近生活的页面时，可以使用白色或者颜色较淡的自然风光作为页面的背景，而且不需要在页面中堆积过多元素。页面采用的主色最好可以给人以淡雅的感觉，且仅使用一种色彩作为页面主色，在处理画面时，尽量根据受众的心理特点，使设计的页面和用户心灵产生共鸣。此时，使用大面积的色彩对比是不必要的，虽然色彩对比具有突出信息的效果，但是，如果对比过于强烈，可以会因为视觉过于冲击给用户带来不好的视觉体验。在某种情况下，如果必须使用强烈的元素对比，可以尝试黑与白这两种颜色的对比。

　　最后，需要特别注意的是，就是页面的设计必须要符合受众的需求。不管是女性还是儿童类的网站，在页面时设计时，设计师都必须站在用户的角度充分进行考虑，根据用户的心理特点，在此方式下，才能确保网站设计在具有创意的同时，又不会偏离原有的轨道。比如，在女性用品网站中，通常采用优美、高雅以及质感强的图片作为产品的介绍页面；而在儿童用品网站中，通常采用可爱卡特的人物来装饰页面。

　　三、 网页设计中的视觉元素与运用。

　　3.1 文字的格式。

　　在网页设计的众多元素中，文字担负着传递信息的重要作用。

　　中华文化博大精深，在两千多年的历史传承中，我国出现了众多字体。而不同的字体，代表着不同的涵义。根据网站的内容，挑选出最为合适的字体，是网页设计成功的基础。最合适的字体指的是在确保能够明确传达信息的前提下，给人以美感，使用户感到亲切，且符合相应环境的要求。比如在对管理网站、电子商务网站、门户网站等网站的标题性文字进行设计时，需要使用具有醒目、大方等特点的字体，一般多采用宋体或者黑体。而对于服务类网站或者信息类网站时，设计的主要任务是能够体现此类机构的形象和品牌，因此，在设计标题性文字时，多采用奔放、独特的风格，在此情况下，一般多采用黑体或者创意字体。

　　因为受到网络媒体特性的限制，如果在网页中使用创意字体，可能会出现用户电脑不支持字体格式的情况。为避免此情况，在对页面文本进行设计中，使用的字体通常都是浏览器默认的格式。由于在对页面文本内容进行设计时，可以选择的字体仅有一种，无法实现创意性，因此，可以通过把文字布局设计为一个造型的方法实现创意性。通过创意设计，可以使页面中的文字内容富有生命力，是页面创意设计的重要手段之一。其中，文字模块设计可以选择静态和动态两种配置，而如何选择和配置，主要根据页面的视觉效果、信息的传递等因素所决定。

　　除了字体布局以外，字体的颜色、间距、大小等同样是文字设计需要重视的部分，对文字进行良好的设计和调整，可以使传递的信息更加清晰易懂。文本内容的编排是非常灵活的，比如，可以根据网站受众的年龄层，调整出不同大小的文字。对标题进行编排时，一般都是使用从大到小的方式，依次排列标题，当需要对某些文字内容特别强调时，可以通过增大字体的方式，达到吸引用户视线的目的。此外，可以根据实际需要，执行加粗、倾斜等操作，实现对字体样式的更改。通过改变字体的颜色，可以对文本内容进行分类或者突出主题内容，合理的搭配字体色彩，还可以使页面更加绚丽。

　　但是，在为字体增添颜色时，要根据页面的整体内容进行全面考虑，确保字体颜色符合页面的整体风格。对网页文字进行编排和设计时，要以准确表达信息为基础，以设计风格符合信息性质和特点为目标，而非一味的追求创意，导致设计风格和页面内容相背离。

　　3.2 图形与图像。

　　最开始的时候，人们只能在网络中看到文字，随着网络技术的发展，目前，各类图片也开始呈现在网络页面中。图片的表达效果要远远高于文字描述，而且生动形象的图片通常会给用户留下深刻的印象。通过运用图片，不但可以使页面内容更加清晰的表达出来，而且可以为页面增添色彩；但是，在页面中添加过多图片，或者不合理的色彩搭配，非但不会给页面增添色彩，还会使页面变的杂乱不堪，导致用户浏览体验降低。此外，图片所包含的数据非常大，用户在浏览页面时，需要一定的时间下载，图片才能良好的展示出来，当用户所在区域网络速度过慢时，可能需要几分钟才能显示一张图片，不利于用户的浏览体验。因此，在为页面添加图片时，只留下最具代表性的图片，删除其它不必要的图片，以此减少数据链。

　　将图片添加到网络页面之前，需要对图片进行一定的处理，使图片具有相同的格式和大小，并根据页面的整体风格，协调色调搭配，从用户的浏览体验出发，将图片放置在最佳的位置，以增强信息的传达效果。在图形设计中，要正确处理图和底之间的关系，首先要确定，图是主要的，底是次要的，为避免出现由于底的颜色过于亮丽导致图被遮盖的情况，使用虚化、模糊等方法对底进行处理。尽量选择与底颜色相近的图片进行搭配，并通过调整图片明度的方式，加强底与图的对比，突出图片的显示，减少色彩带来的视觉干扰。

　　3.3 动画、视频设计。

　　在网页设计的众多元素中，动画、视频具有极其重要的作用，通过良好的运用动画、视频，可以使页面内容富含活力，提高受众和页面之间的沟通和互动，将枯燥的文字内容以生动的语句和形态体现出来，改变了用户以往的浏览体验。随着网络技术的不断进步，页面内容仅仅以文字的形式显示，已经无法满足广大用户的需求。

　　因此，动态元素的设计顺应了用户的需求，使页面内容的传播更为广泛且具有亲和力。在网页设计中，通常采用 Flash 软件对动画进行制作。在网页中添加视频或者动画的主要目的就是为了营造出一种情感情感交融的环境，实现用户与网络的对话，释放用户的情感。

　　在浏览的过程中，使文字的静和图片的动有效结合，交相呼应，使用户处于一种轻松、舒适的浏览氛围中，与网络平台进行愉快的交流。

　　3.4 色彩的处理。

　　用户在进行网络浏览时，给用户带来最直观的感受和视觉冲击的就是页面的色彩，可以说，页面的色彩对用户的浏览产生极大的影响。因此，在页面设计时，合理的运用色彩，实现色彩搭配与整体布局的和谐。根据分析，在对页面的色彩进行设计时，应当满足以下要求：第一，对页面整体进行取色，即选择一种主色调，以主色调代表网站的主题，此种方式不但会给用户造成视觉冲击，同时还会给用户带来深刻的印象。第二，在选择背景的主色调之后，注意之后加入的色彩不能与背景色调形成过于强烈的对比，另外，在对两个色调进行对比时，要特别注意比例和搭配的问题。若在背景上放置面积过大的色彩时，一定要注意二者不能有过高的色彩对比，其次，还要注意不能有过多的色彩，否则会使页面的层次显的十分紊乱，同时也不利于信息的传递。因此，在选择背景时，尽量选择单一的色彩，或者比较简洁的色彩。当所设计的页面需要进行一定的变化以增强页面的层次美感时，应当以页面的整体基调出发，以确保页面整体的和谐为前提条件，以此寻求色彩的变化。事实上，在页面设计中，背景主要发挥了整合和衬托的作用，首先是对页面整体风格进行整合，进而衬托页面的信息内容。选择适当的背景，不但可以使整个页面更加具有吸引力，同时也能够使页面表达的主题更加明确。

　　四、 网页动态元素设计中多媒体与信息的表达。

　　4.1 多媒体的视觉要素。

　　为了实现最佳的信息传达效果，在页面设计时，通常会加入部分视觉元素，包括文字、图片、声音以及视频等，将视觉元素合理的布局在页面中，实现整体的和谐，以此吸引用户的目光。此外，为了使视觉传达功能达到最佳，使网络成为便于用户查找资料、浏览信息的信息传递载体，首先要对受众的心理特点和视线轨迹进行调查和研究，以此为依据，对网页中的各类元素进行合理配比，在实现创意的布局的同时，实现最佳色彩对比，不断推动用户与网络二者之间的沟通，提高用户的浏览体验。当前，在页面设计时，一直尝试运用四维空间艺术，使设计出的页面可以和用户的视觉、听觉以及心理方面的共鸣，给用户带来最佳的视听觉体验，并给用户带来愉悦、轻松、舒适的心理感受。

　　4.2 多媒体的视觉表现功能。

　　视觉传达设计的主要目的是为了提高信息的传递效果，但是，在设计的过程中，设计会受到媒体特性的限制。"视觉传达设计和媒体二者之间具有互动的关系，媒体在给设计提供基础的同时，也会给设计带来一定的局限；但是，对于设计来讲，媒体是限制，同时又是推动设计进一步发展的重要因素之一".随着时代的发展，用户的需要不断提高，传统的纸质媒体和电视广播等媒体的传播范围和视觉传达已经无法满足时代和用户的要求。在此背景下，网络页面设计师在不断提高页面美感的同时，还要切身感到用户的心理和特性，使设计出的页面符合受众的需求和浏览习惯。

　　目前，为了满足文化创新的要求，在视觉传达设计的过程中，通常都会加入交互性设计，使用户和页面之间、用户和用户之间产生交流，正是由于此种设计，为文化创新提供了更强的凝聚力和表现性，实现了页面的个性化设计和服务。通过交互性设计，使网络中的众多用户紧密的凝聚在一起。随着网络平台的日益发展，用户对个性化信息的要求越来越高，而视觉交互性传达正是符合了用户的这一需求，比如，部分界面上设计师通过调查受众的心理特点，将页面设计为用户心里期待的样式，从而提高用户浏览页面和参与页面互动的积极性。又例如，在大数据时代下，根据对用户浏览习惯等数据的分析，在页面中显示符合用户心理需求的元素。

　　视觉传达设计在满足用户心理需求的同时，也需要满足用户精神和物质两个方面的需求。当今是一个快速发展的时代，每一个人都面临着生活的压力，因此，页面需要采用一种全新的沟通方式与用户进行交流。在视觉设计方面，加入人机交互模式，比如，当前在部分购物网站中，设置了智能客服的功能，用户通过与智能客服交流，可以实现快速查找商品、售后服务等。可以说，优秀的多媒体设计可以使用户愉悦的进行网络浏览，带给用户一种全新的交流体验。虽然视觉设计中互动无法如人与人之间带有情感的沟通，但是，富有人性化的设计可以用户更好更快的融入互联网生活。

　　在多媒体设计中，设计师往往会利用各种方法，不断协调视觉传达的美感，以此提高信息的传递效果。但是，在视觉设计方面，若加入的设计元素过多，有可能会导致信息传递效果大大降低。因此，应当从形式和视觉传达两个方面入手，实现信息传递效果的增强。首先，利用形式美学法则，判断哪些视觉元素是主要的，哪些视觉元素是次要；其次，在利用视觉传递信息的过程中，不但要确保信息传递的准确性和清晰性，同时还要注意设计页面整体的和谐；在多媒体设计中，结合用户和视觉传播的特点，加入"人性化"设计，为用户提供更加广阔的交流平台。

　　多媒体动态设计艺术是一个新兴的学科，尽管发展时间不长，但是，已经形成了众多的设计特点。尽管在多媒体设计中，利用视觉传达设计可以为用户呈现出良好的浏览效果，但是，多媒体属于一个新的领域，对设计师来讲，应当不断吸收网络中的新知识，将新媒体的语言风格、技术以及表达形式相结合，设计出符合时代发展和用户需求的页面。