數位行銷

網頁設計 必備指南:工作流程和相關知識

在這篇深度解析的文章中,我們將探討 網頁設計 工作流程和相關知識。網頁設計 為一門複雜的藝術和科學,需要各種專業人才的互相配合,才能完成一個網站專案

 

一、網頁設計是什麼?

網頁設計,又稱Web Design、網站設計、Website design、Web User Interface(網頁使用者介面)等,其核心在於構建網站的圖形介面。

儘管如今我們習慣使用手機APP來獲取資訊,但桌面型電腦的網站瀏覽歷史比手機更為悠久。

在1990 年代晚期至 2000 年代初期,電腦顯示器和螢幕技術還在發展階段,因當時硬體和顯示技術的限制,螢幕解析度僅為800×600像素(相比之下,iPhone 8的解析度為750x1334px)。

網路速度也相當緩慢,網路經常斷線,那時的網站效能和使用體驗都不理想。

現今的網站設計已經經歷了巨大的變革:強調使用者體驗、注重頁面動態效果、以及加入自媒體等元素,使得桌面型電腦的網站體驗不亞於軟體和手機APP。

隨著個人電腦的普及,網站仍然是人機互動中不可或缺的重要平台。

身為UI設計師,我們必須深入瞭解網頁設計工作流程和相關知識,才能稱得上是一門專業。

本文將深入探討網站設計的重要知識,為您揭開這個領域必須了解的重要面向。

 

二、網頁設計工作流程

在網站建置設計前,需進行使用者研究、需求分析、市場調查、以及進行競品調查等工作,

網頁設計 並非一蹴而就,而是由多個環節組成,常見的設計流程如下:

  1. 原型圖階段(Prototype & Wireframe)

  2. 視覺稿(Visual Mockup)

  3. 網頁設計規範(Design Guidelines)

  4. 切圖(Slicing)

  5. 前端程式碼(Frontend Development)

  6. 響應式設計(Responsive Web Design)

  7. 網站速度與效能優化(Performance Optimization)

  8. 使用者體驗(UX)與可用性測試(Usability Testing)

  9. SEO 與技術優化(SEO & Technical Optimization)

  10. 無障礙網頁設計(Web Accessibility, WCAG)

  11. 網站驗收審核(Quality Assurance)

在每一個階段中,設計師的參與和了解都是非常重要的。

設計師不應只專注於視覺稿,因為在前後期的工作中同樣需要設計師的參與。

而成功的網頁設計不僅需要美觀的視覺效果,還要有完善的工作流程與測試機制。

無論是初創公司還是大型企業,都應該重視 Wireframe、視覺稿、設計規範與前端開發等關鍵步驟,並同時考量響應式設計、效能優化、SEO 及無障礙設計,才能打造出優質的網站體驗。

 

1. 原型圖階段(Prototype 和 Wireframe)

在原型圖階段,設計師需要與客戶、專案經理進行深入的需求溝通。這一過程中值得注意的是,這不僅僅是客戶、專案經理向設計師溝通需求的過程,而是雙方需要在各自擅長的領域進行有效的溝通。

在視覺方面的呈現中,設計師可能擁有更好的美感及工作方式,因此在進行實際設計之前,與客戶、專案經理達成共識非常重要。

設計師和客戶、專案經理都需要充分理解彼此的期望,已實現最佳的設計結果。

 

"Prototype" 和 "Wireframe" 在網站設計和應用程式開發中是兩個不同的概念,它們在設計階段扮演不同的角色。

 

1.1 Wireframe(線框圖):

推薦工具:https://www.figma.com/

定義: Wireframe 是一種簡單的視覺工具,用來展示網頁或APP的基本結構和佈局,通常只有基本的框架、區塊和元素,不包含細節和設計風格。

功能: 主要用於簡單地傳達版面配置、結構和互動元素的位置,以便團隊成員之間更容易討論和理解設計。

 

1.2 Prototype(原型):

推薦工具:https://www.figma.com/

定義:Prototype 是更進一步的設計階段,展示了網頁或應用程式的功能、互動和流程。

相較於 Wireframe,Prototype 通常包含更多詳細的互動元素,例如按鈕的行為、頁面之間的轉換,以及基本的功能DEMO。

功能: 用於模擬和測試使用者與應用的實際互動,更全面地呈現最終產品的使用體驗。通常在 Wireframe 完成後,進一步發展成 Prototype。

 

Wireframe 主要關注於結構和配置,而 Prototype 則進一步呈現了功能和互動,使團隊能夠更好地理解最終產品的工作方式。在項目的不同階段,這兩者都可能被使用,以確保設計和開發的順利進行。

 

2. 視覺稿階段 

用來指在網頁設計中,根據原型圖確定的內容完成的介面設計,其主要目的是視覺上呈現最終網站的外觀和風格。

比如尤其在製作特定主題的網站時,設計師需要運用圖像和靈感素材來模擬相關情境,這時候設計師可以用"Mood Board"(情緒板)的概念來設計網頁。

 

2.1 Mood Board(情緒板):

推薦工具:https://www.canva.com/

是一種視覺工具,用於收集和展示特定主題、網頁或設計風格相關的資料和素材,它的目的是在設計和創意過程中提供靈感,幫助確立網頁的視覺風格和情感調性。

情緒板可以包含各種元素,如圖片、顏色樣本、文字、圖表等,這些元素結合在一起,形成一張視覺呈現的大畫面。幫助創作者和團隊更好地了解網頁的氛圍、情感和風格,並且讓設計在整體感覺上保持一致。

在設計領域中,情緒板常被用於啟發創意,激發新點子,並作為設計過程中的參考點。它可以是手工製作的實體板,也可以是數位形式的電子板,視項目的需求和團隊的偏好而有所不同。情緒板是一種簡單而有效的工具,幫助確保設計在視覺上傳達出預期的情感和風格。

 

2.2 網頁設計的視覺模型 Visual Mockup for Web Design:

推薦工具:Sketch

視覺稿用於呈現網頁設計的視覺外觀,突顯了其在視覺效果呈現方面的功能。

 

三. 網頁設計規範 Web Design Guidelines

推薦工具:https://getbootstrap.com/

完成視覺稿後,許多設計師可能忽視了制定設計規範的步驟。

對於每個可迭代的網站專案,網頁設計師的角色非常重要,網頁設計師需要制定一套網頁設計規範。這些設計規範有所有頁面中共通的元素,例如字體大小的一致性、圖片尺寸的統一、按鈕樣式等,這些共通元素在用戶訪問網站時構建了一種穩定的認知基礎。

舉例來說,如果相同的分享功能採用了兩種迥異的樣式,可能會使使用者感到混淆。

所以設計規範的主要目的是約束設計師的創意,以減少用戶在有限記憶力下的認知成本。

但設計規範也讓同一專案中的不同設計師都能產出相同風格的設計。

設計師應該積極參與制定設計規範和進行專案總結。

 

四.切圖(Slicing)

推薦工具:PHOTOSHOP

將設計師提供的網頁設計檔案(通常是圖像或視覺稿)轉換為前端開發所需的HTML、CSS、以及可能的圖片檔案。這個過程通常由前端工程師負責。

切圖的主要目的是將視覺設計轉換為網站的實際元素和結構,使其可以在瀏覽器中正確呈現。包含切割圖片、HTML和CSS,讓網站在不同螢幕大小和設備上都能正確顯示和運作。

有時候,設計師可能不直接進行切圖工作,而是將設計稿提供給前端工程師,由他們負責將設計轉為互動網頁。

 

參考文章:
LOUIS VUITTON 線上購物網站設計分析

日本精品服飾 購物網站 網頁設計 與架構分析

 

五. 前端的程式碼 Frontend Code

推薦工具:https://code.visualstudio.com/

就像網站的魔法師一樣,前端工程師具備將設計師的視覺頁面轉化為互動網頁的神奇能力。

他們也需與後端的工程師之間展現出一種極致的合作,宛如一場默契的舞蹈,使整個網站能夠在展現的同時靈活地獲取所需的資料。

這可是啟動整個網站活力的第一步。

為了方便評估網站是否達到我們對行銷資訊的要求,需要埋入GA4或FACEBOOK像素,這樣就能輕鬆地追蹤並分析哪些頁面的訪問量高,哪些沒有達到預期。

之後,我們會邀請所有人一同參與測試網站,仔細檢查網站是否存在需要改進的細節問題。

這一連串的步驟讓網站不僅能夠正常運作,還能夠達到預期的效果。

參考文章:
網站教學:無須程式碼,輕鬆做網頁

無需寫程式碼:輕鬆上手教學

 

六. 響應式設計(Responsive Web Design)

現代網站必須適應不同的裝置(桌機、手機、平板),響應式設計(RWD)已成為標準做法。

 

參考文章:
網頁設計網站教學:怎麼做響應式網頁?

響應式網頁設計:如何在桌機與手機顯示不同圖片

 

案例分析:BBC News 的響應式設計

BBC News 採用彈性網格布局(Flexbox、Grid)和 CSS 媒體查詢(Media Queries)來確保網站能夠自適應不同的螢幕尺寸,使閱讀體驗更加流暢。

 

七. 網站驗收審核

網頁設計完成後需進行網站驗收審核,確認網頁是否達到預期水準。

如果發現與設計稿有明顯不同,就需要與前端工程師合作進行調整。

這個步驟非常重要,因為網站的最終成品才是我們真正的作品,我們不能僅僅因為設計稿看起來漂亮而忽視實際頁面的品質。

 

八. 網站速度與效能優化(Performance Optimization)

網站效能優化(Website Performance Optimization,WPO)是指透過各種技術手段提升網站載入與渲染速度的過程,
主要在優化使用者體驗,特別是針對網路速度較慢或行動裝置的使用者。

而優化方式包括減少檔案大小、最小化 HTTP 請求數量、運用瀏覽器/伺服器快取、優化影像,以及使用內容傳遞網路(CDN)等。

網站效能優化不僅能提升訪客的停留率、忠誠度與滿意度,還能減少數據傳輸量並降低能源消耗,進而減少對環境的影響。

隨著時間推移,網站效能優化的範疇從最初專注於程式碼優化與硬體限制,逐步發展至多層快取機制、輕量化前端元件設計,

以及與伺服器端元件的非同步通訊等更為複雜的技術。


網站效能影響 SEO 與使用者體驗,包括圖片壓縮(WebP)、CDN(內容傳遞網路)、Lazy Loading(延遲加載)等。


案例分析:Amazon 的網站速度優化

Amazon 透過減少 HTTP 請求、圖片壓縮、CDN 部署等方式,提高網站載入速度,降低跳出率並提升轉換率。

 

參考文章:
SEO 網站優化:PageSpeed Insights 提升網站效能

電商網站優化策略:提升SEO 流量與提高轉化率

 

九. 使用者體驗(UX)與可用性測試(Usability Testing)

好的網頁設計需要重視資訊架構(IA)、可讀性與交互設計。

 

案例分析:Snappa 及 DashThis A/B 測試優化 UX

A/B 測試在優化註冊流程方面被廣泛應用。

例如,Snappa 透過減少註冊表單中的必填欄位,提高了 20% 的註冊率和每月經常性收入(MRR)。

此外,DashThis 透過簡化註冊流程和提供引導,將超過 50% 的免費試用用戶轉化為付費用戶

參考文章:
UI/UX使用者介面和體驗設計

好的用戶體驗有多重要?!看看這13條鐵證

為什麼 網頁設計 對品牌及企業來說非常重要?

 

十.SEO 與技術優化(SEO & Technical Optimization) 

SEO 友善的網頁設計影響搜尋排名,包含結構化數據(Schema Markup)、網站地圖(XML Sitemap)等。

 

案例分析:Wikipedia 的 SEO 策略

維基百科(Wikipedia)透過其結構化資料專案——維基數據(Wikidata),使內容更容易被搜尋引擎索引,並顯示於知識圖譜(Knowledge Graph)中。

Wikidata 是一個自由開放的知識庫,旨在為維基媒體(Wikimedia)項目(如維基百科、維基導遊、維基文庫等)提供結構化資料的集中存儲。

透過將資訊以結構化的方式存儲在 Wikidata 中,維基百科的內容能夠被搜尋引擎更有效地解析和理解,從而在搜尋結果中以知識圖譜的形式呈現。

這種結構化資料的應用,提升了資訊檢索的效率和準確性,為使用者提供更豐富的搜尋體驗。

 

參考文章:
SEO:實作16個有效省下廣告費用的方法及檢核

SEO:植入 SEO 概念的網站與優化步驟

關鍵字 SEO 優化步驟:提升網站可見度

 

十一.無障礙網頁設計(Web Accessibility, WCAG)

網站應適用於所有使用者,包括視障者(螢幕閱讀器)、聽障者(字幕)、行動不便者(鍵盤導航)。

 

案例分析:Apple 官網的無障礙設計

Apple 一直以來非常重視無障礙設計,並在其開發者指南中提供了詳細的無障礙功能設計指引,協助開發者創建對所有使用者友善的應用程式和網站。

Apple 在其產品和網站設計中積極採用無障礙設計原則,致力於為所有使用者提供良好的體驗。

參考文章:

如何充分利用joomla4的無障礙網頁功能呢?


網頁設計 問與答:

網站建置 報價相關  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設計之實務經驗

 

最新文章

原創、翻譯及轉貼的資訊都在這裡。

網站是實現夢想的工具! 開始準備建置您的網站了嗎? 加Line好友
益盛科技

我們重視設計質感與行銷價值

。網頁設計。程式設計。Joomla教學。

 

聯絡資訊

ring@des13.com

點此加我們LINE  @igodos 加line好友

406台中市北屯區文心路四段955號11樓之2(需預約諮詢)

04-37072202 /  0919-413187 

thedes13 

 
OMO電商 社群整合,輕鬆提升5倍轉換率,追蹤客戶行為,自動化行銷!想了解,快與我們聯絡! ×
點此加我們LINE 連結line帳號
Our website is protected by DMC Firewall!