如何做好設計還原？從這5個方面入手！

作為設計師，一個老生常談的話題就是還原度檢查。

還原度檢查：也叫還原度驗證、設計走查、設計驗證。是保證研發實際實現的效果是否和設計稿一致的過程。

借一位建筑設計師寫的話來說，“畫一張效果圖很容易，但項目得以高完成度的還原卻很難?！?如果你的設計不是僅僅停留在紙面，那你就需要面臨最終的設計還原度問題。

在進行還原度檢查中，你是否有聽到過這樣的話：

“我這樣實現也行吧，我覺得比你設計還好點?！?br /> “這里還不對嗎？我已經改了好幾遍了……“
“項目時間太緊了，我們先實現功能吧?！?br /> “不就幾個像素嗎？差不多行了?！?br /> “我覺得是一樣的，你行你上？”

……

這些其實并不是個例。

在設計還原度檢查的過程中，我們常常會遇到這樣或那樣的問題，令這個過程耗費精力無數，最終收效卻并不大。聽聞一位設計師說他們某個項目，最終耗費了 30 人/天的時間去做還原度驗證。

設計的項目還原度如何，是每一位設計師成長的必經之路，也是設計師能力的一種重要體現。說到這里，你可能有點疑問，明明是研發實現的問題，怎么成了能衡量設計師能力的一種體現呢？

誠然，在同等條件下，優秀的研發工程師能夠憑借自身實力和豐富經驗實現更高程度的設計稿還原，同樣的，優秀的設計師也可以憑借著自身實力和豐富經驗，保證自己的設計稿具有更高的還原度，這是一個相互影響的過程。

所以，本質上，設計還原度，還是一個合作問題。

而 B 端+AR，其本質也是一樣，是建立在設計還原度檢查的通用場景上的一個特殊場景。接下來的文章，我分五個部分來進行說明。

···

要檢查的內容都有哪些呢？

我認為，整個設計還原度檢查可以分為三個部分：

1. 交互內容

交互內容緊扣功能，但和測試不同，主要是以用戶的使用流程來檢查相應功能下的交互邏輯是否完整實現，反饋和提示是否有遺漏，使用時的合理性和可用性是否與設計初衷一致。

AR 中還應多關注各種交互轉換中的相對參照分類是否正確。

2. 視覺內容

前端頁面的靜態效果是否和設計稿一致，包括色彩、布局、排版等細節，這塊內容一直是研發和設計難以達成一致的重災區。

在 AR 應用中，還要包括三維內容的大小、材質等細節。

3. 整體體驗

AR 設計是虛實結合的設計，我們實際設計時雖然只能著眼于虛擬元素，但用戶所體驗到的是結合真實環境的虛實結合界面，所以特定環境下的整體體驗檢查也是必要的。

我做的項目由于一般是一整套系統，通常存在多個終端數據聯動，比如 web 平臺和 AR 應用的聯動，那它們之間的交互是否符合設計需求，是否有遺漏和錯誤，也屬于整體體驗的檢查內容。

什么時候做還原度檢查最適合呢？

為了效率最大化，我推薦是產品提測后再進行設計還原度檢查，如有條件，最好在測試團隊完成第一輪功能測試后再介入。
原因有三個：

• 第一，一般功能性的 bug 會更為緊急，因為它大多會導致產品在該功能上存在完全不可用的狀態，這個時候就算設計師介入去做還原度檢查，也很難檢查到設計本身的問題。
• 第二，在改動功能型 bug 的時候，會使某些已經修改的還原度問題復現，加重了反復查驗的工作量。
• 第三，一些很明顯的交互和視覺問題，其實測試團隊是能夠幫忙測出來的。

檢查到什么程度？

這個其實沒有非常硬性的標準，不同公司、不同項目、不同設計師都可能不一樣。有的認為 95%以上還原度才能達到標準，有的認為 90%甚至 80%就算達到標準。

一般來說，還原度標準：C 端＞B 端＞后臺。

而 AR 應用的還原度即使在 B 端，也應該大于通常的 B 端應用，因為在當前技術水平下，許多 AR 應用首要滿足的是展示目的，交互和視覺的最終效果是非常關鍵的。

常見問題？

在設計還原度檢查中，我們常常遇到這樣或那樣的問題，歸納起來，有下面幾點。

1. 設計輸出有缺失

輸出的缺失主要體現在兩個方面，是一個是內容本身的缺失，一個是附加說明的缺失。

內容本身的缺失，指設計輸出里缺少某些細節交互的說明，界面不同狀態的展示，不同狀態的按鈕或圖標切圖，動效說明等。這個可以靠設計師的細心和對設計的自查來避免。

附加說明的缺失，主要是標注的問題。隨著行業的發展，現在已經有很多自動標注和切圖工具了，但正因為如此，反而容易因為懶，缺失很多需要手動補充的信息標注。

2. 設計處理不規范

設計處理不規范，主要是指自由發揮，完全不考慮研發的實現難度和整個項目的目標。有些設計稿乍一看質量上乘，如果作為停留在紙面上的作品甚至相當優秀，但是 UX 設計畢竟不是純藝術，而是用來解決問題的方案，需要掌握平衡。

3. 研發沒有理解設計的邏輯

由于每個人的角度不一樣，即使輸出的設計文檔在設計師眼里看起來再詳盡，在研發人員的理解下也可能完全不一樣。

4. 研發和設計師優先級認知不一致

如果說沒有理解帶來的現象是研發工程師認真的做了，但沒有做對。那這一點帶來的現象就是他明明可以做好，卻總是不好好做。也就是我們常常吐槽的研發人員“不配合”。這里的不配合，其實就是兩方在優先級認知上不一致，你提出的還原度問題，他覺得沒什么關系。既然無關重要，何必浪費精力？畢竟，哪個研發工程師身上不背幾個 bug。

5. 還原度檢查不完整

該檢查的內容沒有檢查到。原因可能有自己的，也可能有外部的。比如在 AR 設計中，我們經常會遇到很難完美復現 AR 應用真實環境的問題。又比如在某個 To B 項目中，由于 web 平臺的聯動終端是機器人，我很難在某些與機器人強聯動的界面上進行整體的體驗檢查。

怎么做得更好呢？

為了有效保證還原度，我們可以做的事情有很多，我總結了 7 點：

1. 重視設計規范

第一、有規范。第二、符合規范。

有規范，指整個設計有自己的規范定義，同類的元素使用相同的規范來呈現，具有一致性的間距、大小、色值設定等。比如同樣表示“可用”/”不可用“的標簽，在所有的界面，都應該是一致的視覺元素，包括樣式、顏色、文字、間距、大小等。

符合規范，指符合研發語言的基本規范定義，比如可行情況下盡量使用該語言下的常用標準框架，定義最小單元網格（一般 4px，6px，8px 等），切圖或間距等盡量以此為倍數；不要出現奇數等。這些都可以提高研發的效率。

設計規范的好壞，直接影響到后面的設計宣講和設計輸出的好壞。

2. 了解開發思維

了解開發的思維，在做設計稿的時候就可以換個角度看問題，足以讓自己在后面的還原度檢查中更省心省事。

首先是最簡單的盒子模型。

盒子模型是 CSS 語言中的術語， 又稱框模型 (Box Model) ，所有 HTML 元素可以看作盒子，是用來設計和布局時使用。CSS 盒模型本質上是一個盒子，封裝周圍的 HTML 元素，它包括：邊距，邊框，填充，和實際內容。 盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。

圖片來自網絡

然后是 AR 設計中常用的 U3D 工具。這款工具可以使用多種語言來開發，它的布局可以分為三種方式：固定像素、根據屏幕大小進行縮放、固定物理距離。

固定像素，忽略屏幕的大小根據 UI 元素的實際像素顯示 ，像素大小始終不變，即一個 100×100 的圖片在任何的分辨率下都占用 100×100 的像素。一般 PC 上會使用這種方式，因為 PC 端分辨率差異并不大。

根據屏幕大小進行縮放，是研發最常用的一種，會根據設備真實分辨率與設計分辨率來對 Canvas 進行縮放。有三種模式：

1. Match Width or Height
2. Expand
3. Shrink

固定物理距離，忽略屏幕大小和分辨率根據 UI 的實際物理大小來顯示。

3. 宣講設計邏輯。

不管是和設計評審一起還是私下對接研發，都要對自己的設計邏輯和輸出內容做講解，講解的內容包括：通用的設計規范、資源圖的命名規則、特別事項的注意等等。

講解的目的就是讓他理解你的設計邏輯。

通過講解，研發人員明白這些設計的內在意義，知道為什么要這樣做，才能夠幫你把設計實現得更好。同樣，宣講設計邏輯的時候一定要要求具體的研發工程師到場，這會提高后面一系列工作的效率。

想一想，當你把自己辛辛苦苦，連幾個像素一點點色差都要糾結半天作品托付給另外一個人，不該囑咐囑咐幾句：“親～這非常重要，值得你好好對待。”

4. 完善設計輸出

完整的設計輸出，應該包含承接產品需求文檔的交互說明、視覺說明（含標注）和相關資源。

交互說明，應該寫明可點擊部分跳轉的界面，不同狀態下的中間過程，特殊情況下的界面處理等等。

視覺說明，應該包含對規范的說明和幫助研發實現界面的標注。

（1）規范的說明，需要設計師梳理通用的內容，讓工程師對項目的前端界面樣式有個整體了解，快速查找和定位到具體頁面的基礎樣式（如：標準色、標準字、按鈕等），也可以讓研發工程師清楚的知道哪些內容我只要兢兢業業的調一遍，就可以復制到其他地方了。

圖片來源： https://www.crazypm.com/zixun/118372.html

AR 應用主要使用 U3D 研發，不像普通的屏幕 UI 有諸如藍湖、摹客、marketch 這些標注工具自動翻譯，我所遇到的工程師大多傾向于把設計師的效果圖放到正視圖下的狀態，再用切圖的元素一個個界面拼出來，如果研發能知道有些界面通用一套“拼圖法則”，那會省事很多。

（2）標注部分，除了交給自動標注軟件標注的部分，還應該將無法自動標注出來的內容通過手動標注補齊，這些內容包括但不限于：

• 動態內容的標注

圖片來源： https://juejin.cn/post/6844903712331137037 ??微信小程序規范V1.0

比如：絕對位置和相對位置的注明。

上面這張圖，A 類標注就可以用自動標注精確到像素完成，而 B 的標注因為不同屏幕大小不同，其實只要保證兩個 B 相等就可以，那這里就需要手動注明了。

在 AR 應用中，由于涉及到三維空間，相對參考物尤為重要，首先要保證研發知曉當前界面里每個元素的參照對象（關于 AR 界面按參照物的分類），然后，再按照百分比來進行標注。

當然，也可以更為精確的使用當前 Z 軸下的物理尺寸來進行標注，但需要一些轉換會比較難以把握。標注的這個部分，是和了解開發思維相輔相成的，當你了解開發思維后，就能夠標注出更符合研發人員要求的說明。

相關資源，是指研發所需要的視覺元素資源。相關資源按照一定的規范命名，方便研發人員查找使用。

值得注意的是，在 AR 應用的設計中，視覺不僅僅指二維視覺（GUI）的說明和相關資源，還應該包括三維視覺內容的必要說明和相關資源。為了更好的模擬實際研發后的效果，盡量還原用戶可見界面，推薦在視覺設計輸出時添加環境照片。

設計輸出是設計體現的書面形式，是整個設計交付非常重要的一環。好的設計輸出讓你交付研發時可以放心大膽的說一句：“親～你還有不懂的可以看文檔哦，別有事沒事都來煩我如果有問題可以再找我?！?/p>

5. 了解檢查目標

前面我們說過，還原度驗證的標準一般 C 端大于 B 端大于內部后臺，AR 應用由于其特殊性，即使交付 B 端的 AR 應用也一般要高于普通 B 端的還原驗收標準，在此基礎上，可以根據項目公司業務和項目實際情況來確定一個基準。

分清輕重緩急，避免體驗問題被擱置，或者好改的體驗問題被改了，而比較重要的體驗問題，反而因為不好改反而遺留下來。

圖片來源： https://www.shangyexinzhi.com/article/4211627.html

6. 選用合適工具

現在市面上已經有一些工具幫助設計師進行還原度檢查，這里簡單的舉例 2 個。

Css Peeper： https://csspeeper.com/

它比瀏覽器自帶的 Css 代碼檢查更適合設計師，不僅可以看到元素的常規屬性，比如顏色、背景、間距；還可以看到元素的盒子模型，可以看到元素的 Padding、Margin…

Copiexl： https://copixel.bytedance.com/

字節出品的一款走查插件。

通過在網頁上放置設計稿圖片檢查設計稿與開發結果是否完全重疊來判斷開發的還原精度，精確到像素實現高質量的項目還原效果。

7. 記錄總結情況

在項目發布之前，很多情況下體驗問題可能得不到全部解決，這個時候，總結現有的設計還原程度，明晰重點問題及可能產生的體驗風險，能夠幫助整個項目快速了解現狀，決策任務優先級。對于其他遺留的問題，也能夠有機會進入下一輪迭代中。

· · ·

還原度的本質是一個合作問題，只有設計質量硬，配套產品全，在與研發合作的過程中活用我們的用戶思維，才能讓我們的設計作品得到更高的還原度。

參考文章：

• 《B 端設計還原怎么做》 https://mp.weixin.qq.com/s/8km7K2mBXipvFHqEO6H40g
• 《UI 設計師如何提高設計還原的質量和驗收效率》 https://www.shangyexinzhi.com/article/4211627.html
• 《UI 設計還原度走查報告的方法和注意要點》 http://www.wellworks.cn/html/chanpinsiwei-show-213.html
• 《為什么你的設計還原度很差？》 https://juejin.cn/post/6844903712331137037
• 《設計還原五步曲——視覺篇》 https://www.crazypm.com/zixun/118372.html
• 《實用干貨！如何讓設計效果高還原度落地？》 http://www.woshipm.com/ucd/322736.html
• 《拿什么拯救我的設計稿？前端還原度為何如此低？我該如何標注？》 https://zhuanlan.zhihu.com/p/57999206
• 《unity3d 開發語言有哪些》 https://zhuanlan.zhihu.com/p/35772005
• 《UGUI 布局與屏幕適配（二） https://zhuanlan.zhihu.com/p/37755745
• 《讓設計稿還原度更高！兩款高手都在用的 B 端設計走查神器》 http://www.czdes.cn/b-end-design-walkthrough
• 《字節跳動是如何讓開發高質量還原設計稿的？》 https://xd.94xy.com/zuixindongtai/518.html

歡迎關注作者微信公眾號：「林間有影落」