网页设计中的布局与配色技巧的研究

2023-12-21欧倍铭

电子元器件与信息技术 2023年8期

欧倍铭

岑溪市中等专业学校，广西岑溪，543200

0 引言

近年来，随着互联网的飞速发展，网页设计逐渐被人们认可。它是网页设计者根据设计的目标和要求，根据时代、可用的技术和设计经验，有意识地进行网页设计的创造性思维。因此，网页设计是艺术设计的重要核心。网页设计逐渐随着网页技术的发展而进入人们的视野，从字面上看，网页设计就是对网站的布局及色彩搭配的一种设计手法，但其实网页设计不单单是一种设计手法，而是艺术与技术的高效结合[1]。简而言之，网页设计的主要特征为：集成性、交互性、多维性、不确定性。这些功能不仅为用户提供了便捷的信息，也让用户在浏览网页时有更多的机会与网站进行互动，这对网站设计人员掌握网站的布局和颜色定制水平提出了极高的要求。

1 我国网站外观及色彩设计状况

在我国，网页设计以一个新兴的领域逐渐被人们认可。同时，涉足这一领域的设计师越来越年轻化。在市场环境的推动下，不可否认的是我国的网页设计水平确实取得了长足发展与进步，但也可以看到我们的网页设计普遍存在几点问题。一是盲目抄袭、模仿、原创观点不强等，亟待提高从业者素质。鉴于网页设计的理论研究和教育还处于刚刚起步阶段，网页设计领域缺乏高素质的从业者，各种网站模仿国外的网站布局，此外，当使用现成的直接创建的网站模板时，网站的设计可能相同或大致一样。在我国，大部分设计师很少主动去关注客户的需求，也很少在设计网站之前做市场调研。二是仅关注页面的设计，而不重视用户体验。虽然，网页设计是平面设计的一部分，但它与经典的平面设计不一样：不但要做到视觉传达，网页设计还需要受众的参与，简单的屏幕演示是观看的目标。从某种意义上说，网页设计师不单单要掌握平面设计方面的有关知识和技能，还需洞察浏览者的心理反应和行为进行设计，这样设计的网站不仅视觉效果极佳，而且导航和操作也非常舒适。然而，国内对网络用户体验的研究还很少，网页设计师通常将布局设计和颜色匹配视为整体网页设计的一部分，并认为如果网页设计“漂亮”，那么它就是一个好网页。当谈到浏览者如何浏览网页时，如何操作没有太多的关心和研究，最终的结果是，虽然页面看起来很棒，但是页面查看者找不到页面记录，也无法返回主页。三是技术过硬而艺术较肤浅。一个完美的网站是技术与艺术二者相结合的产物。目前，信息技术和多媒体应用的快速发展，越来越多的元素和特效可以应用到网站中，网站的内容不仅包括文字和图像，还包括使用特效传达信息等。但是，如果将网站内容割裂开来，一味地用特效来体现技术，就会成为技术应用的死胡同，是达不到效果的。四是网络技术的使用不合理，不但页面加载速度会减慢，而且还会影响观众的情绪。

2 组成网页的几大元素

2.1 文字是网页的第一个元素

文字是最重要的组成元素。随着受众审美品位的提高，网页版式中文字的设计者越来越注重字体密度、媒介变化、字体设计和文字颜色。虽然网页上文字的字体受到计算机系统字体库的限制，但是可以用图像来表示文字。字体的特殊排列和特殊字体的使用往往能产生意想不到的效果。上传文字时，同时需了解文字在页面中的影响，首先考虑文字对网页起到点缀美化、字幕性还是文字性的作用，不同类型文本的排版应相应调整。

2.2 图像是网站设计中重要的部分

最早的网站受技术影响，只能使用纯文本进行布局。渐渐地，HTML规范对图像的支持和宽带的普及，网页设计中越来越多地应用图像，图像的使用可以使网站更加生动和美观。

2.3 超链接是网页的重要组成部分

超链接允许链接到其他网页或网站的元素。在网页上，超链接的目标可以是网页上的文本或图像。当用户单击链接的图像或文本时，链接的项目将显示在浏览器中，并根据项目类型打开[2]。

3 网站布局结构

3.1 传统的“T”型布局

“T”型布局结构是大部分网页所使用的布局。网站的主徽标位于左上角就是此结构的最常见布局，而且顶部中心的大部分被导航占据，辅助导航或重要提醒出现在左侧。右侧是页面的主体部分，出现了很多信息和用途，信息的传递也进行了合理的划分。

3.2 上下对照式布局

受“极简主义”设计理念的影响，设计者创造了一种更直观的自上而下排列的对比结构。在组织页面内容时，此类模型通常会选择更直接高效的图形和简洁优雅的文本布局。

3.3 对称排列布局

左右对称结构的优点是内容相对集中，设计效率区域化，鲜明的视觉符号对读者记忆起到重要作用，也保证了所看资料的完整性和规范性。同时，左右对称的布置也能营造出对称的美感。

3.4 文字型布局

网站版式设计中有很多误区需要改正，其中最主要的就是对文字的误区。文字是最基础的设计工作，对于文字的把握能力决定了一切。对于一些特殊的页面，有必要摒弃“图片重于文字”的观念。

3.5 氛围式布局

网站设计的目标一直是让浏览者能够以越来越个性化的方式查看内容。渐渐地，随着宽带的普及，以及Flash技术在网页设计中的应用，浏览者重新掌握了对网站的更多控制权。氛围式布局满足了浏览者这一需求。

3.6 储物箱布局

网站排版一直有几个独立的先驱。他们的一些网站具有创新性，另一些则在试验特殊布局。“储物箱”的排列没有固定的规则。文化环境与艺术信仰息息相关。尝试这种布局设计可能会让一些观众望而却步。

3.7 复杂型布局

有吸引力的布局结构通常是通过将不同的基本布局形状与特殊形状相结合来创建的。专业的网站布局能从不一样的布局中挑选合适的布局进行拼凑；但是非专业的网站布局仅仅局限在白页上机械地排列元素。

4 网站设计规则

4.1 网站类别

不同类型的网站都要遵循一定的规则，才能得以发展。比如门户网站，大家看到门户网站就会想到，由于T型布局结构是大部分浏览者所喜欢的布局格式，在设计网页时这点也是要考虑的，这样才能得到浏览者的关注。如果使用非传统的网站设计，肯定会吸引更多的关注，但太新了，浏览者不会停留在页面上，所以这类网站应注重功能和内容。

4.2 网站内容

影响网页外观的因素有很多，而内容页面就是其一。虽然某些布局具有视觉吸引力，但这些视觉吸引力页面通常由传达有限信息的大图像或图形组成，比如表格页面能够传达的信息非常有限。比如简单的布局，而有些页面的布局多为文字和图片或图形，这种情况很少见，布局是一个大考验。因此，在考虑采用何种页面布局时，首先要根据页面所要表达的信息以及内容而进行设计和编写，之后才能依据信息和内容进行相应的页面布局形式。

4.3 网站的网民

网站作为信息的传递者，浏览者的体验是网站创建者在选择布局格式时必须考虑的对象。不同年龄段的浏览者对网站布局的感知不同。例如，传统“T”型布局更容易被一些岁数偏大的浏览者所喜欢，因为此类页面布局更贴近我们生活中的杂志、报纸和其他传统媒体。年轻受众更喜欢单独的页面布局，例如剪贴板布局或字符样式布局。因此，我们在设计页面布局的时候，需要对网站的要点进行考察和研究。

5 网站颜色

自然界的颜色有很多种，比如玫瑰是红色的，大海是蓝色的，橘子是橙色的。颜色基本上可以划分为彩色、非彩色，而非彩色主要以黑、白、灰为主，其他颜色都是彩色的[3]。而每种颜色又具有三个属性：纯度、色相、明度。色相是指颜色的名称。它是颜色最基本的特征，也是颜色与颜色之间进行区分的重要因素。明度即亮度，颜色随着亮度的提高而越来越浅，反映颜色的明暗程度。亮度越低，颜色越深。这主要用在一些游戏页面上，充满神秘感。纯度即颜色的清晰度。纯度越高，色彩越鲜艳，纯度越低，色彩会暗淡、无光。零售店经常使用暖色来反映范围广泛的产品，而在儿童建筑中则经常使用暖色来传达能量和温暖。建筑、博物馆网页大部分运用冷色系，来衬托其庄重、严肃的气场。

6 网页配色技巧

网页配色是一项具有技术能力的工作，而且在技巧的运用上尤为重要。所以，网页设计者在进行网页设计时，结合网页的特点的同时还要遵循色彩搭配的规律，在此基础上，才能设计出色彩鲜明、独树一帜的网站。

在网页上只使用一种颜色会显得单调，但在网页上使用所有颜色会显得轻浮和华而不实。网页色彩搭配应具有特色，才能别出一格，加深浏览者的印象。网页设计是平面设计的一部分，但又不同于平面设计。根据艺术规律，人的生理特征也被考虑在内，色彩搭配一定要恰当，才能保证和谐舒适。使用单一或复杂色彩会使眼睛疲劳[4]。

在确定主题色时，需要考虑其他颜色与主题色的关系，以及选择其他颜色时想要达到的效果。根据效果，决定哪个因素占主导地位。一是何为相似色，相似色就是两个相邻的颜色，如紫色和蓝色、黄色和橙色、灰色和白色等。通过在网站设计中使用相近的颜色，可以避免颜色混淆，给人以愉悦自然的视觉印象，容易达到页面的和谐统一。二是何为互补色，互补色是两种相反的颜色。比如黑色和白色。互补色的灵活、巧妙运用可以显示重点，塑造浓烈的视觉冲击。设计以一种颜色为主，互补色为辅，以达到最终的效果[5]。白色是网站上最广泛应用的一种颜色。许多网站甚至留下了很大的白色空间，作为网络的一部分，它是空白艺术。空旷的空间给人以想象的空间，让人心情舒畅。大自然向我们展示了一个多彩的世界，美丽的色彩设计充满活力，能牵动浏览者的情绪[6]。