此篇分享我如何建立 Shopify 電商網站的時間規劃表，從需求確認、網站內容規劃、網頁視覺設計、Shopify 版型和 Shopify App 設定等，拆解每個階段的任務與細節
「實戰經驗分享，非只是網路資料整理」（更新時間： 2022.10.09）
嗨！我是爾文（Irving Chen），資深網頁設計師，先快速介紹一下自己的架站經驗，本人有多年使用 WordPress 架站與網頁設計的經驗，近年則專注 Shopify 電商網站設計與建置。對於這類架站平台的限制與可塑性有一定的了解，例如 Squarespace、Wix 後台真的限制超多，大部分的情況只能按照其版型去做編排，要做其他設定會相當困難而痛苦；WordPress 則是彈性度超高，可以在後台來去自如、修改頁面程式碼、使用海量的版型和外掛資源為網站打造全方位數位能力。若有網站相關問題，可以前往填寫表單留下訊息或需求給我，我會盡快回覆！
我一直在根據手上數個專案進行調整，找出一個順暢的 Shopify 網站「設計」執行的 SOP 與規劃，並能有效應用在線上協同的文件或檔案中。我打造了幾個模板文件與所使用的軟體，如下：
- Shopify 網站進度表範本（Google Sheet）
- Shopify 網站專案執行流程範本（Notion）：逐步優化中，敬請期待！
Shopify 網站排程表
我一直在根據手上數個專案進行調整，找出一個順暢的 Shopify 網站「設計」執行的 SOP 與規劃。下圖為基本的步驟與流程，但有些階段是可以同時並行的，例如 Shopify 基本設定在購買版型後就可以開始進行，金流設定的確認越早開始越好（通常金流從申請到完成大約費時一到一個半月左右），整個網站完成到上線的時間根據實際需求彈性調整。（小秘訣：若要加速網站建置過程，直接選用功能強大又有設計質感的 Shopify 版型可以提升相當的效率，例如使用 Minimog Shopify Theme，這個我已經使用至少在五個網站以上，相當易用上手！僅供參考）
Shopify 網站規劃與設計
- Brand Guideline：包含基本的元素如 Logo、字型設定、顏色等
- Resource (Materials)：包含網頁中所有會使用到的素材、圖片等
- Requirement (List)：客戶的需求要用最簡潔有力的「清單模式」列表出來，若需求都沒整理清楚，後面會寸步難行這是最最最最最重要的，因為太重要了，永遠不用擔心「過度溝通」。
- Wireframe：我的用法是分成兩個階段，第一個根據現有的資料快速排版內容，並且與客戶討論需求時邊更新。第二個才是所有的討論結果最終確認版，能的話最好能將「完整的文案」排版進去。
- Web Design：會分成提案階 (Proposal) 段和完稿 (Final) 檔案。
- Shopify Theme：所選擇版型要先測試能使用的功能限制，全部開出來攤在陽光下，讓彼此都知道強項與限制在哪。根據限制和需求再見去找解決需求的 Shopify App。
- Shopify App：將一些比較關鍵的測試與實際執行步驟的 Shopify App 紀錄下來，不僅可以幫助自己記憶，也可作為團隊協作與交接的重要檔案，不用怕說花太多時間，我們用 Figma 紀錄過程其實很有效率！
- SEO meta：基本的 SEO meta 設定與文案構思也是相當重要的，例如網頁標題、網頁敘述、網頁預覽等都可以根據關鍵字策略分析進行初步的設定。這是影響眾多 SEO Ranking 因素之一，例如在關鍵字在 SERP 的點擊率、在社群預覽時的品牌形象等，我發現很多人都會忽略或輕忽這個的重要性，應該要花心思投入。
- Web Analytics：網站分析工具設定，必備安裝的有 Google Analytics、Google Search Console，額外的可以有 Google Tag Manager，視需要可以使用付費的 Hotjar、CrazyEgg、Mixpanel 等。而也聽過有想測試網頁的 A/B Testing，Shopify App Store 也是有提供相關功能的可以訂閱使用，同樣視情況投資與否。
- Feedback (Test)：網站完成後需要測試回饋、網站上線正式曝光後也要測試回饋，確認消費者的瀏覽體驗、購物體驗是良好的。
網站專案執行
經過數年來為各種產業的客戶打造數十個網站，從彼此磨合、錯誤經驗的學習，淬煉出一套網站專案執行的工作流程，而且不斷優化與更新，讓剛接觸網站設計這個領域的人，無論是設計師、工程師或客戶等，初步了解每個可執行的步驟，降低溝通成本，提高工作效率。
無論是使用哪種平台，網站設計流程的規劃大同小異，唯一的差別就是使用不同的平台架站會有執行上的差異。下圖是 Shopify 電商網站設計的時間排程，每個階段規劃依實際需求和情況彈性調整，時程的長短可以當作一個參考值即可。我們有了「執行所需時間」與「工作事項」的概念，讓團隊、客戶或專案經理在初步規劃時不會毫無頭緒！
此檔案是建立 Figma 中，可以縮放瀏覽，我已設定公開，若你也有使用，歡迎蒐藏與分享，並且留言和拍手讓我知道這對你的工作很有幫助噢！因為我會不定時去更新檔案內容與流程編排，所以隨時可以回來閱讀文章囉！
各階段工作內容概要
- 需求探索：確認需求（相當重要的階段，了解需求與目標，幫助客戶釐清與整理思緒）
- 概念發想：團隊內部腦力激盪（可以與客戶一同探索與討論，必要時進行 Workshop）
- 內容規劃：建立網站地圖（Sitemap），根據企劃需求規劃頁面內容概要，此階段的 Wireframe 是討論需求使用
- 圖片素材：通常是攝影圖、插圖、產品圖或情境圖，必要時需提出攝影計畫外包攝影工作室拍攝
- 文案內容：提供網頁文案、網站內容建議如標題和內文根據設計排版的設定最佳的字數等
- 網站原型：最終版頁面需選定 Shopify 版型（Theme），然後先試用了解版型基本設定，搭配可能使用的 Shopify App 建構出框線圖 Wireframe，並實際搭配文字
- 網頁視覺：順序是先進行主視覺設計提案，確認後再打造首頁設計，最後是進行網站其他頁面的設計
- Shopify 架站：主要階段有排版（使用版型設定與頁面編輯器 App 和 CSS 客製化）、設定網站功能 App、內容上架、RWD（mobile web）、物流和金流的串接、ERP 串接、基本 SEO 設定
- 網站測試：至少要讓內部團隊、客戶進行實機測試瀏覽網頁，給予回饋與修正，例如表單填寫、電子報訂閱、發票收據開立、使用者的購買流程、金流物流狀況等
- 網站分析：必要設定追蹤碼如 Search Console、Google Analytics，視需求而定的 Google Tag Manager、Facebook Pixels 等
- 網站上線：理想時間是選在週二或週三，意思是只要上線後隔天不是假日較佳，這樣網站若一出問題時確定有人在崗位上可以進行修正
- 持續優化：UI/UX、文案、SEO、網站速度
在執行專案的過程中，會遇到很多實作、溝通等問題，如何提升雙方在討論、協作時的效率，我會陸續分享我的經驗與常用的數位工具，針對不同情境運用不同的工具組合，讓專案事半功倍，尤其在遠端會議時相當重要！記得隨時回來瀏覽此頁，加入蒐藏！
專案執行小訣竅
如何一次輸出 PDF 檔所有頁面方便閱讀，並能快速做筆記與分享，甚至協作？
解法
- PDF 直接匯入 Miro（圖檔）
- PDF 直接匯入 FigJam（文字可編輯）
- PDF 透過外掛：PDF to Figma 匯入 Figma（圖檔）
使用工具（使用免費方案即可，畢竟是免費方案，有其限制，限制項目可直接瀏覽官網說明）
- Miro：線上協作白板工具
- Figjam：線上協作白板工具
- Figma：線上協作 UI 設計工具，搭配 Figma 外掛：PDF to Figma
使用情境
因為有時候客戶或需求方會給我很多他們自製的 PDF 檔參考用，可能是提出網站頁面說明、Wireframe 需求細節等，尤其頁面數量和文字量很多時，切換設計軟體和 PDF 檔案來回瀏覽頗麻煩，不如就直接將 PDF 全部丟進設計軟體中閱讀與編輯比較有效率。
但，以往我都是透過 Acrobat 匯出 PDF 檔案為圖片檔，參數解析度即使調到最高還是沒預期中好（多多少少還是被壓縮了?!），或丟入 Photoshop or Illustrator 再調整參數後匯出，流程瑣碎且費力。
後來使用這三種方法秒殺我長久以來的痛苦，移除了小碎步、直接一步解決！Miro、FigJam、Figma 都可以用 Google 帳號登入超快速，將以上流程每步驟都精簡到極致，不僅如此，還可以邊線上開會、分享畫面時同時做筆記，爽度一百。
備註：若對方給的是 PPT？可先將 PPT 使用內建匯出 PDF 檔即可
設計與行銷工具
- ActiveCampaign：Email 行銷、電子報系統（MailChimp 的最佳替代方案）
- Canva：線上平面設計工具，若團隊沒有設計師，那 Canva 真的是神助攻！解決行銷、社群、平面設計、簡報等需求，版型一應俱全。
- Envato Elements：無限下載的付費資源素材：包含圖片、影片、音樂、音效、平面設計、插圖、簡報模版等，這個也是我常常在用的素材平台。
- GetResponse：All-in-one 行銷平台，包含電子郵件行銷 Email marketing、登陸頁建立 Landing pages、行銷自動化 Marketing automation 等功能，可以先註冊帳號使用免費版，覺得需要未來再升級！這軟體類似 Hubspot。
- PickFu：PickFu 是美國消費者在線調研工具，可進行在線的測試、優化和即時消費者調研問卷，取代猜測。透過 PickFu，你可以立即獲取至多 500 條來自美國消費者的意見。通過尋求眾人的智慧，幫助你做出更好的商業決策。
- SurveySparrow：全渠道顧客滿意度調查管理平台 Omnichannel Experience Management Platform
- Qwary：全渠道 CX 客戶體驗平台，可幫助企業獲取客戶反饋並通過設計精美的專業調查來衡量 NPS、CSAT 和 CES，以改善購物體驗和產品性能。
- Opinion Stage：建立免費的測驗、投票、表單等工具，視覺質感和功能運作不錯！也有提供付費方案，提高每個月的回應數。
- Typeform：質感優雅的線上表單
- UXPressia：快速創建專業的顧客旅程地圖 Customer Journey Map、人物誌 Persona 和影響地圖 Impact Map，還有各種模板可以直接套用。
- Surfer：SEO 工具，主要可用做 SEO 內容編輯者使用， AI 產生 SEO 文案、關鍵字推薦、SEO Audit 等功能，介面設計滿新穎的，賞心悅目！
- CopyAI：行銷文案 AI 自動產生器 CopyAI is an AI-powered copywriter that generates high-quality copy for your business.
- ABtesting AI：有用過 AB Testing 在優化網站嗎？來試試 AI 的 Testing，有免費方案可以測試
- Frase：彈指之間用 AI 協助搜尋、撰寫與優化 SEO 文章
- AppSumo：限時優惠的一次性付費數位軟體販售平台（大幅降低成本）
- Tidio：設計優質的線上交談工具 Online Chat
- Help Scout：線上客服（Zendesk 的替代方案）
- HeySummit：舉辦線上虛擬研討會
- SimplyBook：線上預約排程系統 及 App 預約軟體
- Liinks：一頁式多連結網頁，整合多個社群、官網的一頁式網站
- LearnWorlds：創建與銷售線上課程網站平台
- Teachable：創建與銷售線上課程網站平台
- Make：視覺化自動化工作流程，將數據串接等在各種軟體來回穿梭，提升工作效率
- Piktochart：資訊圖表設計工具
- ClickMagick：在找 AB Testing 工具時發現 ClickMagick 有這個功能，也看了其他 YouTuber 簡介，感覺相當易用，所以先收下了
- MotionElements：專業的影片素材、版型、外掛
- MotionVFX：專業的影片素材、版型、外掛
- Payoneer 派安盈：安全、快速，一站式跨境收款
- Wise：跨境帳戶，進行國際付款、收款
- Surfshark：Surfshark VPN 最近開始用，還滿好使用的！原本需求是想要瀏覽某些國外網站卻被強制自動轉址，所以用 VPN 解決此問題
- Firstory：平台上架、贊助訂閱 與廣告盈利 最完整強大的 Podcast Hosting 省去所有繁瑣上架流程，我們將你錄好的音檔自動發佈到 KKBOX、Apple Podcasts、Spotify 和 Google Podcasts 等收聽平台
- Descript：錄製 Podcast 線上工具，包含影音剪輯、Podcast 錄製、螢幕錄影等功能。There are simple podcast & video editors and there are powerful ones. Only Descript is both & it features magical AI, so you can skip the hard part of editing. Get started for free
- Podcastle：錄製 Podcast 的線上工具，包含影片和聲音剪輯、聲音轉文字等功能。Podcastle is the simplest way to create professional-quality podcasts. Record, edit, transcribe, and export your content with the power of AI, in an intuitive web-based platform.
- 陸續蒐藏與研究…
有任何想問的問題，歡迎填寫表單留言或寄信給我 irving@irvinglab.com、FB 粉絲團或直接線上交談，我們一起交流、成長！附上我的網頁設計作品，可以來逛逛喔！歡迎加入 Shopify 網站設計與架站學習交流：Line 社群 一起交流與學習！但在美國的用戶無法加入台灣的 Line 社群，所以我也另外建立了 Telegram 社群，兩邊珍貴的經驗會同步分享與整理。若想進一步了解服務內容，可以加入 Irvinglab 爾文實驗室的 Line@ 官方帳號留下訊息給我們。
