在 B 端交互設計中會遇到，在最后走查時發現，最終上線功能的交互與原有設計差距較大，甚至被研發重構。那么如何避免交互設計失真，保證最終的交付質量，讓用戶可以得到體驗更優更順暢的產品功能呢？

為什么需要設計質量保證

在設計中，最常見的質量保證方式就是在產品驗收環節進行「設計走查」。不過因為是上線前的最后驗收環節之一，經常會出現因臨近上線時間，且交互和 UI 類的問題在修改優先級中一般都是較低的，最后只能修改部分設計上的「bug」，其他只能舍棄或放入永遠不會開工的下次迭代再改。設計師在各種來回扯皮之間筋疲力盡，看不到設計價值在需求中的體現，各種“這里設計不好”的鍋一不小心也接了一堆。更嚴重的問題在于，用戶得不到更優秀的體驗，輕則耗費更多時間，重則放棄使用功能。不管哪種結果，對于產品整體滿意度都會有不同程度的影響。

由此可見，設計質量保證僅靠最后臨門一腳的設計走查遠遠是不夠的。在需求全周期中各個環節都可以加入對設計質量的把控（Design QA）。Design QA 的概念來源于研發流程中測試環節。質量保證縮寫為 QA（Quality Assurance），是產品交付流程中非常重要的一環，一般就是大家了解的測試工程師的崗位職責內容。在這個環節中，測試人員需要對產品功能進行仔細認證，確認是否滿足了產品需求并且可以正常使用。但與測試不同，設計 QA 須加入到產品需求全周期的各個環節中，最終形成與產品設計并行的一個流程，才能有效保證質量。

設計 QA 實施步驟和方案

步驟 1: 需求分級，確定是否需要設計 QA

要保證設計質量，在 B 端設計中不是易事。我們經常會聽到：

“這個功能能用就行”：公司/團隊不理解或不夠認同設計價值是什么，不明白為什么體驗會在每一處未還原的設計稿上慢慢丟失

“這還原的不挺好，和你設計稿我看一樣啊”：非專業的同事無法分辨設計稿與研發實現稿的細微差異

“沒時間改了，下次再說吧”：設計質量保證低于功能質量保證，或者團隊必須在有限的時間交付需求

在接到需求后可以根據以往經驗或與產品經理的溝通，確定本次需求設計等級：

A：公司級和部門級重點、設計周期長內容多、設計可沉淀輸出的內容多的需求

B：正常迭代、量級一般的需求

C：時間緊迫倒排期、無前端研發資源、少量調整、評估不需要設計的需求

在確認等級后，作為設計師可以有一定的心理預期。對于 A 類可能各個環節都需要詳細的進行 QA，而對于 C 類有可能連設計走查都沒有預留時間，只能靠后續線上的直接驗證了。后面的幾個步驟可針對不同的等級選取全部或部分進行實施。

步驟 2:交互設計中，考慮極限下的正確展示

B 端交互設計中，很重要卻經常制作不到位的就是極限情況?？雌饋矶际歉鞣N表格，簡單的給定一個寬度即可，但在上線后經常發現，填充了真實商家數據的表格，總有意想不到的錯位折行和重要信息截斷，用戶的可閱讀性降低。

左：重要信息被截斷；右：折行錯位

步驟 3: 設計評審與交付，交互說明與 UI 標注一體化

在完成制作后一定要進行評審，對功能完整性、頁面流程、頁面文案、組件特殊交互邏輯要求、交互可實現性與開發成本進行評估。項目相關利益人都需要參加，尤其是測試同事需要參與評審，保證后續測試用例編寫質量。在交互與 UI 全部評審完成并通過后，交付給研發的設計稿最好可以做到交互說明文檔與 UI 標注一體化，方便研發同事查看。避免在交互說明與 UI 標注中來回切換，導致交互或 UI 細節遺漏。這里推薦一個 sketch 插件：NoteBook Pro （需要付費，lite 版大約￥76），方便在 sketch 中添加交互說明標注，在上傳到可以在線查看 UI 標注的平臺，比如 Zeplin/Relay 等。

交互說明+UI 標注在一個頁面上同時呈現

步驟 4: 參加測試用例評審，確保測試用例涵蓋所有交互細節

一般來說，交互稿與 UI 稿交付給研發同學后，設計師就要開始忙下一個需求了。直到通知設計走查前，設計師暫時不會再隨時跟進需求進展，而是交接到產品或項目經理手中。而在這個從設計稿到研發實現的過程中，設計師也需要在關鍵節點參與其中，確保設計質量。測試用例是其中一個設計師可以參與的環節。其實有時候很多交互文檔中的內容會被用作測試用例，所以需要再次和研發與測試同學對齊所有交互內容，保證交互設計內容不會在此階段被降級甚至直接去掉。

步驟 5：設計走查，輸出并記錄結果

此環節很重要的一點就是走查文檔或記錄。未完成修改的內容，建議研發給出一個解釋，并以文檔的方式記錄下來抄送給相關利益人，標明可能帶來的風險。同時嘗試與產品或項目經理溝通，推動迭代優化的具體時間，避免「下次一定」的無效承諾。

總結

設計 QA 是貫穿整個產品需求全周期的設計流程，在以往的點狀設計走查之外，需要與團隊上下游通力合作溝通，才能確保優秀的產品呈現在用戶面前。

參考文獻：

• https://blog.prototypr.io/the-qa-process-in-ux-design-7cd3ffa771ad
• https://www.nngroup.com/articles/quality-assurance-ux/
• https://uxdesign.cc/the-importance-of-design-qa-in-digital-product-design-c3f3d128270
• https://wearebrain.com/blog/customer-ux-ui/ux-designers-and-qa-engineers-collaboration/
• https://owl.tools/notebook-sketch-plugin

歡迎關注「JellyDesign」的小程序：