設計還原度到底是態度問題還是技術問題？本文介紹幾個實用的提升設計還原度的方法。

如果你參與過實際的項目開發上線，必然會遇到一個合作中的難題——設計的還原度。

完美的設計稿一經開發實現后效果慘不忍睹，怎樣才能減輕還原的痛苦且達到很好的實現效果呢？

第一步，也是最重要的一步，設計師需要針對還原的重要性與開發達成共識。只有大家意識統一，才能共同解決問題。

一般來說還原度的重要性為：用戶產品>B端產品>后臺。對于用戶產品最好是能做到像素級。

然后開始我們具體的操作，從設計、標注、還原3個環節去提升設計的還原度。

一、優化設計文件，避免給自己挖坑

1. 文字

在界面設計中，文字往往會占比較大的比重，也容易影響最終效果。

文字在效果圖中最好按照中英文最好是單獨設置文字，開發還原度會更好。英文使用SF Pro 、中文使用PingFang SC。你也可以使用craft插件設置每個字體樣式或Text Style，這需要把行高調成和開發使用的system字體行高。

2. 對齊

我們經常會在設計中遇到圖文對齊的情況，如下圖，在設計邊緣對齊時，需要考慮到默認的文字行高（默認行高一般是字號的1.2倍）。如果需要強行對齊邊緣，可以文字往上移，因為有些機型的字體無法更改行高。

3. 特殊情況一定不能忽略

在設計中先考慮到一些極端情況，比如內容過長或過短，并在圖中做出示意。

例如微信小程序的表單組件規范：

by 微信小程序規范1.0

二、怎么標注才完美

很多設計師開始用sketch了，可以利用各種插件輕松導出設計規范，但在實際項目中，偷懶往往會造成后期更大的麻煩，合理利用標注工具，節約的時間可以把一些容易出錯的部分詳盡標出。

這里列舉2個非常常見的容易出錯的地方：

1. 關于動態內容的標注

如果內容是后臺上傳的動態數據，界面的內容展現則會出現多種情況，最好再補充一份設計展現邏輯的標注文檔。

舉個例子：

設計一套數據展現的卡片，我們需要提供的設計輸出包括：源文件、效果圖、切圖、Html的標注、設計規則的標注。

如下圖：

在這個圖示中，把卡片的功能區域進行了劃分，且把數據的可展現區域和對齊方式都做了說明，以保證數字變化時也能呈現比較好的視覺效果。（ps：為了更直觀此標注的其他部分做了簡化）

2. 展現邏輯的標注

這里給大家舉個tab的例子，如下圖，tab作為通用的組件，可能會出現2-n個，如果全部標注一遍，費時又不直觀。如果梳理一個展現邏輯，則會簡單易懂。

三、你好我好大家好的驗收方法

1. 規范宣講

視覺發布和規范宣講可以一同舉行，溝通開發需要注意的實現要點。設計過程中忽略的多狀態情況也可以通過宣講查缺補漏。會議中設計師做好紀要，已確保大家對于設計實現的達成一致。

2. 重疊還原法

顧名思義，就是把實現后的界面截圖與效果圖重疊在一起，進行像素級還原。雖然開發不太樂意，但是到底差在哪兒了，特別直觀。

3. 面對面聯調

設計規范做得再完善也難免會有欠缺，面對面調整效率是最高的。俗話說見面3分親，通常不愿意調整像素的開發，磨一磨也就同意了。

如果你有更好的還原方法，歡迎留言交流。

本文由 @Joyking 原創發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議。