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

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

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

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

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

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

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

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

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

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

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

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

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

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

為了避免與他人因?yàn)榻唤佣鴮?dǎo)致產(chǎn)品理解的斷層，我們有3個(gè)注意事項(xiàng)：

2.1 思維同頻（了解套路）

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

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

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

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

2.2 重視組件（避免挖坑）

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

2.2.1 總結(jié)通用組件

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

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

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

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

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

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

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

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

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

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

3.1 錯(cuò)誤清單（講清問題）

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

3.1.1 問題描述

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

3.1.2 問題責(zé)任人

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

3.1.3 問題優(yōu)先級(jí)

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

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

3.1.4 特殊場(chǎng)景

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

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

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

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

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

04 寫在最后

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

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