在日常工作中，設(shè)計還原度低是我們經(jīng)常會遇到的問題，那么該如何解決這一問題呢？本文將結(jié)合相關(guān)實際案例，與大家分享相關(guān)內(nèi)容，希望對你有所啟發(fā)。

設(shè)計還原度低是我們?nèi)粘９ぷ髦薪?jīng)常遇到的問題。最近有同學(xué)就有這樣的問題：

有沒有什么工具或者具體的方法提升組內(nèi)的設(shè)計還原度？組內(nèi)前端同學(xué)經(jīng)常無視設(shè)計稿上的細(xì)節(jié)，導(dǎo)致線上慘不忍睹，產(chǎn)品的體驗大打折扣，跟他說了也還是不改。有沒有什么制度或者流程，督促他們調(diào)動自覺性的方法？

這個問題其實是一個常見現(xiàn)象，當(dāng)然了，設(shè)計的還原度只能盡可能的提高，沒有那種完全100%確保一致的方法，本文將結(jié)合實際的案例與大家進(jìn)行分享~

01 關(guān)于設(shè)計還原度

對咱們設(shè)計師而言，保證設(shè)計還原度一直是我們工作的重中之重。

那我們一直糾結(jié)的還原度究竟是指什么？

「設(shè)計還原」指的是針對開發(fā)后的產(chǎn)品與原先設(shè)計的產(chǎn)品效果的偏差，進(jìn)行交互以及視覺效果的比對。

為了保證設(shè)計質(zhì)量得以保證，我們經(jīng)常是在產(chǎn)品驗收環(huán)節(jié)的最后一步才進(jìn)行設(shè)計走查。作為臨近上線才開始介入，最后導(dǎo)致因為時間不不夠，只能優(yōu)化部分設(shè)計和功能上的問題。

設(shè)計還原度一直是團(tuán)隊努力提升的工作，它本質(zhì)上是一個合作的問題，即使再怎么克服，總會存在一些偏差。

• 一是設(shè)計交接環(huán)節(jié)。設(shè)計師陷入了知識的陷阱，覺得前端能力很強(qiáng)，不需要做太多的標(biāo)注。覺得他們可以跟自己一樣對像素敏感，完全可以做到設(shè)計稿的一比一還原；
• 二是設(shè)計驗收環(huán)節(jié)。設(shè)計師工作職責(zé)定位有誤，覺得自己的主要工作是把稿子做好，至于后續(xù)稿子的還原是測試的責(zé)任，跟我們沒多大關(guān)系；

在這個競爭日趨激烈的互聯(lián)網(wǎng)環(huán)境下，用戶對于體驗的要求越來越高，這其中的設(shè)計還原度則是保證產(chǎn)品體驗的關(guān)鍵一環(huán)，確保產(chǎn)品的高品質(zhì)在線。

02 設(shè)計交接環(huán)節(jié)

根據(jù)「特斯勒定律」我們得知“任何系統(tǒng)都有其固有的復(fù)雜性，這個復(fù)雜無法減少，我們唯一能做的是把復(fù)雜進(jìn)行轉(zhuǎn)移”。既然設(shè)計的還原度是由前期交接環(huán)節(jié)以及后期設(shè)計驗收環(huán)節(jié)共同努力才提升的，如果我們設(shè)計在前期交接環(huán)節(jié)多花點時間，多站在前端的角度去思考，這樣在驗收環(huán)節(jié)我們會更加省力。

為了避免與他人因為交接而導(dǎo)致產(chǎn)品理解的斷層，我們有3個注意事項：

2.1 思維同頻（了解套路）

我們與前端同學(xué)的思維同頻特別重要，需要主動了解開發(fā)是根據(jù)哪些規(guī)則還原我們的設(shè)計稿，只有在實現(xiàn)方式上達(dá)成意識的統(tǒng)一，我們才能一起解決問題。

了解開發(fā)思維，首先就需要了解最基礎(chǔ)的「盒子」概念。

「盒子」概念是 CSS 語言的術(shù)語，講的是在頁面進(jìn)行布局時，我們需要將頁面中所有的元素看成一個個的矩形的盒子。CSS 決定了這些盒子的大小、位置以及屬性。每個盒子由四個部分組成：

1. content：內(nèi)容區(qū)域，該區(qū)域可以定義 width 和 height。
2. padding：內(nèi)容區(qū)域和邊框之間的空間量。
3. border：內(nèi)容區(qū)域和內(nèi)容邊距周圍的粗細(xì)和樣式。
4. margin：邊框和元素邊緣的空間量。

當(dāng)我們了解這個概念后就會有意識的在設(shè)計中帶入盒子思維，比如相同模塊保持各個元素間距、尺寸的統(tǒng)一，合理的規(guī)劃好每一個元素的布局。確保前端可以直接復(fù)用之前的樣式，避免在開發(fā)期間因為每一個元素的間距差異而提升精準(zhǔn)還原的難度。

2.2 重視組件（避免挖坑）

在團(tuán)隊人數(shù)較多時，多個前端參與同一項目的研發(fā)，每個前端針對同樣的模塊可能有著自己不同的編寫樣式，最終導(dǎo)致大量的代碼冗余，效率低且還原度無法得到保證。為了保證產(chǎn)品體驗的一致性，我們需要在交接中統(tǒng)一設(shè)計思維，使用組件進(jìn)行約束。

2.2.1 總結(jié)通用組件

通用組件又稱為原子組件，是一種底層組件。比如：提示框、輸入框、開關(guān)、按鈕等。我們最耳熟能詳?shù)耐ㄓ媒M件網(wǎng)站就是 Ant Design 。借助通用組件，我們可以確保設(shè)計稿具備較高的一致性，提升設(shè)計與開發(fā)的協(xié)同效率；

2.2.2 封裝業(yè)務(wù)組件

為了更好的將組件服務(wù)于業(yè)務(wù)需求，解決業(yè)務(wù)問題，實現(xiàn)業(yè)務(wù)目標(biāo)。我們需要將通用組件圍繞真實的業(yè)務(wù)場景進(jìn)一步封裝，以便于后續(xù)快速迭代，比如：標(biāo)題欄、表格高級篩選欄等。借助業(yè)務(wù)組件，設(shè)計師可以直接套用之前的組件樣式，稍作調(diào)整即可落地，省時省力。前端則可以解決跨項目復(fù)用問題，減少重復(fù)代碼和重復(fù)開發(fā)，在敏捷開發(fā)流程中保證代碼質(zhì)量，確保設(shè)計的還原度；

2.3 設(shè)計宣講（同步內(nèi)容）

設(shè)計過程更像是一個集思廣益的過程，這期間大家由一個抽象的需求變?yōu)榫呦蟮姆桨?，背后肯定有著自己的獨特見解，這就需要我們在評審環(huán)節(jié)講述自己的設(shè)計理念，更需要借這次會議與開發(fā)同學(xué)對齊目標(biāo)。

挑開天窗說亮話，在評審會期間有些細(xì)微的地方我們需要著重說明，把設(shè)計中視覺變化較大的地方講清楚，加深他們印象，幫助前端同學(xué)理解，同時前端同學(xué)也需要開誠布公的反饋當(dāng)前實現(xiàn)的技術(shù)問題，避免帶著疑問工作。

宣講會期間的問題以及解決方案需要以會議記錄的形式記錄，并在會議結(jié)束后向項目組全部成員，以郵件的形式同步會議記錄（大家的共識），確保會議內(nèi)容傳達(dá)到位。

03 設(shè)計驗收環(huán)節(jié)

設(shè)計驗收又稱設(shè)計走查、還原度驗證。當(dāng)我們通過郵件或者群收到前端發(fā)送的驗收通知時，就可以開始設(shè)計的驗收工作了。

在設(shè)計驗收環(huán)節(jié)前我們得要求前端和測試同學(xué)先測一遍，確保設(shè)計還原度最大程度的保證，再介入設(shè)計的驗收?，F(xiàn)實中很多前端同學(xué)一開發(fā)完立即要求我們進(jìn)行走查，那時候我們會浪費大量的精力去找那些顯而易見的問題，重復(fù)工作會讓設(shè)計與測試的工作量顯著增大。

3.1 錯誤清單（講清問題）

驗收后我們需要注意問題的整理和存檔，最好使用公開且實時的在線工具進(jìn)行整理，在錯誤清單中標(biāo)明類目、講清問題、問題優(yōu)先級、問題責(zé)任人以及一些特殊場景。

3.1.1 問題描述

為了更清楚的講明問題，需要提供線上具體位置的截圖和設(shè)計稿的截圖（標(biāo)注出差異點），向前端同學(xué)清晰的講清楚當(dāng)前存在的問題以及具體可以怎么調(diào)整。比如：真實尺寸多大，字號多少等。

3.1.2 問題責(zé)任人

講清責(zé)權(quán)范圍，這樣便于開發(fā)可以快速定位自己負(fù)責(zé)的業(yè)務(wù)模塊，也便于后續(xù)修改后的復(fù)查。

3.1.3 問題優(yōu)先級

找出問題后一定要幫助前端同學(xué)標(biāo)注出優(yōu)先級，要不然他們會根據(jù)難度自己選擇，大概率選擇容易修改的問題調(diào)整，重要的問題反而擱置。在劃分優(yōu)先級時可根據(jù)影響程度、出現(xiàn)頻率來進(jìn)行評估，可分為三級。

• 嚴(yán)重的可用性問題：嚴(yán)重的交互問題，每次操作該問題必定出現(xiàn)，會中斷用戶操作流程，必須立即解決；
• 重要的可用性問題：出現(xiàn)頻率比較高，導(dǎo)致用戶產(chǎn)生困惑，需要花時間理解，對用戶體驗有一定影響；
• 一般的可用性問題：不影響用戶流程體驗，存在頁面樣式方面（字體、色值、間距、對齊方式等）的問題。

3.1.4 特殊場景

完成主要流程走查后，我們需要注意特殊場景是否存在問題。例如數(shù)據(jù)異常、內(nèi)容缺失、空狀態(tài)等。同時要考慮不同尺寸下產(chǎn)品的自適應(yīng)問題，是否存在錯位、文案無法填充等情況。

這里值得注意的是，錯誤清單需要填寫兩次，第一次是前端開發(fā)完的首次走查，第二次是前端根據(jù)第一次錯誤清單修復(fù)后的再次復(fù)查，看看是否有新的問題。當(dāng)問題解決后滿足上線的需求，則需要我們及時關(guān)閉錯誤清單中問題修復(fù)狀態(tài)，這意味著當(dāng)前問題已經(jīng)解決。

3.2 當(dāng)面聯(lián)調(diào)（見面三分親）

走查不是為了發(fā)現(xiàn)問題，而是為了最終解決問題。當(dāng)我們提交錯誤清單后，我們也需要時不時的與問題負(fù)責(zé)人當(dāng)面溝通，一些跟進(jìn)問題的修復(fù)進(jìn)度。

面對面對接的效率是最高的，此時的前端面對一大堆錯誤清單可能滿腹怨言，雖然會按照問題優(yōu)先級逐一解決，但是當(dāng)快到上線前時間較緊時也會存留部分問題等到下次迭代時再解決。這時候如果我們多一些當(dāng)面溝通的技巧，也會讓對方心情愉悅些，說不定也會稍微提升一些效率完成殘留問題的修復(fù)。

04 寫在最后

設(shè)計還原度的提升是大家共同努力的結(jié)果，如果我們在前期盡可能的換位思考、在規(guī)范下輸出設(shè)計、建立完善的驗收制度，才可以確保較高的設(shè)計還原度。

以上只是我針對提升設(shè)計還原度的個人感悟，希望該文章對你有所啟發(fā)，也歡迎感興趣的同學(xué)一起探討~