怎樣標注頁面中的關鍵元素？【UI設計】

更新時間:2022年03月18日14時36分來源:傳智教育瀏覽次數(shù):

什么是標注?

標注含義是標示注記。需要將整個界面中關鍵元素的相關參數(shù)標注出來，前端工程師會參照標注圖進行書寫，相當于給前端工程師一條清晰的編程路線，力求最終實現(xiàn)效果和設計基準圖一致。圖7-5所示為需要標注的內容。

在標注頁面時，把頁面可以想象為不同大小的塊元素，先將大體的框架標注。在一份設計稿中，需要標注的內容包含元素的寬和高、板塊與板塊間的距離和元素與元素間的距離、線條顏色值和純色塊顏色值、文字字號和字體以及文字顏色都需要進行標注，如圖7-6所示。需要遵循符合工程師的開發(fā)邏輯，將復雜的頁面合理劃分，信息盡量不要擠在一起。

標注方法

1、使用PxCook標注法

直接把需要標注PSD文件拖拽到PxCook軟件中，PxCook將會在工具內解析PSD文件，使用智能標注可以通過簡單的點、選、拖、放就可以對設計元素的尺寸、元素距離、文字樣式、顏色等進行標注。通過智能標注得到的標注信息，不僅會隨著設計基準圖的變化自動更新，還可修改已經標注好的數(shù)值，避免因為幾像素的誤差而重新修改設計基準圖。