無廢話網頁重構系列——（4）切圖與標註

本篇講從設計稿中提取基礎資源和信息：切圖與標註。

合格的設計師，會使每一個元素組基於矩形層，造成一個個單元，並作好圖層分類及命名，不在‘組’上使用蒙版，按照柵格化模塊化設計，考慮各組件的複用性、擴展性和兼容性。

遇到不合格的設計師，那就把設計稿退回去，深刻交流溝通。

不建議設計師切圖，由於要考慮到圖形壓縮格式、編碼實現方式及圖形替代方案。

不要直接用Adobe Photoshop/Fireworks劃切片範圍導出切片。

採用lower_snake_case命名規則修改要導出的組或圖層名稱，命名方式爲模塊/組件_用途_狀態，毫不用表象的具體詞彙，如大小尺寸、顏色、形狀、新舊之類。推薦Renamy進行批量命名。

輸出切片方式有不少，目前最新版CC很是便捷，選擇要導出的組和圖層，鼠標右鍵導出爲，進行「縮放設置、文件格式、圖像大小、畫布大小」配置後導出便可，而且還能夠複製圖層CSS樣式；也能夠選擇切圖插件，如Cutterman。

圖標不建議作 Sprite 圖，而是採用Web Font，推薦Iconfont。

方便接下來編碼讀取頁面元素信息（尺寸、文字、色彩、間距、位置、屬性），強烈建議「標註」，推薦Parker、Ink、PxCook。

也能夠使用Zeplin、藍湖等在線產品設計協做平臺，它們提供了標註切圖、頁面邏輯、批註討論、原型演示、版本管理等豐富的功能。

各類列表配圖、焦點輪播圖、詳情頁用圖、Banner，產品設計階段應已按寬高比指定了多種尺寸，推薦用Placeholder、temp.im佔位。

---

從設計稿提取了基礎資源，接下來能夠搭建工程目錄了。

（本篇結束）

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

By 小可 from https://xinlu.ink/tech/pro-web-reconstruction-4-generate-assets.html