戴宏明 戴宏亮

摘? 要： 很多企業(yè)在做大型HTML5營(yíng)銷(xiāo)型網(wǎng)站設(shè)計(jì)時(shí)，由于缺乏有效的設(shè)計(jì)理論指導(dǎo)，導(dǎo)致最后建成的網(wǎng)站用戶體驗(yàn)差、維護(hù)成本高、缺乏基本的可擴(kuò)展能力。提出了HTML5大型營(yíng)銷(xiāo)型網(wǎng)站設(shè)計(jì)模式，從功能、架構(gòu)、布局、視覺(jué)、交互及安全等六個(gè)方面設(shè)計(jì)網(wǎng)站，可以提高網(wǎng)站的可用性、可擴(kuò)展性、可維護(hù)性等質(zhì)量屬性，網(wǎng)站的用戶體驗(yàn)及安全性也會(huì)更好。

關(guān)鍵詞： HTML5營(yíng)銷(xiāo)型網(wǎng)站;網(wǎng)站設(shè)計(jì);架構(gòu)設(shè)計(jì);視覺(jué)設(shè)計(jì);交互設(shè)計(jì)

【Abstract】： When many enterprises design HTML5 marketing website， due to the lack of effective? guidance of design theory， resulting in poor user experience， high maintenance costs， lack of basic scalability. HTML5 marketing website design mode is proposed， designing websites from six aspects： function， architecture， layout， vision， interaction and security， which can improve quality attributes of the website， such as the usability， extensibility， maintainability etc. The user experience and security of the website will also be better.

【Key words】： HTML5 marketing website; Website design; Architecture design; Visual design; Interactive design

0? 引言

在2014年10月，萬(wàn)維網(wǎng)聯(lián)盟（W3C）宣布，HTML5標(biāo)準(zhǔn)正式確定，HMTL5網(wǎng)站開(kāi)發(fā)逐步進(jìn)入信息技術(shù)的快車(chē)道。從上世紀(jì)90年代開(kāi)始，互聯(lián)網(wǎng)進(jìn)入中國(guó)已有20多年的時(shí)間。據(jù)CNNIC發(fā)布第43次《中國(guó)互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告》統(tǒng)計(jì)，截止到2018年12月，中國(guó)網(wǎng)民數(shù)量達(dá)8.29億，互聯(lián)網(wǎng)普及率達(dá)59.6%，互聯(lián)網(wǎng)已成為我們生活的一部分。HTML5網(wǎng)站是互聯(lián)網(wǎng)的核心，在互聯(lián)網(wǎng)高速發(fā)展的同時(shí)，HTML5網(wǎng)站的作用也變得愈發(fā)重要。

HTML5營(yíng)銷(xiāo)型網(wǎng)站是以組織營(yíng)銷(xiāo)目標(biāo)為主導(dǎo)，利用相關(guān)信息技術(shù)，建設(shè)和運(yùn)營(yíng)具有優(yōu)秀用戶體驗(yàn)、有效網(wǎng)站互動(dòng)和溝通、良好搜索引擎表現(xiàn)、完善網(wǎng)站信息監(jiān)控、強(qiáng)壯網(wǎng)站架構(gòu)特征的網(wǎng)站。HTML5營(yíng)銷(xiāo)型網(wǎng)站就像一名優(yōu)秀的業(yè)務(wù)員，能夠?qū)⒔M織的產(chǎn)品及服務(wù)源源不斷地推薦給目標(biāo)客戶，并且不受時(shí)間和地域的限制。隨著國(guó)家互聯(lián)網(wǎng)+戰(zhàn)略的實(shí)施，HTML5營(yíng)銷(xiāo)型網(wǎng)站已成為組織發(fā)展的迫切要求，HTML5營(yíng)銷(xiāo)型網(wǎng)站的設(shè)計(jì)變得日益關(guān)鍵。

1? HTML5大型營(yíng)銷(xiāo)型網(wǎng)站設(shè)計(jì)

HTML5大型營(yíng)銷(xiāo)型網(wǎng)站建設(shè)主要包括技術(shù)和內(nèi)容建設(shè)兩個(gè)方面，要使HTML5營(yíng)銷(xiāo)型網(wǎng)站真正發(fā)揮作用，兩個(gè)方面都需做好。技術(shù)建設(shè)主要包括規(guī)劃[1]、設(shè)計(jì)、實(shí)現(xiàn)及測(cè)試等環(huán)節(jié)，其中設(shè)計(jì)是最重要的環(huán)節(jié)。當(dāng)前，很多企業(yè)在做大型HTML5網(wǎng)站設(shè)計(jì)時(shí)，由于缺乏有效的設(shè)計(jì)理論指導(dǎo)，沒(méi)有做架構(gòu)、交互、視覺(jué)、可維護(hù)性、可擴(kuò)展性及安全設(shè)計(jì)等必要工作，導(dǎo)致最后建成的網(wǎng)站用戶體驗(yàn)差、安全性脆弱、維護(hù)成本高、缺乏基本的可擴(kuò)展能力，在網(wǎng)站運(yùn)營(yíng)和推廣過(guò)程中，出現(xiàn)了很多棘手問(wèn)題。在設(shè)計(jì)大型HTML5營(yíng)銷(xiāo)型網(wǎng)站時(shí)，必須以用戶為中心，需要做到營(yíng)銷(xiāo)、技術(shù)與業(yè)務(wù)的有效結(jié)合。筆者根據(jù)自己研究及建設(shè)HTML5營(yíng)銷(xiāo)型網(wǎng)站多年的經(jīng)驗(yàn)，提出了HTML5大型營(yíng)銷(xiāo)型網(wǎng)站設(shè)計(jì)模式。HTML5大型營(yíng)銷(xiāo)型網(wǎng)站設(shè)計(jì)模式主要包括網(wǎng)站功能設(shè)計(jì)、架構(gòu)設(shè)計(jì)、布局設(shè)計(jì)、交互設(shè)計(jì)、視覺(jué)設(shè)計(jì)及安全設(shè)計(jì)。

1.1? 網(wǎng)站功能設(shè)計(jì)

HTML5大型營(yíng)銷(xiāo)型網(wǎng)站功能設(shè)計(jì)主要包括兩個(gè)方面的內(nèi)容：（1）模塊劃分。在規(guī)劃階段，已根據(jù)用戶要求，設(shè)計(jì)出網(wǎng)站的邏輯模型。在設(shè)計(jì)階段，要將規(guī)劃階段設(shè)計(jì)的邏輯模型轉(zhuǎn)化為物理模型。在將邏輯模型轉(zhuǎn)化為物理模型的過(guò)程中，需重點(diǎn)考慮模塊的獨(dú)立性、復(fù)用和擴(kuò)展等方面的要求，對(duì)模塊進(jìn)行重新劃分。在模塊劃分時(shí)，應(yīng)遵循以下原則：①最大獨(dú)立性原則。這個(gè)原則是劃分模塊最重要也是最基本的原則。要達(dá)到這個(gè)目標(biāo)，模塊的內(nèi)聚性要強(qiáng)，耦合性要弱。②最少冗余原則。建立公共模塊，將一些共用的方法及屬性放在共同模塊中，減少冗余，方便擴(kuò)展。③合理扇入扇出原則。一般來(lái)說(shuō)，模塊扇入數(shù)越大越好，模塊扇出數(shù)不能過(guò)大，也不宜過(guò)小。設(shè)計(jì)得好的系統(tǒng)，上層模塊有較高的扇出，下層模塊有較高的扇入。（2）處理流程設(shè)計(jì)。處理流程設(shè)計(jì)的任務(wù)就是設(shè)計(jì)出網(wǎng)站所有模塊以及它們之間的相互關(guān)系，并具體設(shè)計(jì)出每個(gè)模塊內(nèi)部的功能和處理過(guò)程。HTML5大型營(yíng)銷(xiāo)型網(wǎng)站包含了一系列的核心處理流程，比如購(gòu)物流程、支付流程、退貨流程等。對(duì)這些流程的理解和處理，將會(huì)直接影響HTML5網(wǎng)站的功能和性能。常用的流程設(shè)計(jì)工具包括程序流程圖、IPO圖、N-S圖、問(wèn)題分析圖、判定樹(shù)等。

1.2? 網(wǎng)站架構(gòu)設(shè)計(jì)

架構(gòu)起源于建筑學(xué)，已被廣泛應(yīng)用到IT領(lǐng)域。HTML5大型營(yíng)銷(xiāo)型網(wǎng)站架構(gòu)是具有一定形式的結(jié)構(gòu)化元素，即構(gòu)件的集合，包括處理構(gòu)件、數(shù)據(jù)構(gòu)件和連接構(gòu)件。處理構(gòu)件負(fù)責(zé)對(duì)數(shù)據(jù)進(jìn)行處理，數(shù)據(jù)構(gòu)件是被處理的信息，連接構(gòu)件把構(gòu)件的不同部分組合連接起來(lái)。HTML5營(yíng)銷(xiāo)型網(wǎng)站架構(gòu)設(shè)計(jì)的好壞，直接決定著網(wǎng)站的可用性、可維護(hù)性、可擴(kuò)展性等質(zhì)量屬性，甚至?xí)绊懢W(wǎng)站的開(kāi)發(fā)成本和開(kāi)發(fā)效率。對(duì)于HTML5營(yíng)銷(xiāo)型網(wǎng)站而言，設(shè)計(jì)好網(wǎng)站架構(gòu)是保障網(wǎng)站質(zhì)量的根本措施。

HTML5大型營(yíng)銷(xiāo)型網(wǎng)站架構(gòu)設(shè)計(jì)主要包括兩個(gè)方面的內(nèi)容：（1）確定HTML5營(yíng)銷(xiāo)型網(wǎng)站架構(gòu)的表現(xiàn)形式。設(shè)計(jì)HTML5大型營(yíng)銷(xiāo)型網(wǎng)站架構(gòu)的首要問(wèn)題是如何表示網(wǎng)站架構(gòu)，即如何對(duì)網(wǎng)站架構(gòu)建模。根據(jù)建模的側(cè)重點(diǎn)不同，可以將網(wǎng)站架構(gòu)分為五種模型：功能模型、結(jié)構(gòu)模型、框架模型、動(dòng)態(tài)模型和過(guò)程模型[2]。功能模型主要描述HTML5營(yíng)銷(xiāo)型網(wǎng)站的功能，結(jié)構(gòu)模型主要描述HTML5營(yíng)銷(xiāo)型網(wǎng)站結(jié)構(gòu)，框架模型與結(jié)構(gòu)模型比較相似，但它不側(cè)重描述結(jié)構(gòu)的細(xì)節(jié)更側(cè)重描述網(wǎng)站的整體結(jié)構(gòu)，過(guò)程模型主要描述HTML5營(yíng)銷(xiāo)型網(wǎng)站的構(gòu)造步驟及構(gòu)成，動(dòng)態(tài)模型是對(duì)結(jié)構(gòu)模型或框架模型的補(bǔ)充。這五種模型各有所長(zhǎng)，每種模型只是表示HTML5營(yíng)銷(xiāo)型網(wǎng)站的一個(gè)側(cè)面。Kruchten提出的“4+1”視圖模型，即邏輯視圖、進(jìn)程視圖、物理視圖、開(kāi)發(fā)視圖和場(chǎng)景（用例視圖）[3-5]，將五種模型有機(jī)地結(jié)合在一起，是當(dāng)前表示網(wǎng)站架構(gòu)的一種科學(xué)的表示方法。（2）設(shè)計(jì)HTML5營(yíng)銷(xiāo)型網(wǎng)站架構(gòu)。HTML5大型營(yíng)銷(xiāo)型網(wǎng)站架構(gòu)設(shè)計(jì)步驟：①架構(gòu)需求分析。中大型網(wǎng)站的架構(gòu)是由業(yè)務(wù)需求、質(zhì)量需求、用戶及數(shù)據(jù)規(guī)模決定的，網(wǎng)站架構(gòu)須滿足最大用戶并發(fā)量和最大數(shù)據(jù)存儲(chǔ)及訪問(wèn)量的需要。網(wǎng)站架構(gòu)不是一成不變的，在設(shè)計(jì)時(shí)，一般會(huì)考慮至少滿足未來(lái)3～5年的發(fā)展需要。②架構(gòu)設(shè)計(jì)。根據(jù)Kruchten提出的“4+1”視圖模型，分別設(shè)計(jì)HTML5營(yíng)銷(xiāo)型網(wǎng)站的邏輯視圖、進(jìn)程視圖、物理視圖、開(kāi)發(fā)視圖及用例視圖。網(wǎng)站的邏輯視圖用來(lái)描述網(wǎng)站的功能，從用戶的角度，將網(wǎng)站分解為一序列的網(wǎng)站功能抽象，可采用類(lèi)圖和類(lèi)模板來(lái)描述。網(wǎng)站的進(jìn)程視圖用來(lái)描述網(wǎng)站的非功能性需求及邏輯視圖中的主要功能抽象如何與進(jìn)程相結(jié)合，側(cè)重于描述網(wǎng)站的運(yùn)行特性。網(wǎng)站的物理視圖用來(lái)描述網(wǎng)站的硬件配置，主要關(guān)注網(wǎng)站的可用性、可靠性、性能和可伸縮性等非功能性需求。網(wǎng)站的開(kāi)發(fā)視圖用來(lái)描述網(wǎng)站在開(kāi)發(fā)環(huán)境中的靜態(tài)組織結(jié)構(gòu)，方便網(wǎng)站開(kāi)發(fā)人員的分工協(xié)作。網(wǎng)站用例視圖綜合了前面四種視圖，用來(lái)描述構(gòu)件之間的相互關(guān)系。③架構(gòu)文檔化。根據(jù)架構(gòu)設(shè)計(jì)的過(guò)程及結(jié)果，撰寫(xiě)網(wǎng)站架構(gòu)規(guī)格說(shuō)明書(shū)和測(cè)試網(wǎng)站架構(gòu)需求的質(zhì)量設(shè)計(jì)說(shuō)明書(shū)。④架構(gòu)評(píng)審。邀請(qǐng)外部人員包括用戶代表、領(lǐng)域?qū)＜业葏⑴c架構(gòu)評(píng)審，公正地對(duì)架構(gòu)進(jìn)行檢驗(yàn)。架構(gòu)設(shè)計(jì)、文檔化及評(píng)審是一個(gè)迭代過(guò)程，一般要經(jīng)過(guò)多次的迭代，才能最終確定HTML5營(yíng)銷(xiāo)型網(wǎng)站架構(gòu)。⑤架構(gòu)實(shí)現(xiàn)。采用原型設(shè)計(jì)工具將架構(gòu)實(shí)現(xiàn)。⑥架構(gòu)演化。在網(wǎng)站開(kāi)發(fā)或者運(yùn)行階段，用戶最終需求或者運(yùn)行環(huán)境都可能發(fā)生變化，為滿足新的需求，必須相應(yīng)地修改網(wǎng)站的架構(gòu)。

1.3? 網(wǎng)站布局設(shè)計(jì)

HTML5營(yíng)銷(xiāo)型網(wǎng)站布局設(shè)計(jì)，就是網(wǎng)站的排版布局。HTML5營(yíng)銷(xiāo)型網(wǎng)站包含兩類(lèi)用戶，一類(lèi)用戶是網(wǎng)站的目標(biāo)客戶，另一類(lèi)用戶是搜索引擎。網(wǎng)站能否對(duì)目標(biāo)客戶產(chǎn)生吸引力，網(wǎng)站能否使目標(biāo)客戶方便地找到感興趣的內(nèi)容及具有良好的用戶體驗(yàn)，搜索引擎能否收錄網(wǎng)站更多的頁(yè)面，并且排名靠前，對(duì)于這些問(wèn)題，網(wǎng)站的排版布局起著很重要的作用。網(wǎng)站雖然千差萬(wàn)別、數(shù)不勝數(shù)，但從本質(zhì)上說(shuō)，一般的網(wǎng)頁(yè)都包含標(biāo)題、網(wǎng)站LOGO、頁(yè)眉、導(dǎo)航欄、內(nèi)容板塊和頁(yè)腳等部分。常見(jiàn)的布局類(lèi)型包括“同”字型布局、“匡”字型布局、“呂”字型布局及自由式布局?！巴弊中筒季猪?yè)面頂部為水平放置的主導(dǎo)航欄，其下大體上分為左中右三欄。“匡”字型布局是把“同”字型布局右邊的內(nèi)容移到底部而成?！皡巍弊中筒季值奶攸c(diǎn)是把頁(yè)面分為上下兩大塊，其中每一塊都具有“同”字型布局的特點(diǎn)。自由式布局通常以一幅精美的圖片作為設(shè)計(jì)中心，導(dǎo)航欄作為次要的設(shè)計(jì)元素，自由擺布，起到點(diǎn)綴、修飾和均衡的作用。在設(shè)計(jì)網(wǎng)站布局時(shí)，尼爾森F形狀模型和古騰堡法則是兩個(gè)重要的指導(dǎo)性法則。

HTML5大型營(yíng)銷(xiāo)型網(wǎng)站布局設(shè)計(jì)步驟：（1）構(gòu)思構(gòu)圖。首先對(duì)網(wǎng)站的整體布局進(jìn)行認(rèn)真的構(gòu)思。在這個(gè)階段，要學(xué)會(huì)借鑒，借鑒同類(lèi)優(yōu)秀網(wǎng)站的布局，吸取精華，融入到自己的整體構(gòu)思中。其次要圍繞網(wǎng)站主題，充分發(fā)揮藝術(shù)想象力，大膽創(chuàng)新，結(jié)合現(xiàn)有的網(wǎng)頁(yè)素材考慮，進(jìn)行整合創(chuàng)作。在借鑒的同時(shí)一定要有自己的獨(dú)特創(chuàng)意，并且要考慮技術(shù)實(shí)現(xiàn)的可行性。（2）繪制草圖。繪制草圖就是把頭腦中構(gòu)思的頁(yè)面布局輪廓具體化的過(guò)程，可以在紙上繪畫(huà)，也可以使用軟件工具在計(jì)算機(jī)上繪制。（3）草圖細(xì)化。草圖細(xì)化就是在繪制出來(lái)的輪廓草圖上，具體擺放頁(yè)面元素，包括網(wǎng)站LOGO、導(dǎo)航欄、內(nèi)容板塊等。在這個(gè)階段可以使用一些軟件工具（比如Photoshop、Axure RP、Excel等）在計(jì)算機(jī)上完成。（4）量化描述。量化描述就是確定各種頁(yè)面元素的具體尺寸，主要包括網(wǎng)頁(yè)的外形尺寸、網(wǎng)頁(yè)各個(gè)內(nèi)容板塊的尺寸、網(wǎng)頁(yè)的文件大小等。

1.4? 網(wǎng)站交互設(shè)計(jì)

HTML5營(yíng)銷(xiāo)型網(wǎng)站交互設(shè)計(jì)，又稱(chēng)為網(wǎng)站互動(dòng)設(shè)計(jì)，也就是定義、設(shè)計(jì)網(wǎng)站的行為。從用戶的角度，網(wǎng)站交互設(shè)計(jì)的目標(biāo)就是使網(wǎng)站具有良好的可用性，用戶能夠方便、有效地操作網(wǎng)站，并具有良好的用戶體驗(yàn)[6]。常用的網(wǎng)站交互設(shè)計(jì)法則包括：（1）7±2法則。據(jù)統(tǒng)計(jì)，用戶每次短期只能記住5～9件事情，因此導(dǎo)航、列表的元素個(gè)數(shù)不應(yīng)超過(guò)此范圍。（2）2秒鐘法則。網(wǎng)站響應(yīng)時(shí)間不應(yīng)該超過(guò)2秒，用戶等待的時(shí)間越短，用戶體驗(yàn)越好。（3）3次點(diǎn)擊法則。用戶通常在3次點(diǎn)擊之內(nèi)如果還沒(méi)有找到他們想要的信息或者了解網(wǎng)站的特色，他們就會(huì)離開(kāi)該網(wǎng)站。（4）費(fèi)茨定律。費(fèi)茨定律斷言：在定位時(shí)存在著一個(gè)速度和精度的平衡，目標(biāo)越小、距離越遠(yuǎn)，定位需要的時(shí)間越久。因此重要的導(dǎo)航、按鈕應(yīng)該設(shè)計(jì)得更大、更容易點(diǎn)擊。（5）倒金字塔法則。倒金字塔是把摘要放在文章前面的一種寫(xiě)作方法，資訊頁(yè)面可應(yīng)用此法則設(shè)計(jì)。（6）用戶控制法則。網(wǎng)站的所有操作都置于用戶控制之下，不強(qiáng)迫用戶采用不是必須的或者不情愿的方式來(lái)進(jìn)行操作，允許交互的中斷和撤銷(xiāo)。（7）降低用戶記憶負(fù)荷法則。盡量減輕對(duì)用戶記憶的要求，網(wǎng)頁(yè)的視覺(jué)布局應(yīng)與真實(shí)世界保持一致，提供盡量“傻瓜式”的操作界面，方便用戶使用。（8）一致性法則。所有可視信息的組織及所有的交互設(shè)計(jì)要采用統(tǒng)一的設(shè)計(jì)標(biāo)準(zhǔn)，用戶應(yīng)按照一致的方式提供或者獲取信息。

HTML5大型營(yíng)銷(xiāo)型網(wǎng)站交互設(shè)計(jì)步驟：（1）設(shè)計(jì)清晰的導(dǎo)航及面包屑軌跡。每個(gè)頁(yè)面都具有簡(jiǎn)明的標(biāo)題，當(dāng)前欄目應(yīng)高亮顯示。（2）網(wǎng)站鏈接應(yīng)該看上去就是可以單擊的，鏈接文字可以清楚地指明其含義，而且類(lèi)似的鏈接要分組放在一起，網(wǎng)站能夠區(qū)分已點(diǎn)擊的鏈接。（3）為每個(gè)操作設(shè)定期望并提供反饋，出現(xiàn)錯(cuò)誤則提供糾錯(cuò)支持。（4）應(yīng)考慮不同水平的用戶，交互設(shè)計(jì)應(yīng)重點(diǎn)考慮中等水平的用戶。（5）提供上下文幫助和文檔。

1.5? 網(wǎng)站視覺(jué)設(shè)計(jì)

HTML5大型營(yíng)銷(xiāo)型網(wǎng)站視覺(jué)設(shè)計(jì)是針對(duì)用戶眼睛官能的主觀形式的表現(xiàn)手段，網(wǎng)站視覺(jué)效果決定著用戶對(duì)網(wǎng)站的第一印象。一般來(lái)說(shuō)，HTML5大型營(yíng)銷(xiāo)型網(wǎng)站視覺(jué)設(shè)計(jì)包括網(wǎng)站色彩設(shè)計(jì)、文字字體設(shè)計(jì)、圖片設(shè)計(jì)、確定網(wǎng)頁(yè)元素間距等內(nèi)容，色彩設(shè)計(jì)[7-8]是視覺(jué)設(shè)計(jì)的核心，著名的格式塔原則[9]是網(wǎng)站視覺(jué)設(shè)計(jì)的指導(dǎo)性原則。HTML5大型營(yíng)銷(xiāo)型網(wǎng)站視覺(jué)設(shè)計(jì)步驟：（1）定義網(wǎng)站的色彩基調(diào)，也就是選擇一個(gè)顏色作為網(wǎng)站的主色調(diào)。用戶可能會(huì)在多種平臺(tái)訪問(wèn)網(wǎng)站，為避免顏色失真，應(yīng)采用網(wǎng)絡(luò)安全色。定義網(wǎng)站的色彩基調(diào)遵循的原則：①網(wǎng)站的色彩要鮮明。用戶在瀏覽網(wǎng)站時(shí)，更愿意接受鮮明的顏色，黯淡的顏色會(huì)給用戶一種壓抑的感覺(jué)。②網(wǎng)站的色彩要獨(dú)特。一個(gè)優(yōu)秀的網(wǎng)站，往往與別的網(wǎng)站有著不同的色彩風(fēng)格，用戶可能根據(jù)網(wǎng)站的獨(dú)特風(fēng)格而接受這個(gè)網(wǎng)站。③色彩需要與網(wǎng)站的內(nèi)容諧調(diào)。網(wǎng)站色彩應(yīng)依據(jù)網(wǎng)站內(nèi)容給用戶營(yíng)造相應(yīng)的氣氛，例如科技類(lèi)網(wǎng)站可以使用淺藍(lán)色，婚慶類(lèi)網(wǎng)站可以使用粉紅色，慶典類(lèi)網(wǎng)站可以使用大紅色等。④要注意色彩和顏色的聯(lián)想性。例如，黑色讓用戶聯(lián)想到夜晚，藍(lán)色讓用戶聯(lián)想到天空或者海洋，大紅色可以讓用戶聯(lián)想到喜慶等。（2）定義網(wǎng)站各欄目色彩。網(wǎng)站的各個(gè)欄目，因?yàn)樾枰w現(xiàn)出不同的內(nèi)容和瀏覽方式，需要針對(duì)不同的網(wǎng)站欄目進(jìn)行不同的配色。一般來(lái)說(shuō)，需要吸引用戶注意力的欄目應(yīng)該使用鮮明的顏色，不同的欄目之間應(yīng)該有一些顏色的對(duì)比，增強(qiáng)網(wǎng)頁(yè)色彩的層次感。（3）定義網(wǎng)站主要內(nèi)容、邊框、背景、圖片的色彩。一般來(lái)說(shuō)，主要內(nèi)容用非彩色，邊框、背景、圖片等次要內(nèi)容用彩色。在非彩色的搭配中，黑白是最基本、最簡(jiǎn)單的搭配，白底黑字或者白字黑底頁(yè)面的內(nèi)容都非常自然。灰色是萬(wàn)能色，可以和很多種顏色搭配，可以實(shí)現(xiàn)不同顏色的和諧過(guò)渡。在網(wǎng)頁(yè)中，當(dāng)有兩種對(duì)比很強(qiáng)烈的顏色組合在一起，而不好搭配其它顏色時(shí)，可以考慮使用灰色為過(guò)度的中間色。網(wǎng)站不要使用過(guò)多的顏色，一個(gè)網(wǎng)頁(yè)的顏色應(yīng)盡量控制在3種顏色以內(nèi)。背景與文本的顏色對(duì)比要強(qiáng)烈，不要將背景與文本使用相近的顏色，不要使用鮮明的花紋作為背景。（4）定義文字字體大小。（5）定義網(wǎng)頁(yè)內(nèi)各元素的間距。

1.6? 網(wǎng)站安全設(shè)計(jì)

互聯(lián)網(wǎng)發(fā)展的歷史是一部血雨腥風(fēng)史，互聯(lián)網(wǎng)的高速發(fā)展，促進(jìn)了社會(huì)生產(chǎn)力水平的提高，同時(shí)各類(lèi)網(wǎng)站安全事故也層出不窮。為了使HTML5大型營(yíng)銷(xiāo)型網(wǎng)站能夠完全、有效、穩(wěn)定、持續(xù)地提供服務(wù)，網(wǎng)站安全設(shè)計(jì)是一個(gè)很重要的環(huán)節(jié)。網(wǎng)站安全設(shè)計(jì)的主要目標(biāo)就是為了保障網(wǎng)站運(yùn)行時(shí)的安全。HTML5大型營(yíng)銷(xiāo)型網(wǎng)站安全設(shè)計(jì)步驟：（1）網(wǎng)站用戶信息、配置文件參數(shù)的保密性設(shè)計(jì)。采用加密算法對(duì)用戶密碼、配置文件參數(shù)等敏感信息進(jìn)行加密，防止這些信息被非法竊取。（2）網(wǎng)站登錄認(rèn)證設(shè)計(jì)。網(wǎng)站登錄認(rèn)證設(shè)計(jì)的關(guān)鍵是對(duì)用戶登錄密碼的管理，用戶密碼可以采用靜態(tài)密碼或者動(dòng)態(tài)密碼，動(dòng)態(tài)密碼更安全。如果使用靜態(tài)密碼，應(yīng)采用不可逆算法對(duì)其進(jìn)行加密，保證靜態(tài)密碼的安全性。（3）網(wǎng)站權(quán)限管理設(shè)計(jì)。網(wǎng)站權(quán)限包括模塊權(quán)限和數(shù)據(jù)權(quán)限，網(wǎng)站能夠劃分多個(gè)用戶角色，不同的用戶角色可以被網(wǎng)站管理員授予不同的權(quán)限。（4）網(wǎng)站操作日志設(shè)計(jì)。網(wǎng)站操作日志用來(lái)詳細(xì)記錄用戶的操作內(nèi)容及時(shí)間。（5）防黑客攻擊設(shè)計(jì)[10]。HTML5大型營(yíng)銷(xiāo)型網(wǎng)站應(yīng)具備防注入攻擊、XSS攻擊、CSRF攻擊等功能，網(wǎng)站管理員應(yīng)定期對(duì)網(wǎng)站安全漏洞進(jìn)行掃描，對(duì)安全性要求較高的網(wǎng)站可以安裝Web應(yīng)用防火墻。

2? 結(jié)語(yǔ)

HTML5大型營(yíng)銷(xiāo)型網(wǎng)站設(shè)計(jì)是一項(xiàng)復(fù)雜、艱巨的系統(tǒng)工程，要做好HTML5大型營(yíng)銷(xiāo)型網(wǎng)站設(shè)計(jì)，所采用的方法很重要。本文提出的HTML5大型營(yíng)銷(xiāo)型網(wǎng)站設(shè)計(jì)模式在多個(gè)大型HTML5網(wǎng)站的設(shè)計(jì)中得到驗(yàn)證，采用此模式設(shè)計(jì)HTML5大型營(yíng)銷(xiāo)型網(wǎng)站，網(wǎng)站的可用性、可擴(kuò)展性、可維護(hù)性等質(zhì)量屬性會(huì)有更好的保障，網(wǎng)站的用戶體驗(yàn)及安全性也會(huì)更好。

參考文獻(xiàn)

[1]戴宏明. 營(yíng)銷(xiāo)型網(wǎng)站規(guī)劃六步法[J]. 現(xiàn)代計(jì)算機(jī)， 2013（6）： 55-57.

[2]張友生. 軟件體系結(jié)構(gòu)原理、方法與實(shí)踐（第2版）[M]. 清華大學(xué)出版社， 2014.

[3]H Choi， K Yeom. An approach to software architecture evaluation with the 4+1 view model of architecture[J]. Asia- pacific Software Engineering Conference， 2002（Sep/Oct）： 286-293.

[4]D Cyr， M Head， H Larios， B Pan. Exploring human images in website design： a multi-method approach[J]. Mis Quarterly， 2009， 33（3）： 539-566.

[5]J Song， FM Zahedi. A Theoretical Approach to Web Design in E-Commerce： A Belief Reinforcement Model[J]. Management Science， 2005， 51（8）： 1219-1235.

[6]王電章， 曾軍. 網(wǎng)頁(yè)中視覺(jué)圖像傳播新理念——體驗(yàn)設(shè)計(jì)[J]. 裝飾， 2007（9）： 54-55.

[7]彭綱. 論網(wǎng)頁(yè)的色彩[J]. 裝飾， 2004（2）： 94-94.

[8]陳琪莎. 色彩設(shè)計(jì)在網(wǎng)頁(yè)中的實(shí)際應(yīng)用[J]. 包裝工程， 2006， 27（6）： 364-365.

[9]胡爽. 基于格式塔的網(wǎng)頁(yè)信息設(shè)計(jì)的美化研究[J]. 包裝工程， 2010（22）： 111-115.

[10]李智慧. 大型網(wǎng)站技術(shù)架構(gòu)核心原理與案例分析[M]. 電子工業(yè)出版社， 2015.

[11]馬志強(qiáng)， 蔣曉. 基于用戶體驗(yàn)的智能手機(jī)網(wǎng)站界面設(shè)計(jì)探討[J]. 包裝工程， 2012（16）： 63-66.

[12]周游舟. 基于模塊化的彈性擴(kuò)展門(mén)戶網(wǎng)站架構(gòu)設(shè)計(jì)[J]. 湖北大學(xué)學(xué)報(bào)（自然科學(xué)版）， 2019， 41（2）.

[13]趙磊. 高校網(wǎng)站建設(shè)安全問(wèn)題分析與對(duì)策[J]. 軟件， 2015（9）.