B端設計中，保證最終的交付質量和落地

Sponsor

在B端設計中，保證最終的交付質量，讓用戶可以得到體驗更優更順暢的產品功能呢？

為什么需要設計質量保證

良好的用戶體驗并非偶然發生，是可以由團隊來保證的。在一個產品設計中，用戶體驗涵蓋了產品團隊所做的一切，包括開發、產品、測試、設計等。每個人的角色都會影響到客戶體驗，尤其是交互設計和視覺設計。為了使我們所做的設計質量能夠得到保證，最常見的方式就是在產品驗收環節進行設計走查驗收了。而經常作為一個項目上線前的最后環節之一，設計師經常在臨近的上線的時候才開始介入，導致到最后經常由于時間不充裕只能修改部分設計和功能上的問題。作為設計師，我們的工作不會以將設計交給開發而結束。隨著產品的開發，我們需要負責整個開發環節是否符合我們的交互規范。如果沒有設計質量保證，那么許多功能將不得不重新開發來修復交互和視覺問題，用戶得不到更好的用戶體驗，輕則耗費更多時間，重則直接影響用戶放棄使用該產品，這可能還會導致其他不可預見的問題。

設計質量的保證僅靠最后臨門一腳的設計走查驗收遠遠是不夠的。無論是C端還是B端產品，設計走查是開發一款產品的過程中不可或缺的一個環節，需要在需求全周期中各個環節都要加入對設計質量的把控。

設計驗收實施步驟和方案

一、UX/UI設計師需不需要走查

很多小伙伴認為視覺走查都應該是測試同學的任務，除了測試產品問題，視覺上也要測試同學去處理，不可否認的是，測試同學確實會找到一些視覺、交互、開發上的問題，但常常有一定的局限性也過于理想化。

測試同學主要負責前后端的問題，比如前端同學引用圖片的靜態資源加載問題，后端功能和接口的問題。而此時如果視覺上面的問題也交給測試同學去處理，那么設計質量是很難得到保證的。首先B端產品是一個復雜的系統，產品功能多、邏輯復雜、業務分支多等因素。僅靠測試同學去找到所有問題，不但處理不過來而同時具備這些能力是很難的。因為一個產品的交互設計和視覺設計是由設計師制定的，所以設計師參與走查驗收不但可以通過不同的視角測試和查看產品設計質量問題，還可以快速定位到測試同學不易察覺和發現的設計細節點，如顏色的細微差別、圖標的使用、字體的行高行間距等問題。

二、制定驗收標準/項目排期表

要保證設計質量，在B端設計中不是易事，由于后期驗收的功能和驗收人員都不盡相同，為了達到統一的驗收標準，我們首先需要制定驗收標準，最終形成與產品設計并行的一個流程，才能有效保證質量。有標準可依，才能做事不慌。在接到需求后可以根據以往的經驗或者根據產品經理給出的項目排期表，確定本次需求的設計優先級，這樣在確定優先級后，可以對不同等級的功能進行實施制定。

通過項目排期表我們可以清楚的看到項目的相關責任人、研發同學及功能需求說明等。這樣在驗收的時候可以快速找到相關責任人提出問題，如相對應的開發和產品。還可以通過排期表查看如項目時間安排、優先級等重要信息。

三、走查驗收哪些內容

按照上面的表，我們整個設計驗收可以從交互層面、視覺層面和整體體驗三個方面進行：

1. 交互層面

交互層面是整個產品的功能導向，因為B端產品功能和邏輯復雜，我們要通過功能性、易用性、可操作性和高效性入手來提高用戶體驗，衡量用戶對產品的實際感知，如結構設計、頁面布局和信息組織方式，能否被快速理解，用戶是否能正確操作，順利使用產品完成任務及完成效率和負荷程度，避免承受非必要、繁瑣、小心謹慎的操作過程。

2. 視覺層面

視覺層面是前端頁面的靜態效果是否和設計稿一致，包括色彩、字體、布局、排版等細節。通過全局通用、功能動效、視覺規范快速定位到問題并提出問題。這塊內容一直是開發和設計難以達成一致的重災區。

3. 整體體驗

因為現在很多項目涉及到多端設計，如果不對多端設計差異的把控，一般很容易出問題，如PC端和移動端、iOS端和Android端、小程序和APP等，在設計方法上都存在巨大差異，兩者在交互事件上也存在很大差別，那么它們之間的交互內容和視覺內容是否符合設計需求，是否有遺漏和錯誤，也屬于整體體驗的檢查內容。

四、什么時候可以進入走查

當驗收標準和走查內容確認后，什么時候可以進入走查了？這個問題很多設計師的答案都不一樣，因為開發周期，迭代周期，項目的難易程度等因素不一致，導致進入走查的時間也是不一樣的。針對日常迭代視覺體驗走查，設計師常常會在測試同學完成產品bug測試后開始進入，進行視覺和交互走查，然后提交問題給開發進行解決。而前面也說到，設計質量的保證僅靠最后臨門一腳的設計走查驗收遠遠是不夠的。無論是C端還是B端產品，設計走查是開發一款產品的過程中不可或缺的一個環節，需要在需求全周期中各個環節都要加入對設計質量的把控。

五、需要驗收還原到什么程度

產品驗收、設計走查驗收目的是為了保證設計質量，所以這個其實是沒有非常硬性標準的，不同公司、不同項目、不同設計師都可能不一樣。一般來說，還原度標準：C 端＞B 端＞后臺。

當驗收標準制定后，通過對照驗收標準來確定需要驗收的范圍即可，開發一個項目時，為了使項目進展更加準確，通常項目采用時間倒排，這個時候需要給走查驗收留好時間，以防止由于時間不充裕只能修改部分設計和功能上的問題。

六、走查驗收遵循的原則

當產品開發完之后我們要對產品進行視覺和交互走查，那沒該怎么做設計走查工作呢？都需要走查哪些方面呢？針對產品可用性，1995年人機博士尼爾森（Nielsen）提出了一個尼爾森十大可用性原則，也叫尼爾森十大交互原則、用戶體驗十大原則，用于評價產品體驗的好壞。原則分為為：系統可見性原則、場景貼切原則、可控性原則、一致性原則、防錯原則、協助記憶原則、靈活高效原則、審美和簡約設計原則、容錯原則、人性化幫助原則。

但是，由于時間久遠，互聯網發展迅速，用戶人群和使用場景也不僅相同，在這種情況下除了可以繼續使用尼爾森十大可用性原則，我們也可以根據自己的產品特性制定適合自己的一套可用性原則。這里我們在尼爾森十大可用性原則的基礎上進行拆解，分成視覺呈現、界面設計、導航設計、信息設計、交互設計、信息架構、功能需求層、內容需求八個方面進行分段走查。

1.?視覺呈現

1）重要的內容明顯且清晰

用戶的第一感官動作是掃頁面，所以重要的文字、圖像、功能應該足夠明顯、清晰，減少不必要的視覺元素和無關緊要的信息，以便操作和使用。

2）配色方案和品牌識別

基于品牌調性的配色方案，清晰明了，不刺眼、不反感。

3）一致性

相同功能，操作、用法保持一致。

2.?界面設計

4）交互和非交互元素區分明顯

可交互的元素應該更清楚的顯示出來，而非交互的元素不應該看起來是可交互的。

5）頁面布局清晰

模塊與模塊之間結構清晰，相關功能、內容應該在同一模塊中。

3.?導航設計

6）導航分類清晰

導航分類清晰，讓用戶方便快速地找到想要的功能。

4.?信息設計

7）通俗易懂的文案

將所有復雜的術語、行話和縮寫，用易懂的方式說清楚，說人話。無法簡單描述的詞語需要給出解釋。

8）清晰地選項

提供清晰的表單列表，分組明確，需要步驟的明確需要幾步，需要準備的提前告知。

5.?交互設計

9）操作反饋

及時對用戶做出的操作給予反饋，如操作成功、操作失敗，等待中就告知用戶等待多久。

10）符合預期

任何操作跳轉符合用戶心理預期（如點擊取消支付時，卻顯示支付成功）。

11）避免重復/過多的操作

不要要求讓用戶多次輸入相同的內容或同一操作。

12）給用戶控制度和自由度

讓用戶自主做決定，可以引導用戶做系統希望做的。

13）遵循原則

除非特殊原因，否則請遵循互聯網所形成的規定。

14）防錯處理

最好的做法是做到用戶無法出錯的設計，其次是在用戶可能出錯的時候給予提醒，如果誤操作，可提供恢復的方法，如果無法恢復，一定要反復警示提醒。

15）容錯

用易懂的方式說明錯誤原因，并提供建設性的解決方案（如頁面加載失敗，提供失敗原因之外應該提供重新加載的按鈕；登錄失敗，提示失敗原因之外應該提供注意大小寫或者早會密碼之類的建議）。

16）幫助記憶

減少用戶對信息的記憶負荷，幫助用戶在需要之前信息的時候提供相關信息。

17）靈活高效

可以滿足新用戶和老用戶的使用場景，并且不要因為小部分人的需求而放棄大部分人的需求，切記以點概面。

6.?信息架構

18）清晰地信息架構

信息分類清晰，層級關系明確，任務路徑清晰。

7.?功能需求

19）提供用戶需要和期望的功能

提供用戶可以方便快捷操作的功能（如列表信息過多的情況下提供搜索，篩選功能）。

20）對復雜的操作給予幫助

對復雜的功能提供新手幫助和清晰的解釋。

8.?內容需求

21）提供不要但不多的內容

提供足夠用戶能夠完成任務的內容，而不是過多的不必要的內容。

整體維度如下圖所示：

七、高效走查驗收的前提

了解開發依據哪些規則還原設計稿，前期的準備工作是重中之重，設定好每一個細節規則，后期落地還原時才會將頁面的失真率降到最低。在對接的整個流程中，本文梳理了前中后三個階段分別需要做的準備工作，來幫助解決設計師和開發如何高效驗收的問題。

1. 前期規范

1）規范制定

這里的規范制定包含設計規范和開發規范。規范的目的是為了統一設計內部及前端工程師的開發，提升團隊的協作效率，從而實現設計稿到線上頁面輸出統一的設計語言，從根本提升設計質量和還原度。設計側，我們把顏色、字體、組件等內容預設定成規范，保證了視覺上的統一，也方便組件的復用。同樣針對同一項目的開發，開發側也可以制定相應的開發組件，將顏色、字號、功能模塊進行組件化，方便后期迭代的組件化使用。

如果面對跨平臺、多頁面、多組件的復雜場景下，為了保證整體的用戶體驗的一致性，我們也可以制定原子組件設計，是由原子、分子、組織、模版和頁面共同協作，可以幫助我們創造出一套符合公司產品的設計系統。

2）交互文檔說明

交互文檔的說明可以從內到外的對產品設計的考量，信息結構的布局和優先級的落地，以及對用戶體驗一致性的把握。高保真的交互文檔說明，能用讓UI設計師更好的按照交互稿去實現交互設計師想要表達的東西，可以更專注于表現層的設計。成熟的交互注釋和描述細節程度決定開發時反復溝通的頻率，大到功能流程的設計，小到某個交互事件的定義?？傊?，好的交互文檔說明，可以讓UI設計師和開發更專注自己做的事，不但可以更好地實現效果，還可以減少開發過程中遇到的問題和溝通成本。

3）設計文件輸出

我們在做設計交付前期，需要把全部的頁面、操作狀態、切圖標注、動效視頻等文件整理好交給前端開發，為了方便多個前端開發協同的使用，我們可以按照版本號或者功能進行排列放置。關于設計稿內的設計與工具使用，這里不做贅述。

2. 中期跟進

1）設計評審

我們需要通過設計評審去幫助團隊實現產品目標，幫助設計師發現更優的設計思路，與開發對齊目標，減少溝通成本，保證團隊整體設計的一致性。

設計評審意義就是把問題前置化。通過評審可以把視覺問題和開發說明清楚，結合交互文檔對設計理念、組件規范、動效、特殊樣式等模塊進行講述，幫助開發同學理解。同時開發同學也要及時反饋是否有還原困難，如是否有技術限制、是否有組件改動困難、實現成本過高等問題。

2）實時反饋、實時跟進

在項目正式上線前，會出現產品臨時更改需求、狀態頁面缺失、功能不好實現、估時估的不準確等問題。如果不及時反饋及時跟進，那么很容易在測試上線后暴露出的問題，可能導致了延期等狀況。所以信息的同步非常重要，在項目組成立時，把涉及到的項目成員建立項目溝通群，所有相關信息同步在群內，有問題及時溝通，必要時拉會或者面聊。

3）測試用例

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

3. 后期驗收

1）設計走查

設計走查驗收也叫還原度驗證、設計走查、設計驗證。是保證研發實際實現的效果是否和設計稿一致的過程。接下來我們詳細講解后期驗收這塊。

2）輸出文檔及推動優化

由于時間、開發難度等原因，或多或少會遺留一些沒有解決的問題，那么這個時候我們需要把這些遺留問題輸出文檔進行下一版本的迭代優化推動。

八、驗收方法和驗收的工具

關于驗收方法和驗收工具，每個公司每個團隊每個設計師所使用的都不盡相同，工具的作用也是為了提升工作效率，目的也是為了找出問題并解決問題，這里列舉了我常用的兩種方法和一種工具，如果大家還有其他更好的方法或者工具，可以評論區一起交流和提升。

1.?通過截圖對比，整理到協同表格工具里提交給前端開發進行解決。

這種對比的方式更直觀，能讓前端開發快速定位問題所在，通過問題描述可以可以知道具體問題所在，快速響應快速解決。

在線協同表格，可以使用飛書、騰訊等在線表格等。在線文檔的優勢是可以在線協同快速處理問題。

2.?直接在設計稿上截圖對比，添加問題描述，提交JIRA給開發。

這種方式和第一種方法相似，由于現在大部分公司使用Figma、MasterGo、即時設計等在線協同設計軟件，因為支持多人協作、實現同步等，所以這種直接在設計圖上標注對比，方便前端開發快速定位問題，提交JIRA可以快速收集需求、跟蹤任務和敏捷管理等。

3.?字節跳動出品的一款走查插件Copixel

通過疊加開發稿和視覺稿，來找出問題，解決開發還原度低、設計走查低效的問題，實現高質量的項目還原效果，保障更極致的用戶體驗。

總結

設計走查的完善可以保證設計質量，設計師在流程的早期意識到交互或者視覺問題，可以在項目的過程中就保證設計質量，而無需反復進行交互和視覺處理。除此之外還可以解決一下問題。

一、?讓設計師了解技術問題

如果設計師在測試正在開發的功能，將會更好地理解出現的技術問題。這不僅有助于設計人員了解其設計的優點和缺點，而且還有助于防止這些問題出現在未來的功能中。

二、?增加協同和溝通

協作和溝通是團隊成功的關鍵因素。如果每個人都一起工作并在問題出現時意識到問題，就會增加尋找解決方案的協作。

三、?在開發的過程中幫助構建正確的界面

如果走查驗收就是開發的一部分，那么在開發功能和界面時就解決問題，就不用再開發結束后再返回進行交互或視覺的更改。

四、?節省時間

可以讓項目流程進展更高效，節省時間。

五、?揭露不可預見的錯誤

在開發一個項目時，經常出現修復一個問題時產生了其他的錯誤，通過盡早記錄問題，可能會發現潛在的更大的看不見的問題。在互聯網時代，設計師通過整個生產過程中與開發合作并清楚的表達自己的想法，設計師可以幫助高效的交付產品，在了解整個驗收過程，以確保我們的工作在最終的項目或者產品中得到體驗，我們也會很自豪的說，看這個功能、這個界面、這個圖標是我設計的。

文章如有不到之處還請指正，如果你有更好的關于走查驗收相關的意見和好的想法，可以在評論區發表評論，讓我們一起進步！

作者：羅小盒 | UI設計師

來源：站酷 | xiaohe.zcool.com.cn

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。