我記得 2018 年初時難得有個機會可以把工作流程寫得很詳盡,為此花了時間整理,向朋友們請教、一起檢討整理出來的經驗分享~(2019.01.30 更新簡報)

網頁工作流程是我工作以來一直想要統整的東西,不過以前真的沒有想很多,直到我遇到複雜的案子時,越覺得這件事情非常重要,有一個 SOP 流程,大家才好做事,也降低溝通的錯誤,因此寫一篇自己經驗的工作流程跟大家分享!

同時也請教各路專業領域的朋友,來幫我看寫得對不對,尤其是 UX 那塊是我特別不熟悉的事情,而且台灣真正有實作 UX 的公司不多,也是我學習的部分,然後順道釐清自己工作的方式有沒有什麼問題,檢討自己工作上是否還有更多要修正的地方。

整篇文件內容分為:企劃、設計、前端、後端
主要分析前三個部分(因為後端有自己的小世界(?!😆),好吧我承認後端那塊我真的不知道要怎麼寫才對,就算自己架過站也不一定有什麼章法…😂),會用「企劃」、「設計」的講法並不局限於職稱,我認為這是一個階段性的動作,大致目錄如下:

一、 前言

二、企劃:

  1. 確認網站需求
  2. 擬定網站架構圖
    • 功能心智圖(Functional Map)
    • 網站架構樹狀圖(Sitemap)
    • 版面色塊架構圖(Layout Structure)
  3. 製作 UX 設計
    • 使用者操作流程圖(User Flow)
    • 人物誌(Persona)
    • 故事板(Storyboard)
    • 價值主張(Value Proposition)
  4. 繪製完整線稿
    • 使用者體驗旅程地圖(User Journey Map)
    • 響應式變化線稿(Responsive Wireframes)
    • 介面流程圖(UI Flow)
  5. 同步抓製作時程

三、 設計:

  1. 視覺稿規格
  2. 網頁 UI, UX 參考
  3. 除了視覺稿上的其他細節
  4. 給前端的檔案注意事項

四、 前端:

  1. 視覺稿切圖
  2. 撰寫網頁程式
  3. 跨平台測試除錯、效能優化
  4. SEO、上線前後測試

五、 後端:

  1. 後台功能開發
  2. 主機設定
  3. 與前端串接
  4. 放上 git 和測試機

六、 附註:

  1. 基本 Meta 設定
  2. FB Meta 設定
  3. GA 網址設定
  4. GA 追蹤碼設定
  5. FB 分享狀態
  6. 雲端文件範例

七、維護

八、結語

如果以上有任何的錯誤或是更好的建議,歡迎私訊或留言告訴我~希望對路過的你有所幫助唷 😀

*此簡報的附件檔案(桌機手機版的 psd 和除錯表 excel)可從這裡下載:網頁設計工作流程SOP.zip

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *