設(shè)計切圖與頁面標注
時間：2023-10-03 14:54:01 | 來源：網(wǎng)站運營
時間：2023-10-03 14:54:01 來源：網(wǎng)站運營
設(shè)計切圖與頁面標注：
頁面切圖
切圖原則：- 切圖資源尺寸必須為雙數(shù)
- 切圖輸出考慮適配
- 為了提升APP使用速度，盡量降低圖片文件大小
- 可點擊部件應(yīng)當注意其點擊區(qū)域不小于88px
- 可點擊部件要把相關(guān)狀態(tài)都切圖輸出
切片的輸出格式：- 文件：web
- 位圖：png24，,png8，jpg
- 矢量圖：PDF，svg
切圖命名規(guī)則：
組件_類別_功能_狀態(tài)@2x.png
eg:tabbar_icon_home_defalt@2x.png
模塊_類別_功能_狀態(tài)@2x.png
eg:mail_icon_search_pressed@2x.png
2倍圖：icon_alipay@2x.png——iphone4/4s/5/5s/6/6s/7
3倍圖：icon_alipay@3x.png——iphone6p/6sp/7p
mac/window——JPGEmini
windows——PNGoo
mac——ImageAlpha
頁面標注
- 文字：字體大小，字體顏色
- 布局控件屬性：控件寬高，背景顏色，透明度，描邊，圓角大小
- 列表：列表高寬，列表顏色，列表內(nèi)容上下間距
- 間距：控件之間的距離，左右邊距
- 段落文字：字體大小，字體顏色，行距
- 全部屬性：如導(dǎo)航欄文字大小，顏色，左右邊距，默認間距等
Mac——sketch插件measure
windows——pxcook/markman
前段時間在優(yōu)設(shè)網(wǎng)看到一篇文章，作者說他習慣用三個頁面來標注
- 橫向布局：解釋元素左右的內(nèi)外間距和橫向?qū)挾?/li>
- 縱向布局：解釋元素的上下間距和高度
- 視覺樣式：字體、字號、行高、顏色、透明度、圓角……
這樣的標注可能會讓開發(fā)們淚流滿面吧
在線咨詢