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

事出有因，Sketch錯了嗎？

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

PX和PT，別傻傻地分不清

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

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

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

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

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

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

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

為什么使用3XX像素作為sketch設(shè)計稿的基準寬度？

原因一：

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

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

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

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

原因二：

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

如果是1.5還好，那么三分之二到底是什么鬼的倍數(shù)，0.6666666?有強迫的設(shè)計師真的看的過去么？

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

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

原因三：

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

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

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

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

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

最后總結(jié)一下原因，設(shè)計師使用一倍基準尺寸作圖，主要是方便，單位轉(zhuǎn)換方便，輸出切圖方便，理解簡單。對于工程師，他們不用再進行復(fù)雜的換算，有助于完美復(fù)現(xiàn)設(shè)計稿。

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

Sketch教程合集持續(xù)更新中：

1. 《SKETCH設(shè)計教室！從零開始學(xué)APP設(shè)計利器SKETCH（一）》
2. 《SKETCH設(shè)計教室！從零開始學(xué)APP設(shè)計利器SKETCH（二）》
3. 《SKETCH設(shè)計教室！帶你了解超好用的SKETCH插件》
4. 《想要一稿過不加班？SKETCH絕配神器MIRROR搶先體驗》
5. 《超實用！SKETCH大師最常用的3個實戰(zhàn)小技巧》
6. 《前端神器！為網(wǎng)頁設(shè)計而生的15個優(yōu)質(zhì)SKETCH插件》
7. 《SKETCH新手指南！10個幫你UI設(shè)計提速的SKETCH使用技巧》
8. 《超能陸戰(zhàn)隊！手把手教你用SKETCH繪制萌萌噠的大白》

作者：@JingDesign

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量99萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：