為何SKETCH預置畫布尺寸比真實分辨率小？

 　　為什麼Sketch中預置的畫板尺寸比真實分辨率小?這個問題被成百上千的初學者問起過，每次都要費勁口舌來解釋，可是靜電實在架不住每天兩三遍甚至更多人問起同樣的問題。那麼，就在這篇文章中，讓我們好好來解釋一下，為什麼預置畫板會這麼小。

　　事出有因，Sketch錯了嗎？

　　有太多太多剛剛上手sketch的小伙伴們都有這樣的問題，為什麼我在Sketch中建立畫板，軟件預置的Artboard尺寸總是那麼小呢?比如iphone6的真實分辨率是750-1334像素，但是sketch中的Artboard尺寸居然是375-667像素。同樣其他機型的預置尺寸也有問題，是sketch出錯了嗎?

　　PX和PT，別傻傻地分不清

　　我們必須了解最最基本的原理，才能在設計中以不變應萬變。首先我們來普及兩個度量單位 —— PX和PT。PX大家可能比較熟悉，就是像素，英文pixel的簡稱。靜電做最最通俗的解釋，請找一個放大鏡(不是電腦中的放大鏡，是真實的放-大-鏡)，然後對准自己面前的顯示器或者手機屏幕觀看，大部分顯示器會在放大鏡下出現一個一個的點。這就是我們平時所說的像素的概念。在一台物理分辨率為1080-1920的顯示器中，橫向分布1920個點，縱向則有1080個點。這些點通過顯示器的光學特性，為我們組成不同的圖像。

　　請注意， 在不同尺寸的顯示器上，這些點的單位面積並不是一樣的。比如一台22英寸的1080p液晶顯示器與一台同樣分辨率的27英寸的液晶顯示器，我們通過仔細觀察，可以發現這兩台顯示器的像素分布。直觀感受就是，27英寸1080p分辨率的顯示器的顯示效果明顯遜於22英寸1080p顯示器的效果，比如顆粒感嚴重等等。 一個重要的原因就是，兩台液晶面板中的“像素”顆粒大小不一。

　　由此可見，像素這個單位是一個相對單位，我們不能用厘米，毫米等等這些絕對度量單位來衡量他的長度或者寬度，因為，1像素只代表一個單位的“點”。

　　另一個重要單位是PT，這個單位也是iOS開發過程中使用的單位，與px這樣的相對單位不同，PT(Point)是一個絕對單位，中文名字是“磅因(或者磅)”，1PT等於1/72英寸。我們同樣用簡單直觀的例子來演示。

　　如果你手頭有兩部不同型號的iPhone，比如iphone6，iphone5，或者iphne4。靜電的推薦是用一部ip6和一部ip5或者ip6 plus，打開同樣一款應用。同時准備好一把尺子。

　　比如我們使用最多的QQ音樂，打開它，使用尺子分別測量最上方title“音樂館”文字的尺寸。經測量，音樂館文字的寬度為8mm，此時打開iphone6plus或者不同尺寸的ios手機，同樣測量它的尺寸，我們發現，“音樂館”文字的尺寸也約為8mm左右。如果大家覺得此方法並不合適，可以請iOS開發人員分別寫兩個針對不同尺寸機型適配的同一個文件，並在兩部手機安裝，確保這個文件中的字體使用一個字號，比如30PT。在兩個手機中運行並用尺子測量，我們發現他們的物理尺寸完全一樣。

　　請大家記住一點，px是相對單位，pt為絕對單位(類似單位為厘米，毫米等等)。在不確定屏幕密度的情況下，px與pt沒有任何可比性。

　　為什麼使用3XX像素作為sketch設計稿的基准寬度？

　　原因一 ：

　　對於px與pt如何轉換，涉及原理已經超出本文范圍，這裡簡單的告訴大家，當dpi=160的時候，1dp=1px=1pt(作者經驗結論)。那麼在這裡我們要引出為什麼使用375-667這樣的尺寸來做設計了，因為在這種情況下，也就是mdpi的分辨率(約320-480)時，1dp=1px=1pt。

　　簡單來計算下，當分辨率增大，比如增大到640-960px時，在密度不變的情況下，2px=1pt，因為像素點密集了，所以需要更多的點才能充滿單位物理尺寸。這也就是為什麼我們會覺得iphone4的畫面比3GS的畫面要細膩的原因，因為dpi(ppi)升高了。(dpi或者ppi為每英寸的點或者像素，代表密度。)

　　所以，320這個寬度(3XX)就作為基准寬度，也叫做一倍尺寸沿襲下來。因為使用1作為基數，換算確實方便。

　　下圖是設計稿輸出尺寸與分辨率對照表。

　　原因二 ：

　　對於iOS來說，同樣沿襲了這樣的概念，與安卓不同，320寬的基准分辨率下導出的素材為@1x，也叫做一倍圖。那麼在iphone4，iphone5或者iphone6上使用的圖則是@2x，也叫做二倍圖，同理，iphone6 plus為@3x三倍圖。大家應該都知道對應分辨率與導出圖片的對應關系。如果使用640寬或者750寬為基准作圖，當然不是不可以，只不過我們在輸出@3x圖的時候，是不是要乘以1.5呢? 如果你一定要用@3x三倍圖的分辨率作圖，那麼最終要生成二倍圖的時候，是不是要把輸出尺寸乘以三分之二呢?

　　如果是1.5還好，那麼三分之二到底是什麼鬼的倍數，0.6666666?有強迫的設計師真的看的過去麼?

　　但是，如果我們使用一倍圖設計，那麼1X2=@2x，1X3=@3x, 多麼的簡單方便又容易理解不是麼?

　　再加上sketch是全矢量繪圖軟件，不管你怎麼放大縮小，導出的位圖也是不會虛的。

　　原因三 ：

　　在開發工程師眼中，你如果使用640的分辨率作圖，那麼按原大小標注設計稿中的尺寸的話，他們同樣在開發環境中是要換算為一倍尺寸的，比如你標注了字號為40px，那麼最終開發工程師寫在代碼裡的就是20pt，除以2的關系。

　　但是呢，如果使用一倍基准分辨率作圖，那麼就不用除以2啦，所有尺寸開發工程師直接拿過去隨取隨用，多麼方便簡單。相信之前跟隨靜電的xcode教程做過demo的小伙伴，一定對xcode中的尺寸設定印象深刻對吧。

　　要了解原理，建議大家用一用xcode，親自體驗一下開發工程師工作的原理，相信你的這些問題都可以迎刃而解。

　　使用一倍基准分辨率作圖 —— 你的明智之選

　　sketch作為一款純矢量的移動端UI設計軟件，不管是從設計還是到後期與開發工程師的配合方面，都嚴格遵從開發原理，這種設計方法可以最大限度保證設計稿的復現，同時也可以減小文件體積和系統資源消耗，不管是從哪個方面看，都是設計師制作UI界面的明智之選。不過，基於位圖輸出的photoshop就沒這方面的福利了，雖然photoshop CC 2015加入了多畫板功能，不過然並卵。一個文件中放置五六張畫板對於sketch來說無比輕松，且輸出文件只有幾M，但反觀photoshop，動辄幾個G的文件體積和巨大的系統資源消耗，恩哼，你懂。

　　最後總結一下原因，設計師使用一倍基准尺寸作圖，主要是方便，單位轉換方便，輸出切圖方便，理解簡單。對於工程師，他們不用再進行復雜的換算，有助於完美復現設計稿。

　　因此，不管是國內還是國外，越來越多的設計師開始使用一倍基准尺寸設計移動界面，還在猶豫?就差你了。如果你身邊的朋友還在糾結於這個問題，特別是那些剛剛從photoshop轉到sketch的小伙伴，速度把這篇文章轉發給他們看吧。