機械類產品的網頁設計研究

耿娟

摘要：機械類產品的網頁設計主要包括網頁的格式結構、網頁用色、網頁文字、網頁圖片四部分，只有這四部分相互協調、相互統一，才能突出機械類產品的高質量、高精度，才能更好的在網頁上為機械類產品做宣傳。

關鍵字：機械類產品 網頁設計 格式結構 網頁用色 網頁文字 網頁圖片

機械類產品的網頁設計主要包括網頁的格式結構、網頁用色、網頁文字、網頁圖片四部分，接下來就從這四部分分別進行設計。

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.