怎樣標注頁面中的關(guān)鍵元素？【UI設(shè)計】

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

什么是標注?

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

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

標注方法

1、使用PxCook標注法

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