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

建立 Shopfiy 電商網站的時間規劃表,從需求確認、Shopify 版型和 Shopify App 設定等,拆解每個階段的任務與細節

Irving Chen
Sep 29, 2020 · 7 min read

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

嗨我是爾文(Irving Chen),資深網頁設計師,先快速介紹一下自己的架站經驗,本人有多年使用 WordPress 架站與網頁設計接案的經驗,近期也開始專精 Shopify 建置電商網站,對於這類平台的限制與可塑性有一定的了解,希望藉由實戰分享讓更多人了解這個領域的眉眉角角,透過經驗交流讓彼此成長更快速!

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

  1. Google Sheet:Shopify 網站排程表
  2. Figma:Shopify 網站規劃與設計
  3. Google Doc:Shopify 整理中
Shopify 網站排程表 (Google Sheet 模板) — Irvinglab 爾文實驗室

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

我一直在根據手上數個專案進行調整,找出一個順暢的 Shopify 網站「設計」執行的 SOP 與規劃

Shopify 網站規劃與設計 (Figma 模板)— Irving Lab 爾文實驗室

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 中,可以縮放瀏覽,我已設定公開,若你也有使用 Figma,歡迎蒐藏與分享,並且留言和拍手讓我知道這對你的工作很有幫助噢!因為我會不定時去更新檔案內容與流程編排,所以隨時可以回來閱讀文章囉!按此下載 PDF 檔

各階段工作內容概要(持續更新中)

  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、網站速度

用手機看可能不太能看到內嵌的 Figma 檔案,所以在下方附上兩張圖片。

Shopify 電商網站設計流程與時間規劃-01-Irving Lab 爾文實驗室
Shopify 電商網站設計流程與時間規劃-02-Irving Lab 爾文實驗室

有任何想問的問題,歡迎留言或寄信給我 irving520@gmail.com,我們一起交流、成長!附上我的網頁設計作品,可以來逛逛喔!歡迎加入 Shopify 網站設計與架站學習交流:Line 社群 一起交流與學習!但在美國的用戶無法加入 Line 社群,所以我也另外建立了 Telegram 社群,兩邊珍貴的經驗會同步分享與整理。

爾文讀書中,跟我一起讀書去!精選書單:http://bit.ly/irving-is-reading

IrvingLab 爾文實驗室

爾文實驗室為數位而生!

Irving Chen

Written by

Senior web designer, movie and book enthusiast, badminton lover. Visit my latest portfolio on Behance — https://www.behance.net/irvingchen

IrvingLab 爾文實驗室

就愛網站設計!Web Design Lover

Irving Chen

Written by

Senior web designer, movie and book enthusiast, badminton lover. Visit my latest portfolio on Behance — https://www.behance.net/irvingchen

IrvingLab 爾文實驗室

就愛網站設計!Web Design Lover

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store