2022年美学原理在网页设计方案中应用 .pdf

个人资料整理仅限学习使用美学原理在网页设计中的应用唐一鹏福建信息职业技术学院，福州 350003）摘要当代网页设计师除了掌握相关的Web技术外，还应具备一定的艺术修养。这样才能做出美观而又实用的网页。笔者从美学原理的角度出发，探讨网页布局、导航及LOGO 的设计。关键词色彩；布局；导航；LOGO引言网页设计是一门新兴的边缘性的行业，在网络产生以后应运而生。当点击到网站时，首先映入眼帘的是该网页的界面设计，如内容介绍、按钮摆放、文字组合、色彩应用等等。这一切既是网页设计的范畴，也是网页设计师的工作。好的网页布局应该是把美学原理合理地融入到技术中去，为此，谈谈个人在这方面的认识。一、认识色彩色彩的魅力是无限的。信息时代的快速到来，网络也开始变得多姿多彩。因此色彩在网站设计中占据相当重要的地位。设计者不仅要掌握基本的网站制作技术，还需要掌握网站的风格、配色等设计艺术。1.1 基本概念自然界中色彩虽无以计数，但最基本的有三种 红、黄、蓝），其它的色彩都可以由这三种色彩调和而成。我们称这三种色彩为“三原色”。任何一种彩色具备三个特征：色相、色度和色纯。色相，指的是色彩的名称。这是色彩最基本的特征，是一种色彩区别于另一种色彩的最主要的因素。比如说紫色、绿色、黄色等等都代表了不同的色相。同一色相的色彩，调整一下亮度，或者纯度很容易搭配，比如，深绿、暗绿、草绿、亮绿。色度，指的是色彩的明暗程度。明度越大，色彩越亮，比如一些购物、儿童类网站，用的是一些鲜亮的颜色，让人感觉绚丽多姿，生机勃勃；明度越低，颜色越暗，主要用于一些游戏、探险类网站，充满神秘感。有明度差的色彩更容易调和。如紫色 #993399 ）与黄色#ffff00），暗红 #cc3300）与草绿#99cc00），暗蓝 #0066cc） 与橙色的方法。基本上，一页显示不超过三屏，除非你肯定站点的内容能吸引大家拖动。2. 页眉页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。页眉是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页眉常放置站点名字的图片和公司标志以及旗帜广告。3. 文本文本在页面中都是以行或者块(段落 的形式出现，过去因为页面制作技术的局限，文本放置的位置的灵活性非常小，而随着DHTML 的兴起，文本已经可以按照自己的要求放置到页面的任何位置，但要做到布局得当。4. 页脚页脚和页眉相呼应。页眉是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。5. 图片图片和文本是网页的两大构成元素，如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。6. 多媒体除了文本和图片，还有声音，动画，视频等等其它媒体。虽然它们不是经常能被利用到，但随着动态网页的兴起，它们在网页布局上也将变得更重要。2.3 网页布局的构思网页布局构思的方法有两种，第一种为纸上布局；第二种为软件布局。1. 纸上布局法许多网页制作者不喜欢先画出页面布局的草图，而是直接在网页设计软件里边设计布局边加内容。这种不打草稿的方法是很难设计出优秀的网页来。所以在开始制作网页时，要先在纸上画出页面的布局草图来。2. 软件布局法如果你不喜欢用纸来画出你的布局意图，那么你还可以利用软件来完成这些工作。这个软件就是Photoshop 。Photoshop 所具有的对图像的编辑功能用到设计网页布局上更显得心应手。不像用纸来设计布局，利用Photoshop 可以方便地使用颜色、图形，并且可以利用层的功能设计出用纸张无法实现的布局意念。三、导航导航栏能让我们在浏览时容易地到达不同的页面，是网页元素非常重要的部分，所以导航栏一定要清晰、醒目。3.1 导航栏的位置一般来讲，导航栏要在“第一屏”能显示出来，但是有时第一屏高度可能会小于435px，基于这点考虑，那种横向放置的导航栏要优于纵向的导航栏。3.2 第一屏所谓第一屏，是指我们到达一个网站在不拖动滚动条时能够看到的部分，在800*600 的屏幕显示模式( 这也是最常用的下，能看到的部分为 778px*435px 。第一屏当然要放最主要的内容，据大量的调查显示，最醒目的位置为屏幕的右上方。3.3 篇幅将篇幅过长的文件分隔成数篇较小的网页能大大增加界面的亲和性，但在导航按钮与超链接的配置上，网页设计者则要做更细心、更周全地安排：结构合理、标题清楚、导航方便。四、Logo 设计Logo 指的是网站标志，常用的工具软件有Photoshop ， Coreldraw ， Illustrator和Flash等。灵活运用美学原理中的比例、对比和重复可以设计出精美的Logo。4.1 比例精选学习资料 - - - - - - - - - 名师归纳总结 - - - - - - -第 3 页，共 5 页个人资料整理仅限学习使用在牛津现代高级英汉双解词典中是如此对“比例”定义的：一物与他物在量、大小等方面的比率；部分与整体的关系。早在希腊与文艺复兴时代的建筑家就开始找寻一个“理想的”比例规则，其中最出名的就是图 1 所示的“黄金分割”。图 1 随着现代人审美观念的改变，纯数字的“黄金”比例已不再是放之四海皆行得通的标准；而且现代电脑技术的发达，使得我们可以轻易设计出复杂异常的形体与颜色，它们的交互影响又直接影响到物体比例的感观。因此对于比例的考虑，应将注意力更多地放在外形，可见性与突出性上面。“比例”最重要的原则是遵循客观规律，文字比例要使得其易读，形体比例要使得它不会变形而且特色突出。事实上，只要有可能，无论什么时候我们都要找到作品中各个元素的相互关系，尽管它有时并不明显。如果能将两个完全不相称的元素安全地变换成一个固定的比例，如一样大或者成倍数关系，那就值得去试试。如图2：图 2 在日常设计中，决定比例规则的工作常常分成两部分：先是尽可能全面地查找作品内部的所有元素；然后找出它们之间的关系并为它们定身制作比例标准。4.2 对比比例常常针对着尺寸大小，而对比则可以针对于各种属性，如颜色、大小、形状、字体、纹理，等等，没有一件事物不具备对比性。只要你静下心来认真进行比较，将会惊奇地发现那些外表相似的物体竟然还有如此丰富的对比因素。不少人只是简单地将它们进行孤立看待，实际上所有的对立显示了不同程度的连续性，而正是这些对立程度的选择，往往是区别一位设计高手与业余设计者的标准！通常对比突出的并不是组件本身，而是组件彼此的关系与它们要传达的交互信息。如图 3 中的对立因素的连接点在“RWC ”三个用于表达中心意思的字上；而对比因素就很多了：背景层尺寸较大，并有虚化效果；前景层小一些，色泽更暗；背景层用小写字体而前景层使用大写字体；背景层中的“W ”是处于升格而前景层中的“W ”处于降格；字体色彩不一致。这些正是由于多种对立面的分散锐化，使整个 LOGO 从矛盾中显得异常协调！图 3 将对比概念应用到LOGO 设计中，可以这样认为：1. 形体的对比，包括大对小，水平对垂直，方形对圆形，等等。2. 色彩的对比，包括色相，饱和度与亮度的对比，等等。3. 字体对比，包括字型，大小写，尺寸等的对比。由于字体发展不平行的特性，使得我们很难在同一个LOGO中应用两种完全不同风格的字型，因此常常在大小写方面做文章。4.3 重复跟对比强调组件的联系一样，重复并不是旨在突出组件的鲜明，而是用以强调一种发展趋向，一种变化顺序。这也从另外一个意义上暗示我们：重复物件最好按照一种线性流程进行定位，或者是直线，或者是曲线，或者是一种较为复杂的交互线程。在图5 中三个多边形按照弧线定位，重在表现一种对称性。精选学习资料 - - - - - - - - - 名师归纳总结 - - - - - - -第 4 页，共 5 页个人资料整理仅限学习使用图 4 图 6？又给我们指明了另一种定位规则：一般地，重复组件用于表达一定的发展趋向，而且每个组件又有自己比较鲜明的特点，用上面的对称或弧线定位难于传送合适的趋向意识。因此我们采取简单的直线线程定位方式。图 5 结束语作为一名网页设计人员，除了掌握技术知识，还要具备较高的审美能力和文化素质，结合时代的发展，把运动的观点融入到网页制作中去，这样做出来的网页才能够使网友们觉得亲切，更好地被人们所认可。对于这门新兴的边缘性的学科，对我们每一个从事网页制作的人来说都应该牢记“探索是无止境，学习无归期”，时时做一个生活的有心人，只有这样才能使自己的作品富有生机。参考文献1 张玉祥 . 色彩构成 M. 中国轻工业出版社，2004. 2 蓝先琳 . 平面构成 M. 中国轻工业出版社，2004. 3 张帆 ,罗琦 . 网页界面设计艺术教程M. 人民邮电出版社，2004. 精选学习资料 - - - - - - - - - 名师归纳总结 - - - - - - -第 5 页，共 5 页