淺談如何設計一個高質量的網站

王俊華　陳哲來

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

關鍵詞：網站;企業;網頁設計

一個高質量網站的設計應該是定位清晰準確，用戶一看到就明白網站是做什么，都有哪些內容。優秀的網站設計本身就是一種品牌，就自帶吸引力和自我營銷的功能。

一、網站設計目的

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

二、網站設計中存在的主要問題

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

1.這個網站好垃圾，顏色真丑，畫風幼稚，看起來很老年人風格。

2.這個網站好垃圾，人一多就卡的要死。

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

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

在專業設計師看來，這些抱怨可以都可以歸集為網頁設計問題：

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

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

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

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

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

三、搭建網站的重要環節

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

1. 交互設計與視覺設計

交互設計

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

視覺設計

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

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

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

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

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

四、長期的維護

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

1.網頁內容維護

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

2.網站推廣

網站建設完后需要有流量。網站如何獲得流量就需要做好網站推廣了。以下是一些常規的推廣方法：

（1）在公共場所發布廣告，增加網站曝光。這種推廣需要一些資金投入，企業可根據自身情況選擇。

（2）在各大網站發布軟文，發帖吸引流量。

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

（4）聘請專業人員或公司做好優化，提高網站搜索引擎排名。

（5）制定網頁改版計劃，如半年到一年時間進行較大規模改版等。

3、網站安全維護

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

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

總之，網站建設是一項復雜且長期的工作。企業網站在現代及未來的互聯網社會將成為不可缺少的企業識別標志之一。