试论网页设计中的版式设计

金文玥 邓岳辰

摘 要：版式设计是网页设计的关键环节之一，现代互联网的快速发展和广泛应用，使相关设计工作得到了广泛重视。基于此，本文以网页设計中的版式设计作为分析重点，分解就网页设计中版式设计的原则和方法展开分析，给出引导性、美观性、功能性三大原则，以及内容布局明确、色彩搭配合理、多元素的综合应用等具体方法，以期通过分析明晰理论，为后续具体工作的开展提供参考。

关键词：网页设计；版式设计；内容布局；色彩搭配

前言：版式设计（Format design）是视觉传达的重要手段，是指设计人员根据设计主题和视觉需求，在预先设定的有限版面内，运用造型要素和形式原则，根据特定主题与内容的需要，将文字、图片、及色彩等视觉传达信息要素，进行有效组合排列的设计行为。版式设计已经延伸到网页设计（web design）中，成为影响后者效果的核心因素。本文针对网页设计中版式设计的原则和方法进行分析。

1.网页设计中的版式设计原则

1.1引导性

版式设计对网页设计的影响体现在多个方面，为求有效发挥版式设计价值，首先需要强调其引导性。由于大部分网页内容往往是多样的，用户进入网页后，不可能同步接受所有服务、接触所有内容，这意味着网页必须带有引导性，使用户能够清晰的进入对应通道。如知名搜索引擎谷歌，只在页面中央位置放置一处搜索栏，用户能够得到十分有效的引导，交互性极为突出，至今被认为是网页版式设计的经典之作。其他网页的版式设计也应遵循引导性优先原则。

1.2美观性

美观性是现代网页设计的基本要求，这也和版式设计密切相关。现代互联网产业发达，网页几乎存在于生活中的每一个角落，如用户尝试通过网络商城购买某种商品，当进入某一网页时，网页内部杂乱无章，布局混乱，产品色彩、外观等图片质量较差，用户很可能快速丧失购买兴趣。反之，如果网页版式设计合理，条例清晰、色彩搭配得到，用户在感官上不会产生抵触情绪，更愿意进行商品挑选和购买，美观性在版式设计中的价值可见一斑[1]。

1.3功能性

功能性是网页设计中版式设计的基本要求，也是版式设计的核心追求。所谓功能性，是指通过版式设计能够将网页的核心元素突出表现出来，同时将其他附属元素、功能元素分布在合理的区域。如进入某游戏网站首页，该网站的中央位置，为“游戏下载”，也即网站的核心功能模块，用户可以在不经仔细观察的情况下一瞬间发现该模块，在“游戏下载”模块周边，则包括“账号注册”、“官方活动”、“游戏商城”、“职业介绍”等内容，主次搭配合理，版式设计也较为成功。

2.网页设计中的版式设计方法

2.1内容布局明确

网页设计中，版式设计的基本方法是内容布局的明确，在设计的过程中，使不同功能模块占据不同的区域，有利于使用者快速获取服务，提升交互性。如某医院门户网站建设，在布局上，中央位置可设计为医院最具吸引力、能力最强调的某个部门介绍，假定医院善于治疗眼科疾病，可在版面设计时，于中央位置放置醒目广告“XX眼科，一流技术”等，周边位置则放置患者回馈信息、医院介绍、服务热线、在线咨询等内容和入口。存在需求的用户进入网站后，由于网站布局明确，用户可以得到有效引导，快速得到服务。如果在中央位置放置医院介绍，看似并无不妥，但由于网页信息复杂，患者进入网站后，无法有效甄别网站尝试表达的核心信息，版式设计实际上是失败的。内容布局的明确，可看做是网页设计中的版式设计的基本方法。

2.2色彩搭配合理

色彩搭配是网页设计中的版式设计的附加要求，主要强调通过有机组合引起使用者的兴趣，使网页的重点内容得到突出。色彩搭配的基本原则是主色调的统一和个别区域的特异性变化。所谓主色调的统一，是指板式设计的过程中，总体色彩一般不宜存在复杂变化，以免用户产生眼花缭乱的感觉，同时，如果网页采用冷色调，应保持内部的基本一致，如果出现色彩变化，必须是合理的、必要的，也即个别区域的特异性变化。如网站尝试介绍某款产品，底色为摆设，该产品所在区域，板式设计可以为红色、黑色等醒目颜色，用户能够在进入网站的一瞬间被产品所在区域吸引，网页尝试表达的主题也能借此得到突出[2]。

2.3多元素的综合应用

网页设计中的版式设计，并不是僵化的、结构化的，与传统纸媒相比，网页的特点之一是能容纳更多的元素，这为版式设计提供了更多的可操作空间，如动静元素的综合应用。静态元素包括文字、普通图片以及颜色等等，主要传递基本信息；动态元素包括交互部分、动态图片和小视频等。在网页设计中，可以版式设计作为手段，利用动态元素传递核心信息，如游戏宣传网页，将宣传视频作为动态元素，展示游戏的核心卖点，用户可以被该元素吸引，即便网页内容复杂多样，动态元素依然可保持自身吸引力。游戏介绍等内容，则以静态元素表达，作为宣传视频的辅助，提升版式设计效果。

2.4明确受众群体

不同网页的受众群体不同，这要求网页设计、版式设计必须遵循用户导向基本原则。很多失败的网页、版式设计，都是因为过多考虑了设计者感受，无法起到强化功能性的基本作用。如某网页为购物网站，主打产品为婴幼儿用品，设计上应强调表达产品的突出功能，利用大版面展示益智玩具对幼儿的智力开发作用、奶粉的营养价值等信息。如果设计者以自身需要为视角，可能导致版面展示内容偏离主题，过多展示产品而非产品价值，这种设计同样是不成功的。应考虑受众的心理需要，给定自身产品的优势，才能使网页和版面设计具有积极价值，如在展示益智玩具时，搭配儿童考试得分100分、创造了更具想象力的图画等等，用户可以直观感受到产品的价值，而且能够定向了解“产品价值”来自网站宣传的日益玩具，版式设计的作用得以实现。

总结：综上，网页设计中的版式设计与纸媒不同，需要发挥其自身优势，基本原则包括引导性、美观性、功能性。以上述原则作为框架，进行版式设计，还应强调设计方法的有效性。考虑到网页本身特点，应做到内容布局明确、色彩搭配合理，同时做好多元素的综合应用，提升板式设计的灵活性，针对受众群体做好分析，也能保证版式设计的合理性和吸引力，提升版式设计、网页设计的总体效果。

参考文献

[1]刘梦琪，史启新.网页设计中版式编排的视觉传达研究[J].赤峰学院学报（自然科学版），2014，30（11）：26-27.

[2]刘石，李婷婷.网页设计中的版式设计——CDIO模式下以项目为导向的网页设计课程教学实践[J].艺术科技，2014，27（02）：109.

（作者单位：大连工业大学艺术与信息工程学院传媒系）