机械类产品的网页设计研究

耿娟

摘要：机械类产品的网页设计主要包括网页的格式结构、网页用色、网页文字、网页图片四部分，只有这四部分相互协调、相互统一，才能突出机械类产品的高质量、高精度，才能更好的在网页上为机械类产品做宣传。

关键字：机械类产品 网页设计 格式结构 网页用色 网页文字 网页图片

机械类产品的网页设计主要包括网页的格式结构、网页用色、网页文字、网页图片四部分，接下来就从这四部分分别进行设计。

1机械类产品网页的排版结构设计

机械类产品的网页排版结构设计主要包括网页格式排版和均衡对称结构。从整体设置好网页格式的结构，再在每一部分进行详细制作。网页结构首先是从整体到具体，在从具体到整体。使得结构之间有联系，不是孤立存在的。

1.1网格式排版

因为机械类产品属于比较注重使用价值，注重理性化的信息。所以在网页结构排版中，一般采取网格式排版，这样能够显示出机械类产品理性化的信息，在排版中可以先用表格将每部分详细的内容分块，然后再单独制作每一块内容。制作中先从整体到局部，再从局部到整体，将整个页面结构贯通起来。在网页排版中一般用表格里面套表格的方法把网页的每部分都排好，最后在预留的单元格内将图片、文字放入。针对图片、文字的特殊效果用css样式解决。

1.2均衡对称结构

在机械类产品的排版中，为了凸显产品高品质，一般采用比较经典的结构，即均衡对称的结构。均衡对称分为两种，一类是左右中轴对称，另一类是左右均衡但不一定对称。对于中轴对称结构是比较正式、严肃的。可以针对于大型的机械类产品的网页采用中轴对称的方式。均衡结构可以在小型机械类产品的网页中使用，可以在网页中感觉到小型机械类产品的灵巧性、生活化，不再是冷冰冰机械的感觉。

2机械类产品网页设计中用色

机械类产品网页设计中用色主要包括主网页设计用色、子网页设计用色两部分，两部分的颜色要在整体上保持和谐统一，具体各部分要求要有各自特点，在统一的大前提下，要有不同，达到和而不同的视觉效果。

2.1主网页设计用色

机械类产品主网页用色可以选择比较稳重的一些颜色，尽量避免使用大红大紫等高纯度、高亮度的颜色。高纯度、高亮度、高明度的颜色显得比较激进，对于艺术类网页主题的设计还是比较合适的，对于机械这一类的理性产品不太适合，会给人心理上一种机械质量品质不高的心理投射。在主网页设计用色中还要考虑到与产品主图的相互呼应，与产品标志之间的主次关系，与网页中文字的关系。一般主页的颜色能够突出主图，不影响文字阅读，使得标志显著，能与内容页保持完整性，颜色最多不能超过4种颜色，要在整体统一中有变化。

2.2子网页设计用色

子网页的用色很大部分取决于主网页的用色，因为要保持整体统一性，所以子网页受主网页已经有的颜色的限制，不能随便用色，可以采用色相同主网页相同的颜色。在明度、饱和度上适当给予调整，使得使用者一看就能判断出主网页和子网页。子网页的颜色自然要能突出子网页宣传的机械产品，使得子网页内部文字阅读清晰。

3机械类产品网页设计中文字的应用

机械类产品网页设计中文字包括首页菜单标题文字-般标题文字、内容文字三部分。文字呈现给浏览者的时候要有主次之分。要有重点的呈现在观众的视角里，符合人的阅读流程。

3.1首页菜单标题文字

首页菜单标题文字可以采取正文的颜色或者色相相同的颜色，也可以采取和首页背景色相差比较大的颜色，这样便于文字的阅读。一般网页背景色偏暗一些，文字就用亮一些的颜色，网页背景颜色偏亮，文字就用偏暗的颜色，这样是为了增加反差，使得文字更清晰的被浏览者看清楚。文字为了醒目可以加黑甚至设置下滑线等。

首页菜单标题文字的字体可以根据机械类产品的特性选择经常用的字体，也可以应用自己设置好的字体。对于经常用到的黑体、宋体、楷体要掌握他们的特点，如黑体比较粗犷、严肃，可以应用到大型机械类产品网页设计的标题中。宋体比黑体要秀美一些，也是比较严肃的，可以作为中小型机械类网页设计的主要字体。楷体比较具有文化底蕴，用到文化或者艺术底蕴比较深的机械类产品的文字中去。一般机械类产品网页设计的文字要以黑体、宋体为主。

设置内部单元格的文字大小、颜色等基本属性，可以在Dreamweaver软件中通过内联样式设置、或者应用css样式进行实现。

3.2 一般标题文字

一般标题文字可以采取和主菜单的颜色相同的颜色，也可以采用其他的颜色。但是要确定的是，同一级目录的标题文字的大小、颜色、显示方式都是相同的，这样便于阅读者在最短的时间内，获得最大的信息量，便于在最短的时间内锁定目标。在视觉呈现上也比较的美观、整洁。

3.3 内容文字

内容文字大小要符合人们上网浏览网页查看文字的习惯性大小，不要太大，也不要太小。文字太大显得网页粗糙，文字太小，不便于浏览者阅读。内容文字字体可以同一般标题文字的字体相同，也可以不同，但是同是内容文字部分的字体一定要相同，除非有特殊的需求之外，可以采用其它字体，一般是不会采用多种字体。

4机械类产品网页设计中图片的应用

机械类产品网页设计中图片的由主图、背景图片、一般图片三部分组成。在这三部分图片的应用中一定要分清楚主次。网页中的图片是对文字部分的详细解释。具有假借、指示的作用。

4.1主图

机械类产品网页设计中主图的整体色调要与背景颜色相协调，在协调统一的情况下，要突出主图的特点。将主图放在显眼的位置，使得主图能够吸引读者的眼球。

4.2背景图片

背景图片与背景色要做到统一和谐又有变化，能够衬托出主图的中心位置，又能使得一般图片更适合浏览者阅读。需要将背景图片在视觉规律上有一种往后走的感觉从而使得主图、文字向前突出的视觉冲击，这样才能让阅读者第一时间看到的是主图和文字内容。

4.5 一般图片

一般图片在视觉流程上是介于主图、标题文字之后，背景图片、背景色之前进入人们眼睛的。这就需要一般图片要与网页整体颜色和谐统一，视觉冲击力不能那么强，要在和谐中有变化。图片尺寸要小于主图图片，可以单独使用，也可以成组的使用。

5总结

机械类产品的網页设计中的网页格式结构、网页用色、网页文字、网页图片四部分之间相互协调相互统一才能突出机械类产品的高质量、高精度，才能更好的在网页上为机械类产品做宣传，从而减少人力物力的宣传。

参考文献

[1]祖宝明，金红旭.Dreamweavercs6网页设计与应用[M].人民邮电出版社.2016.

[2]储久良.Web前端开发技术：HTML、css、JavaScript[M].清华大学出版社.2016.

[3]铁钟，网页布局与配色实践[M].清华大学出版社.2017.

[4]吴永健.机械产品图样设计技巧与外观造型手册[M].兵器工业出版社.1996.