數位行銷

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

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

 

一、網頁設計是什麼?

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

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

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

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

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

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

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

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

 

二、網頁設計工作流程

在網站建置設計前,需進行使用者研究、需求分析、市場調查、以及進行競品調查等工作,與設計師緊密相關的網站專案流程可以細分為六個主要階段:

原型圖、視覺稿、網頁設計規範、切圖、前端程式碼、以及驗收審核。在每一個階段中,設計師的參與和了解都是非常重要的。

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

Flowchart

 

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,讓網站在不同螢幕大小和設備上都能正確顯示和運作。

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

 

五. 前端的程式碼 Frontend Code

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

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

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

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

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

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

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

Frontend Code

 

六. 網站驗收審核

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

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

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

Website Acceptance Review

可以參考相關文章:
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設計之實務經驗

 

最新文章

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

網站是實現夢想的工具! 開始準備建置您的網站了嗎? 加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!