作為設(shè)計(jì)師，一個老生常談的話題就是還原度檢查。

還原度檢查：也叫還原度驗(yàn)證、設(shè)計(jì)走查、設(shè)計(jì)驗(yàn)證。是保證研發(fā)實(shí)際實(shí)現(xiàn)的效果是否和設(shè)計(jì)稿一致的過程。

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

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

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

……

這些其實(shí)并不是個例。

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

設(shè)計(jì)的項(xiàng)目還原度如何，是每一位設(shè)計(jì)師成長的必經(jīng)之路，也是設(shè)計(jì)師能力的一種重要體現(xiàn)。說到這里，你可能有點(diǎn)疑問，明明是研發(fā)實(shí)現(xiàn)的問題，怎么成了能衡量設(shè)計(jì)師能力的一種體現(xiàn)呢？

誠然，在同等條件下，優(yōu)秀的研發(fā)工程師能夠憑借自身實(shí)力和豐富經(jīng)驗(yàn)實(shí)現(xiàn)更高程度的設(shè)計(jì)稿還原，同樣的，優(yōu)秀的設(shè)計(jì)師也可以憑借著自身實(shí)力和豐富經(jīng)驗(yàn)，保證自己的設(shè)計(jì)稿具有更高的還原度，這是一個相互影響的過程。

所以，本質(zhì)上，設(shè)計(jì)還原度，還是一個合作問題。

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

如何做好設(shè)計(jì)還原？從這5個方面入手！

···

要檢查的內(nèi)容都有哪些呢？

我認(rèn)為，整個設(shè)計(jì)還原度檢查可以分為三個部分：

1. 交互內(nèi)容

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

AR 中還應(yīng)多關(guān)注各種交互轉(zhuǎn)換中的相對參照分類是否正確。

2. 視覺內(nèi)容

前端頁面的靜態(tài)效果是否和設(shè)計(jì)稿一致，包括色彩、布局、排版等細(xì)節(jié)，這塊內(nèi)容一直是研發(fā)和設(shè)計(jì)難以達(dá)成一致的重災(zāi)區(qū)。

在 AR 應(yīng)用中，還要包括三維內(nèi)容的大小、材質(zhì)等細(xì)節(jié)。

3. 整體體驗(yàn)

AR 設(shè)計(jì)是虛實(shí)結(jié)合的設(shè)計(jì)，我們實(shí)際設(shè)計(jì)時雖然只能著眼于虛擬元素，但用戶所體驗(yàn)到的是結(jié)合真實(shí)環(huán)境的虛實(shí)結(jié)合界面，所以特定環(huán)境下的整體體驗(yàn)檢查也是必要的。

我做的項(xiàng)目由于一般是一整套系統(tǒng)，通常存在多個終端數(shù)據(jù)聯(lián)動，比如 web 平臺和 AR 應(yīng)用的聯(lián)動，那它們之間的交互是否符合設(shè)計(jì)需求，是否有遺漏和錯誤，也屬于整體體驗(yàn)的檢查內(nèi)容。

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

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

  • 第一，一般功能性的 bug 會更為緊急，因?yàn)樗蠖鄷?dǎo)致產(chǎn)品在該功能上存在完全不可用的狀態(tài)，這個時候就算設(shè)計(jì)師介入去做還原度檢查，也很難檢查到設(shè)計(jì)本身的問題。
  • 第二，在改動功能型 bug 的時候，會使某些已經(jīng)修改的還原度問題復(fù)現(xiàn)，加重了反復(fù)查驗(yàn)的工作量。
  • 第三，一些很明顯的交互和視覺問題，其實(shí)測試團(tuán)隊(duì)是能夠幫忙測出來的。

檢查到什么程度？

這個其實(shí)沒有非常硬性的標(biāo)準(zhǔn)，不同公司、不同項(xiàng)目、不同設(shè)計(jì)師都可能不一樣。有的認(rèn)為 95%以上還原度才能達(dá)到標(biāo)準(zhǔn)，有的認(rèn)為 90%甚至 80%就算達(dá)到標(biāo)準(zhǔn)。

一般來說，還原度標(biāo)準(zhǔn)：C 端＞B 端＞后臺。

而 AR 應(yīng)用的還原度即使在 B 端，也應(yīng)該大于通常的 B 端應(yīng)用，因?yàn)樵诋?dāng)前技術(shù)水平下，許多 AR 應(yīng)用首要滿足的是展示目的，交互和視覺的最終效果是非常關(guān)鍵的。

常見問題？

在設(shè)計(jì)還原度檢查中，我們常常遇到這樣或那樣的問題，歸納起來，有下面幾點(diǎn)。

1. 設(shè)計(jì)輸出有缺失

輸出的缺失主要體現(xiàn)在兩個方面，是一個是內(nèi)容本身的缺失，一個是附加說明的缺失。

內(nèi)容本身的缺失，指設(shè)計(jì)輸出里缺少某些細(xì)節(jié)交互的說明，界面不同狀態(tài)的展示，不同狀態(tài)的按鈕或圖標(biāo)切圖，動效說明等。這個可以靠設(shè)計(jì)師的細(xì)心和對設(shè)計(jì)的自查來避免。

附加說明的缺失，主要是標(biāo)注的問題。隨著行業(yè)的發(fā)展，現(xiàn)在已經(jīng)有很多自動標(biāo)注和切圖工具了，但正因?yàn)槿绱?，反而容易因?yàn)閼校笔Ш芏嘈枰謩友a(bǔ)充的信息標(biāo)注。

2. 設(shè)計(jì)處理不規(guī)范

設(shè)計(jì)處理不規(guī)范，主要是指自由發(fā)揮，完全不考慮研發(fā)的實(shí)現(xiàn)難度和整個項(xiàng)目的目標(biāo)。有些設(shè)計(jì)稿乍一看質(zhì)量上乘，如果作為停留在紙面上的作品甚至相當(dāng)優(yōu)秀，但是 UX 設(shè)計(jì)畢竟不是純藝術(shù)，而是用來解決問題的方案，需要掌握平衡。

3. 研發(fā)沒有理解設(shè)計(jì)的邏輯

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

4. 研發(fā)和設(shè)計(jì)師優(yōu)先級認(rèn)知不一致

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

5. 還原度檢查不完整

該檢查的內(nèi)容沒有檢查到。原因可能有自己的，也可能有外部的。比如在 AR 設(shè)計(jì)中，我們經(jīng)常會遇到很難完美復(fù)現(xiàn) AR 應(yīng)用真實(shí)環(huán)境的問題。又比如在某個 To B 項(xiàng)目中，由于 web 平臺的聯(lián)動終端是機(jī)器人，我很難在某些與機(jī)器人強(qiáng)聯(lián)動的界面上進(jìn)行整體的體驗(yàn)檢查。

怎么做得更好呢？

為了有效保證還原度，我們可以做的事情有很多，我總結(jié)了 7 點(diǎn)：

如何做好設(shè)計(jì)還原？從這5個方面入手！

1. 重視設(shè)計(jì)規(guī)范

第一、有規(guī)范。第二、符合規(guī)范。

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

符合規(guī)范，指符合研發(fā)語言的基本規(guī)范定義，比如可行情況下盡量使用該語言下的常用標(biāo)準(zhǔn)框架，定義最小單元網(wǎng)格（一般 4px，6px，8px 等），切圖或間距等盡量以此為倍數(shù)；不要出現(xiàn)奇數(shù)等。這些都可以提高研發(fā)的效率。

設(shè)計(jì)規(guī)范的好壞，直接影響到后面的設(shè)計(jì)宣講和設(shè)計(jì)輸出的好壞。

2. 了解開發(fā)思維

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

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

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

如何做好設(shè)計(jì)還原？從這5個方面入手！

圖片來自網(wǎng)絡(luò)

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

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

根據(jù)屏幕大小進(jìn)行縮放，是研發(fā)最常用的一種，會根據(jù)設(shè)備真實(shí)分辨率與設(shè)計(jì)分辨率來對 Canvas 進(jìn)行縮放。有三種模式：

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

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

3. 宣講設(shè)計(jì)邏輯。

不管是和設(shè)計(jì)評審一起還是私下對接研發(fā)，都要對自己的設(shè)計(jì)邏輯和輸出內(nèi)容做講解，講解的內(nèi)容包括：通用的設(shè)計(jì)規(guī)范、資源圖的命名規(guī)則、特別事項(xiàng)的注意等等。

講解的目的就是讓他理解你的設(shè)計(jì)邏輯。

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

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

4. 完善設(shè)計(jì)輸出

完整的設(shè)計(jì)輸出，應(yīng)該包含承接產(chǎn)品需求文檔的交互說明、視覺說明（含標(biāo)注）和相關(guān)資源。

交互說明，應(yīng)該寫明可點(diǎn)擊部分跳轉(zhuǎn)的界面，不同狀態(tài)下的中間過程，特殊情況下的界面處理等等。

如何做好設(shè)計(jì)還原？從這5個方面入手！

視覺說明，應(yīng)該包含對規(guī)范的說明和幫助研發(fā)實(shí)現(xiàn)界面的標(biāo)注。

（1）規(guī)范的說明，需要設(shè)計(jì)師梳理通用的內(nèi)容，讓工程師對項(xiàng)目的前端界面樣式有個整體了解，快速查找和定位到具體頁面的基礎(chǔ)樣式（如：標(biāo)準(zhǔn)色、標(biāo)準(zhǔn)字、按鈕等），也可以讓研發(fā)工程師清楚的知道哪些內(nèi)容我只要兢兢業(yè)業(yè)的調(diào)一遍，就可以復(fù)制到其他地方了。

如何做好設(shè)計(jì)還原？從這5個方面入手！

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

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

（2）標(biāo)注部分，除了交給自動標(biāo)注軟件標(biāo)注的部分，還應(yīng)該將無法自動標(biāo)注出來的內(nèi)容通過手動標(biāo)注補(bǔ)齊，這些內(nèi)容包括但不限于：

  • 動態(tài)內(nèi)容的標(biāo)注

如何做好設(shè)計(jì)還原？從這5個方面入手！

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

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

如何做好設(shè)計(jì)還原？從這5個方面入手！

上面這張圖，A 類標(biāo)注就可以用自動標(biāo)注精確到像素完成，而 B 的標(biāo)注因?yàn)椴煌聊淮笮〔煌鋵?shí)只要保證兩個 B 相等就可以，那這里就需要手動注明了。

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

如何做好設(shè)計(jì)還原？從這5個方面入手！

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

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

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

如何做好設(shè)計(jì)還原？從這5個方面入手！

設(shè)計(jì)輸出是設(shè)計(jì)體現(xiàn)的書面形式，是整個設(shè)計(jì)交付非常重要的一環(huán)。好的設(shè)計(jì)輸出讓你交付研發(fā)時可以放心大膽的說一句：“親～你還有不懂的可以看文檔哦，別有事沒事都來煩我如果有問題可以再找我。”

5. 了解檢查目標(biāo)

前面我們說過，還原度驗(yàn)證的標(biāo)準(zhǔn)一般 C 端大于 B 端大于內(nèi)部后臺，AR 應(yīng)用由于其特殊性，即使交付 B 端的 AR 應(yīng)用也一般要高于普通 B 端的還原驗(yàn)收標(biāo)準(zhǔn)，在此基礎(chǔ)上，可以根據(jù)項(xiàng)目公司業(yè)務(wù)和項(xiàng)目實(shí)際情況來確定一個基準(zhǔn)。

分清輕重緩急，避免體驗(yàn)問題被擱置，或者好改的體驗(yàn)問題被改了，而比較重要的體驗(yàn)問題，反而因?yàn)椴缓酶姆炊z留下來。

如何做好設(shè)計(jì)還原？從這5個方面入手！

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

6. 選用合適工具

現(xiàn)在市面上已經(jīng)有一些工具幫助設(shè)計(jì)師進(jìn)行還原度檢查，這里簡單的舉例 2 個。

Css Peeper： https://csspeeper.com/

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

如何做好設(shè)計(jì)還原？從這5個方面入手！

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

字節(jié)出品的一款走查插件。

通過在網(wǎng)頁上放置設(shè)計(jì)稿圖片檢查設(shè)計(jì)稿與開發(fā)結(jié)果是否完全重疊來判斷開發(fā)的還原精度，精確到像素實(shí)現(xiàn)高質(zhì)量的項(xiàng)目還原效果。

如何做好設(shè)計(jì)還原？從這5個方面入手！

7. 記錄總結(jié)情況

在項(xiàng)目發(fā)布之前，很多情況下體驗(yàn)問題可能得不到全部解決，這個時候，總結(jié)現(xiàn)有的設(shè)計(jì)還原程度，明晰重點(diǎn)問題及可能產(chǎn)生的體驗(yàn)風(fēng)險(xiǎn)，能夠幫助整個項(xiàng)目快速了解現(xiàn)狀，決策任務(wù)優(yōu)先級。對于其他遺留的問題，也能夠有機(jī)會進(jìn)入下一輪迭代中。

如何做好設(shè)計(jì)還原？從這5個方面入手！

· · ·

還原度的本質(zhì)是一個合作問題，只有設(shè)計(jì)質(zhì)量硬，配套產(chǎn)品全，在與研發(fā)合作的過程中活用我們的用戶思維，才能讓我們的設(shè)計(jì)作品得到更高的還原度。

參考文章：

歡迎關(guān)注作者微信公眾號：「林間有影落」

如何做好設(shè)計(jì)還原？從這5個方面入手！

林影落專欄作者

文章 29 人氣 51.1w

聯(lián)想集團(tuán) UX設(shè)計(jì)師
收藏 157
點(diǎn)贊 21

復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場，未經(jīng)允許不得轉(zhuǎn)載。

繼續(xù)閱讀本文相關(guān)話題

文章目錄