前言

• 去年年底我們公司進(jìn)行了項目主路徑的改版，整體的進(jìn)展比較順利空免，但是還是暴露了產(chǎn)研側(cè)存在的一些問題空另，其中就包括令人“奔潰”的UI驗收環(huán)節(jié)。
• 這篇文章將以UI驗收為出發(fā)點蹋砚，盡可能客觀地復(fù)盤整個改版過程扼菠。

1、吐槽大會 —— 問題是什么坝咐？

首先整理出遇到的幾個主要的問題：

這些問題不是一種角色的問題循榆，單獨站在其中一個角色的角度去看待，或者單獨歸因到其中某個角色上墨坚，都是不全面的秧饮。必須把視角拔高，從更高的層次去看待整體泽篮，才能更好地理解這個問題盗尸。

2、設(shè)計稿審核不全面

2.1 描述

設(shè)計稿審核是一個需要考慮很多因素的環(huán)節(jié)帽撑，正如軟件質(zhì)量保證從來都不是測試同學(xué)一方的責(zé)任一樣泼各，設(shè)計稿的審核也從來不只是設(shè)計同學(xué)一方的責(zé)任，而是整個產(chǎn)研團(tuán)隊的責(zé)任：

• 從產(chǎn)品側(cè)亏拉，既有考慮正常 / 異常流程完整性历恐，也有整體美觀性和品牌調(diào)性傳達(dá)；
• 從設(shè)計側(cè)专筷，既有信息架構(gòu)與流程合理性弱贼，也有UI細(xì)節(jié)標(biāo)注到位；
• 從研發(fā)側(cè)磷蛹，既有設(shè)備 / 多平臺適配吮旅，也有技術(shù)實現(xiàn)預(yù)判。

如果前期未（盡可能）全面地審核設(shè)計稿，將存在以下問題庇勃，最終在驗收時出現(xiàn)各種各樣的問題：

• 設(shè)計稿內(nèi)容缺失
• 邊界情況 / 異常流程未確認(rèn)
• 技術(shù)同學(xué)對設(shè)計圖的理解不夠 / 不統(tǒng)一
• 開發(fā)中 / 上線后暴露問題檬嘀，造成延期 / 效果打折

2.2 解決方案

隨著團(tuán)隊的成長，工作流程應(yīng)該朝著流水化责嚷、可復(fù)制鸳兽、工具化的方向演進(jìn)，形成一套方法論。對于設(shè)計稿審核，可以是用建立UI審核表另绩，在設(shè)計稿交付前，設(shè)計同學(xué)先自查一遍衷掷，在研發(fā)開始之前，產(chǎn)品同學(xué)和研發(fā)同學(xué)根據(jù)自己的側(cè)重點再二次審核柿菩，例如：

參考自海鹽社@阿肆Stella

2.3 推薦文獻(xiàn)

• 《設(shè)計師必須要學(xué)會的自查技巧》 —— 橙子的橙子
• 《梳理適合自己的交互自查表》—— 半木
• 《交互設(shè)計自查表的建立：思路與項目實例解析》 —— 秦時饅頭
• 《交互設(shè)計方案衡量標(biāo)準(zhǔn)的五層總結(jié)》 —— 鴻影
• 《手把手教你打造【0失誤神器】——交互設(shè)計自查表》 —— 阿肆Stella

3戚嗅、通用樣式未形成規(guī)范

3.1 描述

每一張設(shè)計稿都不是獨立存在的（除了一些活動頁 / 個性化頁，確實可以獨立設(shè)計）枢舶，如果沒有將一些通用的樣式進(jìn)行組件化整理懦胞，存在以下問題：

• 增加重復(fù)研發(fā)成本，研發(fā)工作量增大
• 增加新樣式驗收成本凉泄，驗收工作量增大
• 有的模塊使用舊樣式躏尉，有的模塊使用新樣式，整體體驗不一致
• 重復(fù)的樣式一定程度上增大了應(yīng)用包體積

3.2 解決方案

隨著業(yè)務(wù)功能的疊加旧困，項目中肯定會存在一些通用的，可以復(fù)用的樣式稼锅，主要可以劃分三個緯度：

• 通用的顏色與尺寸
  例如：主顏色吼具、價格文本顏色、列表多級文本顏色矩距、分割線寬度拗盒、界面邊距
• 通用的組件
  例如：圓角按鈕、標(biāo)簽锥债、對話框陡蝇、Toast、抽屜菜單哮肚。通常登夫，需要從顏色和尺寸兩個角度定一個組件。
• 通用的交互
  例如：下拉加載允趟、上拉更多恼策、頂部折疊交互效果

將通用樣式組件化整理并形成規(guī)范的過程，需要設(shè)計和開發(fā)協(xié)同進(jìn)行潮剪，在初期會加大工作量涣楷，但是從長遠(yuǎn)看分唾，消耗這部分工作成本是值得的。

例如：建立通用調(diào)色板與通用元素顏色狮斗，避免色彩濫用：

    <!-- - - - - - - - - - - - - - - - 調(diào)色板 - - - - - - - - - - - - - - - -->

    <color name="white">#FFFFFFFF</color>
    <color name="greenLight">#FFD5E8D4</color>
    <color name="orangeLight">#FFFFB366</color>
    <color name="redLight">#FFFF6666</color>
    <color name="gray1">#FF333333</color>
    <color name="gray2">#FF666666</color>
    <color name="gray3">#FF999999</color>
    以下省略...
    <!-- - - - - - - - - - - - - - - - 主題 - - - - - - - - - - - - - - - -->

    <!-- 主色調(diào) -->
    <color name="colorAccent">@color/greenLight</color>
    <!-- 列表的三級顏色 -->
    <color name="colorOnPrimary">@color/gray1</color>
    <color name="colorSecondary">@color/gray2</color>
    <color name="colorSecondaryVariant">@color/gray3</color>
    <!-- 表示金錢有關(guān)的顏色 -->
    <color name="colorPrice">@color/orangeLight</color>
    <!-- 表示熱賣的顏色 -->
    <color name="colorHot">@color/redLight</color>
    以下省略...

例如：定義標(biāo)簽（Tag）組件樣式：

• 兩個角度：顏色與尺寸
• 兩個層次：基準(zhǔn)標(biāo)準(zhǔn)與產(chǎn)品標(biāo)準(zhǔn)

標(biāo)簽是進(jìn)行標(biāo)記和分類的小標(biāo)簽绽乔，是常見的信息元素。定義一個標(biāo)簽碳褒，需要考慮文本折砸、填充、內(nèi)邊距骤视、邊線與圓角幾個緯度鞍爱，先定義基準(zhǔn)標(biāo)準(zhǔn)，例如：

全填充標(biāo)簽

透明填充標(biāo)簽

在基準(zhǔn)標(biāo)準(zhǔn)的基礎(chǔ)上，再根據(jù)標(biāo)簽具體使用場景祷肯、業(yè)務(wù)沉填、上下文等特異性需求，基準(zhǔn)標(biāo)準(zhǔn)與特異性需求組合佑笋，就是完整的產(chǎn)品標(biāo)準(zhǔn)啦翼闹，例如：

3.3 推薦研發(fā)資源

• Best Practices for Themes and Styles (Android Dev Summit '18)
• Developing Themes with Style (Android Dev Summit '19)
• Android themes & styles demystified - Google I/O 2016

4、驗收過程反復(fù)蒋纬、低效

4.1 描述

在筆者經(jīng)驗里猎荠，如果不需要二次UI驗收，真的是值得開香檳慶祝的時刻呢蜀备！有很多原因?qū)е铝送荒茉谝淮畏倒ず蠼鉀Q全部錯誤关摇。

4.2 問題與辦法

• 口頭說明
  口頭說明很容易出現(xiàn)遺漏，比如設(shè)計同學(xué)指出了10個碾阁，但是開發(fā)同學(xué)只改了6個输虱。而且當(dāng)設(shè)計需要對接多個開發(fā)時，很難將問題指向到對應(yīng)的開發(fā)人員脂凶，造成重復(fù)溝通和重復(fù)返工宪睹。時間允許的情況下，盡可能使用文檔 / 截圖的形式蚕钦。

  
  
  口頭說明容易遺漏

• “參見設(shè)計稿”
  有些設(shè)計同學(xué)喜歡指出一個位置亭病，然后標(biāo)注“參見設(shè)計稿”，相當(dāng)于指出了有問題嘶居，但是沒有指出是什么問題命贴，有可能出現(xiàn)一輪驗收后還是有問題的情況。開發(fā)沒辦法像設(shè)計師一樣，對每一個像素 / 顏色能一眼看出問題胸蛛，相比與“參見設(shè)計稿”污茵，具體標(biāo)注“增大多少px，改為什么顏色”是更高效的做法葬项，慎用“參見設(shè)計稿”泞当。

慎用“參見設(shè)計稿”

一輪驗收后還是有問題

• UI 驗收問題沒有開發(fā)修改
  這個屬于開發(fā)同學(xué)的失誤了，因為通常界面是多名同學(xué)協(xié)作完成的民珍，所有有些UI驗收問題就不能直接指向到某一名開發(fā)身上襟士。為了避免出現(xiàn)遺漏，收到UI驗收問題時嚷量，開發(fā)同學(xué)應(yīng)該提前就做好分工陋桂，做到事事有著落。

4.3 推薦文獻(xiàn)

• 《讓人"崩潰"的設(shè)計驗收》 —— Wendy_小火焰
• 《如何高效的進(jìn)行設(shè)計驗收蝶溶？》 —— 橙子的橙子

5嗜历、溝通乏力，同學(xué)間有脾氣

5.1 描述

每個人都希望自己的合作伙伴是一個經(jīng)驗豐富抖所、熱心團(tuán)結(jié)梨州、既開得起玩笑又扛得起通宵的完美伙伴，但現(xiàn)實中一個人不可能在每個方面 / 每個時候都做到盡如人意田轧。

5.2 團(tuán)隊建設(shè)

如果一個團(tuán)隊能做到邊界清晰暴匠、職責(zé)明確，那么就不會有那么多委屈或者沖突吧傻粘。就好像下棋一樣每窖，黑先白后，輪流落子弦悉，你一步我一步窒典，沒有任何爭議。

5.3 自我調(diào)整

我們無法左右他人的行為警绩，感覺溝通有困難崇败，希望一些小經(jīng)驗?zāi)軒偷侥悖?/p>

• 盡早拋出問題盅称，不要等到驗收時發(fā)現(xiàn)問題肩祥，返工時間太緊
• 根據(jù)問題大小，大問題在大群里指出缩膝，細(xì)節(jié)問題私聊解決
• 口頭問題 / 需求改動在大群確認(rèn)
• 如果確定是對方的問題但不配合的混狠，可以考慮上升推動。通常來說疾层，領(lǐng)導(dǎo)是樂于幫下屬解決問題的将饺，因為上線后如果出問題，領(lǐng)導(dǎo)也有一定責(zé)任的。

6予弧、寫在最后

經(jīng)彻伟桑看到身邊同學(xué)對一些問題“妥協(xié)了”，其中部分原因是趕工的無奈吧掖蛤。有這樣一個問題杀捻，我們遇到的問題是錯誤和失敗呢？看到一個答案是：我們遇到的是錯誤還是失敗蚓庭，完全取決于我們的自我選擇致讥。遇到問題的下一個選擇是新決策的產(chǎn)出，新的決策能夠盡量減弱過去問題的影響器赞，那么這個問題就只是錯誤垢袱；如果遇到問題的下一個選擇是妥協(xié)，那么離失敗就不遠(yuǎn)了港柜。

參考資源

• 《設(shè)計與質(zhì)量》
• Material Design 官網(wǎng)
• 站酷（一個設(shè)計師社區(qū)）
• 微信公眾號：海鹽社（haiyans7）（一個設(shè)計師社區(qū)）

推薦閱讀

• 開發(fā)者 | 幾個提高遠(yuǎn)程辦公效率的小建議
• Dart | 徹底理解Dart中的庫與訪問可見性
• Android | 代碼壓縮请契、優(yōu)化與混淆 — ProGuard與R8
• Android | 自定義屬性
• Android | InputManagerService 與輸入事件采集
• 工具集 | Android Studio — 使用 Live Template 輸入模板代碼
• 工具集 | Android Studio — 使用 WI-FI 進(jìn)行 ADB 調(diào)試
• 自媒體 | 使用LaTeX編寫數(shù)學(xué)公式

2020 永遠(yuǎn)不要放棄希望，祝愿大家都能夠平安健康潘懊！武漢加油姚糊！