
我記得 2018 年初時難得有個機會可以把工作流程寫得很詳盡,為此花了時間整理,向朋友們請教、一起檢討整理出來的經驗分享~(2019.01.30 更新簡報)
網頁工作流程是我工作以來一直想要統整的東西,不過以前真的沒有想很多,直到我遇到複雜的案子時,越覺得這件事情非常重要,有一個 SOP 流程,大家才好做事,也降低溝通的錯誤,因此寫一篇自己經驗的工作流程跟大家分享!
同時也請教各路專業領域的朋友,來幫我看寫得對不對,尤其是 UX 那塊是我特別不熟悉的事情,而且台灣真正有實作 UX 的公司不多,也是我學習的部分,然後順道釐清自己工作的方式有沒有什麼問題,檢討自己工作上是否還有更多要修正的地方。
整篇文件內容分為:企劃、設計、前端、後端
主要分析前三個部分(因為後端有自己的小世界(?!😆),好吧我承認後端那塊我真的不知道要怎麼寫才對,就算自己架過站也不一定有什麼章法…😂),會用「企劃」、「設計」的講法並不局限於職稱,我認為這是一個階段性的動作,大致目錄如下:
一、 前言
二、企劃:
- 確認網站需求
- 擬定網站架構圖
- 功能心智圖(Functional Map)
- 網站架構樹狀圖(Sitemap)
- 版面色塊架構圖(Layout Structure)
- 製作 UX 設計
- 使用者操作流程圖(User Flow)
- 人物誌(Persona)
- 故事板(Storyboard)
- 價值主張(Value Proposition)
- 繪製完整線稿
- 使用者體驗旅程地圖(User Journey Map)
- 響應式變化線稿(Responsive Wireframes)
- 介面流程圖(UI Flow)
- 同步抓製作時程
三、 設計:
- 視覺稿規格
- 網頁 UI, UX 參考
- 除了視覺稿上的其他細節
- 給前端的檔案注意事項
四、 前端:
- 視覺稿切圖
- 撰寫網頁程式
- 跨平台測試除錯、效能優化
- SEO、上線前後測試
五、 後端:
- 後台功能開發
- 主機設定
- 與前端串接
- 放上 git 和測試機
六、 附註:
- 基本 Meta 設定
- FB Meta 設定
- GA 網址設定
- GA 追蹤碼設定
- FB 分享狀態
- 雲端文件範例
七、維護
八、結語
如果以上有任何的錯誤或是更好的建議,歡迎私訊或留言告訴我~希望對路過的你有所幫助唷 😀
*此簡報的附件檔案(桌機手機版的 psd 和除錯表 excel)可從這裡下載:網頁設計工作流程SOP.zip