機械類產(chǎn)品的網(wǎng)頁設(shè)計研究

耿娟

摘要：機械類產(chǎn)品的網(wǎng)頁設(shè)計主要包括網(wǎng)頁的格式結(jié)構(gòu)、網(wǎng)頁用色、網(wǎng)頁文字、網(wǎng)頁圖片四部分，只有這四部分相互協(xié)調(diào)、相互統(tǒng)一，才能突出機械類產(chǎn)品的高質(zhì)量、高精度，才能更好的在網(wǎng)頁上為機械類產(chǎn)品做宣傳。

關(guān)鍵字：機械類產(chǎn)品 網(wǎng)頁設(shè)計 格式結(jié)構(gòu) 網(wǎng)頁用色 網(wǎng)頁文字 網(wǎng)頁圖片

機械類產(chǎn)品的網(wǎng)頁設(shè)計主要包括網(wǎng)頁的格式結(jié)構(gòu)、網(wǎng)頁用色、網(wǎng)頁文字、網(wǎng)頁圖片四部分，接下來就從這四部分分別進行設(shè)計。

1機械類產(chǎn)品網(wǎng)頁的排版結(jié)構(gòu)設(shè)計

機械類產(chǎn)品的網(wǎng)頁排版結(jié)構(gòu)設(shè)計主要包括網(wǎng)頁格式排版和均衡對稱結(jié)構(gòu)。從整體設(shè)置好網(wǎng)頁格式的結(jié)構(gòu)，再在每一部分進行詳細制作。網(wǎng)頁結(jié)構(gòu)首先是從整體到具體，在從具體到整體。使得結(jié)構(gòu)之間有聯(lián)系，不是孤立存在的。

1.1網(wǎng)格式排版

因為機械類產(chǎn)品屬于比較注重使用價值，注重理性化的信息。所以在網(wǎng)頁結(jié)構(gòu)排版中，一般采取網(wǎng)格式排版，這樣能夠顯示出機械類產(chǎn)品理性化的信息，在排版中可以先用表格將每部分詳細的內(nèi)容分塊，然后再單獨制作每一塊內(nèi)容。制作中先從整體到局部，再從局部到整體，將整個頁面結(jié)構(gòu)貫通起來。在網(wǎng)頁排版中一般用表格里面套表格的方法把網(wǎng)頁的每部分都排好，最后在預(yù)留的單元格內(nèi)將圖片、文字放入。針對圖片、文字的特殊效果用css樣式解決。

1.2均衡對稱結(jié)構(gòu)

在機械類產(chǎn)品的排版中，為了凸顯產(chǎn)品高品質(zhì)，一般采用比較經(jīng)典的結(jié)構(gòu)，即均衡對稱的結(jié)構(gòu)。均衡對稱分為兩種，一類是左右中軸對稱，另一類是左右均衡但不一定對稱。對于中軸對稱結(jié)構(gòu)是比較正式、嚴(yán)肅的?？梢葬槍τ诖笮偷臋C械類產(chǎn)品的網(wǎng)頁采用中軸對稱的方式。均衡結(jié)構(gòu)可以在小型機械類產(chǎn)品的網(wǎng)頁中使用，可以在網(wǎng)頁中感覺到小型機械類產(chǎn)品的靈巧性、生活化，不再是冷冰冰機械的感覺。

2機械類產(chǎn)品網(wǎng)頁設(shè)計中用色

機械類產(chǎn)品網(wǎng)頁設(shè)計中用色主要包括主網(wǎng)頁設(shè)計用色、子網(wǎng)頁設(shè)計用色兩部分，兩部分的顏色要在整體上保持和諧統(tǒng)一，具體各部分要求要有各自特點，在統(tǒng)一的大前提下，要有不同，達到和而不同的視覺效果。

2.1主網(wǎng)頁設(shè)計用色

機械類產(chǎn)品主網(wǎng)頁用色可以選擇比較穩(wěn)重的一些顏色，盡量避免使用大紅大紫等高純度、高亮度的顏色。高純度、高亮度、高明度的顏色顯得比較激進，對于藝術(shù)類網(wǎng)頁主題的設(shè)計還是比較合適的，對于機械這一類的理性產(chǎn)品不太適合，會給人心理上一種機械質(zhì)量品質(zhì)不高的心理投射。在主網(wǎng)頁設(shè)計用色中還要考慮到與產(chǎn)品主圖的相互呼應(yīng)，與產(chǎn)品標(biāo)志之間的主次關(guān)系，與網(wǎng)頁中文字的關(guān)系。一般主頁的顏色能夠突出主圖，不影響文字閱讀，使得標(biāo)志顯著，能與內(nèi)容頁保持完整性，顏色最多不能超過4種顏色，要在整體統(tǒng)一中有變化。

2.2子網(wǎng)頁設(shè)計用色

子網(wǎng)頁的用色很大部分取決于主網(wǎng)頁的用色，因為要保持整體統(tǒng)一性，所以子網(wǎng)頁受主網(wǎng)頁已經(jīng)有的顏色的限制，不能隨便用色，可以采用色相同主網(wǎng)頁相同的顏色。在明度、飽和度上適當(dāng)給予調(diào)整，使得使用者一看就能判斷出主網(wǎng)頁和子網(wǎng)頁。子網(wǎng)頁的顏色自然要能突出子網(wǎng)頁宣傳的機械產(chǎn)品，使得子網(wǎng)頁內(nèi)部文字閱讀清晰。

3機械類產(chǎn)品網(wǎng)頁設(shè)計中文字的應(yīng)用

機械類產(chǎn)品網(wǎng)頁設(shè)計中文字包括首頁菜單標(biāo)題文字-般標(biāo)題文字、內(nèi)容文字三部分。文字呈現(xiàn)給瀏覽者的時候要有主次之分。要有重點的呈現(xiàn)在觀眾的視角里，符合人的閱讀流程。

3.1首頁菜單標(biāo)題文字

首頁菜單標(biāo)題文字可以采取正文的顏色或者色相相同的顏色，也可以采取和首頁背景色相差比較大的顏色，這樣便于文字的閱讀。一般網(wǎng)頁背景色偏暗一些，文字就用亮一些的顏色，網(wǎng)頁背景顏色偏亮，文字就用偏暗的顏色，這樣是為了增加反差，使得文字更清晰的被瀏覽者看清楚。文字為了醒目可以加黑甚至設(shè)置下滑線等。

首頁菜單標(biāo)題文字的字體可以根據(jù)機械類產(chǎn)品的特性選擇經(jīng)常用的字體，也可以應(yīng)用自己設(shè)置好的字體。對于經(jīng)常用到的黑體、宋體、楷體要掌握他們的特點，如黑體比較粗獷、嚴(yán)肅，可以應(yīng)用到大型機械類產(chǎn)品網(wǎng)頁設(shè)計的標(biāo)題中。宋體比黑體要秀美一些，也是比較嚴(yán)肅的，可以作為中小型機械類網(wǎng)頁設(shè)計的主要字體?？w比較具有文化底蘊，用到文化或者藝術(shù)底蘊比較深的機械類產(chǎn)品的文字中去。一般機械類產(chǎn)品網(wǎng)頁設(shè)計的文字要以黑體、宋體為主。

設(shè)置內(nèi)部單元格的文字大小、顏色等基本屬性，可以在Dreamweaver軟件中通過內(nèi)聯(lián)樣式設(shè)置、或者應(yīng)用css樣式進行實現(xiàn)。

3.2 一般標(biāo)題文字

一般標(biāo)題文字可以采取和主菜單的顏色相同的顏色，也可以采用其他的顏色。但是要確定的是，同一級目錄的標(biāo)題文字的大小、顏色、顯示方式都是相同的，這樣便于閱讀者在最短的時間內(nèi)，獲得最大的信息量，便于在最短的時間內(nèi)鎖定目標(biāo)。在視覺呈現(xiàn)上也比較的美觀、整潔。

3.3 內(nèi)容文字

內(nèi)容文字大小要符合人們上網(wǎng)瀏覽網(wǎng)頁查看文字的習(xí)慣性大小，不要太大，也不要太小。文字太大顯得網(wǎng)頁粗糙，文字太小，不便于瀏覽者閱讀。內(nèi)容文字字體可以同一般標(biāo)題文字的字體相同，也可以不同，但是同是內(nèi)容文字部分的字體一定要相同，除非有特殊的需求之外，可以采用其它字體，一般是不會采用多種字體。

4機械類產(chǎn)品網(wǎng)頁設(shè)計中圖片的應(yīng)用

機械類產(chǎn)品網(wǎng)頁設(shè)計中圖片的由主圖、背景圖片、一般圖片三部分組成。在這三部分圖片的應(yīng)用中一定要分清楚主次。網(wǎng)頁中的圖片是對文字部分的詳細解釋。具有假借、指示的作用。

4.1主圖

機械類產(chǎn)品網(wǎng)頁設(shè)計中主圖的整體色調(diào)要與背景顏色相協(xié)調(diào)，在協(xié)調(diào)統(tǒng)一的情況下，要突出主圖的特點。將主圖放在顯眼的位置，使得主圖能夠吸引讀者的眼球。

4.2背景圖片

背景圖片與背景色要做到統(tǒng)一和諧又有變化，能夠襯托出主圖的中心位置，又能使得一般圖片更適合瀏覽者閱讀。需要將背景圖片在視覺規(guī)律上有一種往后走的感覺從而使得主圖、文字向前突出的視覺沖擊，這樣才能讓閱讀者第一時間看到的是主圖和文字內(nèi)容。

4.5 一般圖片

一般圖片在視覺流程上是介于主圖、標(biāo)題文字之后，背景圖片、背景色之前進入人們眼睛的。這就需要一般圖片要與網(wǎng)頁整體顏色和諧統(tǒng)一，視覺沖擊力不能那么強，要在和諧中有變化。圖片尺寸要小于主圖圖片，可以單獨使用，也可以成組的使用。

5總結(jié)

機械類產(chǎn)品的網(wǎng)頁設(shè)計中的網(wǎng)頁格式結(jié)構(gòu)、網(wǎng)頁用色、網(wǎng)頁文字、網(wǎng)頁圖片四部分之間相互協(xié)調(diào)相互統(tǒng)一才能突出機械類產(chǎn)品的高質(zhì)量、高精度，才能更好的在網(wǎng)頁上為機械類產(chǎn)品做宣傳，從而減少人力物力的宣傳。

參考文獻

[1]祖寶明，金紅旭.Dreamweavercs6網(wǎng)頁設(shè)計與應(yīng)用[M].人民郵電出版社.2016.

[2]儲久良.Web前端開發(fā)技術(shù)：HTML、css、JavaScript[M].清華大學(xué)出版社.2016.

[3]鐵鐘，網(wǎng)頁布局與配色實踐[M].清華大學(xué)出版社.2017.

[4]吳永健.機械產(chǎn)品圖樣設(shè)計技巧與外觀造型手冊[M].兵器工業(yè)出版社.1996.