響應式網站設計流程  如何建置優質的RWD網站專案？ | 分享 | 樂活整合行銷

目前網站開發公司大多是以顧問式銷售的模式來開發客戶。因此，響應式網站專案開始進行前，公司的專案經理必須先進行業務開發，來確認潛在客戶的合作關係。專案經理進行業務開發時，主要包括五個階段：找到潛在用戶、分析潛在用戶、確認key person、確認需求和締結，在此樂活整合行銷管理顧問有限公司謹將這五個階段的內容和相關要素簡述如下：

• 找到潛在客戶：探訪潛在客戶是業務開發的第一步，專案經理必須在市場中尋找潛在客戶。此階段可透過多種途徑進行，例如網路行銷、市場調查、社交媒體分析、關鍵字搜索等方式，來找到與產品相符合的目標客戶。在進行這一階段時，專案經理必須對自家產品服務的特性與優點有深入的了解，才能將服務推廣給潛在客戶。
• 分析潛在客戶：找到潛在客戶後，專案經理接下來必須分析潛在客戶的需求、痛點與態度。分析潛在用戶的目的是為了深入的確認潛在用戶的需求，方便後續針對自家系列產品的特色，提供適合客戶的解決方案。
• 確認key person：在進行業務開發的過程中，關鍵人物（key person）是非常重要的。在大多數的情況下，關鍵人物是直接決定或間接影響公司決策的人，例如CEO、CTO、CFO等。確認關鍵人物是誰後，才能透過了解其需求來進一步推進業務。
• 確認需求：了解潛在客戶的需求和key person後，專案經理必須確認客戶的實際需求，並評估自家產品服務能否滿足這些需求。在這一階段，業務人員必須與客戶深入訪談，確認包括所需功能、設計風格、使用體驗等，以便設計出符合客戶需求的響應式網站。此外，還必須確認客戶的預算與時程等，以便在後續的設計和開發過程中能在時限內達成客戶期望。
• 締結合作關係：專案經理必須將前四階段所分析出的資料整合並提供具體的解決方案，清楚明確地向潛在客戶介紹合作的內容、期望達成的目標、時間、成本等相關資訊，並提供專案相關的報價方案。

當專案經理完成合約的締結後，響應式網站設計專案就會在內部成案，公司內部也會成立專案小組，來進行後續的專案設計流程。

「專案經理」在此階段必須負責確認客戶的需求，並將其轉化為可行的網站設計方案，相關的工作任務簡單說明如下：

• 確認需求：這是確認客戶對網站的具體需求，包括 Logo 風格、畫面偏好風格、購物車功能、金流物流、聯盟行銷、社群媒體、頁面間關聯性等等。專案經理需要深入了解客戶需求，透過與客戶的溝通與討論，詳細了解客戶的需求及喜好，並擬定出設計方案。
• 可行性評估建議：這是專案經理對於客戶需求進行評估，包括購物車功能、第三方支付、新增費用評估等等，評估這些需求的可行性以及是否需要加入其他功能，同時提供客戶最佳的建議，並且透過各種第三方支付方案來進行購物車功能的評估，以及考量金流物流的相容性，讓客戶最終能夠得到最符合其需求的網站設計。
• 估算成本議價：這是專案經理進行網站設計所需成本的評估，並與客戶進行議價。在評估成本的過程中，專案經理需要考慮網站設計所需的各項資源與成本，例如網站設計人員、程式開發人員、網站主機空間、域名註冊費用、行銷成本等等，進而提出合理的成本評估與報價，同時需要與客戶進行成本議價，以達成雙方均能接受的成本方案。

「前端網頁設計師」在此階段必須負責視覺、切版和程式特效三項任務。倘若公司人員編制充足，這三項任務會委由三位設計師來執行，相關工作任務簡單說明如下：

• 視覺風格：這個任務通常會由公司的視覺設計師或平面設計師來負責，其目的是確保網站的外觀能夠符合公司的品牌形象，並傳達適當的風格和感覺。設計師需要了解公司的品牌風格和定位，並透過色彩、排版、圖像等元素來表現出來。
• 切版方面：前端網頁設計師需要確保切版的功能能夠達成網站的需求，並且在不同裝置上都能呈現出符合設計師要求的外觀，這個任務是與網站的美觀度和使用者體驗密切相關的。同時，前端設計師需要了解網頁的版型規劃，例如哪些區塊需要固定在頁面上方、哪些元素需要顯示在首頁上方等等，這些都是關鍵的設計細節。
• 程式特效：則是與網站互動和體驗相關的任務。設計師需要考慮使用何種技術來實現互動功能，例如使用JavaScript或CSS來製作頁面特效，或者使用動畫和視差滾動等技術增強網站的美觀性和吸引力。然而，程式特效往往會增加網站開發的複雜度和成本，所以前端設計師需要在設計階段就針對特效評估可行性，並評估特效實現的成本。

倘若客戶網站必須與大系統，例如ERP串接，則必須交由「資料庫開發工程師」來執行下列工作：

• 資料庫建立及串接：資料庫建立及串接是指資料庫工程師會根據客戶的需求，建立一個符合要求的資料庫，並將網站所需的資料與ERP進行串接。在這個過程中，資料庫工程師需要先了解客戶的需求以及ERP系統的資料格式和傳輸方式，以便建立相應的資料庫和確保資料正確傳輸。
• 資料庫程式開發：資料庫開發工程師會編寫相應的程式碼，以實現網站和ERP系統之間的資料傳輸。這需要工程師具備扎實的資料庫開發技能和相關的程式語言知識。在這個過程中，工程師需要先了解客戶的需求，設計相對應的資料庫架構，並寫出程式碼來實現網站和ERP系統之間的資料傳輸和同步。

此階段工作都是由「專案經理」完成，大致分為七項任務，相關工作簡單說明如下：

• 建立基礎架構心智地圖：在這個階段，專案經理需要使用流程圖或其他工具來繪製出網站的基礎架構心智地圖，以便向客戶呈現網站結構、功能、頁面等方面的概念，並徵求客戶的確認。
• 規劃checklist：為了確保設計師能夠清晰了解客戶的需求，專案經理需要根據客戶提供的需求，建立checklist並提供給設計師參考，以確保每個頁面所需的元素都被充分納入設計。
• 調整資料的可辨識度：在這個階段，專案經理需要確保客戶提供的圖檔資料命名方式清晰明確，以便設計師能夠順利識別並使用，並且要求客戶在命名時遵循特定的命名規則。
• 頁面連結關係確認：專案經理需要確認每個頁面之間的連結關係，以確保網站內容的流暢性，並讓設計師能夠更好地理解整個網站的結構。
• 金物流方式確認：專案經理需要與客戶確認網站使用的金流物流方式，以便在後續的開發中能夠順利地整合相關的功能。
• 行銷方式確認：專案經理需要與客戶討論網站的行銷方式，例如是否需要整合社群媒體、聯盟行銷等功能，以確保網站設計符合客戶的需求。
• 進度跟催：專案經理需要監控整個專案的進度，以確保順利完成每個階段的工作，並及時跟進相關問題，提醒相關人員注意時間節點，確保專案按時交付。

這個階段由「網頁設計師」來執行，主要包含以下三項任務：

• 靜態視覺設計：在這個階段，網頁設計師需要根據checklist確認網站的設計範圍，包括要設計的頁面數量。接著要確認客戶提供的資料中的logo，並且確認網頁色系。接下來，網頁設計師要根據客戶的需求與風格，繪製出首頁的靜態A/B版概念圖，並且提供給客戶選擇其中一個版本。同時，設計師也要確認圖片的來源，包括版權和規格大小，以符合設計的需要。最後，網頁設計師要規劃其餘頁面的風格，以確保整個網站的設計風格統一。
• 動態切版設計：在這個階段，網頁設計師需要根據已定案的A/B版與視覺設計師同步確認動態切版的區塊範圍。這包括要設計的動態元素，例如輪播圖片、頁面滑動效果等。動態切版設計的目的是確保網站的設計與互動體驗更為生動豐富，增加使用者的互動性與參與度。
• 特效設計：在這個階段，網頁設計師需要根據已定案的A/B版與動態切版設計師同步確認特效的頁面區塊範圍。這包括網站的動畫效果、視差滾動效果、頁面轉場效果等。特效的目的是提高網站的互動體驗和吸引力，增加使用者的參與度和停留時間。

此階段主要由「網頁設計師」負責，透過前面的網頁風格確認階段，已經建立出網頁的整體風格與設計，因此此階段的任務就是將這些設計概念圖進一步實作成可瀏覽的動態網頁，讓使用者可以直接瀏覽與互動。此外，網頁設計師也需要確保網頁的呈現效果符合原始的設計概念，並考慮到不同的裝置及瀏覽器的相容性問題，以達到最佳的使用者體驗。包含下列兩項任務：

• 首頁動態切版設計：根據首頁的靜態A/B版概念圖設計，將其轉換為動態切版的網頁。在此階段，網頁設計師需要將設計稿轉換成網頁程式碼，並實作出動態效果，如輪播圖片、頁面切換、滾動效果等。此外，也需要考慮到不同裝置的呈現方式，確保網頁在不同的螢幕尺寸下都能夠正確顯示。
• 內部頁面動態切版設計：除了首頁之外，網站內部的其他頁面也需要進行動態切版的設計。在此階段，網頁設計師需要依據前面建立的風格設計，將其他頁面的設計概念圖轉換成網頁程式碼。同樣地，也需要考慮到不同裝置的呈現方式，以確保網頁在各種裝置下都能正確顯示。

「特效網頁設計師」與「程式設計師」合作進行特效的設計與實作，以提升網站的互動性和使用者體驗。以下是兩項任務的說明：

• 首頁特效：首頁是網站中最重要的頁面之一，因此在此階段需要對其進行特效設計，以提升其吸引力和使用者體驗。特效設計師可以根據網站風格和需求，加入適當的動畫、視覺效果或滾動效果等，以吸引使用者的注意力和引導使用者進行相關操作。程式設計師則需要根據特效設計師提供的設計圖，使用相應的技術實現特效效果，例如使用JavaScript等網頁前端技術，以呈現出特效的效果。
• 內頁特效：內頁的特效設計同樣重要，它可以讓內容更有趣味性，也可以引導使用者進行相應的操作。特效設計師可以根據內頁的內容和需求，設計適當的特效，例如卡片翻轉、圖片滑動等，以提升內容的呈現效果和吸引力。程式設計師同樣需要根據特效設計師提供的設計圖，使用相應的技術實現特效效果，並確保特效在各種設備和瀏覽器上的兼容性。

除了特效網頁設計師和程式設計師外，「動態切版網頁設計師」也扮演著重要的角色，負責以下三項任務：

• RWD(Responsive Web Design) 響應式網頁設計調整：RWD 是指網站能夠根據不同的裝置，如桌上型電腦、平板電腦或手機等，自動調整網頁版面以符合不同螢幕尺寸和解析度的需求。因此，動態切版網頁設計師需著重於調整響應式網頁的版面佈局和內容呈現，以提供最佳的瀏覽體驗。
• 站內SEO(Search Engine Optimization)優化調整：站內SEO 是指通過優化網站的內部結構、內容和頁面佈局等方式，提高網站在搜索引擎中的排名。動態切版網頁設計師需要對網站的內部架構和頁面結構進行優化，以增強網站的可讀性和搜索引擎的索引效率，提高網站的搜索引擎排名。
• 客戶溝通微調：在網頁特效優化的過程中，動態切版網頁設計師與業者之間需要進行頻繁的溝通和交流，以確保網站的特效設計和程式實現達到最佳效果。此外，如果客戶或業者有任何額外的需求或調整要求，動態切版網頁設計師也需要及時提供微調機會，以確保網站最終呈現的效果符合客戶的要求。

此階段的任務是協助客戶獨立維護網站，並確保網站能夠順利上線。「專案經理」必須提供清晰明瞭的教學，讓客戶能夠輕鬆掌握網站管理技能。相關工作簡單說明如下：

• 圖片文字修改教學：在這個任務中，專案經理會向客戶提供關於如何修改網站上的圖片和文字的教學。這包括指導客戶如何使用後台管理系統，編輯網站內容，以及如何上傳和更換圖片等。透過這個教學，客戶可以在未來自行修改網站內容，節省維護成本。
• 產品上架教學：在這個任務中，專案經理會向客戶提供有關如何將網站產品上架的教學。這包括指導客戶如何將網站部署到伺服器上，以及如何設置網站的基本設定。透過這個教學，客戶可以獨立完成網站的上線工作，減少上線時間和成本。

除了專案經理之外，「動態切版網頁設計師」與「程式設計師」也會參與專案驗收，並協力完成下列兩項任務：

• 初步功能驗收：除了確認網站的基本功能是否能正常運作，通常也會針對重要的功能進行測試。例如訂單系統，會針對新增、修改、刪除等基本操作進行測試；即時訊息收發則是測試網站是否能即時傳遞訊息；表單留言測試則是確認表單是否能正確接收使用者輸入的資料。透過初步功能驗收，可以確保網站能正確運作，提升使用者體驗。
• 內容微調複驗：在前幾個階段，可能因為各種因素如時間、預算等，而無法完美呈現，因此可能必須進行微調。在實作教學驗收階段，動態切版網頁設計師與程式設計師會檢查網站中的所有內容是否有錯誤或缺陷，並進行微調。透過微調，可以確保網站呈現完美且符合客戶需求，提升使用者體驗。

• 職場知識分享：軟體專案經理要做什麼？(上) / 顧問案的目標在於找出業主痛點
• 職場知識分享：軟體專案經理要做什麼？(下) / 執行案的目標在於精準程式設計與測試點