0. 功能簡(jiǎn)介
先描述一個(gè)這樣的場(chǎng)景：一個(gè)團(tuán)隊(duì)用PS來(lái)設(shè)計(jì)UI噩峦。完成后锭沟，先把最終效果發(fā)出來(lái)，然后用工具在設(shè)計(jì)稿上標(biāo)注各個(gè)部分的大小识补、距離族淮、顏色和字體等。切好貼圖凭涂，通過(guò)svn之類交給開(kāi)發(fā)祝辣。
這個(gè)場(chǎng)景中存在的問(wèn)題：
- 上述在設(shè)計(jì)稿上所標(biāo)注的信息，基本上切油，.psd文件中已經(jīng)有這些信息了蝙斜。只是你所用的工具選擇了先將它導(dǎo)出或轉(zhuǎn)換成png，再由設(shè)計(jì)師在這張png上做標(biāo)注澎胡。
-
有些工具還支持自動(dòng)測(cè)算距離孕荠。像兩行文字這種，沒(méi)有明顯邊界攻谁，會(huì)不精確
沒(méi)有明顯邊界 - 字體和切圖是沒(méi)法從一張位圖中測(cè)算出來(lái)的稚伍，因?yàn)樵谵D(zhuǎn)換成位圖時(shí)已經(jīng)丟掉了，通常是設(shè)計(jì)師手工加上去的戚宦。
- 浪費(fèi)設(shè)計(jì)師的時(shí)間个曙。
- 很多團(tuán)隊(duì)的設(shè)計(jì)師都很忙，有時(shí)候還沒(méi)時(shí)間給開(kāi)發(fā)出標(biāo)尺受楼，讓開(kāi)發(fā)先做著垦搬，等設(shè)計(jì)師有空了，再提供標(biāo)尺艳汽，然后開(kāi)發(fā)再修改猴贰。等于做了一遍，又改了一遍骚灸。
- 你這里怎么又沒(méi)標(biāo)糟趾？增加溝通成本
-
作為開(kāi)發(fā)，當(dāng)你在一堆切圖里找你要的切圖：
你懂我在說(shuō)什么甚牲，這個(gè)列表還有十倍長(zhǎng)
解決這些問(wèn)題的工具在這里：NoMark
1. 打開(kāi)
瀏覽文件，或通過(guò)歷史記錄來(lái)打開(kāi)
2. 圖層屬性
點(diǎn)擊圖層丈钙，會(huì)顯示大小
移動(dòng)到其他圖層上非驮，顯示與選中圖層的距離
大小和距離的數(shù)值和單位跟選擇的Mockup Scale有關(guān)。通過(guò)右上角設(shè)置后面會(huì)解釋
右側(cè)顯示選中圖層的屬性雏赦，文本則顯示字體信息劫笙，非文本則顯示大小和導(dǎo)出選項(xiàng)
3. 導(dǎo)出
- 如何導(dǎo)出跟導(dǎo)出設(shè)置芙扎、選中的Mockup Scale有關(guān)。
- 默認(rèn)導(dǎo)出（包括拖放到XCode或Finder）文件名為選中的圖層名稱填大，可以修改戒洼。再加上后綴，如：iOS的@2x,@3x
4. Mockup Scale
Mockup Scale是指當(dāng)前打開(kāi)的這張?jiān)O(shè)計(jì)稿的縮放允华。
我們舉例來(lái)理解：
設(shè)計(jì)稿750x1334圈浇，頭像大小為110像素x110像素。Mockup Scale選擇iOS @2x靴寂，則顯示為55pt x 55pt磷蜀。如果導(dǎo)出設(shè)置是同時(shí)導(dǎo)出@1x、@2x和@3x百炬，則導(dǎo)出結(jié)果分別為別為 頭像.png(55像素x55像素)褐隆，頭像@2x.png(110像素x110像素)，頭像@3x.png(165像素x165像素)剖踊。你會(huì)留意到庶弃，頭像@2x.png的分辨率和它在設(shè)計(jì)稿上的分辨率一樣是 110像素x110像素。這是因?yàn)槟阍O(shè)置了這張?jiān)O(shè)計(jì)稿的縮放為@2x蜜宪，其它大小都是以這個(gè)為標(biāo)準(zhǔn)來(lái)計(jì)算虫埂。同理，如果Mock Scale選擇iOS@3x圃验，那那么頭像@3x.png為110像素x110像素掉伏。
把頭像放在界面上，假設(shè)不設(shè)置約束（Constraint）澳窑，最終顯示為55pt斧散，在@2x屏上顯示為110像素。假設(shè)所有的距離和大小都按這個(gè)原則摊聋，那么開(kāi)發(fā)這邊壘出來(lái)的界面鸡捐，最終界面在iPhone 6上截屏（同樣為750x1334）與設(shè)計(jì)稿一模一樣。也可以理解為：把設(shè)計(jì)稿放在iPhone 6上顯示麻裁，即為界面最終效果箍镜。大多數(shù)情況下，這就是你要的煎源。
當(dāng)然這只是參考原則色迂，你可以有不一樣的策略。
一個(gè)建議是手销，設(shè)計(jì)師用的手機(jī)是多大分辨率歇僧，就用多大分辨率來(lái)做設(shè)計(jì)稿，比如用iPhone 6就用750 x 1334 像素來(lái)做锋拖。這樣的好處是诈悍，你用你的手機(jī)全屏查看你的設(shè)計(jì)祸轮，即為最終效果。相當(dāng)于你可以實(shí)時(shí)看到你的設(shè)計(jì)最終效果侥钳。減少最終在設(shè)備上渲染出來(lái)适袜，這里字體太大，哪里又太小啦看不見(jiàn)慕趴。當(dāng)然痪蝇，按你的設(shè)計(jì)最終在小屏上能不能顯示得了鄙陡，在更大屏上又是怎樣冕房，這就要靠一些你的經(jīng)驗(yàn)判斷了。開(kāi)發(fā)這邊趁矾，打開(kāi)之后選擇Mockup Scale為@2x耙册，NoMark會(huì)記住你的選擇。
5. 其他
像取色這種功能毫捣，自己嘗試一下吧
