0. 功能簡介

先描述一個這樣的場景：一個團隊用PS來設(shè)計UI。完成后，先把最終效果發(fā)出來，然后用工具在設(shè)計稿上標(biāo)注各個部分的大小、距離、顏色和字體等。切好貼圖，通過svn之類交給開發(fā)。

UI設(shè)計過程

這個場景中存在的問題：

• 上述在設(shè)計稿上所標(biāo)注的信息，基本上，.psd文件中已經(jīng)有這些信息了。只是你所用的工具選擇了先將它導(dǎo)出或轉(zhuǎn)換成png，再由設(shè)計師在這張png上做標(biāo)注。

• 有些工具還支持自動測算距離。像兩行文字這種，沒有明顯邊界，會不精確

  
  
  沒有明顯邊界
• 字體和切圖是沒法從一張位圖中測算出來的，因為在轉(zhuǎn)換成位圖時已經(jīng)丟掉了，通常是設(shè)計師手工加上去的。
• 浪費設(shè)計師的時間。
• 很多團隊的設(shè)計師都很忙，有時候還沒時間給開發(fā)出標(biāo)尺，讓開發(fā)先做著，等設(shè)計師有空了，再提供標(biāo)尺，然后開發(fā)再修改。等于做了一遍，又改了一遍。
• 你這里怎么又沒標(biāo)？增加溝通成本

• 作為開發(fā)，當(dāng)你在一堆切圖里找你要的切圖：

  
  
  你懂我在說什么，這個列表還有十倍長

對不起，拿錯圖了

解決這些問題的工具在這里：NoMark

1. 打開

瀏覽文件，或通過歷史記錄來打開

Open.png

2. 圖層屬性

點擊圖層，會顯示大小

大小

移動到其他圖層上，顯示與選中圖層的距離

距離

大小和距離的數(shù)值和單位跟選擇的Mockup Scale有關(guān)。通過右上角設(shè)置后面會解釋

右側(cè)顯示選中圖層的屬性，文本則顯示字體信息，非文本則顯示大小和導(dǎo)出選項

字體屬性

普通屬性和導(dǎo)出

3. 導(dǎo)出

導(dǎo)入選中

• 如何導(dǎo)出跟導(dǎo)出設(shè)置、選中的Mockup Scale有關(guān)。
• 默認導(dǎo)出（包括拖放到XCode或Finder）文件名為選中的圖層名稱，可以修改。再加上后綴，如：iOS的@2x,@3x

4. Mockup Scale

Mockup Scale是指當(dāng)前打開的這張設(shè)計稿的縮放。

我們舉例來理解：
設(shè)計稿750x1334，頭像大小為110像素x110像素。Mockup Scale選擇iOS @2x，則顯示為55pt x 55pt。如果導(dǎo)出設(shè)置是同時導(dǎo)出@1x、@2x和@3x，則導(dǎo)出結(jié)果分別為別為 頭像.png(55像素x55像素)，頭像@2x.png(110像素x110像素)，頭像@3x.png(165像素x165像素)。你會留意到，頭像@2x.png的分辨率和它在設(shè)計稿上的分辨率一樣是 110像素x110像素。這是因為你設(shè)置了這張設(shè)計稿的縮放為@2x，其它大小都是以這個為標(biāo)準(zhǔn)來計算。同理，如果Mock Scale選擇iOS@3x，那那么頭像@3x.png為110像素x110像素。

把頭像放在界面上，假設(shè)不設(shè)置約束（Constraint），最終顯示為55pt，在@2x屏上顯示為110像素。假設(shè)所有的距離和大小都按這個原則，那么開發(fā)這邊壘出來的界面，最終界面在iPhone 6上截屏（同樣為750x1334）與設(shè)計稿一模一樣。也可以理解為：把設(shè)計稿放在iPhone 6上顯示，即為界面最終效果。大多數(shù)情況下，這就是你要的。
當(dāng)然這只是參考原則，你可以有不一樣的策略。

一個建議是，設(shè)計師用的手機是多大分辨率，就用多大分辨率來做設(shè)計稿，比如用iPhone 6就用750 x 1334 像素來做。這樣的好處是，你用你的手機全屏查看你的設(shè)計，即為最終效果。相當(dāng)于你可以實時看到你的設(shè)計最終效果。減少最終在設(shè)備上渲染出來，這里字體太大，哪里又太小啦看不見。當(dāng)然，按你的設(shè)計最終在小屏上能不能顯示得了，在更大屏上又是怎樣，這就要靠一些你的經(jīng)驗判斷了。開發(fā)這邊，打開之后選擇Mockup Scale為@2x，NoMark會記住你的選擇。

5. 其他

像取色這種功能，自己嘗試一下吧

NoMark下載地址