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

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

完美的設計稿一經(jīng)開發(fā)實現(xiàn)后效果慘不忍睹，怎樣才能減輕還原的痛苦且達到很好的實現(xiàn)效果呢？

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

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

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

一、優(yōu)化設計文件，避免給自己挖坑

1. 文字

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

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

2. 對齊

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

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

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

例如微信小程序的表單組件規(guī)范：

by 微信小程序規(guī)范1.0

二、怎么標注才完美

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

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

1. 關于動態(tài)內(nèi)容的標注

如果內(nèi)容是后臺上傳的動態(tài)數(shù)據(jù)，界面的內(nèi)容展現(xiàn)則會出現(xiàn)多種情況，最好再補充一份設計展現(xiàn)邏輯的標注文檔。

舉個例子：

設計一套數(shù)據(jù)展現(xiàn)的卡片，我們需要提供的設計輸出包括：源文件、效果圖、切圖、Html的標注、設計規(guī)則的標注。

如下圖：

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

2. 展現(xiàn)邏輯的標注

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

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

1. 規(guī)范宣講

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

2. 重疊還原法

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

3. 面對面聯(lián)調(diào)

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

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

本文由 @Joyking 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉載。

題圖來自 Unsplash，基于CC0協(xié)議。