1、? 和客戶端的技術(shù)溝通好
用不同的框架來實現(xiàn)的時候,圖會有不一樣的切法。例如Tabbar是連背景一起切還是單獨把icon做成背景透明的,文字是放在圖里還是后面加字。
2、? 如何切icon式按鈕
有一些小的icon式按鈕,不能只切到icon邊緣,要考慮到最終實現(xiàn)的時候,是把這個圖片做成按鈕,和用戶交互。所以必須要多留一些透明的邊,讓能點擊的圖片在88×88以上,這樣用戶才保證比較好點到。
3、? 圖片存儲格式
如果可以用PNG24就不用PNG32,如果可以用PNG8就不用PNG32。并且用Fireworks優(yōu)化大小。
4、? 對于不改變可見圖形而又需要加大點擊區(qū)域的圖怎么切?
切圖的時候建議在可見圖形的四周都加上1像素的透明,這是為了放大拉伸而不產(chǎn)生可見區(qū)域的圖像失真。
5、? 切圖的高度
對于一個通用的背景圖,如文字圓角邊框背景,那么切圖的時候并不是效果圖上有多高就切多高,為了通用而是只需切一行文字的高度就可以了。不過這也不是絕對的,準確的說應該切的高度H=paddingTop+textHeight+paddingBottom,及文字相對背景的上邊距+一行文字的高度+文字相對背景的下邊距。
6、? 切圖的寬度
如果是一個通用的背景圖,那么他的寬度應該是他在效果圖中的最小寬度,也就是說這個背景可能在多處使用到了,就取最小的那個寬度就可以了。比較麻煩的是鋪滿全屏的時候,這就需要看看你做的效果圖的寬屏寬度,所以說做效果圖的時候最好是做小屏幕的效果圖。有人可能會問點9的圖不是可以拉伸、壓縮嗎,為什么需要參考最小的寬度呢?根據(jù)個人經(jīng)驗發(fā)現(xiàn),一個大圖在屏幕小的情況下點9圖中拉伸的部分會變得顏色更深。
本文來源:微信[設(shè)計著]
UI設(shè)計師:快速完成交付、一鍵上傳Sketch、PS、XD的設(shè)計稿,一鍵下載切圖(安卓,IOS,Web),智能標注(配合尺寸,區(qū)域,文字,坐標標注),支持切圖自動壓縮,一鍵匹配所有平臺尺寸,自動生成UI設(shè)計規(guī)范;
前端開發(fā):輕松查看智能標注,可顯示百分比標注,查看相同元素,復制CSS等;
產(chǎn)品經(jīng)理:直觀表達需求、快速制作交互原型,支持多種手勢交互、動畫特效,上傳各類型文檔進行在線預覽(Axure,justinmind,office,confluence等);