我們公司前段時(shí)間進(jìn)行了3.0項(xiàng)目的開(kāi)發(fā)，本次項(xiàng)目的進(jìn)展整體上還是比較順利的，但是還是遇到了很多小插曲，其中最讓人崩潰的就是驗(yàn)收環(huán)節(jié)，簡(jiǎn)直就是跟技術(shù)的一場(chǎng)拉鋸戰(zhàn)。當(dāng)然這場(chǎng)戰(zhàn)爭(zhēng)的始作俑者并不是某一方，而是每個(gè)角色身上都有各種各樣的問(wèn)題。今天就想來(lái)客觀的陳述一下整個(gè)過(guò)程，希望在下次進(jìn)行項(xiàng)目推進(jìn)的時(shí)候可以有所改進(jìn)。

目錄：

1. 我們遇到的問(wèn)題及解決方案；
2. 提升技術(shù)更改Bug的要點(diǎn)；
3. 那些容易出錯(cuò)的地方。

一、我們遇到的問(wèn)題及解決方案

前提：之前我們公司對(duì)設(shè)計(jì)還原度要求很低，且技術(shù)有較高的話語(yǔ)權(quán)，他們就覺(jué)得UI界面不重要，所以之前我們是沒(méi)有設(shè)計(jì)驗(yàn)收環(huán)節(jié)的，界面的問(wèn)題提上去也是石沉大海，我們每次進(jìn)行設(shè)計(jì)驗(yàn)收都很沮喪，也不會(huì)特別摳細(xì)節(jié)。

但是最近公司高管有了很大的變動(dòng)，新來(lái)的CEO、CTO和產(chǎn)品總監(jiān)都對(duì)設(shè)計(jì)要求特別高，當(dāng)然也就特別看重線上效果，所以就有了這次正式的設(shè)計(jì)驗(yàn)收環(huán)節(jié)。

首先，我想總結(jié)一下我們?cè)谶@次驗(yàn)收中遇到的幾個(gè)主要問(wèn)題：

1. 技術(shù)同學(xué)對(duì)設(shè)計(jì)稿的理解度不夠

首先檢討一下設(shè)計(jì)同學(xué)的問(wèn)題，為了圖自己省事，直接用Sketch Measure 導(dǎo)出標(biāo)注文件給到技術(shù)了，對(duì)于有適配需要的地方也沒(méi)有進(jìn)行單獨(dú)的標(biāo)記和說(shuō)明。所以技術(shù)同學(xué)就會(huì)按照自己對(duì)頁(yè)面的理解進(jìn)行布局，到驗(yàn)收的時(shí)候設(shè)計(jì)同學(xué)才發(fā)現(xiàn)不是自己想要的結(jié)果，這個(gè)時(shí)候要改動(dòng)的話就會(huì)比較困難。因?yàn)橐婚_(kāi)始的框架就不對(duì)，技術(shù)也沒(méi)有時(shí)間重新寫一遍，所以就會(huì)有很多問(wèn)題被擱置。

直接導(dǎo)出的標(biāo)注對(duì)界面的準(zhǔn)確性要求也特別高，你必須保證所有的界面都準(zhǔn)確無(wú)誤，不然就會(huì)遇到開(kāi)發(fā)者提出的來(lái)自靈魂的質(zhì)問(wèn)：“為什么這里是15px，那里是16px，兩邊不一樣，究竟讓我們?cè)趺磳?？?/p>

聽(tīng)到這句話是不是有點(diǎn)不服，但是就是你錯(cuò)了呀。所以時(shí)間允許時(shí)還是要手動(dòng)標(biāo)注，不但可以減少這種質(zhì)疑，在標(biāo)注的時(shí)候還會(huì)對(duì)頁(yè)面的細(xì)節(jié)進(jìn)行盤查，會(huì)發(fā)現(xiàn)一些遺漏的狀態(tài)和缺失的細(xì)節(jié)，這樣下來(lái)最終提交給技術(shù)的設(shè)計(jì)稿會(huì)更加完善。

再者，缺少設(shè)計(jì)稿評(píng)審的環(huán)節(jié)，這個(gè)環(huán)節(jié)主要給技術(shù)講述一些適配要求、交互狀態(tài)及動(dòng)效（我們公司近期撤了交互崗位，所以交互的相關(guān)工作需要設(shè)計(jì)同學(xué)進(jìn)行考慮）；同時(shí)解答技術(shù)同學(xué)的一些疑問(wèn)，這樣就能將一些可預(yù)見(jiàn)的問(wèn)題解決掉，解決后期的溝通成本。

解決方案：

1. 時(shí)間允許，盡量進(jìn)行手動(dòng)標(biāo)注/時(shí)間緊張需要適配的地方單獨(dú)標(biāo)記；
2. 技術(shù)開(kāi)發(fā)前進(jìn)行設(shè)計(jì)稿評(píng)審。

2. 設(shè)計(jì)稿的缺失

這個(gè)首先當(dāng)然是設(shè)計(jì)師的失責(zé)，因?yàn)槲覀兲峤唤o技術(shù)的設(shè)計(jì)稿的第一要素就是完整度，到開(kāi)發(fā)進(jìn)入尾聲才發(fā)現(xiàn)缺失，那技術(shù)同學(xué)只有說(shuō)“對(duì)不起，排期吧”。然后設(shè)計(jì)同學(xué)還一肚子委屈，覺(jué)得開(kāi)發(fā)不配合。

下面是設(shè)計(jì)稿中常見(jiàn)的缺失內(nèi)容：

1. 頁(yè)面極限狀態(tài)：無(wú)內(nèi)容、無(wú)網(wǎng)絡(luò)、加載中；
2. 頁(yè)面交互狀態(tài)：上滑導(dǎo)航欄固定的樣式、社交操作的交互狀態(tài)、下拉刷新樣式、按壓狀態(tài)等；
3. 頁(yè)面適配：文字的極限情況、屏幕橫向豎向的適配、X和Android等各種極限機(jī)型的適配。

這些都應(yīng)該是在出設(shè)計(jì)稿的時(shí)候就考慮清楚的問(wèn)題，因?yàn)榧夹g(shù)是根據(jù)你的設(shè)計(jì)稿進(jìn)行技術(shù)排期的，如果你的頁(yè)面不完整，后期再增補(bǔ)導(dǎo)致項(xiàng)目延期，這個(gè)責(zé)任在誰(shuí)呢？

3. 技術(shù)同學(xué)的“不配合”

這里的不配合不是說(shuō)技術(shù)同學(xué)偷懶不想干活，原因是多方面的：

1. 設(shè)計(jì)審核時(shí)間太靠后，結(jié)果就是在我們提交UI問(wèn)題的時(shí)候，產(chǎn)品也在提交功能型的bug，那技術(shù)同學(xué)同時(shí)拿到這兩個(gè)問(wèn)題，按照問(wèn)題的優(yōu)先級(jí)來(lái)說(shuō)肯定是先改功能性問(wèn)題，然后你的問(wèn)題就被擱置了。
2. 技術(shù)沒(méi)有完美還原設(shè)計(jì)稿的意識(shí)，還是覺(jué)得這件事情沒(méi)有那么重要，所以覺(jué)得設(shè)計(jì)師摳像素就是跟他們過(guò)不去一樣，其實(shí)我們也很無(wú)奈，因?yàn)樵O(shè)計(jì)稿就是一個(gè)像素一個(gè)像素?fù)钙饋?lái)的呀。
3. 設(shè)計(jì)的時(shí)候沒(méi)有考慮開(kāi)發(fā)的可實(shí)現(xiàn)性和實(shí)現(xiàn)成本，所以就覺(jué)得開(kāi)發(fā)應(yīng)該完全按照自己的設(shè)計(jì)稿做出來(lái)，做不出來(lái)就是不配合，設(shè)計(jì)師尤其愛(ài)說(shuō)“你看XX大廠能寫出來(lái)，你咋就寫不出來(lái)呢”，這是極其自大且沒(méi)有情商的一種表現(xiàn)。首先大廠的技術(shù)團(tuán)隊(duì)實(shí)力理論上是比小公司要強(qiáng)；另外我們也要傾聽(tīng)技術(shù)同學(xué)的聲音，他們也許是因?yàn)榕牌诰o張而做不到呢，所以在批判別人之前要首先想想自己的問(wèn)題，看到客觀存在的問(wèn)題，然后一起尋找更好的解決方案。

解決方案：

1. 提前進(jìn)行設(shè)計(jì)驗(yàn)收，最好是提前知道模塊的開(kāi)發(fā)者，這樣后期一對(duì)一進(jìn)行模塊的打版驗(yàn)收效率更高；
2. 設(shè)計(jì)時(shí)考慮開(kāi)發(fā)成本和可實(shí)現(xiàn)性。

4. 設(shè)計(jì)驗(yàn)收不完整

之前沒(méi)有完整驗(yàn)收的經(jīng)驗(yàn)，所以我們基本上是看到哪里是哪里，沒(méi)有一個(gè)系統(tǒng)的驗(yàn)收框架，這樣就會(huì)導(dǎo)致在驗(yàn)收的時(shí)候會(huì)有缺失，然后會(huì)被其他同事發(fā)現(xiàn)還挺尷尬的，測(cè)試是由測(cè)試用例的。所以我們也應(yīng)該輸出一份設(shè)計(jì)審核清單，對(duì)照表格進(jìn)行驗(yàn)收，才能避免遺漏。

5. 通用樣式未進(jìn)行組件化開(kāi)發(fā)

從源頭來(lái)說(shuō)這個(gè)是我們自己的問(wèn)題，因?yàn)闆](méi)有將通用模塊進(jìn)行組件化整理。同時(shí)技術(shù)同學(xué)也沒(méi)有這個(gè)意識(shí)（或者是組內(nèi)配合度不夠），因?yàn)槲覀儽敬雾?xiàng)目是視覺(jué)升級(jí)，所以有些模塊的開(kāi)發(fā)者會(huì)根據(jù)設(shè)計(jì)稿新出，有些是直接調(diào)用之前的樣式，這樣導(dǎo)致的結(jié)果就是不同模塊的彈層樣式不一致的尷尬結(jié)果。

解決方案：

通用模塊樣式進(jìn)行組件化整理，比如Toast、對(duì)話框、錯(cuò)誤提示等。協(xié)助技術(shù)進(jìn)行組件化開(kāi)發(fā)。

提升技術(shù)更改bug效率的要點(diǎn)

1. 不要只是告知技術(shù)錯(cuò)哪里了，而是直接告知技術(shù)更改的方案

比如說(shuō)圖片尺寸錯(cuò)了，有些設(shè)計(jì)師就直接標(biāo)注出來(lái)說(shuō)這里出錯(cuò)了，請(qǐng)參考設(shè)計(jì)標(biāo)注重新調(diào)整。另一個(gè)設(shè)計(jì)師不僅標(biāo)注哪里錯(cuò)了，還直接標(biāo)出這個(gè)圖片尺寸是多大。很明顯技術(shù)看第二個(gè)設(shè)計(jì)師給的驗(yàn)收文檔更改的效率更高。

2. 間距錯(cuò)，直接告知需要增減多少

這個(gè)是本次驗(yàn)收的時(shí)候發(fā)現(xiàn)的一個(gè)很大的問(wèn)題，由于文字內(nèi)邊距的影響，開(kāi)發(fā)同學(xué)按照設(shè)計(jì)稿標(biāo)注數(shù)值寫出來(lái)的頁(yè)面跟設(shè)計(jì)稿有偏差，這個(gè)時(shí)候我們就需要比對(duì)實(shí)際頁(yè)面和設(shè)計(jì)稿之間的差距，直接告知技術(shù)應(yīng)該增減多少像素，不然問(wèn)題很難解決。

另外，我們之前在進(jìn)行頁(yè)面設(shè)計(jì)的時(shí)候習(xí)慣于將文字大小和行高設(shè)置一樣的大小，這種方式是不對(duì)的，因?yàn)锳ndroid和IOS系統(tǒng)默認(rèn)的字體都有內(nèi)邊距，并且Sketch默認(rèn)的文字內(nèi)邊距跟IOS的默認(rèn)字是一樣的; Android系統(tǒng)文字的內(nèi)邊距會(huì)比Sketch的大一丟丟，這種誤差是在可接受范圍內(nèi)的，如果開(kāi)發(fā)時(shí)間很緊的情況下，可以忽略不計(jì)。所以進(jìn)行頁(yè)面設(shè)計(jì)的時(shí)候不用手動(dòng)調(diào)整文字行高

三、容易出問(wèn)題的地方

同時(shí)我們發(fā)現(xiàn)技術(shù)開(kāi)發(fā)的過(guò)程中有兩個(gè)地方是非常容易出錯(cuò)的，并且調(diào)整起來(lái)的修改成本也比較高，主要有三個(gè)地方投影、間隔線、文字加粗。

1. 投影

投影最好少用為妙，首先是因?yàn)榧夹g(shù)實(shí)現(xiàn)成本很高，其次即使寫出來(lái)了跟你想要的樣式偏差也會(huì)很大，需要不斷的溝通調(diào)整，會(huì)花費(fèi)很長(zhǎng)的時(shí)間；再者多個(gè)投影卡片聚合在一起的時(shí)候，進(jìn)行多機(jī)型適配，能把設(shè)計(jì)師和技術(shù)同學(xué)都折磨瘋的。所以為了節(jié)省開(kāi)發(fā)成本，呵護(hù)我們和開(kāi)發(fā)同學(xué)友誼的小船，能少用盡量少用。

2. 間隔線

間隔線不管在幾倍的機(jī)型下，都應(yīng)該保持1px的線條高度，但是很多時(shí)候技術(shù)開(kāi)發(fā)的時(shí)候并沒(méi)有注意到這種適配方式，結(jié)果就是在2倍機(jī)型下是顯示2px，3倍機(jī)型下顯示3px。這個(gè)問(wèn)題很容易出現(xiàn)也很容易避免，就是將線條適配規(guī)則跟所有的技術(shù)同學(xué)周知一下即可。

3. Android加粗

Android的系統(tǒng)默認(rèn)字體是思源，在系統(tǒng)默認(rèn)的字體庫(kù)里（我們的技術(shù)同學(xué)告知的）只有3個(gè)自重，細(xì)體、常規(guī)體、和超粗字體，導(dǎo)致的結(jié)果就是Android機(jī)型上的加粗字體會(huì)顯得格外粗重。我們摸索出一個(gè)解決方案就是Android字體加粗的時(shí)候減少一個(gè)字號(hào)，這樣頁(yè)面才能顯得平衡。

總結(jié)

以上就是我們本次開(kāi)發(fā)驗(yàn)收過(guò)程中發(fā)現(xiàn)的問(wèn)題和一些小小的經(jīng)驗(yàn)，希望我們的驗(yàn)收總結(jié)可以給大家一些啟發(fā)和借鑒。

當(dāng)然如果有更好的解決方式也歡迎留言告知我，我非常樂(lè)意傾聽(tīng)大家的意見(jiàn)，期待更好的解決方案。

參考文獻(xiàn)：

《最好的UI設(shè)計(jì)師》· 顏偉(海邊來(lái)的設(shè)計(jì)師) · 電子工業(yè)出版社 · 2018第九章 驗(yàn)收

本文由 @Wendy 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議