Design tips2: 打開設計師之眼-為什麼你就是看不出 1Pixel 的差異
Apr 27th, 2020
為了追求 UI 設計稿到 Production 成果一至性，設計師要奴役工程師到什麼程度？ 這次 design tips 探討 Pixel Pushing 時，透過一些工具輔助，讓工程師在對照設計稿時有更多的 awareness，以及能否一定程度自動化比對的需求？讓工程師、測試團隊對於每次產品在迭代時，能對變動更有信心。
「所以，什麼是設計師之眼？」
UI 設計師對於自己的產品 wireframe / design components 瞭若指掌，而且因為大量時間在微調介面上的每一個 pixel 、每一個元間之間的間距，對於任何文字、顏色、大小，都可以敏銳察覺出任何誤差。
具有這樣能力的人的眼睛，我們稱之為 — 設計師之眼，他是一種天賦，但也帶來不便，不能忍受任何誤差的設計師，是無法理解工程師為什麼看不出交付的成品完成度差異如此之大。為此，我們需要一些外力輔助，讓這些如 Lichin 的普通工程師也能打開設計師之眼。
以下三個工具介紹都是針對 web application 上所使用的工具，跟專職 mobile app 的設計師們說聲抱歉，請繼續奴役你們的工程師們。
Zeplin Pop Out - 疊圖 Overlay the designs on the running website
Zeplin 是個大家都不陌生的交付設計稿工具，其中在 Mac / Window desktop app 的介面左下角，有這個像兩張紙疊一起的 icon — "Pop out" 功能 (網頁版都沒有該功能，linux 用戶甚至沒有 desktop app)，只要按一下就會把目前瀏覽的設計複製一份，並帶有簡單縮放、調整透明度的功能。
Pros 在公司裡工程師、QA，都會使用這個功能，常見的情況是快速疊圖後可以馬上知道物件們的高度與距離跟設計稿有沒有符合，只要凸出來的部分都會顯而易見，如下圖示，工程師再怎麼眼拙，都應該會對於兩畫面疊起來的差異有所察覺。
Cons 因為設計稿僅能呈現固定一個標準尺寸下的狀態，對於有些隨視窗大小彈性調整的元件，如: input field 因應視窗寬度調整應該伸縮、Grid 系統可以容納的物件隨寬度有所增減...這些還是需要面對面討論，或是請工程師依照設計準則去調整。
Prism - 標注紅線 Redline Tool
Prism - 自動化的 Redline (紅線註記) 可以幫助檢查每個網頁上物件的屬性、有沒有使用對的顏色、字體大小...等等，最常使用的情況就是檢查兩物之間的間距，以 Lichin 在公司來說，要確保間距符合 8px base (或是遵循設計師訂下的標準)。
Pros 快速掃過物件們得到數值，讓工程師可以對照這些數值是不是跟設計稿上的一至。Cons 無法在套件檢查下同時讓 UI 呈現 hover, click 時的狀態，想檢查全部狀態會有困難。
Cypress + Percy - 自動化設計比對 Automated Visual Testing
工程師在前兩個工具的輔助下處理介面相關的 Task 應該是更得心應手，但...如何保證產品在迭代中，其餘的頁面是不會因為更新功能的同時，意外地也被更改了呢？難不成每次一個微小的變動，設計師、QA、PM 就要開始抓蟲大會，又重頭到尾把整個產品頁面逐一審過？超級浪費時間啊 !
這裡介紹這概念 — Automated Visual Testing，各位設計師可以在讀完之後跟工程師討論看看 :
Automated: 自動化，讓機器可以自動根據 設定好的方式 來逐一審查頁面
Visual: 視覺差異，比較顏色 / 字體 / 間距...等等的差異
Testing: 測試，工程師在工作上會使用的手段，確保程式碼經過一些流程的驗證，是符合規格的
間單來說測試流程中，在一些重要的畫面加入拍照功能，藉由自動化比圖的方式，把錯誤全部揪出來，以下圖範例，這是 Lichin 在自動化模擬使用者輸入帳號密碼登入的流程，在這流程中希望拍下輸入前的樣子:
今天如果另外一位工程師在做登入頁面輸入寬度的調整，那這次的版本截圖就會被拿來跟之前的版本做比較，一比之下...發現 Logo 位置完全跑掉了 顯然變動修改到不必要的地方，那大家就更能掌握到這次 UI fix 還沒結束，還需要調整。
以上是一個簡單的範例，在複雜一點的情境，我們可能一次會截下 50~100 張圖。自動化帶來的好處就是它比人還古板，該審視的不會省下，而且也都會用很鮮明的顏色標出差異，十分方便！如果對於以上工具好奇的朋友，可以初步了解一下，或是看看整合兩者的文件:
小結
你認為自己有設計師之眼嗎？為了達到符合設計稿，你做了哪些努力或是有哪些好的習慣呢？這些工具畢盡都是輔助，最好的方式還是 多多跟互相溝通，去了解設計 / 實作時的想法是什麼，不懂或是不適應的是什麼？設計師跟工程師是一體兩面，有好的合作，也才會有優良的產品體驗產生 📌
Back
Designtips.today
