深度分析！為何sketch預(yù)置畫(huà)布尺寸比真實(shí)分辨率小？

@JingDesign?：為什么Sketch中預(yù)置的畫(huà)板尺寸比真實(shí)分辨率小？這個(gè)問(wèn)題被成百上千的初學(xué)者問(wèn)起過(guò)，每次都要費(fèi)勁口舌來(lái)解釋?zhuān)墒庆o電實(shí)在架不住每天兩三遍甚至更多人問(wèn)起同樣的問(wèn)題。那么，就在這篇文章中，讓我們好好來(lái)解釋一下，為什么預(yù)置畫(huà)板會(huì)這么小。

事出有因，Sketch錯(cuò)了嗎？

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

PX和PT，別傻傻地分不清

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

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

由此可見(jiàn)，像素這個(gè)單位是一個(gè)相對(duì)單位，我們不能用厘米，毫米等等這些絕對(duì)度量單位來(lái)衡量他的長(zhǎng)度或者寬度，因?yàn)椋?像素只代表一個(gè)單位的“點(diǎn)”。

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

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

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

請(qǐng)大家記住一點(diǎn)，px是相對(duì)單位，pt為絕對(duì)單位（類(lèi)似單位為厘米，毫米等等）。在不確定屏幕密度的情況下，px與pt沒(méi)有任何可比性。

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

原因一：

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

簡(jiǎn)單來(lái)計(jì)算下，當(dāng)分辨率增大，比如增大到640-960px時(shí)，在密度不變的情況下，2px=1pt，因?yàn)橄袼攸c(diǎn)密集了，所以需要更多的點(diǎn)才能充滿單位物理尺寸。這也就是為什么我們會(huì)覺(jué)得iphone4的畫(huà)面比3GS的畫(huà)面要細(xì)膩的原因，因?yàn)閐pi（ppi）升高了。（dpi或者ppi為每英寸的點(diǎn)或者像素，代表密度。）

所以，320這個(gè)寬度（3XX）就作為基準(zhǔn)寬度，也叫做一倍尺寸沿襲下來(lái)。因?yàn)槭褂?作為基數(shù)，換算確實(shí)方便。

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

原因二：

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

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

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

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

原因三：

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

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

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

使用一倍基準(zhǔn)分辨率作圖 —— 你的明智之選

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

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

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

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

1. 《SKETCH設(shè)計(jì)教室！從零開(kāi)始學(xué)APP設(shè)計(jì)利器SKETCH（一）》
2. 《SKETCH設(shè)計(jì)教室！從零開(kāi)始學(xué)APP設(shè)計(jì)利器SKETCH（二）》
3. 《SKETCH設(shè)計(jì)教室！帶你了解超好用的SKETCH插件》
4. 《想要一稿過(guò)不加班？SKETCH絕配神器MIRROR搶先體驗(yàn)》
5. 《超實(shí)用！SKETCH大師最常用的3個(gè)實(shí)戰(zhàn)小技巧》
6. 《前端神器！為網(wǎng)頁(yè)設(shè)計(jì)而生的15個(gè)優(yōu)質(zhì)SKETCH插件》
7. 《SKETCH新手指南！10個(gè)幫你UI設(shè)計(jì)提速的SKETCH使用技巧》
8. 《超能陸戰(zhàn)隊(duì)！手把手教你用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"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量99萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：