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

什么是標(biāo)注?

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

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

標(biāo)注方法

1、使用PxCook標(biāo)注法

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

2、“標(biāo)你妹啊”標(biāo)注法

“標(biāo)你妹啊”相對PxCook而言更加簡單粗暴，它直接把源文件PSD格式上傳到官網(wǎng)就可以了，然后將生成的鏈接發(fā)送到前端工程師手中，前端工程師自動獲取所需標(biāo)注。唯一的缺點就是設(shè)計基準(zhǔn)圖或許有遺漏的一些問題，不能進(jìn)行二次修改標(biāo)注。

PS:圖層切圖、切片切圖、PS 插件切圖

ios和安卓設(shè)計怎么適配？【UI設(shè)計師須知】

UI設(shè)計必懂的常見術(shù)語你都了解嗎？

AI立體字標(biāo)題效果制作教程【UI設(shè)計】

傳智教育UI/UE設(shè)計培訓(xùn)課程