浅析网页设计中的结构美

浅析网页设计中的结构美

摘要：随着互联网技术的发展，网页设计也进入发展阶段，各样样式的网页开始呈现在人们眼前，同时也将它们自身的一些缺点与问题暴露了出来。这些问题干扰了网页的视觉美感，降低了设计的审美价值。通过对网页形式美和功能美的分析，将栅格设计融入到网页设计之中，它对网页的设计起到规范与约束的作用，能够提升网页设计的审美性。

关键词：网页设计；视觉美感；审美价值

一、网页设计美的标准

对于美，每个人都有不同的标准，但是我们衡量一个事物的美丑不能只看外表。比如，一个真正美的人不单单是指外貌美，更重要的是指心灵美。网页设计亦是同样的道理，那么怎样评价一个网页的美丑呢？

从审美性上讲，一个优美的网页首先要有好看的界面设计，网页属于瞬间艺术，当浏览网页的时候浏览者首先看到的是网页的界面设计，因此网页的“外貌”首先要吸引人的注意，使人们看着舒服，看着美。同时现阶段人们随着人们对网页设计重视程度的加大，设计师逐渐将字体设计、版式设计以及配色艺术等多种视觉语言应用于网页设计，使网页的界面设计更加美观。另外从功能性上讲，一个美的网页设计首先在功能上利于人们的阅读，具有科学的、合理的、符合人体工程学的视觉流程，能够使用户能够轻而易举的获取信息。新的科学技术、新的计算机编程语言相继被应用于网页设计中，使网页设计的交互性不断加强，人们在获取信息的同时也能够感受到人机互动带来的触觉、视觉双重感受，增加了网页设计的趣味性。

通过以上可以看出，美的网页设计不仅在形式外观上要能够取悦人心，在功能上还能准确有效的传播信息。因此只有兼备外在形式美与内在功能性的网页才能称之为美的网页设计。

二、网页设计面临的问题

通过实践与教学在具体网页设计过程中经常遇到的问题大体可以分成两大类：

（一）视觉引导性弱。造成这样问题的主要原因是页面内容的失控，没有分清主次，想要传递的内容太多太庞杂，没有处理好信息之间的关系从而造成了大量文字、图片等构成元素的堆积，而忽略了整体条理性。同时没有设计章法与秩序对它们进行约束，导致页面的布局的混乱，从而影响浏览者的阅读。

（二）设计细节。第一种是只顾及内心感受，只凭自己的感觉设计，缺少理性思考，没有细节处理。无论是图片质量、字号字体还是颜色搭配，处处都能体现出网页设计的细节问题。第二种，过于在乎细节，将细节当成主要设计元素尽享处理，喧宾夺主，忽视了基本功能，这些过多的细节装饰打破了页面整体布局的统一性。

在网页设计中，大部分设计人员只重视表达网页的表面视觉效果，而忽略设计支撑网页的骨骼框架，才使得现如今很多网页在设计上出现以上问题。

三、栅格设计

15世纪法国的数学家尼古拉斯加宗成功将几何网格与字体设计相结合，这就是栅格设计的雏形。之后人们将这中设计方法运用到平面设计中，直到现在栅格设计在平面设计中仍是一种非常普遍的设计方法，而网页的栅格是从平面栅格

系统中发展而来。

在日常生活中我们看的书籍、杂志、报纸，很容易发现它们的内容被限制在一定的方格内，整个版面具有很强的秩序感，之所以出现这样的视觉效果完全是因为版面设计时运用了栅格设计。栅格设计又称栅格设计系统，它是利用规则单位矩形来规范、约束版面上的内容从而起到规范网页内容的作用，它可以充分的体现出网页设计的结构美。

栅格设计之所以能够被广泛的应用是因为它能够使设计作品呈现出清晰的脉络，简约的结构，同时也能起到突出中心与重点，起到引导视觉的作用。由此可以看出栅格设计能够在网页中起到支持起整个网页页面，可以说是网页页面的骨骼，因此我们将栅格设计也作为网页布局的理论支持。

那么怎样利用栅格设计对网页进行布局呢？栅格设计具有一定的设计方法，大体可以概括为两种：一种是单元格的加减法，另一种是栅格填补法。

（一）单元格加减法。

顾名思义，就是将网页事先做一个大体布局，而后根据具体内容的需要，对单元格进行相应的合并或拆分，从而使网页达到视觉上的和谐。单元格加减法使栅格设计优势得到充分体现，它具有极强的布局灵活性，但是不同的设计元素具有不同的组织方法也不相同。

1、单纯文字加减法，文字的加减的对象是文字与页面空间，它是在栅格的作用下，运用文字对页面进行划分，从而使人们可以轻松的感受到文字的秩序美。栅格的数量不宜过多，过多会使页面元素分散，失去整体感。

对文字的编排，应该考虑视觉流程的设定。文字的字号行距设置要适中，，同时文字的排列长度不易太宽，以方便阅读为准。

2、单纯图片加减法，他是根据栅格进行操作，可以是单张的加减，可以是多张的加减。但要切记图片不要太多太杂，风格色调要统一，还要把握全局，突出核心信息。

3、文字与图片加减法，当文字与图片共同存在于页面中时，要根据需要有所侧重，视觉流动性要强，思路要清晰。文字与图片的搭配要统一协调。另外在图片的选材上，图片质量好的图片在网页设计能够提升网页的审美性。

（二）栅格填补法

栅格填补法就是将我们设定好的栅格固定不变，将所需要的内容机械的填充到对单元格空白区域。这种方法的优点就是能够直截了当的传递信息，主题更直接更明了；缺点是无论是文字还是图片都不宜过于复杂，以简约为主。

栅格设计在网页中应用的很灵活，在具体网页设计时还要根据具体情况制定栅格设计的方案，只有这样才能使栅格设计的灵活性得到完美的发挥。

栅格设计是网页设计的灵魂，是网页设计结构美的核心所在，栅格的好坏直接决定了网页的优劣，那么如何才能设计出一些审美性高与设计感强的栅格呢？

在艺术史上，埃舍尔的画可以用数字计算，巴赫的曲子可以用数学公式推导，还有柯布西耶的设计理念，也融合了几何学的创新理念，可以说数字创造了艺术的奇迹。诺瓦利斯曾说过“数字是最高的艺术形式” 当设计运用到数字或是数学的时候，设计的严谨性与逻辑性就随之出现。栅格设计中比较典型的分割方法是黄金分割与根号矩形，两者在栅格布局中被普遍认为是比较美的比例。

1、自然界中的事物符合1:1.618的为都属于黄金分割比。黄金分割比是被公认为是最和谐，最完美的比例。黄金分割比合理的运用到栅格设计中能够构建出比较美的网页结构框架。