無廢話網頁重構系列——（3）Web重構前的分析

本篇講重構前的分析。從「工做狀態、工做環境和工做角色」和具體重構工做兩方面分析。

凡是通過考驗的朋友，就應該把他們牢牢地團結在你的周圍

比較理想的工做狀態：制定了各類設計和開發規範，各團隊之間郵件、團隊內部即時通信工具或聲波傳輸溝通，對已有的或將要孵化的項目和產品，或多或少會有參與和認識，較早的進入開發環境中，進行準備、分析和實施相關的思考。但也可能會是產品需求未肯定和頻繁變動，技術規範、產品文檔和開發文檔還沒有定義，已經要求團隊進行並行開發的充滿風險的工做狀態。

工做環境可能是公司內部，但也有可能接觸或成爲 Outsourcing 開發夥伴，將會經歷工期、需求、各規範、技術棧、開發模式、開發流程、產品性能迭代等方面的嚴峻考驗。

接觸過產品需求、交互文檔中的各類描述，如一級頁面二級頁面三級頁面，直接從不肯定的類目名定義具體的模塊，形成「這個就是之前的/上一個版本的**分類」；接觸過設計師比較隨意，頁面無柵格，圖層無分組不命名，圖標不矢量處理，間距顏色字體憑手感視覺；也有設計師很是嚴謹，柵格參考線鎖定，組件式全部模塊置於一個PSD並標註，圖標iconfont拉你進項目成員組；也接觸過其餘同行的編碼，差很少和設計稿相同的經歷；

綜上所述，項目開發越多，跨項目週期、跨組織跨地域、跨角色的協做問題也會越多，須要結合項目參與人員、時間節點和伸縮性等因素分析，做出合適的技術選型，和行之有效的溝通。

若是作好心理準備，一切準備都已經完成

到具體重構工做的分析，從收到設計師的稿，要考慮：站點風格，如何柵格，內容、結構、樣式、行爲如何分離，站點、頁面公用部分和業務模塊組件有哪些，主次顏色，行高是多少，標題、段落字體字號有哪幾種，圖文組合有幾種，列表有幾種，模塊內外間距是多少，ICON圖標有哪些，響應式佈局處理…

重構不是徹底還原設計稿，是基於設計稿，提煉和整理，分析和統計，獲得各個方面數據。

---

分析完成，開始動手。

（本篇結束）

許可協議：自由轉載-保持署名-非商業性使用-禁止演繹 (CC BY-NC-ND 4.0)

By 小可 from https://xinlu.ink/tech/pro-web-reconstruction-3-forecast.html