先給大家講個(gè)場(chǎng)景苗缩。
年底了饵蒂，公司開始趕產(chǎn)品上線。
上線時(shí)間緊促酱讶，導(dǎo)致從產(chǎn)品到設(shè)計(jì)到開發(fā)的時(shí)間壓縮得可憐退盯，產(chǎn)品改需求，設(shè)計(jì)開始哧哧改泻肯，好不容易畫完圖渊迁，做好標(biāo)注圖后，打個(gè)包丟給前端软免。
前端開發(fā)完后宫纬，測(cè)試小姑娘開始測(cè)試，UI拿到前端做好的頁面驗(yàn)收還原度——WTF!!???這特么是自己畫粗來的頁面嗎膏萧？果斷驗(yàn)收不合適漓骚。前端這邊委屈了，我分明是按你的設(shè)計(jì)圖寫的代碼榛泛，為什么最后區(qū)別這么大蝌蹂？測(cè)試小姑娘夾在設(shè)計(jì)和前端之間，左右為難曹锨。產(chǎn)品要上線孤个，視覺過不了關(guān)，怎么辦沛简？怎么辦齐鲤？
造成這種現(xiàn)象出現(xiàn)的原因，分析一下大概有以下幾點(diǎn)：
從UI設(shè)計(jì)來說：
1椒楣、信馬由韁给郊，把界面UI設(shè)計(jì)當(dāng)作畫布任意揮灑，完全不考慮實(shí)現(xiàn)的難度捧灰；
2淆九、標(biāo)注圖不全，太信賴前端的理解能力；
3炭庙、反復(fù)修改設(shè)計(jì)饲窿，故意為難前端。
從前端開發(fā)來說：
1焕蹄、時(shí)間緊任務(wù)重逾雄，沒辦法一張一張看標(biāo)注圖；
2擦盾、沒節(jié)操嘲驾，想怎么寫就怎么寫淌哟，反正最后要上線迹卢，細(xì)不細(xì)致都一樣；
3徒仓、不知道如何解決腐碱，內(nèi)向不肯和UI溝通找到解決方案。
從測(cè)試角度來說：
1掉弛、測(cè)試混亂症见，測(cè)功能時(shí)提UIbug；
2殃饿、測(cè)試頁面還原時(shí)谋作，提UI不細(xì)致，用“請(qǐng)參照UI設(shè)計(jì)稿”概括一切問題乎芳。
暫且當(dāng)作大家都有百分百的職業(yè)操守遵蚜，這種情況出現(xiàn)的頻率依舊很高。如何解決呢奈惑？從根本上說吭净，這種現(xiàn)象的出現(xiàn)絕大部分原因是因?yàn)楣ぷ髁鞒毯鸵?guī)范的不遵守。畫了一張圖肴甸，以一名設(shè)計(jì)師的角度談一談怎樣在時(shí)間緊的情況下寂殉，將頁面失真降到最低。
A.設(shè)計(jì)開始前原在，分析所有頁面友扰，將元素歸類制作一套UI kit撕逼利器（推薦用AI或者Sketch制作一個(gè)模板，方便反復(fù)使用）庶柿。
好處：
1村怪、保持設(shè)計(jì)統(tǒng)一；
2澳泵、新加頁面可按照已有kit拼起來（活動(dòng)及專題頁另談）实愚；
3、不必每張效果圖重復(fù)標(biāo)注；
4腊敲、放一張psd里击喂，ps CC版本切圖便捷。
UI kit里包含的內(nèi)容：
1碰辅、出現(xiàn)顏色色值
2懂昂、文字樣式（一套設(shè)計(jì)里文字樣式最好不要超過3種，文字字號(hào)不要超過5種）没宾。
3凌彬、控件列表（以及大小標(biāo)注）
輸入框樣式
按鈕樣式（可點(diǎn)擊樣式，不可點(diǎn)擊樣式循衰，按下樣式）
表單樣式
警告框樣式
Tab欄樣式
提示樣式
進(jìn)度條樣式
加載樣式等等…（視具體情況而定）
4铲敛、icon列表
B.間隔統(tǒng)一，同一頁面的不同狀態(tài)（例如会钝，已留言和未留言的頁面伐蒋，相同區(qū)域間隔應(yīng)該相同）
1、文字塊間距
2迁酸、圖文間距
3先鱼、標(biāo)題與文字間距
4、圖片間距
5奸鬓、icon與文字間距
6焙畔、文字與表單間距
7、充分運(yùn)用柵格系統(tǒng)
綜上所述串远，最后UI設(shè)計(jì)交付給前端的文件應(yīng)該包括以下幾樣宏多，缺一不可
1、設(shè)計(jì)規(guī)范（UI kit）
2抑淫、界面效果圖
3绷落、標(biāo)注圖
4、與前端溝通后的切圖文件始苇。
說完和前端的配合砌烁，再說說和UT測(cè)試的配合。測(cè)試第一輪往往是功能性測(cè)試催式，以及邏輯性測(cè)試函喉。這個(gè)時(shí)候測(cè)試和前端往往沒有時(shí)間和精力去顧及UI還原。
但這個(gè)時(shí)候荣月，測(cè)試可以測(cè)試界面布局管呵。如果UI界面布局都有問題（背景顏色差異巨大的，該有的元素丟失）哺窄，前端的頁面基本可以打回重做捐下。
開始測(cè)試頁面還原應(yīng)該從哪里入手账锹？
從設(shè)計(jì)給出的建議是：文字?圖片 icon 背景?線框?顏色?間距（詳情見圖）
UI還原任重而道遠(yuǎn)啊坷襟！
