為什么需要設(shè)計(jì)質(zhì)量保證

在設(shè)計(jì)中，最常見(jiàn)的質(zhì)量保證方式就是在產(chǎn)品驗(yàn)收環(huán)節(jié)進(jìn)行「設(shè)計(jì)走查」。不過(guò)因?yàn)槭巧暇€(xiàn)前的最后驗(yàn)收環(huán)節(jié)之一，經(jīng)常會(huì)出現(xiàn)因臨近上線(xiàn)時(shí)間，且交互和UI類(lèi)的問(wèn)題在修改優(yōu)先級(jí)中一般都是較低的，最后只能修改部分設(shè)計(jì)上的「bug」，其他只能舍棄或放入永遠(yuǎn)不會(huì)開(kāi)工的下次迭代再改。設(shè)計(jì)師在各種來(lái)回扯皮之間筋疲力盡，看不到設(shè)計(jì)價(jià)值在需求中的體現(xiàn)，各種“這里設(shè)計(jì)不好”的鍋一不小心也接了一堆。更嚴(yán)重的問(wèn)題在于，用戶(hù)得不到更優(yōu)秀的體驗(yàn)，輕則耗費(fèi)更多時(shí)間，重則放棄使用功能。不管哪種結(jié)果，對(duì)于產(chǎn)品整體滿(mǎn)意度都會(huì)有不同程度的影響。

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

設(shè)計(jì)QA實(shí)施步驟和方案

步驟1: 需求分級(jí)，確定是否需要設(shè)計(jì)QA

要保證設(shè)計(jì)質(zhì)量，在B端設(shè)計(jì)中不是易事。我們經(jīng)常會(huì)聽(tīng)到：

· “這個(gè)功能能用就行”：公司/團(tuán)隊(duì)不理解或不夠認(rèn)同設(shè)計(jì)價(jià)值是什么，不明白為什么體驗(yàn)會(huì)在每一處未還原的設(shè)計(jì)稿上慢慢丟失

· “這還原的不挺好，和你設(shè)計(jì)稿我看一樣啊”：非專(zhuān)業(yè)的同事無(wú)法分辨設(shè)計(jì)稿與研發(fā)實(shí)現(xiàn)稿的細(xì)微差異

· “沒(méi)時(shí)間改了，下次再說(shuō)吧”：設(shè)計(jì)質(zhì)量保證低于功能質(zhì)量保證，或者團(tuán)隊(duì)必須在有限的時(shí)間交付需求

在接到需求后可以根據(jù)以往經(jīng)驗(yàn)或與產(chǎn)品經(jīng)理的溝通，確定本次需求設(shè)計(jì)等級(jí)：

• A：公司級(jí)和部門(mén)級(jí)重點(diǎn)、設(shè)計(jì)周期長(zhǎng)內(nèi)容多、設(shè)計(jì)可沉淀輸出的內(nèi)容多的需求
• B：正常迭代、量級(jí)一般的需求
• C：時(shí)間緊迫倒逼排期、無(wú)前端研發(fā)資源、少量調(diào)整、評(píng)估不需要設(shè)計(jì)的需求

在確認(rèn)等級(jí)后，作為設(shè)計(jì)師可以有一定的心理預(yù)期。對(duì)于A類(lèi)可能各個(gè)環(huán)節(jié)都需要詳細(xì)的進(jìn)行QA，而對(duì)于C類(lèi)有可能連設(shè)計(jì)走查都沒(méi)有預(yù)留時(shí)間，只能靠后續(xù)線(xiàn)上的直接驗(yàn)證了。后面的幾個(gè)步驟可針對(duì)不同的等級(jí)選取全部或部分進(jìn)行實(shí)施。

步驟2:交互設(shè)計(jì)中，考慮極限下的正確展示

B端交互設(shè)計(jì)中，很重要卻經(jīng)常制作不到位的就是極限情況?？雌饋?lái)都是各種表格，簡(jiǎn)單的給定一個(gè)寬度即可，但在上線(xiàn)后經(jīng)常發(fā)現(xiàn)，填充了真實(shí)商家數(shù)據(jù)的表格，總有意想不到的錯(cuò)位折行和重要信息截?cái)?，用?hù)的可閱讀性降低。

                                             左：重要信息被截?cái)?；右：折行錯(cuò)位

步驟3: 設(shè)計(jì)評(píng)審與交付，交互說(shuō)明與UI標(biāo)注一體化

在完成制作后一定要進(jìn)行評(píng)審，對(duì)功能完整性、頁(yè)面流程、頁(yè)面文案、組件特殊交互邏輯要求、交互可實(shí)現(xiàn)性與開(kāi)發(fā)成本進(jìn)行評(píng)估。項(xiàng)目相關(guān)利益人都需要參加，尤其是測(cè)試同事需要參與評(píng)審，保證后續(xù)測(cè)試用例編寫(xiě)質(zhì)量。在交互與UI全部評(píng)審?fù)瓿刹⑼ㄟ^(guò)后，交付給研發(fā)的設(shè)計(jì)稿最好可以做到交互說(shuō)明文檔與UI標(biāo)注一體化，方便研發(fā)同事查看。避免在交互說(shuō)明與UI標(biāo)注中來(lái)回切換，導(dǎo)致交互或UI細(xì)節(jié)遺漏。這里推薦一個(gè)sketch插件：NoteBook Pro （需要付費(fèi)，lite版大約￥76），方便在sketch中添加交互說(shuō)明標(biāo)注，在上傳到可以在線(xiàn)查看UI標(biāo)注的平臺(tái)，比如Zeplin/Relay等。

交互說(shuō)明+UI標(biāo)注在一個(gè)頁(yè)面上同時(shí)呈現(xiàn)

步驟4: 參加測(cè)試用例評(píng)審，確保測(cè)試用例涵蓋所有交互細(xì)節(jié)

一般來(lái)說(shuō)，交互稿與UI稿交付給研發(fā)同學(xué)后，設(shè)計(jì)師就要開(kāi)始忙下一個(gè)需求了。直到通知設(shè)計(jì)走查前，設(shè)計(jì)師暫時(shí)不會(huì)再隨時(shí)跟進(jìn)需求進(jìn)展，而是交接到產(chǎn)品或項(xiàng)目經(jīng)理手中。而在這個(gè)從設(shè)計(jì)稿到研發(fā)實(shí)現(xiàn)的過(guò)程中，設(shè)計(jì)師也需要在關(guān)鍵節(jié)點(diǎn)參與其中，確保設(shè)計(jì)質(zhì)量。測(cè)試用例是其中一個(gè)設(shè)計(jì)師可以參與的環(huán)節(jié)。其實(shí)有時(shí)候很多交互文檔中的內(nèi)容會(huì)被用作測(cè)試用例，所以需要再次和研發(fā)與測(cè)試同學(xué)對(duì)齊所有交互內(nèi)容，保證交互設(shè)計(jì)內(nèi)容不會(huì)在此階段被降級(jí)甚至直接去掉。

步驟5:設(shè)計(jì)走查，輸出并記錄結(jié)果

此環(huán)節(jié)很重要的一點(diǎn)就是走查文檔或記錄。未完成修改的內(nèi)容，建議研發(fā)給出一個(gè)解釋?zhuān)⒁晕臋n的方式記錄下來(lái)抄送給相關(guān)利益人，標(biāo)明可能帶來(lái)的風(fēng)險(xiǎn)。同時(shí)嘗試與產(chǎn)品或項(xiàng)目經(jīng)理溝通，推動(dòng)迭代優(yōu)化的具體時(shí)間，避免「下次一定」的無(wú)效承諾。

總結(jié)

設(shè)計(jì)QA是貫穿整個(gè)產(chǎn)品需求全周期的設(shè)計(jì)流程，在以往的點(diǎn)狀設(shè)計(jì)走查之外，需要與團(tuán)隊(duì)上下游通力合作溝通，才能確保優(yōu)秀的產(chǎn)品呈現(xiàn)在用戶(hù)面前。

參考文獻(xiàn)：

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

原文地址：京東設(shè)計(jì)中心JDC（公眾號(hào)）

作者：唐朋博、李小猛

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》B端交互設(shè)計(jì)在產(chǎn)品需求全周期中的質(zhì)量保證

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司