交付流程 | B端+AR，設計還原度怎么做？

▲點擊"三分設"關(guān)注，回復"社群"加入我們

歡迎來到專業(yè)設計師學習交流社區(qū)

三分設｜連接知識，幫助全球 1 億設計師成長

轉(zhuǎn)自：林間有影落

編輯：張夢如

共 5480 字 17 圖  預計閱讀 14 分鐘

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

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

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

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

“我這樣實現(xiàn)也行吧，我覺得比你設計還好點。”

“這里還不對嗎？我已經(jīng)改了好幾遍了……“

“項目時間太緊了，我們先實現(xiàn)功能吧。”

“不就幾個像素嗎？差不多行了。”

“我覺得是一樣的，你行你上？”

這些其實并不是個例。

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

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

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

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

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

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

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

• 交互內(nèi)容
  交互內(nèi)容緊扣功能，但和測試不同，主要是以用戶的使用流程來檢查相應功能下的交互邏輯是否完整實現(xiàn)，反饋和提示是否有遺漏，使用時的合理性和可用性是否與設計初衷一致。
   AR 中還應多關(guān)注各種交互轉(zhuǎn)換中的相對參照分類是否正確。（參考《 AUI 中的四種分類模式》）
• 視覺內(nèi)容
  前端頁面的靜態(tài)效果是否和設計稿一致，包括色彩、布局、排版等細節(jié)，這塊內(nèi)容一直是研發(fā)和設計難以達成一致的重災區(qū)。
  在 AR 應用中，還要包括三維內(nèi)容的大小、材質(zhì)等細節(jié)。
• 整體體驗
  AR 設計是虛實結(jié)合的設計，我們實際設計時雖然只能著眼于虛擬元素，但用戶所體驗到的是結(jié)合真實環(huán)境的虛實結(jié)合界面，所以特定環(huán)境下的整體體驗檢查也是必要的。
  我做的項目由于一般是一整套系統(tǒng)，通常存在多個終端數(shù)據(jù)聯(lián)動，比如web平臺和AR應用的聯(lián)動，那它們之間的交互是否符合設計需求，是否有遺漏和錯誤，也屬于整體體驗的檢查內(nèi)容。

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

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

原因有三個：

第一，一般功能性的 bug 會更為緊急，因為它大多會導致產(chǎn)品在該功能上存在完全不可用的狀態(tài)，這個時候就算設計師介入去做還原度檢查，也很難檢查到設計本身的問題。

第二，在改動功能型 bug 的時候，會使某些已經(jīng)修改的還原度問題復現(xiàn)，加重了反復查驗的工作量。

第三，一些很明顯的交互和視覺問題，其實測試團隊是能夠幫忙測出來的。

03 檢查到什么程度？

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

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

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

04 常見問題？

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

• 設計輸出有缺失
  輸出的缺失主要體現(xiàn)在兩個方面，是一個是內(nèi)容本身的缺失，一個是附加說明的缺失。
  內(nèi)容本身的缺失，指設計輸出里缺少某些細節(jié)交互的說明，界面不同狀態(tài)的展示，不同狀態(tài)的按鈕或圖標切圖，動效說明等。這個可以靠設計師的細心和對設計的自查來避免。
  附加說明的缺失，主要是標注的問題。隨著行業(yè)的發(fā)展，現(xiàn)在已經(jīng)有很多自動標注和切圖工具了，但正因為如此，反而容易因為懶，缺失很多需要手動補充的信息標注。
  
  
• 設計處理不規(guī)范
  設計處理不規(guī)范，主要是指自由發(fā)揮，完全不考慮研發(fā)的實現(xiàn)難度和整個項目的目標。有些設計稿乍一看質(zhì)量上乘，如果作為停留在紙面上的作品甚至相當優(yōu)秀，但是UX設計畢竟不是純藝術(shù)，而是用來解決問題的方案，需要掌握平衡。
  
  
• 研發(fā)沒有理解設計的邏輯
  由于每個人的角度不一樣，即使輸出的設計文檔在設計師眼里看起來再詳盡，在研發(fā)人員的理解下也可能完全不一樣。
  
  
• 研發(fā)和設計師優(yōu)先級認知不一致
  如果說沒有理解帶來的現(xiàn)象是研發(fā)工程師認真的做了，但沒有做對。那這一點帶來的現(xiàn)象就是他明明可以做好，卻總是不好好做。也就是我們常常吐槽的研發(fā)人員“不配合”。
  這里的不配合，其實就是兩方在優(yōu)先級認知上不一致，你提出的還原度問題，他覺得沒什么關(guān)系。既然無關(guān)重要，何必浪費精力？畢竟，哪個研發(fā)工程師身上不背幾個bug。
  
  
• 還原度檢查不完整
  該檢查的內(nèi)容沒有檢查到。原因可能有自己的，也可能有外部的。比如在AR設計中，我們經(jīng)常會遇到很難完美復現(xiàn)AR應用真實環(huán)境的問題。又比如在某個To B項目中，由于web平臺的聯(lián)動終端是機器人，我很難在某些與機器人強聯(lián)動的界面上進行整體的體驗檢查。

05 怎么做得更好呢？

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

1 重視設計規(guī)范

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

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

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

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

 2 了解開發(fā)思維

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

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

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

圖片來自網(wǎng)絡

然后是 AR 設計中常用的 U3D 工具。

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

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

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

1 .Match Width or Height

2. Expand

3. Shrink

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

 

3 宣講設計邏輯

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

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

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

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

4 完善設計輸出

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

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

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

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

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

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

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

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

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

• 比如：絕對位置和相對位置的注明。
  
  
  上面這張圖，A類標注就可以用自動標注精確到像素完成，而B的標注因為不同屏幕大小不同，其實只要保證兩個B相等就可以，那這里就需要手動注明了。
  
  
  在 AR 應用中，由于涉及到三維空間，相對參考物尤為重要，首先要保證研發(fā)知曉當前界面里每個元素的參照對象（關(guān)于 AR 界面按參照物的分類，可以參考我的這篇文章《AUI中的四種分類模式》），然后，再按照百分比來進行標注。
  
  
  

當然，也可以更為精確的使用當前 Z 軸下的物理尺寸來進行標注，但需要一些轉(zhuǎn)換會比較難以把握。

標注的這個部分，是和了解開發(fā)思維相輔相成的，當你了解開發(fā)思維后，就能夠標注出更符合研發(fā)人員要求的說明。

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

值得注意的是，在 AR 應用的設計中，視覺不僅僅指二維視覺（ GUI ）的說明和相關(guān)資源，還應該包括三維視覺內(nèi)容的必要說明和相關(guān)資源。為了更好的模擬實際研發(fā)后的效果，盡量還原用戶可見界面（關(guān)于用戶可見界面和設計界面的區(qū)別，可以參考我的這篇文章《AUI的構(gòu)成元素：虛和實》）推薦在視覺設計輸出時添加環(huán)境照片。

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

5 了解檢查目標

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

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

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

6 選用合適工具

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

Css Peeper：https://csspeeper.com/

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

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

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

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

7 記錄總結(jié)情況

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

還原度的本質(zhì)是一個合作問題，只有設計質(zhì)量硬，配套產(chǎn)品全，在與研發(fā)合作的過程中活用我們的用戶思維（可以參考我之前的文章《將體驗設計思維用到日常的工作中》），才能讓我們的設計作品得到更高的還原度。

—  The end  —

?? 社區(qū)資料??

每日開眼，大廠內(nèi)部資料分享

期待與更多優(yōu)秀用戶體驗設計師一起成長

?? 我們一起聊設計 ???♂?

高質(zhì)量，學設計行交流微信群

期待與更多優(yōu)秀用戶體驗設計師一起成長

PS：歡迎大家關(guān)注三分設，每天早上9點，準時充電。分享優(yōu)質(zhì)設計、創(chuàng)意靈感、新知新識，定期大咖老師直播分享，零距離連麥，答疑解惑。 添加小小蟲微信號【 Lil_Bug 】，備注【 三分設 】加入！（只面向星標了公眾號三分設的粉絲）