網站基礎知識全攻略：為使用者打造優質流暢的資訊平臺

隨著移動端裝置的廣泛普及與深入應用，大眾早已習慣透過智慧手機和平板電腦來獲取各類資訊。然而，這並不意味著我們可以忽視PC端網站的設計與最佳化。畢竟，仍有一部分使用者習慣使用PC來訪問網站，確保PC端網站的優質體驗同樣至關重要。

因此，在著手網站視覺呈現之前，我們需深入掌握網站設計的基礎知識，以構建一個為使用者提供更優質、流暢的資訊平臺。

一、掌握網站設計的工作流程

網站專案流程大致可分為以下幾個階段：原型圖設計、視覺稿設計、設計規範制定、切圖準備、前端程式碼開發、專案走查。儘管多數設計師更關注視覺稿設計階段，但網頁製作的前期與後期工作同樣不容忽視，具體包括：

原型圖階段：設計師需與產品經理緊密溝通，明確需求，以確保視覺效果的最佳化呈現。

視覺稿階段：根據原型圖確定的內容與版式，完成網站介面的整體設計。

設計規範階段：視覺稿透過後，設計師需總結設計規範，明確所有頁面上的共性元素，如字型大小、圖片尺寸、按鈕樣式等。

切圖階段：雖然網頁設計師通常無需為前端設計師切圖，但在特殊情況下，仍需為前端提供所需的圖片資源。

前端程式碼階段：前端設計師透過程式碼重構設計頁面，並與後端程式設計師對接，調取資料介面。設計師與程式設計師會共同對網站進行埋點，以監控網站是否達到預期的資料指標。

專案走查階段：網頁製作完成後，設計師需進行走查，確保網頁還原度符合預期。如有出入，需與前端設計師協商調整。

二、瞭解網站設計的型別

網站設計按對象可分為To C（面向使用者和消費者）和To B（面向商家或企業）兩大類。以下是常見的設計型別：

▌  To C 網站設計型別：

入口網站：提供綜合性的網際網路資訊資源與服務，如新聞、天氣、股票、體育等實時資訊，以及搜尋引擎、郵箱、即時通訊等線上服務。設計上強調資訊的聚合與分類，便於使用者快速找到所需內容。

企業網站：主要用於介紹和宣傳企業本身，內容涵蓋企業介紹、產品介紹、技術服務等。設計上追求高階、大氣、上檔次的風格，以提升品牌形象。

產品網站：專注於展示特定產品的工藝、技術、設計、特點、構造、使用場景等。設計上常採用全屏佈局，配合視差滾動等方式，營造沉浸式體驗。

網上商店：提供線上購物平臺，支援商品展示、購物車、線上支付等功能。設計上注重使用者體驗，包括商品搜尋、篩選、比較、評價等功能的便捷性，以及購物流程的順暢性。

專題頁面：針對特定主題或事件設計的頁面，如節日促銷、新品釋出等。設計上強調視覺衝擊力和互動性，以吸引使用者關注並參與。

影片網站：提供影片播放、分享、評論等服務。設計上考慮使用者的使用場景，如影片區域要足夠大，顏色以暗色為主以減少干擾，同時提供相關影片推薦、點贊等功能。

移動端H5：運用網頁技術，在手機瀏覽器或內建瀏覽器內展示的網頁，常用於營銷活動。設計上注重創意和互動性，以吸引使用者分享和傳播。

▌ To B 網站設計型別：

後臺網站（Dashboard）：透過資料視覺化方式快速展示操作者所需的資料。設計上注重效率，無需過多裝飾元素。通常採用全屏式排版，小屏時則按比例縮小各元素。

CRM系統：企業用於客戶資訊化管理的系統。設計上需將資訊按邏輯關係分類，加強對比、對齊、重複、親密性原則，提升使用者體驗。

企業OA：出於安全和保密性考慮，許多公司選擇自行開發。設計上需以使用者體驗和效率為重，讓使用者能夠輕鬆找到當前頁面中最重要的功能。

三、瞭解網站設計的組成部分

首頁：使用者訪問網站時首先接觸的頁面，相當於書籍的目錄，引導使用者進入不同區域。首頁設計需包含導航設計和部分內容展示，以吸引使用者點選進入二級頁面。

二級頁面：網站層級一般不超過三級，以避免過於複雜影響搜尋引擎爬行和使用者體驗。二級頁面及以下需加入麵包屑導航，方便使用者瞭解自己的位置並返回其他頁面。

底層頁：提供使用者實質資訊的頁面，需設計推薦相關資訊板塊等，以吸引使用者繼續閱讀或返回上一層級。

廣告：網站盈利的重要方式之一，包括Banner、對聯廣告、資訊流廣告等。設計師需根據廣告型別和位置進行合理設計，確保廣告效果與使用者體驗的平衡。

Footer：網頁底部的區域，顏色通常較暗且邏輯級別較低。設計時需酌情降級處理，避免過於顯眼。

四、瞭解網頁製作技術的原理

網頁製作技術原理決定了哪些設計和互動可以實現，以及網頁設計師如何與前端設計師協作完成複雜的互動效果。

基於滑鼠的互動：主要包括超連結與按鈕的互動狀態，如Link（正常狀態）、Visited（已點選狀態）、Hover（滑鼠經過狀態）、Active（啟用狀態）。按鈕還具備「不可點選」狀態，以提示使用者當前條件不滿足。

靜態網頁：由HTML編譯而成，儲存在伺服器上的網頁程式碼基本為HTML格式。HTML語言簡單易懂，但僅使用HTML會導致伺服器損耗較大。CSS技術的出現解決了這一問題，透過將網站樣式與內容分離，節省伺服器資源。JavaScript程式碼則可配合HTML和CSS使用，構建瀏覽器特效。

動態網頁：隨時間、內容和資料庫呼叫而動態生成的網頁，程式碼形式主要包括Asp、Php、Jsp等。為提升網站效率，有時會使用偽靜態結構。

動畫：實現動畫的原理包括HTML5影片播放、Flash Player播放器播放、Gif格式、CSS Sprite等。每種方式都有其優缺點，設計師需根據需求選擇合適的動畫方式。 視差滾動：利用程式碼判定網頁滾動，使頁面元素運動速率和位移距離不同，實現空間感。

五、瞭解網頁設計的規範

在設計之前，網頁設計師需與前端設計師溝通網頁所需的尺寸、字型、互動等，以避免後續誤會。

網頁尺寸：需考慮使用者螢幕的多樣性，設計稿主要顧及主流使用者的解析度，其他解析度透過適配方式解決。

文字規範：文字在瀏覽器上的渲染與系統和瀏覽器有關。儘管設計師可能使用Apple Mac設計網頁，但需確保網頁設計效果與Windows系統顯示一致。字號大小一般選用12-20px，以確保中文文字的清晰顯示和適配性。

圖片規範：網頁設計中圖片常用比例包括4:3、16:9、1:1等。具體圖片大小無固定要求，但整數和偶數為佳。

按鈕：按鈕風格經歷了從「斜面與浮雕」到「擬物風格」再到「扁平風格」的演變。如按鈕在圖片中，為不影響圖片美觀性，可去掉填充並保留邊框。

表單：表單控制元件一般直接呼叫系統設計，如無法滿足要求，可透過CSS增加表單樣式。

柵格：柵格系統能大大提高網頁的規範性，使頁面所有元件的尺寸都有規律。基於柵格進行設計，可保持整個網站各個頁面的佈局一致，提升使用者體驗。

自適應與響應式網站：隨著移動端瀏覽網站的使用者增多，網站需進行自適應或響應式佈局。自適應網站的設計稿一致，但需考慮螢幕變小時的變化方式；響應式網站則需設計不同版本的設計稿，根據不同裝置提供不同的CSS樣式。

無論是To C還是To B網站，在設計網頁時都應遵循上述步驟，建立視覺規範，並嘗試在網站設計中加入互動設計，以提升使用者操作體驗的流暢性。網站製作完成後，別忘了對網站專案進行走查，找出並解決網站上的BUG。

香港網頁提供一站式數碼營商方案服務，包括、網頁設計、網絡推廣、網頁管理與寄存、系統開發及其它增值服務，全方位滿足客戶的業務需要，歡迎隨時聯絡我們，香港網頁是您開拓網路商機的最佳伙伴。

聯絡電話: 852-3749 9734

電郵地址: info@hkweb.com.hk

網址: https://hkweb.com.hk