Back

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

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

「實戰經驗分享,非只是網路資料整理」(更新時間: 2022.10.09)

嗨!我是爾文(Irving Chen),資深網頁設計師,先快速介紹一下自己的架站經驗,本人有多年使用 WordPress 架站與網頁設計的經驗,近年則專注 Shopify 電商網站設計與建置。對於這類架站平台的限制與可塑性有一定的了解,例如 Squarespace、Wix 後台真的限制超多,大部分的情況只能按照其版型去做編排,要做其他設定會相當困難而痛苦;WordPress 則是彈性度超高,可以在後台來去自如、修改頁面程式碼、使用海量的版型和外掛資源為網站打造全方位數位能力。若有網站相關問題,可以前往填寫表單留下訊息或需求給我,我會盡快回覆!

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

  1. Shopify 網站進度表範本(Google Sheet)
  2. Shopify 網站專案執行流程範本(Notion):逐步優化中,敬請期待!

Shopify 網站排程表

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

Shopify 網站排程表模板 (Google Sheet)

Shopify 網站規劃與設計

Shopify 網站規劃與設計 (Figma 模板)
  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 電商網站設計的時間排程,每個階段規劃依實際需求和情況彈性調整,時程的長短可以當作一個參考值即可。我們有了「執行所需時間」與「工作事項」的概念,讓團隊、客戶或專案經理在初步規劃時不會毫無頭緒!

此檔案是建立 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 檔匯入到 Miro、Figma、FigJam 瀏覽、筆記、分享與協作

如何一次輸出 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 檔即可


設計與行銷工具

  • 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.comFB 粉絲團直接線上交談,我們一起交流、成長!附上我的網頁設計作品,可以來逛逛喔!歡迎加入 Shopify 網站設計與架站學習交流:Line 社群 一起交流與學習!但在美國的用戶無法加入台灣的 Line 社群,所以我也另外建立了 Telegram 社群,兩邊珍貴的經驗會同步分享與整理。若想進一步了解服務內容,可以加入 Irvinglab 爾文實驗室的 Line@ 官方帳號留下訊息給我們

爾文讀書中,跟我一起讀書去!精選書單 (持續更新):前往瀏覽
爾文上課中,跟我一起上課去!精選課程 (持續更新):前往瀏覽

Leave a Reply

發佈留言必須填寫的電子郵件地址不會公開。