2018最新UI設(shè)計(jì)切圖標(biāo)注篇

時(shí)間：2023-09-05 11:00:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-05 11:00:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

2018最新UI設(shè)計(jì)切圖標(biāo)注篇：2018最新UI設(shè)計(jì)切圖標(biāo)注篇

1、切圖工具

Cutterman，一款PS的插件，切圖非常方便，但不支持綠色免安裝版本PS，而且對(duì)PS版本要求比較高，針對(duì)CS 6的已經(jīng)不維護(hù)更新了。推薦安裝官方完整版PS CC及以上版本，目前cutterman最新版為3.2.0版本。







Assistor PS 也是一款PS的切圖標(biāo)注插件，也被譽(yù)為神器；我使用了下，感還可以，但是切圖和標(biāo)注上體驗(yàn)還是不高，但是Assistor PS的其他輔助功能還是很不錯(cuò)的，比如參考線輔助，圓角大小，磁鐵功能。

2、標(biāo)注工具

PxCook（像素大廚），是一款切圖標(biāo)注設(shè)計(jì)工具軟件。自2.0.0版本開始，支持PSD文件的文字，顏色，距離自動(dòng)智能識(shí)別。

優(yōu)點(diǎn)在于將標(biāo)注、切圖這兩項(xiàng)設(shè)計(jì)完稿后集成在一個(gè)軟件內(nèi)完成，支持Windows和Mac雙平臺(tái)。標(biāo)注功能包括：支持長(zhǎng)度，顏色，區(qū)域，文字注釋；從2.0.0版本開始，整體效率有了很大的提高，值得推薦的是自動(dòng)智能識(shí)別標(biāo)注。







Parker，和cutterman是同一家的，Parker能夠自動(dòng)計(jì)算尺寸、距離、文字大小、陰影、描邊圓角、行高等信息，并按照你的需要進(jìn)行標(biāo)注, 它極大節(jié)省你標(biāo)注的時(shí)間，大幅度提升設(shè)計(jì)效率。（Parker是收費(fèi)軟件）







Mark Man，也是一款高效的設(shè)計(jì)稿標(biāo)注工具，支持 Win / Mac, 可免費(fèi)使用基礎(chǔ)功能，免費(fèi)版的在體驗(yàn)上也是差強(qiáng)人意，畢竟是免費(fèi)的，如果需要高級(jí)功能也是需要付費(fèi)的60RMB。







以上工具各有優(yōu)點(diǎn)和缺點(diǎn)，在選擇上主要還是看個(gè)人的習(xí)慣，哪個(gè)用著順手就選擇哪個(gè)。

3、頁(yè)面標(biāo)注

標(biāo)注是非常重要的，開發(fā)哥哥能不能完美的的還原設(shè)計(jì)稿，很大一部分取決于我們的標(biāo)注；如果不清楚你該怎么標(biāo)，一定要和開發(fā)哥哥溝通！

溝通是非常有效解決問(wèn)題的途徑！

在這里我大致的說(shuō)一下我的標(biāo)注習(xí)慣，不需要將每一張效果圖都進(jìn)行標(biāo)注，你標(biāo)注的頁(yè)面能保證開發(fā)能把每個(gè)頁(yè)面都能順利進(jìn)行就可以了。

我拿我標(biāo)注過(guò)的頁(yè)面做個(gè)示例：







我們從上面的標(biāo)注圖可以看出，需要標(biāo)注的內(nèi)容有：

1. 文字：字體大小、字體顏色
2. 布局控件屬性：控件寬高、背景色、透明度、描邊、圓角大小
3. 列表：列表高度、列表顏色、列表內(nèi)內(nèi)容上下間距
4. 間距：控件之間的距離、左右邊距
5. 段落文字：字體大小、字體顏色、行距
6. 全部屬性：如導(dǎo)航欄文字大小、顏色，左右邊距，默認(rèn)間距等，你可以提前跟開發(fā)哥哥說(shuō)好，不用標(biāo)注。

所有的頁(yè)面標(biāo)注總結(jié)起來(lái)就是：標(biāo)文字，標(biāo)間距，標(biāo)大小，標(biāo)區(qū)域

注：標(biāo)注顏色格式是使用16進(jìn)制（如：#FF0000），還是RGB（255,0,0）？你需要和開發(fā)哥哥商量一下，開他的開發(fā)習(xí)慣，一般采用16進(jìn)制色值就好了。

4、界面切圖

我還是拿圖舉例來(lái)說(shuō)明：（有圖有真相哈）

• icon_alipay.png→iPhone 1-3代的手機(jī)(已經(jīng)不考慮了)
• icon_alipay@2x.png→iPhone4/4S/5/5S/6/6S/7對(duì)應(yīng)尺寸，這就是我們通常所說(shuō)的2倍圖
• icon_alipay@3x.png→iPhone6P/6SP/7P使用的尺寸，這就是3倍圖

可以簡(jiǎn)單的理解為倍數(shù)關(guān)系，如果你使用750x1334px（iPhone 6/6S/7）尺寸做設(shè)計(jì)稿，那么切片輸出就是@2x，縮小2倍就是@1x，擴(kuò)大1.5倍就是@3x了。

我總結(jié)了一些切圖中常常遇到的問(wèn)題：

（1）到底哪些資源需要切圖，哪些不需要切圖？

• 只要是無(wú)法用代碼來(lái)實(shí)現(xiàn)和表達(dá)出來(lái)的，就需要切圖
• 如果實(shí)在不清楚要不要切圖，多和開發(fā)溝通，他會(huì)告訴你哪些是需要你切圖的

（2）切圖需要切幾套？（這里我只以iOS作為標(biāo)準(zhǔn)，安卓下期再說(shuō)）

• 理論上，我們需要切3套圖，是為了更好的適配。
• 在實(shí)際工作中，iOS只需要切2套圖就可以，分別為：@2x和@3x

（3）切圖該怎么命名，不會(huì)命名怎么辦？

切圖是需要注意幾點(diǎn)：

1. 切圖輸出格式必須為png24位、png8位、jpg格3種格式
2. 同一模塊內(nèi)，切圖大小應(yīng)保持一致
3. 切圖輸出大小必須保持為偶數(shù)
4. 為了減小包的大小，所有切圖盡量壓縮后在給開發(fā)

視覺調(diào)整優(yōu)化文檔，要一目了然，需要注明和效果圖不一樣的地方是哪里，應(yīng)該改成什么樣，是iOS調(diào)整、Android調(diào)整還是h5調(diào)整等，輸出為png和jpg圖片格式，最好輸出為PDF格式，開發(fā)看起來(lái)也方便，比如你寫了一個(gè)顏色值，開發(fā)就可以直接復(fù)制了。




輸出基礎(chǔ)控件元素規(guī)范

包括（顏色、文字、圖標(biāo)、蒙板、投影、按鈕、輸入框、或個(gè)別控件），

規(guī)范是一個(gè)龐大而繁瑣，極需耐心的工作；過(guò)程中注重每一個(gè)細(xì)節(jié)的精準(zhǔn)與合理性。




規(guī)范的切圖與精確的標(biāo)注

我們的切圖和標(biāo)注，是否規(guī)范和精確，直接影響視覺效果的還原度，所以切圖和標(biāo)注一定要做的細(xì)致，這樣更加有利于提升還原度










iOS開發(fā)工程師需要提供的iCON圖標(biāo)只需要幾個(gè)尺寸:

1024×1024 Retina APP Icon for APP Store(高清屏的APP Store)
512×512 APP Icon for APP Store（普通屏幕的APP Store）
120×120 6以及以下的主屏幕尺寸
180×180 6 plus的主屏幕圖標(biāo)尺寸
58×58 Settings on devices with retina display
87×87 Settings on iPhone 6 Plus
80×80 Spotlight on devices with retina display

注意：iOS系統(tǒng)可以自動(dòng)把圖片裁剪為圓角，所以提交圖標(biāo)的時(shí)候，你只需要提交正方形的PNG格式即可。




提供的LaunchImage(啟動(dòng)頁(yè))的各項(xiàng)尺寸，我們需要提供4種尺寸給的開發(fā)工程師：

640x960px iPhone 4/4s
640x1136px iPhone 5/5s/5c/SE
750x1334px iPhone 6/6S/7
1242x2208px iPhone 6 plus/6S plus/7 plus
2208x1242px iPhone 6 plus/6S plus/7 plus的橫屏尺寸，如果我們的APP支持橫屏模式，你就需要做一張橫屏的啟動(dòng)頁(yè)。

注意：?jiǎn)?dòng)頁(yè)面一定要是PNG格式的，建議給開發(fā)之前將圖片全部壓縮一下。

現(xiàn)在APP STORE 介紹的截圖商店頁(yè)只需做一套尺寸：750x1334px，就ok了