戴宏明 戴宏亮

摘? 要： 很多企業(yè)在做大型HTML5營銷型網站設計時，由于缺乏有效的設計理論指導，導致最后建成的網站用戶體驗差、維護成本高、缺乏基本的可擴展能力。提出了HTML5大型營銷型網站設計模式，從功能、架構、布局、視覺、交互及安全等六個方面設計網站，可以提高網站的可用性、可擴展性、可維護性等質量屬性，網站的用戶體驗及安全性也會更好。

關鍵詞： HTML5營銷型網站;網站設計;架構設計;視覺設計;交互設計

【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月，萬維網聯(lián)盟（W3C）宣布，HTML5標準正式確定，HMTL5網站開發(fā)逐步進入信息技術的快車道。從上世紀90年代開始，互聯(lián)網進入中國已有20多年的時間。據CNNIC發(fā)布第43次《中國互聯(lián)網絡發(fā)展狀況統(tǒng)計報告》統(tǒng)計，截止到2018年12月，中國網民數(shù)量達8.29億，互聯(lián)網普及率達59.6%，互聯(lián)網已成為我們生活的一部分。HTML5網站是互聯(lián)網的核心，在互聯(lián)網高速發(fā)展的同時，HTML5網站的作用也變得愈發(fā)重要。

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

1? HTML5大型營銷型網站設計

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

1.1? 網站功能設計

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

1.2? 網站架構設計

架構起源于建筑學，已被廣泛應用到IT領域。HTML5大型營銷型網站架構是具有一定形式的結構化元素，即構件的集合，包括處理構件、數(shù)據構件和連接構件。處理構件負責對數(shù)據進行處理，數(shù)據構件是被處理的信息，連接構件把構件的不同部分組合連接起來。HTML5營銷型網站架構設計的好壞，直接決定著網站的可用性、可維護性、可擴展性等質量屬性，甚至會影響網站的開發(fā)成本和開發(fā)效率。對于HTML5營銷型網站而言，設計好網站架構是保障網站質量的根本措施。

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

1.3? 網站布局設計

HTML5營銷型網站布局設計，就是網站的排版布局。HTML5營銷型網站包含兩類用戶，一類用戶是網站的目標客戶，另一類用戶是搜索引擎。網站能否對目標客戶產生吸引力，網站能否使目標客戶方便地找到感興趣的內容及具有良好的用戶體驗，搜索引擎能否收錄網站更多的頁面，并且排名靠前，對于這些問題，網站的排版布局起著很重要的作用。網站雖然千差萬別、數(shù)不勝數(shù)，但從本質上說，一般的網頁都包含標題、網站LOGO、頁眉、導航欄、內容板塊和頁腳等部分。常見的布局類型包括“同”字型布局、“匡”字型布局、“呂”字型布局及自由式布局?！巴弊中筒季猪撁骓敳繛樗椒胖玫闹鲗Ш綑?，其下大體上分為左中右三欄?！翱铩弊中筒季质前选巴弊中筒季钟疫叺膬热菀频降撞慷伞！皡巍弊中筒季值奶攸c是把頁面分為上下兩大塊，其中每一塊都具有“同”字型布局的特點。自由式布局通常以一幅精美的圖片作為設計中心，導航欄作為次要的設計元素，自由擺布，起到點綴、修飾和均衡的作用。在設計網站布局時，尼爾森F形狀模型和古騰堡法則是兩個重要的指導性法則。

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

1.4? 網站交互設計

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

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

1.5? 網站視覺設計

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

1.6? 網站安全設計

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

2? 結語

HTML5大型營銷型網站設計是一項復雜、艱巨的系統(tǒng)工程，要做好HTML5大型營銷型網站設計，所采用的方法很重要。本文提出的HTML5大型營銷型網站設計模式在多個大型HTML5網站的設計中得到驗證，采用此模式設計HTML5大型營銷型網站，網站的可用性、可擴展性、可維護性等質量屬性會有更好的保障，網站的用戶體驗及安全性也會更好。

參考文獻

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

[2]張友生. 軟件體系結構原理、方法與實踐（第2版）[M]. 清華大學出版社， 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]王電章， 曾軍. 網頁中視覺圖像傳播新理念——體驗設計[J]. 裝飾， 2007（9）： 54-55.

[7]彭綱. 論網頁的色彩[J]. 裝飾， 2004（2）： 94-94.

[8]陳琪莎. 色彩設計在網頁中的實際應用[J]. 包裝工程， 2006， 27（6）： 364-365.

[9]胡爽. 基于格式塔的網頁信息設計的美化研究[J]. 包裝工程， 2010（22）： 111-115.

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

[11]馬志強， 蔣曉. 基于用戶體驗的智能手機網站界面設計探討[J]. 包裝工程， 2012（16）： 63-66.

[12]周游舟. 基于模塊化的彈性擴展門戶網站架構設計[J]. 湖北大學學報（自然科學版）， 2019， 41（2）.

[13]趙磊. 高校網站建設安全問題分析與對策[J]. 軟件， 2015（9）.