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

什么是標(biāo)注?

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

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

標(biāo)注方法

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

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

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

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

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

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

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

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

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