在進行APP切圖的前,我們需要做什么?

1 評論 8114 瀏覽 24 收藏 3 分鐘

切圖是個技術(shù)活,小伙伴們千萬不能忽視切圖的重要性噢,前文介紹了設(shè)計的七大元素,那么我們現(xiàn)在來看看在切圖之前,我們需要做什么呢?。

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è)計著]

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. UI設(shè)計師:快速完成交付、一鍵上傳Sketch、PS、XD的設(shè)計稿,一鍵下載切圖(安卓,IOS,Web),智能標注(配合尺寸,區(qū)域,文字,坐標標注),支持切圖自動壓縮,一鍵匹配所有平臺尺寸,自動生成UI設(shè)計規(guī)范;

    前端開發(fā):輕松查看智能標注,可顯示百分比標注,查看相同元素,復制CSS等;

    產(chǎn)品經(jīng)理:直觀表達需求、快速制作交互原型,支持多種手勢交互、動畫特效,上傳各類型文檔進行在線預覽(Axure,justinmind,office,confluence等);

    來自四川 回復