Shopify 網站設計流程與時間規劃

此篇分享我如何建立 Shopify 電商網站的時間規劃表，從需求確認、網站內容規劃、網頁視覺設計、Shopify 版型和 Shopify App 設定等，拆解每個階段的任務與細節

「實戰經驗分享，非只是網路資料整理」

我一直在根據手上數個專案進行調整，找出一個順暢的 Shopify 網站「設計」執行的 SOP 與規劃，並能有效應用在線上協同的文件或檔案中。我打造了幾個模板文件與所使用的軟體，如下：

1. Shopify 網站進度表範本（Google Sheet）
2. Shopify 網站專案執行流程範本（Notion）：逐步優化中，敬請期待！

Shopify 網站排程表

我一直在根據手上數個專案進行調整，找出一個順暢的 Shopify 網站「設計」執行的 SOP 與規劃。下圖為基本的步驟與流程，但有些階段是可以同時並行的，例如 Shopify 基本設定在購買版型後就可以開始進行，金流設定的確認越早開始越好（通常金流從申請到完成大約費時一到一個半月左右），整個網站完成到上線的時間根據實際需求彈性調整。（小秘訣：若要加速網站建置過程，直接選用功能強大又有設計質感的 Shopify 版型可以提升相當的效率，例如使用 Minimog Shopify Theme，這個我已經使用至少在五個網站以上，相當易用上手！僅供參考）

Shopify 網站規劃與設計

1. Brand Guideline：包含基本的元素如 Logo、字型設定、顏色等
2. Resource (Materials)：包含網頁中所有會使用到的素材、圖片等
3. Requirement (List)：客戶的需求要用最簡潔有力的「清單模式」列表出來，若需求都沒整理清楚，後面會寸步難行這是最最最最最重要的，因為太重要了，永遠不用擔心「過度溝通」。
4. Wireframe：我的用法是分成兩個階段，第一個根據現有的資料快速排版內容，並且與客戶討論需求時邊更新。第二個才是所有的討論結果最終確認版，能的話最好能將「完整的文案」排版進去。
5. Web Design：會分成提案階 (Proposal) 段和完稿 (Final) 檔案。
6. Shopify Theme：所選擇版型要先測試能使用的功能限制，全部開出來攤在陽光下，讓彼此都知道強項與限制在哪。根據限制和需求再見去找解決需求的 Shopify App。
7. Shopify App：將一些比較關鍵的測試與實際執行步驟的 Shopify App 紀錄下來，不僅可以幫助自己記憶，也可作為團隊協作與交接的重要檔案，不用怕說花太多時間，我們用 Figma 紀錄過程其實很有效率！
8. SEO meta：基本的 SEO meta 設定與文案構思也是相當重要的，例如網頁標題、網頁敘述、網頁預覽等都可以根據關鍵字策略分析進行初步的設定。這是影響眾多 SEO Ranking 因素之一，例如在關鍵字在 SERP 的點擊率、在社群預覽時的品牌形象等，我發現很多人都會忽略或輕忽這個的重要性，應該要花心思投入。
9. Web Analytics：網站分析工具設定，必備安裝的有 Google Analytics、Google Search Console，額外的可以有 Google Tag Manager，視需要可以使用付費的 Hotjar、CrazyEgg、Mixpanel 等。而也聽過有想測試網頁的 A/B Testing，Shopify App Store 也是有提供相關功能的可以訂閱使用，同樣視情況投資與否。
10. Feedback (Test)：網站完成後需要測試回饋、網站上線正式曝光後也要測試回饋，確認消費者的瀏覽體驗、購物體驗是良好的。

🚀 預約諮詢：網站設計與建置

若你有 Shopify 電商網站或 WordPress 品牌形象、部落格設計與建站的需求，可以前往填寫表單預約諮詢，Irvinglab 爾文實驗室是一家深度經驗的網頁設計公司，專注打造 Shopify 和 WordPress 網站以及提供 SEO優化與內容規劃的服務。若想進一步了解服務內容，可以加入 Irvinglab 爾文實驗室 Line@官方帳號留下訊息給我們。

網站專案執行

經過數年來為各種產業的客戶打造數十個網站，從彼此磨合、錯誤經驗的學習，淬煉出一套網站專案執行的工作流程，而且不斷優化與更新，讓剛接觸網站設計這個領域的人，無論是設計師、工程師或客戶等，初步了解每個可執行的步驟，降低溝通成本，提高工作效率。

無論是使用哪種平台，網站設計流程的規劃大同小異，唯一的差別就是使用不同的平台架站會有執行上的差異。下圖是 Shopify 電商網站設計的時間排程，每個階段規劃依實際需求和情況彈性調整，時程的長短可以當作一個參考值即可。我們有了「執行所需時間」與「工作事項」的概念，讓團隊、客戶或專案經理在初步規劃時不會毫無頭緒！

此檔案是建立 Figma 中，可以縮放瀏覽，我已設定公開，若你也有使用，歡迎蒐藏與分享，並且留言和拍手讓我知道這對你的工作很有幫助噢！因為我會不定時去更新檔案內容與流程編排，所以隨時可以回來閱讀文章囉！🍉 若你還沒有 Figma 帳號，可以前往註冊免費帳號，免費版就很好用了！

各階段工作內容概要

1. 需求探索：確認需求（相當重要的階段，了解需求與目標，幫助客戶釐清與整理思緒）
2. 概念發想：團隊內部腦力激盪（可以與客戶一同探索與討論，必要時進行 Workshop）
3. 內容規劃：建立網站地圖（Sitemap），根據企劃需求規劃頁面內容概要，此階段的 Wireframe 是討論需求使用
4. 圖片素材：通常是攝影圖、插圖、產品圖或情境圖，必要時需提出攝影計畫外包攝影工作室拍攝
5. 文案內容：提供網頁文案、網站內容建議如標題和內文根據設計排版的設定最佳的字數等
6. 網站原型：最終版頁面需選定 Shopify 版型（Theme），然後先試用了解版型基本設定，搭配可能使用的 Shopify App 建構出框線圖 Wireframe，並實際搭配文字
7. 網頁視覺：順序是先進行主視覺設計提案，確認後再打造首頁設計，最後是進行網站其他頁面的設計
8. Shopify 架站：主要階段有排版（使用版型設定與頁面編輯器 App 和 CSS 客製化）、設定網站功能 App、內容上架、RWD（mobile web）、物流和金流的串接、ERP 串接、基本 SEO 設定
9. 網站測試：至少要讓內部團隊、客戶進行實機測試瀏覽網頁，給予回饋與修正，例如表單填寫、電子報訂閱、發票收據開立、使用者的購買流程、金流物流狀況等
10. 網站分析：必要設定追蹤碼如 Search Console、Google Analytics，視需求而定的 Google Tag Manager、Facebook Pixels 等
11. 網站上線：理想時間是選在週二或週三，意思是只要上線後隔天不是假日較佳，這樣網站若一出問題時確定有人在崗位上可以進行修正
12. 持續優化：UI/UX、文案、SEO、網站速度

---

在執行專案的過程中，會遇到很多實作、溝通等問題，如何提升雙方在討論、協作時的效率，我會陸續分享我的經驗與常用的數位工具，針對不同情境運用不同的工具組合，讓專案事半功倍，尤其在遠端會議時相當重要！記得隨時回來瀏覽此頁，加入蒐藏！

專案執行小訣竅

如何一次輸入 PDF 檔所有頁面方便閱讀，並能快速做筆記與分享，甚至協作？

解法

1. PDF 直接匯入 Miro（圖檔）
2. PDF 直接匯入 FigJam（文字可編輯）
3. PDF 透過外掛：PDF to Figma 匯入 Figma（圖檔）

使用工具（使用免費方案即可，畢竟是免費方案，有其限制，限制項目可直接瀏覽官網說明）

1. Miro：線上協作白板工具
2. Figjam：線上協作白板工具
3. Figma：線上協作 UI 設計工具，搭配 Figma 外掛：PDF to Figma

使用情境

因為有時候客戶或需求方會給我很多他們自製的 PDF 檔參考用，可能是提出網站頁面說明、Wireframe 需求細節等，尤其頁面數量和文字量很多時，切換設計軟體和 PDF 檔案來回瀏覽頗麻煩，不如就直接將 PDF 全部丟進設計軟體中閱讀與編輯比較有效率。

但，以往我都是透過 Acrobat 匯出 PDF 檔案為圖片檔，參數解析度即使調到最高還是沒預期中好（多多少少還是被壓縮了?!），或丟入 Photoshop or Illustrator 再調整參數後匯出，流程瑣碎且費力。

後來使用這三種方法秒殺我長久以來的痛苦，移除了小碎步、直接一步解決！Miro、FigJam、Figma 都可以用 Google 帳號登入超快速，將以上流程每步驟都精簡到極致，不僅如此，還可以邊線上開會、分享畫面時同時做筆記，爽度一百。

備註：若對方給的是 PPT？可先將 PPT 使用內建匯出 PDF 檔即可

想要更全面學習強大的線上 UI 協作設計軟體 Figma？可以上這堂課：產品設計實戰：用 Figma 打造絕佳 UI/UX。除此之外，我自己有搭配 UX 使用者經驗設計和數位產品開發相關的精選課程推薦，例如 UX 新手入門：UX 設計/研究全攻略: 給新手的職場通識課、UX 扎實的學術研究理論：用戶x商業x數據 | UX‧三刀流產品體驗設計、產品數據分析：產品數據分析 – 打造網路產品的決策引擎、產品創新：產品 x 創新：從需求洞察到產品策略、產品經理 PM：產品經理職場學：PM 必修的職涯指南！，全部上完之後讓我大開眼界、豁然開朗，提升思考層次與思維方式，有興趣的人可以參考並選幾堂符合目前需求來學習與充實自己。

---

---