知識整理

我記得 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