上篇介紹了切圖的框架,這篇介紹一下如何高效的切圖標。
界面的圖標分為兩種:功能型圖標和裝飾型圖標。
簡單解釋一下兩種圖標功能型圖標是有觸發效果的圖標;裝飾型圖標僅用于美化頁面,提高文字可讀性。
1. 圖標歸類
將圖標按照上述兩種圖標進行歸類,這樣能夠看出整個設計中所有圖標是否統一,也防止露掉某個圖標。
2. 切圖
功能型圖標:APP端切圖范圍至少為88px*88px(@2x,其他倍率自行換算);PC端同裝飾型圖標
裝飾型圖標:根據圖標大小至少長寬增加2px
3. 命名
建議將圖標命名為“模塊_類別_功能_狀態”,當然,也可以根據自己喜好進行命名(有識別度的命名方式均可)
這種分類切圖的方法只是一點小小的經驗,在工作中還是多和前端工程師溝通,尋找兩人共同認可的方法。
王旋子同學