王俊華　陳哲來(lái)

摘 要：高質(zhì)量的網(wǎng)站設(shè)計(jì)是一種企業(yè)品牌，企業(yè)可以依托這個(gè)平臺(tái)展示自己的產(chǎn)品、經(jīng)營(yíng)理念和企業(yè)文化，樹(shù)立企業(yè)形象。通過(guò)分析網(wǎng)站建設(shè)中存在的一些問(wèn)題，針對(duì)性地介紹如何設(shè)計(jì)一個(gè)好的網(wǎng)站。

關(guān)鍵詞：網(wǎng)站;企業(yè);網(wǎng)頁(yè)設(shè)計(jì)

一個(gè)高質(zhì)量網(wǎng)站的設(shè)計(jì)應(yīng)該是定位清晰準(zhǔn)確，用戶一看到就明白網(wǎng)站是做什么，都有哪些內(nèi)容。優(yōu)秀的網(wǎng)站設(shè)計(jì)本身就是一種品牌，就自帶吸引力和自我營(yíng)銷的功能。

一、網(wǎng)站設(shè)計(jì)目的

首先是樹(shù)立企業(yè)形象，與顧客共鳴公司理念。比如倡導(dǎo)一種前瞻性的生活理念，可以通過(guò)宣傳片，視頻，將產(chǎn)品融入生活。其次是公司產(chǎn)品介紹、做廣告，宣傳形式有圖片、音視頻、文字介紹還有AR技術(shù)（看產(chǎn)品大小尺寸）;再次是引流，提高客戶主觀能動(dòng)性，比如掃二維碼加入微信群聊，從傳統(tǒng)的單向宣傳，讓客戶主動(dòng)去獲取信息（節(jié)日限定，打折活動(dòng)等信息）。

二、網(wǎng)站設(shè)計(jì)中存在的主要問(wèn)題

網(wǎng)站是現(xiàn)代社會(huì)公司的核心，有人這么評(píng)論一個(gè)公司網(wǎng)站的重要性：一個(gè)公司好不好，上他官網(wǎng)看看就知道了，如果他的官網(wǎng)都做得一團(tuán)糟，那他家的產(chǎn)品也好不到哪去。普通消費(fèi)者基于網(wǎng)站的一些簡(jiǎn)單的用戶體驗(yàn)，喜歡抱怨如下幾點(diǎn)：

1.這個(gè)網(wǎng)站好垃圾，顏色真丑，畫(huà)風(fēng)幼稚，看起來(lái)很老年人風(fēng)格。

2.這個(gè)網(wǎng)站好垃圾，人一多就卡的要死。

3.這個(gè)網(wǎng)站好垃圾，我根本找不到XXX按鈕在哪里。

4.這個(gè)網(wǎng)站好垃圾，手機(jī)打開(kāi)字體都亂了，根本無(wú)法用手機(jī)瀏覽下單等等。

在專業(yè)設(shè)計(jì)師看來(lái)，這些抱怨可以都可以歸集為網(wǎng)頁(yè)設(shè)計(jì)問(wèn)題：

1.網(wǎng)站的UI（用戶界面），頁(yè)面風(fēng)格，繪圖風(fēng)格，LOGO，產(chǎn)品形象設(shè)計(jì)未能跟上時(shí)代潮流，如現(xiàn)在流行蘋(píng)果引領(lǐng)的簡(jiǎn)潔風(fēng)，如果用很深陰影的字體，大紅大紫的顏色，必然讓人感覺(jué)這個(gè)網(wǎng)頁(yè)活在70年代。

2.網(wǎng)站的服務(wù)器、網(wǎng)速帶寬、后端程序設(shè)計(jì)者等缺陷，這是網(wǎng)站非常重要的一個(gè)環(huán)節(jié)，該環(huán)節(jié)會(huì)嚴(yán)重影響用戶體檢的好壞，這就好比一個(gè)手機(jī)用起來(lái)卡不卡，直接關(guān)系到性能問(wèn)題。不過(guò)這個(gè)是可以通過(guò)投入資金技術(shù)來(lái)解決的，通過(guò)租用優(yōu)質(zhì)的服務(wù)器、雇傭熟練的網(wǎng)頁(yè)搭建者等等，都可以獲得較好的用戶體驗(yàn)。

3.網(wǎng)頁(yè)的兼容性問(wèn)題，即響應(yīng)式設(shè)計(jì)。大部分情況，一個(gè)網(wǎng)頁(yè)要能夠適配不同的設(shè)備，PC，手機(jī)，平板，優(yōu)秀一點(diǎn)的可能可以適配一下穿戴設(shè)備，例如Apple Watch等。響應(yīng)式網(wǎng)站設(shè)計(jì)是一種網(wǎng)絡(luò)頁(yè)面設(shè)計(jì)布局，其理念是：集中創(chuàng)建頁(yè)面的圖片排版大小，可以智能地根據(jù)用戶行為以及使用的設(shè)備環(huán)境進(jìn)行相對(duì)應(yīng)的布局。不適配手機(jī)等其他設(shè)備帶來(lái)的直接影響就是字體錯(cuò)亂，字體會(huì)過(guò)大或者過(guò)小，讓用戶失去使用該網(wǎng)頁(yè)的興趣，用戶失去興趣帶來(lái)的后果是巨大的。適配手機(jī)不僅僅是排版的設(shè)計(jì)，甚至可以利用手機(jī)的特性，例如關(guān)聯(lián)微信、使用攝像頭的AR技術(shù)展示產(chǎn)品等等。

4.當(dāng)用戶反映找不到想找的網(wǎng)頁(yè)功能按鈕的時(shí)候，這就是網(wǎng)頁(yè)交互設(shè)計(jì)者的責(zé)任了。網(wǎng)頁(yè)交互設(shè)計(jì)者在設(shè)計(jì)UI的時(shí)候絕對(duì)不是隨意發(fā)揮靈感，更不能隨心所欲地亂放置用戶可以“點(diǎn)擊”的按鈕。這里我要引入規(guī)范專業(yè)名詞：用戶友好型交互設(shè)計(jì)（User friendly design），用戶可用性（Usability）。這兩個(gè)詞是用來(lái)描述某種設(shè)計(jì)能否提供一種優(yōu)秀的產(chǎn)品與用戶的交互。例如上面提到很多用戶反映找不到想要的功能按鈕，這個(gè)設(shè)計(jì)就是嚴(yán)重用戶不友好型的。最理想的情況是，用戶需要一個(gè)功能的時(shí)候，他覺(jué)得這個(gè)功能應(yīng)該如何使用（有的時(shí)候也會(huì)認(rèn)為這個(gè)功能按鈕應(yīng)當(dāng)出現(xiàn)在哪里），用戶順著自己的思路，應(yīng)該能夠找到這個(gè)功能。例如，當(dāng)我作為用戶，我想要購(gòu)買商品的時(shí)候，我很自然地將鼠標(biāo)移動(dòng)到商品的下方，然后我會(huì)很自然地發(fā)現(xiàn)，有一個(gè)寫(xiě)著“購(gòu)買”的按鈕就在那里，我立刻就可以點(diǎn)擊，并完成購(gòu)買。這是一種簡(jiǎn)單的情況，我們最不想看到的問(wèn)題是，如果用戶希望退款，或者聯(lián)系客服（這通常是最考驗(yàn)一個(gè)網(wǎng)頁(yè)用戶體驗(yàn)的地方），用戶怎么也打不開(kāi)和客服溝通的聊天對(duì)話框，這會(huì)讓用戶感到非常痛苦。

一些大企業(yè)有的時(shí)候會(huì)自作聰明，把他們不希望用戶使用的功能設(shè)定在非常隱晦的地方，例如某網(wǎng)盤、某會(huì)員的自動(dòng)續(xù)費(fèi)功能取消按鈕就非常難找，這種都是企業(yè)為了蠅頭小利而自作聰明的方法，不僅給用戶帶來(lái)很好的非常不友好的體驗(yàn)，也給公司名譽(yù)帶來(lái)了不必要的損失。

三、搭建網(wǎng)站的重要環(huán)節(jié)

在策劃階段，就要圍繞著公司需求及網(wǎng)站功能點(diǎn)，將其一一解析出來(lái)，并整理成冊(cè)為：PRD產(chǎn)品需求文檔。設(shè)計(jì)者會(huì)根據(jù)制定好PRD的內(nèi)容繪出用戶友好型的網(wǎng)頁(yè)交互界面。當(dāng)設(shè)計(jì)者完成任務(wù)后，前后端程序編寫(xiě)者就要來(lái)具體實(shí)現(xiàn)這些精美的網(wǎng)頁(yè)界面了。當(dāng)具體開(kāi)始搭建網(wǎng)站的時(shí)候，主要任務(wù)分為兩塊內(nèi)容：設(shè)計(jì)和程序?qū)崿F(xiàn)。

1. 交互設(shè)計(jì)與視覺(jué)設(shè)計(jì)

交互設(shè)計(jì)

細(xì)分的話，UXdesigner做的是交互設(shè)計(jì)，UIdesigner做的是視覺(jué)設(shè)計(jì)，但是大部分時(shí)間，UI/UX是同一個(gè)人。交互設(shè)計(jì)會(huì)具體到每一個(gè)按鈕放在哪個(gè)位置，如何設(shè)計(jì)出用戶友好型的交互界面，如何讓用戶在最短的時(shí)間內(nèi)獲取最多的產(chǎn)品信息，在新技術(shù)的采用上，要考慮主要目標(biāo)訪問(wèn)群體的分布地域、年齡階層、網(wǎng)絡(luò)速度、閱讀習(xí)慣;交互設(shè)計(jì)師得根據(jù)需求文檔，合理地組織網(wǎng)站框架，建立一級(jí)、二級(jí)導(dǎo)航欄目，規(guī)劃網(wǎng)站內(nèi)頁(yè)的瀏覽路徑，以及頁(yè)面跳轉(zhuǎn)關(guān)系。通常會(huì)用Sketch、或OminiGraffle、mindnote等軟件來(lái)梳理頁(yè)面邏輯及框架結(jié)構(gòu)，以完成交互設(shè)計(jì)稿的繪制。以便網(wǎng)站受眾在瀏覽過(guò)程中能高效、愉悅地獲取到他們想要的信息，合理的網(wǎng)頁(yè)布局能給人一種視覺(jué)上的沖擊力，從而為宣傳、推廣等奠定良好的基礎(chǔ)。

視覺(jué)設(shè)計(jì)

視覺(jué)設(shè)計(jì)更像是美術(shù)設(shè)計(jì)，它們會(huì)讓一個(gè)功能性的網(wǎng)站變成一個(gè)藝術(shù)品，網(wǎng)頁(yè)美術(shù)設(shè)計(jì)一般要與企業(yè)整體形象一致，也要注意網(wǎng)頁(yè)色彩、圖片的應(yīng)用及版面規(guī)劃，保持網(wǎng)頁(yè)的整體一致性。具體來(lái)說(shuō)，設(shè)計(jì)師主要根據(jù)交互設(shè)計(jì)稿，確定網(wǎng)站內(nèi)頁(yè)的具體設(shè)計(jì)規(guī)范，包括網(wǎng)站顏色VI的選用、字體字號(hào)大小、以及素材的編排、選取及處理、每一根線條、每一個(gè)像素。將所有頁(yè)面設(shè)計(jì)稿完畢后，標(biāo)注好尺寸、顏色等數(shù)值信息，輸出必要的圖片、icon等資源，打包好后一并交給Web前端工程師。

2. 前端后端程序編寫(xiě)（Front-end devoloping）

Web前端，也就是在Web應(yīng)用中用戶可以看得見(jiàn)碰得著的東西。包括Web頁(yè)面的結(jié)構(gòu)、Web的外觀視覺(jué)表現(xiàn)以及Web層面的交互實(shí)現(xiàn)。這個(gè)環(huán)節(jié)的主角是Web前端工程師。其主要根據(jù)網(wǎng)頁(yè)設(shè)計(jì)師出具的設(shè)計(jì)稿，運(yùn)用HTML、CSS代碼實(shí)現(xiàn)頁(yè)面重構(gòu)和頁(yè)面邏輯跳轉(zhuǎn)，運(yùn)用JavaScript、JQuery等技術(shù)優(yōu)化網(wǎng)站瀏覽體驗(yàn)，以及網(wǎng)站界面交互動(dòng)效、功能實(shí)現(xiàn)的制作。注意：在這個(gè)過(guò)程中會(huì)遇到些許問(wèn)題，作為網(wǎng)頁(yè)設(shè)計(jì)師要及時(shí)與之溝通，一起將界面的細(xì)節(jié)做到99%還原設(shè)計(jì)稿。

Web后端更多的是與數(shù)據(jù)庫(kù)進(jìn)行交互以處理相應(yīng)的業(yè)務(wù)邏輯。這個(gè)環(huán)節(jié)的主角是Web后端工程師，通常要用到PHP、java、C語(yǔ)言或C++等編程技術(shù)。需要考慮的是如何實(shí)現(xiàn)功能、平臺(tái)的穩(wěn)定性與性能、邏輯處理、數(shù)據(jù)的提交存儲(chǔ)、更新修改、查詢等。具體應(yīng)用例如實(shí)現(xiàn)發(fā)文章、刪除文章，點(diǎn)贊、評(píng)論、注冊(cè)用戶、購(gòu)買等功能。

在后端制作完成后，開(kāi)始本地測(cè)試以檢驗(yàn)其可靠性。在排除bug等問(wèn)題后，就可準(zhǔn)備上線了。準(zhǔn)備好域名和服務(wù)器，最后檢查服務(wù)器的配置工作， DNS解析，將域名和服務(wù)器連接起來(lái)。當(dāng)然，穩(wěn)定性和安全性一定要測(cè)試。最后再運(yùn)用FTP工具上傳資料到服務(wù)器，該網(wǎng)站就可以正常訪問(wèn)了。

四、長(zhǎng)期的維護(hù)

一個(gè)網(wǎng)站上線后絕對(duì)不是馬拉松到了終點(diǎn)，甚至可以理解為馬拉松剛剛開(kāi)始。開(kāi)發(fā)網(wǎng)站的團(tuán)隊(duì)不能解散，他們從開(kāi)發(fā)者變成了維護(hù)者。網(wǎng)站的維護(hù)要分前期和后期維護(hù)以及長(zhǎng)久維護(hù)，相對(duì)來(lái)說(shuō)后期維護(hù)耗費(fèi)的人力較多，隨著網(wǎng)站的規(guī)模越來(lái)越大，維護(hù)的費(fèi)用會(huì)相對(duì)增加。例如有對(duì)服務(wù)器及相關(guān)軟硬件的維護(hù)，對(duì)可能出現(xiàn)的問(wèn)題進(jìn)行評(píng)估，制定響應(yīng)時(shí)間。還有對(duì)數(shù)據(jù)庫(kù)的維護(hù)、每日更新的內(nèi)容等。

1.網(wǎng)頁(yè)內(nèi)容維護(hù)

網(wǎng)頁(yè)的內(nèi)容如果一成不變，會(huì)給人視覺(jué)疲勞。如果一個(gè)月前登錄的網(wǎng)站上的內(nèi)容和一個(gè)月后的內(nèi)容完全相同，客戶也許會(huì)認(rèn)為這個(gè)網(wǎng)站的管理者是個(gè)懶人。相應(yīng)的，網(wǎng)頁(yè)內(nèi)容要實(shí)時(shí)更新，及時(shí)對(duì)接產(chǎn)品部門，給出產(chǎn)品精美圖片和簡(jiǎn)介等，這些都是讓網(wǎng)站保持鮮活度的方式。

2.網(wǎng)站推廣

網(wǎng)站建設(shè)完后需要有流量。網(wǎng)站如何獲得流量就需要做好網(wǎng)站推廣了。以下是一些常規(guī)的推廣方法：

（1）在公共場(chǎng)所發(fā)布廣告，增加網(wǎng)站曝光。這種推廣需要一些資金投入，企業(yè)可根據(jù)自身情況選擇。

（2）在各大網(wǎng)站發(fā)布軟文，發(fā)帖吸引流量。

（3）選擇搜索引擎競(jìng)價(jià)排名。目前國(guó)內(nèi)主流的搜索引擎是百度，可以選擇百度競(jìng)價(jià)排名。

（4）聘請(qǐng)專業(yè)人員或公司做好優(yōu)化，提高網(wǎng)站搜索引擎排名。

（5）制定網(wǎng)頁(yè)改版計(jì)劃，如半年到一年時(shí)間進(jìn)行較大規(guī)模改版等。

3、網(wǎng)站安全維護(hù)

網(wǎng)站安全維護(hù)，是指出于防止網(wǎng)站受到外來(lái)電腦入侵者對(duì)其網(wǎng)站進(jìn)行掛馬、篡改網(wǎng)頁(yè)等行為而做出一系列的防御工作。由于一個(gè)網(wǎng)站設(shè)計(jì)者更多地考慮滿足用戶應(yīng)用，如何實(shí)現(xiàn)業(yè)務(wù)。很少考慮網(wǎng)站應(yīng)用開(kāi)發(fā)過(guò)程中所存在的漏洞，這些漏洞在不關(guān)注安全代碼設(shè)計(jì)的人員眼里幾乎不可見(jiàn)，大多數(shù)網(wǎng)站設(shè)計(jì)開(kāi)發(fā)者、網(wǎng)站維護(hù)人員對(duì)網(wǎng)站攻防技術(shù)的了解甚少;在正常使用過(guò)程中，即便存在安全漏洞，正常的使用者并不會(huì)察覺(jué)。

大多數(shù)網(wǎng)站設(shè)計(jì)，只考慮正常用戶穩(wěn)定使用。但在黑客對(duì)漏洞敏銳的發(fā)覺(jué)和充分利用的動(dòng)力下，網(wǎng)站存在的這些漏洞就被挖掘出來(lái)，且成為黑客們直接或間接獲取利益的機(jī)會(huì)。對(duì)于Web應(yīng)用程序的SQL注入漏洞，有試驗(yàn)表明，通過(guò)搜尋1000個(gè)網(wǎng)站取樣測(cè)試，檢測(cè)到有15%的網(wǎng)站存在SQL注入漏洞。因此，在維護(hù)網(wǎng)站的時(shí)候，一定要考慮到網(wǎng)站的安全性，架好防火墻。

總之，網(wǎng)站建設(shè)是一項(xiàng)復(fù)雜且長(zhǎng)期的工作。企業(yè)網(wǎng)站在現(xiàn)代及未來(lái)的互聯(lián)網(wǎng)社會(huì)將成為不可缺少的企業(yè)識(shí)別標(biāo)志之一。