數位行銷
網頁設計
在這篇深度解析的文章中，我們將探討 網頁設計 工作流程和相關知識。網頁設計 為一門複雜的藝術和科學，需要各種專業人才的互相配合，才能完成一個網站專案
一、網頁設計是什麼？
網頁設計，又稱Web Design、網站設計、Website design、Web User Interface（網頁使用者介面）等，其核心在於構建網站的圖形介面。
儘管如今我們習慣使用手機APP來獲取資訊，但桌面型電腦的網站瀏覽歷史比手機更為悠久。
在1990 年代晚期至 2000 年代初期，電腦顯示器和螢幕技術還在發展階段，因當時硬體和顯示技術的限制，螢幕解析度僅為800×600像素（相比之下，iPhone 8的解析度為750x1334px）。
網路速度也相當緩慢，網路經常斷線，那時的網站效能和使用體驗都不理想。
現今的網站設計已經經歷了巨大的變革：強調使用者體驗、注重頁面動態效果、以及加入自媒體等元素，使得桌面型電腦的網站體驗不亞於軟體和手機APP。
隨著個人電腦的普及，網站仍然是人機互動中不可或缺的重要平台。
身為UI設計師，我們必須深入瞭解網頁設計工作流程和相關知識，才能稱得上是一門專業。
本文將深入探討網站設計的重要知識，為您揭開這個領域必須了解的重要面向。
二、網頁設計工作流程
在網站建置設計前，需進行使用者研究、需求分析、市場調查、以及進行競品調查等工作，與設計師緊密相關的網站專案流程可以細分為六個主要階段：
原型圖、視覺稿、網頁設計規範、切圖、前端程式碼、以及驗收審核。在每一個階段中，設計師的參與和了解都是非常重要的。
設計師不應只專注於視覺稿，因為在前後期的工作中同樣需要設計師的參與。
1. 原型圖階段(Prototype 和 Wireframe)
在原型圖階段，設計師需要與客戶、專案經理進行深入的需求溝通。這一過程中值得注意的是，這不僅僅是客戶、專案經理向設計師溝通需求的過程，而是雙方需要在各自擅長的領域進行有效的溝通。
在視覺方面的呈現中，設計師可能擁有更好的美感及工作方式，因此在進行實際設計之前，與客戶、專案經理達成共識非常重要。
設計師和客戶、專案經理都需要充分理解彼此的期望，已實現最佳的設計結果。
"Prototype" 和 "Wireframe" 在網站設計和應用程式開發中是兩個不同的概念，它們在設計階段扮演不同的角色。
1.1 Wireframe（線框圖）：
定義： Wireframe 是一種簡單的視覺工具，用來展示網頁或APP的基本結構和佈局，通常只有基本的框架、區塊和元素，不包含細節和設計風格。
功能： 主要用於簡單地傳達版面配置、結構和互動元素的位置，以便團隊成員之間更容易討論和理解設計。
1.2 Prototype（原型）：
定義：Prototype 是更進一步的設計階段，展示了網頁或應用程式的功能、互動和流程。
相較於 Wireframe，Prototype 通常包含更多詳細的互動元素，例如按鈕的行為、頁面之間的轉換，以及基本的功能DEMO。
功能： 用於模擬和測試使用者與應用的實際互動，更全面地呈現最終產品的使用體驗。通常在 Wireframe 完成後，進一步發展成 Prototype。
Wireframe 主要關注於結構和配置，而 Prototype 則進一步呈現了功能和互動，使團隊能夠更好地理解最終產品的工作方式。在項目的不同階段，這兩者都可能被使用，以確保設計和開發的順利進行。
2. 視覺稿階段
用來指在網頁設計中，根據原型圖確定的內容完成的介面設計，其主要目的是視覺上呈現最終網站的外觀和風格。
比如尤其在製作特定主題的網站時，設計師需要運用圖像和靈感素材來模擬相關情境，這時候設計師可以用"Mood Board"（情緒板）的概念來設計網頁。
2.1 Mood Board（情緒板）：
是一種視覺工具，用於收集和展示特定主題、網頁或設計風格相關的資料和素材，它的目的是在設計和創意過程中提供靈感，幫助確立網頁的視覺風格和情感調性。
情緒板可以包含各種元素，如圖片、顏色樣本、文字、圖表等，這些元素結合在一起，形成一張視覺呈現的大畫面。幫助創作者和團隊更好地了解網頁的氛圍、情感和風格，並且讓設計在整體感覺上保持一致。
在設計領域中，情緒板常被用於啟發創意，激發新點子，並作為設計過程中的參考點。它可以是手工製作的實體板，也可以是數位形式的電子板，視項目的需求和團隊的偏好而有所不同。情緒板是一種簡單而有效的工具，幫助確保設計在視覺上傳達出預期的情感和風格。
2.2 網頁設計的視覺模型 Visual Mockup for Web Design：
推薦工具：Sketch
視覺稿用於呈現網頁設計的視覺外觀，突顯了其在視覺效果呈現方面的功能。
三. 網頁設計規範 Web Design Guidelines
推薦工具：https://getbootstrap.com/
完成視覺稿後，許多設計師可能忽視了制定設計規範的步驟。
對於每個可迭代的網站專案，網頁設計師的角色非常重要，網頁設計師需要制定一套網頁設計規範。這些設計規範有所有頁面中共通的元素，例如字體大小的一致性、圖片尺寸的統一、按鈕樣式等，這些共通元素在用戶訪問網站時構建了一種穩定的認知基礎。
舉例來說，如果相同的分享功能採用了兩種迥異的樣式，可能會使使用者感到混淆。
所以設計規範的主要目的是約束設計師的創意，以減少用戶在有限記憶力下的認知成本。
但設計規範也讓同一專案中的不同設計師都能產出相同風格的設計。
設計師應該積極參與制定設計規範和進行專案總結。
四.切圖(Slicing)
推薦工具：PHOTOSHOP
將設計師提供的網頁設計檔案（通常是圖像或視覺稿）轉換為前端開發所需的HTML、CSS、以及可能的圖片檔案。這個過程通常由前端工程師負責。
切圖的主要目的是將視覺設計轉換為網站的實際元素和結構，使其可以在瀏覽器中正確呈現。包含切割圖片、HTML和CSS，讓網站在不同螢幕大小和設備上都能正確顯示和運作。
有時候，設計師可能不直接進行切圖工作，而是將設計稿提供給前端工程師，由他們負責將設計轉為互動網頁。
五. 前端的程式碼 Frontend Code
推薦工具：https://code.visualstudio.com/
就像網站的魔法師一樣，前端工程師具備將設計師的視覺頁面轉化為互動網頁的神奇能力。
他們也需與後端的工程師之間展現出一種極致的合作，宛如一場默契的舞蹈，使整個網站能夠在展現的同時靈活地獲取所需的資料。
這可是啟動整個網站活力的第一步。
為了方便評估網站是否達到我們對行銷資訊的要求，需要埋入GA4或FACEBOOK像素，這樣就能輕鬆地追蹤並分析哪些頁面的訪問量高，哪些沒有達到預期。
之後，我們會邀請所有人一同參與測試網站，仔細檢查網站是否存在需要改進的細節問題。
這一連串的步驟讓網站不僅能夠正常運作，還能夠達到預期的效果。
六. 網站驗收審核
網頁設計完成後需進行網站驗收審核，確認網頁是否達到預期水準。
如果發現與設計稿有明顯不同，就需要與前端工程師合作進行調整。
這個步驟非常重要，因為網站的最終成品才是我們真正的作品，我們不能僅僅因為設計稿看起來漂亮而忽視實際頁面的品質。
可以參考相關文章：
LOUIS VUITTON 線上購物網站設計分析
網頁設計 問與答：
網站建置 報價相關 https://des13.com/faq/quote.html
網站建置 技術相關 https://des13.com/faq/webtech.html
B2B形象官網建置 https://des13.com/faq/b2b.html
網站升級維護 https://des13.com/faq/upgrade.html
推薦閱讀：全後台模組化形象官網
簡易電子書下載：一頁式網頁設計電子書
如果您喜歡我們的文章，歡迎分享！也歡迎查看我們的其他文章。如果有任何疑問也歡迎加line和我們聯絡
全後台模組化形象官網，符合各式商業模式與需求，請參考：https://des13.com/service/rwd.html
Written by Ring
作者：益盛科技 專案經理
通過Google Ads-Measurement Assessment
15年 網站專案管理及人員管理實務經驗。
具網站美編企劃繪製能力
具多媒體網頁設計與 RWD設計之實務經驗
