本文為曾開(kāi)發(fā)工具...僅作為回顧總結(jié)
- TTI 頁(yè)面可交互時(shí)間監(jiān)控
- Flutter FPS 監(jiān)控
- （本文）顏色標(biāo)尺
- 組件抓手（待填坑）
- 錄屏分析
- 調(diào)試工具重構(gòu)
舉兩個(gè)常見(jiàn)的UAT場(chǎng)景
【場(chǎng)景1】:
設(shè)計(jì)：間隔應(yīng)該是10px，你多了1px
開(kāi)發(fā)：我寫的就是10px，不信你看
設(shè)計(jì)：[一張帶著刻度的截圖]
開(kāi)發(fā)：??？哦哦哦，明白了，這個(gè)控件本身有邊距
【場(chǎng)景2】:
設(shè)計(jì)：這個(gè)顏色不對(duì)
開(kāi)發(fā)：哪里不對(duì)，這里之前蓋了個(gè)alpha為0.1的漸變視圖，你看到的是你疊加起來(lái)的顏色
設(shè)計(jì)：這樣啊，那我改一下
開(kāi)發(fā)：......
每次進(jìn)入U(xiǎn)AT環(huán)節(jié)時(shí)，總會(huì)與設(shè)計(jì)進(jìn)行拉鋸戰(zhàn)。但是更多時(shí)候是開(kāi)發(fā)沒(méi)有一套快捷的UAT自測(cè)工具。
工具介紹
【背景】：
開(kāi)發(fā)階段與UAT階段均缺少一個(gè)可供參考的測(cè)量工具，尤其在UAT環(huán)節(jié)，設(shè)計(jì)標(biāo)注不準(zhǔn)確非實(shí)際需糾偏的數(shù)值，開(kāi)發(fā)也無(wú)法對(duì)修改效果進(jìn)行驗(yàn)證，經(jīng)常UAT數(shù)輪后問(wèn)題仍未解決。
【目標(biāo)】：
實(shí)現(xiàn)一款像素級(jí)的UI測(cè)量小工具、對(duì)大小距離顏色等常規(guī)的UAT元素進(jìn)行測(cè)量與提取。
【設(shè)計(jì)】：
通過(guò)兩種模式去最大化兼容使用場(chǎng)景（標(biāo)尺模式+放大模式）
【支持所有技術(shù)棧使用】：
使用Native開(kāi)發(fā)
標(biāo)尺模式
標(biāo)尺模式設(shè)計(jì)為一個(gè)全局覆蓋在屏幕上的小尺子，可拖動(dòng)至任意位置進(jìn)行測(cè)量，主要用于常規(guī)的尺寸測(cè)量（大小、距離），效果如圖：
具體實(shí)現(xiàn)上沒(méi)有難度，做好交互，主要的工作量都在放大模式。
放大模式
因存在非常細(xì)微的調(diào)整，例如0.5px、色值偏差這樣的場(chǎng)景，需要可進(jìn)行顏色提取的放大模式。在放大模式下可對(duì)界面進(jìn)行放大，提取對(duì)應(yīng)像素的色值。
交互上參考了很多APP中的圖片編輯頁(yè)的交互模式，可放大、拖動(dòng)，在這基礎(chǔ)上加上可同步放大系數(shù)的刻度線。
色值提取需要兼容例如0.5px像素的線這類非常細(xì)小的場(chǎng)景，需要放大的倍數(shù)較大。實(shí)際使用中，放大模式的縮放系數(shù)達(dá)到5倍時(shí)，已完全滿足尺寸場(chǎng)景的使用，整體支持更大的縮放系數(shù)（10-20倍）沒(méi)有任何意義。色值的提取是像素級(jí)非常小的范圍，在放大模式下加一個(gè)獨(dú)立的色值提取器可兼顧兩者，最終效果如圖所示。
坐標(biāo)系聯(lián)動(dòng)
放大模式下的標(biāo)尺與色值提取器是聯(lián)動(dòng)的，縮放系數(shù)不同（提取器縮放系數(shù)為標(biāo)尺的2倍）。兩個(gè)坐標(biāo)系的“縮放系數(shù)”、“邊界”、“大小”均不同，在放大模式下坐標(biāo)系還可區(qū)分出“實(shí)際坐標(biāo)系”與“可見(jiàn)坐標(biāo)系”，均會(huì)影響到我們直接去取某個(gè)點(diǎn)的坐標(biāo)。
排除掉所有干擾因素，僅需關(guān)注兩個(gè)坐標(biāo)系的相同點(diǎn)：“中心點(diǎn)”。使用一個(gè)坐標(biāo)系的中心點(diǎn)去轉(zhuǎn)換在縮放模式下并不可行，需以“坐標(biāo)系中心點(diǎn)對(duì)應(yīng)的非縮放視圖坐標(biāo)”作為兩坐標(biāo)系的聯(lián)動(dòng)參數(shù)。
總結(jié)
工具本身沒(méi)什么難度，某次迭代結(jié)束間隙抽空完成，實(shí)際使用后效果還挺好，支持全業(yè)務(wù)線、全技術(shù)棧使用。給UAT階段提供了一個(gè)易用且可靠的工具，極大降低了開(kāi)發(fā)與設(shè)計(jì)的溝通成本，提升了UAT階段的效率。
