關於Sketch帶陰影的圖案切圖給工程師的解決方案

03-04

設計師在用Sketch做好UI之後，需要切圖給工程師，標註每個元素的位置和尺寸。一般，這個過程會選擇使用Sketch Measure插件來完成。遺憾的是，Sketch Measure導出的尺寸標註不包含外陰影部分，只是圖層在Sketch里的原始尺寸。所以當導出的圖片帶有外陰影的時候，Sketch Measure導出的尺寸標註就是錯誤的，工程師按照標註實現，最後產品UI就會混亂。

網上很多人遇到過這個問題，但是沒有很好的辦法，包括知乎這個問題 sketch裡面帶陰影的圖片如何切給工程師？

有些回答說讓工程師實現陰影，有些回答說手動標註，還有說當前扁平化時代盡量不設計陰影效果。

首先，任何時候，陰影都是無法避免的，完全沒有陰影不是好的設計。

其次，實際項目中，大部分圖案的陰影一般不是程序員負責繪製的。程序員有很多其它工作量，沒必要為他們增加這些負擔，陰影包含在圖片裡面，開發流程會更加高效。

在Sketch里，一個圖層加了外陰影之後顯示的尺寸不會改變，這個尺寸是圖層的原始尺寸。如果把這個圖層導出圖片，圖片會包含外陰影，圖片的尺寸也會大於圖層的原始尺寸。這個大尺寸在Sketch中叫做圖層的 影響尺寸(Influence rect)。它包含了外陰影和外邊框等內容。如下圖所示：

所以只需要讓Sketch Measure可以導出影響尺寸(Influence rect)，問題就解決了。

幸運的是，偉大的Sketch Measure是開源的，通過修改Sketch Measure的代碼，使其支持導出影響尺寸。在導出界面選中「導出圖形的影響尺寸」選項，然後導出。Spec頁面內就會顯示影響尺寸。

示例圖使用了我自己臨摹的SmartisanOS的秒錶UI，希望沒有侵權。

這個功能改進本人已經在Github上提交了Pull request給Sketch Measure的原作者utom，希望在未來的官方版本中會引入這個功能。

目前，如果大家需要使用這個功能，可以去這裡下載我修改版本的Sketch Measure。