淺談如何設(shè)計一個高質(zhì)量的網(wǎng)站

王俊華　陳哲來

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. 交互設(shè)計與視覺設(shè)計

交互設(shè)計

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

視覺設(shè)計

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

2. 前端后端程序編寫（Front-end devoloping）

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

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

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

四、長期的維護(hù)

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

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

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

2.網(wǎng)站推廣

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

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

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

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

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

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

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

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

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

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